mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 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

150
src/views/databoard/deepProcessing/EqAlarm.vue
View File

@@ -1,77 +1,93 @@
<template>
<div style="flex: 1;">
<Container name="设备报警" size="middle" style="">
<TimePrompt class="timeShow" :timestr="timestr" />
<div style="padding: 5px 10px;">
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='eqScrollBoard'/>
</div>
</Container>
</div>
<div style="flex: 1">
<Container
name="设备报警"
size="middle"
style="">
<TimePrompt
class="timeShow"
:timestr="timestr" />
<div style="padding: 5px 10px">
<dv-scroll-board
:config="config"
style="width: 575px; height: 380px"
ref="eqScrollBoard" />
</div>
</Container>
</div>
</template>
<script>
import Container from '../components/Container.vue';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils'
import { switchShowTime } from '../utils';
export default {
name: 'EqAlarm',
components: { Container, TimePrompt },
computed: {
sjgEquipment() {
return this.$store.state.websocket.sjgEquipment
}
},
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, 150, 190],
align: ['center'],
data: [],
// data: [
// [1, '四大线3小线铺纸机', 'EQ20240110130909000255', '正常', '否'],
// [2, '四大线2小线铺纸机', 'EQ20240110130848000254', '正常', '否'],
// [3, '四大线1小线铺纸机', 'EQ20240110130832000253', '正常', '否'],
// [4, '12线下片台', 'EQ20240110130817000252', '正常', '否'],
// [5, '11线下片台', ' EQ20240110130743000250', '正常', '否'],
// [6, '10线下片台', ' EQ20240110130743000250', '正常', '否'],
// [7, '4大线五区自动连线柜', 'EQ20240110130731000249', '正常', '否'],
// [8, '四大线四区2小线清洗机', 'EQ20240110112716000248', '正常', '否'],
// [9, '四大线四区1小线清洗机', 'EQ20240110112700000247', '正常', '否'],
// [10, '4大线四区自动连线柜', 'EQ20240110112646000246', '正常', '否']
// ],
rowNum: 10
}
}
},
mounted(){
this.timestr = switchShowTime('日')
},
watch:{
sjgEquipment: {
name: 'EqAlarm',
components: { Container, TimePrompt },
computed: {
sjgEquipment() {
return this.$store.state.websocket.sjgEquipment;
},
},
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, 150, 190],
align: ['center'],
data: [],
// data: [
// [1, '四大线3小线铺纸机', 'EQ20240110130909000255', '正常', '否'],
// [2, '四大线2小线铺纸机', 'EQ20240110130848000254', '正常', '否'],
// [3, '四大线1小线铺纸机', 'EQ20240110130832000253', '正常', '否'],
// [4, '12线下片台', 'EQ20240110130817000252', '正常', '否'],
// [5, '11线下片台', ' EQ20240110130743000250', '正常', '否'],
// [6, '10线下片台', ' EQ20240110130743000250', '正常', '否'],
// [7, '4大线五区自动连线柜', 'EQ20240110130731000249', '正常', '否'],
// [8, '四大线四区2小线清洗机', 'EQ20240110112716000248', '正常', '否'],
// [9, '四大线四区1小线清洗机', 'EQ20240110112700000247', '正常', '否'],
// [10, '4大线四区自动连线柜', 'EQ20240110112646000246', '正常', '否']
// ],
rowNum: 10,
},
};
},
mounted() {
this.timestr = switchShowTime('日');
},
watch: {
sjgEquipment: {
handler(newVal, oldVal) {
let outArr = this.sjgEquipment.map((item, index) => [
index+1,
`<span title=${item.name || ''}>${item.name || ''}</span>`,
`<span title=${item.code || ''}>${item.code || ''}</span>`,
item.status,
item.error? '是': '否'
]);
this.config.data = outArr
this.$refs['eqScrollBoard'].updateRows(outArr)
this.timestr = switchShowTime('日')
}
}
}
}
let outArr = this.sjgEquipment.map((item, index) => [
index + 1,
`<span title=${item.name || ''}>${item.name || ''}</span>`,
`<span title=${item.code || ''}>${item.code || ''}</span>`,
`<span><div style="${
item.status == '正常'
? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 '
: 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:13px 10px 0 0 '
}"></div> ${item.status || ''}</span>`,
`<span"><div style="${
item.error == false
? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 '
: 'box-shadow: 0px 0px 2px 1px red;width:6px;height:6px;border-radius: 50%; background-color: red;float:left;margin:13px 10px 0 0 '
}"></div> ${item.error == true ? '是' : '否' || ''}</span>`,
]);
this.config.data = outArr;
this.$refs['eqScrollBoard'].updateRows(outArr);
this.timestr = switchShowTime('日');
},
},
},
};
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.timeShow {
position: absolute;
top: 20px;
left: 170px;
position: absolute;
top: 20px;
left: 170px;
}
</style>
</style>

135
src/views/databoard/deepProcessing/WorkOrderMonitoring.vue
View File

@@ -1,67 +1,88 @@
<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>
<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'
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: {
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('日')
}
}
}
}
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.actualQuantity,
(item.progressRate * 100).toFixed(0) + '%',
]);
this.config.data = outArr;
this.$refs['worderScrollBoard'].updateRows(outArr);
this.timestr = switchShowTime('日');
},
},
},
};
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.timeShow {
position: absolute;
top: 20px;
left: 170px;
position: absolute;
top: 20px;
left: 170px;
}
</style>
</style>