<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="searchDisChargePlan">
|
<div class="label">今日计划放电:</div>
|
<div class="value">{{ sum.stationNumOfDischargePlanToday }}</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" v-if="kvList.length < 2">
|
<div class="col-inner"></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"
|
>
|
<template #sub-title>
|
<el-select
|
@change="changeStationInfo"
|
v-model="mapStation.stationId"
|
filterable
|
size="mini"
|
style="width: 380px"
|
>
|
<el-option
|
v-for="(item, key) in stationList"
|
:key="'key' + key"
|
:label="item.stationName"
|
:value="item.stationId"
|
></el-option>
|
</el-select>
|
</template>
|
<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="'' != tableType ? '1300px' : '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="'' != tableType"
|
style="width: 100%"
|
>
|
<el-table-column type="index" width="50"> </el-table-column>
|
<el-table-column
|
label="站名"
|
prop="stationName"
|
show-overflow-tooltip
|
></el-table-column>
|
<template v-if="'discharge' == tableType">
|
<el-table-column
|
label="测试时间"
|
prop="testStarttime"
|
width="166"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
label="测试时长"
|
prop="testTlong"
|
width="100"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
label="测试容量"
|
prop="testCap"
|
width="150"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
label="预估实际容量"
|
prop="rCap"
|
width="120"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
label="放电停止原因"
|
prop="testStoptypeReason"
|
width="200"
|
show-overflow-tooltip
|
></el-table-column>
|
</template>
|
<template v-if="'plan' == tableType">
|
<el-table-column
|
prop="dischargeStarttime"
|
width="180"
|
align="center"
|
label="放电开始时间"
|
></el-table-column>
|
<el-table-column width="120" align="center" label="计划执行状态">
|
<template slot-scope="scope">
|
<span>{{ getState(scope.row) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column width="220" align="center" label="放电异常原因">
|
<template slot-scope="scope">
|
<span>{{ getDischargeStopReason(scope.row) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="dischargeCleartype"
|
width="120"
|
align="center"
|
label="计划状态"
|
>
|
<template slot-scope="scope">
|
<el-tooltip
|
v-if="scope.row.dischargeCleartype"
|
effect="dark"
|
content="有效放电计划"
|
placement="bottom"
|
>
|
<i class="el-icon-success font-primary"></i>
|
</el-tooltip>
|
<el-tooltip
|
v-else
|
effect="dark"
|
content="无效放电计划"
|
placement="bottom"
|
>
|
<i class="el-icon-error font-error"></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</template>
|
<el-table-column label="操作" width="80" align="center">
|
<template slot-scope="scope">
|
<el-button
|
type="success"
|
v-if="'plan' == tableType"
|
size="mini"
|
@click="goPlan(scope.row)"
|
>详情</el-button
|
>
|
<el-button
|
type="success"
|
v-else
|
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 { getLabelByValue } from "@/assets/js/tools";
|
import { const_plan } from "@/assets/js/const";
|
|
import { searchByConditionOfWebSocket } from "@/views/jobManage/js/planManage";
|
import createWs from "@/assets/js/websocket";
|
const WSMixin = createWs("homeDevOp");
|
|
export default {
|
name: "",
|
mixins: [WSMixin],
|
data() {
|
const constPlan = const_plan;
|
return {
|
discharge_stateList: constPlan.state, //测试状态
|
dischargeReason: constPlan.stopReason, // 放电异常原因
|
tableType: "",
|
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,
|
stationNumOfDischargePlanToday: 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: {
|
// 获取计划状态类型
|
getState(data) {
|
return getLabelByValue(data.dischargeState, this.discharge_stateList);
|
},
|
// 获取放电计划失败的原因
|
getDischargeStopReason(data) {
|
let result = "";
|
if (
|
data.dischargeState == 0 ||
|
data.dischargeState == 2 ||
|
data.dischargeState == 3
|
) {
|
result = "无";
|
} else {
|
let label = getLabelByValue(data.dischargeReason, this.dischargeReason);
|
result = label ? label : "未知";
|
}
|
return result;
|
},
|
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,
|
stationNumOfDischargePlanToday,
|
} = 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.sum.stationNumOfDischargePlanToday = stationNumOfDischargePlanToday;
|
|
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
|
// }
|
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,
|
};
|
})
|
);
|
},
|
mapClick(data) {
|
// console.log(data, '=====')
|
this.mapStation = this.format(data);
|
},
|
changeStationInfo(id) {
|
let data = {};
|
for (let i = 0; i < this.stationList.length; i++) {
|
if (this.stationList[i].stationId == id) {
|
data = this.stationList[i];
|
break;
|
}
|
}
|
this.mapClick(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.tableType = "";
|
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.tableType = "";
|
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.tableType = "";
|
this.listVisible = true;
|
} else {
|
this.$layer.close(loading);
|
this.$message.error("查询失败");
|
}
|
});
|
},
|
searchDisChargePlan() {
|
let count = this.sum.stationNumOfDischargePlanToday;
|
if (count == 0) {
|
this.$message.success("没有相关站点");
|
return false;
|
}
|
this.listTitle = "今日有放电计划的站点列表";
|
this.tableData = [];
|
let day = new Date().format("yyyy-MM-dd");
|
let param = {
|
//测试状态 -1全部 0等待启动，1放电延时 2放电完成 3放电计划进行中 4放电失败
|
dischargeState: -1,
|
battgroupid: 0,
|
dischargeStarttime: day + " 00:00:00",
|
dischargeStarttime1: day + " 23:59:59",
|
stationName1: "",
|
stationName: "",
|
page: {
|
pageSize: count, //每页的行数
|
pageCurr: 1,
|
},
|
uId: sessionStorage.getItem("userId"),
|
};
|
let loading = this.$layer.loading();
|
searchByConditionOfWebSocket(param).then((res) => {
|
let { code, data } = res.data;
|
if (code && data) {
|
// console.log(data2);
|
this.$layer.close(loading);
|
this.tableType = "plan";
|
this.listVisible = true;
|
this.tableData = data.list;
|
} else {
|
this.$layer.close(loading);
|
this.$message.error("查询失败");
|
}
|
});
|
},
|
goPlan(obj) {
|
this.$router.push(
|
"/jobManage/planManage?day=today&pageFlag=" + Math.random()
|
);
|
this.listVisible = false;
|
},
|
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.tableType = "";
|
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.tableType = "";
|
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.tableType = "";
|
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.tableType = "discharge";
|
this.listVisible = true;
|
this.tableData = data2.map((v) => {
|
v.isHis = true;
|
v.testTlong = formatSeconds(v.testTimelong);
|
v.rCap = v.realCap.toHold(1);
|
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.tableType = "";
|
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, 0.2) 0,
|
rgba(21, 32, 63, 0.2) 20%,
|
rgba(0, 254, 255, 0.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, 0.1);
|
|
&:nth-child(2n + 1) {
|
background: rgba(0, 254, 255, 0.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 0.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>
|
