首页拓扑图问题修改

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

@@ -10,12 +10,12 @@


function girdCircuitDiagram(stc, flush) {
    

    let diagram = new Diagram();
    // let thisWidth = stc.scrollWidth;
    // let thisHeight = stc.scrollHeight;
    diagram.width = 236;
    diagram.height= 579;
    diagram.height = 579;
    diagram.setCanvas(stc, flush);

    let start = [115, 10];
@@ -25,15 +25,15 @@
        lineWidth: lineWidth,
        points: [
            start,
            [start[0], start[1]+80]
            [start[0], start[1] + 80]
        ]
    });
    
    // // 5000KVA进线文字

    // // 5000kVA进线文字
    let Image1 = diagram.drawImage({
        id: 'img1',
        url: rectifier,
        point: [line1[0][0]-25, line1[0][1]+15],
        point: [line1[0][0] - 25, line1[0][1] + 15],
        width: 40,
        height: 60,
    })
@@ -42,7 +42,7 @@
        text: '大功率整流电源',
        fillStyle: '#ffff18',
        fontSize: 12,
        point: [Image1.top[0]+20,Image1.top[1]],
        point: [Image1.top[0] + 20, Image1.top[1]],
        // radBorder: true,
        showPanel: false
    });
@@ -51,8 +51,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line1[1][0]-60,line1[1][1]],
            [line1[1][0]+60,line1[1][1]]
            [line1[1][0] - 60, line1[1][1]],
            [line1[1][0] + 60, line1[1][1]]
        ]
    });
    // 左边线路
@@ -61,8 +61,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line2[0][0],line2[0][1]],
            [line2[0][0],line2[0][1]+60]
            [line2[0][0], line2[0][1]],
            [line2[0][0], line2[0][1] + 60]
        ]
    });
    let arc1 = diagram.arc({
@@ -80,8 +80,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line3[1][0],line3[1][1]+30],
            [line3[1][0],line3[1][1]+60]
            [line3[1][0], line3[1][1] + 30],
            [line3[1][0], line3[1][1] + 60]
        ]
    });
    let arc2 = diagram.arc({
@@ -100,8 +100,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line5[0][0],line5[0][1]],
            [line3[1][0]-10,line3[1][1]]
            [line5[0][0], line5[0][1]],
            [line3[1][0] - 10, line3[1][1]]
        ]
    });
    let line7 = diagram.line({
@@ -109,8 +109,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line5[1][0]-6,line5[1][1]-10],
            [line5[1][0]-6,line5[1][1]+10]
            [line5[1][0] - 6, line5[1][1] - 10],
            [line5[1][0] - 6, line5[1][1] + 10]
        ]
    });
    let line8 = diagram.line({
@@ -118,8 +118,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line7[1][0],line7[1][1]],
            [line7[1][0]+6,line7[1][1]]
            [line7[1][0], line7[1][1]],
            [line7[1][0] + 6, line7[1][1]]
        ]
    });

@@ -128,8 +128,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line8[1][0],line8[1][1]],
            [line8[1][0],line8[1][1]+50]
            [line8[1][0], line8[1][1]],
            [line8[1][0], line8[1][1] + 50]
        ]
    });

@@ -138,8 +138,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line9[1][0],line9[1][1]-25],
            [line9[1][0]+45,line9[1][1]-25]
            [line9[1][0], line9[1][1] - 25],
            [line9[1][0] + 45, line9[1][1] - 25]
        ]
    });
    let line11 = diagram.line({
@@ -147,8 +147,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line9[1][0]-25,line9[1][1]],
            [line9[1][0]+25,line9[1][1]]
            [line9[1][0] - 25, line9[1][1]],
            [line9[1][0] + 25, line9[1][1]]
        ]
    });
    // 左边线路开始线条
