95 lines
2.5 KiB
Vue
95 lines
2.5 KiB
Vue
<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>
|
|
</template>
|
|
<script>
|
|
import Container from '../components/Container';
|
|
import TimePrompt from '../components/TimePrompt';
|
|
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>
|
|
<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);
|
|
this.timestr = switchShowTime('日');
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.timeShow {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 210px;
|
|
}
|
|
</style>
|