56 lines
2.1 KiB
Vue
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> |