103 lines
3.0 KiB
Vue
103 lines
3.0 KiB
Vue
<template>
|
|
<ModelBox name='1-2'>
|
|
<div class='eq-alarm'>
|
|
<dv-scroll-board ref='locationScrollBoard' :config="config" style="width:580px;height:250px;margin-top: 10px;" />
|
|
<span class='split-line' style='left: 66px;'></span>
|
|
<span class='split-line' style='left: 226px;'></span>
|
|
<span class='split-line' style='left: 366px;'></span>
|
|
</div>
|
|
</ModelBox>
|
|
</template>
|
|
<script>
|
|
import ModelBox from './ModelBox.vue';
|
|
export default {
|
|
name: 'EqAlarm',
|
|
components: {
|
|
ModelBox
|
|
},
|
|
props: {
|
|
dataObj: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
watch: {
|
|
dataObj: {
|
|
handler(newVal, oldVal) {
|
|
console.log(newVal, 'newVal');
|
|
if (newVal) {
|
|
this.tableData = newVal
|
|
let eqArr = this.tableData.map((item, index) => [
|
|
`<span style="color:#000;" >${index + 1 || ''}
|
|
</span>`,
|
|
// formatDate(item.planStartTime) || '',
|
|
`
|
|
<span style="color:#000;" >${this.formatDate(item.time) || ''}
|
|
</span>`,
|
|
`<span style="color:#000;">${item.equipmentName || ''}</span>`,
|
|
`<span style="color:#000;">${item.content || ''}</span>`,
|
|
])
|
|
this.config.data = eqArr
|
|
this.$refs['locationScrollBoard'].updateRows(eqArr)
|
|
}
|
|
// this.getChart(this.todayClass)
|
|
},
|
|
deep: true // 深度监听
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tableData:[],
|
|
config:{
|
|
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">报警时间</span>', '<span style="color:#000;">报警设备</span>', '<span style="color:#000;">报警内容</span>'],
|
|
headerHeight: 25,
|
|
headerBGC: '#E8EDF8',
|
|
oddRowBGC:'#E8EDF8',
|
|
evenRowBGC:'#fff',
|
|
rowNum: 8,
|
|
columnWidth: [66, 160, 140, 214],
|
|
align : ['center', 'center', 'center', 'center'],
|
|
data: [
|
|
]
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
init() {
|
|
|
|
},
|
|
formatDate(time) {
|
|
if (!time) return '';
|
|
|
|
// 如果是时间戳格式
|
|
if (typeof time === 'number' || !isNaN(time)) {
|
|
const date = new Date(parseInt(time));
|
|
return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
|
}
|
|
|
|
// 如果是ISO字符串格式
|
|
if (typeof time === 'string') {
|
|
const date = new Date(time);
|
|
if (!isNaN(date.getTime())) {
|
|
return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
|
}
|
|
}
|
|
|
|
return time;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
.eq-alarm {
|
|
position: relative;
|
|
.split-line {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 1px;
|
|
height: 250px;
|
|
background: #CDD3DF;
|
|
}
|
|
}
|
|
</style>
|