@@ -157,8 +157,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line11[0][0],line11[0][1]],
            [line11[0][0],line11[0][1]+40]
            [line11[0][0], line11[0][1]],
            [line11[0][0], line11[0][1] + 40]
        ]
    });
    let line13 = diagram.line({
@@ -166,8 +166,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line12[1][0]-6,line12[1][1]-10],
            [line12[1][0]-6,line12[1][1]+6]
            [line12[1][0] - 6, line12[1][1] - 10],
            [line12[1][0] - 6, line12[1][1] + 6]
        ]
    });
    let line14 = diagram.line({
@@ -175,8 +175,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line13[1][0],line13[1][1]],
            [line13[1][0]+6,line13[1][1]]
            [line13[1][0], line13[1][1]],
            [line13[1][0] + 6, line13[1][1]]
        ]
    });
    let line15 = diagram.line({
@@ -184,8 +184,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line14[1][0],line14[1][1]],
            [line14[1][0],line14[1][1]+20]
            [line14[1][0], line14[1][1]],
            [line14[1][0], line14[1][1] + 20]
        ]
    });
    let arc3 = diagram.arc({
@@ -203,8 +203,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line15[1][0],line15[1][1]+30],
            [line15[1][0],line15[1][1]+60]
            [line15[1][0], line15[1][1] + 30],
            [line15[1][0], line15[1][1] + 60]
        ]
    });
    let arc4 = diagram.arc({
@@ -223,8 +223,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line16[0][0],line16[0][1]],
            [line15[1][0]-10,line15[1][1]]
            [line16[0][0], line16[0][1]],
            [line15[1][0] - 10, line15[1][1]]
        ]
    });
    // 右边开始线条
@@ -233,8 +233,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line11[1][0],line11[1][1]],
            [line11[1][0],line11[1][1]+40]
            [line11[1][0], line11[1][1]],
            [line11[1][0], line11[1][1] + 40]
        ]
    });
    let line19 = diagram.line({
@@ -242,8 +242,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line18[1][0]-6,line18[1][1]-10],
            [line18[1][0]-6,line18[1][1]+6]
            [line18[1][0] - 6, line18[1][1] - 10],
            [line18[1][0] - 6, line18[1][1] + 6]
        ]
    });
    let line20 = diagram.line({
@@ -251,8 +251,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line19[1][0],line19[1][1]],
            [line19[1][0]+6,line19[1][1]]
            [line19[1][0], line19[1][1]],
            [line19[1][0] + 6, line19[1][1]]
        ]
    });
    let line21 = diagram.line({
@@ -260,8 +260,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line20[1][0],line20[1][1]],
            [line20[1][0],line20[1][1]+20]
            [line20[1][0], line20[1][1]],
            [line20[1][0], line20[1][1] + 20]
        ]
    });
    let arc5 = diagram.arc({
@@ -279,8 +279,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line21[1][0],line21[1][1]+30],
            [line21[1][0],line21[1][1]+60]
            [line21[1][0], line21[1][1] + 30],
            [line21[1][0], line21[1][1] + 60]
        ]
    });
    let arc6 = diagram.arc({
@@ -298,8 +298,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line22[0][0],line22[0][1]],
            [line21[1][0]-10,line21[1][1]]
            [line22[0][0], line22[0][1]],
            [line21[1][0] - 10, line21[1][1]]
        ]
    });
    // 
@@ -308,8 +308,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line16[1][0],line16[1][1]],
            [line22[1][0],line22[1][1]]
            [line16[1][0], line16[1][1]],
            [line22[1][0], line22[1][1]]
        ]
    });
    let line25 = diagram.line({
@@ -317,8 +317,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line24[1][0]-25,line24[1][1]],
            [line24[1][0]-25,line24[1][1]+30]
            [line24[1][0] - 25, line24[1][1]],
            [line24[1][0] - 25, line24[1][1] + 30]
        ]
    });

