修改

src/pages/netStructPicture/components/inoutControl.vue

@@ -48,7 +48,10 @@
             class="midlestyle"
             v-for="(item, index) in svInfo"
             :key="index"
-            :class="{ 'smv-color': item.attr_name == 'smvcb0','smv-color':item.isred }"
+            :class="{
+              'smv-color': item.attr_name == 'smvcb0',
+              'smv-color': item.isred,
+            }"
             :ref="(el) => setdomMiddle2(el, item)"
           >
             <div>{{ `${item.ldinst}/${item.attr_name}` }}</div>
@@ -174,7 +177,7 @@ const getIedChild = async () => {
     ied_name: props.checkData.ied_name,
     forcerefresh: 0,
   });
-  if(!listData2.value.list||!childRes.data) return;
+  if (!listData2.value.list || !childRes.data) return;
   if (childRes.data) {
     //左右侧内部侧数据组装
     listData2.value.list.forEach((item, index) => {
@@ -199,7 +202,7 @@ const getIedChild = async () => {
             ) {
               // 将key对象中的属性进行浅拷贝，避免直接引用和循环引用而避免报错
               const newKey = Object.assign({}, key);
-              itemKey.childItem= [];
+              itemKey.childItem = [];
               itemKey.childItem.push(newKey);
             }
           });
@@ -218,9 +221,9 @@ const getNetworkInfo = async () => {
   });
   const svResInfoCtrl = await iedSVSendCtrlblock({
     scd_id: scdIdValue,
-    ied_name: listData2.value.ied_name
+    ied_name: listData2.value.ied_name,
   });
-  if(!svResInfoCtrl.data ||!svResInfo.data) return;
+  if (!svResInfoCtrl.data || !svResInfo.data) return;
   if (svResInfoCtrl.data && svResInfoCtrl.data.GSEControl) {
     //处理数据得到APPID
     svResInfo.data.forEach((item) => {
@@ -230,19 +233,21 @@ const getNetworkInfo = async () => {
         }
       });
     });
-    if(svResInfoCtrl.data.SampledValueControl){
-      svResInfoCtrl.data.SampledValueControl.forEach(item=>item.isred = true)
+    if (svResInfoCtrl.data.SampledValueControl) {
+      svResInfoCtrl.data.SampledValueControl.forEach(
+        (item) => (item.isred = true)
+      );
       svInfo.value = [
-      ...svResInfoCtrl.data.SampledValueControl,
-      ...svResInfoCtrl.data.GSEControl,
-    ];
-    }else{
-      svInfo.value = svResInfoCtrl.data.GSEControl
+        ...svResInfoCtrl.data.SampledValueControl,
+        ...svResInfoCtrl.data.GSEControl,
+      ];
+    } else {
+      svInfo.value = svResInfoCtrl.data.GSEControl;
     }
-    if(!middleElement.value) return;
+    if (!middleElement.value) return;
     if (svInfo.value && svInfo.value.length > 3) {
       middleElement.value.style.marginTop = "20px";
-    } else{
+    } else {
       middleElement.value.style.marginTop = "150px"; // 设置元素的垂直位置
     }
   }
@@ -300,7 +305,7 @@ const processArray = (arr) => {
   const uniqueObjects = new Map();
   if (!arr) return;
   // 遍历数组
-  if(!arr) return;
+  if (!arr) return;
   for (const obj of arr) {
     const { ref_ied_id } = obj;
     // 如果当前对象的 ref_ied_id 属性已经存在于 uniqueObjects 中
@@ -317,8 +322,8 @@ const processArray = (arr) => {
 };
 //点击图片的时候筛选出数据
 const clickImg = async (dataItem) => {
-  loading.value =true;
-  listData2.value =await clickImgEvent(props,dataItem,scdIdValue);
+  loading.value = true;
+  listData2.value = await clickImgEvent(props, dataItem, scdIdValue);
 };
 
 //点击后重置数据和线条
@@ -335,7 +340,7 @@ const clickResetLine2 = () => {
 // 将设备列表分成两份
 const bothSide = (data) => {
   const formatArr = processArray(data);
-  if(!formatArr) return;
+  if (!formatArr) return;
   const arrlenght = formatArr.length;
   const long1 = Math.ceil(arrlenght / 2);
   leftList.value = formatArr.splice(0, long1);
@@ -404,13 +409,13 @@ const circelSet = (endDom, options, posit, keys, startDom, keyMiddle, mark) => {
   elmButton.style.borderRadius = "10px";
   elmButton.style.background = "#255CE7";
   elmButton.style.position = "absolute";
-  if (posit == "left") {
+  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" || posit == "rightMiddle") {
+  } else if (posit == "leftMiddle" || posit == "rightMiddle") {//倾斜对应子组件线条
     const dom1Rect = endDom.getBoundingClientRect();
     const dom2Rect = startDom.getBoundingClientRect();
     // 计算dom1和dom2矩形的中间y坐标。
@@ -641,7 +646,7 @@ const setLeaderline2 = () => {
   }
   // const allText = document.querySelectorAll(".leader-line");
   // circelSet();
-  loading.value =false;
+  loading.value = false;
   hiddenLine2();
 };
 //滚动时重定位线条
@@ -753,7 +758,7 @@ watch(
   () => props.checkData,
   (newValue) => {
     if (newValue) {
-      loading.value =true;
+      loading.value = true;
       // if (leaderLines2.value.length > 0) {
       leaderLines2.value = [];
       // }

src/pages/netStructPicture/components/relationShip.vue

@@ -120,6 +120,7 @@ const processArray = (arr) => {
 const clickImg = async (dataItem) => {
   loading.value =true;
   listData.value =await clickImgEvent(props,dataItem,scdIdValue);
+  if(!listData.value||!listData.value.length) return  loading.value = false;
 };
 watch(
   () => props.checkData,