首页拓扑图问题修改

whyczyk

2021-07-19 b9f0dfc4c0c48d65842d417b5babe1304439a735

首页拓扑图问题修改

 src/assets/js/newDiagram/index.js

@@ -11,13 +11,13 @@
    this.opts = { // 默认配置
        lineWidth: 3, // 线宽
        onOffBase: { // 开关的基础配置
            radius: 3,
            radius: 4,
            width: 16,
            lineWidth: 2,
        },
        moveDot: {
            radius: 6,
            step: 1,
            step: 0.8,
            gravity: 0.08
        },
        ripplesStep: 0.6
@@ -30,7 +30,7 @@
    };

    // 显示线条的id
    this.showLineId = false;
    this.showLineId = true;
}

// 设置canvas

 src/pages/dcSwitchboard/js/gridCircuitDiagram.js

@@ -29,7 +29,7 @@
        ]
    });
    
    // // 5000KVA进线文字
    // // 5000kVA进线文字
    let Image1 = diagram.drawImage({
        id: 'img1',
        url: rectifier,

 src/pages/home/topoGraph.vue

@@ -514,7 +514,10 @@
                        this.deviceList.map(item => {
                            switch (item.position) {
                                case 5: // 大功率电源
                                    this.bigPower = item.commStatus
                                    this.bigPower = item.commStatus;
                                    if (this.bigPower == 0) {
                                        diagramStates(diagram, 'bigPower');
                                    }
                                    rectifierPowerInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
@@ -527,6 +530,9 @@
                                    break;
                                case 6: // 直流主配电板
                                    this.eleBoard = item.commStatus
                                    if (this.eleBoard == 0) {
                                        diagramStates(diagram, 'eleBoard');
                                    }
                                    centralMonitorSysSTInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
@@ -539,6 +545,9 @@
                                    break;
                                case 8: // AFE变频
                                    this.AFEcabinet = item.commStatus
                                    if (this.AFEcabinet == 0) {
                                        diagramStates(diagram, 'AFEcabinet');
                                    }
                                    afeInverterInfoByDeviceId({
                                        devId: item.deviceId
                                    }).then((res) => {
@@ -551,6 +560,9 @@
                                    break;
                                case 9: // 水站
                                    this.waterStation = item.commStatus
                                    if (this.waterStation == 0) {
                                        diagramStates(diagram, 'waterStation');
                                    }
                                    WaterCommInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
@@ -563,6 +575,9 @@
                                    break;
                                case 10: // 油站
                                    this.oilStation = item.commStatus
                                    if (this.oilStation == 0) {
                                        diagramStates(diagram, 'oilStation');
                                    }
                                    OilCommInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
@@ -575,6 +590,9 @@
                                    break;
                                case 1: // 5000KV开关
                                    this.switch5000 = item.commStatus;
                                    if (this.switch5000 == 1) {
                                        diagramStates(diagram, 'switch5000');
                                    }
                                    centralMonitorSysInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
@@ -587,6 +605,9 @@
                                    break;
                                case 2: // 3200KV1开关
                                    this.switch32001 = item.commStatus
                                    if (this.switch32001 == 1) {
                                        diagramStates(diagram, 'switch32001');
                                    }
                                    centralMonitorSysInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
@@ -599,10 +620,13 @@
                                    break;
                                case 3: // 3200KV2开关
                                    this.switch32002 = item.commStatus
                                    if (this.switch32002 == 1) {
                                        diagramStates(diagram, 'switch32002');
                                    }
                                    centralMonitorSysInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
                                        if (res.data.code == 1) {
                                        if (res.data.code == 0) {
                                            this.panel3 = res.data.data
                                        }
                                    }).catch((err) => {
@@ -611,6 +635,9 @@
                                    break;
                                case 4: // 5200KV开关
                                    this.switch5200 = item.commStatus
                                    if (this.switch5200 == 1) {
                                        diagramStates(diagram, 'switch5200');
                                    }
                                    centralMonitorSysInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
@@ -622,7 +649,7 @@
                                    });
                                    break;
                            }
                            this.setDiagramByType();
                            this.setDiagramByType()
                        })
                    }
                }).catch((err) => {
@@ -681,48 +708,22 @@
            },
            setDiagramByType() {
                this.run = "";
                if (this.bigPower == 1) {
                    diagramStates(diagram, 'bigPower');
                }
                if (this.eleBoard == 1) {
                    diagramStates(diagram, 'eleBoard');
                }
                if (this.speedCabinet == 1) {
                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');
                }
                if (this.switch32001 == 1) {
                    diagramStates(diagram, 'switch32001');
                }
                if (this.switch32002 == 1) {
                    diagramStates(diagram, 'switch32002');
                }
                if (this.switch5200 == 1) {
                    diagramStates(diagram, 'switch5200');
                }

                if (this.switch5000 == 1) {
                    this.run = 'run1';
                }
@@ -836,9 +837,6 @@
                    }
                }
            }, false)

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

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