@@ -330,8 +330,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line2[1][0],line2[1][1]],
            [line2[1][0],line2[1][1]+60]
            [line2[1][0], line2[1][1]],
            [line2[1][0], line2[1][1] + 60]
        ]
    });
    let arc7 = diagram.arc({
@@ -349,8 +349,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line4[1][0],line4[1][1]+30],
            [line4[1][0],line4[1][1]+60]
            [line4[1][0], line4[1][1] + 30],
            [line4[1][0], line4[1][1] + 60]
        ]
    });
    let arc8 = diagram.arc({
@@ -369,8 +369,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line25B[0][0],line25B[0][1]],
            [line4[1][0]-10,line4[1][1]]
            [line25B[0][0], line25B[0][1]],
            [line4[1][0] - 10, line4[1][1]]
        ]
    });
    let line27 = diagram.line({
@@ -378,8 +378,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line25B[1][0]-6,line25B[1][1]-10],
            [line25B[1][0]-6,line25B[1][1]+10]
            [line25B[1][0] - 6, line25B[1][1] - 10],
            [line25B[1][0] - 6, line25B[1][1] + 10]
        ]
    });
    let line28 = diagram.line({
@@ -387,8 +387,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line27[1][0],line27[1][1]],
            [line27[1][0]+6,line27[1][1]]
            [line27[1][0], line27[1][1]],
            [line27[1][0] + 6, line27[1][1]]
        ]
    });

@@ -397,8 +397,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line28[1][0],line28[1][1]],
            [line28[1][0],line28[1][1]+50]
            [line28[1][0], line28[1][1]],
            [line28[1][0], line28[1][1] + 50]
        ]
    });

@@ -407,8 +407,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line29[1][0],line29[1][1]-25],
            [line29[1][0]-45,line29[1][1]-25]
            [line29[1][0], line29[1][1] - 25],
            [line29[1][0] - 45, line29[1][1] - 25]
        ]
    });
    let line31 = diagram.line({
@@ -416,8 +416,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line29[1][0]-25,line29[1][1]],
            [line29[1][0]+25,line29[1][1]]
            [line29[1][0] - 25, line29[1][1]],
            [line29[1][0] + 25, line29[1][1]]
        ]
    });
    // 左边线路开始线条
@@ -426,8 +426,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line31[0][0],line31[0][1]],
            [line31[0][0],line31[0][1]+40]
            [line31[0][0], line31[0][1]],
            [line31[0][0], line31[0][1] + 40]
        ]
    });
    let line33 = diagram.line({
@@ -435,8 +435,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line32[1][0]-6,line32[1][1]-10],
            [line32[1][0]-6,line32[1][1]+6]
            [line32[1][0] - 6, line32[1][1] - 10],
            [line32[1][0] - 6, line32[1][1] + 6]
        ]
    });
    let line34 = diagram.line({
@@ -444,8 +444,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line33[1][0],line33[1][1]],
            [line33[1][0]+6,line33[1][1]]
            [line33[1][0], line33[1][1]],
            [line33[1][0] + 6, line33[1][1]]
        ]
    });
    let line35 = diagram.line({
@@ -453,8 +453,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line34[1][0],line34[1][1]],
            [line34[1][0],line34[1][1]+20]
            [line34[1][0], line34[1][1]],
            [line34[1][0], line34[1][1] + 20]
        ]
    });
    let arc9 = diagram.arc({
@@ -472,8 +472,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line35[1][0],line35[1][1]+30],
            [line35[1][0],line35[1][1]+60]
            [line35[1][0], line35[1][1] + 30],
            [line35[1][0], line35[1][1] + 60]
        ]
    });
    let arc10 = diagram.arc({
@@ -492,8 +492,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line36[0][0],line36[0][1]],
            [line35[1][0]-10,line35[1][1]]
            [line36[0][0], line36[0][1]],
            [line35[1][0] - 10, line35[1][1]]
        ]
    });
    // 右边开始线条
