修改

src/pages/netStructPicture/components/dialogIndex.vue

@@ -326,7 +326,6 @@ $height: 40px;
   margin-top: 27px;
   margin-left: 16px;
   height: 65vh;
-  // overflow-y: hidden !important;
 }
 .soures {
   height: 72vh;

src/pages/netStructPicture/components/inoutControl.vue

@@ -140,10 +140,6 @@ const props = defineProps({
     type: Object,
     default: () => {},
   },
-  tabName: {
-    type: String,
-    default: "",
-  },
 });
 const svInfo = ref(null);
 const scdIdValue = inject("scdId");
@@ -307,42 +303,81 @@ const bothSide = (data) => {
   leftList.value = formatArr.splice(0, long1);
   rightList.value = formatArr.splice(0);
 };
-const newLine = (endDom, startDom, options) => {
-  const BUTTON_HEIGHT = 24;
-  const BUTTON_OFFSET = 8;
-  let line;
-  const rectEnd = endDom.getBoundingClientRect();
-  line = new LeaderLine(
-    endDom,
-    LeaderLine.pointAnchor(startDom, { x: 0, y: rectEnd.top - 224 }),
-    {
-      color: "red",
-      size: 2,
-      path: "straight",
-      startSocket: "right",
-      endSocket: "left",
-    }
-  );
-  let elmButton = document.body.appendChild(document.createElement("div"));
-  let rect = startDom.getBoundingClientRect();
-  elmButton.className = "circel-button";
-  console.log('elmButton', elmButton)
-  elmButton.textContent = 'celmButton celmButton celmButton celmButton ';
-  elmButton.title = 'Remove Line';
-  elmButton.style.left = `${rect.right + BUTTON_OFFSET}px`;
-  elmButton.style.top = `${rect.top + rect.height / 2 - BUTTON_HEIGHT / 2}px`;
-  elmButton.addEventListener("click", () => {
-    
+//圆圈数字的位置endDom, options,posit,keys,startDom
+const circelSet = (endDom, options,posit,keys,startDom) => {
+  let elmButton = endDom.appendChild(document.createElement("div"));
+   // 阻止点击事件冒泡
+   elmButton.addEventListener("click", (event) => {
+    console.log('event', keys)
+    event.stopPropagation();
   });
- console.log('line', line)
-  return line;
+  elmButton.className = "circel-name";
+  elmButton.innerHTML = options;
+  elmButton.style.zIndex = "9999";
+  elmButton.style.width = "20px";
+  elmButton.style.color = "#fff";
+  elmButton.style.textAlign = "center";
+  elmButton.style.height = "20px";
+  elmButton.style.borderRadius = "10px";
+  elmButton.style.background = "#255CE7";
+  elmButton.style.position = "absolute";
+  if(posit == 'left'){
+    elmButton.style.right =-64 + "px";
+    elmButton.style.top = 13 + "px";
+  }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";
+  }
+  // lineData.value.forEach((ele, index) => {
+  //   const text = ele.doms.querySelector("text");
+  //   text.setAttribute("font-size", "14px");
+  //   text.setAttribute("fill", "#fff"); //文本颜色 ，有点没起效果
+  //   text.setAttribute("dominant-baseline", "ideographic"); //垂直居中
+  //   text.setAttribute("text-anchor", "middle"); //水平居中
+  //   const bbox = text.getBBox(); //获取当前文本的位置和尺寸数据
+  //   // 通过setAttribute方法设置圆形的属性值，包括圆心坐标、半径和背景颜色。
+  //   const width = bbox.width;
+  //   const height = bbox.height;
+  //   const x = parseFloat(text.getAttribute("x"));
+  //   const y = parseFloat(text.getAttribute("y"));
+
+  //   const circle = document.createElementNS(
+  //     "http://www.w3.org/2000/svg",
+  //     "circle"
+  //   );
+  //   circle.setAttribute("cx", x);
+  //   circle.setAttribute("cy", y - 10);
+  //   circle.setAttribute("r", Math.max(width, height) / 2 + 3); // 加上5像素的额外宽度
+  //   circle.setAttribute("fill", "#255CE7");
+  //   circle.setAttribute("id", `circle${index}`);
+  //   // 将圆形作为文本元素的前置元素，以此实现圆形元素显示在文本元素的底部
+  //   text.parentElement.insertBefore(circle, text);
+  //   // ele.doms.parentElement.addEventListener("click", () =>{
+  //   //   console.log('ele', ele)
+  //   // })
+  // });
+  // 获取所有circle元素，并为它们添加点击事件监听器
+  // let circles = document.querySelectorAll("circle");
+  // console.log('circles', circles)
+  // circles.forEach((circleClick) => {
+  //  console.log("circleClick");
+  //  circleClick.addEventListener(
+  //   "click",
+  //   handleCircleClick,
+  //   false
+  //  );
+  // });
 };
+let lineData = ref([]);
 const setLeaderline2 = () => {
-  console.log(
-    "fdomListLeftChild2.valueirst",
-    domListMiddle2.value,
-    domList2.value
-  );
   //线条样式
   const startDom = document.getElementById("end");
   //左侧子组件
@@ -352,25 +387,29 @@ const setLeaderline2 = () => {
     const options = key.inputs_cnt.toString();
     const rectEnd = endDom.getBoundingClientRect();
     if (key.ctrl_type == "smv") {
-      line = newLine(endDom, startDom, options);
-      // line = new LeaderLine(
-      //   endDom,
-      //   LeaderLine.pointAnchor(startDom, { x: 0, y: rectEnd.top - 224 }),
-      //   {
-      //     color: "red",
-      //     size: 2,
-      //     path: "straight",
-      //     startSocket: "right",
-      //     endSocket: "left",
-      //     middleLabel: LeaderLine.captionLabel({
-      //       text: options,
-      //     }),
-      //   }
-      // );
+      line = new LeaderLine(
+        endDom,
+        LeaderLine.pointAnchor(startDom, { x: 0, y: rectEnd.top - 232 }),
+        {
+          color: "red",
+          size: 2,
+          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);
     } else {
       line = new LeaderLine(
         endDom,
-        LeaderLine.pointAnchor(startDom, { x: 0, y: rectEnd.top - 224 }),
+        LeaderLine.pointAnchor(startDom, { x: 0, y: rectEnd.top - 232 }),
         {
           color: "#255CE7",
           size: 2,
@@ -383,6 +422,11 @@ const setLeaderline2 = () => {
           }),
         }
       );
+      lineData.value.push({
+        doms: document.querySelector(".leader-line:last-of-type"),
+        leftKey: key,
+      });
+      circelSet(endDom, options,'left',key);
     }
     leaderLines2.value.push(line);
   }
@@ -394,7 +438,7 @@ const setLeaderline2 = () => {
     const options = key.inputs_cnt.toString();
     if (key.ctrl_type == "smv") {
       line = new LeaderLine(
-        LeaderLine.pointAnchor(startDom, { x: "100%", y: rectEnd.top - 224 }),
+        LeaderLine.pointAnchor(startDom, { x: "100%", y: rectEnd.top - 232 }),
         endDom,
         {
           color: "red",
@@ -407,9 +451,14 @@ const setLeaderline2 = () => {
           middleLabel: LeaderLine.captionLabel(options),
         }
       );
+      lineData.value.push({
+        doms: document.querySelector(".leader-line:last-of-type"),
+        leftKey: key,
+      });
+      circelSet(endDom, options,'right',key);
     } else {
       line = new LeaderLine(
-        LeaderLine.pointAnchor(startDom, { x: "100%", y: rectEnd.top - 224 }),
+        LeaderLine.pointAnchor(startDom, { x: "100%", y: rectEnd.top - 232 }),
         endDom,
         {
           color: "#255CE7",
@@ -422,12 +471,17 @@ const setLeaderline2 = () => {
           middleLabel: LeaderLine.captionLabel(options),
         }
       );
+      lineData.value.push({
+        doms: document.querySelector(".leader-line:last-of-type"),
+        leftKey: key,
+      });
+      circelSet(endDom, options,'right',key);
     }
     leaderLines2.value.push(line);
   }
   if (iedChild.value) {
     iedChild.value.forEach((item) => {
-      //循环画线左侧
+      //循环画线左侧中间
       for (const [key, value] of domList2.value) {
         let line;
         for (let [key2, value2] of domListMiddle2.value) {
@@ -451,12 +505,18 @@ const setLeaderline2 = () => {
                 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);
               leaderLines2.value.push(line);
             }
           }
         }
       }
-      //循环画线右侧
+      //循环画线右侧中间
       for (let [key, value] of domListRight2.value) {
         let line2;
         for (let [key2, value2] of domListMiddle2.value) {
@@ -480,6 +540,12 @@ const setLeaderline2 = () => {
                 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);
               leaderLines2.value.push(line2);
             }
           }
@@ -487,6 +553,8 @@ const setLeaderline2 = () => {
       }
     });
   }
+  // const allText = document.querySelectorAll(".leader-line");
+  // circelSet();
   hiddenLine2();
 };
 //滚动时重定位线条
@@ -570,8 +638,9 @@ watch(
     tabValue.value = newValue;
     if (listData2.value != null && tabValue.value == "photo") {
       nextTick(() => {
-        setLine2();
+        removeLine2();
         clickResetLine2();
+        setLine2();
         newPositionLine2();
         getIedChild();
         getNetworkInfo();
@@ -671,6 +740,7 @@ watch(
 }
 
 .conts {
+  position: relative;
   @include left-and-right;
   margin-bottom: 24px;
   border: 2px dashed #98a8ff;
@@ -705,6 +775,7 @@ watch(
   margin: 12px 14px;
   padding: 5px;
   color: #1a2447;
+  position: relative;
 }
 #wrapper {
   width: 0;
@@ -715,18 +786,4 @@ watch(
   color: red;
   border: 1px solid red;
 }
-.circel-button {
-  width: 20px;
-  height: 20px;
-  border-radius: 10px;
-  background: #2a56e9;
-  position: absolute;
-  cursor: pointer;
-  color: white;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-  z-index: 9999;
-  background-image: url("~@/assets/image/instruct/navtop.png");
-}
 </style>

src/pages/netStructPicture/components/netWork.vue

@@ -151,7 +151,7 @@ const loading = ref(true);
 //获取网络图的顶部列表
 const getNetWork = async () => {
   const infoRes = await nodeList({
-    scd_id: 588000164,
+    scd_id: 572000155,
     pagesize: 10000,
     name: "SubNetwork",
   });
@@ -170,7 +170,7 @@ const allApData = ref({});
 const initLoad = async () => {
   allApData.value = {};
   const allAP = await nodeList({
-    scd_id: 588000164,
+    scd_id: 572000155,
     pagesize: 10000,
     name: "ConnectedAP",
   });
@@ -198,7 +198,7 @@ const initLoad = async () => {
 };
 //处理重复的ip
 const ipNetaddr = async () => {
-  const ipRes = await iedNetaddr({ scd_id: 588000164 });
+  const ipRes = await iedNetaddr({ scd_id: 572000155 });
   if (ipRes.code == 1) {
     return;
   }
@@ -500,11 +500,11 @@ const clickNetworkInfo = (value) => {
 
 const iedRelationData = ref([]);
 const iedRelation = async () => {
-  const iedRes = await scdIedRelation({ scd_id: 588000164 });
+  const iedRes = await scdIedRelation({ scd_id: 572000155 });
   iedRelationData.value = iedRes.data;
 };
 //弹窗=============
-provide('scdId',588000164)
+provide('scdId',572000155)
 </script>
   
 <style scoped lang="scss">

src/pages/netStructPicture/components/scdVisual.vue

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