|
@@ -0,0 +1,310 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="fileBox">
|
|
|
+ <div>
|
|
|
+ <span style="border-right: 1px solid black;padding-right: 200px;">基准文件:{{ chicken }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>对比文件:{{ kun }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mapBox">
|
|
|
+ <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">
|
|
|
+ <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">
|
|
|
+ <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">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { ref, onMounted, toRefs, watch, onBeforeUnmount } from 'vue';
|
|
|
+import LeaderLine from '../../../../public/leader-line.min.js';
|
|
|
+import scdCheck from '@/api/scdCheck/scdCheck'
|
|
|
+import image from "../utils/image"
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ antherBack: {
|
|
|
+ type: Array,
|
|
|
+ required: true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ setup(props, { emit }) {
|
|
|
+ let arrNew = ref([])
|
|
|
+ let chicken = ref('')
|
|
|
+ let kun = ref('')
|
|
|
+ let lineList = []//线条显示
|
|
|
+ watch(() => props.antherBack, (newVal) => {
|
|
|
+ arrNew.value = newVal//监听传递数据变化
|
|
|
+ if (arrNew.value.length == 1) {
|
|
|
+ chicken.value = arrNew.value[0].scd_name
|
|
|
+ }
|
|
|
+ if (arrNew.value.length == 2) {
|
|
|
+ chicken.value = arrNew.value[0].scd_name
|
|
|
+ kun.value = arrNew.value[1].scd_name
|
|
|
+ }
|
|
|
+ })
|
|
|
+ function lastList() {//初始化数据
|
|
|
+ arrNew.value = props.antherBack
|
|
|
+ if (arrNew.value.length == 1) {
|
|
|
+ chicken.value = arrNew.value[0].scd_name
|
|
|
+ }
|
|
|
+ if (arrNew.value.length == 2) {
|
|
|
+ chicken.value = arrNew.value[0].scd_name
|
|
|
+ kun.value = arrNew.value[1].scd_name
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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
|
|
|
+ }))
|
|
|
+ }
|
|
|
+ onMounted(() => {
|
|
|
+ lastList()
|
|
|
+ // lineWrite()
|
|
|
+ setTimeout(()=>{
|
|
|
+ lineWrite()
|
|
|
+ },1000)
|
|
|
+ })
|
|
|
+ onBeforeUnmount(() => {
|
|
|
+ lineList.forEach(line => line.remove());//清除连线
|
|
|
+ })
|
|
|
+ return {
|
|
|
+ chicken,//基准文件
|
|
|
+ kun,//对比文件
|
|
|
+ arrNew,//传递数组
|
|
|
+ lastList,//初始化数据
|
|
|
+ lineList,//线条显示
|
|
|
+ lineWrite,//画线函数
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+p {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.fileBox {
|
|
|
+ width: 90%;
|
|
|
+ height: calc(100vh - 900px);
|
|
|
+ background-color: white;
|
|
|
+ margin: 10px auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.mapBox {
|
|
|
+ width: 90%;
|
|
|
+ height: calc(100vh - 350px);
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.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: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+#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>
|