首页拓扑图添加信息框

whyczyk

2021-04-08 ee73d1d4a77cd20683789902e97a1f5a3171dadb

首页拓扑图添加信息框

 public/theme/normal.css

@@ -111,6 +111,7 @@
    border-radius: 8px;
    position: absolute;
    z-index: 10;
    box-shadow: 4px 6px 55px 2px rgba(61, 94, 220, 0.8);
}

.diagram-panel .diagram-panel-title {
@@ -158,7 +159,6 @@

.diagram-panel .panel-item .unit {
    display: block;
    width: 20px;
    font-weight: normal;
    font-size: 12px;
}

 src/App.vue

@@ -3,7 +3,22 @@
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    data() {
      return {

      }
    },
    mounted() {
      this.$router.push({
        path: '/index',
      }).catch(err => {
        console.log(err)
      });
    }
  }
</script>
<style>
  #app {
    box-sizing: border-box;

 src/assets/js/newDiagram/index.js

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

// 设置canvas
@@ -47,6 +47,22 @@
    this.start(true);
};


//添加事件监听
Diagram.prototype.getEventPosition = function (ev) {
    var x, y;
    if (ev.layerX || ev.layerX == 0) {
        x = ev.layerX;
        y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
        x = ev.offsetX;
        y = ev.offsetY;
    }
    return {
        x: x,
        y: y
    };
}

// 启动更新
Diagram.prototype.start = function (start) {
@@ -739,6 +755,8 @@
                    break;
            }
            let radiusRectData = {
                id: option.id,
                showPanel: option.showPanel,
                point: [point[0] - 16, radiusRectY - 1],
                width: fontWidth + 32,
                height: fontHeight * texts.length + 16,
@@ -760,13 +778,27 @@
    if (option.radBorder) {
        return radiusRectInfo
    }

    // 设置执行的方法
    option.method = "text";

    // 添加配置项
    this.addOptions(option);
};


Diagram.prototype.getZoomTextInfo = function (id) {
    let option = this.getOption(id);
    let points = option.point;
    let Xzoom = this.stc.clientWidth / this.width;
    let Yzoom = this.stc.clientHeight / this.height;
    let newObj = {};
    newObj.width = option.width * Xzoom;
    newObj.height = option.height * Yzoom;
    newObj.point = [points[0] * Xzoom, points[1] * Yzoom];
    newObj.r = option.r * Xzoom;
    return newObj
}

// 绘制可移动的点
Diagram.prototype.moveDot = function (option) {
    let ctx = this.f_ctx;

 src/components/PageMenu.vue

@@ -1,5 +1,5 @@
<template>
    <el-menu :default-active="nowAcTabs" class="pageMenu">
    <el-menu :default-active="acTabs" class="pageMenu">
        <template v-for="menu in menus">
            <el-submenu v-if="menu.childrens" :key="menu.name" :index="menu.name">
                <template slot="title">
@@ -61,19 +61,13 @@
        methods: {
            select(data) {
                if (data.src) {
                    localStorage.setItem('activeMenu', data.name)
                    this.$router.push({
                        path: `/index/${data.src}`,
                    }).catch(err => {

                        console.log(err)
                    });
                }
            },
        },
        computed: {
            nowAcTabs() {
                return localStorage.getItem('activeMenu') || this.acTabs;
            }
        },
        mounted() {},
    }

 src/pages/home/topoGraph.vue

