380 lines
10 KiB
Vue
380 lines
10 KiB
Vue
<template>
|
||
<div class="big-alarm-table-list-wrap">
|
||
<nav-temp htmlType="t2" :title="title">
|
||
<div class="center-wrap" slot="mk-center">
|
||
<div class="query-right-div">
|
||
<div class="alarm-census-wrap">
|
||
<div class="census-block">
|
||
<img src="@/assets/images/big/v3/iconG.png" />
|
||
已处理：
|
||
<span style="color: #0cff00">{{result['processed']}}</span>
|
||
</div>
|
||
<div class="census-block image-twinkle">
|
||
<img src="@/assets/images/big/v3/iconR.png" />
|
||
未处理：
|
||
<span style="color: red">{{result['unProcessed']}}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<el-checkbox-group v-model="queryCheckbox">
|
||
<el-checkbox label="warning">包含预警</el-checkbox>
|
||
<el-checkbox label="off">只显示离线报警</el-checkbox>
|
||
</el-checkbox-group>
|
||
</div>
|
||
<el-table
|
||
:data="list"
|
||
class="alarm-table alarm-table-tr"
|
||
height="190"
|
||
style="margin-top: 4px"
|
||
:highlight-pageNum-row="true"
|
||
>
|
||
<el-table-column
|
||
prop="projectName"
|
||
label="项目"
|
||
v-if="userLoginType !== 'PERSONAL'"
|
||
align="center"
|
||
width="350"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div style="display: flex; align-items: center">
|
||
<div :class="returnStartImg(scope.row.processStatus)">
|
||
</div>
|
||
<span
|
||
style="margin-left: 10px"
|
||
v-text="scope.row.projectName"
|
||
></span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="deviceName" label="线路" v-else align="center">
|
||
<template slot-scope="scope">
|
||
<div style="display: flex; align-items: center">
|
||
<div :class="returnStartImg(scope.row.processStatus)">
|
||
</div>
|
||
<span
|
||
style="margin-left: 10px"
|
||
v-text="scope.row.deviceName"
|
||
></span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="projectAddress"
|
||
label="地址"
|
||
v-if="userLoginType !== 'PERSONAL'"
|
||
align="left"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="deviceName"
|
||
label="线路"
|
||
align="center"
|
||
v-if="userLoginType !== 'PERSONAL'"
|
||
width="100"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span
|
||
style="
|
||
width: 100px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
"
|
||
>
|
||
{{ scope.row.deviceName }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="alarmDivide"
|
||
label="划分"
|
||
align="center"
|
||
width="100"
|
||
:formatter="alarmTypeFormatter"
|
||
></el-table-column>
|
||
|
||
<el-table-column
|
||
prop="typeName"
|
||
label="报警类型"
|
||
align="center"
|
||
:width="userLoginType !== 'PERSONAL' ? 120 : ''"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="alarmTime"
|
||
label="报警时间"
|
||
align="center"
|
||
:width="userLoginType !== 'PERSONAL' ? 160 : ''"
|
||
></el-table-column>
|
||
<!-- <el-table-column prop="t6" label="耗时" align="center" width="150"></el-table-column> -->
|
||
<el-table-column
|
||
prop="processStatus"
|
||
label="状态"
|
||
align="center"
|
||
width="120"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span
|
||
v-if="scope.row.processStatus === 'UNPROCESS'"
|
||
:style="'color: #FF2F60;'"
|
||
>未处理</span
|
||
>
|
||
<span
|
||
v-if="scope.row.processStatus === 'PROCESSED'"
|
||
:style="'color: #25F094;'"
|
||
>已处理</span
|
||
>
|
||
<span
|
||
v-if="scope.row.processStatus === 'IGNORE'"
|
||
:style="'color: #c0c4cc;'"
|
||
>忽略</span
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</nav-temp>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { appAlarmRecordList } from "@/api/app";
|
||
import NavTemp from "./navTemp";
|
||
export default {
|
||
name: "alarmTableList",
|
||
components: {
|
||
NavTemp,
|
||
},
|
||
props: ["projectId", 'result'],
|
||
data() {
|
||
return {
|
||
title: "实时报警列表",
|
||
queryCheckbox: [],
|
||
list: [],
|
||
userLoginType: "",
|
||
};
|
||
},
|
||
created() {
|
||
this.userLoginType = this.$store.getters.userType;
|
||
this.getAlarmRecrdList();
|
||
},
|
||
watch: {
|
||
projectId(val, oldval) {
|
||
this.getAlarmRecrdList();
|
||
},
|
||
queryCheckbox(val, oldVal) {
|
||
this.getAlarmRecrdList();
|
||
},
|
||
},
|
||
methods: {
|
||
returnStartImg(val) {
|
||
switch (val) {
|
||
case "UNPROCESS":
|
||
return "table-start-w bj-a";
|
||
break;
|
||
|
||
case "IGNORE":
|
||
return "table-start-w bj-jj";
|
||
break;
|
||
|
||
case "PROCESSED":
|
||
return "table-start-w bj-jc";
|
||
break;
|
||
}
|
||
},
|
||
alarmTypeFormatter(row) {
|
||
if (row.alarmDivide === "ALARM") {
|
||
return "报警";
|
||
} else if (row.alarmDivide === "WARNING") {
|
||
return "预警";
|
||
}
|
||
},
|
||
getAlarmRecrdList() {
|
||
appAlarmRecordList({
|
||
alarmDivide:
|
||
this.queryCheckbox.indexOf("warning") < 0 ? "ALARM" : undefined,
|
||
deviceState:
|
||
this.queryCheckbox.indexOf("off") >= 0 ? "OFFLINE" : undefined,
|
||
projectId: this.projectId || undefined,
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
}).then((res) => {
|
||
this.list = res.rows;
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.big-alarm-table-list-wrap {
|
||
width: 100%;
|
||
height: 280px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.center-wrap {
|
||
width: 100%;
|
||
height: calc(100% - 75px);
|
||
justify-content: center;
|
||
padding-top: 10px;
|
||
background-size: contain;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
width: 100%;
|
||
height: calc(100%);
|
||
// height: calc(100% - 75px);
|
||
padding: 0;
|
||
.query-right-div {
|
||
width: calc(100%);
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
padding-right: 40px;
|
||
height: 30px;
|
||
margin-top: -25px;
|
||
justify-content: space-between;
|
||
padding-left: 20px;
|
||
.el-checkbox__label {
|
||
color: #fff;
|
||
}
|
||
.alarm-census-wrap {
|
||
display: flex;
|
||
width: 600px;
|
||
color: #fff;
|
||
.census-block {
|
||
// width: 50%;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: flex-start;
|
||
flex-wrap: nowrap;
|
||
font-size: 16px;
|
||
letter-spacing: 1px;
|
||
margin-right: 10px;
|
||
> img {
|
||
margin-right: 5px;
|
||
}
|
||
> span {
|
||
font-size: 18px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #0cff00;
|
||
line-height: 26px;
|
||
}
|
||
}
|
||
.image-twinkle {
|
||
> img {
|
||
animation-name: light;
|
||
animation-duration: 1.25s;
|
||
animation-timing-function: linear;
|
||
animation-iteration-count: infinite;
|
||
animation-direction: alternate;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.alarm-table {
|
||
width: calc(100% - 20px);
|
||
margin-left: 20px;
|
||
.el-table__header-wrapper th,
|
||
.el-table .el-table__fixed-header-wrapper th {
|
||
// background-color: #0124a9;
|
||
background-color: #072d81;
|
||
color: #fff;
|
||
height: 50px;
|
||
border: 0 !important;
|
||
font-size: 16px;
|
||
letter-spacing: 2px;
|
||
}
|
||
.el-table__empty-block {
|
||
background: #0124a600;
|
||
}
|
||
tr {
|
||
background: #0124a600;
|
||
color: #fff;
|
||
}
|
||
.el-table__body-wrapper {
|
||
background: #0124a600;
|
||
}
|
||
.el-table__body tr:hover > td {
|
||
background-color: #0124a600 !important;
|
||
}
|
||
|
||
.el-table__body tr.current-row > td {
|
||
background-color: #0124a9 !important;
|
||
}
|
||
.el-table__body-wrapper::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
/*滚动条滑块*/
|
||
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||
background-color: #114f9d;
|
||
}
|
||
.has-gutter > tr {
|
||
color: #909399;
|
||
font-weight: 500;
|
||
}
|
||
.el-table__header-wrapper tr th {
|
||
font-size: 14px;
|
||
font-family: "Source Han Sans CN";
|
||
font-weight: 400;
|
||
color: #00feff;
|
||
line-height: 16px;
|
||
background: #072d81;
|
||
height: 35px !important;
|
||
}
|
||
}
|
||
.el-table {
|
||
background-color: #ffffff00;
|
||
td {
|
||
border-bottom: 1px solid #06459f;
|
||
padding: 3px 0;
|
||
}
|
||
}
|
||
.el-table::before {
|
||
height: 0px;
|
||
}
|
||
.table-start-w {
|
||
width: 88px;
|
||
height: 41px;
|
||
margin-right: 30px;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
font-size: 15px;
|
||
font-family: "Adobe Heiti Std";
|
||
font-weight: normal;
|
||
color: #ffc000;
|
||
line-height: 25px;
|
||
align-items: center;
|
||
.big-wraring-svg {
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
.bj-a {
|
||
background-image: url("../../../../assets/images/big/v3/btnR.png");
|
||
}
|
||
.bj-jc {
|
||
background-image: url("../../../../assets/images/big/v3/btnG.png");
|
||
}
|
||
.bj-jj {
|
||
background-image: url("../../../../assets/images/big/biao_03.png");
|
||
}
|
||
}
|
||
.alarm-table-tr {
|
||
.el-table__body-wrapper tbody tr {
|
||
background: #0124a600;
|
||
color: #fff;
|
||
background-size: cover;
|
||
width: 100%;
|
||
height: 50px;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
@keyframes light {
|
||
from {
|
||
opacity: 1;
|
||
}
|
||
to {
|
||
opacity: 0.2;
|
||
}
|
||
}
|
||
}
|
||
</style>
|