修改弹窗的一些样式

src/pages/netStructPicture/components/basicInfo.vue

@@ -592,11 +592,11 @@ watch(
 watch(
   () => props.checkData,
   (newValue) => {
-    removeLine2();
-    if (newValue && leaderLines.value.length > 0) {
-      leaderLines.value = [];
-    }
     if (newValue) {
+      removeLine2();
+      if (leaderLines.value.length > 0) {
+        leaderLines.value = [];
+      }
       activeCircel.value = 0;
       isOpenMain.value = false;
       isOpennav.value = false;

src/pages/netStructPicture/components/dialogIndex.vue

@@ -206,6 +206,7 @@ const clickNav = (navIndex, name) => {
 const activeLeft = ref(null);
 const clickLeft = (item, navIndex) => {
   //点击侧边栏事件
+  checkData.value = null;
   activeLeft.value = navIndex;
   checkData.value = item;
 };

src/pages/netStructPicture/components/inoutControl.vue

@@ -114,7 +114,7 @@
       :dilogRightData="dilogRightData"
       @done="done"
       :titleUnusual="titleUnusual"
-      :dilogLeftTitle = "dilogLeftTitle"
+      :dilogLeftTitle="dilogLeftTitle"
     >
     </inoutDialog>
   </div>
@@ -143,10 +143,6 @@ const props = defineProps({
     type: String,
     default: "",
   },
-  checkData: {
-    type: Object,
-    default: () => {},
-  },
   isOpen: {
     type: Boolean,
     default: false,
@@ -310,8 +306,8 @@ const clickResetLine2 = () => {
   domListLeftChild2.value.clear();
   domListRightChild2.value.clear();
   leaderLines2.value = [];
-  setLine2();
   removeLine2();
+  setLine2();
 };
 // 将设备列表分成两份
 const bothSide = (data) => {
@@ -322,11 +318,11 @@ const bothSide = (data) => {
   rightList.value = formatArr.splice(0);
 };
 //圆圈数字的位置endDom, options,posit,keys,startDom
-const dilogLeftTitle = ref(null);//弹窗左侧白色
+const dilogLeftTitle = ref(null); //弹窗左侧白色
 const dilogRightData = ref(null);
 const dilogData = ref(null);
-const dilogTitie = ref(null);//输入的标题等数据
-const titleUnusual =ref('input');//区分点击输入还是输出
+const dilogTitie = ref(null); //输入的标题等数据
+const titleUnusual = ref("input"); //区分点击输入还是输出
 const circelSet = (endDom, options, posit, keys, startDom, keyMiddle, mark) => {
   let elmButton = endDom.appendChild(document.createElement("div"));
   // 阻止点击事件冒泡
@@ -351,7 +347,7 @@ const circelSet = (endDom, options, posit, keys, startDom, keyMiddle, mark) => {
       dilogRightData.value = resRla.data;
       dilogTitie.value = keyMiddle;
       dilogLeftTitle.value = keys;
-      titleUnusual.value ='inout'
+      titleUnusual.value = "inout";
     } else {
       const ResInput = await getiedInputs({
         title: "虚端子—详细信息",
@@ -369,7 +365,7 @@ const circelSet = (endDom, options, posit, keys, startDom, keyMiddle, mark) => {
       dilogData.value = ResInput.data;
       dilogRightData.value = resRla.data;
       dilogTitie.value = keys;
-      titleUnusual.value ='input'
+      titleUnusual.value = "input";
     }
 
     circleOpen.value = true;
@@ -399,11 +395,11 @@ const circelSet = (endDom, options, posit, keys, startDom, keyMiddle, mark) => {
     if (posit == "leftMiddle") {
       elmButton.style.top =
         dom1MiddleY + (dom2MiddleY - dom1MiddleY) / 2 - dom1Rect.top + "px";
-      elmButton.style.right = -74 + "px";
+      elmButton.style.right = -100 + "px";
     } else {
       elmButton.style.top =
         dom1MiddleY + (dom2MiddleY - dom1MiddleY) / 2 - dom1Rect.top + "px";
-      elmButton.style.left = -74 + "px";
+      elmButton.style.left = -90 + "px";
     }
   }
   // lineData.value.forEach((ele, index) => {
@@ -448,7 +444,7 @@ const circelSet = (endDom, options, posit, keys, startDom, keyMiddle, mark) => {
 };
 const done = (emits) => {
   circleOpen.value = emits;
-  dilogData.value =null;
+  dilogData.value = null;
 };
 let lineData = ref([]);
 
@@ -676,23 +672,19 @@ const removeLine2 = () => {
   const elmWrapper = document.getElementById("wrapper");
   if (elmWrapper) {
     elmWrapper.querySelectorAll("body .leader-line").forEach((node) => {
-      // elmWrapper.removeChild(node);
-      node.remove();
+      elmWrapper.removeChild(node);
+      // node.remove();
     });
   }
 };
 onMounted(() => {
+  //不加条件切换下方tab时会出现bug
   if (props.checkData != null && props.isPhoto == "photo") {
     getIedChild();
     getNetworkInfo();
-  }
-  //不加条件切换下方tab时会出现bug
-  if (props.isPhoto == "photo") {
     nextTick(() => {
       setLine2();
-      nextTick(() => {
-        newPositionLine2(leaderLines2.value);
-      });
+      newPositionLine2(leaderLines2.value);
     });
   }
 });
@@ -700,48 +692,55 @@ onMounted(() => {
 watch(
   () => props.isPhoto,
   (newValue) => {
-    tabValue.value = newValue;
-    let child = document.querySelectorAll(".circel-name");
-    if (child) {
-      child.forEach((item) => {
-        item.remove();
-      });
-    }
-    if (listData2.value != null && tabValue.value == "photo") {
-      nextTick(() => {
-        removeLine2();
-        clickResetLine2();
-        setLine2();
-        newPositionLine2(leaderLines2.value);
-        getIedChild();
-        getNetworkInfo();
-      });
+    if (newValue) {
+      tabValue.value = newValue;
+      //清除数字圆圈
+      let child = document.querySelectorAll(".circel-name");
+      if (child) {
+        child.forEach((item) => {
+          item.remove();
+        });
+      }
+      if (listData2.value != null && tabValue.value == "photo") {
+        nextTick(() => {
+          // removeLine2();
+          clickResetLine2();
+          // setLine2();
+          newPositionLine2(leaderLines2.value);
+          getIedChild();
+          getNetworkInfo();
+        });
+      }
     }
   }
 );
 watch(
   () => props.checkData,
   (newValue) => {
-    let child = document.querySelectorAll(".circel-name");
-    if (child) {
-      child.forEach((item) => {
-        item.remove();
-      });
-    }
-    listData2.value = [];
-    svInfo.value = [];
-    listData2.value = newValue;
-    if (newValue != null && tabValue.value == "photo") {
-      getIedChild();
-      clickResetLine2();
-      getNetworkInfo();
-    }
-    emit("result", newValue);
-    if (newValue && leaderLines2.value.length > 0) {
-      leaderLines2.value = [];
+    if (newValue) {
+      if (leaderLines2.value.length > 0) {
+        leaderLines2.value = [];
+      }
+      //清除数字圆圈
+      let child = document.querySelectorAll(".circel-name");
+      if (child) {
+        child.forEach((item) => {
+          item.remove();
+        });
+      }
+      listData2.value = [];
+      svInfo.value = [];
+      listData2.value = newValue;
+      if (tabValue.value == "photo") {
+        getIedChild();
+        clickResetLine2();
+        getNetworkInfo();
+      }
+      emit("result", newValue);
     }
   }
 );
+
 watch(
   () => props.isOpen,
   (newValue) => {

src/pages/netStructPicture/components/relationShip.vue

@@ -144,11 +144,11 @@ watch(
       domList.value.clear();
       domListRight.value.clear();
       leaderLines.value = [];
+      nextTick(() => {
+        // middleLinePosition();
+        removeLine();
+      });
     }
-    nextTick(() => {
-      middleLinePosition();
-      removeLine();
-    });
   }
 );
 //点击后重置数据和线条
@@ -156,9 +156,9 @@ const clickResetLine = () => {
   domList.value.clear();
   domListRight.value.clear();
   leaderLines.value = [];
+  removeLine();
   middleLinePosition();
   setLine();
-  removeLine();
 };
 // 将设备列表分成两份
 const bothSide = (data) => {
@@ -361,7 +361,7 @@ const setLine = () => {
   }
   setTimeout(() => {
     setLeaderline();
-  }, 200);
+  }, 300);
 };
 const removeLine = () => {
   const elmWrapper = document.getElementById("wrapper");