yudao-dev/src/views/databoard/deepProcessing/WorkOrderMonitoring.vue
2024-01-18 14:05:39 +08:00

67 lines
1.9 KiB
Vue

<template>
<Container name="工单监控" size="middle" style="">
<TimePrompt class="timeShow" :timestr="timestr" />
<div style="padding: 5px 10px;" class="WOMonitoring">
<dv-scroll-board :config="config" style="width:900px;height:380px" ref='worderScrollBoard'/>
</div>
</Container>
</template>
<script>
import Container from '../components/Container.vue';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils'
import { formatDate } from '@/utils'
export default {
name: 'WorkOrderMonitoring',
components: { Container, TimePrompt },
computed: {
order() {
return this.$store.state.websocket.workOrder
}
},
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: [60, 120, 120, 60, 100, 150],
align: ['center'],
data: [],
rowNum:10
}
}
},
mounted(){
this.timestr = switchShowTime('日')
},
watch:{
order: {
handler(newVal, oldVal) {
let outArr = this.order.map((item, index) => [
index+1,
`<span title=${item.name || ''}>${item.name || ''}</span>`,
item.specifications,
item.lines,
this.getDictDatas(this.DICT_TYPE.ORDER_STATUS)[item.status]?.label,
formatDate(item.planFinishTime),
item.planQuantity,
item.planAssignQuantity
]);
this.config.data = outArr
this.$refs['worderScrollBoard'].updateRows(outArr)
this.timestr = switchShowTime('日')
}
}
}
}
</script>
<style lang='scss' scoped>
.timeShow {
position: absolute;
top: 20px;
left: 170px;
}
</style>