mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

驾驶舱

Browse Source
This commit is contained in:
朱菊兰
2024-04-24 13:30:06 +08:00
parent 0fffed9b0e
commit 1d9e272f99
11 changed files with 674 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/views/databoard/wholePlant/OrderStatus.vue
View File

@@ -1,70 +1,94 @@
<template>
<div style="flex: 1;" class="orderContainer">
<Container name="订单完成情况" size="small" style="">
<TimePrompt class="timeShow" :timestr="timestr" />
<div style="padding: 5px 10px;">
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
</div>
</Container>
</div>
<div
style="flex: 1"
class="orderContainer">
<Container
name="订单完成情况"
size="small"
style="">
<TimePrompt
class="timeShow"
:timestr="timestr" />
<div style="padding: 5px 10px">
<dv-scroll-board
:config="config"
style="width: 575px; height: 230px"
ref="orderScrollBoard" />
</div>
</Container>
</div>
</template>
<script>
import Container from '../components/Container'
import Container from '../components/Container';
import TimePrompt from '../components/TimePrompt';
import { formatDate } from '@/utils'
import { switchShowTime } from '../utils'
import { formatDate } from '@/utils';
import { switchShowTime } from '../utils';
export default {
name: 'OrderStatus',
components: { Container, TimePrompt },
computed: {
order() {
return this.$store.state.websocket.order
}
},
data() {
return {
timestr: '',
config: {
header: ['上线时间', '客户名称', '规格','完成度'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [155, 160, 150],
data: [],
rowNum: 6
}
}
},
mounted() {
this.timestr = switchShowTime('日')
},
watch:{
order:{
handler() {
let outArr = this.order.map((item) => [
formatDate(item.planStartTime) || '',
`<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
`<span title=${item.specifications || ''}>${item.specifications || ''}</span>`,
`<span style="display:inline-block;width:60px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
name: 'OrderStatus',
components: { Container, TimePrompt },
computed: {
order() {
return this.$store.state.websocket.order;
},
},
data() {
return {
timestr: '',
config: {
header: ['上线时间', '客户名称', '规格', '完成度'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [155, 160, 150],
data: [],
rowNum: 6,
},
};
},
mounted() {
this.timestr = switchShowTime('日');
},
watch: {
order: {
handler() {
let outArr = this.order.map((item) => [
formatDate(item.planStartTime) || '',
`<span title=${item.customerName || ''}>${
item.customerName || ''
}</span>`,
`<span title=${item.specifications || ''}>${
item.specifications || ''
}</span>`,
`<span style="display:inline-block;width:60px;">${
item.completeRate
? (item.completeRate * 100).toFixed(2) + '%'
: '0%'
}</span>
<div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
<svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
<circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
<circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${item.completeRate?item.completeRate.toFixed(2)*37.68+','+((1-item.completeRate.toFixed(2))*37.68):(0+','+37.68)}"/>
<circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${
item.completeRate
? item.completeRate.toFixed(2) * 37.68 +
',' +
(1 - item.completeRate.toFixed(2)) * 37.68
: 0 + ',' + 37.68
}"/>
</svg>
</div>`
]);
this.config.data = outArr
this.$refs['orderScrollBoard'].updateRows(outArr)
this.timestr = switchShowTime('日')
}
}
}
}
</div>`,
]);
this.config.data = outArr;
this.$refs['orderScrollBoard'].updateRows(outArr);
this.timestr = switchShowTime('日');
},
},
},
};
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.timeShow {
position: absolute;
top: 20px;
left: 210px;
position: absolute;
top: 20px;
left: 210px;
}
</style>
</style>