Cid第一种格式的连线数据已渲染，但是还有卡顿的bug，数据过多的暂时会卡死

src/pages/netStructPicture/components/Gsix.vue

@@ -8,7 +8,7 @@ import modify0 from "@/assets/image/CID/modify0.png";
 import newly0 from "@/assets/image/CID/newly0.png";
 import LeaderLine from "../../../../public/leader-line.min.js";
 import AnimEvent from "../../../../public/anim-event.min.js";
-import { hiddenLine2,newPositionLine2 } from '@/utils/linesPosition'; 
+import { hiddenLine2, hiddenLineDialog } from "@/utils/linesPosition";
 const props = defineProps({
   clickRowDatas: {
     type: Object,
@@ -46,8 +46,14 @@ watch(
     if (newValue) {
       console.log("newVallueclickList", newValue);
       tagList.value = newValue;
-      leaderLineShow.value = [];
+      clickLineResult();
+      clickLineResultMain();
       getData();
+      nextTick(() => {
+        setTimeout(() => {
+          setLeaderlineMain();
+        }, 300);
+      });
     }
   }
 );
@@ -58,8 +64,14 @@ watch(
     if (newValue) {
       cClickCode.value = newValue;
       CodeImg(newValue);
-      clickReset();
+      clickLineResult();
+      clickLineResultMain();
       getData();
+      nextTick(() => {
+        setTimeout(() => {
+          setLeaderlineMain();
+        }, 300);
+      });
     }
   }
 );
@@ -123,19 +135,21 @@ const getData = async () => {
 //点击新增或删除的图片
 const DelClick = ref({});
 const clickTypeImg = (item, event) => {
-  console.log("event.target", event.target);
-  leaderLineShow.value.forEach((line) => line.remove());
+  clickLineResult();
   domListAdd.value = event.target;
   setTimeout(() => {
-    setLeaderlines();
+    setLeaderlines("add");
     newPositionLine2(leaderLineShow.value);
-  }, 40);
-  clickReset();
+  }, 100);
   comonTypeImg(item, event);
 };
 const clickTypeImgDel = (item, event) => {
+  clickLineResult();
   domListDel.value = event.target;
-  clickReset();
+  setTimeout(() => {
+    setLeaderlines("del");
+    newPositionLine2(leaderLineShow.value);
+  }, 100);
   comonTypeImg(item, event, 2);
 };
 const clickReset = () => {
@@ -151,6 +165,7 @@ const clickReset = () => {
     delDiff.value.style.top = 0;
   }
 };