@@ -502,8 +502,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line31[1][0],line31[1][1]],
            [line31[1][0],line31[1][1]+40]
            [line31[1][0], line31[1][1]],
            [line31[1][0], line31[1][1] + 40]
        ]
    });
    let line39 = diagram.line({
@@ -511,8 +511,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line38[1][0]-6,line38[1][1]-10],
            [line38[1][0]-6,line38[1][1]+6]
            [line38[1][0] - 6, line38[1][1] - 10],
            [line38[1][0] - 6, line38[1][1] + 6]
        ]
    });
    let line40 = diagram.line({
@@ -520,8 +520,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line39[1][0],line39[1][1]],
            [line39[1][0]+6,line39[1][1]]
            [line39[1][0], line39[1][1]],
            [line39[1][0] + 6, line39[1][1]]
        ]
    });
    let line41 = diagram.line({
@@ -529,8 +529,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line40[1][0],line40[1][1]],
            [line40[1][0],line40[1][1]+20]
            [line40[1][0], line40[1][1]],
            [line40[1][0], line40[1][1] + 20]
        ]
    });
    let arc11 = diagram.arc({
@@ -548,8 +548,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line41[1][0],line41[1][1]+30],
            [line41[1][0],line41[1][1]+60]
            [line41[1][0], line41[1][1] + 30],
            [line41[1][0], line41[1][1] + 60]
        ]
    });
    let arc12 = diagram.arc({
@@ -567,8 +567,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line42[0][0],line42[0][1]],
            [line41[1][0]-10,line41[1][1]]
            [line42[0][0], line42[0][1]],
            [line41[1][0] - 10, line41[1][1]]
        ]
    });
    // 
@@ -577,8 +577,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line36[1][0],line36[1][1]],
            [line42[1][0],line42[1][1]]
            [line36[1][0], line36[1][1]],
            [line42[1][0], line42[1][1]]
        ]
    });
    let line45 = diagram.line({
@@ -586,8 +586,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line44[1][0]-25,line44[1][1]],
            [line44[1][0]-25,line44[1][1]+30]
            [line44[1][0] - 25, line44[1][1]],
            [line44[1][0] - 25, line44[1][1] + 30]
        ]
    });

@@ -596,8 +596,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line25[1][0],line25[1][1]],
            [line45[1][0],line45[1][1]]
            [line25[1][0], line25[1][1]],
            [line45[1][0], line45[1][1]]
        ]
    });
    let line47 = diagram.line({
@@ -605,8 +605,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line46[1][0]-60,line46[1][1]],
            [line46[1][0]-60,line46[1][1]+60]
            [line46[1][0] - 60, line46[1][1]],
            [line46[1][0] - 60, line46[1][1] + 60]
        ]
    });

@@ -614,9 +614,9 @@
    let Image2 = diagram.drawImage({
        id: 'img2',
        url: speedCabinet,
        point: [line47[1][0]-30, line47[1][1]-20],
        point: [line47[1][0] - 30, line47[1][1] - 20],
        width: 70,
        height:80,
        height: 80,
    })
    let arc13 = diagram.arc({
        id: 'arc13',
@@ -643,8 +643,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line10[1][0],line10[1][1]],
            [line30[1][0],line30[1][1]-20]
            [line10[1][0], line10[1][1]],
            [line30[1][0], line30[1][1] - 20]
        ]
    });
    let text2 = diagram.text({
@@ -652,7 +652,7 @@
        text: '直流配电板',
        fillStyle: '#ffff18',
        fontSize: 12,
        point: [line2[0][0]-30,line2[0][1]-20],
        point: [line2[0][0] - 30, line2[0][1] - 20],
        // radBorder: true,
        showPanel: false
    });
@@ -661,7 +661,7 @@
        text: '1号进线屏&    2500A',
        fillStyle: '#ffff18',
        fontSize: 12,
        point: [line3[1][0]-40,line3[1][1]-35],
        point: [line3[1][0] - 40, line3[1][1] - 35],
        // radBorder: true,
        showPanel: false
    });
@@ -670,7 +670,7 @@
        text: '2号进线屏&    2500A',
        fillStyle: '#ffff18',
        fontSize: 12,
        point: [line4[1][0]-20,line4[1][1]-35],
        point: [line4[1][0] - 20, line4[1][1] - 35],
        // radBorder: true,
        showPanel: false
    });
@@ -679,7 +679,7 @@
        text: '1号进线屏',
        fillStyle: '#ffff18',
        fontSize: 12,
        point: [line11[0][0],line11[0][1]-15],
        point: [line11[0][0], line11[0][1] - 15],
        // radBorder: true,
        showPanel: false
    });
