拓扑图接口对接

whyczyk

2021-04-16 a67f58da9b04c1f176350a56f25f97638beb8d73

拓扑图接口对接

 package.json

@@ -3,7 +3,7 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "serve": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build"
  },
  "dependencies": {
@@ -22,4 +22,4 @@
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.11"
  }
}
}

 public/theme/normal.css

@@ -233,4 +233,29 @@
    background-color: #ffe329;
    display: inline-block;
    margin-right: 10px;
}

.diagram-stc {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.diagram-flush {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    overflow: hidden;
}

.diagram-stc canvas,
.diagram-flush canvas {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    -webkit-object-fit: contain;
    object-fit: contain;
}

 src/assets/js/axios.js

New file
@@ -0,0 +1,36 @@
import Vue from 'vue';
import axios from 'axios';
// import qs from 'qs';
if (process.env.NODE_ENV == 'dev') {
    // 跨域请求
    axios.defaults.baseURL = 'http://localhost:8091/';
    axios.defaults.withCredentials = true; // 保持请求头
}
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    return Promise.reject(error);
});
//对POST请求数据做处理
// axios.interceptors.request.use((res) => {
//     if(res.method !== "get" && res.data){
//         debugger
//         res.data = qs.stringify(res.data);
//     }
//     return res;
// });

Vue.prototype.$axios = axios;

export default axios;

 src/assets/js/newDiagram/index.js

@@ -22,7 +22,7 @@
        }
    };
    // 显示线条的id
    this.showLineId = true;
    this.showLineId = false;
}

// 设置canvas
@@ -679,6 +679,11 @@
        height: option.height,
    };

    option.left = [point[0], point[1] + option.height / 2];
    option.right = [point[0] + option.width, point[1] + option.height / 2];
    option.top = [point[0] + option.width / 2, point[1]];
    option.bottom = [point[0] + option.width / 2, point[1] + option.height];

    // 设置执行的方法
    option.method = "drawImage";
    // 添加配置项
@@ -870,6 +875,36 @@
    option.method = "moveDot";
    this.addOptions(option);
};

// 绘制扩散
Diagram.prototype.ripples = function (option) {
    let ctx = this.f_ctx;
    let point = option.point;
    let start = option.start ? option.start : point;
    let flush = option.flush ? option.flush : false;
    let color = option.color ? option.color : "#50cef5";
    let maxRadius = option.maxRadius ? option.maxRadius : 50;
    let minRadius = option.minRadius ? option.minRadius : 1;
    let radius = option.radius ? option.radius : minRadius;
    radius++;
    if (radius >= maxRadius) {
        radius = minRadius
    }
    // 设置值
    this.setOption(option.id, 'radius', radius);
    this.arc({
        point: start,
        flush: flush,
        fillStyle: color,
        strokeStyle: color,
        radius: radius,
        type: 'stroke'
    });
    // 添加配置项
    option.method = "ripples";
    this.addOptions(option);
}


// 绘制二极管
Diagram.prototype.diode = function (option) {
@@ -1159,6 +1194,7 @@

}


