修复端子连线上的数字位置显示

src/pages/netStructPicture/components/inoutControl.vue

@@ -347,9 +347,44 @@ const dilogRightData = ref(null);
 const dilogData = ref(null);
 const dilogTitie = ref(null); //输入的标题等数据
 const titleUnusual = ref("input"); //区分点击输入还是输出
+//统一调整数据圆圈的显示位置
+const moveNumerCircePositon=()=>{
+  const lineWrapper = document.getElementById('wrapper');
+  let svgs = lineWrapper.getElementsByClassName('leader-line')
+  let numbers = lineWrapper.getElementsByClassName('circel-name')
+  let getDiagonalMidpoint=function(p1, p2) {
+    // 假设p1和p2是包含x和y属性的对象，例如{x: 1, y: 2}
+    var x = (p1.x + p2.x) / 2;
+    var y = (p1.y + p2.y) / 2;
+    return { x: x, y: y }; // 返回中点坐标对象
+  }
+  let lastLineObj = null;
+  //svg线和圆圈顺序是一一对应的
+  for (let i=0;i<svgs.length;i++) {
+    lastLineObj = svgs[i]; //获取svg线
+    let circe = numbers[i];//获取对应的数字圆圈
+    //获取圆圈本身的高和宽度，在定位时需要取其一半以保证圆圈的垂直和水平居中
+    let circeWH={
+      w:circe.style.width.replace("px","")*1,
+      h:circe.style.height.replace("px","")*1,
+    }
+    let linexy = lastLineObj.getAttribute('viewBox').split(" ")
+    //获取斜线的中间坐标
+    let circeXY = getDiagonalMidpoint({
+      x:linexy[0]*1,
+      y:linexy[1]*1,
+    },{
+      x:linexy[0]*1+linexy[2]*1,
+      y:linexy[1]*1+linexy[3]*1
+    })
+    circe.style.top=(circeXY.y-(circeWH.h/2))+"px"
+    circe.style.left=(circeXY.x-(circeWH.w/2))+"px"
+  }  
+  
+}
 //圆圈未知的设置
-const circelSet = (endDom, options, posit, keys, startDom, keyMiddle, mark) => {
-  let elmButton = endDom.appendChild(document.createElement("div"));
+const circelSet = (line,numnerValue,mark) => {
+  let elmButton = document.getElementById('wrapper').appendChild(document.createElement("div"));
   // 阻止点击事件冒泡
   elmButton.addEventListener("click", async (event) => {
     event.stopPropagation();
@@ -391,11 +426,12 @@ const circelSet = (endDom, options, posit, keys, startDom, keyMiddle, mark) => {
       dilogTitie.value = keys;
       titleUnusual.value = "input";
     }
-
     circleOpen.value = true;
   });
   elmButton.className = "circel-name";
-  elmButton.innerHTML = options;
+  elmButton.innerHTML = numnerValue;
+  elmButton.setAttribute('title','点击查看端子详情')
+  elmButton.style.cursor = "pointer";  
   elmButton.style.zIndex = "9999";
   elmButton.style.width = "20px";
   elmButton.style.color = "#fff";
@@ -403,68 +439,7 @@ const circelSet = (endDom, options, posit, keys, startDom, keyMiddle, mark) => {
   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" || 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;
-    if (posit == "leftMiddle") {
-      elmButton.style.top =
-        dom1MiddleY + (dom2MiddleY - dom1MiddleY) / 2 - dom1Rect.top + "px";
-      elmButton.style.right = -100 + "px";
-    } else {
-      elmButton.style.top =
-        dom1MiddleY + (dom2MiddleY - dom1MiddleY) / 2 - dom1Rect.top + "px";
-      elmButton.style.left = -90 + "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
-  //  );
-  // });
+  elmButton.style.position = "absolute";  
 };
 const done = (emits) => {
   circleOpen.value = emits;
@@ -473,6 +448,14 @@ const done = (emits) => {
 let lineData = ref([]);
 
 const setLeaderline2 = () => {
+  //先清空界面上已有的圆圈，否则切换装置时会出现其他装置的圆圈
+  const numerCirce=document.getElementsByClassName('circel-name');
+  for(let i=numerCirce.length-1;i>=0;i--){
+    numerCirce[i].parentNode.removeChild(numerCirce[i]);
+  }
+  //清除原有的SVG元素
+  const lines  =document.getElementById('wrapper')
+  lines.innerHTML=''
   //线条样式
   const startDom = document.getElementById("end");
   //左侧子组件
@@ -494,7 +477,7 @@ const setLeaderline2 = () => {
           endSocket: "left",
         }
       );
-      circelSet(endDom, options, "left", key);
+      circelSet(line, options );
     } else {
       line = new LeaderLine(
         endDom,
@@ -511,7 +494,7 @@ const setLeaderline2 = () => {
           // }),
         }
       );
-      circelSet(endDom, options, "left", key);
+      circelSet(line, options );
     }
     leaderLines2.value.push(line);
   }
@@ -537,7 +520,7 @@ const setLeaderline2 = () => {
           // middleLabel: LeaderLine.captionLabel(options),
         }
       );
-      circelSet(endDom, options, "right", key);
+      circelSet(line, options );
     } else {
       line = new LeaderLine(
         LeaderLine.pointAnchor(startDom, { x: "100%", y: rectEnd.top - 232 }),
@@ -553,7 +536,7 @@ const setLeaderline2 = () => {
           // middleLabel: LeaderLine.captionLabel(options),
         }
       );
-      circelSet(endDom, options, "right", key);
+      circelSet(line, options );
     }
     leaderLines2.value.push(line);
   }
@@ -585,12 +568,8 @@ const setLeaderline2 = () => {
               LeaderLine.positionByWindowResize = false;
               line = new LeaderLine(endDom, startDom, lineStyle);
               circelSet(
-                endDom,
+                line,
                 options2,
-                "leftMiddle",
-                key2,
-                startDom,
-                key,
                 "middle"
               );
               leaderLines2.value.push(line);
@@ -624,12 +603,8 @@ const setLeaderline2 = () => {
               LeaderLine.positionByWindowResize = false;
               line2 = new LeaderLine(startDom, endDom, lineStyle2);
               circelSet(
-                endDom,
+                line2,
                 options3,
-                "rightMiddle",
-                key2,
-                startDom,
-                key,
                 "middle"
               );
               leaderLines2.value.push(line2);
@@ -640,9 +615,13 @@ const setLeaderline2 = () => {
     });
   }
   // const allText = document.querySelectorAll(".leader-line");
-  // circelSet();
+  // circelSet(); 
   loading.value =false;
   hiddenLine2();
+  setTimeout(() => {
+    //调整数字圆圈位置
+    moveNumerCircePositon();
+  }, 200);
 };
 //滚动时重定位线条
 const newPositionLine2 = (diffline) => {
@@ -822,6 +801,7 @@ watch(
   margin-top: 10px;
   display: flex;
   justify-content: space-evenly;
+  position: relative;
 }
 
 .leader-line {