scd_tools_ui/src/pages/netStructPicture/components/Gsix.vue

<template>
    <div class="bigBox" id="bigBox">
        <div id="leftBox">
            <!-- 左左 -->
            <div id="topLeft">
                <div id="goose">
                    <img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/squer.png"
                        alt="">
                    <p class="overp" style="">{{ iedName }}</p>
                </div>
            </div>
            <!-- 左中 -->
            <div id="mainLeft">
                <div class="mainDiv" id="mainOne">
                    <img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/goose.png"
                        alt="">
                    <p>GOOSE通信参数</p>
                </div>
                <div class="mainDiv" id="mainTwo">
                    <img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/goose.png"
                        alt="">
                    <p>GOOSE通信参数</p>
                    <img class="iconImg" :src="checkType('gai')" alt="">
                </div>
                <div class="mainDiv" id="mainThree">
                    <img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/goose.png"
                        alt="">
                    <p>GOOSE通信参数</p>
                    <img class="iconImg" :src="checkType('shan')" alt="">
                </div>
            </div>
            <!-- 左右 -->
            <div id="botLeft">
                <div class="botDiv" id="botOne">
                    <img src="../../../assets/icon/editIp.png" alt="">
                    <p>123.11.1</p>
                </div>
                <div class="botDiv" id="botTwo">
                    <img src="../../../assets/icon/terIp.png" alt="">
                    <p>255.255.255.0</p>
                </div>
                <div class="botDiv" id="botThree">
                    <img src="../../../assets/icon/luIp.png" alt="">
                    <p>SKT</p>
                </div>
            </div>
        </div>
        <div id="rightBox">
            <!-- 右左 -->
            <div id="topRight">
                <div class="tightDiv" id="ditOne">
                    <img src="../../../assets/icon/editIp.png" alt="">
                    <p>123.11.2</p>
                </div>
                <div class="tightDiv" id="ditTwo">
                    <img src="../../../assets/icon/editIp.png" alt="">
                    <p>255.255.255.1</p>
                </div>
                <div class="tightDiv" id="ditThree">
                    <img src="../../../assets/icon/editIp.png" alt="">
                    <p>SKY</p>
                </div>
                <div class="tightDiv1" id="ditFour">
                    <img src="../../../assets/icon/macIp.png" alt="">
                    <p>1231698168798</p>
                </div>
                <div class="tightDiv1" id="ditFive">
                    <img src="../../../assets/icon/VLAN-ID.png" alt="">
                    <p>98615</p>
                </div>
            </div>
            <!-- 右中 -->
            <div id="mainRight">
                <div class="tightMain" id="fitOne">
                    <img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/goose.png"
                        alt="">
                    <p>GOOSE通信参数1</p>
                </div>
                <div class="tightMain" id="fitTwo">
                    <img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/goose.png"
                        alt="">
                    <p>GOOSE通信参数2</p>
                </div>
                <div class="tightMain" id="fitThree">
                    <img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/goose.png"
                        alt="">
                    <p>GOOSE通信参数3</p>
                </div>
            </div>
            <!-- 右右 -->
            <div id="botRight">
                <div id="upFile">
                    <img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/squer.png"
                        alt="">
                    <p class="" style="">{{ antherName }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, watch, onBeforeUnmount } from 'vue'
