<template>
|
<div class="page-contain">
|
<!-- 左 -->
|
<div class="list-side">
|
<div class="station-list">
|
<!-- 班组 站点列表 -->
|
<div class="list-item" v-for="(item, i) in list" :key="'list_' + i">
|
<div class="teamName">{{ item.groupName }}</div>
|
<div class="list-scroller">
|
<div class="inner">
|
<div class="box">
|
<div
|
:class="[
|
'sub-item',
|
{
|
alarm: sub.alarmFlag,
|
active: sub.stationId == currentStation.stationId,
|
},
|
]"
|
v-for="(sub, idx) in item.stationInfList"
|
:key="'sub_' + idx"
|
@click="changeCurr(sub)"
|
>
|
{{ sub.stationName3 }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 站点告警信息 -->
|
<div class="info">
|
<div class="title">
|
告警列表<span>当前站点: {{ currentStation.stationName3 }}</span>
|
<el-button
|
v-if="!currentStation.alarmList.length"
|
@click="goRealTime(currentStation)"
|
type="success"
|
size="mini"
|
>实时监控</el-button
|
>
|
<span v-else></span>
|
</div>
|
<div class="table-wrap full">
|
<div class="table-contain">
|
<el-table
|
:data="currentStation.alarmList || []"
|
stripe
|
size="mini"
|
height="100%"
|
style="width: 100%"
|
>
|
<el-table-column type="index" label="序号"></el-table-column>
|
<el-table-column
|
:prop="item.prop"
|
:label="item.label"
|
:min-width="item.minWidth"
|
:resizable="false"
|
align="center"
|
v-for="(item, index) in alarmHeaders"
|
:key="index"
|
></el-table-column>
|
<!-- <el-table-column
|
label="重要紧急"
|
min-width="120"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<el-tag
|
:type="scope.row.almSeverity ? 'danger' : 'warning'"
|
effect="dark"
|
>
|
{{ scope.row.almSeverity ? "紧急告警" : "重要告警" }}
|
</el-tag>
|
</template>
|
</el-table-column> -->
|
<el-table-column
|
label="操作"
|
fixed="right"
|
min-width="200"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<el-button
|
@click="goAlarm(scope.row)"
|
type="primary"
|
size="mini"
|
>实时告警</el-button
|
>
|
<el-button
|
@click="goRealTime(scope.row)"
|
type="success"
|
size="mini"
|
>实时监控</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 右 -->
|
<div class="map-side">
|
<!-- 地图 -->
|
<div class="map-contain">
|
<map-chart :roam="true" ref="map"></map-chart>
|
</div>
|
<!-- 班组统计信息 -->
|
<!-- 表格 -->
|
<div class="table-wrap">
|
<div class="table-contain">
|
<el-table
|
:data="list"
|
stripe
|
size="mini"
|
height="100%"
|
style="width: 100%"
|
>
|
<el-table-column
|
:prop="item.prop"
|
:label="item.label"
|
:min-width="item.minWidth"
|
:resizable="false"
|
align="center"
|
v-for="(item, index) in headers"
|
:key="index"
|
></el-table-column>
|
<el-table-column label="标记颜色" min-width="100" align="center">
|
<template slot-scope="scope">
|
<div
|
class="color-panel"
|
:style="{ backgroundColor: scope.row.color }"
|
></div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import MapChart from "@/components/myCharts/MapChart.vue";
|
import { getBattGroupIdByDevId } from "@/assets/js/api";
|
import createWs from "@/assets/js/websocket";
|
const WSMixin = createWs("groupStation");
|
|
// 班组管理的站点颜色 超过七个班组的第七个及以后的都用最后一种颜色
|
const colors = [
|
"#fecb40",
|
"#219141",
|
"#23a8f2",
|
"#ff8080",
|
"#1c9d95",
|
"#b91fea",
|
"#d64d0d",
|
];
|
export default {
|
name: "",
|
|
mixins: [WSMixin],
|
data() {
|
return {
|
currentStation: {},
|
list: [],
|
headers: [
|
{
|
prop: "groupName",
|
label: "班组名称",
|
minWidth: 160,
|
},
|
{
|
prop: "stationCount",
|
label: "管理机房数",
|
minWidth: 100,
|
},
|
{
|
prop: "battAlarmCount",
|
label: "电池告警数",
|
minWidth: 100,
|
},
|
{
|
prop: "powerAlarmCount",
|
label: "电源告警数",
|
minWidth: 100,
|
},
|
{
|
prop: "deviceAlarmCount",
|
label: "设备告警数",
|
minWidth: 100,
|
},
|
],
|
// tableData: [],
|
alarmData: [],
|
alarmHeaders: [
|
{
|
prop: "alarmName",
|
label: "告警名称",
|
minWidth: 160,
|
},
|
{
|
prop: "almStartTime",
|
label: "告警开始时间",
|
minWidth: 120,
|
},
|
// {
|
// prop: "almLevel",
|
// label: "告警等级",
|
// minWidth: 120,
|
// },
|
],
|
};
|
},
|
components: {
|
MapChart,
|
},
|
methods: {
|
getBattGroupIdByDevId(devId) {
|
return getBattGroupIdByDevId(devId)
|
.then((res) => {
|
let { code, data, data2 } = res.data;
|
if (code && data) {
|
return data2;
|
} else {
|
return false;
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
goAlarm(obj) {
|
let search =
|
"?province=" +
|
obj.stationName1 +
|
"&city=" +
|
obj.stationName2 +
|
"&county=" +
|
obj.stationName5 +
|
"&home=" +
|
obj.stationName3 +
|
"&stationName=" +
|
obj.stationName +
|
"&fromType=fromIndex&pageFlag=" +
|
Math.random();
|
switch (obj.aType) {
|
case "power":
|
// pwrAlmFlag=115 南网 跳转到通讯电源实时告警 其它110等全跳转电源实时告警页面
|
if (obj.pwrAlmFlag == 115) {
|
// 通讯电源实时告警
|
this.$router.push("/alarmMager/powerBoxAlarm" + search);
|
} else {
|
//电源实时告警
|
this.$router.push("/alarmMager/powerRealtimeInfo" + search);
|
}
|
break;
|
case "device":
|
//设备实时告警
|
this.$router.push(
|
"/alarmMager/deviceTimequery" +
|
search +
|
"&stationId=" +
|
obj.stationId
|
);
|
break;
|
case "batt":
|
//电池实时告警
|
this.$router.push("/alarmMager/batteryrTimequery" + search);
|
break;
|
}
|
},
|
async goRealTime(obj) {
|
let search =
|
"?province=" +
|
obj.stationName1 +
|
"&city=" +
|
obj.stationName2 +
|
"&county=" +
|
obj.stationName5 +
|
"&home=" +
|
obj.stationName3 +
|
// list组件重载
|
"&listReload=1";
|
let battGroupId;
|
switch (obj.aType) {
|
case "device":
|
battGroupId = await this.getBattGroupIdByDevId(obj.devId);
|
if (battGroupId) {
|
search += "&batt=" + battGroupId;
|
}
|
break;
|
case "batt":
|
battGroupId = obj.battGroupId;
|
search += "&batt=" + battGroupId;
|
break;
|
}
|
this.$router.push("/dataTest/movingRingSystem/" + search);
|
},
|
onWSMessage(res) {
|
let rs = JSON.parse(res.data);
|
// console.log(rs, "=-===msg");
|
let stationList = [];
|
let list = [];
|
if (rs.code) {
|
// this.list = rs.data;
|
rs.data.forEach((v, i) => {
|
let color =
|
i <= colors.length - 1 ? colors[i] : colors[colors.length - 1];
|
v.color = color;
|
v.stationInfList.map((item) => {
|
item.color = color;
|
let battAlarmList = item.battAlarmList || [],
|
deviceAlarmList = item.deviceAlarmList || [],
|
powerAlarmList = item.powerAlarmList || [];
|
|
item.alarmList = [
|
...powerAlarmList.map((v) => ({ ...v, aType: "power" })),
|
...battAlarmList.map((v) => ({ ...v, aType: "batt" })),
|
...deviceAlarmList.map((v) => ({ ...v, aType: "device" })),
|
];
|
});
|
stationList.push(...v.stationInfList);
|
list.push(v);
|
});
|
}
|
this.list = list;
|
if (!this.currentStation.stationId) {
|
this.currentStation = list[0].stationInfList[0];
|
}
|
if (this.$refs.map) {
|
this.updateMap(stationList);
|
}
|
},
|
// 更新地图
|
updateMap(data) {
|
this.$refs.map.setData(
|
data.map((v) => {
|
return {
|
...v,
|
name: v.nodeStation ? "节" : "",
|
label: v.stationName3,
|
points: [v.stationLongitude, v.stationLatitude],
|
// 无实际意义
|
value: 100,
|
};
|
})
|
);
|
},
|
changeCurr(obj) {
|
console.log(obj);
|
this.currentStation = obj;
|
},
|
},
|
|
mounted() {},
|
};
|
</script>
|
<style scoped lang="less">
|
.page-contain {
|
height: 100%;
|
display: flex;
|
.list-side {
|
flex: 3;
|
display: flex;
|
flex-direction: column;
|
}
|
.map-side {
|
flex: 2;
|
display: flex;
|
flex-direction: column;
|
margin-left: 6px;
|
}
|
.station-list {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
}
|
.map-contain,
|
.info {
|
background: linear-gradient(0, #00f7f9 0, #00f7f9 100%) 0 0 ~"/" 1px 40px,
|
linear-gradient(0, #00f7f9 0, #00f7f9 100%) 0 0 ~"/" 40px 1px,
|
linear-gradient(0, #00f7f9 0, #00f7f9 100%) 100% 0 ~"/" 1px 40px,
|
linear-gradient(0, #00f7f9 0, #00f7f9 100%) 100% 0 ~"/" 40px 1px,
|
linear-gradient(0, #00f7f9 0, #00f7f9 100%) 100% 100% ~"/" 1px 40px,
|
linear-gradient(0, #00f7f9 0, #00f7f9 100%) 100% 100% ~"/" 40px 1px,
|
linear-gradient(0, #00f7f9 0, #00f7f9 100%) 0 100% ~"/" 1px 40px,
|
linear-gradient(0, #00f7f9 0, #00f7f9 100%) 0 100% ~"/" 40px 1px;
|
background-repeat: no-repeat;
|
}
|
.info {
|
margin-top: 6px;
|
height: 300px;
|
padding: 2px;
|
display: flex;
|
flex-direction: column;
|
.title {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
font-weight: 700;
|
padding: 4px 1em;
|
span {
|
display: inline-block;
|
margin-left: 3em;
|
color: #f90;
|
}
|
}
|
}
|
.map-contain {
|
flex: 1;
|
}
|
.table-wrap {
|
height: 200px;
|
margin-top: 6px;
|
width: 100%;
|
position: relative;
|
&.full {
|
height: auto;
|
flex: 1;
|
}
|
.table-contain {
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
}
|
}
|
}
|
.list-item {
|
flex: 1;
|
border: 1px #00f7f9 solid;
|
display: flex;
|
& + .list-item {
|
margin-top: 4px;
|
}
|
.teamName {
|
text-align: center;
|
width: 5em;
|
padding: 6px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-right: 1px #00f7f9 solid;
|
}
|
.list-scroller {
|
flex: 1;
|
position: relative;
|
overflow: hidden;
|
.inner {
|
position: absolute;
|
left: 6px;
|
right: 6px;
|
top: 6px;
|
bottom: 6px;
|
overflow-x: hidden;
|
overflow-y: auto;
|
margin-bottom: -0.4em;
|
.box {
|
display: flex;
|
flex-wrap: wrap;
|
margin-right: -1.4em;
|
}
|
}
|
}
|
.sub-item {
|
// display: inline-block;
|
width: 11.8rem;
|
border-radius: 4px;
|
text-align: center;
|
padding: 4px 6px;
|
border: 1px #fff solid;
|
background: #0d4f65;
|
margin-right: 0.4em;
|
margin-bottom: 0.4em;
|
font-size: 16px;
|
&.active {
|
background: #00f7f9;
|
color: #0d4f65;
|
}
|
&.alarm {
|
border-color: #f00;
|
color: #f00;
|
}
|
// & ~ .sub-item {
|
// margin-left: 0.4em;
|
// }
|
}
|
}
|
.color-panel {
|
display: inline-block;
|
width: 3em;
|
height: 1em;
|
vertical-align: middle;
|
border-radius: 4px;
|
}
|
</style>
|