@@ -688,7 +688,7 @@
        text: '2号进线屏',
        fillStyle: '#ffff18',
        fontSize: 12,
        point: [line31[0][0],line31[0][1]-15],
        point: [line31[0][0], line31[0][1] - 15],
        // radBorder: true,
        showPanel: false
    });
@@ -697,7 +697,7 @@
        text: '2500A',
        fillStyle: '#ffff18',
        fontSize: 12,
        point: [line15[0][0]-20,line15[0][1]-30],
        point: [line15[0][0] - 20, line15[0][1] - 30],
        // radBorder: true,
        showPanel: false
    });
@@ -706,7 +706,7 @@
        text: '2000A',
        fillStyle: '#ffff18',
        fontSize: 12,
        point: [line20[0][0],line20[0][1]-30],
        point: [line20[0][0], line20[0][1] - 30],
        // radBorder: true,
        showPanel: false
    });
@@ -716,7 +716,7 @@
        text: '2500A',
        fillStyle: '#ffff18',
        fontSize: 12,
        point: [line35[0][0]-20,line35[0][1]-30],
        point: [line35[0][0] - 20, line35[0][1] - 30],
        // radBorder: true,
        showPanel: false
    });
@@ -725,119 +725,119 @@
        text: '2000A',
        fillStyle: '#ffff18',
        fontSize: 12,
        point: [line41[0][0]-20,line41[0][1]-30],
        point: [line41[0][0] - 20, line41[0][1] - 30],
        // radBorder: true,
        showPanel: false
    });
    // 虚线矩形1
    let dashLine1 =diagram.dashLine({
        id:"diagram1",
    let dashLine1 = diagram.dashLine({
        id: "diagram1",
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line2[0][0]+40,line2[0][1]+20],
            [line2[0][0]-40,line2[0][1]+20]
            [line2[0][0] + 40, line2[0][1] + 20],
            [line2[0][0] - 40, line2[0][1] + 20]
        ]
    })
    let dashLine2 =diagram.dashLine({
        id:"diagram2",
    let dashLine2 = diagram.dashLine({
        id: "diagram2",
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [dashLine1[1][0],dashLine1[1][1]],
            [dashLine1[1][0], dashLine1[1][1]+300]
            [dashLine1[1][0], dashLine1[1][1]],
            [dashLine1[1][0], dashLine1[1][1] + 300]
        ]
    })
    let dashLine3 =diagram.dashLine({
        id:"diagram3",
    let dashLine3 = diagram.dashLine({
        id: "diagram3",
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [dashLine2[1][0],dashLine2[1][1]],
            [dashLine2[1][0]+80, dashLine2[1][1]]
            [dashLine2[1][0], dashLine2[1][1]],
            [dashLine2[1][0] + 80, dashLine2[1][1]]
        ]
    })
    let dashLine4 =diagram.dashLine({
        id:"diagram4",
    let dashLine4 = diagram.dashLine({
        id: "diagram4",
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [dashLine3[1][0],dashLine3[1][1]],
            [dashLine3[1][0], dashLine3[1][1]],
            [dashLine1[0][0], dashLine1[0][1]]
        ]
    })

    // 虚线矩形2
    let dashLine5 =diagram.dashLine({
        id:"diagram5",
    let dashLine5 = diagram.dashLine({
        id: "diagram5",
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line2[1][0]+35,line2[1][1]+20],
            [line2[1][0]-35,line2[1][1]+20]
            [line2[1][0] + 35, line2[1][1] + 20],
            [line2[1][0] - 35, line2[1][1] + 20]
        ]
    })
    let dashLine6 =diagram.dashLine({
        id:"diagram6",
    let dashLine6 = diagram.dashLine({
        id: "diagram6",
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [dashLine5[1][0],dashLine5[1][1]],
            [dashLine5[1][0], dashLine5[1][1]+300]
            [dashLine5[1][0], dashLine5[1][1]],
            [dashLine5[1][0], dashLine5[1][1] + 300]
        ]
    })
    let dashLine7 =diagram.dashLine({
        id:"diagram7",
    let dashLine7 = diagram.dashLine({
        id: "diagram7",
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [dashLine6[1][0],dashLine6[1][1]],
            [dashLine6[1][0]+70, dashLine6[1][1]]
            [dashLine6[1][0], dashLine6[1][1]],
            [dashLine6[1][0] + 70, dashLine6[1][1]]
        ]
    })
    let dashLine8 =diagram.dashLine({
        id:"diagram8",
    let dashLine8 = diagram.dashLine({
        id: "diagram8",
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [dashLine7[1][0],dashLine7[1][1]],
            [dashLine7[1][0], dashLine7[1][1]],
            [dashLine5[0][0], dashLine5[0][1]]
        ]
    })
    // 虚线矩形大
    let dashLine9 =diagram.dashLine({
        id:"diagram9",
    let dashLine9 = diagram.dashLine({
        id: "diagram9",
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line2[0][0]+165,line2[0][1]+10],
            [line2[0][0]-50,line2[0][1]+10]
            [line2[0][0] + 165, line2[0][1] + 10],
            [line2[0][0] - 50, line2[0][1] + 10]
        ]
    })
    let dashLine10 =diagram.dashLine({
        id:"diagram6",
    let dashLine10 = diagram.dashLine({
        id: "diagram6",
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [dashLine9[1][0],dashLine9[1][1]],
            [dashLine9[1][0], dashLine9[1][1]+320]
            [dashLine9[1][0], dashLine9[1][1]],
            [dashLine9[1][0], dashLine9[1][1] + 320]
        ]
    })
    let dashLine11 =diagram.dashLine({
        id:"diagram7",
    let dashLine11 = diagram.dashLine({
        id: "diagram7",
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [dashLine10[1][0],dashLine10[1][1]],
            [dashLine10[1][0]+215, dashLine10[1][1]]
            [dashLine10[1][0], dashLine10[1][1]],
            [dashLine10[1][0] + 215, dashLine10[1][1]]
        ]
    })
    let dashLine12 =diagram.dashLine({
        id:"diagram12",
    let dashLine12 = diagram.dashLine({
        id: "diagram12",
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [dashLine11[1][0],dashLine11[1][1]],
            [dashLine11[1][0], dashLine11[1][1]],
            [dashLine9[0][0], dashLine9[0][1]]
        ]
    })

 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

@@ -10,12 +10,12 @@


function girdCircuitDiagram(stc, flush) {
    

    let diagram = new Diagram();
    // let thisWidth = stc.scrollWidth;
    // let thisHeight = stc.scrollHeight;
    diagram.width = 236;
    diagram.height= 579;
    diagram.height = 579;
    diagram.setCanvas(stc, flush);

    let start = [10, 150];
@@ -25,7 +25,7 @@
        lineWidth: lineWidth,
        points: [
            start,
            [start[0]+250, start[1]]
            [start[0] + 250, start[1]]
        ]
    });
    let line2 = diagram.line({
@@ -33,8 +33,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line1[1][0]-125, line1[1][1]],
            [line1[1][0]-125, line1[1][1]-45]
            [line1[1][0] - 125, line1[1][1]],
            [line1[1][0] - 125, line1[1][1] - 45]
        ]
    })

@@ -48,14 +48,14 @@
        radius: 6,
        type: 'fill'
    })
    

    let line3 = diagram.line({
        id: 'line3',
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line1[1][0]-125, line1[1][1]-150],
            [line1[1][0]-125, line1[1][1]-100]
            [line1[1][0] - 125, line1[1][1] - 150],
            [line1[1][0] - 125, line1[1][1] - 100]
        ]
    })

@@ -75,17 +75,17 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line3[1][0]-30, line3[1][1]],
            [line3[1][0] - 30, line3[1][1]],
            [line2[1][0], line2[1][1]]
        ]
    })
    // 5000KVA进线文字
    let text1 = diagram.text({
        id: "text1",
        text: '5000KVA进线',
        text: '5000kVA进线',
        fillStyle: '#ffff18',
        fontSize: 12,
        point: [line4[0][0]+50,line3[1][0]-60],
        point: [line4[0][0] + 50, line3[1][0] - 60],
        // radBorder: true,
        showPanel: false
    });
