136 lines
3.5 KiB
Vue
136 lines
3.5 KiB
Vue
<template>
|
||
<div style="height: 100%">
|
||
<ChartsBox :boxTitle="`报警信息`">
|
||
<div class="container" v-if="config.data.length > 0">
|
||
<!-- <div class="feel-box"></div> -->
|
||
<dv-scroll-board class="dv-scr-board" :config="config" />
|
||
</div>
|
||
|
||
<div class="container" v-else>
|
||
<EmptyModel />
|
||
</div>
|
||
</ChartsBox>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import ChartsBox from '@/components/ChartsBox/index'
|
||
import EmptyModel from '@/components/EmptyModel/index.vue'
|
||
import { getConcreteAlarmListAPI } from '@/api/home-foundation-pit.js'
|
||
export default {
|
||
components: { ChartsBox, EmptyModel },
|
||
|
||
data() {
|
||
return {
|
||
config: {
|
||
data: [],
|
||
rowNum: 5, //表格行数
|
||
headerHeight: 35,
|
||
headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
|
||
oddRowBGC: '', //奇数行
|
||
evenRowBGC: '', //偶数行
|
||
align: ['center'],
|
||
hoverPause: true,
|
||
waitTime: 3000,
|
||
},
|
||
}
|
||
},
|
||
methods: {
|
||
async getConcreteAlarmListData() {
|
||
const { data: res } = await getConcreteAlarmListAPI({
|
||
typeCode: '9000300',
|
||
})
|
||
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, // 更新数据
|
||
}
|
||
}
|
||
},
|
||
},
|
||
|
||
created() {
|
||
this.getConcreteAlarmListData()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
|
||
.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>
|