scd文件一致性 校核点击修改后线条不显示的问题，修改bug

src/pages/netStructPicture/components/CidTree.vue

@@ -53,7 +53,9 @@
               node.label
             }}</span
             ><span
-              :class="{ 'tree-label': clickItemcode == data.itemcode&&!node.expanded}"
+              :class="{
+                'tree-label': clickItemcode == data.itemcode && !node.expanded,
+              }"
               style="position: absolute; right: 10px"
               ><span v-if="OpensclTrue">{{ data.num }}</span
               ><span v-else>{{ data.num }}</span></span
@@ -250,12 +252,18 @@ const updateNum = (treeNode, data) => {
   for (let node of treeNode) {
     node.num = 0;
     // 检查当前节点的 itemcode 是否在 data 中
-    if (data && data.hasOwnProperty(node.itemcode)) {
-      node.num = parseInt(data[node.itemcode]);
-    }
-    if (data && node.itemcode == "scd.ied.Relation" && data["scd.ied.ExtRef"]) {
-      node.num = parseInt(data["scd.ied.ExtRef"]);
+    if (data) {
+      if (data.hasOwnProperty(node.itemcode)) {
+        node.num = parseInt(data[node.itemcode]);
+      }
+      if (node.itemcode == "scd.ied.Relation" && data["scd.ied.ExtRef"]) {
+        node.num = parseInt(data["scd.ied.ExtRef"]);
+      }
+      if (node.itemcode == "scd.ied" || node.itemcode == "ied") {
+        node.num = 1;
+      }
     }
+
     // 如果当前节点有子节点，递归处理子节点
     if (node.children) {
       updateNum(node.children, data);
@@ -446,8 +454,6 @@ watch(
   (newValue) => {
     if (newValue) {
       clickRow.value = newValue;
-      console.log("clickRow.value", props.iedRelation);
-
       // clickTage.value
     }
   }
@@ -466,7 +472,6 @@ const timer = ref(null);
 const startCounting = (nametips, item, index) => {
   timer.value = setTimeout(() => {
     istooltip.value = true;
-    console.log("index", index);
     showFullNameIndex.value = index;
     nametip.value = nametips;
   }, 1500);
@@ -556,7 +561,7 @@ h3 {
   }
   :deep(
       .el-tree--highlight-current
-      .el-tree-node__children
+        .el-tree-node__children
         .el-tree-node.is-current
         > .el-tree-node__content
         .label

src/pages/netStructPicture/components/Gsix.vue

@@ -47,7 +47,7 @@ const props = defineProps({
 });
 
 const clickRow = ref(props.clickRowDatas);
-let tagList = ref(props.clickList?props.clickList:''); //左侧更改的设备列表
+let tagList = ref(props.clickList ? props.clickList : ""); //左侧更改的设备列表
 
 //CID数据，点击差异的每一条数据
 const CodeInfoCid = ref(props.clickCodeInfoCid);
@@ -89,7 +89,7 @@ watch(
     if (newValue) {
       dones();
       tagList.value = newValue;
-      console.log(' tagList.value3333',  tagList.value)
+      cClickCode.value = "";
       clickLineResult();
       clickLineResultMain();
       if (clickRow.value && clickRow.value.id) {
@@ -180,7 +180,7 @@ const getData = async () => {
   if (res.data && cClickCode.value != "scd.ied") {
     res.data.forEach((item) => {
       let text;
-      if(!item.diff_desc) return;
+      if (!item.diff_desc) return;
       text = item.diff_desc.replace(/[\r|\n|\t]/g, ""); //处理返回的数据中换行等，整理好规整数据
       item.diff_desc = JSON.parse(text);
       commonGetData(item);
@@ -422,28 +422,38 @@ const clickUpTypeImgUpAdd = (arr, event) => {
 const setTopDiffName = (event) => {
   const dom1Rect = rightStartDom.value.getBoundingClientRect();
   const dom2Rect = leftStartDom.value.getBoundingClientRect();
+  console.log("rightStartDom.value", rightStartDom.value, leftStartDom.value);
   //设置差异位置
   nextTick(() => {
     const evt = event.target.getBoundingClientRect();
-    let keyCount = newrightData.value
-      ? Object.keys(newrightData.value).length
-      : 0;
-    let keyCount2 = newleftData.value
-      ? Object.keys(newleftData.value).length
-      : 0;
-    if ((keyCount > 0 && keyCount < 3) || (keyCount > 1 && keyCount2 < 0)) {
-      const nums = evt.top - dom2Rect.top + 160 + "px";
-      const numsR = evt.top - dom1Rect.top + 160 + "px";
-      addDiff.value.style.top = nums;
-      delDiff.value.style.top = numsR;
-      middleMain.value.style.top = nums;
+    // 如果 newrightData 为真值（即不为 null、undefined、0、""、NaN 或 false），则使用 newrightData；否则使用一个空对象 {}。
+    // 如果 newrightData 不存在或者不是对象，则返回 0
+    const keyCount = Object.keys(newrightData.value || {}).length;
+    const keyCount2 = Object.keys(newleftData.value || {}).length;
+    const LeftChild = Object.keys(IorDClick.value || {}).length; //新增或修改点击
+    const RightChild = Object.keys(DelClick.value || {}).length; //点击删除点击
+    let topOffset = evt.top - dom2Rect.top;
+    let topOffsetR = evt.top - dom1Rect.top;
+    let offsetIncrease = 160;
+    if (
+      (keyCount > 0 && keyCount2 < 3) ||
+      (keyCount > 1 && keyCount2 < 1) ||
+      CommunicationS1.value.length == 1
+    ) {
+      offsetIncrease = 160;
     } else {
-      const nums2 = evt.top - dom2Rect.top + 60 + "px";
-      const numsR = evt.top - dom1Rect.top + 60 + "px";
-      addDiff.value.style.top = nums2;
-      delDiff.value.style.top = numsR;
-      middleMain.value.style.top = nums2;
+      offsetIncrease = 60;
+    }
+    if (LeftChild <= 3&&RightChild==0||RightChild <= 3&&LeftChild==0) {
+      offsetIncrease = 160;
     }
+    topOffset += offsetIncrease;
+    topOffsetR += offsetIncrease;
+    const nums = topOffset + "px";
+    const numsR = topOffsetR + "px";
+    addDiff.value.style.top = nums;
+    delDiff.value.style.top = numsR;
+    middleMain.value.style.top = nums;
   });
 };
 const newleftDataMiddle = ref(null); //处理修改居中展示的数据
@@ -822,6 +832,7 @@ const setLeaderlines = (types) => {
             hiddenLine2();
           }
           if (typeof key3 == "string" && key3.includes("add") && key3 == key2) {
+            LeaderLine.positionByWindowResize = false;
             let line4; //从左往右的线条
             line4 = new LeaderLine(value3, value2, lineStyleAdd);
             leaderLineShow.value.push(line4);
@@ -1527,12 +1538,14 @@ onMounted(() => {
 .middle-type-text {
   border: 1px solid #ffa011;
   color: #ffa011;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  // display: flex;
+  // align-items: center;
+  // justify-content: center;
   margin-bottom: 45px;
-  width: 120px;
-  height: 23px;
+  width: 110px;
+  height: auto;
+  padding: 2px 4px;
+  text-align: center;
   word-wrap: break-word;
 }
 .right-difference {

src/pages/netStructPicture/components/ScdNow.vue

@@ -60,15 +60,15 @@
           <p>IED</p>
         </div>
         <div id="newIed" v-if="iedVer">
-          <p id="addId" @click="lookAdd(iedVer.i?iedVer.i.list:[])">
+          <p id="addId" @click="lookAdd(iedVer.i?iedVer.i.list:null)">
             <img :src="newlyPng" alt="" class="icons" />
             <span style="color: #134bea">新增({{ iedVer.i?iedVer.i.list.length:0 }})</span>
           </p>
-          <p id="editId" @click="lookEdit(iedVer.u?iedVer.u.list:[])">
+          <p id="editId" @click="lookEdit(iedVer.u?iedVer.u.list:null)">
             <img :src="modifyPng" alt="" class="icons" />
             <span style="color: #ffcb11">修改({{ iedVer.u?iedVer.u.list.length:0 }})</span>
           </p>
-          <p id="delId" @click="lookDel(iedVer.d?iedVer.d.list:[])">
+          <p id="delId" @click="lookDel(iedVer.d?iedVer.d.list:null)">
             <img :src="delPng" alt="" class="icons" />
             <span style="color: #e50505">删除({{ iedVer.d?iedVer.d.list.length:0 }})</span>
           </p>
@@ -253,7 +253,7 @@ const iedRelationData = ref({}); //左侧所有数据
 const scdView = ref(false); //是否是点击Scd文件一致性校核进入的
 const delScdId = ref(""); //点击删除的scd_id
 const lookAddOrDel = async (comData, del) => {
-  if(!comData||!comData.length) return;
+  if(!comData) return;
   iedRelationData.value = {};
   checkDialogData.value = null;
   scdView.value = true;
@@ -279,7 +279,7 @@ const lookAddOrDel = async (comData, del) => {
     recordDelIedVer.value = iedVer.value&&iedVer.value.d ? iedVer.value.d.list : null;
   }
   // 对键进行排序===
-  // if (del != "edit") {
+  if (del != "edit") {
     if(!comData[0]) return;
   const iedRes = await scdIedRelation({
     scd_id: delScdId.value,
@@ -287,7 +287,7 @@ const lookAddOrDel = async (comData, del) => {
     reset: 1,
   });
   checkDialogData.value = iedRes&&iedRes.data ? iedRes.data[comData[0].ied_name] : null;
-  if (del != "edit") {
+  // if (del != "edit") {
     openBig.value = true;
   }
 };

src/pages/netStructPicture/components/SclUpdate.vue

@@ -124,7 +124,7 @@ onMounted(() => {});
           <div class="abBox">
             <div>
               <span style="border-right: 1px solid #516380; padding-right: 30px"
-                >基准文件:{{ checkDialogData }}
+                >基准文件:
                 <span style="color: #09162c">{{ newChicken }}</span></span
               >
             </div>

src/pages/netStructPicture/components/basicInfo.vue

@@ -255,7 +255,7 @@
         </div>
       </div>
     </div>
-    <div id="wrappers"></div>
+    <div id="wrappersBasic"></div>
     <!-- 点击头部的弹框 -->
     <el-dialog
       @close="cancelClickNav"
@@ -469,7 +469,7 @@ const getMainList = async () => {
 };
 //弹窗打开后使得线条在指定区域中
 const hiddenLine2 = () => {
-  const elmWrapper = document.getElementById("wrappers");
+  const elmWrapper = document.getElementById("wrappersBasic");
   if(!elmWrapper) return;
   // 移动 line
   document.body.querySelectorAll("body .leader-line").forEach((node) => {
@@ -669,9 +669,9 @@ watch(
   }
 );
 const removeLine2 = () => {
-  const elmWrapper = document.getElementById("wrappers");
+  const elmWrapper = document.getElementById("wrappersBasic");
   if (elmWrapper) {
-    document.body.querySelectorAll("#wrappers .leader-line").forEach((node) => {
+    document.body.querySelectorAll("#wrappersBasic .leader-line").forEach((node) => {
       elmWrapper.removeChild(node);
     });
   }

src/pages/netStructPicture/components/dialogIndex.vue

@@ -172,6 +172,9 @@ const cancelClick = () => {
   activeLeft.value = null;
   checkData.value = null;
   isScdView.value = false;
+  activeNav.value = 0;
+  activeNavName.value = relationShip;
+  inoutName.value = relationShip;
   emit("done", false);
 };
 const activeNav = ref(0);

src/pages/netStructPicture/components/inoutControl.vue

@@ -100,7 +100,7 @@
           </div>
         </div>
       </div>
-      <div id="wrapper"></div>
+      <div id="wrapperInoutC"></div>
     </div>
     <div v-if="tabValue != 'photo'">
       <inoutSendOrRv
@@ -110,6 +110,7 @@
         :delScdId="delScdId"
       ></inoutSendOrRv>
     </div>
+    <!-- 点击数字的弹框 -->
     <inoutDialog
       :circleOpen="circleOpen"
       :listData2="listData2"
@@ -356,7 +357,7 @@ const dilogTitie = ref(null); //输入的标题等数据
 const titleUnusual = ref("input"); //区分点击输入还是输出
 //统一调整数据圆圈的显示位置
 const moveNumerCircePositon=()=>{
-  const lineWrapper = document.getElementById('wrapper');
+  const lineWrapper = document.getElementById('wrapperInoutC');
   if(!lineWrapper) return;
   let svgs = lineWrapper.getElementsByClassName('leader-line')
   let numbers = lineWrapper.getElementsByClassName('circel-name')
@@ -393,7 +394,7 @@ const moveNumerCircePositon=()=>{
 //圆圈未知的设置
 // numnerValue
 const circelSet = (colors, numnerValue, posit, keys, startDom, keyMiddle, mark) => {
-  let elmButton = document.getElementById('wrapper').appendChild(document.createElement("div"));
+  let elmButton = document.getElementById('wrapperInoutC').appendChild(document.createElement("div"));
   // 阻止点击事件冒泡
   elmButton.addEventListener("click", async (event) => {
     event.stopPropagation();
@@ -463,7 +464,7 @@ const setLeaderline2 = () => {
     numerCirce[i].parentNode.removeChild(numerCirce[i]);
   }
   //清除原有的SVG元素
-  const lines  =document.getElementById('wrapper')
+  const lines  =document.getElementById('wrapperInoutC')
   if(lines) lines.innerHTML='';
   //线条样式
   const startDom = document.getElementById("end");
@@ -511,7 +512,6 @@ const setLeaderline2 = () => {
   for (const [key, value] of domListRightChild2.value) {
     const endDom = value;
     let line;
-    console.log('startDom', startDom.getBoundingClientRect())
     const rectEnd = endDom.getBoundingClientRect();
     const options = key.inputs_cnt.toString();
     LeaderLine.positionByWindowResize = false;
@@ -672,7 +672,7 @@ const newPositionLine2 = (diffline) => {
 //弹窗打开后使得线条在指定区域中
 const hiddenLine2 = () => {
   if (props.isPhoto == "photo" && !circleOpen.value) {
-    const elmWrapper = document.getElementById("wrapper");
+    const elmWrapper = document.getElementById("wrapperInoutC");
       if(!elmWrapper) return;
     // 移动 line
     document.body.querySelectorAll("body .leader-line").forEach((node) => {
@@ -696,9 +696,9 @@ const setLine2 = () => {
 };
 
 const removeLine2 = () => {
-  const elmWrapper = document.getElementById("wrapper");
+  const elmWrapper = document.getElementById("wrapperInoutC");
   if (elmWrapper) {
-    elmWrapper.querySelectorAll("#wrapper .leader-line").forEach((node) => {
+    elmWrapper.querySelectorAll("#wrapperInoutC .leader-line").forEach((node) => {
       elmWrapper.removeChild(node);
       // node.remove();
     });
@@ -894,7 +894,7 @@ watch(
   color: #1a2447;
   position: relative;
 }
-#wrapper {
+#wrapperInoutC {
   width: 0;
   height: 0;
   position: relative; /* Origin of coordinates for lines, and scrolled content (i.e. not `absolute`) */

src/pages/netStructPicture/components/inoutDialog.vue

@@ -85,7 +85,7 @@
           </div>
         </div>
       </div>
-      <div id="dilogwrapper"></div>
+      <div id="dilogwrapperInout"></div>
     </el-dialog>
   </div>
 </template>
@@ -190,7 +190,7 @@ watch(
   () => props.circleOpen,
   (newValue) => {
     open.value = newValue;
-    if (newValue) {
+    if (newValue==true) {
       nextTick(() => {
         setDialogLine();
         hiddenLineDialog();
@@ -200,10 +200,10 @@ watch(
       dialogListLeftChild.value.clear();
       dialogListRightChild.value.clear();
       dialogLines.value = [];
-      const elmWrapper = document.getElementById("dilogwrapper");
+      const elmWrapper = document.getElementById("dilogwrapperInout");
       if (elmWrapper) {
         document.body
-          .querySelectorAll("#dilogwrapper .leader-line")
+          .querySelectorAll("#dilogwrapperInout .leader-line")
           .forEach((node) => {
             node.remove();
             // elmWrapper.removeChild(node);
@@ -242,7 +242,7 @@ const newPositionLine3 = (diffline) => {
 };
 //弹窗打开后使得线条在指定区域中
 const hiddenLineDialog = () => {
-  const elmWrapper = document.getElementById("dilogwrapper");
+  const elmWrapper = document.getElementById("dilogwrapperInout");
   if(!elmWrapper) return;
   if (elmWrapper) {
     document.body.querySelectorAll("body>.leader-line").forEach((node) => {
@@ -311,7 +311,7 @@ onMounted(() => {});
   .dialog-right {
   }
 }
-#dilogwrapper,
+#dilogwrapperInout,
 #treedomDialog {
   width: 0;
   height: 0;

src/pages/netStructPicture/components/relationShip.vue

@@ -47,7 +47,7 @@
         </div>
       </div>
     </div>
-    <div id="wrapper"></div>
+    <div id="wrapperRelation"></div>
   </div>
 </template>
   <script setup>
@@ -284,7 +284,6 @@ const middleLinePosition = () => {
     const heights = myElement.value.scrollHeight;
     let leftListLength = leftList.value.length;
     let rightListLength = rightList.value.length;
-    console.log("leftListLength", leftListLength, rightListLength);
     const setElementMarginTop = (element, value) => {
       element.value.style.marginTop = `${value}px`;
     };
@@ -362,7 +361,7 @@ const newPositionLine = () => {
 };
 //弹窗打开后使得线条在指定区域中
 const hiddenLine = () => {
-  const elmWrapper = document.getElementById("wrapper");
+  const elmWrapper = document.getElementById("wrapperRelation");
   if (!elmWrapper) return;
   // 移动 line
   document.body.querySelectorAll("body .leader-line").forEach((node) => {
@@ -384,9 +383,9 @@ const setLine = () => {
   }, 300);
 };
 const removeLine = () => {
-  const elmWrapper = document.getElementById("wrapper");
+  const elmWrapper = document.getElementById("wrapperRelation");
   if (elmWrapper) {
-    document.body.querySelectorAll("#wrapper .leader-line").forEach((node) => {
+    document.body.querySelectorAll("#wrapperRelation .leader-line").forEach((node) => {
       elmWrapper.removeChild(node);
     });
   }
@@ -446,7 +445,7 @@ const removeLine = () => {
   }
 }
 
-#wrapper {
+#wrapperRelation {
   width: 0;
   height: 0;
   position: relative; /* Origin of coordinates for lines, and scrolled content (i.e. not `absolute`) */

src/pages/netStructPicture/components/virtualRelation.vue

@@ -99,7 +99,7 @@
           </div>
         </div>
       </div>
-      <div id="wrapper"></div>
+      <div id="wrapperVirtual"></div>
     </div>
   </div>
 </template>
@@ -332,7 +332,7 @@ const newPositionLine = () => {
 };
 //弹窗打开后使得线条在指定区域中
 const hiddenLine = () => {
-  const elmWrapper = document.getElementById("wrapper");
+  const elmWrapper = document.getElementById("wrapperVirtual");
   if(!elmWrapper) return;
   // 移动 line
   document.body.querySelectorAll("body .leader-line").forEach((node) => {
@@ -357,9 +357,9 @@ const setLine = () => {
 
 const removeLine3 = () => {
   leaderLines3.value = [];
-  const elmWrapper = document.getElementById("wrapper");
+  const elmWrapper = document.getElementById("wrapperVirtual");
   if (elmWrapper) {
-    document.body.querySelectorAll("#wrapper .leader-line").forEach((node) => {
+    document.body.querySelectorAll("#wrapperVirtual .leader-line").forEach((node) => {
       elmWrapper.removeChild(node);
     });
   }
@@ -545,7 +545,7 @@ watch(
   font-size: 15px;
 }
 
-#wrapper {
+#wrapperVirtual {
   width: 0;
   height: 0;
   position: relative;

src/pages/netStructPicture/components/virtualnformation.vue

@@ -266,7 +266,6 @@ watch(
       tagList.value = newValue;
       clickResetLine3();
       getNetworkInfo3();
-      console.log("first======", newValue);
     }
   }
 );
@@ -305,7 +304,7 @@ const getNetworkInfo3 = async () => {
     ied_name: names,
     reset: 1,
   });
-  middleTitelDesc.value = iedRes && iedRes.data ? iedRes.data[names].desc : "";
+  middleTitelDesc.value = iedRes && iedRes.data[names] ? iedRes.data[names].desc : "";
   //省略号===
   const data = {
     attr_ld_inst: "",

src/pages/netStructPicture/index.vue

@@ -232,7 +232,6 @@ const handleClick = (val) => {
 //点击左侧装置列表树返回的信息，
 const newChicken = ref(""); //基准文件
 const treeBack = (data, val) => {
-  console.log("data", data);
   newChicken.value = `(${data.ied_name})${data.desc}`;
   isContrast.value = "";
   upName.value = "";