<template>
|
<!-- 运维首页 -->
|
<div class="page-monitor">
|
<div class="page-content">
|
<div class="inner">
|
<div class="main-view">
|
<div class="side">
|
<div class="dischargTask">
|
<card-box title="今日放电站点" content-class="task-content">
|
<div class="row row-desc">
|
<div class="col col1">
|
<div class="label">核容放电站点:</div>
|
<div class="value">{{ charge.hrNum }}</div>
|
</div>
|
<div class="col col2">
|
<div class="label">停电放电站点:</div>
|
<div class="value">{{ charge.tdNum }}</div>
|
</div>
|
</div>
|
<div class="content-wrap">
|
<div class="scroller">
|
<!-- 手风琴 -->
|
<el-collapse accordion class="collapse">
|
<el-collapse-item class="collapse-item hr" :disabled="!charge.hrNum">
|
<template #title>
|
<div class="title">核容放电</div>
|
<div class="count">{{ charge.hrNum }}</div>
|
</template>
|
<!-- 内容 -->
|
<div class="list-item" v-for="(item, idx) in charge.hrList" :key="'run_' + idx">
|
<el-tooltip class="item" effect="dark" placement="top-start" :content="item.stationName3">
|
<div class="station">{{ item.stationName3 }}</div>
|
</el-tooltip>
|
<div class="node">{{ item.nodeStation ? '节点站' : '非节点站' }}</div>
|
<div class="start-time">放电开始时间{{ item.dischargeStarttime }}</div>
|
<div class="test-time">累计放电{{ item.timeLong }}</div>
|
<div class="btn" @click="goRT(item)">实时</div>
|
</div>
|
<div class="btn-grp">
|
<el-button size="mini" type="primary" @click="goDevStatus(2)">查看更多</el-button>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item class="collapse-item td" :disabled="!charge.tdNum">
|
<template #title>
|
<div class="title">停电放电</div>
|
<div class="count">{{ charge.tdNum }}</div>
|
</template>
|
<!-- 内容 -->
|
<div class="list-item" v-for="(item, idx) in charge.tdList" :key="'wait_' + idx">
|
<el-tooltip class="item" effect="dark" placement="top-start" :content="item.stationName3">
|
<div class="station">{{ item.stationName3 }}</div>
|
</el-tooltip>
|
<div class="node">{{ item.nodeStation ? '节点站' : '非节点站' }}</div>
|
<div class="start-time">放电开始时间{{ item.dischargeStarttime }}</div>
|
<div class="test-time">累计放电{{ item.timeLong }}</div>
|
<div class="btn" @click="goRT(item)">实时</div>
|
</div>
|
<div class="btn-grp">
|
<el-button size="mini" type="primary" @click="goDevStatus(3)">查看更多</el-button>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</div>
|
<div class="btn-grp">
|
<el-button size="mini" type="primary" @click="goDevStatus(-1)">更多站点状态</el-button>
|
</div>
|
</card-box>
|
</div>
|
<div class="alarm">
|
<card-box title="今日实时告警" content-class="alarm-content">
|
<template #tools>
|
<el-radio-group size="mini" v-model="alarmLevel">
|
<el-radio-button :label="0">按等级</el-radio-button>
|
<el-radio-button :label="1">按类型</el-radio-button>
|
</el-radio-group>
|
</template>
|
<div class="row row-desc">
|
<div class="col col1">
|
<div class="label">告警总数:</div>
|
<div class="value">{{ alarm.sum }}</div>
|
</div>
|
<div class="col col2">
|
<div class="label">已确认:</div>
|
<div class="value">{{ alarm.confirmed }}</div>
|
</div>
|
<div class="col col3">
|
<div class="label">未确认:</div>
|
<div class="value">{{ alarm.noConfirm }}</div>
|
</div>
|
</div>
|
<div class="content-wrap">
|
<div class="scroller">
|
<!-- 手风琴 -->
|
<el-collapse v-if="0 == alarmLevel" accordion class="collapse collapse-alarm">
|
<el-collapse-item class="collapse-item level1" :disabled="!alarm.level1Sum">
|
<template #title>
|
<div class="title">一级告警</div>
|
<div class="count">{{ alarm.level1Sum }}</div>
|
</template>
|
<!-- 内容 -->
|
<div class="alarm-item" @click="goPwrAlarm(1)">
|
<div class="item-title">电源告警</div>
|
<div class="item-count">{{ alarm.level1Pwr }}</div>
|
<div class="item-icon el-icon-arrow-right"></div>
|
</div>
|
<div class="alarm-item" @click="goDevAlarm(1)">
|
<div class="item-title">设备告警</div>
|
<div class="item-count">{{ alarm.level1Dev }}</div>
|
<div class="item-icon el-icon-arrow-right"></div>
|
</div>
|
<div class="alarm-item" @click="goBattAlarm(1)">
|
<div class="item-title">电池告警</div>
|
<div class="item-count">{{ alarm.level1Batt }}</div>
|
<div class="item-icon el-icon-arrow-right"></div>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item class="collapse-item level2" :disabled="!alarm.level2Sum">
|
<template #title>
|
<div class="title">二级告警</div>
|
<div class="count">{{ alarm.level2Sum }}</div>
|
</template>
|
<!-- 内容 -->
|
<div class="alarm-item" @click="goPwrAlarm(2)">
|
<div class="item-title">电源告警</div>
|
<div class="item-count">{{ alarm.level2Pwr }}</div>
|
<div class="item-icon el-icon-arrow-right"></div>
|
</div>
|
<div class="alarm-item" @click="goDevAlarm(2)">
|
<div class="item-title">设备告警</div>
|
<div class="item-count">{{ alarm.level2Dev }}</div>
|
<div class="item-icon el-icon-arrow-right"></div>
|
</div>
|
<div class="alarm-item" @click="goBattAlarm(2)">
|
<div class="item-title">电池告警</div>
|
<div class="item-count">{{ alarm.level2Batt }}</div>
|
<div class="item-icon el-icon-arrow-right"></div>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item class="collapse-item level3" :disabled="!alarm.level3Sum">
|
<template #title>
|
<div class="title">三级告警</div>
|
<div class="count">{{ alarm.level3Sum }}</div>
|
</template>
|
<!-- 内容 -->
|
<div class="alarm-item" @click="goPwrAlarm(3)">
|
<div class="item-title">电源告警</div>
|
<div class="item-count">{{ alarm.level3Pwr }}</div>
|
<div class="item-icon el-icon-arrow-right"></div>
|
</div>
|
<div class="alarm-item" @click="goDevAlarm(3)">
|
<div class="item-title">设备告警</div>
|
<div class="item-count">{{ alarm.level3Dev }}</div>
|
<div class="item-icon el-icon-arrow-right"></div>
|
</div>
|
<div class="alarm-item" @click="goBattAlarm(3)">
|
<div class="item-title">电池告警</div>
|
<div class="item-count">{{ alarm.level3Batt }}</div>
|
<div class="item-icon el-icon-arrow-right"></div>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item class="collapse-item level4" :disabled="!alarm.level4Sum">
|
<template #title>
|
<div class="title">四级告警</div>
|
<div class="count">{{ alarm.level4Sum }}</div>
|
</template>
|
<!-- 内容 -->
|
<div class="alarm-item" @click="goPwrAlarm(4)">
|
<div class="item-title">电源告警</div>
|
<div class="item-count">{{ alarm.level4Pwr }}</div>
|
<div class="item-icon el-icon-arrow-right"></div>
|
</div>
|
<div class="alarm-item" @click="goDevAlarm(4)">
|
<div class="item-title">设备告警</div>
|
<div class="item-count">{{ alarm.level4Dev }}</div>
|
<div class="item-icon el-icon-arrow-right"></div>
|
</div>
|
<div class="alarm-item" @click="goBattAlarm(4)">
|
<div class="item-title">电池告警</div>
|
<div class="item-count">{{ alarm.level4Batt }}</div>
|
<div class="item-icon el-icon-arrow-right"></div>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
<div class="alarm-list" v-if="1 == alarmLevel">
|
<div class="alarm-item" @click="goPwrAlarm(0)">
|
<div class="item-title">电源告警</div>
|
<div class="item-count">{{ alarm.pwrSum }}</div>
|
<div class="item-icon el-icon-arrow-right"></div>
|
</div>
|
<div class="alarm-item" @click="goDevAlarm(0)">
|
<div class="item-title">设备告警</div>
|
<div class="item-count">{{ alarm.devSum }}</div>
|
<div class="item-icon el-icon-arrow-right"></div>
|
</div>
|
<div class="alarm-item" @click="goBattAlarm(0)">
|
<div class="item-title">电池告警</div>
|
<div class="item-count">{{ alarm.battSum }}</div>
|
<div class="item-icon el-icon-arrow-right"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</card-box>
|
</div>
|
</div>
|
<div class="map">
|
<card-box title="站点地图">
|
<map-chart ref="map">
|
<map-mark-list slot="tools"></map-mark-list>
|
</map-chart>
|
</card-box>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import card from './components/card';
|
import info from './components/info';
|
import cardBox from '@/components/bigScreenPage/big_screen_card';
|
import MapChart from "@/components/myCharts/MapChart.vue";
|
import MapMarkList from "@/components/mapMarkList.vue";
|
import formatSeconds from '@/assets/js/tools/formatSeconds';
|
|
import createWs from "@/assets/js/websocket";
|
const WSMixin = createWs("homeMonitor");
|
|
export default {
|
name: '',
|
mixins: [WSMixin],
|
data() {
|
return {
|
alarmLevel: 0,
|
charge: {
|
hrNum: 0,
|
tdNum: 0,
|
hrList: [],
|
tdList: [],
|
},
|
alarm: {
|
sum: 0,
|
confirmed: 0,
|
noConfirm: 0,
|
level1Sum: 0,
|
level1Pwr: 0,
|
level1Dev: 0,
|
level1Batt: 0,
|
level2Sum: 0,
|
level2Pwr: 0,
|
level2Dev: 0,
|
level2Batt: 0,
|
level3Sum: 0,
|
level3Pwr: 0,
|
level3Dev: 0,
|
level3Batt: 0,
|
level4Sum: 0,
|
level4Pwr: 0,
|
level4Dev: 0,
|
level4Batt: 0,
|
pwrSum: 0,
|
devSum: 0,
|
battSum: 0,
|
}
|
}
|
},
|
components: {
|
MapMarkList,
|
MapChart,
|
card,
|
info,
|
cardBox
|
},
|
methods: {
|
onWSMessage(res) {
|
res = JSON.parse(res.data);
|
// console.log(res, "=====111data");
|
let {
|
bAlmRes,
|
bDebRes,
|
bPwrRes,
|
stationMap,
|
chargeRes,
|
} = res.data;
|
// 更新地图
|
if (this.$refs.map) {
|
this.updateMap(stationMap);
|
}
|
this.formatCharge(chargeRes);
|
this.formatAlarm(bAlmRes, bDebRes, bPwrRes);
|
},
|
formatCharge(res) {
|
let { code, data, data2 } = res;
|
if (code && data) {
|
let {
|
stateNumMap: {
|
state2: hrNum,
|
state3: tdNum,
|
},
|
stateMap: {
|
state2: hrList,
|
state3: tdList,
|
},
|
} = data2;
|
hrList.map(v => {
|
let rtstate = v.rtstate || { battTestStarttime: 0, battTestTlong: 0 };
|
v.dischargeStarttime = formatSeconds(rtstate.battTestStarttime);
|
v.timeLong = formatSeconds(rtstate.battTestTlong);
|
});
|
hrList.splice(3);
|
tdList.map(v => {
|
let rtstate = v.rtstate || { battTestStarttime: 0, battTestTlong: 0 };
|
v.dischargeStarttime = formatSeconds(rtstate.battTestStarttime);
|
v.timeLong = formatSeconds(rtstate.battTestTlong);
|
});
|
tdList.splice(3);
|
this.charge.hrNum = hrNum;
|
this.charge.tdNum = tdNum;
|
this.charge.hrList = hrList;
|
this.charge.tdList = tdList;
|
} else {
|
this.charge.hrNum = 0;
|
this.charge.tdNum = 0;
|
this.charge.hrList = [];
|
this.charge.tdList = [];
|
}
|
},
|
formatAlarm(alarmRes, devRes, pwrRes) {
|
let { data2: data2_a } = alarmRes;
|
let { data2: data2_d } = devRes;
|
let { data2: data2_p } = pwrRes;
|
|
this.alarm.sum = data2_a.btatolNum + data2_d.dtatolNum + data2_p.ptatolNum;
|
this.alarm.pwrSum = data2_p.ptatolNum;
|
this.alarm.devSum = data2_d.dtatolNum;
|
this.alarm.battSum = data2_a.btatolNum;
|
this.alarm.confirmed = data2_a.bAlmClearMap.clear1 + data2_d.dAlmClearMap.clear1 + data2_p.pAlmClearMap.clear1;
|
this.alarm.noConfirm = data2_a.bAlmClearMap.clear0 + data2_d.dAlmClearMap.clear0 + data2_p.pAlmClearMap.clear0;
|
this.alarm.level1Sum = data2_a.bAlmLevelMap.level1 + data2_d.dAlmLevelMap.level1 + data2_p.pAlmLevelMap.level1;
|
this.alarm.level1Pwr = data2_p.pAlmLevelMap.level1;
|
this.alarm.level1Dev = data2_d.dAlmLevelMap.level1;
|
this.alarm.level1Batt = data2_a.bAlmLevelMap.level1;
|
this.alarm.level2Sum = data2_a.bAlmLevelMap.level2 + data2_d.dAlmLevelMap.level2 + data2_p.pAlmLevelMap.level2;
|
this.alarm.level2Pwr = data2_p.pAlmLevelMap.level2;
|
this.alarm.level2Dev = data2_d.dAlmLevelMap.level2;
|
this.alarm.level2Batt = data2_a.bAlmLevelMap.level2;
|
this.alarm.level3Sum = data2_a.bAlmLevelMap.level3 + data2_d.dAlmLevelMap.level3 + data2_p.pAlmLevelMap.level3;
|
this.alarm.level3Pwr = data2_p.pAlmLevelMap.level3;
|
this.alarm.level3Dev = data2_d.dAlmLevelMap.level3;
|
this.alarm.level3Batt = data2_a.bAlmLevelMap.level3;
|
this.alarm.level4Sum = data2_a.bAlmLevelMap.level4 + data2_d.dAlmLevelMap.level4 + data2_p.pAlmLevelMap.level4;
|
this.alarm.level4Pwr = data2_p.pAlmLevelMap.level4;
|
this.alarm.level4Dev = data2_d.dAlmLevelMap.level4;
|
this.alarm.level4Batt = data2_a.bAlmLevelMap.level4;
|
},
|
// 更新地图
|
updateMap(data) {
|
const getColor = (o) => {
|
let res = 0;
|
if (o.fbs9100State) {
|
res = o.fbs9100State.devWorkstate <= 3 ? o.fbs9100State.devWorkstate : 0;
|
}
|
return ['#0081ff', '#66f842', '#ff6b6c', '#7668f9'][res];
|
};
|
this.$refs.map.setData(data.map(v => {
|
return {
|
...v,
|
name: v.nodeStation ? '节' : '',
|
label: v.stationName3,
|
color: getColor(v),
|
// fontColor: '#fff',
|
points: [v.stationLongitude, v.stationLatitude],
|
// 无实际意义
|
value: 100,
|
}
|
}));
|
},
|
// 跳转到电源告警 level: 0全部 1一级告警 2二级告警
|
goPwrAlarm(level) {
|
this.$router.push({
|
path: '/alarmMager/powerRealtimeInfo',
|
query: {
|
alarmLevel: ['total', 'level1', 'level2', 'level3', 'level4'][level]
|
}
|
});
|
},
|
goDevAlarm(level) {
|
this.$router.push({
|
path: '/alarmMager/deviceTimequery',
|
query: {
|
alarmLevel: ['total', 'level1', 'level2', 'level3', 'level4'][level]
|
}
|
});
|
},
|
goBattAlarm(level) {
|
this.$router.push({
|
path: '/alarmMager/batteryrTimequery',
|
query: {
|
alarmLevel: ['total', 'level1', 'level2', 'level3', 'level4'][level]
|
}
|
});
|
},
|
goRT(obj) {
|
let search =
|
"?province=" +
|
obj.stationName1 +
|
"&city=" +
|
obj.stationName2 +
|
"&county=" +
|
obj.stationName5 +
|
"&home=" +
|
obj.stationName3 +
|
"&batt=" + obj.battGroupId +
|
// list组件重载
|
"&listReload=1";
|
this.$router.push("/dataTest/movingRingSystem/" + search);
|
},
|
goDevStatus(status) {
|
this.$router.push({
|
path: '/dataTest/btsStatus',
|
query: {
|
status
|
}
|
});
|
},
|
},
|
|
mounted() {
|
|
}
|
|
}
|
</script>
|
|
<style scoped lang="less">
|
.page-monitor {
|
height: 100%;
|
padding: 0 12px;
|
display: flex;
|
flex-direction: column;
|
|
.page-content {
|
// margin-top: 8px;
|
flex: 1;
|
position: relative;
|
|
.inner {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
}
|
|
}
|
|
|
.row.row-desc {
|
display: flex;
|
padding-left: 0.8em;
|
|
.col {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
|
}
|
|
.label {
|
width: 6.6em;
|
}
|
|
.col3 .label {
|
width: 3.8em;
|
}
|
|
.value {
|
background: #034660;
|
border-radius: 4px;
|
font-weight: bold;
|
width: 2.4em;
|
padding-left: 0.2em;
|
font-size: 30px;
|
color: #ff0;
|
}
|
}
|
|
.main-view {
|
height: 100%;
|
display: flex;
|
|
.side {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
.dischargTask,
|
.alarm {
|
flex: 1;
|
}
|
|
}
|
|
.map {
|
flex: 1.2;
|
margin-left: 10px;
|
}
|
}
|
}
|
|
|
.collapse {
|
border: 0 none;
|
|
background: #034b63;
|
|
.collapse-item {
|
background: #000;
|
margin-bottom: 4px;
|
|
.title {
|
font-size: 30px;
|
}
|
|
.count {
|
font-size: 26px;
|
}
|
|
/deep/ .el-collapse-item__header {
|
height: 62px;
|
padding-left: 0.8em;
|
padding-right: 0.8em;
|
color: #00fefe;
|
border: 0 none;
|
background: #106a84;
|
justify-content: space-between;
|
|
.el-collapse-item__arrow {
|
margin: 0;
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
border: 4px #00fefe solid;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 26px;
|
font-weight: bold;
|
}
|
}
|
|
/deep/ .el-collapse-item__wrap {
|
background: transparent;
|
border: 0 none;
|
|
.el-collapse-item__content {
|
padding: 0;
|
// font-size: 0.65rem;
|
// color: #303133;
|
// line-height: 1.769230769230769;
|
}
|
}
|
}
|
|
.list-item {
|
display: flex;
|
padding: 4px 10px;
|
background: #034b63;
|
border-bottom: 1px solid #02435d;
|
color: #ebf1f2;
|
font-size: 15px;
|
justify-content: space-between;
|
align-items: center;
|
|
.station {
|
width: 12em;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
white-space: nowrap;
|
}
|
|
.node {
|
width: 4em;
|
}
|
|
.start-time {
|
width: 16.6em;
|
}
|
|
.test-time {
|
width: 9em;
|
}
|
|
.btn {
|
cursor: pointer;
|
width: 4em;
|
background: #106a84;
|
color: #fff;
|
border-radius: 4px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
}
|
}
|
|
.collapse-alarm {
|
.collapse-item {
|
/deep/ .el-collapse-item__header {
|
height: 62px;
|
background: #f3535f;
|
color: #fff;
|
|
.el-collapse-item__arrow {
|
border-color: #fff;
|
}
|
}
|
}
|
|
&.type.type /deep/ .el-collapse-item__header {
|
background: #ea792d;
|
}
|
}
|
|
/deep/ .el-radio-button--mini .el-radio-button__inner {
|
padding: 0.28rem 0.7rem;
|
font-size: 0.6rem;
|
border-radius: 0;
|
border: 0 none;
|
background: #00bbc3;
|
color: #022c44;
|
}
|
|
|
/deep/ :not(:first-child)>.el-radio-button__inner {
|
border-left: 1px solid #0096a3;
|
}
|
|
|
/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
box-shadow: none;
|
}
|
|
|
/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
background-color: #2982f6;
|
color: #fff;
|
}
|
|
/deep/ .task-content,
|
/deep/ .alarm-content {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.content-wrap {
|
margin: 10px 2em 0;
|
flex: 1;
|
position: relative;
|
|
.scroller {
|
position: absolute;
|
top: 0;
|
right: 0;
|
left: 0;
|
bottom: 0;
|
overflow-y: auto;
|
}
|
}
|
|
.alarm-item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 1em;
|
height: 30px;
|
line-height: 2.4rem;
|
background-color: #034c5f;
|
color: #fff;
|
cursor: pointer;
|
font-size: 14px;
|
font-weight: 500;
|
outline: 0;
|
|
&:hover {
|
background: #087690;
|
}
|
|
.item-title {
|
font-size: 16px;
|
margin-right: 3em;
|
}
|
|
.item-icon {
|
width: 2rem;
|
height: 2rem;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 1.3rem;
|
font-weight: bold;
|
}
|
}
|
|
.alarm-list {
|
.alarm-item {
|
padding: 0;
|
background-color: #ea792d;
|
height: 62px;
|
margin-bottom: 4px;
|
padding-left: 0.8em;
|
padding-right: 0.8em;
|
|
.item-title {
|
font-size: 30px;
|
margin-right: 0;
|
}
|
|
.item-count {
|
font-size: 26px;
|
}
|
|
.item-icon {
|
border: 4px #fff solid;
|
}
|
}
|
}
|
|
.btn-grp {
|
text-align: center;
|
padding: 4px 0;
|
}
|
|
.list-item+.btn-grp {
|
background: #034b63;
|
}
|
|
.hr.collapse-item /deep/ .el-collapse-item__header {
|
background: #1ae008;
|
}
|
|
.td.collapse-item /deep/ .el-collapse-item__header {
|
background: #0955f7;
|
}
|
|
.level1.collapse-item /deep/ .el-collapse-item__header {
|
background: #d5001d;
|
}
|
|
.level2.collapse-item /deep/ .el-collapse-item__header {
|
background: #f59a23;
|
}
|
|
.level3.collapse-item /deep/ .el-collapse-item__header {
|
background: #eeea3a;
|
}
|
|
.level4.collapse-item /deep/ .el-collapse-item__header {
|
background: #d7d7d7;
|
}
|
</style>
|
