|
|
<template>
|
|
|
<div class="mainBox scroll-target">
|
|
|
<div class="topZS"></div>
|
|
|
<div class="title">
|
|
|
实时预警（<span>{{ total }}</span>）
|
|
|
</div>
|
|
|
<div class="monitorBox">
|
|
|
<el-table :cell-style="{ background: 'revert' }" :data="tableData" class="table"
|
|
|
style="width: calc(100% - 40px); margin: 20px;" :row-style="tableRowStyle"
|
|
|
:header-row-style="tableHeaderColor" :header-cell-style="tableHeaderCellColor">
|
|
|
<el-table-column type="index" width="50" label="序号">
|
|
|
</el-table-column>
|
|
|
<el-table-column show-overflow-tooltip label="预警等级">
|
|
|
<template slot-scope="scope">
|
|
|
<div class="alarmType">
|
|
|
<div class="red" v-if="scope.row.alarmColor == 'red'">红色预警</div>
|
|
|
<div class="yellow" v-if="scope.row.alarmColor == 'yellow'">黄色预警</div>
|
|
|
<div class="blue" v-if="scope.row.alarmColor == 'blue'">蓝色预警</div>
|
|
|
<div class="green" v-if="scope.row.alarmColor == 'green'">绿色预警</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column show-overflow-tooltip prop="alarmIndex" label="预警指标">
|
|
|
</el-table-column>
|
|
|
<el-table-column show-overflow-tooltip prop="alarmTime" label="预警时间">
|
|
|
</el-table-column>
|
|
|
<el-table-column show-overflow-tooltip prop="alarmStatusCn" label="处置状态">
|
|
|
</el-table-column>
|
|
|
<el-table-column show-overflow-tooltip prop="updateTime" label="更新时间">
|
|
|
</el-table-column>
|
|
|
<el-table-column show-overflow-tooltip label="操作" width="80">
|
|
|
<template slot-scope="scope">
|
|
|
<div class="detail" @click="checkDetail(scope.row)">
|
|
|
<button class="xiangqing">详情</button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<div class="block">
|
|
|
<el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"
|
|
|
@size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
|
|
|
:page-sizes="[5]" layout="total, sizes, prev, pager, next, jumper" :total="total">
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
<div class="bottomZS"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import { warningDisposal } from '@/api/archives'
|
|
|
export default {
|
|
|
props: ['companyID'],
|
|
|
data() {
|
|
|
return {
|
|
|
pageSize: 5,
|
|
|
pageNum: 1,
|
|
|
total: 0,
|
|
|
isShow: [{ show: false }, { show: false }, { show: false }, { show: false }, { show: false }],
|
|
|
diaVisible: false,
|
|
|
tableData: [],
|
|
|
}
|
|
|
},
|
|
|
|
|
|
created() {
|
|
|
this.getList()
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
getList() {
|
|
|
warningDisposal({ pageSize: this.pageSize, pageNum: this.pageNum, companyId: this.companyID }).then(res => {
|
|
|
this.tableData = res.data
|
|
|
this.total = res.total
|
|
|
})
|
|
|
},
|
|
|
showShadow(val) {
|
|
|
this.isShow[val].show = true
|
|
|
},
|
|
|
closeShadow(val) {
|
|
|
this.isShow[val].show = false
|
|
|
},
|
|
|
showDia() {
|
|
|
this.diaVisible = true
|
|
|
},
|
|
|
tableRowStyle({ rowIndex }) {
|
|
|
if ((rowIndex + 1) % 2 == 1) {
|
|
|
return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0' }
|
|
|
} else {
|
|
|
return { 'background': 'rgba(61, 85, 102, 0.16)', 'border': '0', 'color': '#fff' }
|
|
|
}
|
|
|
},
|
|
|
tableHeaderColor() {
|
|
|
return { 'background': 'linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)' }
|
|
|
// return { 'background': 'url("~@/assets/archives/列表9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
|
|
|
},
|
|
|
tableHeaderCellColor() {
|
|
|
return { 'background': 'rgba(0,0,0,0)', 'border': '0', 'color': '#fff' }
|
|
|
},
|
|
|
handleSizeChange(val) {
|
|
|
console.log(`每页 ${val} 条`);
|
|
|
this.pageNum = 1;
|
|
|
this.pageSize = val;
|
|
|
this.getList()
|
|
|
},
|
|
|
handleCurrentChange(val) {
|
|
|
console.log(`当前页: ${val}`);
|
|
|
this.pageNum = val;
|
|
|
this.getList()
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.mainBox {
|
|
|
width: 100%;
|
|
|
height: 450px;
|
|
|
background: url('~@/assets/companyFile/背景22136.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
padding: 70px 20px 60px;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
position: relative;
|
|
|
margin-top: 20px;
|
|
|
|
|
|
.monitorBox {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
/deep/.el-input {
|
|
|
.el-input__inner {
|
|
|
// background: url('~@/assets/companyFile/2121.png') no-repeat;
|
|
|
background: url('~@/assets/companyFile/back003.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
border: 1px solid rgba(40, 132, 126, 1);
|
|
|
color: rgba(234, 246, 255, 0.7);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/deep/.el-table {
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
|
|
|
td.el-table__cell {
|
|
|
border: 0;
|
|
|
}
|
|
|
|
|
|
.xiangqing {
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
border: 0;
|
|
|
color: rgba(48, 196, 255, 0.7);
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.alarmType {
|
|
|
width: 72px;
|
|
|
height: 32px;
|
|
|
font-size: 14px;
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
letter-spacing: 1px;
|
|
|
font-weight: 400;
|
|
|
|
|
|
.red {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: rgba(152, 7, 7, 0.21);
|
|
|
border: 1px solid rgba(214, 38, 38, 1);
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.yellow {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: rgba(152, 95, 7, 0.21);
|
|
|
border: 1px solid rgba(255, 169, 38, 1);
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.blue {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: rgba(6, 89, 197, 0.21);
|
|
|
border: 1px solid rgb(11, 108, 205);
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.green {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: rgba(6, 184, 27, 0.21);
|
|
|
border: 1px solid rgb(1, 170, 43);
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
position: absolute;
|
|
|
top: 14px;
|
|
|
left: 20px;
|
|
|
width: 162px;
|
|
|
height: 36px;
|
|
|
line-height: 36;
|
|
|
|
|
|
font-size: 16px;
|
|
|
color: #EBFFF4;
|
|
|
letter-spacing: 2px;
|
|
|
line-height: 36px;
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 195, 0.60);
|
|
|
font-weight: 400;
|
|
|
|
|
|
span {
|
|
|
color: #FF9191;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
}
|
|
|
</style> |