@@ -3,20 +3,468 @@
        <div class="tipTitle">系统拓扑</div>
        <div class="diagram-stc" ref="static"></div>
        <div class="diagram-flush" ref="flush"></div>
        <transition name="el-zoom-in-top">
            <diagram-panel :position="text1Pos" title="开关参数" ref="text1Pos" v-show="showtext1">
                <div class="panel-item"><span class="label">状态:</span>
                    <el-input class="input" readonly="readonly" value="合闸"></el-input>
                </div>
                <div class="panel-item"><span class="label">电压:</span>
                    <el-input class="input" readonly="readonly" value="3000"></el-input>
                    <span class="unit">V</span>
                </div>
                <div class="panel-item"><span class="label">电流:</span>
                    <el-input class="input" readonly="readonly" value="120"></el-input>
                    <span class="unit">A</span>
                </div>
            </diagram-panel>
        </transition>

        <transition name="el-zoom-in-top">
            <diagram-panel :position="text2Pos" title="开关参数" ref="text2Pos" v-show="showtext2">
                <div class="panel-item"><span class="label">状态:</span>
                    <el-input class="input" readonly="readonly" value="合闸"></el-input>
                </div>
                <div class="panel-item"><span class="label">电压:</span>
                    <el-input class="input" readonly="readonly" value="2952"></el-input>
                    <span class="unit">V</span>
                </div>
                <div class="panel-item"><span class="label">电流:</span>
                    <el-input class="input" readonly="readonly" value="115"></el-input>
                    <span class="unit">A</span>
                </div>
            </diagram-panel>
        </transition>

        <transition name="el-zoom-in-top">
            <diagram-panel :position="text3Pos" title="开关参数" ref="text3Pos" v-show="showtext3">
                <div class="panel-item"><span class="label">状态:</span>
                    <el-input class="input" readonly="readonly" value="合闸"></el-input>
                </div>
                <div class="panel-item"><span class="label">电压:</span>
                    <el-input class="input" readonly="readonly" value="2860"></el-input>
                    <span class="unit">V</span>
                </div>
                <div class="panel-item"><span class="label">电流:</span>
                    <el-input class="input" readonly="readonly" value="114"></el-input>
                    <span class="unit">A</span>
                </div>
            </diagram-panel>
        </transition>

        <transition name="el-zoom-in-top">
            <diagram-panel :position="text4Pos" title="电源参数" ref="text4Pos" v-show="showtext4">
                <div class="panel-item"><span class="label">电压:</span>
                    <el-input class="input" readonly="readonly" value="2600"></el-input>
                    <span class="unit">V</span>
                </div>
                <div class="panel-item"><span class="label">电流:</span>
                    <el-input class="input" readonly="readonly" value="110"></el-input>
                    <span class="unit">A</span>
                </div>
            </diagram-panel>
        </transition>

        <transition name="el-zoom-in-bottom">
            <diagram-panel :position="text5Pos" title="直流主配电板参数" ref="text5Pos" v-show="showtext5">
                <div class="panel-item">
                    <span class="label">1号进线屏开关:</span>
                    <el-input class="input" readonly="readonly" value="合闸"></el-input>
                    <span class="label" style="margin-left:20px;">1号进线屏开关:</span>
                    <el-input class="input" readonly="readonly" value="合闸"></el-input>
                </div>
                <div class="panel-item">
                    <span class="label">母联屏开关:</span>
                    <el-input class="input" readonly="readonly" value="合闸"></el-input>
                </div>
                <div class="panel-item">
                    <span class="label">1号负载屏开关:</span>
                    <el-input class="input" readonly="readonly" value="合闸"></el-input>
                    <span class="label" style="margin-left:20px;">2号负载屏开关:</span>
                    <el-input class="input" readonly="readonly" value="合闸"></el-input>
                </div>
                <div class="panel-item">
                    <span class="label">A排电压:</span>
                    <el-input class="input" readonly="readonly" value="1000"></el-input>
                    <span class="unit">V</span>
                    <span class="label" style="margin-left:20px;">B排电压:</span>
                    <el-input class="input" readonly="readonly" value="1000"></el-input>
                    <span class="unit">V</span>
                </div>
                <div class="panel-item">
                    <span class="label">A排电流:</span>
                    <el-input class="input" readonly="readonly" value="1250"></el-input>
                    <span class="unit">A</span>
                    <span class="label" style="margin-left:20px;">B排电流:</span>
                    <el-input class="input" readonly="readonly" value="1250"></el-input>
                    <span class="unit">A</span>
                </div>
            </diagram-panel>
        </transition>

        <transition name="el-zoom-in-top">
            <diagram-panel :position="text6Pos" title="开关参数" ref="text6Pos" v-show="showtext6">
                <div class="panel-item"><span class="label">状态:</span>
                    <el-input class="input" readonly="readonly" value="合闸"></el-input>
                </div>
                <div class="panel-item"><span class="label">电压:</span>
                    <el-input class="input" readonly="readonly" value="2800"></el-input>
                    <span class="unit">V</span>
                </div>
                <div class="panel-item"><span class="label">电流:</span>
                    <el-input class="input" readonly="readonly" value="118"></el-input>
                    <span class="unit">A</span>
                </div>
            </diagram-panel>
        </transition>

        <transition name="el-zoom-in-center">
            <diagram-panel :position="text7Pos" title="AFE变频驱动柜参数" ref="text7Pos" v-show="showtext7" class="panel7">
                <div class="panel-item">
                    <span class="label">运行情况:</span>
                    <el-input class="input" readonly="readonly" value="正常"></el-input>
                </div>
                <div class="panel-item">
                    <span class="label">转矩:</span>
                    <el-input class="input" readonly="readonly" value="380"></el-input>
                    <span class="unit">kN·m</span>
                    <span class="label" style="margin-left:20px;">转速:</span>
                    <el-input class="input" readonly="readonly" value="50"></el-input>
                    <span class="unit">r/min</span>
                </div>
                <div class="panel-item">
                    <span class="label">转速:</span>
                    <el-input class="input" readonly="readonly" value="59"></el-input>
                    <span class="unit">r/min</span>
                    <span class="label" style="margin-left:20px;">输入有功功率:</span>
                    <el-input class="input" readonly="readonly" value="2000"></el-input>
                    <span class="unit">kW</span>
                </div>
                <div class="panel-item">
                    <span class="label">正向转速限幅:</span>
                    <el-input class="input" readonly="readonly" value="89"></el-input>
                    <span class="unit">r/min</span>
                    <span class="label" style="margin-left:20px;">输出电压:</span>
                    <el-input class="input" readonly="readonly" value="3000"></el-input>
                    <span class="unit">kv</span>
                </div>
                <div class="panel-item">
                    <span class="label">反向转速限幅:</span>
                    <el-input class="input" readonly="readonly" value="89"></el-input>
                    <span class="unit">r/min</span>
                    <span class="label" style="margin-left:20px;">输出电流:</span>
                    <el-input class="input" readonly="readonly" value="1250"></el-input>
                    <span class="unit">A</span>
                </div>
            </diagram-panel>
        </transition>

        <transition name="el-zoom-in-center">
            <diagram-panel :position="text8Pos" title="供水站情况" ref="text8Pos" v-show="showtext8" class="panel7 panel8">
                <div class="panel-item">
                    <span class="label">水站运行情况:</span>
                    <el-input class="input" readonly="readonly" value="正常"></el-input>
                </div>
                <div class="panel-item">
                    <span class="label">水站温度:</span>
                    <el-input class="input" readonly="readonly" value="40"></el-input>
                    <span class="unit">度</span>
                    <span class="label" style="margin-left:20px;">高温阈值:</span>
                    <el-input class="input" readonly="readonly" value="60"></el-input>
                    <span class="unit">度</span>
                </div>
                <div class="panel-item">
                    <span class="label">液位高度:</span>
                    <el-input class="input" readonly="readonly" value="5"></el-input>
                    <span class="unit">米</span>
                    <span class="label" style="margin-left:20px;">高液阈值:</span>
                    <el-input class="input" readonly="readonly" value="2"></el-input>
                    <span class="unit">米</span>
                </div>
                <div class="panel-item">
                    <span class="label">水站回水温度:</span>
                    <el-input class="input" readonly="readonly" value="45"></el-input>
                    <span class="unit">度</span>
                    <span class="label">水站出水温度:</span>
                    <el-input class="input" readonly="readonly" value="45"></el-input>
                    <span class="unit">度</span>
                </div>
                <div class="panel-item">
                    <span class="label">水站出口1压力:</span>
                    <el-input class="input" readonly="readonly" value="0.5"></el-input>
                    <span class="unit">mPa</span>
                    <span class="label">水站出口2压力:</span>
                    <el-input class="input" readonly="readonly" value="0.5"></el-input>
                    <span class="unit">mPa</span>
                </div>
                <div class="panel-item">
                    <span class="label">水站出口3压力:</span>
                    <el-input class="input" readonly="readonly" value="0.5"></el-input>
                    <span class="unit">mPa</span>
                    <span class="label">水站出口4压力:</span>
                    <el-input class="input" readonly="readonly" value="0.5"></el-input>
                    <span class="unit">mPa</span>
                </div>
                <div class="panel-item">
                    <span class="label">冷冻水出油流量:</span>
                    <el-input class="input" readonly="readonly" value="45"></el-input>
                    <span class="unit">m³/h</span>
                    <span class="label">冷冻水回水流量:</span>
                    <el-input class="input" readonly="readonly" value="45"></el-input>
                    <span class="unit">m³/h</span>
                </div>
                <div class="panel-item">
                    <span class="label">冷冻水压力:</span>
                    <el-input class="input" readonly="readonly" value="45"></el-input>
                    <span class="unit">mPa</span>
                    <span class="label">冷冻水进口压力:</span>
                    <el-input class="input" readonly="readonly" value="30"></el-input>
                    <span class="unit">度</span>
                </div>
                <div class="panel-item">
                    <span class="label">压缩机状态:</span>
                    <el-input class="input" readonly="readonly" value="运行正常"></el-input>
                </div>
                <div class="panel-item" style="justify-content: flex-start;">
                    <span class="label">电机运行情况:</span>
                </div>
                <div class="panel-item">
                    <span class="label">1号电机运行:</span>
                    <el-input class="input" readonly="readonly" value="正常"></el-input>
                    <span class="label">2号电机运行:</span>
                    <el-input class="input" readonly="readonly" value="正常"></el-input>
                </div>
            </diagram-panel>
        </transition>

        <transition name="el-zoom-in-center">
            <diagram-panel :position="text9Pos" title="供油站情况" ref="text9Pos" v-show="showtext9" class="panel7 panel8">
                <div class="panel-item">
                    <span class="label">油站运行情况:</span>
                    <el-input class="input" readonly="readonly" value="正常"></el-input>
                </div>
                <div class="panel-item">
                    <span class="label">油站温度:</span>
                    <el-input class="input" readonly="readonly" value="40"></el-input>
                    <span class="unit">度</span>
                    <span class="label" style="margin-left:20px;">高温阈值:</span>
                    <el-input class="input" readonly="readonly" value="60"></el-input>
                    <span class="unit">度</span>
                </div>
                <div class="panel-item">
                    <span class="label">液位高度:</span>
                    <el-input class="input" readonly="readonly" value="5"></el-input>
                    <span class="unit">米</span>
                    <span class="label" style="margin-left:20px;">高液阈值:</span>
                    <el-input class="input" readonly="readonly" value="2"></el-input>
                    <span class="unit">米</span>
                </div>
                <div class="panel-item">
                    <span class="label">油站回油温度:</span>
                    <el-input class="input" readonly="readonly" value="45"></el-input>
                    <span class="unit">度</span>
                    <span class="label">油站出油温度:</span>
                    <el-input class="input" readonly="readonly" value="45"></el-input>
                    <span class="unit">度</span>
                </div>
                <div class="panel-item">
                    <span class="label">油站出口1压力:</span>
                    <el-input class="input" readonly="readonly" value="0.5"></el-input>
                    <span class="unit">mPa</span>
                    <span class="label">油站出口2压力:</span>
                    <el-input class="input" readonly="readonly" value="0.5"></el-input>
                    <span class="unit">mPa</span>
                </div>
                <div class="panel-item">
                    <span class="label">油站出口3压力:</span>
                    <el-input class="input" readonly="readonly" value="0.5"></el-input>
                    <span class="unit">mPa</span>
                    <span class="label">油站出口4压力:</span>
                    <el-input class="input" readonly="readonly" value="0.5"></el-input>
                    <span class="unit">mPa</span>
                </div>
                <div class="panel-item">
                    <span class="label">润滑油出油流量:</span>
                    <el-input class="input" readonly="readonly" value="45"></el-input>
                    <span class="unit">m³/h</span>
                    <span class="label">润滑油回油流量:</span>
                    <el-input class="input" readonly="readonly" value="45"></el-input>
                    <span class="unit">m³/h</span>
                </div>
                <div class="panel-item">
                    <span class="label">润滑油压力1:</span>
                    <el-input class="input" readonly="readonly" value="45"></el-input>
                    <span class="unit">mPa</span>
                    <span class="label">润滑油压力2:</span>
                    <el-input class="input" readonly="readonly" value="30"></el-input>
                    <span class="unit">mPa</span>
                </div>
                <div class="panel-item">
                    <span class="label">冷冻水压力:</span>
                    <el-input class="input" readonly="readonly" value="45"></el-input>
                    <span class="unit">mPa</span>
                    <span class="label">冷冻水进口压力:</span>
                    <el-input class="input" readonly="readonly" value="30"></el-input>
                    <span class="unit">度</span>
                </div>
                <div class="panel-item" style="justify-content: flex-start;">
                    <span class="label">电机运行情况:</span>
                </div>
                <div class="panel-item">
                    <span class="label">1号电机运行:</span>
                    <el-input class="input" readonly="readonly" value="正常"></el-input>
                    <span class="label">2号电机运行:</span>
                    <el-input class="input" readonly="readonly" value="正常"></el-input>
                </div>
            </diagram-panel>
        </transition>

        <transition name="el-zoom-in-center">
            <diagram-panel :position="text10Pos" title="测功机状态" ref="text10Pos" v-show="showtext10" class="panel7">
                <div class="panel-item">
                    <span class="label">运行情况:</span>
                    <el-input class="input" readonly="readonly" value="正常"></el-input>
                    <span class="unit"></span>
                    <span class="label">扭矩:</span>
                    <el-input class="input" readonly="readonly" value="200"></el-input>
                    <span class="unit">kN·m</span>
                </div>
                <div class="panel-item">
                    <span class="label">转速:</span>
                    <el-input class="input" readonly="readonly" value="200"></el-input>
                    <span class="unit">r/min</span>
                    <span class="label">功率:</span>
                    <el-input class="input" readonly="readonly" value="500"></el-input>
                    <span class="unit">kW</span>
                </div>
                <div class="panel-item" style="justify-content: flex-start;">
                    <span class="label">温度情况:</span>
                </div>
                <div class="panel-item">
                    <span class="label">1支路:</span>
                    <el-input class="input" readonly="readonly" value="30°"></el-input>
                    <span class="label">2支路:</span>
                    <el-input class="input" readonly="readonly" value="30°"></el-input>
                </div>
                <div class="panel-item">
                    <span class="label">3支路:</span>
                    <el-input class="input" readonly="readonly" value="30°"></el-input>
                    <span class="label">4支路:</span>
                    <el-input class="input" readonly="readonly" value="30°"></el-input>
                </div>
                <div class="panel-item">
                    <span class="label">5支路:</span>
                    <el-input class="input" readonly="readonly" value="30°"></el-input>
                    <span class="label">6支路:</span>
                    <el-input class="input" readonly="readonly" value="30°"></el-input>
                </div>
            </diagram-panel>
        </transition>
    </div>
