<template>
|
<!-- 运维首页 -->
|
<div class="page-pos">
|
<div class="bar">
|
<!-- 全部站点 -->
|
<div class="item">
|
<div class="label">全部站点:</div>
|
<div class="value">{{ sum.station }}</div>
|
</div>
|
<!-- 充电电池组 -->
|
<div class="item">
|
<div class="label">放电电池组:</div>
|
<div class="value">{{ sum.discharg }}</div>
|
</div>
|
<!-- 浮充电池组 -->
|
<div class="item">
|
<div class="label">浮充电池组:</div>
|
<div class="value">{{ sum.float }}</div>
|
</div>
|
<!-- 整流器故障 -->
|
<div class="item cur-pointer" @click="searchAcdcModError">
|
<div class="label">整流器故障:</div>
|
<div class="value">{{ sum.fault }}</div>
|
</div>
|
<!-- 负载熔断 -->
|
<div class="item cur-pointer" @click="searchFuse">
|
<div class="label">负载熔断:</div>
|
<div class="value">{{ sum.fusing }}</div>
|
</div>
|
<!-- 停电放电 -->
|
<div class="item cur-pointer" @click="getJcdisBatt">
|
<div class="label">停电放电:</div>
|
<div class="value">{{ sum.jcdisNum }}</div>
|
</div>
|
<!-- 年度已核容 -->
|
<div class="item cur-pointer" v-if="isMain" @click="getHrYeardisBatt">
|
<div class="label">年度已核容:</div>
|
<div class="value">{{ sum.hrdisNum }}</div>
|
</div>
|
<!-- 按钮 -->
|
<div class="btn-grp">
|
<div class="loop-time" v-if="!isMain">
|
<span class="loop-label">轮巡时长：</span>
|
<el-select v-model="loopTime" size="mini" class="loop-select" @change="changeLoop">
|
<el-option v-for="item in loopTimes" :key="item.label" :label="item.label" :value="item.value"></el-option>
|
</el-select>
|
</div>
|
<div class="btn" v-if="!isMain" @click="showFilter">查看指定</div>
|
<div class="btn" @click="toggleView">切换到{{ isMain ? '站点' : '主' }}视图</div>
|
</div>
|
<!-- BAR END -->
|
</div>
|
<div class="page-content">
|
<div class="point-dot-list" v-if="!isMain">
|
<div v-for="index in list.length" :key="index" @click="pointDotClick(index)" class="point-dot-item"
|
:class="{ 'active': index % list.length == playIdx }"></div>
|
</div>
|
<div :class="{ 'is-main': !isMain, 'inner': true }">
|
<div v-if="!isMain">
|
<transition-group :duration="300" :name="slideName" mode="out-in">
|
<template v-for="(item, i) in list">
|
<div class="page-group" :key="'list_' + i" v-if="(i + 1) % list.length == playIdx">
|
<div class="scroller">
|
<div class="row">
|
<template v-for="(card, idx) in item.slice(0, 4)">
|
<card class="item" :key="'card_' + idx" v-if="card" :title="card.title" :vol="card.stationType"
|
@showinfo="showInfo(card)" :problem="!!card.pwrinf.exceptionCause" :is-node="!!card.nodeStation">
|
<info :data="card"></info>
|
</card>
|
<div class="item" :key="'carde1_' + idx" v-else></div>
|
</template>
|
</div>
|
<div class="row">
|
<template v-for="(card, idx) in item.slice(4)">
|
<card class="item" :key="'card1_' + idx" v-if="card" :title="card.title" :vol="card.stationType"
|
@showinfo="showInfo(card)" :problem="!!card.pwrinf.exceptionCause" :is-node="!!card.nodeStation">
|
<info :data="card"></info>
|
</card>
|
<div class="item" :key="'carde2_' + idx" v-else></div>
|
</template>
|
</div>
|
</div>
|
</div>
|
</template>
|
</transition-group>
|
</div>
|
<div class="main-view" v-else>
|
<div class="side">
|
<div class="desc">
|
<card-box title="站点统计" content-class="card-desc">
|
<div class="row">
|
<div class="col col1">
|
<div class="col-inner">
|
<div class="label">全部站点:</div>
|
<div class="value">{{ sum.station }}</div>
|
</div>
|
|
</div>
|
<div v-for="(item, idx) in kvList" :key="'kv_' + idx" :class="['col', 'col' + (idx + 2)]">
|
<div class="col-inner">
|
<div class="label">{{ item.name }}站:</div>
|
<div class="value">{{ item.value }}</div>
|
</div>
|
</div>
|
<!-- <div class="col col3">
|
<div class="col-inner">
|
<div class="label">110kv站:</div>
|
<div class="value">{{ desc.v110 }}</div>
|
</div>
|
</div> -->
|
</div>
|
<div class="row">
|
<div class="col col1">
|
<div class="col-inner">
|
<div class="label">节点站:</div>
|
<div class="value">{{ desc.nodeStation }}</div>
|
</div>
|
</div>
|
<div class="col col2">
|
<div class="col-inner">
|
<div class="label">普通站:</div>
|
<div class="value">{{ desc.nomalStation }}</div>
|
</div>
|
</div>
|
<div class="col col3">
|
<div class="col-inner cur-pointer" @click="searchPowerOff">
|
<div class="label">停电站:</div>
|
<div class="value">{{ desc.powerOff }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col col1">
|
<div class="col-inner cur-pointer" @click="searchCheckCapDischarge">
|
<div class="label">核容放电站:</div>
|
<div class="value">{{ desc.checkCapDischarge }}</div>
|
</div>
|
</div>
|
<div class="col col2">
|
<div class="col-inner cur-pointer" @click="searchCapAlarm">
|
<div class="label">容量不足站:</div>
|
<div class="value">{{ desc.alarmNum }}</div>
|
</div>
|
</div>
|
<div class="col col3">
|
<div class="col-inner cur-pointer" @click="searCapChange">
|
<div class="label">电池损坏站:</div>
|
<div class="value">{{ desc.changeNum }}</div>
|
</div>
|
</div>
|
</div>
|
</card-box>
|
</div>
|
<div class="details">
|
<card-box title="站点详情" sub-title="（点击右侧地图切换站点信息）" content-class="details-content">
|
<div class="info">
|
<div class="item">
|
<div class="row">
|
<span class="label">站点名称:</span>
|
<span class="value">{{ mapStation.stationName3 }}</span>
|
</div>
|
<div class="row">
|
<span class="label">站点类型:</span>
|
<span class="value">{{ mapStation.stationTypeStr }}</span>
|
</div>
|
<div class="row bdb">
|
<span class="label">电池组数量:</span>
|
<span class="value">{{ mapStation.battList.length }}</span>
|
</div>
|
<!-- -->
|
<div class="row">
|
<span class="label">电池组1状态:</span>
|
<span class="value">{{ mapStation.battList[0].battState }}</span>
|
</div>
|
<div class="row">
|
<span class="label">测试时长:</span>
|
<span class="value">{{ mapStation.battList[0].testTimeLong }}</span>
|
</div>
|
<div class="row">
|
<span class="label">电池组1性能:</span>
|
<span class="value">{{ mapStation.battList[0].battAlm1 }}</span>
|
</div>
|
<!-- -->
|
<div class="row">
|
<span class="label">停电续航时间:</span>
|
<span class="value">{{ formatSeconds(mapStation.battList[0].enduranceActualTimelong) }}</span>
|
</div>
|
</div>
|
<div class="item" v-if="mapStation.battList[1]">
|
<div class="row">
|
</div>
|
<div class="row">
|
</div>
|
<div class="row bdb">
|
</div>
|
<!-- -->
|
<div class="row">
|
<span class="label">电池组2状态:</span>
|
<span class="value">{{ mapStation.battList[0].battState }}</span>
|
</div>
|
<div class="row">
|
<span class="label">测试时长:</span>
|
<span class="value">{{ mapStation.battList[0].testTimeLong }}</span>
|
</div>
|
<div class="row">
|
<span class="label">电池组2性能:</span>
|
<span class="value">{{ mapStation.battList[0].battAlm1 }}</span>
|
</div>
|
<!-- -->
|
<div class="row">
|
<span class="label">停电续航时间:</span>
|
<span class="value">{{ formatSeconds(mapStation.battList[0].enduranceActualTimelong) }}</span>
|
</div>
|
</div>
|
</div>
|
</card-box>
|
</div>
|
</div>
|
<div class="map">
|
<card-box title="站点地图" content-class="map-wrap">
|
<div class="map-inner">
|
<map-chart ref="map" @handleClick="mapClick">
|
<map-mark-list slot="tools"></map-mark-list>
|
</map-chart>
|
</div>
|
</card-box>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 筛选 -->
|
<el-dialog title="查看站点" width="500px" :visible.sync="filterVisible" :close-on-click-modal="false" top="0"
|
class="dialog-center" :modal-append-to-body="false">
|
<div class="dialog-content">
|
<div class="row">
|
<div class="select-wrap">
|
<el-select v-model="currCardId" @change="view" style="width:100%" size="small" filterable
|
placeholder="请选择要查看的电池组">
|
<el-option v-for="(item, idx) in cardList" :key="'opts_' + idx" :label="item.title"
|
:value="item.stationId + '&&' + item.battInf.battGroupId"></el-option>
|
</el-select>
|
</div>
|
<!-- <div class="btn" @click="view">查看</div> -->
|
</div>
|
<div class="res-wrap">
|
<card class="item" :title="resCard.title" :vol="resCard.stationType" @showinfo="showInfo(resCard)"
|
:problem="!!resCard.pwrinf && !!resCard.pwrinf.exceptionCause" :is-node="!!resCard.nodeStation">
|
<info :data="resCard" v-if="resCard.stationId"></info>
|
<div v-else class="empty">请选择要查看的机房</div>
|
</card>
|
</div>
|
<div class="btn-grp">
|
<div class="btn btn-close" @click="filterVisible = false">关闭</div>
|
</div>
|
</div>
|
</el-dialog>
|
<!-- -->
|
<el-dialog :title="listTitle" width="700px" :visible.sync="listVisible" :close-on-click-modal="false" top="0"
|
class="dialog-center" :modal-append-to-body="false">
|
<el-table height="400" :data="tableData" :show-header="false" style="width: 100%">
|
<el-table-column type="index" width="50">
|
</el-table-column>
|
<el-table-column label="站名" property="stationName" show-overflow-tooltip></el-table-column>
|
<el-table-column label="操作" width="80" align="center">
|
<template slot-scope="scope">
|
<el-button type="success" size="mini" @click="details(scope.row)">详情</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-dialog>
|
<power-remarks :visible.sync="powerRemarksDialog" v-if="powerRemarksDialog" :num="pwrNum"></power-remarks>
|
</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 PowerRemarks from "@/views/dataMager/components/powerRemarks.vue";
|
|
import Timeout from '@/assets/js/tools/Timeout';
|
import formatSeconds from '@/assets/js/tools/formatSeconds';
|
import {
|
searchAcdcModError,
|
searchFuse,
|
searchPowerOff,
|
searchCheckCapDischarge,
|
searchCapAlarm,
|
searCapChange,
|
getJcdisBatt,
|
getHrYeardisBatt,
|
} from './js/api';
|
|
import createWs from "@/assets/js/websocket";
|
const WSMixin = createWs("homeDevOp");
|
|
export default {
|
name: '',
|
mixins: [WSMixin],
|
data() {
|
return {
|
pwrNum: '',
|
powerRemarksDialog: false,
|
kvList: [],
|
slideName: "slide-left",
|
tableData: [],
|
listTitle: '相关站点',
|
listVisible: false,
|
stationList: [],
|
mapStation: { battList: [{}] },
|
resCard: {},
|
loading: false,
|
currCardId: '',
|
filterVisible: false,
|
timer: new Timeout(),
|
list: [],
|
cardList: [],
|
// currList: [],
|
playIdx: 0,
|
desc: {
|
nodeStation: 0,
|
v220: 0,
|
v110: 0,
|
nomalStation: 0,
|
powerOff: 0,
|
checkCapDischarge: 0,
|
alarmNum: 0,
|
changeNum: 0,
|
},
|
sum: {
|
station: 0,
|
discharg: 0,
|
float: 0,
|
fault: 0,
|
fusing: 0,
|
jcdisNum: 0,
|
hrdisNum: 0,
|
},
|
// 是否主视图
|
isMain: true,
|
loopTime: 1000 * 60,
|
loopTimes: [
|
{
|
label: "30秒",
|
value: 1000 * 30
|
},
|
{
|
label: "1分钟",
|
value: 1000 * 60
|
},
|
{
|
label: "2分钟",
|
value: 1000 * 60 * 2
|
},
|
{
|
label: "3分钟",
|
value: 1000 * 60 * 3
|
},
|
{
|
label: "4分钟",
|
value: 1000 * 60 * 4
|
},
|
{
|
label: "5分钟",
|
value: 1000 * 60 * 5
|
},
|
],
|
onlyChangeTime: false,
|
}
|
},
|
components: {
|
MapMarkList,
|
MapChart,
|
card,
|
info,
|
cardBox,
|
PowerRemarks,
|
},
|
watch: {
|
isMain(n) {
|
if (n) {
|
this.$nextTick(() => {
|
this.updateMap(this.stationList);
|
});
|
}
|
}
|
},
|
methods: {
|
changeLoop() {
|
this.timer.stop();
|
this.onlyChangeTime = true;
|
this.loop();
|
},
|
pointDotClick(index) {
|
let playIdx = this.playIdx;
|
if (0 == playIdx) {
|
playIdx = this.list.length;
|
}
|
if (index > playIdx) {
|
this.slideName = "slide-left";
|
} else {
|
this.slideName = "slide-right";
|
}
|
if (playIdx != index) {
|
this.$nextTick(() => {
|
this.playIdx = index % this.list.length;
|
setTimeout(() => {
|
this.slideName = "slide-left";
|
}, 100);
|
});
|
}
|
},
|
formatSeconds,
|
toggleView() {
|
this.isMain = !this.isMain;
|
},
|
onWSMessage(res) {
|
res = JSON.parse(res.data);
|
// console.log(res, "=====111data");
|
if (!res.code || !res.data) {
|
return false;
|
}
|
let {
|
battState,
|
data,
|
errmap,
|
fusemap,
|
stationNum,
|
nodeStation,
|
kvMap,
|
nomalStation,
|
powerOff,
|
checkCapDischarge,
|
alarmNum,
|
changeNum,
|
hrdisNum,
|
jcdisNum,
|
} = res.data2;
|
this.sum.station = stationNum;
|
this.sum.discharg = battState.batt3;
|
this.sum.float = battState.batt1;
|
this.sum.fault = errmap.err1;
|
this.sum.fusing = fusemap.fuse1;
|
this.sum.hrdisNum = hrdisNum;
|
this.sum.jcdisNum = jcdisNum;
|
|
this.desc.nodeStation = nodeStation;
|
this.kvList = Object.keys(kvMap).map((v) => ({ name: v.toUpperCase(), value: kvMap[v] })).sort((a, b) => b.value - a.value).slice(0, 2);
|
this.desc.nomalStation = nomalStation;
|
this.desc.powerOff = powerOff;
|
this.desc.checkCapDischarge = checkCapDischarge;
|
this.desc.alarmNum = alarmNum;
|
this.desc.changeNum = changeNum;
|
|
data.forEach((v) => {
|
v.acdc = v.acdc || {
|
acin1Vola: 0,
|
acin1Volb: 0,
|
acin1Volc: 0,
|
acin2Vola: 0,
|
acin2Volb: 0,
|
acin2Volc: 0,
|
acin2Curra: 0,
|
acin2Currb: 0,
|
acin2Currc: 0,
|
acin1Curra: 0,
|
acin1Currb: 0,
|
acin1Currc: 0,
|
dcoutVol: 0,
|
dcoutCurr: 0,
|
isAcdcmod1Err: 0,
|
isAcdcmod2Err: 0,
|
isAcdcmod3Err: 0,
|
isAcdcmod4Err: 0,
|
isAcdcmod5Err: 0,
|
isAcdcmod6Err: 0,
|
isAcdcmod7Err: 0,
|
isAcdcmod8Err: 0,
|
isAcdcmod9Err: 0,
|
isAcdcmod10Err: 0,
|
isAcdcmod11Err: 0,
|
isAcdcmod12Err: 0,
|
isAcdcmod13Err: 0,
|
isAcdcmod14Err: 0,
|
isAcdcmod15Err: 0,
|
isAcdcmod16Err: 0,
|
isLoaderFuse: 0,
|
};
|
v.pwrinf = v.pwrinf || {
|
num: -1,
|
routeNum: 1,
|
};
|
});
|
|
this.stationList = data;
|
if (!this.mapStation.stationId) {
|
this.mapStation = this.format(data[0]);
|
}
|
if (this.$refs.map) {
|
this.updateMap(data);
|
}
|
this.getCardList(data);
|
},
|
format(data) {
|
let {
|
acdc,
|
sgbList,
|
pwrinf,
|
} = data;
|
let isNode = data.nodeStation ? '节点站' : '非节点站';
|
let stationTypeStr = data.stationType ? `${data.stationType}/${isNode}` : isNode;
|
let battList = sgbList.map((v) => {
|
return {
|
testTimeLong: formatSeconds(v.battTestTlong),
|
battState: ['未知', '浮充', '充电', '放电', '均充', '内阻测试'][v.battState] || '未知',
|
battAlm1: v.battAlm ? '落后' : '正常',
|
enduranceActualTimelong: v.enduranceActualTimelong * 60
|
}
|
});
|
battList.splice(2);
|
let battAlm = battList.reduce((t, v) => t + v.battAlm * 1, 0);
|
let isOne = 1 == pwrinf.routeNum;
|
let acinA = acdc.acin1Vola + '/' + acdc.acin2Vola + ' (V)  ' + acdc.acin1Curra + ' (A)',
|
acinB = acdc.acin1Volb + '/' + acdc.acin2Volb + ' (V)  ' + acdc.acin1Currb + ' (A)',
|
acinC = acdc.acin1Volc + '/' + acdc.acin2Volc + ' (V)  ' + acdc.acin1Currc + ' (A)';
|
if (isOne) {
|
acinA = acdc.acin1Vola + ' (V)  ' + acdc.acin1Curra + ' (A)';
|
acinB = acdc.acin1Volb + ' (V)  ' + acdc.acin1Currb + ' (A)';
|
acinC = acdc.acin1Volc + ' (V)  ' + acdc.acin1Currc + ' (A)';
|
}
|
return {
|
...data,
|
battList,
|
acinA,
|
acinB,
|
acinC,
|
dcout: acdc.dcoutVol + ' (V)  ' + acdc.dcoutCurr + ' (A)',
|
battAlm,
|
stationTypeStr,
|
}
|
},
|
getCardList(data) {
|
let list = [];
|
data.forEach(v => {
|
let {
|
acdc,
|
devAlm,
|
pwrAlm,
|
stationId,
|
stationName1,
|
stationName2,
|
stationName3,
|
stationName5,
|
stationType,
|
nodeStation,
|
pwrinf,
|
} = v;
|
v.sgbList.forEach(item => {
|
list.push({
|
battInf: item,
|
acdc,
|
pwrinf,
|
devAlm,
|
pwrAlm,
|
stationId,
|
title: stationName3,
|
//title: stationName3 + '-' + item.battGroupName,
|
stationName1,
|
stationName2,
|
stationName3,
|
stationName5,
|
stationType,
|
nodeStation
|
});
|
});
|
});
|
this.cardList = list;
|
// 把cardList 数组分成8个一组的二维数组 最后不足8个的补空
|
this.formatList(list);
|
if (!this.timer.timer) {
|
this.loop();
|
}
|
},
|
formatList(arr) {
|
let list = [];
|
let max = Math.ceil(arr.length / 8);
|
for (let i = 0; i < max; i++) {
|
let start = i * 8;
|
let end = (i + 1) * 8;
|
let _list = arr.slice(start, end);
|
_list.length = 8;
|
list.push(_list);
|
}
|
this.list = list;
|
},
|
loop() {
|
let loopTime = this.loopTime;
|
this.timer.start(() => {
|
this.play();
|
this.timer.open();
|
}, loopTime);
|
},
|
play() {
|
// console.log('轮播下一页');
|
let idx = this.playIdx;
|
// this.showCard(idx);
|
if (!this.onlyChangeTime) {
|
idx++;
|
}
|
this.onlyChangeTime = false;
|
let max = Math.ceil(this.cardList.length / 8);
|
idx %= max;
|
this.playIdx = idx;
|
},
|
showFilter() {
|
// this.currCardId = '';
|
this.filterVisible = true;
|
},
|
view() {
|
// console.log(this.currCardId, '======view');
|
let [stationId, battGroupId] = this.currCardId.split('&&');
|
this.resCard = this.getCardInf(stationId, battGroupId);
|
},
|
getCardInf(stationId, battGroupId) {
|
let res = null;
|
let cardList = this.cardList;
|
for (let i = 0, j = cardList.length; i < j; i++) {
|
if (stationId == cardList[i].stationId && battGroupId == cardList[i].battInf.battGroupId) {
|
res = cardList[i];
|
break;
|
}
|
}
|
return res;
|
},
|
// 更新地图
|
updateMap(data) {
|
const getColor = (o) => {
|
let res = 0;
|
if (o.fbs9100State) {
|
if (o.fbs9100State.devOnlinevollow) {
|
res = 5;
|
} else {
|
res = o.fbs9100State.devWorkstate
|
}
|
}
|
return ['#0081ff', '#ff6b6c', '#66f842', 'transparent', 'transparent', '#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,
|
}
|
}));
|
},
|
mapClick(data) {
|
// console.log(data, '=====')
|
this.mapStation = this.format(data);
|
},
|
searchAcdcModError() {
|
if (this.sum.fault == 0) {
|
this.$message.success('没有相关站点');
|
return false;
|
}
|
this.listTitle = '整流器故障站点列表';
|
this.tableData = [];
|
let loading = this.$layer.loading();
|
searchAcdcModError().then((res) => {
|
let { code, data, data2 } = res.data;
|
if (code && data) {
|
// console.log(data2);
|
this.$layer.close(loading);
|
this.tableData = data2;
|
this.listVisible = true;
|
} else {
|
this.$layer.close(loading);
|
this.$message.error('查询失败');
|
}
|
});
|
},
|
searchFuse() {
|
if (this.sum.fusing == 0) {
|
this.$message.success('没有相关站点');
|
return false;
|
}
|
this.listTitle = '负载熔断站点列表';
|
this.tableData = [];
|
let loading = this.$layer.loading();
|
searchFuse().then((res) => {
|
let { code, data, data2 } = res.data;
|
if (code && data) {
|
// console.log(data2);
|
this.$layer.close(loading);
|
this.tableData = data2;
|
this.listVisible = true;
|
} else {
|
this.$layer.close(loading);
|
this.$message.error('查询失败');
|
}
|
});
|
},
|
searchPowerOff() {
|
if (this.desc.powerOff == 0) {
|
this.$message.success('没有相关站点');
|
return false;
|
}
|
this.listTitle = '停电站点列表';
|
this.tableData = [];
|
let loading = this.$layer.loading();
|
searchPowerOff().then((res) => {
|
let { code, data, data2 } = res.data;
|
if (code && data) {
|
// console.log(data2);
|
this.$layer.close(loading);
|
this.tableData = data2;
|
this.listVisible = true;
|
} else {
|
this.$layer.close(loading);
|
this.$message.error('查询失败');
|
}
|
});
|
},
|
searchCheckCapDischarge() {
|
if (this.desc.checkCapDischarge == 0) {
|
this.$message.success('没有相关站点');
|
return false;
|
}
|
this.listTitle = '核容放电站站点列表';
|
this.tableData = [];
|
let loading = this.$layer.loading();
|
searchCheckCapDischarge().then((res) => {
|
let { code, data, data2 } = res.data;
|
if (code && data) {
|
// console.log(data2);
|
this.$layer.close(loading);
|
this.tableData = data2;
|
this.listVisible = true;
|
} else {
|
this.$layer.close(loading);
|
this.$message.error('查询失败');
|
}
|
});
|
},
|
searchCapAlarm() {
|
if (this.desc.alarmNum == 0) {
|
this.$message.success('没有相关站点');
|
return false;
|
}
|
this.listTitle = '容量不足站站点列表';
|
this.tableData = [];
|
let loading = this.$layer.loading();
|
searchCapAlarm().then((res) => {
|
let { code, data, data2 } = res.data;
|
if (code && data) {
|
// console.log(data2);
|
this.$layer.close(loading);
|
this.tableData = data2;
|
this.listVisible = true;
|
} else {
|
this.$layer.close(loading);
|
this.$message.error('查询失败');
|
}
|
});
|
},
|
searCapChange() {
|
if (this.desc.changeNum == 0) {
|
this.$message.success('没有相关站点');
|
return false;
|
}
|
this.listTitle = '电池损坏站站点列表';
|
this.tableData = [];
|
let loading = this.$layer.loading();
|
searCapChange().then((res) => {
|
let { code, data, data2 } = res.data;
|
if (code && data) {
|
// console.log(data2);
|
this.$layer.close(loading);
|
this.tableData = data2;
|
this.listVisible = true;
|
} else {
|
this.$layer.close(loading);
|
this.$message.error('查询失败');
|
}
|
});
|
},
|
details(obj) {
|
// console.log(obj);
|
let search =
|
"?province=" +
|
obj.stationName1 +
|
"&city=" +
|
obj.stationName2 +
|
"&county=" +
|
obj.stationName5 +
|
"&home=" +
|
obj.stationName3 +
|
"&batt=" +
|
(obj.battGroupId ? obj.battGroupId : obj.powerDeviceId);
|
// list组件重载
|
// "&listReload=1";
|
let url = '';
|
if (obj.isHis) {
|
url = '/dataTest/history' + search;
|
} else {
|
url = "/dataTest/movingRingSystem/" + search + "&listReload=1";
|
}
|
this.$router.push(url);
|
this.listVisible = false;
|
// if (obj.powerDeviceId) {
|
// this.$router.push("/dataTest/movingRingSystem/ele-info/" + obj.powerDeviceId);
|
// } else {
|
// this.$router.push("/dataTest/movingRingSystem/" + search);
|
// }
|
},
|
// 年度核容电池组
|
getHrYeardisBatt() {
|
if (this.sum.hrdisNum == 0) {
|
this.$message.success('没有相关电池组');
|
return false;
|
}
|
this.listTitle = '本年度已核容放电电池组列表';
|
this.tableData = [];
|
let loading = this.$layer.loading();
|
getHrYeardisBatt().then((res) => {
|
let { code, data, data2 } = res.data;
|
if (code && data) {
|
this.$layer.close(loading);
|
this.listVisible = true;
|
this.tableData = data2.map(v => {
|
v.isHis = true;
|
v.stationName = v.stationName + ' ' + v.battGroupName;
|
return v;
|
});
|
} else {
|
this.$layer.close(loading);
|
this.$message.error('查询失败');
|
}
|
}).catch((err) => {
|
this.$message.error('异常');
|
console.log(err);
|
});
|
},
|
// 实时停电放电电池组列表
|
getJcdisBatt() {
|
if (this.sum.jcdisNum == 0) {
|
this.$message.success('没有相关站点');
|
return false;
|
}
|
this.listTitle = '实时停电放电站点列表';
|
this.tableData = [];
|
let loading = this.$layer.loading();
|
getJcdisBatt().then((res) => {
|
let { code, data, data2 } = res.data;
|
if (code && data) {
|
this.$layer.close(loading);
|
this.listVisible = true;
|
this.tableData = data2;
|
} else {
|
this.$layer.close(loading);
|
this.$message.error('查询失败');
|
}
|
}).catch((err) => {
|
this.$message.error('异常');
|
console.log(err);
|
});
|
},
|
showInfo(obj) {
|
this.pwrNum = obj.pwrinf.num;
|
this.powerRemarksDialog = true;
|
},
|
},
|
|
mounted() {
|
|
},
|
beforeDestroy() {
|
this.timer.stop();
|
}
|
|
}
|
</script>
|
|
<style scoped lang="less">
|
.page-pos {
|
height: 100%;
|
padding: 0 12px;
|
display: flex;
|
flex-direction: column;
|
|
.bar {
|
height: 50px;
|
padding-left: 1.6em;
|
background: #013753;
|
display: flex;
|
justify-content: flex-start;
|
|
.item {
|
display: flex;
|
align-items: center;
|
|
&:not(:first-child) {
|
margin-left: 1.4em;
|
}
|
|
.label {
|
font-size: 22px;
|
color: #00fefe;
|
padding-right: 0.2em;
|
}
|
|
.value {
|
font-size: 38px;
|
color: #ff0;
|
font-weight: bold;
|
}
|
}
|
|
.btn-grp {
|
margin-left: auto;
|
margin-right: 8px;
|
display: flex;
|
align-items: center;
|
|
.btn {
|
cursor: pointer;
|
background: #00fefe;
|
font-size: 18px;
|
font-weight: bold;
|
color: #00263e;
|
height: 36px;
|
line-height: 36px;
|
padding: 0 1.2em;
|
border-radius: 6px;
|
|
&~.btn {
|
margin-left: 16px;
|
}
|
}
|
}
|
}
|
|
.page-content {
|
margin-top: 8px;
|
flex: 1;
|
position: relative;
|
|
.inner {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
z-index: 1;
|
|
.scroller {
|
position: relative;
|
height: 100%;
|
overflow: auto;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
}
|
}
|
|
}
|
|
.page-content {
|
.inner.is-main {
|
bottom: 10px;
|
}
|
}
|
|
.row {
|
display: flex;
|
|
.item {
|
flex: 1;
|
margin-bottom: 8px;
|
|
&:not(:first-child) {
|
margin-left: 12px;
|
}
|
}
|
}
|
|
.main-view {
|
height: 100%;
|
display: flex;
|
|
.side {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
.desc {
|
height: 260px;
|
|
/deep/ .card-desc {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
padding-left: 20px;
|
padding-bottom: 20px;
|
}
|
|
.row {
|
display: flex;
|
|
.col {
|
flex: 1;
|
|
.col-inner {
|
display: inline-flex;
|
align-items: center;
|
}
|
|
}
|
|
.label {
|
width: 5.6em;
|
}
|
|
// .col3 .label {
|
// width: 3.8em;
|
// }
|
|
.value {
|
background: #034660;
|
border-radius: 4px;
|
font-weight: bold;
|
width: 2.4em;
|
padding-left: 0.2em;
|
font-size: 38px;
|
color: #ff0;
|
}
|
}
|
}
|
|
.details {
|
flex: 1;
|
|
/deep/ .details-content {
|
padding: 0 16px 16px;
|
}
|
|
.info {
|
display: flex;
|
height: 100%;
|
box-sizing: border-box;
|
padding: 16px;
|
background: radial-gradient(circle, rgba(21, 32, 63, .2) 0, rgba(21, 32, 63, .2) 20%, rgba(0, 254, 255, .2) 140%);
|
}
|
|
.item {
|
border: 1px #00fefe solid;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
.row {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
background: rgba(0, 254, 255, .1);
|
|
&:nth-child(2n + 1) {
|
background: rgba(0, 254, 255, .15);
|
}
|
|
&:not(:last-child) {
|
border-bottom: 1px solid #073b5a;
|
}
|
}
|
|
&~.item {
|
border-left: 0 none;
|
}
|
|
&:only-child .row {
|
justify-content: center;
|
|
.label {
|
width: auto;
|
padding: 0;
|
padding-right: 0.4em;
|
}
|
}
|
|
&:not(:only-child) .bdb {
|
border-bottom: 1px solid #00fefe;
|
}
|
|
.label {
|
width: 6.8em;
|
padding-left: 1.8em;
|
}
|
|
.value {
|
font-weight: bold;
|
color: #ff0;
|
}
|
}
|
}
|
}
|
|
.map {
|
flex: 1.2;
|
margin-left: 10px;
|
}
|
}
|
|
.page-group {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
transform: translateX(0);
|
}
|
|
.slide-left-enter-active,
|
.slide-left-leave-active,
|
.slide-right-enter-active,
|
.slide-right-leave-active {
|
transition: all .3s;
|
}
|
|
.slide-left-enter {
|
transform: translateX(100%);
|
}
|
|
.slide-left-leave-to {
|
transform: translateX(-100%);
|
}
|
|
.slide-right-enter {
|
transform: translateX(-100%);
|
}
|
|
.slide-right-leave-to {
|
transform: translateX(100%);
|
}
|
|
.slide-left-enter-to,
|
.slide-right-enter-to {
|
transform: translateX(0);
|
}
|
}
|
|
.dialog-content {
|
background: #ececec;
|
padding: 0.4rem;
|
|
.res-wrap {
|
background: #003d64;
|
padding: 10px;
|
margin-top: 10px;
|
font-size: 20px;
|
color: #fff;
|
}
|
|
.btn-grp {
|
padding-top: 0.4rem;
|
padding-bottom: 0.4rem;
|
text-align: right;
|
}
|
|
.btn {
|
cursor: pointer;
|
padding: 4px 8px;
|
background: #153953;
|
color: #fff;
|
border-radius: 4px;
|
display: inline-block;
|
}
|
|
.row {
|
display: flex;
|
|
.select-wrap {
|
flex: 1;
|
// margin-right: 1em;
|
}
|
|
}
|
|
.empty {
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 20px;
|
font-weight: bold;
|
color: #fff;
|
}
|
}
|
|
/deep/ .map-wrap {
|
position: relative;
|
}
|
|
.map-inner {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
}
|
|
.cur-pointer {
|
cursor: pointer;
|
}
|
|
.point-dot-list {
|
position: absolute;
|
z-index: 2;
|
bottom: 0;
|
width: 100%;
|
text-align: center;
|
|
.point-dot-item {
|
display: inline-block;
|
background-color: #1f6196;
|
border-radius: 8px;
|
width: 12px;
|
height: 12px;
|
margin-left: 8px;
|
cursor: pointer;
|
}
|
}
|
|
.point-dot-list {
|
.point-dot-item.active {
|
background-color: #00fefe;
|
}
|
}
|
|
.loop-time {
|
display: inline-block;
|
|
.loop-label {
|
font-size: 16px;
|
}
|
|
.loop-select {
|
width: 100px;
|
margin-right: 8px;
|
}
|
}
|
</style>
|
