135 lines
3.3 KiB
Vue
135 lines
3.3 KiB
Vue
<template>
|
|
<div style="height: 100%">
|
|
<ChartsBox :boxTitle="`报警信息`">
|
|
<div class="container">
|
|
<!-- <div class="feel-box"></div> -->
|
|
<dv-scroll-board class="dv-scr-board" :config="config" />
|
|
</div>
|
|
</ChartsBox>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ChartsBox from '@/components/ChartsBox/index'
|
|
import { getWarnInfoAPI } from '@/api/home-high-formwork.js'
|
|
export default {
|
|
components: { ChartsBox },
|
|
props: {
|
|
queryId: {
|
|
type: [String, Number],
|
|
default: () => '',
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
config: {
|
|
data: [],
|
|
rowNum: 5, //表格行数
|
|
headerHeight: 35,
|
|
headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
|
|
oddRowBGC: '', //奇数行
|
|
evenRowBGC: '', //偶数行
|
|
|
|
columnWidth: [80],
|
|
align: ['center'],
|
|
hoverPause: true,
|
|
waitTime: 3000,
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
async getWarnInfoData(id) {
|
|
const { data: res } = await getWarnInfoAPI({ id })
|
|
console.log(
|
|
`%c🔍 报警信息 ----> 设备列表(右三) 数据出参 %c`,
|
|
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
|
'',
|
|
res,
|
|
)
|
|
|
|
if (res.length > 0) {
|
|
console.log('996')
|
|
|
|
const newData = res.map((e) => [
|
|
`<img src="${require('@/assets/image/pro-view/blue.png')}" class="table-img">`,
|
|
`<span class="colorBlue">${e.remark}</span>`,
|
|
`<span class="colorBlue">${e.devName}</span>`,
|
|
`<span class="time-box colorBlue">${e.createTime}</span>`,
|
|
])
|
|
|
|
// 替换整个 config 对象，触发组件更新
|
|
this.config = {
|
|
...this.config, // 保留原有配置
|
|
data: newData, // 更新数据
|
|
}
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
queryId: {
|
|
handler(newValue) {
|
|
this.getWarnInfoData(newValue)
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
height: 100%;
|
|
|
|
.dv-scr-board {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
to bottom right,
|
|
rgba(21, 53, 81, 0.2),
|
|
rgba(6, 30, 66, 0.7)
|
|
);
|
|
}
|
|
}
|
|
|
|
::v-deep .img-box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.three-img {
|
|
transform: translateX(10px);
|
|
}
|
|
.red-img {
|
|
transform: translateX(3px);
|
|
}
|
|
}
|
|
::v-deep .dv-scroll-board .rows .ceil {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
::v-deep .colorBlue {
|
|
color: #6aaef3 !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
::v-deep.colorRed {
|
|
color: #ff5534;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
::v-deep .time-box {
|
|
font-family: 'DS-TITle';
|
|
display: block;
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
::v-deep .dv-scroll-board .rows .ceil {
|
|
width: auto !important;
|
|
min-width: 80px; /* 最小宽度 */
|
|
}
|
|
</style>
|