<template>
|
<div class="contentBox">
|
<div class="tipTitle">系统拓扑</div>
|
<div class="diagram-con">
|
<div class="diagram-stc" ref="static"></div>
|
<div class="diagram-flush" ref="flush"></div>
|
<axis :position="axis1" v-if="axis1.length>0"></axis>
|
<axis :position="axis2" v-if="axis2.length>0"></axis>
|
</div>
|
|
<transition name="el-zoom-in-top">
|
<diagram-panel :position="text1Pos" title="开关参数" ref="text1Pos" v-show="showtext1">
|
<div class="panel-item"><span class="label">状态:</span>
|
<el-input class="input" readonly="readonly" :value="panel1.switchClose==1?'合闸':'分闸'"></el-input>
|
</div>
|
<div class="panel-item"><span class="label">电压:</span>
|
<el-input class="input" readonly="readonly" :value="panel1.panelVol"></el-input>
|
<span class="unit">V</span>
|
</div>
|
<div class="panel-item"><span class="label">电流:</span>
|
<el-input class="input" readonly="readonly" :value="panel1.panelCurr"></el-input>
|
<span class="unit">A</span>
|
</div>
|
</diagram-panel>
|
</transition>
|
|
<transition name="el-zoom-in-top">
|
<diagram-panel :position="text2Pos" title="开关参数" ref="text2Pos" v-show="showtext2">
|
<div class="panel-item"><span class="label">状态:</span>
|
<el-input class="input" readonly="readonly" :value="panel2.switchClose==1?'合闸':'分闸'"></el-input>
|
</div>
|
<div class="panel-item"><span class="label">电压:</span>
|
<el-input class="input" readonly="readonly" :value="panel2.panelVol"></el-input>
|
<span class="unit">V</span>
|
</div>
|
<div class="panel-item"><span class="label">电流:</span>
|
<el-input class="input" readonly="readonly" :value="panel2.panelCurr"></el-input>
|
<span class="unit">A</span>
|
</div>
|
</diagram-panel>
|
</transition>
|
|
<transition name="el-zoom-in-top">
|
<diagram-panel :position="text3Pos" title="开关参数" ref="text3Pos" v-show="showtext3">
|
<div class="panel-item"><span class="label">状态:</span>
|
<el-input class="input" readonly="readonly" :value="panel3.switchClose==1?'合闸':'分闸'"></el-input>
|
</div>
|
<div class="panel-item"><span class="label">电压:</span>
|
<el-input class="input" readonly="readonly" :value="panel3.panelVol"></el-input>
|
<span class="unit">V</span>
|
</div>
|
<div class="panel-item"><span class="label">电流:</span>
|
<el-input class="input" readonly="readonly" :value="panel3.panelCurr"></el-input>
|
<span class="unit">A</span>
|
</div>
|
</diagram-panel>
|
</transition>
|
|
<transition name="el-zoom-in-top">
|
<diagram-panel :position="text4Pos" title="电源参数" ref="text4Pos" v-show="showtext4">
|
<div class="panel-item"><span class="label">电压:</span>
|
<el-input class="input" readonly="readonly" :value="panel4.rectifierVol"></el-input>
|
<span class="unit">V</span>
|
</div>
|
<div class="panel-item"><span class="label">电流:</span>
|
<el-input class="input" readonly="readonly" :value="panel4.rectifierCurr"></el-input>
|
<span class="unit">A</span>
|
</div>
|
</diagram-panel>
|
</transition>
|
|
<transition name="el-zoom-in-bottom">
|
<diagram-panel :position="text5Pos" title="直流主配电板参数" ref="text5Pos" v-show="showtext5">
|
<div class="panel-item">
|
<span class="label">1号进线屏开关:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.switchClose1st2500A==1?'合闸':'分闸'">
|
</el-input>
|
<span class="label" style="margin-left:20px;">2号进线屏开关:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.switchClose2st2500A==1?'合闸':'分闸'">
|
</el-input>
|
</div>
|
<div class="panel-item">
|
<span class="label">母联屏开关:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.switchCloseBusScreen==1?'合闸':'分闸'">
|
</el-input>
|
</div>
|
<div class="panel-item">
|
<span class="label">1号负载屏开关:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.switchClose1st2500ALoad==1?'合闸':'分闸'">
|
</el-input>
|
<span class="label" style="margin-left:20px;">2号负载屏开关:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.switchClose2st2500ALoad==1?'合闸':'分闸'">
|
</el-input>
|
</div>
|
<div class="panel-item">
|
<span class="label">A排电压:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.volA"></el-input>
|
<span class="unit">V</span>
|
<span class="label" style="margin-left:20px;">B排电压:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.volB"></el-input>
|
<span class="unit">V</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">A排电流:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.currA"></el-input>
|
<span class="unit">A</span>
|
<span class="label" style="margin-left:20px;">B排电流:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.currB"></el-input>
|
<span class="unit">A</span>
|
</div>
|
</diagram-panel>
|
</transition>
|
|
<transition name="el-zoom-in-top">
|
<diagram-panel :position="text6Pos" title="开关参数" ref="text6Pos" v-show="showtext6">
|
<div class="panel-item"><span class="label">状态:</span>
|
<el-input class="input" readonly="readonly" :value="panel6.switchClose==1?'合闸':'分闸'"></el-input>
|
</div>
|
<div class="panel-item"><span class="label">电压:</span>
|
<el-input class="input" readonly="readonly" :value="panel6.panelVol"></el-input>
|
<span class="unit">V</span>
|
</div>
|
<div class="panel-item"><span class="label">电流:</span>
|
<el-input class="input" readonly="readonly" :value="panel6.panelCurr"></el-input>
|
<span class="unit">A</span>
|
</div>
|
</diagram-panel>
|
</transition>
|
|
<transition name="el-zoom-in-center">
|
<diagram-panel :position="text7Pos" title="AFE变频驱动柜参数" ref="text7Pos" v-show="showtext7" class="panel7">
|
<div class="panel-item">
|
<span class="label">运行情况:</span>
|
<el-input class="input" readonly="readonly" value="正常"></el-input>
|
</div>
|
<div class="panel-item">
|
<span class="label">转矩:</span>
|
<el-input class="input" readonly="readonly" :value="panel7.torqueSet"></el-input>
|
<span class="unit">kN·m</span>
|
<span class="label" style="margin-left:20px;">电机转速:</span>
|
<el-input class="input" readonly="readonly" :value="panel7.motorSpeed"></el-input>
|
<span class="unit">r/min</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">转速:</span>
|
<el-input class="input" readonly="readonly" :value="panel7.speedSet"></el-input>
|
<span class="unit">r/min</span>
|
<span class="label" style="margin-left:20px;">输出有功功率:</span>
|
<el-input class="input" readonly="readonly" :value="panel7.outputPower"></el-input>
|
<span class="unit">kW</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">正向转速限幅:</span>
|
<el-input class="input" readonly="readonly" :value="panel7.positiveSpeedLimit"></el-input>
|
<span class="unit">r/min</span>
|
<span class="label" style="margin-left:20px;">输出电压:</span>
|
<el-input class="input" readonly="readonly" :value="panel7.outputVol"></el-input>
|
<span class="unit">kv</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">反向转速限幅:</span>
|
<el-input class="input" readonly="readonly" :value="panel7.positiveSpeedLimit"></el-input>
|
<span class="unit">r/min</span>
|
<span class="label" style="margin-left:20px;">输出电流:</span>
|
<el-input class="input" readonly="readonly" :value="panel7.outputCurr"></el-input>
|
<span class="unit">A</span>
|
</div>
|
</diagram-panel>
|
</transition>
|
|
<transition name="el-zoom-in-center">
|
<diagram-panel :position="text8Pos" title="供水站情况" ref="text8Pos" v-show="showtext8" class="panel7 panel8">
|
<div class="panel-item">
|
<span class="label">水站运行情况:</span>
|
<el-input class="input" readonly="readonly" value="正常"></el-input>
|
</div>
|
<div class="panel-item">
|
<span class="label">水站温度:</span>
|
<el-input class="input" readonly="readonly" value="40"></el-input>
|
<span class="unit">度</span>
|
<span class="label" style="margin-left:20px;">高温阈值:</span>
|
<el-input class="input" readonly="readonly" value="60"></el-input>
|
<span class="unit">度</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">液位高度:</span>
|
<el-input class="input" readonly="readonly" value="5"></el-input>
|
<span class="unit">米</span>
|
<span class="label" style="margin-left:20px;">高液阈值:</span>
|
<el-input class="input" readonly="readonly" value="2"></el-input>
|
<span class="unit">米</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">水站回水温度:</span>
|
<el-input class="input" readonly="readonly" value="45"></el-input>
|
<span class="unit">度</span>
|
<span class="label">水站出水温度:</span>
|
<el-input class="input" readonly="readonly" value="45"></el-input>
|
<span class="unit">度</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">水站出口1压力:</span>
|
<el-input class="input" readonly="readonly" value="0.5"></el-input>
|
<span class="unit">mPa</span>
|
<span class="label">水站出口2压力:</span>
|
<el-input class="input" readonly="readonly" value="0.5"></el-input>
|
<span class="unit">mPa</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">水站出口3压力:</span>
|
<el-input class="input" readonly="readonly" value="0.5"></el-input>
|
<span class="unit">mPa</span>
|
<span class="label">水站出口4压力:</span>
|
<el-input class="input" readonly="readonly" value="0.5"></el-input>
|
<span class="unit">mPa</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">冷冻水出油流量:</span>
|
<el-input class="input" readonly="readonly" value="45"></el-input>
|
<span class="unit">m³/h</span>
|
<span class="label">冷冻水回水流量:</span>
|
<el-input class="input" readonly="readonly" value="45"></el-input>
|
<span class="unit">m³/h</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">冷冻水压力:</span>
|
<el-input class="input" readonly="readonly" value="45"></el-input>
|
<span class="unit">mPa</span>
|
<span class="label">冷冻水进口压力:</span>
|
<el-input class="input" readonly="readonly" value="30"></el-input>
|
<span class="unit">度</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">压缩机状态:</span>
|
<el-input class="input" readonly="readonly" value="运行正常"></el-input>
|
</div>
|
<div class="panel-item" style="justify-content: flex-start;">
|
<span class="label">电机运行情况:</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">1号电机运行:</span>
|
<el-input class="input" readonly="readonly" value="正常"></el-input>
|
<span class="label">2号电机运行:</span>
|
<el-input class="input" readonly="readonly" value="正常"></el-input>
|
</div>
|
</diagram-panel>
|
</transition>
|
|
<transition name="el-zoom-in-center">
|
<diagram-panel :position="text9Pos" title="供油站情况" ref="text9Pos" v-show="showtext9" class="panel7 panel8">
|
<div class="panel-item">
|
<span class="label">油站运行情况:</span>
|
<el-input class="input" readonly="readonly" value="正常"></el-input>
|
</div>
|
<div class="panel-item">
|
<span class="label">油站温度:</span>
|
<el-input class="input" readonly="readonly" value="40"></el-input>
|
<span class="unit">度</span>
|
<span class="label" style="margin-left:20px;">高温阈值:</span>
|
<el-input class="input" readonly="readonly" value="60"></el-input>
|
<span class="unit">度</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">液位高度:</span>
|
<el-input class="input" readonly="readonly" value="5"></el-input>
|
<span class="unit">米</span>
|
<span class="label" style="margin-left:20px;">高液阈值:</span>
|
<el-input class="input" readonly="readonly" value="2"></el-input>
|
<span class="unit">米</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">油站回油温度:</span>
|
<el-input class="input" readonly="readonly" value="45"></el-input>
|
<span class="unit">度</span>
|
<span class="label">油站出油温度:</span>
|
<el-input class="input" readonly="readonly" value="45"></el-input>
|
<span class="unit">度</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">油站出口1压力:</span>
|
<el-input class="input" readonly="readonly" value="0.5"></el-input>
|
<span class="unit">mPa</span>
|
<span class="label">油站出口2压力:</span>
|
<el-input class="input" readonly="readonly" value="0.5"></el-input>
|
<span class="unit">mPa</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">油站出口3压力:</span>
|
<el-input class="input" readonly="readonly" value="0.5"></el-input>
|
<span class="unit">mPa</span>
|
<span class="label">油站出口4压力:</span>
|
<el-input class="input" readonly="readonly" value="0.5"></el-input>
|
<span class="unit">mPa</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">润滑油出油流量:</span>
|
<el-input class="input" readonly="readonly" value="45"></el-input>
|
<span class="unit">m³/h</span>
|
<span class="label">润滑油回油流量:</span>
|
<el-input class="input" readonly="readonly" value="45"></el-input>
|
<span class="unit">m³/h</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">润滑油压力1:</span>
|
<el-input class="input" readonly="readonly" value="45"></el-input>
|
<span class="unit">mPa</span>
|
<span class="label">润滑油压力2:</span>
|
<el-input class="input" readonly="readonly" value="30"></el-input>
|
<span class="unit">mPa</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">冷冻水压力:</span>
|
<el-input class="input" readonly="readonly" value="45"></el-input>
|
<span class="unit">mPa</span>
|
<span class="label">冷冻水进口压力:</span>
|
<el-input class="input" readonly="readonly" value="30"></el-input>
|
<span class="unit">度</span>
|
</div>
|
<div class="panel-item" style="justify-content: flex-start;">
|
<span class="label">电机运行情况:</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">1号电机运行:</span>
|
<el-input class="input" readonly="readonly" value="正常"></el-input>
|
<span class="label">2号电机运行:</span>
|
<el-input class="input" readonly="readonly" value="正常"></el-input>
|
</div>
|
</diagram-panel>
|
</transition>
|
|
<transition name="el-zoom-in-center">
|
<diagram-panel :position="text10Pos" title="测功机状态" ref="text10Pos" v-show="showtext10" class="panel7">
|
<div class="panel-item">
|
<span class="label">运行情况:</span>
|
<el-input class="input" readonly="readonly" value="正常"></el-input>
|
<span class="unit"></span>
|
<span class="label">扭矩:</span>
|
<el-input class="input" readonly="readonly" value="200"></el-input>
|
<span class="unit">kN·m</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">转速:</span>
|
<el-input class="input" readonly="readonly" value="200"></el-input>
|
<span class="unit">r/min</span>
|
<span class="label">功率:</span>
|
<el-input class="input" readonly="readonly" value="500"></el-input>
|
<span class="unit">kW</span>
|
</div>
|
<div class="panel-item" style="justify-content: flex-start;">
|
<span class="label">温度情况:</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">1支路:</span>
|
<el-input class="input" readonly="readonly" value="30°"></el-input>
|
<span class="label">2支路:</span>
|
<el-input class="input" readonly="readonly" value="30°"></el-input>
|
</div>
|
<div class="panel-item">
|
<span class="label">3支路:</span>
|
<el-input class="input" readonly="readonly" value="30°"></el-input>
|
<span class="label">4支路:</span>
|
<el-input class="input" readonly="readonly" value="30°"></el-input>
|
</div>
|
<div class="panel-item">
|
<span class="label">5支路:</span>
|
<el-input class="input" readonly="readonly" value="30°"></el-input>
|
<span class="label">6支路:</span>
|
<el-input class="input" readonly="readonly" value="30°"></el-input>
|
</div>
|
</diagram-panel>
|
</transition>
|
</div>
|
</template>
|
|
<script>
|
import gridCircuitDiagram from "@/pages/home/topoGraphdiagram/js/gridCircuitDiagram"
|
import diagramStates from '@/pages/home/topoGraphdiagram/js/diagramStates'
|
import DiagramPanel from '@/components/smallModule/DiagramPanel.vue';
|
import {
|
deviceStateAllStatus,
|
centralMonitorSysInfoByDevId,
|
rectifierPowerInfoByDevId,
|
centralMonitorSysSTInfoByDevId,
|
afeInverterInfoByDeviceId,
|
WaterCommInfoByDevId,
|
OilCommInfoByDevId
|
} from "./topoGraphdiagram/js/api"
|
import Axis from '@/components/smallModule/axis.vue';
|
let diagram;
|
export default {
|
components: {
|
DiagramPanel,
|
Axis,
|
},
|
data() {
|
return {
|
axis1: [],
|
axis2: [],
|
text1Pos: [],
|
text2Pos: [],
|
text3Pos: [],
|
text4Pos: [],
|
text5Pos: [],
|
text6Pos: [],
|
text7Pos: [],
|
text8Pos: [],
|
text9Pos: [],
|
text10Pos: [],
|
showtext1: false,
|
showtext2: false,
|
showtext3: false,
|
showtext4: false,
|
showtext5: false,
|
showtext6: false,
|
showtext7: false,
|
showtext8: false,
|
showtext9: false,
|
showtext10: false,
|
run: '',
|
deviceList: [],
|
bigPower: 0,
|
eleBoard: 0,
|
speedCabinet: 1,
|
electric: 1,
|
sensor: 1,
|
dynamometer: 1,
|
AFEcabinet: 0,
|
transformer: 1,
|
waterStation: 0,
|
oilStation: 0,
|
switch5000: 0,
|
switch32001: 0,
|
switch32002: 0,
|
switch5200: 0,
|
panel1: {
|
switchClose: 0,
|
panelVol: 0,
|
panelCurr: 0,
|
},
|
panel2: {
|
switchClose: 0,
|
panelVol: 0,
|
panelCurr: 0,
|
},
|
panel3: {
|
switchClose: 0,
|
panelVol: 0,
|
panelCurr: 0,
|
},
|
panel4: {
|
rectifierVol: 0,
|
rectifierCurr: 0,
|
},
|
panel5: {
|
switchClose1st2500A: 0,
|
switchClose2st2500A: 0,
|
switchCloseBusScreen: 0,
|
switchClose1st2500ALoad: 0,
|
switchClose2st2500ALoad: 0,
|
currA: 0,
|
volA: 0,
|
currB: 0,
|
volB: 0,
|
},
|
panel6: {
|
switchClose: 0,
|
panelVol: 0,
|
panelCurr: 0,
|
},
|
panel7: {
|
devId: 0,
|
modelTmp: 0,
|
motorSpeed: 0,
|
note: "",
|
num: 0,
|
outputCurr: 0,
|
outputPower: 0,
|
outputVol: 0,
|
positiveSpeedLimit: 0,
|
recordTime: "",
|
reverseSpeedLimit: 0,
|
speedSet: 0,
|
torqueSet: 0
|
},
|
panel8: {
|
recordTime: 1614928356000,
|
waterState: 0,
|
waterHighTmp: 0,
|
waterLowLevel: 0,
|
waterHighLevel: 0,
|
waterEleMachine1: 0,
|
waterEleMachine2: 0,
|
waterReturnTmp: 0,
|
waterOutFlow: 0,
|
waterPre1: 0,
|
waterPre2: 0,
|
waterOutPre1: 0,
|
waterOutPre2: 0,
|
waterOutPre3: 0,
|
waterOutPre4: 0,
|
waterReturnFlow: 0,
|
waterCoolPre: 0,
|
waterCoolTmp: 0,
|
waterOutTmp: 0,
|
compressorState: 0,
|
},
|
}
|
},
|
methods: {
|
searchAll() {
|
deviceStateAllStatus().then((res) => {
|
if (res.data.code == 1) {
|
this.deviceList = res.data.data;
|
this.deviceList.map(item => {
|
switch (item.position) {
|
case 5: // 大功率电源
|
this.bigPower = item.commStatus;
|
if (this.bigPower == 0) {
|
diagramStates(diagram, 'bigPower');
|
}
|
rectifierPowerInfoByDevId({
|
devId: item.deviceId
|
}).then((res) => {
|
if (res.data.code == 1) {
|
this.panel4 = res.data.data
|
}
|
}).catch((err) => {
|
console.log(err)
|
});
|
break;
|
case 6: // 直流主配电板
|
this.eleBoard = item.commStatus
|
if (this.eleBoard == 0) {
|
diagramStates(diagram, 'eleBoard');
|
}
|
centralMonitorSysSTInfoByDevId({
|
devId: item.deviceId
|
}).then((res) => {
|
if (res.data.code == 1) {
|
this.panel5 = res.data.data
|
}
|
}).catch((err) => {
|
console.log(err)
|
});
|
break;
|
case 8: // AFE变频
|
this.AFEcabinet = item.commStatus
|
if (this.AFEcabinet == 0) {
|
diagramStates(diagram, 'AFEcabinet');
|
}
|
afeInverterInfoByDeviceId({
|
devId: item.deviceId
|
}).then((res) => {
|
if (res.data.code == 1) {
|
this.panel7 = res.data.data
|
}
|
}).catch((err) => {
|
console.log(err)
|
});
|
break;
|
case 9: // 水站
|
this.waterStation = item.commStatus
|
if (this.waterStation == 0) {
|
diagramStates(diagram, 'waterStation');
|
}
|
WaterCommInfoByDevId({
|
devId: item.deviceId
|
}).then((res) => {
|
if (res.data.code == 1) {
|
this.panel8 = res.data.data
|
}
|
}).catch((err) => {
|
console.log(err)
|
});
|
break;
|
case 10: // 油站
|
this.oilStation = item.commStatus
|
if (this.oilStation == 0) {
|
diagramStates(diagram, 'oilStation');
|
}
|
OilCommInfoByDevId({
|
devId: item.deviceId
|
}).then((res) => {
|
if (res.data.code == 1) {
|
this.panel9 = res.data.data
|
}
|
}).catch((err) => {
|
console.log(err)
|
});
|
break;
|
case 1: // 5000KV开关
|
this.switch5000 = item.commStatus;
|
if (this.switch5000 == 1) {
|
diagramStates(diagram, 'switch5000');
|
}
|
centralMonitorSysInfoByDevId({
|
devId: item.deviceId
|
}).then((res) => {
|
if (res.data.code == 1) {
|
this.panel1 = res.data.data
|
}
|
}).catch((err) => {
|
console.log(err)
|
});
|
break;
|
case 2: // 3200KV1开关
|
this.switch32001 = item.commStatus
|
if (this.switch32001 == 1) {
|
diagramStates(diagram, 'switch32001');
|
}
|
centralMonitorSysInfoByDevId({
|
devId: item.deviceId
|
}).then((res) => {
|
if (res.data.code == 1) {
|
this.panel2 = res.data.data
|
}
|
}).catch((err) => {
|
console.log(err)
|
});
|
break;
|
case 3: // 3200KV2开关
|
this.switch32002 = item.commStatus
|
if (this.switch32002 == 1) {
|
diagramStates(diagram, 'switch32002');
|
}
|
centralMonitorSysInfoByDevId({
|
devId: item.deviceId
|
}).then((res) => {
|
if (res.data.code == 0) {
|
this.panel3 = res.data.data
|
}
|
}).catch((err) => {
|
console.log(err)
|
});
|
break;
|
case 4: // 5200KV开关
|
this.switch5200 = item.commStatus
|
if (this.switch5200 == 1) {
|
diagramStates(diagram, 'switch5200');
|
}
|
centralMonitorSysInfoByDevId({
|
devId: item.deviceId
|
}).then((res) => {
|
if (res.data.code == 1) {
|
this.panel6 = res.data.data
|
}
|
}).catch((err) => {
|
console.log(err)
|
});
|
break;
|
}
|
this.setDiagramByType()
|
})
|
}
|
}).catch((err) => {
|
console.log(err)
|
});
|
},
|
setPanelPos() { //设置面板位置
|
|
let text1 = diagram.getZoomTextInfo('text1');
|
this.text1Pos = [];
|
this.text1Pos = [text1.point[0], text1.point[1] + text1.height + 20];
|
|
let text2 = diagram.getZoomTextInfo('text2');
|
this.text2Pos = [];
|
this.text2Pos = [text2.point[0], text2.point[1] + text2.height + 20];
|
|
let text3 = diagram.getZoomTextInfo('text3');
|
this.text3Pos = [];
|
this.text3Pos = [text3.point[0], text3.point[1] + text3.height + 20];
|
|
let text4 = diagram.getZoomTextInfo('text4');
|
this.text4Pos = [];
|
this.text4Pos = [text4.point[0], text4.point[1] + text4.height + 20];
|
|
let text5 = diagram.getZoomTextInfo('text5');
|
this.text5Pos = [];
|
this.text5Pos = [text5.point[0] - 90, text5.point[1] - 260];
|
|
let text6 = diagram.getZoomTextInfo('text6');
|
this.text6Pos = [];
|
this.text6Pos = [text6.point[0], text6.point[1] + text6.height + 20];
|
|
let text7 = diagram.getZoomTextInfo('text7');
|
this.text7Pos = [];
|
this.text7Pos = [text7.point[0] - 420, text7.point[1] - 90];
|
|
let text8 = diagram.getZoomTextInfo('text8');
|
this.text8Pos = [];
|
this.text8Pos = [text8.point[0] + 120, text8.point[1] - 90];
|
|
let text9 = diagram.getZoomTextInfo('text9');
|
this.text9Pos = [];
|
this.text9Pos = [text9.point[0] + 120, text9.point[1] - 140];
|
|
let text10 = diagram.getZoomTextInfo('text10');
|
this.text10Pos = [];
|
this.text10Pos = [text10.point[0] - 420, text10.point[1] - 120];
|
|
if (this.switch5000 == 1 && this.switch32001 == 1 && this.switch32002 == 1 && this.bigPower == 1 && this
|
.eleBoard == 1 && this.speedCabinet == 1 && this.electric == 1 && this.sensor == 1 && this
|
.dynamometer == 1 && this.AFEcabinet == 1 && this.transformer == 1) {
|
this.axis1 = diagram.getZoomLineInfo('line10');
|
this.axis2 = diagram.getZoomLineInfo('line11');
|
this.axis2[0][0] = this.axis2[0][0] - 15;
|
}
|
},
|
setDiagramByType() {
|
this.run = "";
|
if (this.speedCabinet == 0) {
|
diagramStates(diagram, 'speedCabinet');
|
}
|
if (this.electric == 0) {
|
diagramStates(diagram, 'electric');
|
}
|
if (this.sensor == 0) {
|
diagramStates(diagram, 'sensor');
|
}
|
if (this.dynamometer == 0) {
|
diagramStates(diagram, 'dynamometer');
|
}
|
if (this.transformer == 0) {
|
diagramStates(diagram, 'transformer');
|
}
|
|
if (this.switch5000 == 1) {
|
this.run = 'run1';
|
}
|
if (this.switch5000 == 1 && this.switch32001 == 1 && this.switch32002 == 1) {
|
this.run = 'run2';
|
}
|
if (this.switch5000 == 1 && this.switch32001 == 1 && this.switch32002 == 1 && this.bigPower == 1) {
|
this.run = 'run3';
|
}
|
if (this.switch5000 == 1 && this.switch32001 == 1 && this.switch32002 == 1 && this.bigPower == 1 && this
|
.eleBoard == 1) {
|
this.run = 'run4';
|
}
|
if (this.switch5000 == 1 && this.switch32001 == 1 && this.switch32002 == 1 && this.bigPower == 1 && this
|
.eleBoard == 1 && this.speedCabinet == 1) {
|
this.run = 'run5';
|
}
|
if (this.switch5000 == 1 && this.switch32001 == 1 && this.switch32002 == 1 && this.bigPower == 1 && this
|
.eleBoard == 1 && this.speedCabinet == 1 && this.electric == 1) {
|
this.run = 'run6';
|
}
|
if (this.switch5000 == 1 && this.switch32001 == 1 && this.switch32002 == 1 && this.bigPower == 1 && this
|
.eleBoard == 1 && this.speedCabinet == 1 && this.electric == 1 && this.sensor == 1) {
|
this.run = 'run7';
|
}
|
if (this.switch5000 == 1 && this.switch32001 == 1 && this.switch32002 == 1 && this.bigPower == 1 && this
|
.eleBoard == 1 && this.speedCabinet == 1 && this.electric == 1 && this.sensor == 1 && this
|
.dynamometer == 1) {
|
this.run = 'run8';
|
}
|
if (this.switch5000 == 1 && this.switch32001 == 1 && this.switch32002 == 1 && this.bigPower == 1 && this
|
.eleBoard == 1 && this.speedCabinet == 1 && this.electric == 1 && this.sensor == 1 && this
|
.dynamometer == 1 && this.AFEcabinet ==
|
1) {
|
this.run = 'run9';
|
}
|
if (this.switch5000 == 1 && this.switch32001 == 1 && this.switch32002 == 1 && this.bigPower == 1 && this
|
.eleBoard == 1 && this.speedCabinet == 1 && this.electric == 1 && this.sensor == 1 && this
|
.dynamometer == 1 && this.AFEcabinet == 1 && this.transformer == 1) {
|
this.run = 'run10';
|
this.axis1 = diagram.getZoomLineInfo('line10');
|
setTimeout(() => {
|
this.axis2 = diagram.getZoomLineInfo('line11');
|
this.axis2[0][0] = this.axis2[0][0] - 15;
|
}, 100);
|
}
|
diagramStates(diagram, this.run);
|
}
|
},
|
mounted() {
|
this.searchAll()
|
diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
|
this.setPanelPos();
|
window.addEventListener('resize', () => {
|
this.setPanelPos();
|
});
|
diagram.stc.addEventListener('click', (e) => {
|
let p = diagram.getEventPosition(e);
|
let clickX = p.x;
|
let clickY = p.y;
|
for (let i = 0; i < diagram.options.length; i++) {
|
let item = diagram.options[i];
|
|
if (item.method == "drawRadiusRect") {
|
let text = diagram.getZoomTextInfo(item.id);
|
let objLeft = text.point[0];
|
let objRight = text.point[0] + text.width;
|
let objTop = text.point[1];
|
let objBottom = text.point[1] + text.height;
|
this.showtext1 = false;
|
this.showtext2 = false;
|
this.showtext3 = false;
|
this.showtext4 = false;
|
this.showtext5 = false;
|
this.showtext6 = false;
|
this.showtext7 = false;
|
this.showtext8 = false;
|
this.showtext9 = false;
|
this.showtext10 = false;
|
if (clickX > objLeft && clickX < objRight && clickY > objTop && clickY <
|
objBottom) {
|
this['show' + item.id] = true;
|
break;
|
}
|
} else if (item.method == "drawImage") {
|
if (item.textId) {
|
let Xzoom = diagram.stc.clientWidth / diagram.width;
|
let Yzoom = diagram.stc.clientHeight / diagram.height;
|
let img = item;
|
let imgobjLeft = img.left[0] * Xzoom;
|
let imgobjRight = img.right[0] * Xzoom;
|
let imgobjTop = img.top[1] * Yzoom;
|
let imgobjBottom = img.bottom[1] * Yzoom;
|
this.showtext1 = false;
|
this.showtext2 = false;
|
this.showtext3 = false;
|
this.showtext4 = false;
|
this.showtext5 = false;
|
this.showtext6 = false;
|
this.showtext7 = false;
|
this.showtext8 = false;
|
this.showtext9 = false;
|
this.showtext10 = false;
|
|
if (clickX > imgobjLeft && clickX < imgobjRight && clickY > imgobjTop && clickY <
|
imgobjBottom) {
|
this['show' + item.textId] = true;
|
break;
|
}
|
}
|
}
|
}
|
}, false)
|
},
|
destroyed() {
|
diagram.stop();
|
}
|
}
|
</script>
|
|
<style scoped>
|
.tipTitle {
|
position: absolute;
|
left: 40px;
|
top: 20px;
|
}
|
|
.topoTitle::before {
|
display: block;
|
content: "";
|
width: 12px;
|
height: 24px;
|
background-color: #ffe328;
|
position: absolute;
|
top: 50%;
|
left: 0;
|
padding: 0;
|
transform: translateY(-12px);
|
}
|
|
.diagram-con {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
|
.panel7 .panel-item .label {
|
width: 100px;
|
text-align: right;
|
}
|
|
.panel7.panel8 .panel-item .label {
|
width: 120px;
|
text-align: right;
|
}
|
|
.panel7 .panel-item .unit {
|
width: 40px;
|
}
|
|
.diagram-stc {
|
position: relative;
|
z-index: 10;
|
}
|
</style>
|
