<template>
|
<div class="p-main flex-c">
|
<div class="btn-grp">
|
<el-button class="btn-alarm levelall" @click="changeLevel(0)"
|
>全部告警
|
<div class="num">{{ almCount[0] }}</div>
|
</el-button>
|
<el-button class="btn-alarm level0" @click="changeLevel(3)"
|
>紧急
|
<div class="num">{{ almCount[3] }}</div>
|
</el-button>
|
<el-button class="btn-alarm level1" @click="changeLevel(2)"
|
>重大
|
<div class="num">{{ almCount[2] }}</div>
|
</el-button>
|
<el-button class="btn-alarm level2" @click="changeLevel(1)"
|
>一般
|
<div class="num">{{ almCount[1] }}</div>
|
</el-button>
|
<el-button class="btn-alarm type" @click="changeType(1)"
|
>交流配电柜
|
<div class="num">{{ almCount["ac"] }}</div>
|
</el-button>
|
<el-button class="btn-alarm type" @click="changeType(2)"
|
>直流配电柜
|
<div class="num">{{ almCount["dc"] }}</div>
|
</el-button>
|
<el-button class="btn-alarm type" @click="changeType(3)"
|
>高频开关电源柜
|
<div class="num">{{ almCount["gc"] }}</div>
|
</el-button>
|
</div>
|
<panel class="panel p-content">
|
<div class="panel-content flex-c">
|
<div class="search">
|
<div class="s-item">
|
<div class="label">告警名称</div>
|
<div class="value">
|
<el-select
|
v-model="almName"
|
class="dark"
|
size="mini"
|
filterable
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="(item, idx) in almNames"
|
:key="'name_' + idx"
|
:label="item"
|
:value="idx"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="s-item">
|
<div class="label">告警等级</div>
|
<div class="value">
|
<el-select
|
v-model="almLevel"
|
class="dark"
|
size="mini"
|
@change="getList"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="(item, idx) in almLevels"
|
:key="'level_' + idx"
|
:label="item"
|
:value="idx"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="s-item">
|
<div class="label">告警开始时间</div>
|
<div class="value">
|
<el-date-picker
|
v-model="date1"
|
size="mini"
|
class="time_box dark"
|
type="date"
|
placeholder="选择日期"
|
@change="getList"
|
value-format="yyyy-MM-dd"
|
></el-date-picker
|
>-
|
<el-date-picker
|
v-model="date2"
|
size="mini"
|
class="time_box dark"
|
type="date"
|
placeholder="选择日期"
|
@change="getList"
|
value-format="yyyy-MM-dd"
|
></el-date-picker>
|
</div>
|
</div>
|
<div class="s-item">
|
<gradient-btn size="sm" @click="getList">查询</gradient-btn>
|
</div>
|
</div>
|
<div class="table-wrap">
|
<el-table
|
id="batteryrTimequeryTable"
|
stripe
|
size="small"
|
:data="table.datas"
|
height="100%"
|
class="table-dark"
|
tooltip-effect="light"
|
>
|
<el-table-column
|
label="序号"
|
type="index"
|
width="80"
|
></el-table-column>
|
<el-table-column
|
v-for="header in table.headers"
|
:key="header.prop"
|
:prop="header.prop"
|
:label="header.label"
|
:width="header.width"
|
:min-width="header.minWidth"
|
show-overflow-tooltip
|
align="center"
|
></el-table-column>
|
<el-table-column label="确认告警" width="120" align="center">
|
<template slot-scope="scope">
|
<el-checkbox
|
:value="!!scope.row.almIsConfirmed"
|
disabled
|
></el-checkbox>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="cztime"
|
fixed="right"
|
width="240px"
|
align="center"
|
label="操作"
|
>
|
<template slot-scope="scope">
|
<el-button
|
class="yellow"
|
size="mini"
|
@click="confirmAlarm(scope.row)"
|
>确认告警</el-button
|
>
|
<!-- <el-button class="l-green" disabled="" size="mini"
|
>告警详情</el-button
|
> -->
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<!-- 底部分页 -->
|
<el-pagination
|
class="pages center dark"
|
:current-page="pageNum"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:page-sizes="[10, 20, 30, 50, 100]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
></el-pagination>
|
</div>
|
</panel>
|
</div>
|
</template>
|
|
<script>
|
import Panel from "@/components/panel.vue";
|
import gradientBtn from "@/components/gradientBtn.vue";
|
|
import createWs from "@/assets/js/websocket/plus";
|
const WSMixin = createWs("ckPowerDevAlarmHisCount");
|
|
import { getList } from "./js/apis";
|
export default {
|
name: "",
|
|
mixins: [WSMixin],
|
components: {
|
Panel,
|
gradientBtn,
|
},
|
data() {
|
return {
|
almCount: {},
|
pageNum: 1,
|
pageSize: 10,
|
devType: 0,
|
almLevel: 0,
|
date1: "",
|
date2: "",
|
devtypes: ["全部", "交流配电柜", "直流配电柜", "高频开关电源柜"],
|
almLevels: ["全部", "一般", "重大", "紧急"],
|
total: 0,
|
table: {
|
headers: [
|
{
|
prop: "devName",
|
label: "设备名称",
|
minWidth: 180,
|
},
|
{
|
prop: "almName",
|
label: "告警名称",
|
width: 180,
|
},
|
{
|
prop: "almLevelStr",
|
label: "告警等级",
|
width: 120,
|
},
|
{
|
prop: "almStartTime",
|
label: "告警开始时间",
|
width: 180,
|
},
|
{
|
prop: "almConfirmedTime",
|
label: "告警确认时间",
|
width: 180,
|
},
|
{
|
prop: "almConfirmedTime",
|
label: "告警结束时间",
|
width: 180,
|
},
|
// {
|
// prop: "almIsConfirmed",
|
// label: "确认告警",
|
// width: 120,
|
// },
|
],
|
datas: [],
|
},
|
};
|
},
|
methods: {
|
changeLevel(level) {
|
this.almLevel = level;
|
this.getList();
|
},
|
changeType(value) {
|
this.devType = value;
|
this.getList();
|
},
|
onWSMessage1(res) {
|
let {
|
data: { list, total },
|
} = JSON.parse(res.data);
|
this.table.datas = list.map((v) => {
|
v.devName = ["", "交流配电柜", "直流配电柜", "高频开关电源柜"][
|
v.devType
|
];
|
v.almLevelStr = ["", "一般", "重大", "紧急"][v.almLevel];
|
return v;
|
});
|
this.total = total;
|
},
|
onWSMessage1(res) {
|
let { data } = JSON.parse(res.data);
|
this.almCount = data;
|
},
|
getList() {
|
let params = {
|
pageNum: this.pageNum,
|
pageSize: this.pageSize,
|
devType: this.devType,
|
almStartTime: this.date1
|
? this.date1 + " 00:00:00"
|
: "2023-01-01 00:00:00",
|
almStartTime1: this.date2
|
? this.date2 + " 23:59:59"
|
: new Date().format("yyyy-MM-dd hh:mm:ss"),
|
almLevel: this.almLevel,
|
};
|
console.log("=====9=", params, JSON.stringify(params));
|
// this.SOCKET1.send(JSON.stringify(params));
|
getList(params)
|
.then((res) => {
|
let {
|
code,
|
data: { list, total },
|
} = res.data;
|
let list1 = [];
|
let total1 = 0;
|
if (code) {
|
list1 = list.map((v) => {
|
v.devName = ["", "交流配电柜", "直流配电柜", "高频开关电源柜"][
|
v.devType
|
];
|
v.almLevelStr = ["", "一般", "重大", "紧急"][v.almLevel];
|
return v;
|
});
|
total1 = total;
|
}
|
this.table.datas = list1;
|
this.total = total1;
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
confirmAlarm(row) {
|
confirmAlarm(row.almId)
|
.then((res) => {
|
let { code, data } = res.data;
|
if (code && data) {
|
console.log(data);
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
// 展示数据数量
|
handleSizeChange(val) {
|
this.pageSize = val;
|
this.getList();
|
},
|
// 翻页
|
handleCurrentChange(val) {
|
this.pageNum = val;
|
this.getList();
|
},
|
},
|
|
mounted() {},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.p-main {
|
height: 100%;
|
.btn-grp {
|
.btn-alarm {
|
width: 160px;
|
height: 30px;
|
color: #fff;
|
font-size: 18px;
|
font-weight: bold;
|
padding: 0 6px;
|
border: 0 none;
|
:deep(span) {
|
display: flex;
|
color: inherit;
|
justify-content: space-between;
|
align-items: center;
|
.num {
|
background: #fff;
|
border-radius: 4px;
|
padding: 2px 16px;
|
}
|
}
|
&.levelall {
|
background: #78eef8;
|
|
color: #011f39;
|
.num {
|
background: #011f39;
|
color: #78eef8;
|
}
|
}
|
&.level0 {
|
background: #ff3801;
|
.num {
|
color: #ff3801;
|
}
|
}
|
&.level1 {
|
background: #f69f40;
|
.num {
|
color: #f69f40;
|
}
|
}
|
&.level2 {
|
background: #4871e3;
|
.num {
|
color: #4871e3;
|
}
|
}
|
|
&.type {
|
background: #4871e3;
|
width: auto;
|
.num {
|
margin-left: 1em;
|
color: #4871e3;
|
}
|
}
|
}
|
}
|
.p-content {
|
flex: 1;
|
margin-top: 4px;
|
:deep(.content) {
|
background: #011f39;
|
}
|
.panel-content {
|
height: 100%;
|
padding: 10px;
|
}
|
.search {
|
display: flex;
|
justify-content: space-around;
|
.s-item {
|
display: flex;
|
align-items: center;
|
.label {
|
color: #78eef8;
|
&::after {
|
content: ":";
|
}
|
margin-right: 0.4em;
|
}
|
}
|
}
|
.table-wrap {
|
flex: 1;
|
margin-top: 6px;
|
margin-bottom: 6px;
|
}
|
}
|
|
:deep(.el-checkbox__input.is-disabled.is-checked) .el-checkbox__inner {
|
background-color: #2155ff;
|
}
|
}
|
</style>
|