</template>

<script>
    import gridCircuitDiagram from "@/pages/home/topoGraphdiagram/js/gridCircuitDiagram"
    import DiagramPanel from '@/components/smallModule/DiagramPanel.vue';
    let diagram;
    export default {
        components: {
            DiagramPanel,
        },
        data() {
            return {
                text1Pos: [],
                text2Pos: [],
                text3Pos: [],
                text4Pos: [],
                text5Pos: [],
                text6Pos: [],
                text7Pos: [],
                text8Pos: [],
                text9Pos: [],
                text10Pos: [],
                showtext1: false,
                showtext2: false,
                showtext3: false,
                showtext4: false,
                showtext5: false,
                showtext6: false,
                showtext7: false,
                showtext8: false,
                showtext9: false,
                showtext10: false,
            }
        },
        methods: {
            setPanelPos() { //设置面板位置

                let text1 = diagram.getZoomTextInfo('text1');
                this.text1Pos = [];
                this.text1Pos = [text1.point[0], text1.point[1] + text1.height + 20];

                let text2 = diagram.getZoomTextInfo('text2');
                this.text2Pos = [];
                this.text2Pos = [text2.point[0], text2.point[1] + text2.height + 20];

                let text3 = diagram.getZoomTextInfo('text3');
                this.text3Pos = [];
                this.text3Pos = [text3.point[0], text3.point[1] + text3.height + 20];

                let text4 = diagram.getZoomTextInfo('text4');
                this.text4Pos = [];
                this.text4Pos = [text4.point[0], text4.point[1] + text4.height + 20];

                let text5 = diagram.getZoomTextInfo('text5');
                this.text5Pos = [];
                this.text5Pos = [text5.point[0] - 90, text5.point[1] - 260];

                let text6 = diagram.getZoomTextInfo('text6');
                this.text6Pos = [];
                this.text6Pos = [text6.point[0], text6.point[1] + text6.height + 20];

                let text7 = diagram.getZoomTextInfo('text7');
                this.text7Pos = [];
                this.text7Pos = [text7.point[0] - 420, text7.point[1] - 90];

                let text8 = diagram.getZoomTextInfo('text8');
                this.text8Pos = [];
                this.text8Pos = [text8.point[0] + 120, text8.point[1] - 90];

                let text9 = diagram.getZoomTextInfo('text9');
                this.text9Pos = [];
                this.text9Pos = [text9.point[0] + 120, text9.point[1] - 140];

                let text10 = diagram.getZoomTextInfo('text10');
                this.text10Pos = [];
                this.text10Pos = [text10.point[0] - 420, text10.point[1] - 120];
            }
        },
        mounted() {
            diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
            this.setPanelPos();
            window.addEventListener('resize', () => {
                this.setPanelPos();
            });
            diagram.stc.addEventListener('click', (e) => {
                let p = diagram.getEventPosition(e);
                let clickX = p.x;
                let clickY = p.y;
                console.log(diagram.options)
                diagram.options.map(item => {
                    if (item.method == "drawRadiusRect") {
                        let text = diagram.getZoomTextInfo(item.id);
                        let objLeft = text.point[0];
                        let objRight = text.point[0] + text.width;
                        let objTop = text.point[1];
                        let objBottom = text.point[1] + text.height;
                        // this['show' + item.id] = false;
                        if (clickX > objLeft && clickX < objRight && clickY > objTop && clickY <
                            objBottom) {
                            item.showPanel = !item.showPanel;
                            this['show' + item.id] = item.showPanel;
                        }
                    }
                })
            }, false)
        },
    }
