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

<template>
    <div style="display: flex;justify-content: space-around; align-items: center;">
        <div class="scdBox">
            <div>
                <img src="../../../assets/image/squer_scd.png" alt="">
                <p>SCD版本</p>
            </div>
            <div>
                <div id="oldScd">
                    <img src="../../../assets/icon/cilce_gray.png" alt="">
                    <span>V1.1.0</span>
                </div>
                <div id="newScd">
                    <img src="../../../assets/icon/clice_blue.png" alt="">
                    <span>V1.1.1</span>
                </div>
            </div>
        </div>
        <div class="crcBox">
            <div>
                <img src="../../../assets/image/squer_crc.png" alt="">
                <p>CRC</p>
            </div>
            <div>
                <div id="oldCrc">
                    <img src="../../../assets/icon/cilce_gray.png" alt="">
                    <span>1000000111100000</span>
                </div>
                <div id="newCrc">
                    <img src="../../../assets/icon/clice_blue.png" alt="">
                    <span>1000000111100022</span>
                </div>
            </div>
        </div>
        <div class="iedBox">
            <div id="oldIed">
                <img src="../../../assets/image/squer_ied.png" alt="">
                <p>IED</p>
            </div>
            <div id="newIed">
                <p id="addId" @click="lookAdd">
                    <el-icon style="color: #1D48E8;font-size: 18px;display: block;">
                        <CirclePlus />
                    </el-icon>
                    <span style="display: block;color: #1D48E8;">新增(5)</span>
                </p>
                <p id="editId" @click="lookEdit">
                    <el-icon style="color: #FECC2A;font-size: 18px;display: block;">
                        <EditPen />
                    </el-icon>
                    <span style="display: block;color: #FECC2A;">修改(10)</span>
                </p>
                <p id="delId" @click="lookDel">
                    <el-icon style="color: red;font-size: 18px;display: block;">
                        <Delete />
                    </el-icon>
                    <span style="display: block;color: red;">删除(2)</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, toRefs, watch, onBeforeUnmount } from 'vue';
import LeaderLine from '../../../../public/leader-line.min.js';
export default {
    setup(props,{emit}) {
        let lineList = []
        let lookType = ref(0)
        function lineWrite() {
            let oldScd = document.getElementById("oldScd")
            let newScd = document.getElementById("newScd")
            let oldCrc = document.getElementById("oldCrc")
            let newCrc = document.getElementById("newCrc")
            let oldIed = document.getElementById("oldIed")
            let newIed = document.getElementById("newIed")
            let addId = document.getElementById("addId")
            let editId = document.getElementById('editId')
            let delId = document.getElementById("delId")
            lineList.push(new LeaderLine(oldScd, newScd, {
                color: "blue",//连接线颜色
                size: 10,//连接线宽度
                path: "straight",//连接线样式
                startSocket: "bottom",//开始链接元素位置
                endSocket: "top",//结束链接元素位置
                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
            }))
            lineList.push(new LeaderLine(oldCrc, newCrc, {
                color: "blue",//连接线颜色
                size: 10,//连接线宽度
                path: "straight",//连接线样式
                startSocket: "bottom",//开始链接元素位置
                endSocket: "top",//结束链接元素位置
                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
            }))
            lineList.push(new LeaderLine(oldIed, addId, {
                color: "gray",//连接线颜色
                size: 2,//连接线宽度
                path: "grid",//连接线样式
                startSocket: "bottom",//开始链接元素位置
                endSocket: "left",//结束链接元素位置
                endPlug: 'disc',//结束箭头
                endPlugSize: 2,//结束箭头size
            }))
            lineList.push(new LeaderLine(oldIed, editId, {
                color: "gray",//连接线颜色
                size: 2,//连接线宽度
                path: "grid",//连接线样式
                startSocket: "bottom",//开始链接元素位置
                endSocket: "left",//结束链接元素位置
                endPlug: 'disc',//结束箭头
                endPlugSize: 2,//结束箭头size
            }))
            lineList.push(new LeaderLine(oldIed, delId, {
                color: "gray",//连接线颜色
                size: 2,//连接线宽度
                path: "grid",//连接线样式
                startSocket: "bottom",//开始链接元素位置
                endSocket: "left",//结束链接元素位置
                endPlug: 'disc',//结束箭头
                endPlugSize: 2,//结束箭头size
            }))
        }
        function lookAdd() {
            lookType.value = 1
            emit('nowBack',lookType.value)
        }
        function lookEdit() {
            lookType.value = 2
            emit('nowBack',lookType.value)
        }
        function lookDel() {
            lookType.value = 3
            emit('nowBack',lookType.value)
        }
        onMounted(()=>{
            setTimeout(()=>{
                lineWrite()
            },1500)
        })
        onBeforeUnmount(()=>{
            lineList.forEach(item=>item.remove())
        })
        return {
            lineWrite,
            lineList,
            lookType,
            lookAdd,//查看新增
            lookDel,//查看删除
            lookEdit,//查看修改
        }
    }
}
</script>

<style>
p {
    margin: 0;
    padding: 0;
}
.scdBox {
    width: 33%;
    height: auto;
    text-align: center;
    /* border: 1px solid red; */
}

.crcBox {
    width: 33%;
    height: auto;
    text-align: center;
    /* border: 1px solid red; */
}

.iedBox {
    width: 33%;
    height: auto;
    text-align: center;
    /* border: 1px solid red; */
    position: relative;
}
#newIed {
    position: absolute;
    top: 100px;
    right: -10px;
}

#oldScd {
    margin-bottom: 40px;
}

#oldCrc {
    margin-bottom: 40px;
}

#addId {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 112px;
    height: 40px;
    border: 1px dashed #1D48E8;
    background-color: rgb(239, 243, 255);
    border-radius: 5px;
    margin-bottom: 20px;
    cursor: pointer;
}

#editId {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 112px;
    height: 40px;
    border: 1px dashed #FECC2A;
    background-color: rgb(255, 251, 242);
    border-radius: 5px;
    margin-bottom: 20px;
    cursor: pointer;
}

#delId {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 112px;
    height: 40px;
    border: 1px dashed red;
    background-color: rgb(255, 236, 236);
    border-radius: 5px;
    margin-bottom: 20px;
    cursor: pointer;
}
</style>