yudao-dev/src/views/databoard/wholePlant/OrderStatus.vue
2024-01-17 09:11:02 +08:00

56 lines
2.1 KiB
Vue

<template>
<div style="flex: 1;" class="orderContainer">
<Container name="订单完成情况" size="small" style="">
<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 { formatDate } from '@/utils'
export default {
name: 'OrderStatus',
components: { Container },
computed: {
order() {
return this.$store.state.websocket.order
}
},
data() {
return {
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() {},
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)}"/>
</svg>
</div>`
]);
this.config.data = outArr
this.$refs['orderScrollBoard'].updateRows(outArr)
}
}
}
}
</script>