输入输出控制块点击数字的弹框展示数据完善

src/pages/netStructPicture/components/basicInfo.vue

@@ -750,6 +750,7 @@ const cancelClickMain = () => {
       display: flex;
       flex-direction: column;
       align-items: center;
+      cursor: pointer;
     }
   }
   .img-title {

src/pages/netStructPicture/components/inoutControl.vue

@@ -113,6 +113,8 @@
       :dilogTitie="dilogTitie"
       :dilogRightData="dilogRightData"
       @done="done"
+      :titleUnusual="titleUnusual"
+      :dilogLeftTitle = "dilogLeftTitle"
     >
     </inoutDialog>
   </div>
@@ -320,31 +322,56 @@ const bothSide = (data) => {
   rightList.value = formatArr.splice(0);
 };
 //圆圈数字的位置endDom, options,posit,keys,startDom
-const dilogLeftData = ref(null);
+const dilogLeftTitle = ref(null);//弹窗左侧白色
 const dilogRightData = ref(null);
 const dilogData = ref(null);
-const dilogTitie = ref(null);
-const circelSet = (endDom, options, posit, keys, startDom, keyMiddle) => {
+const dilogTitie = ref(null);//输入的标题等数据
+const titleUnusual =ref('input');//区分点击输入还是输出
+const circelSet = (endDom, options, posit, keys, startDom, keyMiddle, mark) => {
   let elmButton = endDom.appendChild(document.createElement("div"));
   // 阻止点击事件冒泡
   elmButton.addEventListener("click", async (event) => {
     event.stopPropagation();
-    const ResInput = await getiedInputs({
-      title: "虚端子—详细信息",
-      s_ied_name: keys.target_ied_name,
-      m_ied_name: keys.source_ied_name,
-      m_ctrlid: "",
-      s_ctrlid: keys.ctrl_id,
-      scd_id: scdIdValue,
-    });
-    dilogData.value = ResInput.data;
-    const resRla = await scdIedRelation({
-      scd_id: scdIdValue,
-      ied_name: keys.target_ied_name,
-      reset: 1,
-    });
-    dilogTitie.value = keys;
-    dilogRightData.value = resRla.data;
+    console.log("keys", keys, keyMiddle);
+    if (mark == "middle") {
+      const ResInput = await getiedInputs({
+        title: "虚端子—详细信息",
+        s_ied_name: keyMiddle.ref_ied_name,
+        m_ied_name: keyMiddle.ied_name,
+        m_ctrlid: keys.node_id,
+        s_ctrlid: "",
+        scd_id: scdIdValue,
+      });
+      const resRla = await scdIedRelation({
+        scd_id: scdIdValue,
+        ied_name: keyMiddle.ref_ied_name,
+        reset: 1,
+      });
+      dilogData.value = ResInput.data;
+      dilogRightData.value = resRla.data;
+      dilogTitie.value = keyMiddle;
+      dilogLeftTitle.value = keys;
+      titleUnusual.value ='inout'
+    } else {
+      const ResInput = await getiedInputs({
+        title: "虚端子—详细信息",
+        s_ied_name: keys.target_ied_name,
+        m_ied_name: keys.source_ied_name,
+        m_ctrlid: "",
+        s_ctrlid: keys.ctrl_id,
+        scd_id: scdIdValue,
+      });
+      const resRla = await scdIedRelation({
+        scd_id: scdIdValue,
+        ied_name: keys.target_ied_name,
+        reset: 1,
+      });
+      dilogData.value = ResInput.data;
+      dilogRightData.value = resRla.data;
+      dilogTitie.value = keys;
+      titleUnusual.value ='input'
+    }
+
     circleOpen.value = true;
   });
   elmButton.className = "circel-name";
@@ -369,11 +396,13 @@ const circelSet = (endDom, options, posit, keys, startDom, keyMiddle) => {
     // 计算dom1和dom2矩形的中间y坐标。
     const dom1MiddleY = dom1Rect.top + dom1Rect.height / 2;
     const dom2MiddleY = dom2Rect.top + dom2Rect.height / 2;
-    elmButton.style.top =
-      dom1MiddleY + (dom2MiddleY - dom1MiddleY) / 2 - dom1Rect.top - 8 + "px";
     if (posit == "leftMiddle") {
+      elmButton.style.top =
+        dom1MiddleY + (dom2MiddleY - dom1MiddleY) / 2 - dom1Rect.top + "px";
       elmButton.style.right = -74 + "px";
     } else {
+      elmButton.style.top =
+        dom1MiddleY + (dom2MiddleY - dom1MiddleY) / 2 - dom1Rect.top + "px";
       elmButton.style.left = -74 + "px";
     }
   }
@@ -419,6 +448,7 @@ const circelSet = (endDom, options, posit, keys, startDom, keyMiddle) => {
 };
 const done = (emits) => {
   circleOpen.value = emits;
+  dilogData.value =null;
 };
 let lineData = ref([]);
 
@@ -531,7 +561,15 @@ const setLeaderline2 = () => {
                 lineStyle.color = "red";
               }
               line = new LeaderLine(endDom, startDom, lineStyle);
-              circelSet(endDom, options2, "leftMiddle", key, startDom, key2);
+              circelSet(
+                endDom,
+                options2,
+                "leftMiddle",
+                key2,
+                startDom,
+                key,
+                "middle"
+              );
               leaderLines2.value.push(line);
             }
           }
@@ -561,7 +599,15 @@ const setLeaderline2 = () => {
                 lineStyle2.color = "red";
               }
               line2 = new LeaderLine(startDom, endDom, lineStyle2);
-              circelSet(endDom, options3, "rightMiddle", key, startDom, key2);
+              circelSet(
+                endDom,
+                options3,
+                "rightMiddle",
+                key2,
+                startDom,
+                key,
+                "middle"
+              );
               leaderLines2.value.push(line2);
             }
           }
