| | |
|---|
| | | <div class="contentBox"> |
|---|
| | | <div class="tipTitle">系统拓扑</div> |
|---|
| | | <div class="diagram-con"> |
|---|
| | | <el-button type="primary" size="mini" class="editBtn" @click="drawer=true">前置条件设置</el-button> |
|---|
| | | <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"> |
|---|
| | |
|---|
| | | </div> |
|---|
| | | </diagram-panel> |
|---|
| | | </transition> |
|---|
| | | |
|---|
| | | <mw-drawer :visible.sync="drawer"> |
|---|
| | | <pre-option-list :bigPower="bigPower" :eleBoard="eleBoard" :AFEcabinet="AFEcabinet" |
|---|
| | | :waterStation="waterStation" :oilStation="oilStation" :switch5000="switch5000" |
|---|
| | | :switch32001="switch32001" :switch32002="switch32002" :switch5200="switch5200" v-if="drawer"> |
|---|
| | | </pre-option-list> |
|---|
| | | </mw-drawer> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | |
|---|
| | | import gridCircuitDiagram from "@/pages/home/topoGraphdiagram/js/gridCircuitDiagram" |
|---|
| | | import diagramStates from '@/pages/home/topoGraphdiagram/js/diagramStates' |
|---|
| | | import DiagramPanel from '@/components/smallModule/DiagramPanel.vue'; |
|---|
| | | import MwDrawer from "@/components/smallModule/mwDrawer"; |
|---|
| | | import PreOptionList from "@/pages/home/components/preOptionList"; |
|---|
| | | import { |
|---|
| | | deviceStateAllStatus, |
|---|
| | | centralMonitorSysInfoByDevId, |
|---|
| | |
|---|
| | | centralMonitorSysSTInfoByDevId, |
|---|
| | | afeInverterInfoByDeviceId, |
|---|
| | | WaterCommInfoByDevId, |
|---|
| | | OilCommInfoByDevId |
|---|
| | | OilCommInfoByDevId, |
|---|
| | | } from "./topoGraphdiagram/js/api" |
|---|
| | | import Axis from '@/components/smallModule/axis.vue'; |
|---|
| | | let diagram; |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | DiagramPanel, |
|---|
| | | Axis, |
|---|
| | | MwDrawer, |
|---|
| | | PreOptionList |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | type: 'kz', |
|---|
| | | drawer: false, |
|---|
| | | axis1: [], |
|---|
| | | axis2: [], |
|---|
| | | text1Pos: [], |
|---|
| | | text2Pos: [], |
|---|
| | | text3Pos: [], |
|---|
| | |
|---|
| | | showtext8: false, |
|---|
| | | showtext9: false, |
|---|
| | | showtext10: false, |
|---|
| | | run: 0, |
|---|
| | | run: '', |
|---|
| | | deviceList: [], |
|---|
| | | bigPower: 0, |
|---|
| | | eleBoard: 0, |
|---|
| | |
|---|
| | | this.deviceList.map(item => { |
|---|
| | | switch (item.position) { |
|---|
| | | case 5: // 大功率电源 |
|---|
| | | this.bigPower = item.commStatus |
|---|
| | | rectifierPowerInfoByDevId({ |
|---|
| | | devId: item.deviceId |
|---|
| | | }).then((res) => { |
|---|
| | | if (res.data.code == 1) { |
|---|
| | | console.log(res) |
|---|
| | | this.bigPower = res.data.data.rectifierPowerState; |
|---|
| | | if (this.bigPower == 0) { |
|---|
| | | diagramStates(diagram, 'bigPower'); |
|---|
| | | } |
|---|
| | | this.panel4 = res.data.data |
|---|
| | | this.setDiagramByType() |
|---|
| | | } |
|---|
| | | }).catch((err) => { |
|---|
| | | console.log(err) |
|---|
| | | }); |
|---|
| | | break; |
|---|
| | | case 6: // 直流主配电板 |
|---|
| | | this.eleBoard = item.commStatus |
|---|
| | | centralMonitorSysSTInfoByDevId({ |
|---|
| | | devId: item.deviceId |
|---|
| | | }).then((res) => { |
|---|
| | | if (res.data.code == 1) { |
|---|
| | | this.eleBoard = res.data.data.switchCloseBusScreen |
|---|
| | | if (this.eleBoard == 0) { |
|---|
| | | diagramStates(diagram, 'eleBoard'); |
|---|
| | | } |
|---|
| | | this.panel5 = res.data.data |
|---|
| | | this.setDiagramByType() |
|---|
| | | } |
|---|
| | | }).catch((err) => { |
|---|
| | | console.log(err) |
|---|
| | | }); |
|---|
| | | break; |
|---|
| | | case 8: // AFE变频 |
|---|
| | | this.AFEcabinet = item.commStatus |
|---|
| | | case 7: // AFE变频 |
|---|
| | | afeInverterInfoByDeviceId({ |
|---|
| | | devId: item.deviceId |
|---|
| | | }).then((res) => { |
|---|
| | | if (res.data.code == 1) { |
|---|
| | | this.AFEcabinet = res.data.data.inverterRun |
|---|
| | | if (this.AFEcabinet == 0) { |
|---|
| | | diagramStates(diagram, 'AFEcabinet'); |
|---|
| | | } |
|---|
| | | this.panel7 = res.data.data |
|---|
| | | this.setDiagramByType() |
|---|
| | | } |
|---|
| | | }).catch((err) => { |
|---|
| | | console.log(err) |
|---|
| | | }); |
|---|
| | | break; |
|---|
| | | case 9: // 水站 |
|---|
| | | this.waterStation = item.commStatus |
|---|
| | | WaterCommInfoByDevId({ |
|---|
| | | devId: item.deviceId |
|---|
| | | }).then((res) => { |
|---|
| | | if (res.data.code == 1) { |
|---|
| | | this.waterStation = res.data.data.waterState |
|---|
| | | if (this.waterStation == 0) { |
|---|
| | | diagramStates(diagram, 'waterStation'); |
|---|
| | | } |
|---|
| | | this.panel8 = res.data.data |
|---|
| | | this.setDiagramByType() |
|---|
| | | } |
|---|
| | | }).catch((err) => { |
|---|
| | | console.log(err) |
|---|
| | | }); |
|---|
| | | break; |
|---|
| | | case 10: // 油站 |
|---|
| | | this.oilStation = item.commStatus |
|---|
| | | OilCommInfoByDevId({ |
|---|
| | | devId: item.deviceId |
|---|
| | | }).then((res) => { |
|---|
| | | if (res.data.code == 1) { |
|---|
| | | this.oilStation = res.data.data.oilState |
|---|
| | | if (this.oilStation == 0) { |
|---|
| | | diagramStates(diagram, 'oilStation'); |
|---|
| | | } |
|---|
| | | this.panel9 = res.data.data |
|---|
| | | this.setDiagramByType() |
|---|
| | | } |
|---|
| | | }).catch((err) => { |
|---|
| | | console.log(err) |
|---|
| | | }); |
|---|
| | | break; |
|---|
| | | case 1: // 5000KV开关 |
|---|
| | | this.switch5000 = item.commStatus; |
|---|
| | | centralMonitorSysInfoByDevId({ |
|---|
| | | devId: item.deviceId |
|---|
| | | }).then((res) => { |
|---|
| | | if (res.data.code == 1) { |
|---|
| | | this.switch5000 = res.data.data.switchClose; |
|---|
| | | if (this.switch5000 == 1) { |
|---|
| | | diagramStates(diagram, 'switch5000'); |
|---|
| | | } |
|---|
| | | this.panel1 = res.data.data |
|---|
| | | this.setDiagramByType() |
|---|
| | | } |
|---|
| | | }).catch((err) => { |
|---|
| | | console.log(err) |
|---|
| | | }); |
|---|
| | | break; |
|---|
| | | case 2: // 3200KV1开关 |
|---|
| | | this.switch32001 = item.commStatus |
|---|
| | | centralMonitorSysInfoByDevId({ |
|---|
| | | devId: item.deviceId |
|---|
| | | }).then((res) => { |
|---|
| | | if (res.data.code == 1) { |
|---|
| | | this.switch32001 = res.data.data.switchClose |
|---|
| | | if (this.switch32001 == 1) { |
|---|
| | | diagramStates(diagram, 'switch32001'); |
|---|
| | | } |
|---|
| | | this.panel2 = res.data.data |
|---|
| | | this.setDiagramByType() |
|---|
| | | } |
|---|
| | | }).catch((err) => { |
|---|
| | | console.log(err) |
|---|
| | | }); |
|---|
| | | break; |
|---|
| | | case 3: // 3200KV2开关 |
|---|
| | | this.switch32002 = item.commStatus |
|---|
| | | centralMonitorSysInfoByDevId({ |
|---|
| | | devId: item.deviceId |
|---|
| | | }).then((res) => { |
|---|
| | | if (res.data.code == 1) { |
|---|
| | | this.switch32002 = res.data.data.switchClose |
|---|
| | | if (this.switch32002 == 1) { |
|---|
| | | diagramStates(diagram, 'switch32002'); |
|---|
| | | } |
|---|
| | | this.panel3 = res.data.data |
|---|
| | | this.setDiagramByType() |
|---|
| | | } |
|---|
| | | }).catch((err) => { |
|---|
| | | console.log(err) |
|---|
| | | }); |
|---|
| | | break; |
|---|
| | | case 4: // 5200KV开关 |
|---|
| | | this.switch5200 = item.commStatus |
|---|
| | | centralMonitorSysInfoByDevId({ |
|---|
| | | devId: item.deviceId |
|---|
| | | }).then((res) => { |
|---|
| | | if (res.data.code == 1) { |
|---|
| | | this.switch5200 = res.data.data.switchClose |
|---|
| | | if (this.switch5200 == 1) { |
|---|
| | | diagramStates(diagram, 'switch5200'); |
|---|
| | | } |
|---|
| | | this.panel6 = res.data.data |
|---|
| | | this.setDiagramByType() |
|---|
| | | } |
|---|
| | | }).catch((err) => { |
|---|
| | | console.log(err) |
|---|
| | | }); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | this.setDiagramByType(); |
|---|
| | | }) |
|---|
| | | if (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.waterStation == 1 && this.oilStation == 1 && this |
|---|
| | | .switch5000 == 1 && this.switch32001 == 1 && this.switch32002 == 1 && this |
|---|
| | | .switch5200 == 1) { |
|---|
| | | this.run = 1; |
|---|
| | | } else { |
|---|
| | | this.run = 0; |
|---|
| | | } |
|---|
| | | this.setDiagramByType(); |
|---|
| | | } |
|---|
| | | }).catch((err) => { |
|---|
| | | console.log(err) |
|---|
| | |
|---|
| | | 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() { |
|---|
| | | if (this.run == 1) { |
|---|
| | | diagramStates(diagram, 'run'); |
|---|
| | | } |
|---|
| | | if (this.bigPower == 1) { |
|---|
| | | diagramStates(diagram, 'bigPower'); |
|---|
| | | } |
|---|
| | | if (this.eleBoard == 1) { |
|---|
| | | diagramStates(diagram, 'eleBoard'); |
|---|
| | | } |
|---|
| | | if (this.speedCabinet == 1) { |
|---|
| | | this.run = ""; |
|---|
| | | if (this.speedCabinet == 0) { |
|---|
| | | diagramStates(diagram, 'speedCabinet'); |
|---|
| | | } |
|---|
| | | if (this.electric == 1) { |
|---|
| | | if (this.electric == 0) { |
|---|
| | | diagramStates(diagram, 'electric'); |
|---|
| | | } |
|---|
| | | if (this.sensor == 1) { |
|---|
| | | if (this.sensor == 0) { |
|---|
| | | diagramStates(diagram, 'sensor'); |
|---|
| | | } |
|---|
| | | if (this.dynamometer == 1) { |
|---|
| | | if (this.dynamometer == 0) { |
|---|
| | | diagramStates(diagram, 'dynamometer'); |
|---|
| | | } |
|---|
| | | if (this.AFEcabinet == 1) { |
|---|
| | | diagramStates(diagram, 'AFEcabinet'); |
|---|
| | | } |
|---|
| | | if (this.transformer == 1) { |
|---|
| | | if (this.transformer == 0) { |
|---|
| | | diagramStates(diagram, 'transformer'); |
|---|
| | | } |
|---|
| | | if (this.waterStation == 1) { |
|---|
| | | diagramStates(diagram, 'waterStation'); |
|---|
| | | } |
|---|
| | | if (this.oilStation == 1) { |
|---|
| | | diagramStates(diagram, 'oilStation'); |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (this.switch5000 == 1) { |
|---|
| | | diagramStates(diagram, 'switch5000'); |
|---|
| | | this.run = 'run1'; |
|---|
| | | } |
|---|
| | | if (this.switch32001 == 1) { |
|---|
| | | diagramStates(diagram, 'switch32001'); |
|---|
| | | if (this.switch5000 == 1 && this.switch32001 == 1 && this.switch32002 == 1) { |
|---|
| | | this.run = 'run2'; |
|---|
| | | } |
|---|
| | | if (this.switch32002 == 1) { |
|---|
| | | diagramStates(diagram, 'switch32002'); |
|---|
| | | if (this.switch5000 == 1 && this.switch32001 == 1 && this.switch32002 == 1 && this.bigPower == 1) { |
|---|
| | | this.run = 'run3'; |
|---|
| | | } |
|---|
| | | if (this.switch5200 == 1) { |
|---|
| | | diagramStates(diagram, 'switch5200'); |
|---|
| | | 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() { |
|---|
| | |
|---|
| | | let p = diagram.getEventPosition(e); |
|---|
| | | let clickX = p.x; |
|---|
| | | let clickY = p.y; |
|---|
| | | diagram.options.map(item => { |
|---|
| | | 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['show' + item.id] = false; |
|---|
| | | 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) { |
|---|
| | | item.showPanel = !item.showPanel; |
|---|
| | | this['show' + item.id] = item.showPanel; |
|---|
| | | 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) |
|---|
| | | |
|---|
| | | // 设置充放电的类型 |
|---|
| | | this.setDiagramByType(); |
|---|
| | | }, |
|---|
| | | destroyed() { |
|---|
| | | diagram.stop(); |
|---|
| | |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .diagram-con .editBtn { |
|---|
| | | position: absolute; |
|---|
| | | right: 20px; |
|---|
| | | top: 20px; |
|---|
| | | z-index: 15; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .panel7 .panel-item .label { |
|---|
| | | width: 100px; |
|---|
| | | text-align: right; |
|---|
