<template>
|
<content-box :title="fullStationName" class="mgl8">
|
<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"></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-tabs>
|
</div>
|
</flex-layout>
|
</content-box>
|
</template>
|
<script>
|
import AnalogTabPane from "@/pages/dataMager/components/AnalogTabPane";
|
import WarnTabPane from "@/pages/dataMager/components/WarnTabPane";
|
import StateTabPane from "@/pages/dataMager/components/StateTabPane";
|
import {getPowerInfo} from "@/pages/dataMager/js";
|
import {Timeout} from "@/assets/js/tools";
|
import ContentBox from "@/components/ContentBox";
|
|
export default {
|
components: {
|
ContentBox,
|
StateTabPane,
|
WarnTabPane,
|
AnalogTabPane,
|
},
|
data() {
|
return {
|
timer: new Timeout(),
|
acTabs: 'analog',
|
info: getPowerInfo(),
|
socket: "",
|
isOpen: false,
|
powerInfo: {
|
powerDeviceId: 0,
|
stationId: 0,
|
stationName: "",
|
stationName1: "",
|
stationName2: "",
|
stationName3: "",
|
stationName4: " ",
|
stationName5: "",
|
},
|
}
|
},
|
watch: {
|
"$route.params.powerDeviceId"(powerDeviceId) {
|
this.$nextTick(() => {
|
this.getPowerInfo(powerDeviceId);
|
});
|
},
|
"$store.state.theme.collapse"() {
|
this.$nextTick(() => {
|
this.resize();
|
});
|
},
|
},
|
methods: {
|
getPowerInfo(powerDeviceId) {
|
this.powerInfo.powerDeviceId = powerDeviceId;
|
this.$apis.dataMager.powerMager.getInfoById({
|
powerDeviceId: powerDeviceId
|
}).then(res => {
|
let rs = JSON.parse(res.data.result);
|
console.log(rs);
|
if (rs.code == 1) {
|
this.powerInfo = rs.data;
|
} else {
|
this.powerInfo = {
|
powerDeviceId: 0,
|
stationId: 0,
|
stationName: "",
|
stationName1: "",
|
stationName2: "",
|
stationName3: "",
|
stationName4: " ",
|
stationName5: "",
|
};
|
}
|
// 启动查询
|
this.startSearch();
|
}).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;
|
}
|
},
|
startSearch() {
|
this.timer.start(()=>{
|
this.$axios.all([this.searchPowerACDCInfo()]).then(()=>{
|
// 启动循环
|
this.timer.open();
|
}).catch(error=>{
|
// 启动循环
|
this.timer.open();
|
});
|
}, 4000);
|
},
|
searchPowerACDCInfo() {
|
this.$apis.dataMager.powerMager.getACDCData(this.powerInfo.powerDeviceId).then(res=>{
|
let rs = JSON.parse(res.data.result);
|
console.log(JSON.parse(res.data.result));
|
if (rs.code == 1 && rs.data.length != 0) {
|
this.info = rs.data[0];
|
} else {
|
this.info = getPowerInfo();
|
}
|
}).catch(error=>{
|
console.log(error);
|
});
|
},
|
},
|
computed: {
|
fullStationName() {
|
let powerInfo = this.powerInfo;
|
if (powerInfo.powerDeviceId) {
|
return powerInfo.stationName1 + "-" + powerInfo.stationName2
|
+ "-" + powerInfo.stationName5 + "-" + powerInfo.stationName3 + "-" + powerInfo.powerDeviceName;
|
return "未知站点名称";
|
} 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;
|
}
|
</style>
|
