拓扑图接口对接

whyczyk

2021-04-16 a67f58da9b04c1f176350a56f25f97638beb8d73

 src/pages/home/topoGraph.vue

@@ -1,19 +1,22 @@
<template>
    <div class="contentBox">
        <div class="tipTitle">系统拓扑</div>
        <div class="diagram-stc" ref="static"></div>
        <div class="diagram-flush" ref="flush"></div>
        <div class="diagram-con">
            <div class="diagram-stc" ref="static"></div>
            <div class="diagram-flush" ref="flush"></div>
        </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>
                    <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="3000"></el-input>
                    <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="120"></el-input>
                    <el-input class="input" readonly="readonly" :value="panel1.panelCurr"></el-input>
                    <span class="unit">A</span>
                </div>
            </diagram-panel>
@@ -22,14 +25,14 @@
        <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>
                    <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="2952"></el-input>
                    <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="115"></el-input>
                    <el-input class="input" readonly="readonly" :value="panel2.panelCurr"></el-input>
                    <span class="unit">A</span>
                </div>
            </diagram-panel>
@@ -38,14 +41,14 @@
        <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>
                    <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="2860"></el-input>
                    <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="114"></el-input>
                    <el-input class="input" readonly="readonly" :value="panel3.panelCurr"></el-input>
                    <span class="unit">A</span>
                </div>
            </diagram-panel>
@@ -54,11 +57,11 @@
        <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>
                    <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="110"></el-input>
                    <el-input class="input" readonly="readonly" :value="panel4.rectifierCurr"></el-input>
                    <span class="unit">A</span>
                </div>
            </diagram-panel>
@@ -68,34 +71,39 @@
            <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>
                    <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="合闸"></el-input>
                    <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="合闸"></el-input>
                    <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="合闸"></el-input>
                    <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="1000"></el-input>
                    <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="1000"></el-input>
                    <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="1250"></el-input>
                    <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="1250"></el-input>
                    <el-input class="input" readonly="readonly" :value="panel5.currB"></el-input>
                    <span class="unit">A</span>
                </div>
            </diagram-panel>
@@ -104,14 +112,14 @@
        <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>
                    <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="2800"></el-input>
                    <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="118"></el-input>
                    <el-input class="input" readonly="readonly" :value="panel6.panelCurr"></el-input>
                    <span class="unit">A</span>
                </div>
            </diagram-panel>
@@ -125,34 +133,34 @@
                </div>
                <div class="panel-item">
                    <span class="label">转矩:</span>
                    <el-input class="input" readonly="readonly" value="380"></el-input>
                    <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="50"></el-input>
                    <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="59"></el-input>
                    <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="2000"></el-input>
                    <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="89"></el-input>
                    <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="3000"></el-input>
                    <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="89"></el-input>
                    <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="1250"></el-input>
                    <el-input class="input" readonly="readonly" :value="panel7.outputCurr"></el-input>
                    <span class="unit">A</span>
                </div>
            </diagram-panel>
@@ -364,7 +372,17 @@

<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"
    let diagram;
    export default {
        components: {
@@ -392,9 +410,230 @@
                showtext8: false,
                showtext9: false,
                showtext10: false,
                run: 0,
                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
                                    rectifierPowerInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
                                        if (res.data.code == 1) {
                                            console.log(res)
                                            this.panel4 = res.data.data
                                        }
                                    }).catch((err) => {
                                        console.log(err)
                                    });
                                    break;
                                case 6: // 直流主配电板
                                    this.eleBoard = item.commStatus
                                    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
                                    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
                                    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
                                    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;
                                    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
                                    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
                                    centralMonitorSysInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
                                        if (res.data.code == 1) {
                                            this.panel3 = res.data.data
                                        }
                                    }).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.panel6 = res.data.data
                                        }
                                    }).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)
                });
            },
            setPanelPos() { //设置面板位置

                let text1 = diagram.getZoomTextInfo('text1');
@@ -436,9 +675,57 @@
                let text10 = diagram.getZoomTextInfo('text10');
                this.text10Pos = [];
                this.text10Pos = [text10.point[0] - 420, text10.point[1] - 120];
            },
            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) {
                    diagramStates(diagram, 'speedCabinet');
                }
                if (this.electric == 1) {
                    diagramStates(diagram, 'electric');
                }
                if (this.sensor == 1) {
                    diagramStates(diagram, 'sensor');
                }
                if (this.dynamometer == 1) {
                    diagramStates(diagram, 'dynamometer');
                }
                if (this.AFEcabinet == 1) {
                    diagramStates(diagram, 'AFEcabinet');
                }
                if (this.transformer == 1) {
                    diagramStates(diagram, 'transformer');
                }
                if (this.waterStation == 1) {
                    diagramStates(diagram, 'waterStation');
                }
                if (this.oilStation == 1) {
                    diagramStates(diagram, 'oilStation');
                }
                if (this.switch5000 == 1) {
                    diagramStates(diagram, 'switch5000');
                }
                if (this.switch32001 == 1) {
                    diagramStates(diagram, 'switch32001');
                }
                if (this.switch32002 == 1) {
                    diagramStates(diagram, 'switch32002');
                }
                if (this.switch5200 == 1) {
                    diagramStates(diagram, 'switch5200');
                }
            }
        },
        mounted() {
            this.searchAll()
            diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
            this.setPanelPos();
            window.addEventListener('resize', () => {
@@ -448,7 +735,6 @@
                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);
@@ -465,7 +751,13 @@
                    }
                })
            }, false)

            // 设置充放电的类型
            this.setDiagramByType();
        },
        destroyed() {
            diagram.stop();
        }
    }
</script>

@@ -489,6 +781,12 @@
        transform: translateY(-12px);
    }

    .diagram-con {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .panel7 .panel-item .label {
        width: 100px;
        text-align: right;
@@ -502,4 +800,9 @@
    .panel7 .panel-item .unit {
        width: 40px;
    }

    .diagram-stc {
        position: relative;
        z-index: 10;
    }
</style>