首页拓扑图添加信息框

whyczyk

2021-04-08 ee73d1d4a77cd20683789902e97a1f5a3171dadb

 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>