<template>
|
<content-box :title="fullStationName" class="mgl8">
|
<div slot="box-tools" class="box-tools" :class="{'no-high-role': !isHighRole}">
|
<div class="is-link">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="通讯状态"
|
placement="bottom">
|
<hdw-light :type="isLink"></hdw-light>
|
</el-tooltip>
|
</div>
|
<el-button type="danger" size="mini" @click="powerRemarksDialog=true">数据异常备注</el-button>
|
<el-button type="warning" v-if="isHighRole" size="mini" @click="alarmSourceManageDialog=true">告警来源设置</el-button>
|
<el-button type="primary" v-if="isHighRole" size="mini" @click="alarmOnOffDialog=true">告警开关设置</el-button>
|
<el-button type="success" size="mini" @click="remarksDialog=true">异常备注</el-button>
|
<el-tooltip class="item" effect="dark" content="告警参数设置" placement="top-start">
|
<el-button type="warning" size="mini" icon="el-icon-warning" circle @click="goToPowerSetting"></el-button>
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="历史实时数据" placement="top-start">
|
<el-button type="primary" size="mini" icon="el-icon-s-marketing" circle @click="realTimeDialog=true" v-if="false"></el-button>
|
</el-tooltip>
|
</div>
|
<flex-layout>
|
<div class="flex-page-content">
|
<el-tabs
|
type="border-card"
|
class="flex-layout noborder top-border"
|
v-model="acTabs"
|
@tab-click="tabsChange">
|
<el-tab-pane label="模拟量" name="analog">
|
<analog-tab-pane
|
ref="analog"
|
:name="acTabs"
|
:info="info"
|
></analog-tab-pane>
|
</el-tab-pane>
|
<el-tab-pane label="告警量" name="warn">
|
<warn-tab-pane :name="acTabs" :info="info" :setting="alarmSetting"></warn-tab-pane>
|
</el-tab-pane>
|
<el-tab-pane label="状态量" name="state">
|
<state-tab-pane :name="acTabs" :info="info"></state-tab-pane>
|
</el-tab-pane>
|
<el-tab-pane label="资产管理" name="asset">
|
<div class="center-box">
|
<power-asset-info :info="powerInfo"></power-asset-info>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</flex-layout>
|
<!-- 告警来源设置 -->
|
<el-dialog
|
title="告警来源设置"
|
width="auto"
|
:visible.sync="alarmSourceManageDialog"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false">
|
<alarm-source-manage v-if="alarmSourceManageDialog" :id="powerInfo.powerDeviceId"></alarm-source-manage>
|
</el-dialog>
|
|
<!-- 告警开关设置 -->
|
<el-dialog
|
title="告警开启关闭设置"
|
width="auto"
|
:visible.sync="alarmOnOffDialog"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false">
|
<alarm-on-off-manage v-if="alarmOnOffDialog" :id="powerInfo.powerDeviceId" @success="searchPowerSourceManage"></alarm-on-off-manage>
|
</el-dialog>
|
<power-remarks :visible.sync="powerRemarksDialog" v-if="powerRemarksDialog" :num="powerInfo.num"></power-remarks>
|
<!-- 异常备注 -->
|
<el-dialog
|
title="异常备注"
|
width="auto"
|
:visible.sync="remarksDialog"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false">
|
<error-remarks v-if="remarksDialog" :info="powerInfo" :visible.sync="remarksDialog" @success="searchPowerInfo"></error-remarks>
|
</el-dialog>
|
<!-- 历史实时数据 -->
|
<el-dialog
|
title="历史实时数据"
|
width="auto"
|
:visible.sync="realTimeDialog"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false">
|
<history-real-time></history-real-time>
|
</el-dialog>
|
</content-box>
|
</template>
|
<script>
|
import AnalogTabPane from "./components/AnalogTabPane";
|
import WarnTabPane from "./components/WarnTabPane";
|
import StateTabPane from "./components/StateTabPane";
|
import getPowerInfo from "./js/getPowerInfo";
|
import { Timeout } from "@/assets/js/tools";
|
import ContentBox from "@/components/ContentBox";
|
import { getInfoById, getACDCData } from "@/views/dataMager/js/power";
|
import createWs from "@/assets/js/websocket";
|
import AlarmSourceManage from "@/views/dataTest/components/alarmSourceManage.vue";
|
import AlarmOnOffManage from "@/views/dataTest/components/alarmOnOffManage.vue";
|
import PowerRemarks from "@/views/dataMager/components/powerRemarks.vue";
|
import ErrorRemarks from "@/views/dataMager/components/errorRemarks.vue";
|
import {powerSourceManage} from "@/views/alarmMager/js/power";
|
import FlexBox from "@/components/FlexBox.vue";
|
import HdwLight from "@/components/HdwLight.vue";
|
import getNowStamp from "@/assets/js/tools/getNowStamp";
|
import PowerAssetInfo from "@/views/dataMager/components/powerAssetInfo.vue";
|
import HistoryRealTime from "@/views/dataMager/components/historyRealTime.vue";
|
const WSMixin = createWs("RealTime");
|
|
export default {
|
components: {
|
HistoryRealTime,
|
PowerAssetInfo,
|
HdwLight,
|
FlexBox,
|
ErrorRemarks,
|
PowerRemarks,
|
AlarmSourceManage,
|
ContentBox,
|
StateTabPane,
|
WarnTabPane,
|
AnalogTabPane,
|
AlarmOnOffManage
|
},
|
mixins: [WSMixin],
|
data() {
|
let userPower = sessionStorage.getItem("userPower");
|
return {
|
realTimeDialog: false,
|
isLink: -1,
|
uRole: Number(userPower),
|
alarmSourceManageDialog: false,
|
powerRemarksDialog: false,
|
remarksDialog: false,
|
alarmOnOffDialog: false,
|
timer: new Timeout(),
|
acTabs: "analog",
|
info: getPowerInfo(),
|
socket: "",
|
isOpen: false,
|
powerInfo: {
|
num: 0,
|
powerDeviceId: 0,
|
stationId: 0,
|
stationName: "",
|
stationName1: "",
|
stationName2: "",
|
stationName3: "",
|
stationName4: " ",
|
stationName5: "",
|
exceptionCause: "",
|
exceptionCauseAnalysis: ""
|
},
|
alarmSetting: [],
|
};
|
},
|
watch: {
|
"$route.params.powerDeviceId"(powerDeviceId) {
|
this.$nextTick(() => {
|
this.getPowerInfo(powerDeviceId);
|
});
|
},
|
"$store.state.theme.collapse"() {
|
this.$nextTick(() => {
|
this.resize();
|
});
|
},
|
},
|
methods: {
|
goToPowerSetting() {
|
let powerInfo = this.powerInfo;
|
const search = '?powerDeviceId=' + powerInfo.powerDeviceId +"&pageFlag="+Math.random();
|
// 电源参数设置界面
|
this.$router.push('/alarmMager/powerpaSetting' + search + '&fromType=fromIndex')
|
},
|
getPowerInfo(powerDeviceId) {
|
this.powerInfo.powerDeviceId = powerDeviceId;
|
getInfoById({
|
powerDeviceId: powerDeviceId,
|
})
|
.then((res) => {
|
res = res.data;
|
if (res.code && res.data.list.length) {
|
this.powerInfo = res.data.list[0];
|
console.log(this.powerInfo);
|
} else {
|
this.powerInfo = {
|
num: 0,
|
powerDeviceId: 0,
|
stationId: 0,
|
stationName: "",
|
stationName1: "",
|
stationName2: "",
|
stationName3: "",
|
stationName4: " ",
|
stationName5: "",
|
exceptionCause: "",
|
exceptionCauseAnalysis: ""
|
};
|
}
|
// 启动查询
|
this.sendMessage();
|
this.searchPowerSourceManage();
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
},
|
tabsChange() {
|
// 重置图表的大小
|
this.resize();
|
},
|
resize() {
|
switch (this.acTabs) {
|
case "analog":
|
this.$refs.analog.resize();
|
break;
|
case "isolatingDevice":
|
this.$refs.isolatingDevice.resize();
|
break;
|
case "chargerStatus":
|
this.$refs.chargerStatus.resize();
|
break;
|
}
|
},
|
onWSOpen() {
|
this.sendMessage();
|
},
|
sendMessage() {
|
let powerInfo = this.powerInfo;
|
// console.log(powerInfo, '=====powerInfo');
|
if (!powerInfo.powerDeviceId || !this.isWSOpen) {
|
return false;
|
}
|
let params = {
|
powerDeviceId: powerInfo.powerDeviceId,
|
pageType: "power",
|
};
|
// console.log("====", params, JSON.stringify(params));
|
this.SOCKET.send(JSON.stringify(params));
|
},
|
onWSMessage(res) {
|
res = JSON.parse(res.data);
|
let data = res.data.data;
|
console.log(data, "=====data");
|
this.searchPowerACDCInfo(data.pwrdevAcdc);
|
},
|
searchPowerACDCInfo(res) {
|
if (res) {
|
if (res.code && res.data && res.data2.list.length) {
|
this.info = res.data2.list[0];
|
console.log(this.info);
|
// 判断是否超时
|
let outTime = 2 * 60; //设备超时时间(2分钟)
|
let nowTime = getNowStamp(); //当前时间
|
let record = new Date(this.info.recordDatetime).getTime();
|
if (Math.abs(nowTime - record) / 1000 > outTime) {
|
this.isLink = 1;
|
}else {
|
this.isLink = 0;
|
}
|
} else {
|
this.info = getPowerInfo();
|
this.isLink = -1;
|
}
|
}
|
},
|
searchPowerInfo() {
|
// 获取电源信息
|
let powerDeviceId = this.$route.params.powerDeviceId;
|
if (powerDeviceId) {
|
this.getPowerInfo(powerDeviceId);
|
}
|
},
|
searchPowerSourceManage() {
|
let id = this.powerInfo.powerDeviceId;
|
powerSourceManage(id).then(res=>{
|
let rs = res.data;
|
let list = [];
|
if(rs.code === 1) {
|
list = rs.data;
|
}
|
this.alarmSetting = list;
|
}).catch(error=>{
|
this.alarmSetting = [];
|
console.log(error);
|
});
|
}
|
},
|
computed: {
|
isHighRole() {
|
return this.uRole ===10 || this.uRole === 0 || this.uRole ===1;
|
},
|
fullStationName() {
|
let powerInfo = this.powerInfo;
|
if (powerInfo.powerDeviceId) {
|
return (
|
powerInfo.stationName1 +
|
"-" +
|
powerInfo.stationName2 +
|
"-" +
|
powerInfo.stationName5 +
|
"-" +
|
powerInfo.stationName3 +
|
"-" +
|
powerInfo.powerDeviceName
|
);
|
} else {
|
return "未知站点名称";
|
}
|
},
|
},
|
mounted() {
|
// 获取电源信息
|
let powerDeviceId = this.$route.params.powerDeviceId;
|
if (powerDeviceId) {
|
this.getPowerInfo(powerDeviceId);
|
}
|
// 改变大小
|
this.resize();
|
// 窗口大小改变重置内容大小
|
let self = this;
|
// 启动监听
|
window.addEventListener("resize", this.resize);
|
},
|
destroyed() {
|
// 关闭监听
|
window.removeEventListener("resize", this.resize);
|
// 关闭计时器
|
this.timer.stop();
|
},
|
};
|
</script>
|
<style scoped>
|
.mgl8 {
|
margin-left: 8px;
|
}
|
|
.flex-page-content {
|
padding: 4px 4px 0 4px;
|
box-sizing: border-box;
|
}
|
.box-tools {
|
width: 530px;
|
}
|
.box-tools.no-high-role {
|
width: 320px;
|
}
|
.center-box {
|
display: flex;
|
height: 100%;
|
align-items: center;
|
justify-content: center;
|
}
|
.asset-wrapper {
|
display: inline-block;
|
padding: 0 12px;
|
}
|
.asset-head {
|
text-align: right;
|
line-height: 1.5rem;
|
}
|
.is-link {
|
display: inline-block;
|
vertical-align: middle;
|
}
|
.box-tools .iconfont,
|
.box-tools .el-iconfont {
|
font-size: 24px;
|
}
|
</style>
|