// 根据id正则删除内容
Diagram.prototype.del = function (pattern) {
    // 清空options配置项

 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>

 src/pages/home/topoGraphdiagram/js/api.js

New file
@@ -0,0 +1,77 @@
import axios from "@/assets/js/axios";

/**
 * 查询所有设备状态
 */
export const deviceStateAllStatus = () => {
  return axios({
    method: "GET",
    url: "/deviceState/allStatus",
  });
}

/**
 * 根据设备id获取开关RT信息
 */
export const centralMonitorSysInfoByDevId = (data) => {
  return axios({
    method: "GET",
    url: "/centralMonitorSys/infoByDevId",
    params: data
  });
}

/**
 * 根据设备id获取大功率整理电源信息
 */
export const rectifierPowerInfoByDevId = (data) => {
  return axios({
    method: "GET",
    url: "/rectifierPower/infoByDevId",
    params: data
  });
}

/**
 * 根据设备id获取直流主配面板信息
 */
export const centralMonitorSysSTInfoByDevId = (data) => {
  return axios({
    method: "GET",
    url: "/centralMonitorSysST/infoByDevId",
    params: data
  });
}

/**
 * 根据设备id获取AFE整流器信息
 */
export const afeInverterInfoByDeviceId = (data) => {
  return axios({
    method: "GET",
    url: "/afeInverter/infoByDeviceId",
    params: data
  });
}

/**
 * 根据设备id获取Water信息
 */
export const WaterCommInfoByDevId = (data) => {
  return axios({
    method: "GET",
    url: "/WaterComm/infoByDevId",
    params: data
  });
}

/**
 * 根据设备id获取oil信息
 */
export const OilCommInfoByDevId = (data) => {
  return axios({
    method: "GET",
    url: "/OilComm/infoByDevId",
    params: data
  });
}

 src/pages/home/topoGraphdiagram/js/diagramStates.js

New file
@@ -0,0 +1,705 @@
// 基础配置
let springGreen = "#50cef5";
let red = "#b370fe";
let scalcRadius = 6;
// 放电状态
function diagramStates(diagram, type) {
    // 断开所有的开关
    // diagram.setOption('km1', 'state', false);
    // diagram.setOption('km2', 'state', false);
    // diagram.setOption('km3', 'state', false);
    // diagram.setOption('km4', 'state', false);
    // 清除电流
    // diagram.del(/^line.*dot$/);
    if (type == "run") {
        runCharge(diagram);
    }

    if (type == "bigPower") {
        bigPowerCharge(diagram);
    }

    if (type == "eleBoard") {
        eleBoardCharge(diagram);
    }

    if (type == "speedCabinet") {
        speedCabinetCharge(diagram);
    }

    if (type == "electric") {
        electricCharge(diagram);
    }

    if (type == "sensor") {
        sensorCharge(diagram);
    }

    if (type == "dynamometer") {
        dynamometerCharge(diagram);
    }

    if (type == "AFEcabinet") {
        AFEcabinetCharge(diagram);
    }

    if (type == "transformer") {
        transformerCharge(diagram);
    }

    if (type == "waterStation") {
        waterStationCharge(diagram);
    }

    if (type == "oilStation") {
        oilStationCharge(diagram);
    }

    if (type == "switch5000") {
        switch5000Charge(diagram);
    }

    if (type == "switch32001") {
        switch32001Charge(diagram);
    }

    if (type == "switch32002") {
        switch32002Charge(diagram);
    }

    if (type == "switch5200") {
        switch5200Charge(diagram);
    }
}

// 浮充状态
function runCharge(diagram) {

    // 线条1
    let line1 = diagram.getOption('line1').points;
    // 线条2
    let line2 = diagram.getOption('line2').points;
    diagram.moveDot({
        id: 'line1_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [line1[0], line2[1]],
    });

    // diagram.moveDot({
    //     id: 'line2_dot',
    //     fillStyle: springGreen,
    //     strokeStyle: springGreen,
    //     radius: scalcRadius,
    //     flush: true,
    //     points: line2,
    // });

    // 线条3
    let line3 = diagram.getOption('line3').points;
    // 线条4
    let line4 = diagram.getOption('line4').points;
    diagram.moveDot({
        id: 'line3_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [line3[0], line4[1]],
    });

    // diagram.moveDot({
    //     id: 'line4_dot',
    //     fillStyle: springGreen,
    //     strokeStyle: springGreen,
    //     radius: scalcRadius,
    //     flush: true,
    //     points: line4,
    // });

    // 线条5
    let line5 = diagram.getOption('line5').points;
    // 线条6
    let line6 = diagram.getOption('line6').points;
    diagram.moveDot({
        id: 'line5_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [line5[0], line6[1]],
    });

    // diagram.moveDot({
    //     id: 'line6_dot',
    //     fillStyle: springGreen,
    //     strokeStyle: springGreen,
    //     radius: scalcRadius,
    //     flush: true,
    //     points: line6,
    // });

    // 线条7
    let line7 = diagram.getOption('line7').points;
    diagram.moveDot({
        id: 'line7_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: line7,
    });


    // 线条8
    let line8 = diagram.getOption('line8').points;
    diagram.moveDot({
        id: 'line8_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: line8,
    });

    // 线条9
    let line9 = diagram.getOption('line9').points;
    diagram.moveDot({
        id: 'line9_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: line9,
    });


    // 线条10
    let line10 = diagram.getOption('line10').points;
    diagram.moveDot({
        id: 'line10_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: line10,
    });


    // 线条11
    let line11 = diagram.getOption('line11').points;
    diagram.moveDot({
        id: 'line11_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: line11,
    });

    // 线条12
    let line12 = diagram.getOption('line12').points;
    diagram.moveDot({
        id: 'line12_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: line12,
    });


    // 线条13
    let line13 = diagram.getOption('line13').points;
    diagram.moveDot({
        id: 'line13_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: line13,
    });

    // 线条14
    let line14 = diagram.getOption('line14').points;
    // 线条15
    let line15 = diagram.getOption('line15').points;
    diagram.moveDot({
        id: 'line14_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [line14[0], line15[1]],
    });


    // diagram.moveDot({
    //     id: 'line15_dot',
    //     fillStyle: springGreen,
    //     strokeStyle: springGreen,
    //     radius: scalcRadius,
    //     flush: true,
    //     points: line15,
    // });
}

function bigPowerCharge(diagram) {
    //大功率整流电源
    let Image2 = diagram.getOption('img2');
    diagram.ripples({
        id: 'ripples1',
        flush: true,
        color: '#50cef5',
        point: [Image2.point[0] + Image2.width / 2, Image2.point[1] + Image2.height / 2],
        maxRadius: Image2.width > Image2.height ? (Image2.width / 2) + 15 : (Image2.height / 2) + 15,
        minRadius: Image2.width > Image2.height ? Image2.width / 4 : Image2.height / 4,
        radius: Image2.width > Image2.height ? Image2.width / 2 : Image2.height / 2,
    })
    let line18 = diagram.getOption('line18').points;
    diagram.moveDot({
        id: 'line18_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line18[0][0] - 35, line18[0][1]],
            [line18[1][0] + 35, line18[1][1]]
        ],
    });
}