</script>
@@ -40,4 +488,18 @@
        padding: 0;
        transform: translateY(-12px);
    }

    .panel7 .panel-item .label {
        width: 100px;
        text-align: right;
    }

    .panel7.panel8 .panel-item .label {
        width: 120px;
        text-align: right;
    }

    .panel7 .panel-item .unit {
        width: 40px;
    }
</style>

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

@@ -96,12 +96,13 @@
    })
    // 供水站
    let text14 = diagram.text({
        id: "text8",
        text: '供水站',
        baseline: 'middle',
        fillStyle: '#ffff18',
        fontSize: 16,
        point: [Image11.top[0] - 25, Image11.top[1] - 20],
        radBorder: true
        point: [Image11.top[0] - 25, Image11.top[1] - 30],
        radBorder: true,
        showPanel: false
    });

    let line16 = diagram.line({
@@ -132,12 +133,13 @@
    })
    // 供油站
    let text15 = diagram.text({
        id: "text9",
        text: '供油站',
        baseline: 'middle',
        fillStyle: '#ffff18',
        fontSize: 16,
        point: [Image12.top[0] - 25, Image12.top[1] - 20],
        radBorder: true
        point: [Image12.top[0] - 25, Image12.top[1] - 30],
        radBorder: true,
        showPanel: false
    });

    let line17 = diagram.line({
@@ -233,12 +235,14 @@

    // 5000KVA开关X1
    let text2 = diagram.text({
        id: 'text1',
        text: '5000KVA开关',
        baseline: 'middle',
        fillStyle: '#ffffff',
        fontSize: 14,
        point: [onOff1.line1[1][0] + 30, KVLine[0][1] - 30],
        radBorder: true
        radBorder: true,
        showPanel: false
    });

    return [KVLine[0][0], KVLine[0][1] + 3.5];
@@ -277,13 +281,13 @@

    // 3200KVA开关
    let text4 = diagram.text({
        id: 'text2',
        text: '3200KVA开关&     1250A',
        baseline: 'top',
        textAlign: 'center',
        fillStyle: '#ffffff',
        fontSize: 14,
        point: [onOff2.line1[1][0] + 30, onOff2.line1[1][1]],
        radBorder: true
        radBorder: true,
        showPanel: false
    });

    let line5 = diagram.line({
@@ -317,24 +321,24 @@

    // 3200KVA开关
    let text5 = diagram.text({
        id: 'text3',
        text: '3200KVA开关&     1250A',
        baseline: 'top',
        textAlign: 'center',
        fillStyle: '#ffffff',
        fontSize: 14,
        point: [onOff3.line1[1][0] - 140, onOff3.line1[1][1]],
        radBorder: true
        radBorder: true,
        showPanel: false
    });

    // 大功率整流电源
    let text3 = diagram.text({
        id: "text4",
        text: '大功率整流电源',
        baseline: 'top',
        textAlign: 'center',
        fillStyle: '#ffffff',
        fontSize: 14,
        point: [line4[1][0] - 90, line4[1][1] + 10],
        radBorder: true
        radBorder: true,
        showPanel: false
    });

    let Image2 = diagram.drawImage({
@@ -357,13 +361,13 @@

    // 直流主配电板
    let text6 = diagram.text({
        id: "text5",
        text: '直流主配电板',
        baseline: 'top',
        textAlign: 'center',
        fillStyle: '#ffffff',
        fontSize: 14,
        point: [line7[1][0] - 40, line7[1][1] + 10],
        radBorder: true
        radBorder: true,
        showPanel: false
    });

    let Image3 = diagram.drawImage({
@@ -481,13 +485,13 @@

    // 测功机
    let text10 = diagram.text({
        id: 'text10',
        text: '测功机',
        baseline: 'top',
        textAlign: 'center',
        fillStyle: '#ffffff',
        fontSize: 14,
        point: [Image8.top[0] - 20, Image8.top[1] - 22],
        radBorder: true
        radBorder: true,
        showPanel: false
    });

    let line12 = diagram.line({
@@ -510,13 +514,13 @@

    // AFE变频驱动柜
    let text11 = diagram.text({
        id: 'text7',
        text: 'AFE变频驱动柜',
        baseline: 'top',
        textAlign: 'center',
        fillStyle: '#ffffff',
        fontSize: 14,
        point: [Image9.top[0] - 42, Image9.top[1] - 22],
        radBorder: true
        radBorder: true,
        showPanel: false,
    });

    let line13 = diagram.line({
@@ -579,13 +583,13 @@

    // 5200KVA开关
    let text13 = diagram.text({
        id: "text6",
        text: '5200KVA开关&     1250A',
        baseline: 'top',
        textAlign: 'center',
        fillStyle: '#ffffff',
        fontSize: 14,
        point: [onOff4.arc1.left[0] - 130, onOff4.arc1.left[1] - 9],
        radBorder: true
        radBorder: true,
        showPanel: false,
    });
}


 src/router/routes.js

@@ -10,6 +10,7 @@
    path: '/index',
    name: 'index',
    meta: {},
    redirect: '/index/topoGraph',
    component: (resolve) => require(['@/pages/index.vue'], resolve),
    children: [{ //系统拓扑图
        path: 'topoGraph',