import LeaderLine from "../../../../public/leader-line.min.js"
import delSz from '@/assets/icon/shan.png'
import editSz from "@/assets/icon/gai.png"
import addSz from '@/assets/icon/zeng.png'
import G6 from '@antv/g6';
export default {
    props: {
        activeName: {
            type: String,
            required: true
        },
        activeNav: {
            type: Number,
            required: true
        },
        backName: {
            type: String,
            required: true
        },
        mustVal: {
            type: Boolean,
            required: true
        },
        arrName: {
            type: String,
            required: true
        },
        upName: {
            type: String,
            required: true
        }
    },
    setup(props, { emit }) {
        let leaderLines = [];//控制线条显示
        let iedName = ref('')
        let antherName = ref('')
        watch(() => props.backName, (newVal) => {
            iedName.value = newVal
        })
        watch(() => props.upName, (newVal) => {
            antherName.value = newVal
        })
        // 判断增删改角标
        function checkType(type) {
            if (type == 'zeng') {
                return addSz
            } else if (type == 'gai') {
                return editSz
            } else if (type == 'shan') {
                return delSz
            }
        }
        onMounted(() => {
            iedName.value = props.backName
            antherName.value = props.upName
            let goose = document.getElementById('goose')//左盒子开始元素
            let mainOne = document.getElementById('mainOne')//左盒子中部上半区元素
            let mainTwo = document.getElementById('mainTwo')//左盒子中部中间元素
            let mainThree = document.getElementById('mainThree')//左盒子中部下半区元素
            let botOne = document.getElementById('botOne')//左盒子右部上半
            let botTwo = document.getElementById('botTwo')//左盒子右部中间
            let botThree = document.getElementById('botThree')//左盒子右部下半
            let upFile = document.getElementById('upFile')//右盒子开始元素
            let ditOne = document.getElementById('ditOne')//右盒子左侧上方
            let ditTwo = document.getElementById('ditTwo')//右盒子左侧中部
            let ditThree = document.getElementById('ditThree')//右盒子左侧下方
            let ditFive = document.getElementById('ditFive')
            let ditFour = document.getElementById('ditFour')
            let fitOne = document.getElementById("fitOne")//右盒子中部上方
            let fitTwo = document.getElementById("fitTwo")//右盒子中部中部
            let fitThree = document.getElementById("fitThree")//右盒子中部下方
            // 连线开始文字startLabel: "开始",
            // 连线中间文字middleLabel: "中间",
            // 连线结束文字endLabel: "结束",
            // 左部分连线
            leaderLines.push(new LeaderLine(goose, mainOne, { color: 'gray', size: 2, path: "grid" }))//左连中
            leaderLines.push(new LeaderLine(goose, mainTwo, { color: 'gray', size: 2, path: "grid" }))//左连中
            leaderLines.push(new LeaderLine(goose, mainThree, { color: 'gray', size: 2, path: "grid" }))//左连中
            leaderLines.push(new LeaderLine(mainTwo, botOne, { color: 'orange', size: 2, path: "grid", endLabel: "装置IP", startSocket: "center", }))//中连右
            leaderLines.push(new LeaderLine(mainTwo, botTwo, { color: 'orange', size: 2, path: "grid", endLabel: "掩码", startLabel: "修改" }))//中连右
            leaderLines.push(new LeaderLine(mainTwo, botThree, { color: 'orange', size: 2, path: "grid", endLabel: '网关' }))//中连右
            // 右部分连线
            leaderLines.push(new LeaderLine(upFile, fitOne, { color: 'gray', size: 2, path: "grid" }))//右连中
            leaderLines.push(new LeaderLine(upFile, fitTwo, { color: 'gray', size: 2, path: "grid" }))//右连中
            leaderLines.push(new LeaderLine(upFile, fitThree, { color: 'gray', size: 2, path: "grid" }))//右连中
            leaderLines.push(new LeaderLine(fitTwo, ditOne, { color: 'orange', size: 2, path: "grid" }))//中连左
            leaderLines.push(new LeaderLine(fitTwo, ditTwo, { color: 'orange', size: 2, path: "grid" }))//中连左
            leaderLines.push(new LeaderLine(fitTwo, ditThree, { color: 'orange', size: 2, path: "grid" }))//中连左
            leaderLines.push(new LeaderLine(fitThree, ditFive, { color: 'red', size: 2, path: "grid", startLabel: "删除" }))//中连左
            leaderLines.push(new LeaderLine(fitThree, ditFour, { color: 'red', size: 2, path: "grid" }))//中连左
            leaderLines.push(new LeaderLine(mainThree, ditFour, { color: 'red', size: 2, path: "grid", startLabel: "删除", endLabel: "MAC地址" }))//中连左
            leaderLines.push(new LeaderLine(mainThree, ditFive, { color: 'red', size: 2, path: "grid", endLabel: "VLAN-IP" }))//中连左
            //  公共连线
            // 连线开始点样式 
            // disc 圆形 , square 方形 , arrow1 箭头1 , arrow2 箭头2 , arrow3 箭头3 , 
            // hand 手指 , crosshair 十字准线 , behind 无（默认）
            /*
            以下为示例
            */
            // leaderLines.push(new LeaderLine(mainTwo, fitTwo, {
            //     color: "orange",//连接线颜色
            //     size: 10,//连接线宽度
            //     path: "grid",//连接线样式
            //     startSocket: "bottom",//开始链接元素位置
            //     endSocket: "bottom",//结束链接元素位置
            //     dash: {
            //         // 绘制线的长度 'auto'=size*2
            //         len: 1,
            //         // 绘制线之间的间隙 'auto'=size
            //         gap: 6,
            //         // 线条滚动 true 是(或者{duration: 1000, timing: 'linear'}，详见动画选项)， false 否（默认）
            //         animation: {
            //             duration: 800,//动画速度
            //             timing: "linear",
            //         },
            //     },//动画开启
            //     endPlug: 'arrow3',//结束箭头
            //     endPlugSize: 0.5,//结束箭头size
            // }))



        })
        onBeforeUnmount(() => {
            leaderLines.forEach(line => line.remove());//清除连线
        })
        return {
            iedName,
            checkType,
            antherName,
        }
    }
}
</script>