@@ -95,8 +95,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line1[0][0]+50, line1[0][1]],
            [line1[0][0]+50, line1[0][1]+50]
            [line1[0][0] + 50, line1[0][1]],
            [line1[0][0] + 50, line1[0][1] + 50]
        ]
    })

@@ -116,8 +116,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line5[0][0], line5[0][1]+100],
            [line5[0][0], line5[0][1]+200]
            [line5[0][0], line5[0][1] + 100],
            [line5[0][0], line5[0][1] + 200]
        ]
    })

@@ -138,17 +138,17 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line5[1][0]-30, line5[1][1]],
            [line5[1][0] - 30, line5[1][1]],
            [line6[0][0], line6[0][1]]
        ]
    })
    // 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],
        point: [line7[1][0] - 60, line6[0][1] - 30],
        // radBorder: true,
        showPanel: false
    });
@@ -169,7 +169,7 @@
        lineWidth: lineWidth,
        points: [
            [line12[1][0], line12[1][1]],
            [line12[1][0], line12[1][1]+50]
            [line12[1][0], line12[1][1] + 50]
        ]
    })
    // 2号3200KVA进线文字
@@ -178,18 +178,18 @@
        text: 'A排',
        fillStyle: '#ffff18',
        fontSize: 12,
        point: [line13[1][0]-25,line12[0][1]+25],
        point: [line13[1][0] - 25, line12[0][1] + 25],
        // radBorder: true,
        showPanel: false
    });