function eleBoardCharge(diagram) {
    //直流主配电板
    let Image3 = diagram.getOption('img3');
    diagram.ripples({
        id: 'ripples2',
        flush: true,
        color: '#50cef5',
        point: [Image3.point[0] + Image3.width / 2, Image3.point[1] + Image3.height / 2],
        maxRadius: Image3.width > Image3.height ? (Image3.width / 2) + 15 : (Image3.height / 2) + 15,
        minRadius: Image3.width > Image3.height ? Image3.width / 4 : Image3.height / 4,
        radius: Image3.width > Image3.height ? Image3.width / 2 : Image3.height / 2,
    })
    let line18 = diagram.getOption('line18').points;
    let line19 = diagram.getOption('line19').points;
    let line20 = diagram.getOption('line20').points;
    let line21 = diagram.getOption('line21').points;

    diagram.moveDot({
        id: 'line21_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line18[0][0] - 35, line21[1][1]],
            [line21[0][0], line21[0][1]],
        ],
    });
    diagram.moveDot({
        id: 'line20_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line20[1][0], line20[1][1]],
            [line20[0][0], line20[0][1]],
        ],
    });
    diagram.moveDot({
        id: 'line19_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line19[0][0], line19[0][1]],
            [line19[1][0] + 35, line19[1][1]],
        ],
    });
}

function speedCabinetCharge(diagram) {
    //直流调速柜
    let Image4 = diagram.getOption('img4');
    diagram.ripples({
        id: 'ripples3',
        flush: true,
        color: '#50cef5',
        point: [Image4.point[0] + Image4.width / 2, Image4.point[1] + Image4.height / 2],
        maxRadius: Image4.width > Image4.height ? (Image4.width / 2) + 15 : (Image4.height / 2) + 15,
        minRadius: Image4.width > Image4.height ? Image4.width / 4 : Image4.height / 4,
        radius: Image4.width > Image4.height ? Image4.width / 2 : Image4.height / 2,
    })

    let line22 = diagram.getOption('line22').points;
    let line23 = diagram.getOption('line23').points;
    let line24 = diagram.getOption('line24').points;
    let line25 = diagram.getOption('line25').points;
    let line26 = diagram.getOption('line26').points;

    diagram.moveDot({
        id: 'line26_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line26[1][0] - 35, line26[1][1]],
            [line26[0][0], line26[0][1]],
        ],
    });
    diagram.moveDot({
        id: 'line25_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line25[1][0], line25[1][1]],
            [line25[0][0], line25[0][1]],
        ],
    });
    diagram.moveDot({
        id: 'line24_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line24[1][0], line24[1][1]],
            [line24[0][0], line24[0][1]],
        ],
    });
    diagram.moveDot({
        id: 'line23_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line23[1][0], line23[1][1]],
            [line23[0][0], line23[0][1]],
        ],
    });
    diagram.moveDot({
        id: 'line22_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line22[0][0], line22[0][1]],
            [line22[1][0] + 35, line22[1][1]],
        ],
    });
}

