<template>
|
<div class="contentBox">
|
<div class="tipTitle">系统拓扑</div>
|
<div class="diagram-stc" ref="static"></div>
|
<div class="diagram-flush" ref="flush"></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="合闸"></el-input>
|
</div>
|
<div class="panel-item"><span class="label">电压:</span>
|
<el-input class="input" readonly="readonly" value="3000"></el-input>
|
<span class="unit">V</span>
|
</div>
|
<div class="panel-item"><span class="label">电流:</span>
|
<el-input class="input" readonly="readonly" value="120"></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="合闸"></el-input>
|
</div>
|
<div class="panel-item"><span class="label">电压:</span>
|
<el-input class="input" readonly="readonly" value="2952"></el-input>
|
<span class="unit">V</span>
|
</div>
|
<div class="panel-item"><span class="label">电流:</span>
|
<el-input class="input" readonly="readonly" value="115"></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="合闸"></el-input>
|
</div>
|
<div class="panel-item"><span class="label">电压:</span>
|
<el-input class="input" readonly="readonly" value="2860"></el-input>
|
<span class="unit">V</span>
|
</div>
|
<div class="panel-item"><span class="label">电流:</span>
|
<el-input class="input" readonly="readonly" value="114"></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="2600"></el-input>
|
<span class="unit">V</span>
|
</div>
|
<div class="panel-item"><span class="label">电流:</span>
|
<el-input class="input" readonly="readonly" value="110"></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="合闸"></el-input>
|
<span class="label" style="margin-left:20px;">1号进线屏开关:</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="合闸"></el-input>
|
</div>
|
<div class="panel-item">
|
<span class="label">1号负载屏开关:</span>
|
<el-input class="input" readonly="readonly" value="合闸"></el-input>
|
<span class="label" style="margin-left:20px;">2号负载屏开关:</span>
|
<el-input class="input" readonly="readonly" value="合闸"></el-input>
|
</div>
|
<div class="panel-item">
|
<span class="label">A排电压:</span>
|
<el-input class="input" readonly="readonly" value="1000"></el-input>
|
<span class="unit">V</span>
|
<span class="label" style="margin-left:20px;">B排电压:</span>
|
<el-input class="input" readonly="readonly" value="1000"></el-input>
|
<span class="unit">V</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">A排电流:</span>
|
<el-input class="input" readonly="readonly" value="1250"></el-input>
|
<span class="unit">A</span>
|
<span class="label" style="margin-left:20px;">B排电流:</span>
|
<el-input class="input" readonly="readonly" value="1250"></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="合闸"></el-input>
|
</div>
|
<div class="panel-item"><span class="label">电压:</span>
|
<el-input class="input" readonly="readonly" value="2800"></el-input>
|
<span class="unit">V</span>
|
</div>
|
<div class="panel-item"><span class="label">电流:</span>
|
<el-input class="input" readonly="readonly" value="118"></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="380"></el-input>
|
<span class="unit">kN·m</span>
|
<span class="label" style="margin-left:20px;">转速:</span>
|
<el-input class="input" readonly="readonly" value="50"></el-input>
|
<span class="unit">r/min</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">转速:</span>
|
<el-input class="input" readonly="readonly" value="59"></el-input>
|
<span class="unit">r/min</span>
|
<span class="label" style="margin-left:20px;">输入有功功率:</span>
|
<el-input class="input" readonly="readonly" value="2000"></el-input>
|
<span class="unit">kW</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">正向转速限幅:</span>
|
<el-input class="input" readonly="readonly" value="89"></el-input>
|
<span class="unit">r/min</span>
|
<span class="label" style="margin-left:20px;">输出电压:</span>
|
<el-input class="input" readonly="readonly" value="3000"></el-input>
|
<span class="unit">kv</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">反向转速限幅:</span>
|
<el-input class="input" readonly="readonly" value="89"></el-input>
|
<span class="unit">r/min</span>
|
<span class="label" style="margin-left:20px;">输出电流:</span>
|
<el-input class="input" readonly="readonly" value="1250"></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 DiagramPanel from '@/components/smallModule/DiagramPanel.vue';
|
let diagram;
|
export default {
|
components: {
|
DiagramPanel,
|
},
|
data() {
|
return {
|
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,
|
}
|
},
|
methods: {
|
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];
|
}
|
},
|
mounted() {
|
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;
|
console.log(diagram.options)
|
diagram.options.map(item => {
|
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['show' + item.id] = false;
|
if (clickX > objLeft && clickX < objRight && clickY > objTop && clickY <
|
objBottom) {
|
item.showPanel = !item.showPanel;
|
this['show' + item.id] = item.showPanel;
|
}
|
}
|
})
|
}, false)
|
},
|
}
|
</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);
|
}
|
|
.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;
|
}
|
</style>
|
