<template>
|
<div class="big-screen-container">
|
<div class="big-screen-content">
|
<div class="big-screen-header">
|
<img class="title-txt" src="./images/title_text.png" />
|
<div class="big-screen-header-right-tools">
|
<img @click="close" class="close-switch" src="./images/switch.png" />
|
</div>
|
<div class="big-screen-header-time">
|
{{ time }}
|
</div>
|
</div>
|
<div class="big-screen-body">
|
<div class="big-screen-body-container">
|
<div class="big-screen-left">
|
<div class="big-screen-left-container">
|
<div class="card-container">
|
<big-screen-card title="交流ABC">
|
<div class="ac-container">
|
<ac-info-box
|
title="过压数量"
|
:value="acInfo.overVol"
|
:box-style="{ top: '4px', left: '100px' }"
|
></ac-info-box>
|
<ac-info-box
|
title="欠压数量"
|
:value="acInfo.lowVol"
|
:box-style="{ top: '4px', right: '100px' }"
|
></ac-info-box>
|
<ac-info-box
|
title="缺相数量"
|
:value="acInfo.lackVol"
|
:box-style="{ bottom: '30px', left: '36px' }"
|
></ac-info-box>
|
<ac-info-box
|
title="过流数量"
|
:value="acInfo.overCurr"
|
:box-style="{ bottom: '30px', right: '36px' }"
|
></ac-info-box>
|
<div class="ac-widget-box"></div>
|
</div>
|
</big-screen-card>
|
</div>
|
<div class="card-container">
|
<big-screen-card title="电池统计">
|
<battery-pie-chart ref="batteryChart"></battery-pie-chart>
|
</big-screen-card>
|
</div>
|
<div class="card-container">
|
<big-screen-card title="整组容量">
|
<div class="mon-box-container">
|
<div class="mon-info-box">
|
<div class="mon-info-title">大于95%比例:</div>
|
<div class="mon-info-value">{{ cap.level0 }}</div>
|
</div>
|
<div class="mon-info-box box2">
|
<div class="mon-info-title">95%~85%比例:</div>
|
<div class="mon-info-value">{{ cap.level1 }}</div>
|
</div>
|
<div class="mon-info-box box3">
|
<div class="mon-info-title">85%~60%比例:</div>
|
<div class="mon-info-value">{{ cap.level2 }}</div>
|
</div>
|
</div>
|
<div class="mon-box-container mgt16">
|
<div class="mon-info-box box2">
|
<div class="mon-info-title">60%~50%比例:</div>
|
<div class="mon-info-value">{{ cap.level3 }}</div>
|
</div>
|
<div class="mon-info-box box3">
|
<div class="mon-info-title">小于50%:</div>
|
<div class="mon-info-value">{{ cap.level4 }}</div>
|
</div>
|
</div>
|
</big-screen-card>
|
</div>
|
</div>
|
</div>
|
<div class="big-screen-middle">
|
<div class="big-screen-middle-container">
|
<div class="big-screen-middle-header">
|
<div class="total-data-container">
|
<el-row :gutter="16">
|
<el-col :span="6">
|
<total-data
|
type="站点"
|
label="个"
|
:value="stationNum | toLarge"
|
></total-data>
|
</el-col>
|
<el-col :span="6">
|
<total-data
|
type="电源"
|
label="个"
|
:value="powerNum | toLarge"
|
></total-data>
|
</el-col>
|
<el-col :span="6">
|
<total-data
|
type="设备"
|
label="个"
|
:value="devCount | toLarge"
|
></total-data>
|
</el-col>
|
<el-col :span="6">
|
<total-data
|
type="已核容"
|
label="个"
|
:value="checkCapNum | toLarge"
|
></total-data>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<div class="big-screen-middle-body">
|
<div class="map-chart-container">
|
<!-- left -->
|
<div class="flex-left">
|
<monitor-box
|
:num="devCount"
|
:warn="devAlarmNum"
|
:box-style="{
|
top: '40px',
|
left: '14px',
|
backgroundImage: 'url(' + deviceImage + ')',
|
}"
|
></monitor-box>
|
<monitor-box
|
:num="battGroupCount"
|
:warn="battAlarmNum"
|
:box-style="{
|
bottom: '40px',
|
left: '14px',
|
backgroundImage: 'url(' + batteryImage + ')',
|
}"
|
></monitor-box>
|
</div>
|
<!-- center -->
|
<div class="flex-center">
|
<div class="flex-map-contain">
|
<div class="inner">
|
<map-chart :roam="true" ref="map"></map-chart>
|
</div>
|
</div>
|
<!-- 表格 -->
|
<div class="table-wrap">
|
<div class="table-contain">
|
<el-table
|
:data="tableData"
|
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="标记颜色"
|
width="220"
|
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>
|
<!-- right -->
|
<div class="flex-right">
|
<monitor-box
|
:num="powerNum"
|
:warn="powerAlarmNum"
|
:box-style="{
|
top: '40px',
|
right: '14px',
|
backgroundImage: 'url(' + powerImage + ')',
|
}"
|
></monitor-box>
|
<monitor-box
|
:num="battGroupCount"
|
:warn="capAlarmNum"
|
:box-style="{
|
bottom: '40px',
|
right: '14px',
|
backgroundImage: 'url(' + xuHangImage + ')',
|
}"
|
></monitor-box>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="big-screen-right">
|
<div class="big-screen-left-container">
|
<div class="card-container">
|
<big-screen-card title="单体电压/内阻/温度">
|
<mon-warn-bar ref="battAlarm"></mon-warn-bar>
|
</big-screen-card>
|
</div>
|
<div class="card-container">
|
<big-screen-card title="设备状态">
|
<radar-chart ref="devState"></radar-chart>
|
</big-screen-card>
|
</div>
|
<div class="card-container">
|
<big-screen-card title="实时告警">
|
<bar3d ref="bar3d"></bar3d>
|
</big-screen-card>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import BigScreenCard from "@/components/bigScreenPage/big_screen_card.vue";
|
import totalData from "@/components/bigScreenPage/totalData.vue";
|
import MonitorBox from "@/components/bigScreenPage/monitorBox.vue";
|
import batteryImage from "./images/monitor/battery.png";
|
import deviceImage from "./images/monitor/device.png";
|
import powerImage from "./images/monitor/power.png";
|
import xuHangImage from "./images/monitor/xuhang.png";
|
import MapChart from "@/components/myCharts/MapChart.vue";
|
import CityChart from "@/components/chart/cityChart.vue";
|
import RadarChart from "@/components/myCharts/RadarChart.vue";
|
import BatteryPieChart from "@/components/myCharts/BatteryPieChart.vue";
|
import PieList from "@/components/myCharts/PieList.vue";
|
import AcInfoBox from "@/components/bigScreenPage/acInfoBox.vue";
|
import MonWarnBar from "@/components/myCharts/monWarnBar.vue";
|
import bar3d from "@/views/home/components/bar-3d";
|
import createWs from "@/assets/js/websocket";
|
const WSMixin = createWs("screen");
|
// 班组管理的站点颜色 超过七个班组的第七个及以后的都用最后一种颜色
|
const colors = [
|
"#fecb40",
|
"#219141",
|
"#23a8f2",
|
"#ff8080",
|
"#1c9d95",
|
"#b91fea",
|
"#d64d0d",
|
];
|
export default {
|
name: "big_screen_page",
|
mixins: [WSMixin],
|
components: {
|
MonWarnBar,
|
AcInfoBox,
|
PieList,
|
BatteryPieChart,
|
RadarChart,
|
CityChart,
|
MapChart,
|
MonitorBox,
|
BigScreenCard,
|
totalData,
|
bar3d,
|
},
|
data() {
|
return {
|
headers: [
|
{
|
prop: "groupName",
|
label: "班组名称",
|
minWidth: 160,
|
},
|
{
|
prop: "stationCount",
|
label: "管理机房数",
|
minWidth: 120,
|
},
|
// {
|
// prop: "battAlarmCount",
|
// label: "电池告警数",
|
// minWidth: 120,
|
// },
|
// {
|
// prop: "powerAlarmCount",
|
// label: "电源告警数",
|
// minWidth: 120,
|
// },
|
// {
|
// prop: "deviceAlarmCount",
|
// label: "设备告警数",
|
// minWidth: 120,
|
// },
|
// {
|
// prop: "color",
|
// label: "标记颜色",
|
// minWidth: 120,
|
// },
|
],
|
tableData: [],
|
checkCapNum: 0,
|
deviceImage,
|
powerImage,
|
batteryImage,
|
xuHangImage,
|
mapName: "zhongguo",
|
acInfo: {
|
overVol: 0, // 过压
|
lowVol: 0, // 欠压
|
overCurr: 0, // 过流
|
lackVol: 0, // 缺项
|
},
|
stationNum: 0,
|
devCount: 0,
|
battGroupCount: 0,
|
powerNum: 0,
|
capAlarmNum: 0,
|
devAlarmNum: 0,
|
battAlarmNum: 0,
|
powerAlarmNum: 0,
|
cap: {
|
level0: 0,
|
level1: 0,
|
level2: 0,
|
level3: 0,
|
level4: 0,
|
},
|
isChange: true,
|
time: "",
|
};
|
},
|
filters: {
|
toLarge(input) {
|
if (undefined == input) {
|
return "";
|
} else {
|
if (input > 999) {
|
return "999+";
|
} else {
|
return input;
|
}
|
}
|
},
|
},
|
methods: {
|
close() {
|
this.$emit("close", false);
|
},
|
onWSMessage(res) {
|
let rs = JSON.parse(res.data);
|
// console.log(rs, "=-===msg");
|
if (rs.code == 1) {
|
let {
|
monVRTAnalysis,
|
devCountMap,
|
battGroupInfo,
|
devAlarmNum,
|
capAlarmNum,
|
groupCap,
|
res_groupInfo,
|
} = rs.data;
|
// 设置交流ABC
|
let acABC = rs.data.acABC;
|
if (acABC.code == 1 && acABC.data) {
|
this.setAcInfo(acABC.data2[0]);
|
} else {
|
this.setAcInfo({
|
过压: 0,
|
欠压: 0,
|
过流: 0,
|
缺相: 0,
|
});
|
}
|
|
// 设置设备状态
|
let devStates = rs.data.devStates;
|
if (devStates.code == 1 && devStates.data) {
|
this.setDevStates(devStates.data2);
|
} else {
|
this.setDevStates({
|
内阻测试数量: 0,
|
核容测试数量: 0,
|
直连充电数量: 0,
|
通讯故障数量: 0,
|
预充电数量: 0,
|
});
|
}
|
|
// 单体电压/内阻/温度 图表
|
this.updateBattAlarm(monVRTAnalysis);
|
|
// 资源总数统计
|
this.updateDevCount(devCountMap);
|
|
// 电池统计
|
this.updateBattInfo(battGroupInfo);
|
|
// 实时告警 统计
|
this.updateRTAlarm(devAlarmNum);
|
|
// 续航监测 告警数
|
// if (capAlarmNum.code && capAlarmNum.data) {
|
// this.capAlarmNum = capAlarmNum.data2;
|
// }
|
|
// 整组容量
|
this.updateGroupCap(groupCap);
|
|
// 地图 及下方统计
|
this.updateStationInfo(res_groupInfo);
|
}
|
},
|
updateStationInfo(obj) {
|
let list = [];
|
let stationList = [];
|
if (obj && obj.code) {
|
obj.data.forEach((v, i) => {
|
let color =
|
i <= colors.length - 1 ? colors[i] : colors[colors.length - 1];
|
v.color = color;
|
stationList.push(
|
...v.stationInfList.map((item) => ({ ...item, color }))
|
);
|
list.push(v);
|
});
|
}
|
this.tableData = list;
|
|
if (this.$refs.map) {
|
this.updateMap(stationList);
|
}
|
},
|
setAcInfo(data) {
|
this.acInfo.overVol = data["过压"];
|
this.acInfo.lowVol = data["欠压"];
|
this.acInfo.overCurr = data["过流"];
|
this.acInfo.lackVol = data["缺相"];
|
},
|
setDevStates(data) {
|
let values = [];
|
Object.keys(data).forEach((key) => {
|
values.push({
|
name: key,
|
value: data[key],
|
});
|
});
|
this.$refs.devState.setData(values);
|
},
|
// 单体电压/内阻/温度 图表
|
updateBattAlarm(obj) {
|
let { code, data, data2 } = obj;
|
let res = [0, 0],
|
temp = [0, 0],
|
vol = [0, 0];
|
if (code && data) {
|
res = [
|
data2["单体内阻"]["单体内阻低告警"],
|
data2["单体内阻"]["单体内阻高告警"],
|
];
|
temp = [
|
data2["单体温度"]["单体温度低告警"],
|
data2["单体温度"]["单体温度高告警"],
|
];
|
vol = [
|
data2["单体电压"]["单体电压低告警"],
|
data2["单体电压"]["单体电压高告警"],
|
];
|
}
|
this.$refs.battAlarm.setData({
|
res,
|
temp,
|
vol,
|
});
|
},
|
// 资源总数统计 地图
|
updateDevCount(obj) {
|
let { code, data, data2 } = obj;
|
let devCount = 0,
|
stationNum = 0,
|
battGroupCount = 0,
|
powerNum = 0,
|
checkCapNum = 0;
|
// stationList = [];
|
if (code && data) {
|
devCount = data2.devCount;
|
battGroupCount = data2.battGroupCount;
|
powerNum = data2.powerNum;
|
stationNum = data2.stationNum;
|
// stationList = data2.stationInfList;
|
checkCapNum = data2.checkCapNum;
|
}
|
this.stationNum = stationNum;
|
this.devCount = devCount;
|
this.battGroupCount = battGroupCount;
|
this.powerNum = powerNum;
|
this.checkCapNum = checkCapNum;
|
|
// 地图上的站点信息
|
// if (this.$refs.map) {
|
// this.updateMap(stationList);
|
// }
|
},
|
// 电池统计
|
updateBattInfo(obj) {
|
let { code, data, data2 } = obj;
|
let vol2 = 0,
|
vol12 = 0,
|
producer = [{ name: "电池品牌", value: 0 }];
|
if (code && data) {
|
vol2 = data2.monVol["2.0"];
|
vol12 = data2.monVol["12.0"];
|
let arr = Object.keys(data2.producer)
|
.map((v) => ({ name: v, value: data2.producer[v] }))
|
.sort((a, b) => b.value - a.value);
|
if (arr.length <= 5) {
|
producer = arr;
|
} else {
|
let name = "其他";
|
let value = 0;
|
arr.splice(4).forEach((v) => {
|
value += v.value * 1;
|
});
|
arr.push({ name, value });
|
producer = arr;
|
}
|
}
|
this.$refs.batteryChart.setData(vol2, vol12, producer);
|
},
|
// 实时告警 统计
|
updateRTAlarm(obj) {
|
let { code, data, data2 } = obj;
|
let powerAlarmNum = 0,
|
battAlarmNum = 0,
|
devAlarmNum = 0;
|
if (code && data) {
|
powerAlarmNum = data2.powerAlarmNum;
|
battAlarmNum = data2.battAlarmNum;
|
devAlarmNum = data2.devAlarmNum;
|
}
|
this.devAlarmNum = devAlarmNum;
|
this.battAlarmNum = battAlarmNum;
|
this.powerAlarmNum = powerAlarmNum;
|
|
this.$refs.bar3d.setData({
|
xLabel: ["电源告警", "设备告警", "电池告警"],
|
sData: [powerAlarmNum, devAlarmNum, battAlarmNum],
|
});
|
},
|
// 更新地图
|
updateMap(data) {
|
// const getColor = (o) => {
|
// let res = 0;
|
// res = o.devWorkState <= 3 ? o.devWorkState : 0;
|
// return ["#0081ff", "#66f842", "#ff6b6c", "#7668f9"][res];
|
// };
|
this.$refs.map.setData(
|
data.map((v) => {
|
// console.log(v.stationName3, v.color, '================');
|
return {
|
...v,
|
name: v.nodeStation ? "节" : "",
|
label: v.stationName3,
|
// color: getColor(v),
|
// fontColor: '#fff',
|
points: [v.stationLongitude, v.stationLatitude],
|
// 无实际意义
|
value: 100,
|
};
|
})
|
);
|
},
|
// 整组容量
|
updateGroupCap(obj) {
|
let { code, data, data2 } = obj;
|
let level0 = 0,
|
level1 = 0,
|
level2 = 0,
|
level3 = 0,
|
level4 = 0;
|
if (code && data) {
|
level0 = data2[1];
|
level1 = data2[2];
|
level2 = data2[3];
|
level3 = data2[4];
|
level4 = data2[5];
|
}
|
this.cap.level0 = level0;
|
this.cap.level1 = level1;
|
this.cap.level2 = level2;
|
this.cap.level3 = level3;
|
this.cap.level4 = level4;
|
},
|
changeTime() {
|
let isChange = this.isChange;
|
let date = new Date();
|
let weeks = ["日", "一", "二", "三", "四", "五", "六"];
|
let week = weeks[date.getDay()];
|
this.time = date.format("yyyy-MM-dd hh:mm:ss") + " 星期" + week;
|
if (isChange) {
|
setTimeout(() => {
|
this.changeTime();
|
}, 1000);
|
}
|
},
|
},
|
mounted() {
|
this.changeTime();
|
},
|
destroyed() {
|
this.isChange = false;
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.big-screen-container {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: #011f39;
|
background-size: 100% 100%;
|
z-index: 99999999;
|
}
|
|
.big-screen-content {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
}
|
|
.big-screen-header {
|
position: relative;
|
background-image: url("./images/header_bg.png");
|
background-size: 100% 100%;
|
height: 88px;
|
text-align: center;
|
}
|
|
.big-screen-header img.title-txt {
|
margin-top: 20px;
|
height: 41px;
|
}
|
|
.big-screen-header-right-tools {
|
position: absolute;
|
top: 8px;
|
right: 16px;
|
}
|
|
.big-screen-header-time {
|
position: absolute;
|
top: 48px;
|
right: 48px;
|
}
|
|
.big-screen-header-right-tools .close-switch {
|
height: 31px;
|
}
|
|
.big-screen-header-right-tools .close-switch:hover {
|
height: 34px;
|
cursor: pointer;
|
}
|
|
.big-screen-body {
|
flex: 1;
|
}
|
|
.big-screen-body-container {
|
display: flex;
|
height: 100%;
|
}
|
|
.big-screen-left,
|
.big-screen-right {
|
flex: 1;
|
height: 100%;
|
}
|
|
.big-screen-middle {
|
// width: 960px;
|
flex: 2;
|
padding: 8px;
|
}
|
|
.big-screen-middle-container {
|
display: flex;
|
height: 100%;
|
flex-direction: column;
|
}
|
|
.big-screen-middle-header {
|
background-image: url("./images/round_bg.png");
|
background-size: 100% 100%;
|
height: 184px;
|
}
|
|
.big-screen-left-container {
|
display: flex;
|
height: 100%;
|
flex-direction: column;
|
}
|
|
.card-container {
|
flex: 1;
|
}
|
|
.total-data-container {
|
height: 100%;
|
padding-left: 40px;
|
padding-right: 40px;
|
padding-top: 20px;
|
}
|
|
.big-screen-middle-body {
|
flex: 1;
|
}
|
|
.monitor-box-list {
|
padding-bottom: 24px;
|
}
|
|
.map-chart-container {
|
position: relative;
|
height: 100%;
|
/* padding-bottom: 8px; */
|
padding: 0;
|
display: flex;
|
}
|
.flex-right,
|
.flex-left {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
padding: 40px 0;
|
}
|
.flex-center {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
.table-wrap {
|
width: 100%;
|
height: 214px;
|
position: relative;
|
.table-contain {
|
// height: 100%;
|
// margin: 0 6px;
|
position: absolute;
|
left: 6px;
|
right: 6px;
|
top: 0;
|
bottom: 0;
|
}
|
}
|
.flex-map-contain {
|
flex: 1;
|
width: 100%;
|
position: relative;
|
.inner {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
}
|
}
|
}
|
|
.ac-container {
|
position: relative;
|
height: 100%;
|
background-image: url("./images/ac_bg.png");
|
background-size: 100% 100%;
|
}
|
|
.ac-widget-box {
|
position: absolute;
|
bottom: 60px;
|
left: 50%;
|
margin-left: -44px;
|
width: 88px;
|
height: 104px;
|
background-image: url("./images/ac_widget.png");
|
background-size: 100% 100%;
|
}
|
|
.mon-box-container {
|
text-align: center;
|
box-sizing: border-box;
|
padding-top: 8px;
|
}
|
|
.mon-info-box {
|
display: inline-block;
|
margin-left: 8px;
|
width: 139px;
|
height: 90px;
|
background-image: url("./images/mon_info_box1.png");
|
background-size: 100% 100%;
|
text-align: center;
|
padding-top: 1px;
|
box-sizing: border-box;
|
}
|
|
.mon-info-box.box2 {
|
background-image: url("./images/mon_info_box2.png");
|
}
|
|
.mon-info-box.box3 {
|
background-image: url("./images/mon_info_box3.png");
|
}
|
|
.mon-info-title {
|
margin-top: 32px;
|
font-size: 13px;
|
}
|
|
.mon-info-value {
|
font-size: 16px;
|
color: #ffff00;
|
font-weight: bold;
|
}
|
.color-panel {
|
display: inline-block;
|
width: 3em;
|
height: 1em;
|
vertical-align: middle;
|
border-radius: 4px;
|
}
|
</style>
|