@@ -1,7 +1,7 @@
// 基础配置
let springGreen = "#50cef5";
let red = "#b370fe";
let scalcRadius = 6;
let scalcRadius = 7;
// 放电状态
function diagramStates(diagram, type) {
    // 断开所有的开关
@@ -1211,24 +1211,24 @@
    diagram.ripples({
        id: 'ripples1',
        flush: true,
        color: '#50cef5',
        color: red,
        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]]
        ],
    });
    // 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) {
@@ -1237,50 +1237,50 @@
    diagram.ripples({
        id: 'ripples2',
        flush: true,
        color: '#50cef5',
        color: red,
        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;
    // 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]],
        ],
    });
    // 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) {
@@ -1289,74 +1289,74 @@
    diagram.ripples({
        id: 'ripples3',
        flush: true,
        color: '#50cef5',
        color: red,
        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;
    // 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]],
        ],
    });
    // 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) {
@@ -1365,86 +1365,86 @@
    diagram.ripples({
        id: 'ripples4',
        flush: true,
        color: '#50cef5',
        color: red,
        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;
    // 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: '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],
        ],
    });
    // 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',
        color: red,
        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],
        ],
    });
    // 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) {
@@ -1453,24 +1453,24 @@
    diagram.ripples({
        id: 'ripples5',
        flush: true,
        color: '#50cef5',
        color: red,
        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],
        ],
    });
    // 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) {
@@ -1479,48 +1479,48 @@
    diagram.ripples({
        id: 'ripples6',
        flush: true,
        color: '#50cef5',
        color: red,
        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]],
        ],
    });
    // 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) {
@@ -1529,48 +1529,48 @@
    diagram.ripples({
        id: 'ripples7',
        flush: true,
        color: '#50cef5',
        color: red,
        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]],
        ],
    });
    // 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) {
@@ -1579,7 +1579,7 @@
    diagram.ripples({
        id: 'ripples8',
        flush: true,
        color: '#50cef5',
        color: red,
        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,
@@ -1593,24 +1593,24 @@
    diagram.ripples({
        id: 'ripples9',
        flush: true,
        color: '#50cef5',
        color: red,
        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]]
        ],
    });
    // 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) {
@@ -1619,24 +1619,24 @@
    diagram.ripples({
        id: 'ripples10',
        flush: true,
        color: '#50cef5',
        color: red,
        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]]
        ],
    });
    // 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]]
    //     ],
    // });

}


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

@@ -13,7 +13,7 @@
import system from '../images/system.png'
import shock from '../images/shock.png'
const lineStrokeColor = '#ffffff';
const lineWidth = 4;
const lineWidth = 5;
const arrow = {
    lineWidth: 2,
    size: 30,
@@ -106,23 +106,33 @@
        showPanel: false
    });

    let line16 = diagram.line({
    // let line16 = diagram.line({
    //     id: 'line16',
    //     strokeStyle: '#fb46af',
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [Image11.right[0] + 10, Image11.right[1]],
    //         [Image11.right[0] + 70, Image11.right[1]]
    //     ]
    // })

    let line16 = diagram.dashLine({
        id: 'line16',
        strokeStyle: '#fb46af',
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [Image11.right[0] + 10, Image11.right[1]],
            [Image11.right[0] + 70, Image11.right[1]]
            [Image11.right[0] + 110, Image11.right[1]]
        ]
    })
    let arrow1 = diagram.drawArrow({
        id: 'arrow1',
        fillStyle: '#fb46af',
        size: arrow.size,
        direction: 'right',
        type: 'fill',
        point: line16[1]
    })
    });

    // let arrow1 = diagram.drawArrow({
    //     id: 'arrow1',
    //     fillStyle: '#fb46af',
    //     size: arrow.size,
    //     direction: 'right',
    //     type: 'fill',
    //     point: line16[1]
    // })

    //绘制拓扑图供油站
    let Image12 = diagram.drawImage({
@@ -144,23 +154,33 @@
        showPanel: false
    });

    let line17 = diagram.line({
    // let line17 = diagram.line({
    //     id: 'line17',
    //     strokeStyle: '#fb46af',
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [Image12.right[0], Image12.right[1]],
    //         [Image12.right[0] + 44, Image12.right[1]]
    //     ]
    // })

    let line17 = diagram.dashLine({
        id: 'line17',
        strokeStyle: '#fb46af',
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [Image12.right[0], Image12.right[1]],
            [Image12.right[0] + 44, Image12.right[1]]
            [Image12.right[0] + 85, Image12.right[1]]
        ]
    })
    let arrow2 = diagram.drawArrow({
        id: 'arrow2',
        fillStyle: '#fb46af',
        size: arrow.size,
        direction: 'right',
        type: 'fill',
        point: line17[1]
    })
    });

    // let arrow2 = diagram.drawArrow({
    //     id: 'arrow2',
    //     fillStyle: '#fb46af',
    //     size: arrow.size,
    //     direction: 'right',
    //     type: 'fill',
    //     point: line17[1]
    // })


    return diagram;
