94 lines
3.2 KiB
Vue
94 lines
3.2 KiB
Vue
<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>
|
|
</template>
|
|
<script>
|
|
import Container from '../components/Container.vue';
|
|
import TimePrompt from '../components/TimePrompt';
|
|
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: {
|
|
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>`,
|
|
`<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>
|
|
.timeShow {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 170px;
|
|
}
|
|
</style>
|