+
 const addDiff = ref(0);
 const delDiff = ref(0);
 const comonTypeImg = (item, event, num) => {
@@ -177,10 +192,25 @@ const comonTypeImg = (item, event, num) => {
 //点击修改的图片
 const newleftData = ref(null);
 const newrightData = ref(null);
-const clickUpTypeImgLeft = (arr, event) => {
+const clickUpIdDomName = ref(null);//点击的name
+const clickUpTypeImgLeft = (arr, event, name) => {
+  clickLineResult();
+  clickUpIdDomName.value = name;
+  domListUpLeft.value = event.target;
+  setTimeout(() => {
+    setLeaderlines("UpLeft");
+    newPositionLine2(leaderLineShow.value);
+  }, 100);
   clickUpTypeImg(arr, event);
 };
-const clickUpTypeImgRight = (arr, event) => {
+const clickUpTypeImgRight = (arr, event, name) => {
+  clickLineResult();
+  clickUpIdDomName.value = name;
+  domListUpRight.value = event.target;
+  setTimeout(() => {
+    setLeaderlines("UpRight");
+    newPositionLine2(leaderLineShow.value);
+  }, 100);
   clickUpTypeImg(arr, event);
 };
 const setTopDiffName = (event) => {
@@ -213,7 +243,7 @@ const setTopDiffName = (event) => {
 const newleftDataMiddle = ref(null); //处理修改居中展示的数据
 const newrightDataMiddle = ref(null);
 const clickUpTypeImg = (arr, event) => {
-  clickReset();
+  clickLineResult();
   setTopDiffName(event);
   let newleft = {};
   let newright = {};
@@ -309,40 +339,328 @@ const CodeImg = (val) => {
 // 连线====
 const leaderLineShow = ref([]); //控制线条显示
 // 新增差异名字dom
-const domListAdd = ref(null); //获取左侧新增图片的dom
-const domListDel = ref(null); //获取右侧删除图片的dom
-const domListAddName = ref(new Map()); //获取所有差异名字
+const domListAdd = ref(null); //获取左侧点击新增图片的dom
+const domListDel = ref(null); //获取右侧点击删除图片的dom
+const domListUpLeft = ref(null); //获取左侧侧点击修改图片的dom
+const domListUpRight = ref(null); //获取右侧侧点击修改图片的dom
+const domListAddName = ref(new Map()); //获取所有新增差异名字
+const domListAddValue = ref(new Map()); //获取所有新增差异属性
+const domListDelName = ref(new Map()); //获取所有删除差异名字
+const domListDelValue = ref(new Map()); //获取所有删除差异属性
+const domListLeftMain = ref(new Map()); //获取左侧所有图片的dom
+const domListRightMain = ref(new Map()); //获取右侧所有图片的dom
+const domListUpLeftName = ref(new Map()); //获取点击左侧属性名差异名字
+const domListUpMiddleName = ref(new Map()); //获取点击修改中间属性
+const domListUpRightName = ref(new Map()); //获取点击右侧属性名差异名字
 const setdomAddName = (el, item) => {
   //左侧点击新增差异名字dom
-  // 检查 item 是否已经存在于 domListAddName.value 中
-  if (domListAddName.value.has(item)) {
-    // 如果存在，将 're' 后缀添加到 item 上，然后再添加到 Map 中
-    const updatedItem = `${item}re`;
-    domListAddName.value.set(updatedItem, el);
-  } else {
-    // 如果不存在，直接添加到 Map 中
+  if (el) {
     domListAddName.value.set(item, el);
   }
-  console.log("domListAddName.value", domListAddName.value);
 };
-const setLeaderlines = () => {
-  for (const [key, value] of domListAddName.value) {
-    const startDom = domListAdd.value;
-    let line;
-    line = new LeaderLine(startDom, value, {
-      color: "red",
-      size: 2,
-      path: "grid",
-      endPlug: "behind",
+const setdomAddValue = (el, item) => {
+  //左侧点击新增差异值dom
+  if (el) {
+    domListAddValue.value.set(item, el);
+  }
+};
+const setdomDelName = (el, item) => {
+  //左侧点击删除差异名字dom
+  if (el) {
+    domListDelName.value.set(item, el);
+  }
+};
+const setdomDelValue = (el, item) => {
+  //左侧点击删除差异值dom
+  if (el) {
+    domListDelValue.value.set(item, el);
+  }
+};
+const setdomLeftMain = (el, item) => {
+  //左侧侧灰色一对多主连线
+  if (el) {
+    domListLeftMain.value.set(item, el);
+  }
+  console.log("item", item, el);
+};
+const setdomRightMain = (el, item) => {
+  //右侧灰色一对多主连线
+  if (el) {
+    domListRightMain.value.set(item, el);
+  }
+};
+const setdomUPLeftName = (el, item) => {
+  //左侧点击修改差异名字dom
+  if (el) {
+    domListUpLeftName.value.set(item, el);
+  }
+};
+const setdomUPMiddleName = (el, item) => {
+  //左侧点击修改差异名字dom
+  if (el) {
+    domListUpMiddleName.value.set(item, el);
+  }
+};
+const setdomUpRightName = (el, item) => {
+  //左侧点击修改差异值dom
+  if (el) {
+    domListUpRightName.value.set(item, el);
+  }
+};
+const lineStyleAdd = {
+  color: "#134bea",
+  size: 2,
+  path: "grid",
+  endPlug: "behind",
+  startSocket: "right",
+  endSocket: "left",
+};
+const lineStyleDel = {
+  color: "#FF0000",
+  size: 2,
+  path: "grid",
+  endPlug: "behind",
+  startSocket: "right",
+  endSocket: "left",
+};
+//左右两侧一来显示的连线
+const leaderLineMain = ref([]);
+const setLeaderlineMain = () => {
+  const lineStyleLeftMain = {
+    ...lineStyleAdd,
+    color: "#C8D4E2",
+  };
+  const lineStyleRightMain = {
+    ...lineStyleAdd,
+    color: "#C8D4E2",
+    startSocket: "right",
+    endSocket: "left",
+  };
+  const mainLeftStartDom = document.getElementById("leftMainDom");
+  const mainRightStartDom = document.getElementById("rightMainDom");
+  if (domListLeftMain.value.size > 0) {
+    for (const [key, value] of domListLeftMain.value) {
+      let line;
+      line = new LeaderLine(mainLeftStartDom, value, lineStyleLeftMain);
+      leaderLineMain.value.push(line);
+      hiddenLineDialog();
+    }
+  }
+  if (domListRightMain.value.size > 0) {
+    for (const [key, value] of domListRightMain.value) {
+      let lines;
+      lines = new LeaderLine(value, mainRightStartDom, lineStyleRightMain);
+      leaderLineMain.value.push(lines);
+      hiddenLineDialog();
+    }
+  }
+};
+//左右两侧点击图片显示的连线
+const setLeaderlines = (types) => {
+  console.log("domListAddName.value", domListAddName.value);
+  console.log("domListAddValue.value", domListAddValue.value);
+  const lineStyleAdd2 = {
+    ...lineStyleAdd,
+    path: "straight",
+  };
+  const lineStyleDel2 = {
+    ...lineStyleDel,
+    path: "straight",
+    startSocket: "right",
+    endSocket: "left",
+  };
+  if (types == "add" && domListAddName.value.size > 0) {
+    //新增
+    for (const [key, value] of domListAddName.value) {
+      for (const [key2, value2] of domListAddValue.value) {
+        if (key == key2) {
+          const startDom = domListAdd.value;
+          let line;
+          line = new LeaderLine(startDom, value, lineStyleAdd);
+          leaderLineShow.value.push(line);
+          let lineValue;
+          lineValue = new LeaderLine(value, value2, lineStyleAdd2);
+          leaderLineShow.value.push(lineValue);
+          //弹窗打开后使得线条在指定区域中
+          hiddenLine2();
+        }
+      }
+    }
+  } else if (types == "del" && domListDelName.value.size > 0) {
+    //删除
+    for (const [key, value] of domListDelName.value) {
+      for (const [key2, value2] of domListDelValue.value) {
+        if (key == key2) {
+          const startDom = domListDel.value;
+          let line;
+          line = new LeaderLine(value, startDom, lineStyleDel);
+          leaderLineShow.value.push(line);
+          let lineValue;
+          lineValue = new LeaderLine(value, value2, lineStyleDel2);
+          leaderLineShow.value.push(lineValue);
+          //弹窗打开后使得线条在指定区域中
+          hiddenLine2();
+        }
+      }
+    }
+  } else if (types == "UpLeft"&&domListUpLeft.value) {
+    const startDom = domListUpLeft.value;
+    const doms =document.querySelectorAll(`#${clickUpIdDomName.value}`);
+    const sameDom =doms&&doms.length>1?doms[1]:doms[0]; //点击修改左侧或右侧每点击相同名字的dom
+    const lineStylUp = {
+      ...lineStyleAdd,
+      color: "#FFA011",
+    };
+    const lineStylSame = {
+      ...lineStyleAdd,
+      color: "#FFA011",
       startSocket: "right",
       endSocket: "left",
+    };
+    //左侧点击修改数据
+    for (const [key, value] of domListUpLeftName.value) {
+      for (const [key2, value2] of domListUpMiddleName.value) {
+        for (const [key3, value3] of domListUpRightName.value) {
+          if (key == key2 && key2 == key3) {
+            let line; //从左往右的线条
+            line = new LeaderLine(startDom, value, lineStylUp);
+            leaderLineShow.value.push(line);
+            let lineValue;
+            lineValue = new LeaderLine(value, value2, lineStylUp);
+            leaderLineShow.value.push(lineValue);
+            let lineValue3;
+            lineValue3 = new LeaderLine(value2, value3, lineStylUp);
+            leaderLineShow.value.push(lineValue3);
+            let lineValue4;
+            lineValue4 = new LeaderLine(value3, sameDom, lineStylUp);
+            leaderLineShow.value.push(lineValue4);
+            //弹窗打开后使得线条在指定区域中
+            hiddenLine2();
+          }
+        }
+      }
+    }
+  } else if (types == "UpRight"&&domListUpRight.value) {
+    const startDom = domListUpRight.value;
+    const sameDom = document.querySelectorAll(`#${clickUpIdDomName.value}`); //点击修改左侧或右侧每点击相同名字的dom
+    const lineStylUp = {
+      ...lineStyleAdd,
+      color: "#FFA011",
+    };
+    const lineStylSame = {
+      ...lineStyleAdd,
+      color: "#FFA011",
+      startSocket: "left",
+      endSocket: "right",
+    };
+    //左侧点击修改数据
+    for (const [key, value] of domListUpRightName.value) {
+      for (const [key2, value2] of domListUpMiddleName.value) {
+        for (const [key3, value3] of domListUpLeftName.value) {
+          if (key == key2 && key2 == key3) {
+            let line; //从左往右的线条
+            line = new LeaderLine(value,startDom, lineStylUp);
+            leaderLineShow.value.push(line);
+            let lineValue;
+            lineValue = new LeaderLine(value2,value, lineStylUp);
+            leaderLineShow.value.push(lineValue);
+            let lineValue3;
+            lineValue3 = new LeaderLine(value3, value2, lineStylUp);
+            leaderLineShow.value.push(lineValue3);
+            let lineValue4;
+            lineValue4 = new LeaderLine( sameDom[0],value3, lineStylUp);
+            leaderLineShow.value.push(lineValue4);
+            //弹窗打开后使得线条在指定区域中
+            hiddenLine2();
+          }
+        }
+      }
+    }
+  }
+};
+//滚动时重定位线条
+const newPositionLine2 = (diffline) => {
+  document.getElementById("treedomCid").addEventListener(
+    "scroll",
+    AnimEvent.add(() => {
+      leaderLineMain.value.forEach((line) => {
+        if (line) {
+          hiddenLineDialog();
+          line.position();
+          line.positionByWindowResize = false;
+        }
+      });
+      leaderLineShow.value.forEach((line) => {
+        if (line) {
+          hiddenLine2();
+          line.position();
+          line.positionByWindowResize = false;
+        }
+      });
+      //中间展示图片的
+    }),
+    false
+  );
+  document.getElementById("treedomCid").addEventListener(
+    "resize",
+    AnimEvent.add(function () {
+      leaderLineMain.value.forEach((line) => {
+        hiddenLineDialog();
+        line.position();
+        line.positionByWindowResize = false;
+      });
+      leaderLineShow.value.forEach((line) => {
+        hiddenLine2();
+        line.position();
+        line.positionByWindowResize = false;
+      });
+    }),
+    false
+  );
+};
+const removeLine2 = () => {
+  const elmWrapper = document.getElementById("wrapper");
+  if (elmWrapper) {
+    elmWrapper.querySelectorAll("#wrapper .leader-line").forEach((node) => {
+      // elmWrapper.removeChild(node);
+      node.remove();
     });
-    leaderLineShow.value.push(line);
-    //弹窗打开后使得线条在指定区域中
-    hiddenLine2();
   }
 };
-
+//点击的线条重置
+const clickLineResult = () => {
+  clickReset();
+  domListAddName.value.clear();
+  domListAddValue.value.clear();
+  domListDelName.value.clear();
+  domListDelValue.value.clear();
+  domListUpLeftName.value.clear();
+  domListUpRightName.value.clear();
+  domListUpMiddleName.value.clear();
+  leaderLineShow.value = [];
+  removeLine2();
+};
+//主线条重置
+const clickLineResultMain = () => {
+  domListRightMain.value.clear();
+  domListLeftMain.value.clear();
+  leaderLineMain.value = [];
+  document.body.querySelectorAll("body .leader-line").forEach((node) => {
+    node.remove();
+    // elmWrapper.removeChild(node);
+  });
+};
+watch(
+  () => mapList.value,
+  (newValue) => {
+    if (newValue) {
+      setTimeout(() => {
+        setLeaderlineMain();
+        newPositionLine2(leaderLineMain.value);
+      }, 300);
+    }
+  }
+);
 //连线===
 onMounted(() => {
   if (props.iedRelation) {
@@ -353,11 +671,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="main" ref="mianItem" v-loading="loading"  id="treedom2">
+  <div class="main" ref="mianItem" v-loading="loading" id="treedomCid">
     <!-- 左侧 -->
     <div class="left-main" v-if="(leftI && leftI.length) || dataU">
       <!-- 名称 -->
-      <div class="ied-name">
+      <div class="ied-name" id="leftMainDom">
         <img :src="squer" alt="" />
         <div v-if="tagList">{{ tagList.ied_name }}</div>
       </div>
@@ -378,7 +696,11 @@ onMounted(() => {
             v-for="(item, index) in dataU"
             :key="index"
             class="left-item-cont"
-            @click="clickUpTypeImgLeft(item.diff_desc, $event)"
+            @click="
+              clickUpTypeImgLeft(item.diff_desc, $event, item.diff_object_name)
+            "
+            :ref="(el) => setdomLeftMain(el, item.diff_object_name)"
+            :id="item.diff_object_name"
           >
             <div class="item-img">
               <img :src="codeImg" alt="" class="type-img" />
@@ -394,6 +716,7 @@ onMounted(() => {
             :key="index"
             class="left-item-cont"
             @click="clickTypeImg(item, $event)"
+            :ref="(el) => setdomLeftMain(el, item.diff_object_name)"
           >
             <div class="item-img">
               <img :src="codeImg" alt="" class="type-img" />
@@ -407,13 +730,15 @@ onMounted(() => {
       <div class="left-difference" v-if="IorDClick" ref="addDiff">
         <!-- key是键,value是值,循环的是对象 -->
         <div v-for="(value, key) in IorDClick" :key="key">
-          <div class="type-text" :ref="(el) => setdomAddName(el, value)">
+          <div class="type-text" :ref="(el) => setdomAddName(el, key)">
             {{ key }}
           </div>
-          <div class="type-text add-type-text wraps" v-if="value">
-            {{ value }}
+          <div :ref="(el) => setdomAddValue(el, key)" class="add-type">
+            <div class="type-text add-type-text wraps" v-if="value">
+              {{ value }}
+            </div>
+            <div class="type-text add-type-text wraps" v-else>【空】</div>
           </div>
-          <div class="type-text add-type-text wraps" v-else>【空】</div>
         </div>
       </div>
     </div>
@@ -421,7 +746,7 @@ onMounted(() => {
     <!-- 右侧 -->
     <div class="right-main" v-if="(rightD && rightD.length) || dataU">
       <!-- 名称 -->
-      <div class="ied-name">
+      <div class="ied-name" id="rightMainDom">
         <img :src="squer" alt="" />
         <div v-if="tagList">{{ tagList.ied_name }}</div>
       </div>
@@ -442,7 +767,9 @@ onMounted(() => {
             v-for="(item, index) in dataU"
             :key="index"
             class="left-item-cont"
-            @click="clickUpTypeImgRight(item.diff_desc, $event)"
+            @click="clickUpTypeImgRight(item.diff_desc, $event,item.diff_object_name)"
+            :id="item.diff_object_name"
+            :ref="(el) => setdomRightMain(el, item.diff_object_name)"
           >
             <div class="item-img">
               <img :src="codeImg" alt="" class="type-img" />
@@ -458,6 +785,7 @@ onMounted(() => {
             :key="index"
             class="left-item-cont"
             @click="clickTypeImgDel(item, $event)"
+            :ref="(el) => setdomRightMain(el, item.diff_object_name)"
           >
             <div class="item-img">
               <img :src="codeImg" alt="" class="type-img" />
@@ -471,11 +799,13 @@ onMounted(() => {
       <div class="right-difference" v-if="DelClick" ref="delDiff">
         <!-- key是键,value是值,循环的是对象 -->
         <div v-for="(value, key) in DelClick" :key="key">
-          <div class="type-text del-type-text wraps" v-if="value">
-            {{ value }}
+          <div :ref="(el) => setdomDelValue(el, key)" class="del-type">
+            <div class="type-text del-type-text wraps" v-if="value">
+              {{ value }}
+            </div>
+            <div class="type-text del-type-text wraps" v-else>【空】</div>
           </div>
-          <div class="type-text del-type-text wraps" v-else>【空】</div>
-          <div class="type-text">
+          <div class="type-text" :ref="(el) => setdomDelName(el, key)">
             {{ key }}
           </div>
         </div>
@@ -489,8 +819,18 @@ onMounted(() => {
           :key="key2"
           class="middle-frame"
         >
-          <div v-if="key == key2" class="middle-type-text">{{ key }}</div>
-          <div v-if="key == key2" class="middle-item">
+          <div
+            v-if="key == key2"
+            class="middle-type-text"
+            :ref="(el) => setdomUPLeftName(el, key)"
+          >
+            {{ key }}
+          </div>
+          <div
+            v-if="key == key2"
+            class="middle-item"
+            :ref="(el) => setdomUPMiddleName(el, key)"
+          >
             <div class="middle-left">
               <div class="type-text up-type-text wraps middle-up-type-text">
                 <span v-if="value">{{ value }}</span>
@@ -504,11 +844,18 @@ onMounted(() => {
               </div>
             </div>
           </div>
-          <div v-if="key == key2" class="middle-type-text">{{ key2 }}</div>
+          <div
+            v-if="key == key2"
+            class="middle-type-text"
+            :ref="(el) => setdomUpRightName(el, key)"
+          >
+            {{ key2 }}
+          </div>
         </div>
       </div>
     </div>
     <div id="wrapper"></div>
+    <div id="dilogwrapper"></div>
   </div>
 </template>
 
@@ -625,13 +972,18 @@ onMounted(() => {
     padding: 3px;
     font-size: 14px;
   }
-  .add-type-text {
-    border: 2px dashed #134bea;
-    color: #134bea;
-    width: 113px;
+  .add-type {
     margin-left: 40px;
-    padding: 12px 8px;
+    margin-bottom: 47px;
+    .add-type-text {
+      margin-bottom: 0;
+      border: 2px dashed #134bea;
+      color: #134bea;
+      width: 113px;
+      padding: 12px 8px;
+    }
   }
+
   .up-type-text {
     border: 1px solid #ffa011;
     color: #ffa011;
@@ -651,6 +1003,7 @@ onMounted(() => {
   position: absolute;
   right: 28%;
   .type-text {
+    width: 80px;
     border: 1px solid #ff0000;
     color: #ff0000;
     text-align: center;
@@ -663,12 +1016,16 @@ onMounted(() => {
     justify-content: space-around;
     align-items: center;
   }
-  .del-type-text {
-    border: 2px dashed #ff0000;
-    color: #ff0000;
-    width: 113px;
+  .del-type {
     margin-right: 40px;
-    padding: 12px 8px;
+    margin-bottom: 47px;
+    .del-type-text {
+      margin-bottom: 0;
+      border: 2px dashed #ff0000;
+      color: #ff0000;
+      width: 113px;
+      padding: 12px 8px;
+    }
   }
 }
 .middle-up-type-text {

src/pages/netStructPicture/components/basicInfo.vue

@@ -494,6 +494,17 @@ const newPositionLine2 = () => {
     }),
     false
   );
+  document.getElementById("treedom4").addEventListener(
+    "resize",
+    AnimEvent.add(function () {
+      leaderLines.value.forEach((line) => {
+        hiddenLine2();
+        line.position();
+        line.positionByWindowResize = false;
+      });
+    }),
+    false
+  );
 };
 const getLine = () => {
   const topDom = document.getElementById("topLine");

src/pages/netStructPicture/components/inoutControl.vue

@@ -639,7 +639,7 @@ const newPositionLine2 = (diffline) => {
     }),
     false
   );
-  window.addEventListener(
+  document.getElementById("treedom2").addEventListener(
     "resize",
     AnimEvent.add(function () {
       diffline.forEach((line) => {

src/pages/netStructPicture/components/inoutDialog.vue

@@ -227,6 +227,17 @@ const newPositionLine3 = (diffline) => {
     }),
     false
   );
+  document.getElementById("treedomDialog").addEventListener(
+    "resize",
+    AnimEvent.add(function () {
+      diffline.forEach((line) => {
+        hiddenLineDialog();
+        line.position();
+        line.positionByWindowResize = false;
+      });
+    }),
+    false
+  );
 };
 //弹窗打开后使得线条在指定区域中
 const hiddenLineDialog = () => {

src/pages/netStructPicture/components/relationShip.vue

@@ -326,13 +326,13 @@ const newPositionLine = () => {
     }),
     false
   );
-  window.addEventListener(
+  document.getElementById("treedom").addEventListener(
     "resize",
     AnimEvent.add(function () {
       leaderLines.value.forEach((line) => {
         hiddenLine();
         line.position();
-        line.positionByWindowResize = false;
+        line.positionByWindowResize = true;
       });
     }),
     false

src/pages/netStructPicture/components/virtualRelation.vue

@@ -325,6 +325,17 @@ const newPositionLine = () => {
     }),
     false
   );
+  document.getElementById("treedom3").addEventListener(
+    "resize",
+    AnimEvent.add(function () {
+      diffline.forEach((line) => {
+        hiddenLine();
+        line.position();
+        line.positionByWindowResize = false;
+      });
+    }),
+    false
+  );
 };
 //弹窗打开后使得线条在指定区域中
 const hiddenLine = () => {

src/utils/linesPosition.js

@@ -1,8 +1,8 @@
-import AnimEvent from "../../public/anim-event.min.js";
+
 export function  hiddenLine2(){
     const elmWrapper = document.getElementById("wrapper");
     // 移动 line
-    document.body.querySelectorAll("body .leader-line").forEach((node) => {
+    document.body.querySelectorAll("body>.leader-line").forEach((node) => {
       elmWrapper.appendChild(node);
     });
     elmWrapper.style.transform = "none";
@@ -11,31 +11,17 @@ export function  hiddenLine2(){
     elmWrapper.style.transform = `translate(${
       (rectWrapper.left + window.scrollY) * -1
     }px, ${(rectWrapper.top + window.scrollX) * -1}px)`;
-  };
-  export function newPositionLine2(diffline) {  
-    document.getElementById("treedom2").addEventListener(
-        "scroll",
-        AnimEvent.add(() => {
-          diffline.forEach((line) => {
-            if (line) {
-              hiddenLine2();
-              line.position();
-              line.positionByWindowResize = false;
-            }
-          });
-          //中间展示图片的
-        }),
-        false
-      );
-      window.addEventListener(
-        "resize",
-        AnimEvent.add(function () {
-          diffline.forEach((line) => {
-            hiddenLine2();
-            line.position();
-            line.positionByWindowResize = false;
-          });
-        }),
-        false
-      );
-  }
+  }
+  export function hiddenLineDialog() {
+    const elmWrapper = document.getElementById("dilogwrapper");
+    if (elmWrapper) {
+      document.body.querySelectorAll("body>.leader-line").forEach((node) => {
+        elmWrapper.appendChild(node);
+      });
+      elmWrapper.style.transform = "none";
+      var rectWrapper = elmWrapper.getBoundingClientRect();
+      elmWrapper.style.transform = `translate(${
+        (rectWrapper.left + window.scrollY) * -1
+      }px, ${(rectWrapper.top + window.scrollX) * -1}px)`;
+    }
+  };