@@ -219,7 +239,7 @@
        id: 'km1',
        point: [line1[1][0], line1[1][1]],
        direction: 'bottom',
        color: '#c0becf',
        color: '#50cef5',
        state: false,
        flush: true,
    });
@@ -234,10 +254,10 @@
        ]
    })

    // 5000KVA开关X1
    // 5000kVA开关X1
    let text2 = diagram.text({
        id: 'text1',
        text: '5000KVA开关',
        text: '5000kVA开关',
        baseline: 'middle',
        fillStyle: '#ffffff',
        fontSize: 14,
@@ -265,7 +285,7 @@
        id: 'km2',
        point: line3[1],
        direction: 'bottom',
        color: '#c0becf',
        color: '#50cef5',
        state: false,
        flush: true,
    });
@@ -280,10 +300,10 @@
        ]
    })

    // 3200KVA开关
    // 3200kVA开关
    let text4 = diagram.text({
        id: 'text2',
        text: '3200KVA开关&     1250A',
        text: '3200kVA开关&     1250A',
        fillStyle: '#ffffff',
        fontSize: 14,
        point: [onOff2.line1[1][0] + 30, onOff2.line1[1][1]],
@@ -305,7 +325,7 @@
        id: 'km3',
        point: line5[1],
        direction: 'bottom',
        color: '#c0becf',
        color: '#50cef5',
        state: false,
        flush: true,
    });
@@ -320,10 +340,10 @@
        ]
    })

    // 3200KVA开关
    // 3200kVA开关
    let text5 = diagram.text({
        id: 'text3',
        text: '3200KVA开关&     1250A',
        text: '3200kVA开关&     1250A',
        fillStyle: '#ffffff',
        fontSize: 14,
        point: [onOff3.line1[1][0] - 140, onOff3.line1[1][1]],
@@ -571,7 +591,7 @@
        id: 'km4',
        point: [line14[1][0], line14[1][1] - 28],
        direction: 'bottom',
        color: '#c0becf',
        color: '#50cef5',
        state: false,
        flush: true,
    });