@@ -605,11 +651,6 @@ const newPositionLine2 = (diffline) => {
 const hiddenLine2 = () => {
   if (props.isPhoto == "photo" && !circleOpen.value) {
     const elmWrapper = document.getElementById("wrapper");
-    console.log(
-      "first",
-      elmWrapper,
-      document.body.querySelectorAll("body .leader-line")
-    );
     // 移动 line
     document.body.querySelectorAll("body .leader-line").forEach((node) => {
       elmWrapper.appendChild(node);
@@ -617,7 +658,6 @@ const hiddenLine2 = () => {
     elmWrapper.style.transform = "none";
     var rectWrapper = elmWrapper.getBoundingClientRect();
     // Move to the origin of coordinates as the document
-    console.log("rectWrapper2", rectWrapper);
     elmWrapper.style.transform = `translate(${
       (rectWrapper.left + window.scrollY) * -1
     }px, ${(rectWrapper.top + window.scrollX) * -1}px)`;

src/pages/netStructPicture/components/inoutDialog.vue

@@ -21,11 +21,18 @@
             <div>{{ listData2.ied_name }}</div>
             <div class="desc">{{ listData2.desc }}</div>
           </div>
-          <p class="title" v-if="dilogData.length > 0">
+          <p class="title" v-if="dilogData&&dilogData.length>0 && titleUnusual == 'inout'">
+            {{ `${dilogData[0].attr_ld_inst} ${dilogData[0].attr_ld_desc}` }}
+          </p>
+          <p class="title" v-if="dilogData&&dilogData.length>0 && titleUnusual != 'inout'">
             {{ `${dilogData[0].to_ld_inst} ${dilogData[0].to_ld_desc}` }}
           </p>
+          <!-- 白色区域的内容 -->
           <div class="main">
-            <div class="main-title"></div>
+            <div class="main-title" v-if="titleUnusual == 'input'"></div>
+            <div class="main-title" v-else>
+              {{ `${dilogLeftTitle.attr_name}${dilogLeftTitle.datset_desc}` }}
+            </div>
             <div
               class="ied-desc-child"
               v-for="(item, index) in dilogData"
@@ -38,19 +45,30 @@
           </div>
         </div>
         <div class="dialog-right">
-          <div class="nav">
+          <div class="nav" v-if="titleUnusual == 'input'">
             <div>{{ dilogTitie.target_ied_name }}</div>
             <div class="desc">
               {{ dilogRightData[dilogTitie.target_ied_name].desc }}
             </div>
           </div>
-          <p class="title" v-if="dilogData">
+          <div class="nav" v-else>
+            <div>{{ dilogTitie.ref_ied_name }}</div>
+            <div class="desc">
+              {{ dilogRightData[dilogTitie.ref_ied_name].desc }}
+            </div>
+          </div>
+          <p class="title" v-if="dilogData&&dilogData.length>0 && titleUnusual == 'inout'">
+            {{ `${dilogData[0].to_ld_inst} ${dilogData[0].to_ld_desc}` }}
+          </p>
+          <p class="title" v-if="dilogData&&dilogData.length>0 && titleUnusual != 'inout'">
             {{ `${dilogData[0].attr_ld_inst} ${dilogData[0].attr_ld_desc}` }}
           </p>
+          <!-- 白色区域的内容 -->
           <div class="main">
-            <div class="main-title">
+            <div class="main-title" v-if="titleUnusual == 'input'">
               {{ dilogTitie.ctrl_name + dilogTitie.datset_desc }}
             </div>
+            <div class="main-title" v-else></div>
             <div
               class="ied-desc-child"
               v-for="(item, index) in dilogData"
@@ -72,7 +90,7 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive, watch, nextTick, defineEmits } from "vue";
+import { ref, reactive, watch, nextTick, defineEmits, onMounted } from "vue";
 import LeaderLine from "../../../../public/leader-line.min.js";
 import AnimEvent from "../../../../public/anim-event.min.js";
 const props = defineProps({
@@ -96,6 +114,14 @@ const props = defineProps({
     type: Object,
     default: () => {},
   },
+  titleUnusual: {
+    type: String,
+    default: "",
+  },
+  dilogLeftTitle: {
+    type: Object,
+    default: () => {},
+  },
 });
 const open = ref(false);
 const listData2 = ref(props.checkData); //线条左右两侧的数据
@@ -123,23 +149,32 @@ const setDialogLine = () => {
   for (const [key, value] of dialogListRightChild.value) {
     let line;
     for (const [key2, value2] of dialogListLeftChild.value) {
-      if (key.node_id == key2.node_id) {
-        line = new LeaderLine(value2, value, {
-          color: "#255CE7",
-          size: 2,
-          path: "straight",
-          startSocket: "right",
-          endSocket: "left",
-          startPlug: "arrow1",
-          endPlug: "behind",
-        });
+      if (key.attr_int_addr == key2.attr_int_addr) {
+        if (props.titleUnusual == "input") {
+          line = new LeaderLine(value2, value, {
+            color: "#255CE7",
+            size: 2,
+            path: "straight",
+            startSocket: "right",
+            endSocket: "left",
+            startPlug: "arrow1",
+            endPlug: "behind",
+          });
+        } else {
+          line = new LeaderLine(value2, value, {
+            color: "#255CE7",
+            size: 2,
+            path: "straight",
+            startSocket: "right",
+            endSocket: "left",
+            startPlug: "behind",
+            endPlug: "arrow1",
+          });
+        }
+
         dialogLines.value.push(line);
       }
     }
-
-    dialogLines.value.forEach((line) => {
-      line.draw("#treedomDialog"); // 指定渲染到的DOM元素ID
-    });
   }
 };
 watch(
@@ -150,65 +185,56 @@ watch(
       nextTick(() => {
         setDialogLine();
         hiddenLineDialog();
+        newPositionLine3(dialogLines.value);
       });
-      //   newPositionLine3(dialogLines.value);
     } else {
-      console.log("2222", 2222);
       dialogListLeftChild.value.clear();
       dialogListRightChild.value.clear();
       dialogLines.value = [];
       const elmWrapper = document.getElementById("dilogwrapper");
-      console.log(
-        "elmWrapper",
-        document.body.querySelectorAll("#treedomDialog .leader-line")
-      );
       if (elmWrapper) {
         document.body
-          .querySelectorAll("#treedomDialog .leader-line")
+          .querySelectorAll("#dilogwrapper .leader-line")
           .forEach((node) => {
-            console.log("node", node);
-            elmWrapper.removeChild(node);
+            node.remove();
+            // elmWrapper.removeChild(node);
           });
       }
     }
   }
 );
 //滚动时重定位线条
-// const newPositionLine3 = (diffline) => {
-//   document.getElementById("treedomDialog").addEventListener(
-//     "scroll",
-//     AnimEvent.add(() => {
-//       diffline.forEach((line) => {
-//         if (line) {
-//         hiddenLineDialog();
-//           line.position();
-//           line.positionByWindowResize = false;
-//         }
-//       });
-//       //中间展示图片的
-//     }),
-//     false
-//   );
-// };
+const newPositionLine3 = (diffline) => {
+  document.getElementById("treedomDialog").addEventListener(
+    "scroll",
+    AnimEvent.add(() => {
+      diffline.forEach((line) => {
+        if (line) {
+          hiddenLineDialog();
+          line.position();
+          line.positionByWindowResize = false;
+        }
+      });
+      //中间展示图片的
+    }),
+    false
+  );
+};
 //弹窗打开后使得线条在指定区域中
 const hiddenLineDialog = () => {
   const elmWrapper = document.getElementById("dilogwrapper");
-  console.log(
-    "first",
-    elmWrapper,
-    document.body.querySelectorAll("body .leader-line")
-  );
-  // 移动 line
-  document.body.querySelectorAll("body .leader-line").forEach((node) => {
-    elmWrapper.appendChild(node);
-  });
-  elmWrapper.style.transform = "none";
-  var rectWrapper = elmWrapper.getBoundingClientRect();
-  console.log("rectWrapper2", rectWrapper);
-  elmWrapper.style.transform = `translate(${
-    (rectWrapper.left + window.scrollY) * -1
-  }px, ${(rectWrapper.top + window.scrollX) * -1}px)`;
+  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)`;
+  }
 };
+onMounted(() => {});
 </script>
 
 
@@ -264,7 +290,8 @@ const hiddenLineDialog = () => {
   .dialog-right {
   }
 }
-#dilogwrapper {
+#dilogwrapper,
+#treedomDialog {
   width: 0;
   height: 0;
   position: relative; /* Origin of coordinates for lines, and scrolled content (i.e. not `absolute`) */

src/pages/netStructPicture/components/netWork.vue

@@ -109,7 +109,7 @@ const listCat = ref([]); //长横线的类型名称
 const ipNetaddrData = ref([]); //ip数据
 const loadDating = ref(false);
 const openBig = ref(false);
-const scdIdValue = 592000161;
+const scdIdValue = 644000175;
 //线条背景颜色
 const backColorList = ref([
   {
@@ -488,7 +488,7 @@ const onChangeline = (val) => {
 const checkDialogData = ref(null);
 const done = (emits) => {
   openBig.value = emits;
-  checkDialogData.value = null
+  checkDialogData.value = null;
 };
 const clickNetworkInfo = (value) => {
   openBig.value = true;

src/pages/netStructPicture/components/scdVisual.vue

@@ -159,7 +159,7 @@ import {
 import { useDataStore } from "@/store/modules/golbal-data";
 import scdDialogIndex from "./scdDialogIndex";
 const userStoreCode = useDataStore();
-const scdIdValue = 592000161;
+const scdIdValue = 644000175;
 const data = reactive({
   queryParams: {
     scd_id: scdIdValue,