function electricCharge(diagram) {
    //电机
    let Image5 = diagram.getOption('img5');
    diagram.ripples({
        id: 'ripples4',
        flush: true,
        color: '#50cef5',
        point: [Image5.point[0] + Image5.width / 2, Image5.point[1] + Image5.height / 2],
        maxRadius: Image5.width > Image5.height ? (Image5.width / 2) + 15 : (Image5.height / 2) + 15,
        minRadius: Image5.width > Image5.height ? Image5.width / 4 : Image5.height / 4,
        radius: Image5.width > Image5.height ? Image5.width / 2 : Image5.height / 2,
    })

    let line27 = diagram.getOption('line27').points;
    let line28 = diagram.getOption('line28').points;

    diagram.moveDot({
        id: 'line28_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line28[1][0], line28[1][1] + 35],
            [line28[0][0], line28[0][1]],
        ],
    });
    diagram.moveDot({
        id: 'line27_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line27[0][0], line27[0][1]],
            [line27[1][0] + 35, line27[1][1]],
        ],
    });
    let line30 = diagram.getOption('line30').points;
    let line31 = diagram.getOption('line31').points;
    let line29 = diagram.getOption('line29').points;

    diagram.moveDot({
        id: 'line30_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line30[1][0] - 35, line30[1][1]],
            [line30[0][0], line30[0][1]],
        ],
    });
    diagram.moveDot({
        id: 'line31_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line31[0][0], line31[0][1]],
            [line31[1][0], line31[1][1] - 35],
        ],
    });
    //震动测试器
    let Image14 = diagram.getOption('img14');
    diagram.ripples({
        id: 'ripples14',
        flush: true,
        color: '#50cef5',
        point: [Image14.point[0] + Image14.width / 2, Image14.point[1] + Image14.height / 2],
        maxRadius: Image14.width > Image14.height ? (Image14.width / 2) + 15 : (Image14.height / 2) + 15,
        minRadius: Image14.width > Image14.height ? Image14.width / 4 : Image14.height / 4,
        radius: Image14.width > Image14.height ? Image14.width / 2 : Image14.height / 2,
    })
    diagram.moveDot({
        id: 'line29_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line29[1][0], line29[1][1] + 35],
            [line29[0][0], line29[0][1] - 35],
        ],
    });
}

function sensorCharge(diagram) {
    //扭矩传感器
    let Image7 = diagram.getOption('img7');
    diagram.ripples({
        id: 'ripples5',
        flush: true,
        color: '#50cef5',
        point: [Image7.point[0] + Image7.width / 2, Image7.point[1] + Image7.height / 2],
        maxRadius: Image7.width > Image7.height ? (Image7.width / 2) + 15 : (Image7.height / 2) + 15,
        minRadius: Image7.width > Image7.height ? Image7.width / 4 : Image7.height / 4,
        radius: Image7.width > Image7.height ? Image7.width / 2 : Image7.height / 2,
    })
    let line32 = diagram.getOption('line32').points;
    diagram.moveDot({
        id: 'line32_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line32[1][0], line32[1][1] + 35],
            [line32[0][0], line32[0][1] - 35],
        ],
    });
}

function dynamometerCharge(diagram) {
    //测功机
    let Image8 = diagram.getOption('img8');
    diagram.ripples({
        id: 'ripples6',
        flush: true,
        color: '#50cef5',
        point: [Image8.point[0] + Image8.width / 2, Image8.point[1] + Image8.height / 2],
        maxRadius: Image8.width > Image8.height ? (Image8.width / 2) + 15 : (Image8.height / 2) + 15,
        minRadius: Image8.width > Image8.height ? Image8.width / 4 : Image8.height / 4,
        radius: Image8.width > Image8.height ? Image8.width / 2 : Image8.height / 2,
    })
    let line35 = diagram.getOption('line35').points;
    let line34 = diagram.getOption('line34').points;
    let line33 = diagram.getOption('line33').points;
    diagram.moveDot({
        id: 'line35_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line35[1][0] + 35, line35[1][1]],
            [line35[0][0], line35[0][1]],
        ],
    });
    diagram.moveDot({
        id: 'line34_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line34[1][0], line34[1][1]],
            [line34[0][0], line34[0][1]],
        ],
    });
    diagram.moveDot({
        id: 'line33_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line33[1][0], line33[1][1]],
            [line33[0][0] - 35, line33[0][1]],
        ],
    });
}

function AFEcabinetCharge(diagram) {
    //变频柜
    let Image9 = diagram.getOption('img9');
    diagram.ripples({
        id: 'ripples7',
        flush: true,
        color: '#50cef5',
        point: [Image9.point[0] + Image9.width / 2, Image9.point[1] + Image9.height / 2],
        maxRadius: Image9.width > Image9.height ? (Image9.width / 2) + 15 : (Image9.height / 2) + 15,
        minRadius: Image9.width > Image9.height ? Image9.width / 4 : Image9.height / 4,
        radius: Image9.width > Image9.height ? Image9.width / 2 : Image9.height / 2,
    })
    let line36 = diagram.getOption('line36').points;
    let line37 = diagram.getOption('line37').points;
    let line38 = diagram.getOption('line38').points;
    diagram.moveDot({
        id: 'line38_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line38[1][0] + 35, line38[1][1]],
            [line38[0][0], line38[0][1]],
        ],
    });
    diagram.moveDot({
        id: 'line37_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line37[1][0], line37[1][1]],
            [line37[0][0], line37[0][1]],
        ],
    });
    diagram.moveDot({
        id: 'line36_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [
            [line36[1][0], line36[1][1]],
            [line36[0][0] - 35, line36[0][1]],
        ],
    });
}