@@ -586,10 +606,10 @@
        ]
    })

    // 5200KVA开关
    // 5200kVA开关
    let text13 = diagram.text({
        id: "text6",
        text: '5200KVA开关&     1250A',
        text: '5200kVA开关&     1250A',
        fillStyle: '#ffffff',
        fontSize: 14,
        point: [onOff4.arc1.left[0] - 130, onOff4.arc1.left[1] - 9],
@@ -629,216 +649,323 @@
        point: [radiusRect.top[0] - 47, radiusRect.top[1] - 12],
        radBorder: true
    });

    let line18 = diagram.line({
    // let line18 = diagram.line({
    //     id: 'line18',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [radiusRect.left[0] - 320, 226],
    //         [radiusRect.left[0] - 40, 226]
    //     ]
    // })
    let line18 = diagram.dashLine({
        id: 'line18',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [radiusRect.left[0] - 300, 226],
            [radiusRect.left[0] - 40, 226]
            [radiusRect.left[0] - 330, 226],
            [radiusRect.left[0] - 10, 226]
        ]
    })
    });

    let arrow3 = diagram.drawArrow({
        id: 'arrow3',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'right',
        type: 'fill',
        point: line18[1]
    })
    // let arrow3 = diagram.drawArrow({
    //     id: 'arrow3',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'right',
    //     type: 'fill',
    //     point: line18[1]
    // })

    let arrow4 = diagram.drawArrow({
        id: 'arrow4',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'left',
        type: 'fill',
        point: line18[0]
    })
    // let arrow4 = diagram.drawArrow({
    //     id: 'arrow4',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'left',
    //     type: 'fill',
    //     point: line18[0]
    // })

    let line19 = diagram.line({
    // let line19 = diagram.line({
    //     id: 'line19',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [radiusRect.left[0] - 260, 266],
    //         [radiusRect.left[0] - 40, 266]
    //     ]
    // })

    let line19 = diagram.dashLine({
        id: 'line19',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [radiusRect.left[0] - 260, 266],
            [radiusRect.left[0] - 40, 266]
            [radiusRect.left[0] - 10, 266]
        ]
    })
    });

    let arrow5 = diagram.drawArrow({
        id: 'arrow5',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'right',
        type: 'fill',
        point: line19[1]
    })
    // let arrow5 = diagram.drawArrow({
    //     id: 'arrow5',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'right',
    //     type: 'fill',
    //     point: line19[1]
    // })

    let line20 = diagram.line({
    // let line20 = diagram.line({
    //     id: 'line20',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [line19[0][0], line19[0][1] - arrow.lineWidth / 2],
    //         [line19[0][0], line19[0][1] + 130]
    //     ]
    // })

    let line20 = diagram.dashLine({
        id: 'line20',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [line19[0][0], line19[0][1] - arrow.lineWidth / 2],
            [line19[0][0], line19[0][1] + 130]
        ]
    })
    });

    let line21 = diagram.line({

    // let line21 = diagram.line({
    //     id: 'line21',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [line20[1][0] + arrow.lineWidth / 2, line20[1][1]],
    //         [line20[1][0] - 40, line20[1][1]]
    //     ]
    // })

    let line21 = diagram.dashLine({
        id: 'line21',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [line20[1][0] + arrow.lineWidth / 2, line20[1][1]],
            [line20[1][0] - 40, line20[1][1]]
            [line20[1][0] - 70, line20[1][1]]
        ]
    })
    });

    let arrow6 = diagram.drawArrow({
        id: 'arrow6',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'left',
        type: 'fill',
        point: line21[1]
    })
    // let arrow6 = diagram.drawArrow({
    //     id: 'arrow6',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'left',
    //     type: 'fill',
    //     point: line21[1]
    // })

    let line22 = diagram.line({
    // let line22 = diagram.line({
    //     id: 'line22',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [radiusRect.left[0] - 220, 306],
    //         [radiusRect.left[0] - 40, 306]
    //     ]
    // })

    let line22 = diagram.dashLine({
        id: 'line22',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [radiusRect.left[0] - 220, 306],
            [radiusRect.left[0] - 40, 306]
            [radiusRect.left[0] - 10, 306]
        ]
    })
    });

    let arrow7 = diagram.drawArrow({
        id: 'arrow7',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'right',
        type: 'fill',
        point: line22[1]
    })
    // let arrow7 = diagram.drawArrow({
    //     id: 'arrow7',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'right',
    //     type: 'fill',
    //     point: line22[1]
    // })

    let line23 = diagram.line({
    // let line23 = diagram.line({
    //     id: 'line23',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [line22[0][0], line22[0][1] - arrow.lineWidth / 2],
    //         [line22[0][0], line22[0][1] + 135]
    //     ]
    // })

    let line23 = diagram.dashLine({
        id: 'line23',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [line22[0][0], line22[0][1] - arrow.lineWidth / 2],
            [line22[0][0], line22[0][1] + 135]
        ]
    })
    });

    let line24 = diagram.line({
    // let line24 = diagram.line({
    //     id: 'line24',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [line23[1][0] + arrow.lineWidth / 2, line23[1][1]],
    //         [line23[1][0] - 55, line23[1][1]]
    //     ]
    // })

    let line24 = diagram.dashLine({
        id: 'line24',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [line23[1][0] + arrow.lineWidth / 2, line23[1][1]],
            [line23[1][0] - 55, line23[1][1]]
        ]
    })
    });

    let line25 = diagram.line({
    // let line25 = diagram.line({
    //     id: 'line25',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [line24[1][0], line24[1][1] - arrow.lineWidth / 2],
    //         [line24[1][0], line24[1][1] + 191]
    //     ]
    // })

    let line25 = diagram.dashLine({
        id: 'line25',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [line24[1][0], line24[1][1] - arrow.lineWidth / 2],
            [line24[1][0], line24[1][1] + 191]
        ]
    })
    });

    let line26 = diagram.line({
    // let line26 = diagram.line({
    //     id: 'line26',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [line25[1][0] + arrow.lineWidth / 2, line25[1][1]],
    //         [line25[1][0] - 30, line25[1][1]]
    //     ]
    // })

    let line26 = diagram.dashLine({
        id: 'line26',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [line25[1][0] + arrow.lineWidth / 2, line25[1][1]],
            [line25[1][0] - 30, line25[1][1]]
            [line25[1][0] - 55, line25[1][1]]
        ]
    })
    });

    let arrow8 = diagram.drawArrow({
        id: 'arrow8',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'left',
        type: 'fill',
        point: line26[1]
    })
    // let arrow8 = diagram.drawArrow({
    //     id: 'arrow8',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'left',
    //     type: 'fill',
    //     point: line26[1]
    // })

    let line27 = diagram.line({
    // let line27 = diagram.line({
    //     id: 'line27',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [radiusRect.left[0] - 150, 346],
    //         [radiusRect.left[0] - 40, 346]
    //     ]
    // })

    let line27 = diagram.dashLine({
        id: 'line27',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [radiusRect.left[0] - 150, 346],
            [radiusRect.left[0] - 40, 346]
            [radiusRect.left[0] - 10, 346]
        ]
    })
    });

    let arrow9 = diagram.drawArrow({
        id: 'arrow9',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'right',
        type: 'fill',
        point: line27[1]
    })
    // let arrow9 = diagram.drawArrow({
    //     id: 'arrow9',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'right',
    //     type: 'fill',
    //     point: line27[1]
    // })

    let line28 = diagram.line({
    // let line28 = diagram.line({
    //     id: 'line28',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [line27[0][0], line27[0][1] - arrow.lineWidth / 2],
    //         [line27[0][0], line27[0][1] + 190]
    //     ]
    // })

    let line28 = diagram.dashLine({
        id: 'line28',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [line27[0][0], line27[0][1] - arrow.lineWidth / 2],
            [line27[0][0], line27[0][1] + 190]
            [line27[0][0], line27[0][1] + 250]
        ]
    })
    });

    let arrow10 = diagram.drawArrow({
        id: 'arrow10',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'bottom',
        type: 'fill',
        point: line28[1]
    })
    // let arrow10 = diagram.drawArrow({
    //     id: 'arrow10',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'bottom',
    //     type: 'fill',
    //     point: line28[1]
    // })

    let line29 = diagram.line({
    // let line29 = diagram.line({
    //     id: 'line29',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [850, radiusRect.bottom[1] + 40],
    //         [850, radiusRect.bottom[1] + 80]
    //     ]
    // })

    let line29 = diagram.dashLine({
        id: 'line29',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [850, radiusRect.bottom[1] + 40],
            [850, radiusRect.bottom[1] + 80]
            [850, radiusRect.bottom[1] + 10],
            [850, radiusRect.bottom[1] + 85]
        ]
    })
    });

    let arrow11 = diagram.drawArrow({
        id: 'arrow11',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'top',
        type: 'fill',
        point: line29[0]
    })
    // let arrow11 = diagram.drawArrow({
    //     id: 'arrow11',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'top',
    //     type: 'fill',
    //     point: line29[0]
    // })

    let arrow12 = diagram.drawArrow({
        id: 'arrow12',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'bottom',
        type: 'fill',
        point: line29[1]
    })
    // let arrow12 = diagram.drawArrow({
    //     id: 'arrow12',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'bottom',
    //     type: 'fill',
    //     point: line29[1]
    // })

    // 振动测试系统
    let text16 = diagram.text({
@@ -846,7 +973,7 @@
        baseline: 'middle',
        fillStyle: '#ffffff',
        fontSize: 14,
        point: [arrow12.bottom[0] - 40, arrow12.bottom[1] + 18],
        point: [line29[1][0] - 40, line29[1][1] + 18],
        radBorder: true
    });

