<template>
|
<div class="p-main">
|
<div class="p-side p-left">
|
<div class="row">
|
<home-card title="统计电池告警">
|
<template #tools>
|
<el-select v-model="lineSelect0" size="mini" @change="testLevelChange(0)">
|
<el-option v-for="(item, idx) in lineList" :key="'select_' + idx" :label="item == 0 ? '全部' : item + '号线'" :value="item"></el-option>
|
</el-select>
|
</template>
|
<!-- <div class="chart-wrap">
|
<div class="inner">
|
<bar-chart-alarm v-if="alarmType == 1" ref="chart_alarm"></bar-chart-alarm>
|
<pie-chart ref="alarmPieChart" :values="alarms" v-else></pie-chart>
|
</div>
|
</div> -->
|
<bar3d ref="bar3d0"></bar3d>
|
</home-card>
|
</div>
|
<div class="row">
|
<home-card title="故障类型统计">
|
<template #tools>
|
<el-select v-model="lineSelect1" size="mini" @change="testLevelChange(1)">
|
<el-option v-for="(item, idx) in lineList" :key="'select_' + idx" :label="item == 0 ? '全部' : item + '号线'" :value="item"></el-option>
|
</el-select>
|
</template>
|
<pie-chart ref="pie"></pie-chart>
|
</home-card>
|
</div>
|
</div>
|
<div class="wraper">
|
<div class="row row1">
|
<div class="info">
|
<div class="item" @click="goStations">
|
<div class="name">机房个数</div>
|
<div class="num">
|
{{ stationNum }}
|
</div>
|
</div>
|
<div class="item">
|
<div class="name">设备个数</div>
|
<div class="num">
|
{{ devCount }}
|
</div>
|
</div>
|
<div class="item" @click="goBatt">
|
<div class="name">电池组个数</div>
|
<div class="num">
|
{{ battGroupCount }}
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="row row2">
|
<div class="flex-map-contain">
|
<div class="inner">
|
<svg-subway :lines="lineList.filter(v=> v != 0)" :status="statusList" @legend-change="legendChange"></svg-subway>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="p-side p-right">
|
<div class="row alarm">
|
<home-card title="电池状态">
|
<template #tools>
|
<el-select v-model="lineSelect2" size="mini" @change="testLevelChange(2)">
|
<el-option v-for="(item, idx) in lineList" :key="'select_' + idx" :label="item == 0 ? '全部' : item + '号线'" :value="item"></el-option>
|
</el-select>
|
</template>
|
<bar3d ref="bar3d1"></bar3d>
|
</home-card>
|
</div>
|
<div class="row test-info">
|
<home-card title="实时电池告警滚动">
|
<template #tools>
|
<el-select v-model="lineSelect3" size="mini" @change="testLevelChange(3)">
|
<el-option v-for="(item, idx) in lineList" :key="'select_' + idx" :label="item == 0 ? '全部' : item + '号线'" :value="item"></el-option>
|
</el-select>
|
</template>
|
<div class="scroller-wraper">
|
<marquee-top :sendVal="newItems" v-if="showMarquee"></marquee-top>
|
<div class="no-warning-msg" v-else>最近24小时内无告警</div>
|
</div>
|
</home-card>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import homeCard from "./components/home_card.vue";
|
import BatteryPieChart from "@/components/myCharts/BatteryPieChart.vue";
|
import MapChart from "@/components/myCharts/MapChart.vue";
|
import MapMarkList from "@/components/mapMarkList.vue";
|
import pie3d from "./components/pie3d";
|
import bar3d from "./components/bar-3d";
|
import circleBox from "./components/circle.vue";
|
import BarChart from "@/components/myCharts/BarChart.vue";
|
import LedNum from "@/components/ledNum";
|
// import pieChart from "./components/pieCharts";
|
import pieChart from "./components/pie-chart1";
|
import BarChartAlarm from "./components/batt-chart-alarm";
|
import PowerPieChart from "@/components/myCharts/PieRoseChart.vue";
|
import { const_alarm_level } from "@/assets/js/const";
|
import { getLabelByValue } from "@/assets/js/tools";
|
import getNowStamp from "@/assets/js/tools/getNowStamp";
|
import marqueeTop from './components/marqueeTop.vue';
|
|
// import svgSubway from './components/test.vue';
|
import svgSubway from './components/SubwayView.vue';
|
|
import createWs from "@/assets/js/websocket/plus";
|
import { sethoubeiTime, formatSeconds } from "@/assets/js/tools";
|
const WSMixin = createWs("screen_sz2", 'battAlarmFoot');
|
|
export default {
|
name: "",
|
mixins: [WSMixin],
|
data() {
|
return {
|
nums: {},
|
selectFlag: false,
|
newItems: [],
|
lineSelect0: '',
|
lineSelect1: '',
|
lineSelect2: '',
|
lineSelect3: '',
|
lineList: [],
|
otherPwrProd: [],
|
testData: {},
|
faultData: {},
|
workState: {},
|
alarmRt: {},
|
statusList: {},
|
alarmData: [[], [], []],
|
nxType: 0,
|
alarmType: 0,
|
alarms: [0, 0, 0],
|
devCount: 0,
|
stationNum: 0,
|
battGroupCount: 0,
|
battGroupMonCount: 0,
|
cap: {
|
level0: 0,
|
level1: 0,
|
level2: 0,
|
level3: 0,
|
level4: 0,
|
},
|
tbl: {
|
headers: [
|
// {
|
// prop: "stationArea",
|
// label: "区域",
|
// minWidth: 260,
|
// sortable: false,
|
// },
|
{
|
prop: "stationName3",
|
label: "站点",
|
minWidth: 160,
|
sortable: false,
|
},
|
{
|
prop: "alarmPoint",
|
label: "告警类别",
|
minWidth: 160,
|
sortable: false,
|
},
|
{
|
prop: "alarmLevel",
|
label: "告警等级",
|
minWidth: 160,
|
sortable: false,
|
},
|
{
|
prop: "alarmName",
|
label: "告警名称",
|
minWidth: 160,
|
sortable: false,
|
},
|
{
|
prop: "almStartTime",
|
label: "告警开始时间",
|
minWidth: 110,
|
},
|
],
|
data: [],
|
},
|
};
|
},
|
components: {
|
homeCard,
|
BatteryPieChart,
|
MapChart,
|
MapMarkList,
|
circleBox,
|
BarChart,
|
pie3d,
|
LedNum,
|
pieChart,
|
BarChartAlarm,
|
bar3d,
|
PowerPieChart,
|
svgSubway,
|
marqueeTop,
|
},
|
methods: {
|
alarmTypeChangede(value) {
|
if (!value) {
|
this.$nextTick(() => {
|
this.$refs.alarmPieChart.update();
|
});
|
} else {
|
this.$nextTick(() => {
|
this.$refs.chart_alarm.setData(this.alarmData);
|
});
|
}
|
},
|
onWSMessage1(res) {
|
res = JSON.parse(res.data);
|
// console.log(res, "=====111data");
|
let {
|
res_inf,
|
res_battState,
|
res_battAlarm,
|
res_station,
|
} = res.data;
|
// 站点数量统计更新
|
this.updateSiteDev(res_inf);
|
// 测试信息 改为告警信息
|
this.updateTestData(res_battAlarm);
|
// 更新电池状态
|
this.updateWorkState(res_battState);
|
// // 更新地图
|
this.updateMap(res_station);
|
},
|
onWSOpen2() {
|
this.sendMessage2();
|
},
|
sendMessage2() {
|
let userId = sessionStorage.getItem("userId");
|
this.SOCKET2.send(Number(userId));
|
},
|
onWSMessage2(res) {
|
let resData = JSON.parse(res.data);
|
let list = resData.data.filter((item) => {
|
let nowStamp = getNowStamp();
|
let inputDate = Date.parse(item.almStartTime); //输入时间戳
|
return nowStamp - inputDate < 60 * 60 * 24 * 1000;
|
}).map((item) => {
|
item.stationObj = {
|
stationName: item.stationName,
|
stationName1: item.stationName1,
|
stationName2: item.stationName2,
|
stationName3: item.stationName3,
|
stationName4: item.stationName4,
|
stationName5: item.stationName5,
|
};
|
item.alarmLevel = getLabelByValue(
|
item.almLevel,
|
const_alarm_level.levelNumber,
|
"----"
|
);
|
let alarmType = Number(item.alarmType);
|
let alarmPoint = "";
|
switch (alarmType) {
|
case 1:
|
alarmPoint = "设备告警";
|
break;
|
case 2:
|
alarmPoint = "电源告警";
|
break;
|
default:
|
alarmPoint = "电池告警";
|
break;
|
}
|
|
item.alarmPoint = alarmPoint;
|
return item;
|
});
|
this.tbl.data = list;
|
// console.log('list', list, '=============');
|
|
// this.updateFlag = Math.random();
|
},
|
legendChange(data) {
|
// console.log('data, ', data, '=============');
|
this.selectFlag = true;
|
let stionNum = 0;
|
let battNum = 0;
|
let devNum = 0;
|
let nums = this.nums;
|
Object.keys(data).forEach(v => {
|
if (data[v]) {
|
stionNum += nums[v].stionNum;
|
devNum += nums[v].devNum;
|
battNum += nums[v].battNum;
|
}
|
});
|
this.stationNum = stionNum;
|
this.devCount = devNum;
|
this.battGroupCount = battNum;
|
},
|
updateSiteDev(data) {
|
const { devNum, stionNum, battNum } = data.data2?.allmap || {};
|
if (!this.selectFlag) {
|
this.devCount = devNum || 0;
|
this.stationNum = stionNum || 0;
|
this.battGroupCount = battNum || 0;
|
}
|
|
let _data = data.data2;
|
let res = {};
|
Object.keys(_data).forEach(v => {
|
if (v != 'allmap') {
|
res[v + '号线'] = _data[v];
|
}
|
});
|
this.nums = res;
|
},
|
updateWorkState(data) {
|
data = data.data2;
|
let workList = {};
|
this.lineList.forEach(v => {
|
let item = v == 0 ? data['allmap'] : data[v];
|
let xLabel = [];
|
let sData = [];
|
Object.keys(item).forEach(vv => {
|
xLabel.push(vv);
|
sData.push(item[vv]);
|
});
|
workList[v] = {xLabel, sData};
|
});
|
this.workState = workList;
|
this.$refs.bar3d1.setData(this.workState[this.lineSelect2]);
|
},
|
updateGroupCap(obj) {
|
const { code, data, data3 } = obj;
|
let level0 = 0,
|
level1 = 0,
|
level2 = 0,
|
level3 = 0,
|
level4 = 0;
|
if (code && data) {
|
level0 = data3[1];
|
level1 = data3[2];
|
level2 = data3[3];
|
level3 = data3[4];
|
level4 = data3[5];
|
}
|
this.cap.level0 = level0;
|
this.cap.level1 = level1;
|
this.cap.level2 = level2;
|
this.cap.level3 = level3;
|
this.cap.level4 = level4;
|
},
|
|
updateTestData(obj) {
|
let list_obj = obj.data2.level;
|
let lineList = Object.keys(list_obj);
|
lineList.unshift(0);
|
if (!this.lineList.length) {
|
this.lineList = lineList;
|
|
this.lineSelect0 = 0;
|
this.lineSelect1 = 0;
|
this.lineSelect2 = 0;
|
this.lineSelect3 = 0;
|
}
|
|
let test = {};
|
lineList.forEach((item) => {
|
let _item = item == 0 ? obj.data2.allLevel : list_obj[item];
|
const {
|
1: level1,
|
2: level2,
|
3: level3,
|
4: level4,
|
} = _item;
|
|
test[item] = {
|
xLabel: ["一级告警", "二级告警", "三级告警", "四级告警"],
|
sData: [
|
level1,
|
level2,
|
level3,
|
level4
|
],
|
};
|
});
|
this.testData = test;
|
// 故障
|
let fault = {};
|
let _fault = obj.data2.type;
|
lineList.forEach(v => {
|
let _item = v == 0 ? obj.data2.allType : _fault[v];
|
let arr = [];
|
Object.keys(_item).forEach(vv => {
|
arr.push({
|
name: vv,
|
value: _item[vv]
|
});
|
});
|
fault[v] = arr;
|
});
|
|
this.faultData = fault;
|
|
this.$refs.bar3d0.setData(test[this.lineSelect0]);
|
this.$refs.pie.setData(fault[this.lineSelect1]);
|
// 告警列表
|
let alarmRt = {};
|
let alarmList = obj.data2.list;
|
lineList.forEach(v => {
|
let _list = v == 0 ? alarmList['allList'] : alarmList[v];
|
alarmRt[v] = _list;
|
});
|
this.alarmRt = alarmRt;
|
this.newItems = alarmRt[this.lineSelect3];
|
},
|
testLevelChange(value) {
|
// TODO
|
switch(value) {
|
case 0:
|
this.$refs.bar3d0.setData(this.testData[this.lineSelect0]);
|
break;
|
case 1:
|
this.$refs.pie.setData(this.faultData[this.lineSelect1]);
|
break;
|
case 2:
|
this.$refs.bar3d1.setData(this.workState[this.lineSelect2]);
|
break;
|
case 3:
|
this.newItems = this.alarmRt[this.lineSelect3];
|
break;
|
}
|
},
|
// 更新地图
|
updateMap(obj) {
|
this.statusList = obj.data2 || {};
|
},
|
goDevWorkState(num) {
|
let status = num;
|
this.$router.push({
|
path: "/dataTest/btsStatus?pageFlag=" + Math.random(),
|
query: {
|
status,
|
},
|
});
|
},
|
goToPowerMagerPage(producer) {
|
// 跳转到对应的页面
|
this.$router.push({
|
path: "/dataMager/powerMager",
|
query: {
|
producer: JSON.stringify(producer),
|
pageFlag: Math.random(),
|
},
|
});
|
},
|
goDevAlarm() {
|
this.$router.push({
|
path: "/alarmMager/deviceTimequery",
|
query: {
|
pageFlag: Math.random(),
|
fromType: "fromIndex",
|
alarmId: "119020",
|
},
|
});
|
},
|
|
goRealTime(obj) {
|
// console.log(obj);
|
let search =
|
"?province=" +
|
obj.stationName1 +
|
"&city=" +
|
obj.stationName2 +
|
"&county=" +
|
obj.stationName5 +
|
"&home=" +
|
obj.stationName3 +
|
"&batt=" +
|
obj.battGroupId +
|
"&pageFlag=" +
|
Math.random();
|
let url = "/dataTest/movingRingSystem/" + search + "&listReload=1";
|
this.$router.push(url);
|
},
|
goStations() {
|
this.$router.push("/dataMager/totalStation?pageFlag=" + Math.random());
|
},
|
goBatt() {
|
this.$router.push("/dataMager/battGroupMager");
|
},
|
initEvent() {
|
// this.$refs.map.getChart().on("click", (e) => {
|
// console.log('e', e, '=======123======');
|
|
// });
|
},
|
},
|
|
computed: {
|
showMarquee() {
|
return typeof this.newItems == "undefined" || this.newItems.length == 0
|
? false
|
: true;
|
},
|
},
|
|
mounted() {
|
if (this.$refs.alarmPieChart) {
|
this.$refs.alarmPieChart.update();
|
}
|
this.initEvent();
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.p-main {
|
height: 100%;
|
// display: grid;
|
// grid-auto-flow: column;
|
// grid-template-rows: 1fr;
|
// grid-template-columns: 1fr 1.95fr 1fr;
|
// grid-gap: 8px;
|
display: flex;
|
|
.p-side {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
padding-left: 36px;
|
padding-right: 58px;
|
position: relative;
|
&::before {
|
content: '';
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
background: url(./images/bg-side.png) left center / auto 100% no-repeat,
|
url(./images/bg-card.png) left center / 100% 100% no-repeat;
|
}
|
&.p-right {
|
padding-left: 68px;
|
padding-right: 36px;
|
&::before {
|
transform: scaleX(-1);
|
}
|
}
|
.row {
|
margin-top: 50px;
|
margin-bottom: 50px;
|
|
}
|
.row~.row {
|
margin-top: 8px;
|
}
|
}
|
.row {
|
flex: 1;
|
:deep(.el-select) {
|
width: 8em;
|
}
|
}
|
|
|
/deep/ .home-card {
|
padding: 0;
|
}
|
|
.wraper {
|
flex: 2.4;
|
// grid-row-start: span 2;
|
display: flex;
|
flex-direction: column;
|
|
.row1 {
|
flex: 0.2;
|
}
|
|
.row2 {
|
flex: 1.8;
|
margin-top: 8px;
|
position: relative;
|
&::before {
|
content: '';
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
background: url(./images/bg-map-sz.jpg) center center / cover no-repeat;
|
opacity: 0.6;
|
}
|
}
|
}
|
|
.row.alarm {
|
// grid-column-start: span 2;
|
}
|
|
.row.test-info {
|
// grid-row-start: span 2;
|
}
|
}
|
|
|
.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: 86px;
|
background-image: url("~@/components/bigScreenPage/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("~@/components/bigScreenPage/images/mon_info_box2.png");
|
}
|
|
.mon-info-box.box3 {
|
background-image: url("~@/components/bigScreenPage/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;
|
}
|
|
.flex-map-contain {
|
height: 100%;
|
position: relative;
|
|
.inner {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
}
|
}
|
|
.scroller-wrap {
|
position: relative;
|
height: 100%;
|
|
.inner {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
}
|
|
// /deep/ .my-list {
|
// font-size: 14px;
|
// }
|
}
|
|
.dev-wrap {
|
height: 100%;
|
padding: 0 10px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.item {
|
width: 22%;
|
// &~.item {
|
// margin-left: 6px;
|
// }
|
}
|
}
|
|
.info {
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 10px;
|
|
.item {
|
cursor: pointer;
|
display: flex;
|
flex-direction: column;
|
// border-radius: 6px;
|
align-items: center;
|
justify-content: center;
|
min-width: 10em;
|
min-height: 4em;
|
background: url(./images/bg-info.png) center center / contain no-repeat;
|
|
.name {
|
// background: #0ff;
|
// border-radius: 6px;
|
// color: #333;
|
// font-size: 18px;
|
// font-weight: bold;
|
// padding: 0 10px;
|
font-size: 14px;
|
margin-top: 10px;
|
color: #0ff;
|
&::after {
|
content: ':';
|
}
|
}
|
|
.num {
|
// width: 3em;
|
// height: 1.5em;
|
// padding: 0 10px;
|
color: #fbfc0d;
|
font-weight: bold;
|
font-size: 22px;
|
}
|
}
|
}
|
|
.chart-wrap {
|
position: relative;
|
height: 100%;
|
|
.inner {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
}
|
}
|
.scroller-wraper {
|
position: absolute;
|
left: 0;
|
top: 30px;
|
right: 0;
|
bottom: 30px;
|
overflow: hidden;
|
}
|
|
/deep/ .mark-list-container {
|
bottom: 0.4rem;
|
right: 0.4rem;
|
}
|
|
/deep/ .cursor-pointer {
|
cursor: pointer;
|
}
|
|
/deep/ .el-table tr.power-off.power-off td {
|
color: #f00;
|
}
|
</style>
|