function transformerCharge(diagram) {
    //变压器
    let Image10 = diagram.getOption('img10');
    diagram.ripples({
        id: 'ripples8',
        flush: true,
        color: '#50cef5',
        point: [Image10.point[0] + Image10.width / 2, Image10.point[1] + Image10.height / 2],
        maxRadius: Image10.width > Image10.height ? (Image10.width / 2) + 15 : (Image10.height / 2) + 15,
        minRadius: Image10.width > Image10.height ? Image10.width / 4 : Image10.height / 4,
        radius: Image10.width > Image10.height ? Image10.width / 2 : Image10.height / 2,
    })
}

function waterStationCharge(diagram) {
    //供水站
    let Image11 = diagram.getOption('img11');
    diagram.ripples({
        id: 'ripples9',
        flush: true,
        color: '#50cef5',
        point: [Image11.point[0] + Image11.width / 2, Image11.point[1] + Image11.height / 2],
        maxRadius: Image11.width > Image11.height ? (Image11.width / 2) + 15 : (Image11.height / 2) + 15,
        minRadius: Image11.width > Image11.height ? Image11.width / 4 : Image11.height / 4,
        radius: Image11.width > Image11.height ? Image11.width / 2 : Image11.height / 2,
    })

    let line16 = diagram.getOption('line16').points;
    diagram.moveDot({
        id: 'line16_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [line16[0],
            [line16[1][0] + 35, line16[1][1]]
        ],
    });
}

function oilStationCharge(diagram) {
    //供油站
    let Image12 = diagram.getOption('img12');
    diagram.ripples({
        id: 'ripples10',
        flush: true,
        color: '#50cef5',
        point: [Image12.point[0] + Image12.width / 2, Image12.point[1] + Image12.height / 2],
        maxRadius: Image12.width > Image12.height ? (Image12.width / 2) + 15 : (Image12.height / 2) + 15,
        minRadius: Image12.width > Image12.height ? Image12.width / 4 : Image12.height / 4,
        radius: Image12.width > Image12.height ? Image12.width / 2 : Image12.height / 2,
    })

    let line17 = diagram.getOption('line17').points;
    diagram.moveDot({
        id: 'line17_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [line17[0],
            [line17[1][0] + 35, line17[1][1]]
        ],
    });

}

function switch5000Charge(diagram) {
    // 打开开关
    diagram.setOption('km1', 'state', true);
}

function switch32001Charge(diagram) {
    // 打开开关
    diagram.setOption('km2', 'state', true);
}

function switch32002Charge(diagram) {
    // 打开开关
    diagram.setOption('km3', 'state', true);
}

function switch5200Charge(diagram) {
    // 打开开关
    diagram.setOption('km4', 'state', true);
}


export default diagramStates;

 src/pages/home/topoGraphdiagram/js/gridCircuitDiagram.js

@@ -213,14 +213,13 @@
            [text1.bottom[0], text1.bottom[1] + 48]
        ]
    })

    let onOff1 = diagram.onOff({
        id: 'km1',
        point: [text1.bottom[0], text1.bottom[1] + 48],
        point: [line1[1][0], line1[1][1]],
        direction: 'bottom',
        color: '#c0becf',
        state: false,
        flush: false,
        flush: true,
    });

    let line2 = diagram.line({
@@ -228,8 +227,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            onOff1.arc2.bottom,
            [onOff1.arc2.bottom[0], start[1] - 3.5]
            [onOff1.arc2.bottom[0], onOff1.arc2.bottom[1]],
            [onOff1.arc2.bottom[0], KVLine[0][1]]
        ]
    })

@@ -266,7 +265,7 @@
        direction: 'bottom',
        color: '#c0becf',
        state: false,
        flush: false,
        flush: true,
    });

    let line4 = diagram.line({
@@ -306,7 +305,7 @@
        direction: 'bottom',
        color: '#c0becf',
        state: false,
        flush: false,
        flush: true,
    });

    let line6 = diagram.line({
@@ -568,7 +567,7 @@
        direction: 'bottom',
        color: '#c0becf',
        state: false,
        flush: false,
        flush: true,
    });

    let line15 = diagram.line({