@@ -859,167 +986,249 @@
        height: 65
    })

    let line30 = diagram.line({
    // let line30 = diagram.line({
    //     id: 'line30',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [Image14.bottom[0], Image14.bottom[1] + 65],
    //         [Image14.bottom[0] - 90, Image14.bottom[1] + 65]
    //     ]
    // })

    let line30 = diagram.dashLine({
        id: 'line30',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [Image14.bottom[0], Image14.bottom[1] + 65],
            [Image14.bottom[0] - 90, Image14.bottom[1] + 65]
            [Image14.bottom[0] - 115, Image14.bottom[1] + 65]
        ]
    })
    });

    let line31 = diagram.line({
    // let line31 = diagram.line({
    //     id: 'line31',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [line30[0][0], line30[0][1] + arrow.lineWidth / 2],
    //         [line30[0][0], line30[0][1] - 25]
    //     ]
    // })

    let line31 = diagram.dashLine({
        id: 'line31',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [line30[0][0], line30[0][1] + arrow.lineWidth / 2],
            [line30[0][0], line30[0][1] - 25]
            [line30[0][0], line30[0][1] - 55]
        ]
    })
    });

    let arrow14 = diagram.drawArrow({
        id: 'arrow14',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'left',
        type: 'fill',
        point: line30[1]
    })
    // let arrow14 = diagram.drawArrow({
    //     id: 'arrow14',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'left',
    //     type: 'fill',
    //     point: line30[1]
    // })

    let arrow15 = diagram.drawArrow({
        id: 'arrow15',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'top',
        type: 'fill',
        point: line31[1]
    })
    // let arrow15 = diagram.drawArrow({
    //     id: 'arrow15',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'top',
    //     type: 'fill',
    //     point: line31[1]
    // })

    let line32 = diagram.line({
    // let line32 = diagram.line({
    //     id: 'line32',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [980, radiusRect.bottom[1] + 40],
    //         [980, radiusRect.bottom[1] + 200]
    //     ]
    // })

    let line32 = diagram.dashLine({
        id: 'line32',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [980, radiusRect.bottom[1] + 40],
            [980, radiusRect.bottom[1] + 200]
            [980, radiusRect.bottom[1] + 10],
            [980, radiusRect.bottom[1] + 230]
        ]
    })
    });

    let arrow16 = diagram.drawArrow({
        id: 'arrow16',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'top',
        type: 'fill',
        point: line32[0]
    })
    // let arrow16 = diagram.drawArrow({
    //     id: 'arrow16',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'top',
    //     type: 'fill',
    //     point: line32[0]
    // })

    let arrow17 = diagram.drawArrow({
        id: 'arrow17',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'bottom',
        type: 'fill',
        point: line32[1]
    })
    // let arrow17 = diagram.drawArrow({
    //     id: 'arrow17',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'bottom',
    //     type: 'fill',
    //     point: line32[1]
    // })

    let line33 = diagram.line({
    // let line33 = diagram.line({
    //     id: 'line33',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [radiusRect.right[0] + 40, 346],
    //         [radiusRect.right[0] + 120, 346]
    //     ]
    // })

    let line33 = diagram.dashLine({
        id: 'line33',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [radiusRect.right[0] + 40, 346],
            [radiusRect.right[0] + 10, 346],
            [radiusRect.right[0] + 120, 346]
        ]
    })
    });

    let arrow18 = diagram.drawArrow({
        id: 'arrow18',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'left',
        type: 'fill',
        point: line33[0]
    })
    // let arrow18 = diagram.drawArrow({
    //     id: 'arrow18',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'left',
    //     type: 'fill',
    //     point: line33[0]
    // })

    let line34 = diagram.line({
    // let line34 = diagram.line({
    //     id: 'line34',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [line33[1][0], line33[1][1] - arrow.lineWidth / 2],
    //         [line33[1][0], line33[1][1] + 270]
    //     ]
    // })

    let line34 = diagram.dashLine({
        id: 'line34',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [line33[1][0], line33[1][1] - arrow.lineWidth / 2],
            [line33[1][0], line33[1][1] + 270]
            [line33[1][0], line33[1][1] + 295]
        ]
    })
    });

    let line35 = diagram.line({
    // let line35 = diagram.line({
    //     id: 'line35',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [line34[1][0] - arrow.lineWidth / 2, line34[1][1]],
    //         [line34[1][0] + 130, line34[1][1]]
    //     ]
    // })

    let line35 = diagram.dashLine({
        id: 'line35',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [line34[1][0] - arrow.lineWidth / 2, line34[1][1]],
            [line34[1][0] + 130, line34[1][1]]
            [line34[1][0] + 160, line34[1][1]]
        ]
    })
    });

    let arrow19 = diagram.drawArrow({
        id: 'arrow19',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'right',
        type: 'fill',
        point: line35[1]
    })
    // let arrow19 = diagram.drawArrow({
    //     id: 'arrow19',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'right',
    //     type: 'fill',
    //     point: line35[1]
    // })

    let line36 = diagram.line({
    // let line36 = diagram.line({
    //     id: 'line36',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [radiusRect.right[0] + 40, 280],
    //         [radiusRect.right[0] + 170, 280]
    //     ]
    // })

    let line36 = diagram.dashLine({
        id: 'line36',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [radiusRect.right[0] + 40, 280],
            [radiusRect.right[0] + 10, 280],
            [radiusRect.right[0] + 170, 280]
        ]
    })
    });

    let arrow20 = diagram.drawArrow({
        id: 'arrow20',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'left',
        type: 'fill',
        point: line36[0]
    })
    // let arrow20 = diagram.drawArrow({
    //     id: 'arrow20',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'left',
    //     type: 'fill',
    //     point: line36[0]
    // })

    let line37 = diagram.line({
    // let line37 = diagram.line({
    //     id: 'line37',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [line36[1][0], line36[1][1] - arrow.lineWidth / 2],
    //         [line36[1][0], line36[1][1] + 150]
    //     ]
    // })

    let line37 = diagram.dashLine({
        id: 'line37',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [line36[1][0], line36[1][1] - arrow.lineWidth / 2],
            [line36[1][0], line36[1][1] + 150]
            [line36[1][0], line36[1][1] + 175]
        ]
    })
    });

    let line38 = diagram.line({

    // let line38 = diagram.line({
    //     id: 'line38',
    //     strokeStyle: arrow.systemColor,
    //     lineWidth: arrow.lineWidth,
    //     points: [
    //         [line37[1][0] - arrow.lineWidth / 2, line37[1][1]],
    //         [line37[1][0] + 50, line37[1][1]]
    //     ]
    // })

    let line38 = diagram.dashLine({
        id: 'line38',
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        strokeStyle: '#ffffff',
        points: [
            [line37[1][0] - arrow.lineWidth / 2, line37[1][1]],
            [line37[1][0] + 50, line37[1][1]]
            [line37[1][0] + 80, line37[1][1]]
        ]
    })
    });

    let arrow21 = diagram.drawArrow({
        id: 'arrow21',
        fillStyle: arrow.systemColor,
        size: arrow.size,
        direction: 'right',
        type: 'fill',
        point: line38[1]
    })
    // let arrow21 = diagram.drawArrow({
    //     id: 'arrow21',
    //     fillStyle: arrow.systemColor,
    //     size: arrow.size,
    //     direction: 'right',
    //     type: 'fill',
    //     point: line38[1]
    // })

}


 src/pages/monitoring/js/gridCircuitDiagram.js