<style  scoped>
p,
h1,
h2 {
    padding: 0;
    margin: 0;
}

p,
h2 {
    font-size: 12px;
}

.bigBox {
    width: 99%;
    height: 96%;
    margin-left: 10px;
    /* border: 1px solid red; */
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#leftBox {
    width: 50%;
    height: 100%;
    /* border: 1px solid green; */
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#topLeft {
    width: 23%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#mainLeft {
    width: 23%;
    height: 100%;
    text-align: center;
    display: grid;
    place-items: center;
}

#botLeft {
    width: 53%;
    height: 100%;
}

/* ↓ */
#rightBox {
    width: 50%;
    height: 100%;
    /* border: 1px solid blue; */
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#puBox {
    width: 50%;
    height: 100%;
    /* border: 1px solid blue; */
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#topRight {
    width: 53%;
    height: 100%;
    /* border: 1px solid red; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#mainRight {
    width: 23%;
    height: 100%;
    /* border: 1px solid red; */
    text-align: center;
    display: grid;
    place-items: center;
}

#botRight {
    width: 23%;
    height: 100%;
    /* border: 1px solid red; */
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* ↑ */
#goose {
    width: 80px;
    height: 100px;
    text-align: center;
}

#upFile {
    width: 80px;
    height: 100px;
    text-align: center;
}

.mainDiv {
    width: 90px;
    height: 100px;
    text-align: center;
    position: relative;
}

.tightMain {
    width: 90px;
    height: 100px;
    text-align: center;
}

.botDiv {
    width: 180px;
    height: 60px;
    border: 1px dashed orange;
    border-right: none;
    margin-left: auto;
    /* 将子元素推向右侧 */
    margin-top: 20px;
    background-color: #FAF6F3;
    text-align: center;
}

.tightDiv {
    width: 180px;
    height: 60px;
    border: 1px dashed orange;
    border-left: none;
    margin-right: auto;
    /* 将子元素推向右侧 */
    margin-top: 20px;
    background-color: #FAF6F3;
    text-align: center;
}

.tightDiv1 {
    width: 80px;
    height: 60px;
    border: 1px dashed red;
    /* border-left: none; */
    margin-right: auto;
    /* 将子元素推向右侧 */
    margin-top: 20px;
    background-color: #FAF6F3;
    text-align: center;
}

#botLeft {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.overp {
    width: 90px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.overp:hover {
    overflow: visible;
}

.iconImg {
    position: absolute;
    top: -5px;
    right: 0px;
}</style>