数字弹框，为完善

src/api/iedNetwork/index.js

@@ -172,6 +172,14 @@ export function getNodeAttrs(query) {
     params: query
   })
 }
+//输入输出控制块弹框
+export function getiedInputs(query) {
+  return request({
+    url: 'screen/scd/ied/inputs',
+    method: 'get',
+    params: query
+  })
+}
 
 
 

src/pages/netStructPicture/components/basicInfo.vue

@@ -614,9 +614,11 @@ watch(
 );
 const removeLine2 = () => {
   const elmWrapper = document.getElementById("wrappers");
-  document.body.querySelectorAll("body .leader-line").forEach((node) => {
-    elmWrapper.removeChild(node);
-  });
+  if (elmWrapper) {
+    document.body.querySelectorAll("body .leader-line").forEach((node) => {
+      elmWrapper.removeChild(node);
+    });
+  }
 };
 //点击头部展示的弹框
 const clickNav = async (item) => {

src/pages/netStructPicture/components/inoutControl.vue

@@ -40,7 +40,7 @@
       <!-- 中间部分 -->
       <div class="main-middle" ref="middleHeight" id="end">
         <div class="middle-title" v-if="listData2">
-          <div v-if="listData2">{{ listData2.ied_name }}</div>
+          <div>{{ listData2.ied_name }}</div>
           <div v-if="listData2">{{ listData2.desc }}</div>
         </div>
         <div class="middle-item" ref="middleElement">
@@ -105,6 +105,16 @@
         :svInfo="svInfo"
       ></inoutSendOrRv>
     </div>
+    <inoutDialog
+      :circleOpen="circleOpen"
+      :listData2="listData2"
+      :checkData="checkData"
+      :dilogData="dilogData"
+      :dilogTitie="dilogTitie"
+      :dilogRightData="dilogRightData"
+      @done="done"
+    >
+    </inoutDialog>
   </div>
 </template>
 <script setup>
@@ -112,11 +122,14 @@ import { onMounted, watch, ref, nextTick, defineEmits, inject } from "vue";
 import LeaderLine from "../../../../public/leader-line.min.js";
 import AnimEvent from "../../../../public/anim-event.min.js";
 import inoutSendOrRv from "./inoutSendOrRv";
+import inoutDialog from "./inoutDialog.vue";
 import {
   //send发送
   iednetworkInfo,
   iedSVSendCtrlblock,
   gooseSendctrlblock,
+  scdIedRelation,
+  getiedInputs,
 } from "@/api/iedNetwork";
 import jsPlumb from "jsplumb";
 const props = defineProps({
@@ -144,6 +157,7 @@ const props = defineProps({
 const svInfo = ref(null);
 const scdIdValue = inject("scdId");
 const iedChild = ref(null);
+const circleOpen = ref(false); //数字点击事件
 //得到两边子版块的数据
 const getIedChild = async () => {
   const childRes = await gooseSendctrlblock({
@@ -222,6 +236,7 @@ const domListRight2 = ref(new Map()); //获取右侧所有的ref
 const domListMiddle2 = ref(new Map()); //获取中间所有的ref
 const domListRightChild2 = ref(new Map()); //获取右侧所有子的ref
 const domListLeftChild2 = ref(new Map()); //获取中间所有子的ref
+
 const listData2 = ref(props.checkData); //线条左右两侧的数据
 const emit = defineEmits(["result"]); //如果不加这个再次点击左侧会没有反应
 const tabValue = ref(props.isPhoto); //点击tab切换的数据
@@ -257,6 +272,7 @@ const setdomRight2Child2 = (el, item) => {
     domListRightChild2.value.set(item, el);
   }
 };
+
 const processArray = (arr) => {
   // ref_ied_id作为键，obj作为值
   const uniqueObjects = new Map();
@@ -304,12 +320,32 @@ const bothSide = (data) => {
   rightList.value = formatArr.splice(0);
 };
 //圆圈数字的位置endDom, options,posit,keys,startDom
-const circelSet = (endDom, options,posit,keys,startDom) => {
+const dilogLeftData = ref(null);
+const dilogRightData = ref(null);
+const dilogData = ref(null);
+const dilogTitie = ref(null);
+const circelSet = (endDom, options, posit, keys, startDom, keyMiddle) => {
   let elmButton = endDom.appendChild(document.createElement("div"));
-   // 阻止点击事件冒泡
-   elmButton.addEventListener("click", (event) => {
-    console.log('event', keys)
+  // 阻止点击事件冒泡
+  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;
+    circleOpen.value = true;
   });
   elmButton.className = "circel-name";
   elmButton.innerHTML = options;
@@ -321,20 +357,25 @@ const circelSet = (endDom, options,posit,keys,startDom) => {
   elmButton.style.borderRadius = "10px";
   elmButton.style.background = "#255CE7";
   elmButton.style.position = "absolute";
-  if(posit == 'left'){
-    elmButton.style.right =-64 + "px";
+  if (posit == "left") {
+    elmButton.style.right = -64 + "px";
     elmButton.style.top = 13 + "px";
-  }else if(posit == 'right'){
+  } else if (posit == "right") {
     elmButton.style.left = -64 + "px";
     elmButton.style.top = 13 + "px";
-  }else if(posit == 'leftMiddle') {
-    let rect = endDom.getBoundingClientRect();//左侧
-    let rectMiddle = startDom.getBoundingClientRect();//中间
-    console.log('rect', rect,'rectMiddle',rectMiddle)
-    // elmButton.style.top =rect.top - rectMiddle.top +"px";
-    elmButton.style.right =-74 + "px";
-  }else if(posit == 'rightMiddle') {
-    elmButton.style.left =-74 + "px";
+  } else if (posit == "leftMiddle" || posit == "rightMiddle") {
+    const dom1Rect = endDom.getBoundingClientRect();
+    const dom2Rect = startDom.getBoundingClientRect();
+    // 计算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.right = -74 + "px";
+    } else {
+      elmButton.style.left = -74 + "px";
+    }
   }
   // lineData.value.forEach((ele, index) => {
   //   const text = ele.doms.querySelector("text");
@@ -376,7 +417,11 @@ const circelSet = (endDom, options,posit,keys,startDom) => {
   //  );
   // });
 };
+const done = (emits) => {
+  circleOpen.value = emits;
+};
 let lineData = ref([]);
+
 const setLeaderline2 = () => {
   //线条样式
   const startDom = document.getElementById("end");
@@ -396,16 +441,9 @@ const setLeaderline2 = () => {
           path: "straight",
           startSocket: "right",
           endSocket: "left",
-          middleLabel: LeaderLine.captionLabel({
-            text: options,
-          }),
         }
       );
-      lineData.value.push({
-        doms: document.querySelector(".leader-line:last-of-type"),
-        leftKey: key
-      });
-      circelSet(endDom, options,'left',key);
+      circelSet(endDom, options, "left", key);
     } else {
       line = new LeaderLine(
         endDom,
@@ -416,17 +454,13 @@ const setLeaderline2 = () => {
           path: "straight",
           startSocket: "right",
           endSocket: "left",
-          y: 50,
-          middleLabel: LeaderLine.captionLabel({
-            text: options,
-          }),
+          // y: 50,
+          // middleLabel: LeaderLine.captionLabel({
+          //   text: options,
+          // }),
         }
       );
-      lineData.value.push({
-        doms: document.querySelector(".leader-line:last-of-type"),
-        leftKey: key,
-      });
-      circelSet(endDom, options,'left',key);
+      circelSet(endDom, options, "left", key);
     }
     leaderLines2.value.push(line);
   }
@@ -448,14 +482,10 @@ const setLeaderline2 = () => {
           endSocket: "left",
           startPlug: "arrow1",
           endPlug: "behind",
-          middleLabel: LeaderLine.captionLabel(options),
+          // middleLabel: LeaderLine.captionLabel(options),
         }
       );
-      lineData.value.push({
-        doms: document.querySelector(".leader-line:last-of-type"),
-        leftKey: key,
-      });
-      circelSet(endDom, options,'right',key);
+      circelSet(endDom, options, "right", key);
     } else {
       line = new LeaderLine(
         LeaderLine.pointAnchor(startDom, { x: "100%", y: rectEnd.top - 232 }),
@@ -468,14 +498,10 @@ const setLeaderline2 = () => {
           endSocket: "left",
           startPlug: "arrow1",
           endPlug: "behind",
-          middleLabel: LeaderLine.captionLabel(options),
+          // middleLabel: LeaderLine.captionLabel(options),
         }
       );
-      lineData.value.push({
-        doms: document.querySelector(".leader-line:last-of-type"),
-        leftKey: key,
-      });
-      circelSet(endDom, options,'right',key);
+      circelSet(endDom, options, "right", key);
     }
     leaderLines2.value.push(line);
   }
@@ -499,18 +525,13 @@ const setLeaderline2 = () => {
                 startPlug: "arrow1",
                 startSocket: "right",
                 endSocket: "left",
-                middleLabel: LeaderLine.captionLabel(options2),
+                // middleLabel: LeaderLine.captionLabel(options2),
               };
               if (key2.attr_name == "smvcb0") {
                 lineStyle.color = "red";
               }
               line = new LeaderLine(endDom, startDom, lineStyle);
-              lineData.value.push({
-                doms: document.querySelector(".leader-line:last-of-type"),
-                leftKey: key,
-                rightKey: key2,
-              });
-              circelSet(endDom, options2,'leftMiddle',key,startDom);
+              circelSet(endDom, options2, "leftMiddle", key, startDom, key2);
               leaderLines2.value.push(line);
             }
           }
@@ -534,18 +555,13 @@ const setLeaderline2 = () => {
                 endPlug: "arrow1",
                 endSocket: "left",
                 startSocket: "right",
-                middleLabel: LeaderLine.captionLabel(options3),
+                // middleLabel: LeaderLine.captionLabel(options3),
               };
               if (key2.attr_name == "smvcb0") {
                 lineStyle2.color = "red";
               }
               line2 = new LeaderLine(startDom, endDom, lineStyle2);
-              lineData.value.push({
-                doms: document.querySelector(".leader-line:last-of-type"),
-                leftKey: key,
-                rightKey: key2,
-              });
-              circelSet(endDom, options3,'rightMiddle',key,startDom);
+              circelSet(endDom, options3, "rightMiddle", key, startDom, key2);
               leaderLines2.value.push(line2);
             }
           }
@@ -558,11 +574,11 @@ const setLeaderline2 = () => {
   hiddenLine2();
 };
 //滚动时重定位线条
-const newPositionLine2 = () => {
+const newPositionLine2 = (diffline) => {
   document.getElementById("treedom2").addEventListener(
     "scroll",
     AnimEvent.add(() => {
-      leaderLines2.value.forEach((line) => {
+      diffline.forEach((line) => {
         if (line) {
           hiddenLine2();
           line.position();
@@ -576,7 +592,7 @@ const newPositionLine2 = () => {
   window.addEventListener(
     "resize",
     AnimEvent.add(function () {
-      leaderLines2.value.forEach((line) => {
+      diffline.forEach((line) => {
         hiddenLine2();
         line.position();
         line.positionByWindowResize = false;
@@ -587,8 +603,13 @@ const newPositionLine2 = () => {
 };
 //弹窗打开后使得线条在指定区域中
 const hiddenLine2 = () => {
-  if (props.isPhoto == "photo") {
+  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);
@@ -596,6 +617,7 @@ 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)`;
@@ -612,9 +634,12 @@ const setLine2 = () => {
 
 const removeLine2 = () => {
   const elmWrapper = document.getElementById("wrapper");
-  document.body.querySelectorAll("body .leader-line").forEach((node) => {
-    elmWrapper.removeChild(node);
-  });
+  if (elmWrapper) {
+    elmWrapper.querySelectorAll("body .leader-line").forEach((node) => {
+      // elmWrapper.removeChild(node);
+      node.remove();
+    });
+  }
 };
 onMounted(() => {
   if (props.checkData != null && props.isPhoto == "photo") {
@@ -626,7 +651,7 @@ onMounted(() => {
     nextTick(() => {
       setLine2();
       nextTick(() => {
-        newPositionLine2();
+        newPositionLine2(leaderLines2.value);
       });
     });
   }
@@ -636,12 +661,18 @@ 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();
+        newPositionLine2(leaderLines2.value);
         getIedChild();
         getNetworkInfo();
       });
@@ -651,6 +682,12 @@ watch(
 watch(
   () => props.checkData,
   (newValue) => {
+    let child = document.querySelectorAll(".circel-name");
+    if (child) {
+      child.forEach((item) => {
+        item.remove();
+      });
+    }
     listData2.value = [];
     svInfo.value = [];
     listData2.value = newValue;
@@ -675,10 +712,11 @@ watch(
       domListLeftChild2.value.clear();
       domListRightChild2.value.clear();
       leaderLines2.value = [];
+    } else {
+      nextTick(() => {
+        removeLine2();
+      });
     }
-    nextTick(() => {
-      removeLine2();
-    });
   }
 );
 watch(

src/pages/netStructPicture/components/inoutDialog.vue

@@ -0,0 +1,285 @@
+<template>
+  <div id="treedomDialog">
+    <el-dialog
+      @close="cancelClick2"
+      v-model="open"
+      append-to-body
+      draggable
+      width="70%"
+      style="height: 550px; overflow-y: auto"
+    >
+      <template #header>
+        <div class="my-header">
+          <div class="title">
+            {{ `虚端子 — 详细信息` }}
+          </div>
+        </div>
+      </template>
+      <div class="dialog-circle">
+        <div class="dialog-left">
+          <div class="nav" v-if="listData2">
+            <div>{{ listData2.ied_name }}</div>
+            <div class="desc">{{ listData2.desc }}</div>
+          </div>
+          <p class="title" v-if="dilogData.length > 0">
+            {{ `${dilogData[0].to_ld_inst} ${dilogData[0].to_ld_desc}` }}
+          </p>
+          <div class="main">
+            <div class="main-title"></div>
+            <div
+              class="ied-desc-child"
+              v-for="(item, index) in dilogData"
+              :key="index"
+              :ref="(el) => setDialogLeftChild2(el, item)"
+            >
+              <div>{{ item.to_doi_desc }}</div>
+              <div>{{ item.attr_int_addr }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="dialog-right">
+          <div class="nav">
+            <div>{{ dilogTitie.target_ied_name }}</div>
+            <div class="desc">
+              {{ dilogRightData[dilogTitie.target_ied_name].desc }}
+            </div>
+          </div>
+          <p class="title" v-if="dilogData">
+            {{ `${dilogData[0].attr_ld_inst} ${dilogData[0].attr_ld_desc}` }}
+          </p>
+          <div class="main">
+            <div class="main-title">
+              {{ dilogTitie.ctrl_name + dilogTitie.datset_desc }}
+            </div>
+            <div
+              class="ied-desc-child"
+              v-for="(item, index) in dilogData"
+              :key="index"
+              :ref="(el) => setDialogRightChild2(el, item)"
+            >
+              <div>{{ item.from_doi_desc }}</div>
+              <div>
+                {{
+                  `${item.attr_ld_inst}/${item.attr_prefix}${item.itemattr_ln_class}${item.attr_ln_inst}.${item.attr_do_name}.${item.attr_da_name}`
+                }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="dilogwrapper"></div>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, watch, nextTick, defineEmits } from "vue";
+import LeaderLine from "../../../../public/leader-line.min.js";
+import AnimEvent from "../../../../public/anim-event.min.js";
+const props = defineProps({
+  checkData: {
+    type: Object,
+    default: () => {},
+  },
+  circleOpen: {
+    type: Boolean,
+    default: false,
+  },
+  dilogData: {
+    type: Array,
+    default: () => [],
+  },
+  dilogTitie: {
+    type: Object,
+    default: () => {},
+  },
+  dilogRightData: {
+    type: Object,
+    default: () => {},
+  },
+});
+const open = ref(false);
+const listData2 = ref(props.checkData); //线条左右两侧的数据
+const dialogListRightChild = ref(new Map()); //获取弹窗右侧所有子的ref
+const dialogListLeftChild = ref(new Map()); //获取弹窗左侧所有子的ref
+const setDialogLeftChild2 = (el, item) => {
+  if (el) {
+    dialogListLeftChild.value.set(item, el);
+  }
+};
+const setDialogRightChild2 = (el, item) => {
+  if (el) {
+    dialogListRightChild.value.set(item, el);
+  }
+};
+const emit = defineEmits(["done"]);
+const dialogLines = ref([]);
+const cancelClick2 = () => {
+  open.value = false;
+  emit("done", false);
+};
+//弹框画线
+const setDialogLine = () => {
+  dialogLines.value = [];
+  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",
+        });
+        dialogLines.value.push(line);
+      }
+    }
+
+    dialogLines.value.forEach((line) => {
+      line.draw("#treedomDialog"); // 指定渲染到的DOM元素ID
+    });
+  }
+};
+watch(
+  () => props.circleOpen,
+  (newValue) => {
+    open.value = newValue;
+    if (newValue) {
+      nextTick(() => {
+        setDialogLine();
+        hiddenLineDialog();
+      });
+      //   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")
+          .forEach((node) => {
+            console.log("node", node);
+            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 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)`;
+};
+</script>
+
+
+
+<style lang="scss" scoped>
+@mixin left-and-right {
+  display: flex;
+  flex-direction: column;
+}
+.my-header {
+  border-bottom: 1px solid #a3ade0;
+  font-size: 16px;
+  color: #1a2447;
+  .title {
+    padding-bottom: 15px;
+  }
+}
+.dialog-circle {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+  //点击数字弹窗的样式
+  .dialog-left,
+  .dialog-right {
+    flex-basis: 40%;
+    border: 2px dashed #98a8ff;
+    background: #f7f8fb;
+    border-radius: 4px;
+    .nav {
+      text-align: center;
+      border-bottom: 1px solid #c8d4e2;
+      .desc {
+        color: #255ce7;
+        padding-bottom: 4px;
+      }
+    }
+    .title {
+      margin: 7px 20px;
+    }
+    .main {
+      margin: 0 20px;
+      border: 1px solid #c8d4e2;
+      .main-title {
+        height: 40px;
+        text-align: center;
+        line-height: 40px;
+        background: #fff;
+      }
+    }
+  }
+  .dialog-left {
+  }
+  .dialog-right {
+  }
+}
+#dilogwrapper {
+  width: 0;
+  height: 0;
+  position: relative; /* Origin of coordinates for lines, and scrolled content (i.e. not `absolute`) */
+}
+.ied-desc-child {
+  @include left-and-right;
+  align-items: center;
+  border: 1px solid #7484ab;
+  border-radius: 2px;
+  margin: 12px 14px;
+  padding: 5px;
+  color: #1a2447;
+  position: relative;
+}
+.leader-line {
+  z-index: 99999;
+}
+</style>

src/pages/netStructPicture/components/netWork.vue

@@ -109,6 +109,7 @@ const listCat = ref([]); //长横线的类型名称
 const ipNetaddrData = ref([]); //ip数据
 const loadDating = ref(false);
 const openBig = ref(false);
+const scdIdValue = 592000161;
 //线条背景颜色
 const backColorList = ref([
   {
@@ -151,7 +152,7 @@ const loading = ref(true);
 //获取网络图的顶部列表
 const getNetWork = async () => {
   const infoRes = await nodeList({
-    scd_id: 572000155,
+    scd_id: scdIdValue,
     pagesize: 10000,
     name: "SubNetwork",
   });
@@ -170,7 +171,7 @@ const allApData = ref({});
 const initLoad = async () => {
   allApData.value = {};
   const allAP = await nodeList({
-    scd_id: 572000155,
+    scd_id: scdIdValue,
     pagesize: 10000,
     name: "ConnectedAP",
   });
@@ -198,7 +199,7 @@ const initLoad = async () => {
 };
 //处理重复的ip
 const ipNetaddr = async () => {
-  const ipRes = await iedNetaddr({ scd_id: 572000155 });
+  const ipRes = await iedNetaddr({ scd_id: scdIdValue });
   if (ipRes.code == 1) {
     return;
   }
@@ -500,11 +501,11 @@ const clickNetworkInfo = (value) => {
 
 const iedRelationData = ref([]);
 const iedRelation = async () => {
-  const iedRes = await scdIedRelation({ scd_id: 572000155 });
+  const iedRes = await scdIedRelation({ scd_id: scdIdValue });
   iedRelationData.value = iedRes.data;
 };
 //弹窗=============
-provide('scdId',572000155)
+provide('scdId',scdIdValue)
 </script>
   
 <style scoped lang="scss">

src/pages/netStructPicture/components/relationShip.vue

@@ -365,9 +365,11 @@ const setLine = () => {
 };
 const removeLine = () => {
   const elmWrapper = document.getElementById("wrapper");
-  document.body.querySelectorAll("body .leader-line").forEach((node) => {
-    elmWrapper.removeChild(node);
-  });
+  if (elmWrapper) {
+    document.body.querySelectorAll("body .leader-line").forEach((node) => {
+      elmWrapper.removeChild(node);
+    });
+  }
 };
 </script>
   <style lang="scss">

src/pages/netStructPicture/components/scdVisual.vue

@@ -159,9 +159,10 @@ import {
 import { useDataStore } from "@/store/modules/golbal-data";
 import scdDialogIndex from "./scdDialogIndex";
 const userStoreCode = useDataStore();
+const scdIdValue = 592000161;
 const data = reactive({
   queryParams: {
-    scd_id: 572000155,
+    scd_id: scdIdValue,
   },
 });
 const loading = ref(true);
@@ -171,7 +172,7 @@ const { queryParams } = toRefs(data);
 // 表单重置
 const reset = () => {
   queryParams.value = {
-    scd_id: 572000155,
+    scd_id: scdIdValue,
     voltage_level_id: null, //电压等级
     area_id: null, //间隔
     device_type_id: null, //装置类型
@@ -185,7 +186,7 @@ const allIedType = [{ name: "全部", code: "alls" }];
 const voltageLevel = ref([{ name: "全部", id: "alls" }]); //电压等级
 const areaType = ref([]);
 const getArea = async () => {
-  const areaRes = await areaList({ scd_id: 572000155 });
+  const areaRes = await areaList({ scd_id: scdIdValue });
   if (!areaRes.data) {
     voltageLevel.value = [];
     loading.value = false;
@@ -223,7 +224,7 @@ const getArea = async () => {
 //设备类型
 const iedTypeData = ref([]);
 const getTypelist = async () => {
-  const typeRes = await iedTypelist({ scd_id: 572000155 });
+  const typeRes = await iedTypelist({ scd_id: scdIdValue });
   iedTypeData.value = typeRes.data ? [...allIedType, ...typeRes.data] : [];
 };
 const iedName = ref([]);
@@ -254,7 +255,7 @@ const searchInput = (value) => {
 const count = ref(0);
 const iedNameData = async () => {
   //IED编码或名称
-  const iedRes = await scdIedRelation({ scd_id: 572000155 });
+  const iedRes = await scdIedRelation({ scd_id: scdIdValue });
   iedName.value = iedRes.data;
   count.value = iedRes.count;
 };
@@ -282,7 +283,7 @@ const changeLevel = async (value, mainValue) => {
     open.value = true;
     dialogData.value = iedName.value;
   } else if (value) {
-    const mainClick = { scd_id: 572000155, area_id: value };
+    const mainClick = { scd_id: scdIdValue, area_id: value };
     const forms = mainValue ? mainClick : queryParams.value;
     open.value = true;
     dialogData.value = [];

src/pages/netStructPicture/components/virtualRelation.vue

@@ -352,9 +352,11 @@ const setLine = () => {
 const removeLine3 = () => {
   leaderLines3.value = [];
   const elmWrapper = document.getElementById("wrapper");
-  document.body.querySelectorAll("body .leader-line").forEach((node) => {
-    elmWrapper.removeChild(node);
-  });
+  if (elmWrapper) {
+    document.body.querySelectorAll("body .leader-line").forEach((node) => {
+      elmWrapper.removeChild(node);
+    });
+  }
 };
 onMounted(() => {
   if (props.checkData != null) {
@@ -399,12 +401,12 @@ watch(
   }
 );
 watch(
-    () => listData3.value,
-    (newValue) => {
-      emit("result", newValue);
-      clickResetLine3();
-    }
-  );
+  () => listData3.value,
+  (newValue) => {
+    emit("result", newValue);
+    clickResetLine3();
+  }
+);
 </script>
 <style lang="scss"  scoped>
 @mixin img-size {
@@ -432,7 +434,7 @@ watch(
   box-sizing: border-box;
   border: 2px dashed #98a8ff;
   background: #edf3ff;
-  margin:0 60px;
+  margin: 0 60px;
   img {
     @include img-size;
   }