@@ -82,7 +82,7 @@
    // 5000KVA进线文字
    let text1 = diagram.text({
        id: "text1",
        text: '5000KVA进线',
        text: '5000kVA进线',
        fillStyle: '#ffff18',
        fontSize: 12,
        point: [line4[0][0]+50,line3[1][0]-60],
@@ -145,7 +145,7 @@
    // 1号3200KVA进线文字
    let text2 = diagram.text({
        id: "text2",
        text: '1号3200KVA进线',
        text: '1号3200kVA进线',
        fillStyle: '#ffff18',
        fontSize: 10,
        point: [line7[1][0]-60,line6[0][1]-30],
@@ -248,7 +248,7 @@
    // 2号3200KVA进线文字
    let text3 = diagram.text({
        id: "text3",
        text: '2号3200KVA进线',
        text: '2号3200kVA进线',
        fillStyle: '#ffff18',
        fontSize: 10,
        point: [line11[1][0]-60,line10[0][1]-30],
@@ -298,9 +298,7 @@
        text: '大功率整流电源',
        fillStyle: '#ffff18',
        fontSize: 12,
        point: 
                [Image1.bottom[0]-50,Image1.bottom[1]+10]
                ,
        point: [Image1.bottom[0] - 50, Image1.bottom[1] + 10],
        // radBorder: true,
        showPanel: false
    });