//
    //
    let line8 = diagram.line({
        id: 'line8',
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line1[1][0]-50, line1[0][1]],
            [line1[1][0]-50, line1[0][1]+50]
            [line1[1][0] - 50, line1[0][1]],
            [line1[1][0] - 50, line1[0][1] + 50]
        ]
    })

@@ -209,8 +209,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line1[1][0]-50, line1[0][1]],
            [line1[1][0]-50, line1[0][1]+50]
            [line1[1][0] - 50, line1[0][1]],
            [line1[1][0] - 50, line1[0][1] + 50]
        ]
    })

@@ -219,8 +219,8 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line9[1][0], line9[1][1]+50],
            [line9[1][0], line9[0][1]+200]
            [line9[1][0], line9[1][1] + 50],
            [line9[1][0], line9[0][1] + 200]
        ]
    })

@@ -241,17 +241,17 @@
        strokeStyle: lineStrokeColor,
        lineWidth: lineWidth,
        points: [
            [line9[1][0]-30, line9[1][1]],
            [line9[1][0] - 30, line9[1][1]],
            [line10[0][0], line10[0][1]]
        ]
    })
    // 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],
        point: [line11[1][0] - 60, line10[0][1] - 30],
        // radBorder: true,
        showPanel: false
    });
@@ -261,7 +261,7 @@
        lineWidth: lineWidth,
        points: [
            [line10[1][0], line10[1][1]],
            [line10[0][0]-50, line10[1][1]]
            [line10[0][0] - 50, line10[1][1]]
        ]
    })

@@ -271,7 +271,7 @@
        lineWidth: lineWidth,
        points: [
            [line14[1][0], line14[1][1]],
            [line14[1][0], line14[1][1]+50]
            [line14[1][0], line14[1][1] + 50]
        ]
    })
    // B排
@@ -280,7 +280,7 @@
        text: 'B排',
        fillStyle: '#ffff18',
        fontSize: 12,
        point: [line15[1][0]+5,line14[0][1]+25],
        point: [line15[1][0] + 5, line14[0][1] + 25],
        // radBorder: true,
        showPanel: false
    });
@@ -288,7 +288,7 @@
    let Image1 = diagram.drawImage({
        id: 'img1',
        url: rectifier,
        point: [line15[1][0]-60, line15[1][1]],
        point: [line15[1][0] - 60, line15[1][1]],
        width: 70,
        height: 101,
    })
@@ -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
    });