312 lines
12 KiB
Vue
312 lines
12 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'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: { ChartsBox },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
config: {
|
||
|
|
data: [
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件1',
|
||
|
|
'dev-1',
|
||
|
|
"<span class='colorGrass'>↑75%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件2',
|
||
|
|
'dev-2',
|
||
|
|
"<span class='colorRed'>↓33%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<div class='img-box'><img src='" +
|
||
|
|
require('@/assets/image/pro-view/red.png') +
|
||
|
|
"' class='table-img red-img'><img src='" +
|
||
|
|
require('@/assets/image/pro-view/three.png') +
|
||
|
|
"' class='three-img'></div>",
|
||
|
|
'组件3',
|
||
|
|
'dev-3',
|
||
|
|
"<span class='colorGrass'>↑100%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件4',
|
||
|
|
'rea-1',
|
||
|
|
"<span class='colorGrass'>↑94%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件5',
|
||
|
|
'rea-2',
|
||
|
|
"<span class='colorGrass'>↑95%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"<img src='" +
|
||
|
|
require('@/assets/image/pro-view/blue.png') +
|
||
|
|
"' class='table-img'>",
|
||
|
|
'组件6',
|
||
|
|
'fix-2',
|
||
|
|
"<span class='colorGrass'>↑63%</span>",
|
||
|
|
],
|
||
|
|
],
|
||
|
|
rowNum: 10, //表格行数
|
||
|
|
headerHeight: 35,
|
||
|
|
headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
|
||
|
|
oddRowBGC: '', //奇数行
|
||
|
|
evenRowBGC: '', //偶数行
|
||
|
|
|
||
|
|
columnWidth: [80],
|
||
|
|
align: ['center'],
|
||
|
|
hoverPause: true,
|
||
|
|
waitTime: 2000,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</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;
|
||
|
|
}
|
||
|
|
</style>
|