一致性对比结果修改加删除的，差异的数字展示，虚回路关系的各项名称调取不同接口获取

src/pages/netStructPicture/components/CidTree.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="bigBox" :class="{'bigBoxUp':isUPdate=='update'}">
+    <div class="bigBox" :class="{ bigBoxUp: isUPdate == 'update' }">
       <div>
         <div class="titles">
           <img
@@ -14,7 +14,7 @@
       <div class="tagBox">
         <div
           class="cont-line tagP"
-          :class="{ 'clicktag': tagChoose == index }"
+          :class="{ clicktag: tagChoose == index }"
           v-for="(item, index) in tagList"
           :key="index"
           @click="tagClick(item, index)"
@@ -32,10 +32,15 @@
           highlight-current
           @node-click="handleNodeClick"
         >
-          <template #default="{ node }">
+          <template #default="{ node, data }">
             <span class="label" :class="{ 'tree-label': node.expanded }">{{
               node.label
-            }}</span>
+            }}</span
+            ><span
+              :class="{ 'tree-label': clickItemcode == data.itemcode }"
+              style="position: absolute; right: 10px"
+              >{{ data.num }}</span
+            >
           </template>
         </el-tree>
       </div>
@@ -69,49 +74,49 @@ const props = defineProps({
     default: () => {},
   },
 });
-const emit = defineEmits(["treeBack", "clickCode","treeBackDefalut"]);
+const emit = defineEmits(["treeBack", "clickCode", "treeBackDefalut"]);
 let tagList = ref(props.iedRelation);
-let tagChoose = ref('');
+let tagChoose = ref("");
 let treeData = ref([
-{
-  label: "装置信息",
-  itemcode: "ied",
-  num:0,
-  children: [
-    {
-      label: "基本信息",
-      itemcode: "scd.ied",
-      num:0
-    },
-  ],
-},
-{
-  label: "通信参数",
-  itemcode: "Communication",
-  num:0,
-  children: [
-    {
-      label: "通信接入点",
-      itemcode: "scd.ied.Communication",
-      num:0,
-    },
-    {
-      label: "站控层通信参数",
-      itemcode: "scd.ied.Communication.S1",
-      num:0,
-    },
-    {
-      label: "GOOSE 通信参数",
-      itemcode: "scd.ied.Communication.GSE",
-      num:0,
-    },
-    {
-      label: "SV 通信参数",
-      itemcode: 'scd.ied.Communication.SMV',
-      num:0,
-    },
-  ],
-},
+  {
+    label: "装置信息",
+    itemcode: "ied",
+    num: 0,
+    children: [
+      {
+        label: "基本信息",
+        itemcode: "scd.ied",
+        num: 0,
+      },
+    ],
+  },
+  {
+    label: "通信参数",
+    itemcode: "Communication",
+    num: 0,
+    children: [
+      {
+        label: "通信接入点",
+        itemcode: "scd.ied.Communication",
+        num: 0,
+      },
+      {
+        label: "站控层通信参数",
+        itemcode: "scd.ied.Communication.S1",
+        num: 0,
+      },
+      {
+        label: "GOOSE 通信参数",
+        itemcode: "scd.ied.Communication.GSE",
+        num: 0,
+      },
+      {
+        label: "SV 通信参数",
+        itemcode: "scd.ied.Communication.SMV",
+        num: 0,
+      },
+    ],
+  },
   {
     label: "测点信息",
     itemcode: "Point",
@@ -119,17 +124,17 @@ let treeData = ref([
       {
         label: "遥信",
         itemcode: "scd.ied.YX",
-        num:0,
+        num: 0,
       },
       {
         label: "遥控",
         itemcode: "scd.ied.YK",
-        num:0,
+        num: 0,
       },
       {
         label: "遥测",
         itemcode: "scd.ied.YC",
-        num:0,
+        num: 0,
       },
       {
         label: "遥脉",
@@ -139,66 +144,66 @@ let treeData = ref([
       {
         label: "定值",
         itemcode: "scd.ied.DZ",
-        num:0,
+        num: 0,
       },
     ],
   },
   {
     label: "回路配置",
     itemcode: "config",
-    num:0,
+    num: 0,
     children: [
       {
         label: "发布虚端子",
         itemcode: "scd.ied.FCDA",
-        num:0,
+        num: 0,
       },
       {
         label: "定阅虚端子",
         itemcode: "scd.ied.ExtRef",
-        num:0,
+        num: 0,
       },
       {
         label: "虚回路信息",
         itemcode: "scd.ied.Relation",
-        num:0,
+        num: 0,
       },
     ],
   },
   {
     label: "建模信息",
     itemcode: "model",
-    num:0,
+    num: 0,
     children: [
       {
         label: "数据集",
         itemcode: "scd.ied.DatSet",
-        num:0,
+        num: 0,
       },
       {
         label: "数据集成员",
         itemcode: "scd.ied.DatSetMeber",
-        num:0,
+        num: 0,
       },
       {
         label: "GOOSE控制块",
         itemcode: "scd.ied.GSEControl",
-        num:0,
+        num: 0,
       },
       {
         label: "SV控制块",
         itemcode: "scd.ied.SampledValueControl",
-        num:0,
+        num: 0,
       },
       {
         label: "报告控制块",
         itemcode: "scd.ied.ReportControl",
-        num:0,
+        num: 0,
       },
       {
         label: "日志控制块",
         itemcode: "scd.ied.LogControl",
-        num:0,
+        num: 0,
       },
     ],
   },
@@ -206,35 +211,40 @@ let treeData = ref([
 
 let needName = ref("");
 //得到差异项code的数字数据
-const codeStaticList = ref(null);
 const codeStatic = async () => {
   const ids = clickRow.value ? clickRow.value.id : "";
-  const names = clickTage.value ? clickTage.value.ied_name :"";
+  const names = clickTage.value ? clickTage.value.ied_name : "";
   const res = await compIedstatType({
     comp_id: ids,
     ied_name: names,
     comptype: "u",
   });
-  codeStaticList.value = res.data;
-  updateNum(treeData.value, codeStaticList.value);  
-  console.log('treeData.value', treeData.value)
+  updateNum(treeData.value, res.data);
 };
 const updateNum = (treeNode, data) => {
-  for (let node of treeNode) {  
-    // 检查当前节点的 itemcode 是否在 data 中  
-    if (data&&data.hasOwnProperty(node.itemcode)) {  
-      node.num = parseInt(data[node.itemcode], 10);  
-    }  
-  
-    // 如果当前节点有子节点，递归处理子节点  
-    if (node.children) {  
-      updateNum(node.children, data);  
-    }  
-  }  
-}
+  for (let node of treeNode) {
+    node.num = 0;
+    // 检查当前节点的 itemcode 是否在 data 中
+    if (data && data.hasOwnProperty(node.itemcode)) {
+      node.num = parseInt(data[node.itemcode]);
+    }
+    if(data &&node.itemcode == 'scd.ied.Relation'){
+      node.num =parseInt(data['scd.ied.ExtRef'])
+    }
+    // 如果当前节点有子节点，递归处理子节点
+    if (node.children) {
+      updateNum(node.children, data);
+      // 计算父级节点的num是子节点num的和
+      node.num = node.children
+    .filter(child => child.itemcode !== 'scd.ied.Relation')
+    .reduce((total, child) => total + child.num, 0);
+    }
+  }
+};
 let defaultProps = ref({
   label: "label",
   children: "children",
+  num: "num",
 });
 const isUPdate = ref(props.UPdate);
 watch(
@@ -248,8 +258,7 @@ watch(
   (newValue) => {
     if (newValue) {
       tagList.value = newValue;
-      console.log('firsttagList.value', tagList.value)
-
+      console.log("firsttagList.value", tagList.value);
     }
   }
 );
@@ -260,7 +269,7 @@ const reload = () => {
     });
   }
 };
-const clickTage =ref(null);
+const clickTage = ref(null);
 const tagClick = (row, num) => {
   tagChoose.value = num;
   clickTage.value = row;
@@ -297,7 +306,7 @@ const tagClick = (row, num) => {
       //     emit("treeBack", needName.value, a[0].id);
       //   }
     });
-    codeStatic()
+  codeStatic();
 };
 const clickRow = ref(props.clickRowDatas);
 //对比文件：头部对比的单个数据
@@ -309,15 +318,19 @@ watch(
     }
   }
 );
+const clickItemcode = ref("");
 const handleNodeClick = (e) => {
+  clickItemcode.value = e.itemcode;
   emit("clickCode", e.itemcode);
 };
 onMounted(() => {
-  tagChoose.value = props.iedRelation?Object.keys(props.iedRelation)[0]:'';
-  clickTage.value = props.iedRelation?Object.values(props.iedRelation)[0]:'';
-  emit("treeBackDefalut",clickTage.value);
+  tagChoose.value = props.iedRelation ? Object.keys(props.iedRelation)[0] : "";
+  clickTage.value = props.iedRelation
+    ? Object.values(props.iedRelation)[0]
+    : "";
+  emit("treeBackDefalut", clickTage.value);
   reload();
-  codeStatic()
+  codeStatic();
 });
 </script>
 
@@ -344,7 +357,7 @@ h3 {
     margin: 16px 0 0 16px;
   }
 }
-.bigBoxUp{
+.bigBoxUp {
   height: calc(100vh - 230px) !important;
 }
 :deep(.el-tree) {

src/pages/netStructPicture/components/Gsix.vue

@@ -236,7 +236,6 @@ const clickUpTypeImgLeft = (arr, event, name, list) => {
     setLeaderlines("UpLeft");
     newPositionLine2(leaderLineShow.value);
   }, 100);
-  console.log("arr-----", arr);
   if (!isDiffdescUpAdd.value && !isDiffdescUpDel.value && arr.length > 0) {
     //只有修改
     clickUpTypeImg(arr, event);
@@ -275,12 +274,21 @@ const clickUpTypeImgUpDel = (arr, event) => {
     let found = false;
     arr[0].DAI.forEach((item2) => {
       if (item1.Name === item2.Name) {
-        CommunicationS1.value.push(item1);
+        CommunicationS1.value.push({...item1,upAndDel:true});
         found = true;
       }
     });
     if (!found) {
-      CommunicationS1.value.push({ ...item1, del: true });
+      CommunicationS1.value.push({ ...item1, del: true,upAndDel:true });
+    }
+  });
+  CommunicationS1.value.sort((a, b) => {
+    if (a.del && !b.del) {
+      return 1; // 如果a.del为true且b.del为false，a排在b后面
+    } else if (!a.del && b.del) {
+      return -1; // 如果a.del为false且b.del为true，a排在b前面
+    } else {
+      return 0; // 其他情况保持原来的顺序
     }
   });
   //修改遥控  如果data[0].DAI数组对象中的Name和如果data[0].DAI数组中的Name和data[1].DAI数组对象中的Name相同，
@@ -293,7 +301,6 @@ const clickUpTypeImgUpAdd = (arr, event) => {
   // // 如果data中[0]的属性的数组中的Type值等于了data中[1]的属性的数组中的Type值并且nnerText值不 相同，
   // // 那么把data中[1]中的Type相等的nnerText值赋给data中[0]的nnerTextRight，如果data中[0]的Type值，data[1]中没有，那么data中[0]属性nnerTextRight的值为  空  字符串
   // //nnerText是展示在左侧的数据，nnerTextRight是展示在右侧的数据，如果nnerTextRight为空，那么同时展示在左侧最下方表示新增
-  console.log("arr-----", arr);
   clickLineResult();
   setTopDiffName(event);
   if (arr.length && arr.length > 0) {
@@ -335,7 +342,6 @@ const clickUpTypeImgUpAdd = (arr, event) => {
     }
   });
   CommunicationS1.value.push(...itemsToAdd);
-  console.log(" CommunicationS1.value", CommunicationS1.value);
 };
 const setTopDiffName = (event) => {
   const dom1Rect = rightStartDom.value.getBoundingClientRect();
@@ -529,7 +535,6 @@ const setdomUpRightName = (el, item) => {
   if (el) {
     domListUpRightName.value.set(item, el);
   }
-  console.log('domListUpRightName.value', domListUpRightName.value)
 };
 const lineStyleAdd = {
   color: "#134bea",
@@ -626,7 +631,8 @@ const setLeaderlines = (types) => {
         }
       }
     }
-  } else if (//点击修改的左侧图标或装置信息中的基本信息
+  } else if (
+    //点击修改的左侧图标或装置信息中的基本信息
     (types == "UpLeft" && domListUpLeft.value) ||
     (types == "UpLeftBasic" && cClickCode.value == "scd.ied")
   ) {
@@ -637,7 +643,7 @@ const setLeaderlines = (types) => {
     const doms =
       types == "UpLeftBasic"
         ? domListUpRight.value
-        : document.querySelectorAll(`#${clickUpIdDomName.value}`);//基本信息固定了id，其他的是动态生成的
+        : document.querySelectorAll(`#${clickUpIdDomName.value}`); //基本信息固定了id，其他的是动态生成的
     let sameDom;
     if (types == "UpLeft") {
       sameDom = doms && doms.length > 1 ? doms[1] : doms[0]; //点击修改左侧或右侧每点击相同名字的dom
@@ -655,7 +661,6 @@ const setLeaderlines = (types) => {
       endSocket: "left",
     };
     //左侧点击修改数据
-    console.log('domListUpRightName.value', domListUpRightName.value)
     for (const [key, value] of domListUpLeftName.value) {
       for (const [key2, value2] of domListUpMiddleName.value) {
         //又有新增又有修改，站控层
@@ -669,17 +674,15 @@ const setLeaderlines = (types) => {
           hiddenLine2();
         }
         for (const [key3, value3] of domListUpRightName.value) {
-          console.log('key2,key3', key2,key3)
           if (typeof key2 == "string" && key2.includes("del") && key2 == key3) {
-            console.log('33333', 33333)
-          let line4; //从左往右的线条
-          line4 = new LeaderLine(startDom, value, lineStyleDel);
-          leaderLineShow.value.push(line4);
-          let lineValue5;
-          lineValue5 = new LeaderLine(value, value2, lineStyleDel);
-          leaderLineShow.value.push(lineValue5);
-          hiddenLine2();
-        }
+            let line4; //从右往左的线条
+            line4 = new LeaderLine(value3, sameDom, lineStyleDel);
+            leaderLineShow.value.push(line4);
+            let lineValue5;
+            lineValue5 = new LeaderLine(value2, value3, lineStyleDel);
+            leaderLineShow.value.push(lineValue5);
+            hiddenLine2();
+          }
           if (key == key2 && key2 == key3) {
             let line; //从左往右的线条
             line = new LeaderLine(startDom, value, lineStylUp);
@@ -715,7 +718,6 @@ const setLeaderlines = (types) => {
     //左侧点击修改数据
     for (const [key, value] of domListUpRightName.value) {
       for (const [key2, value2] of domListUpMiddleName.value) {
-
         for (const [key3, value3] of domListUpLeftName.value) {
           if (key == key2 && key2 == key3) {
             let line; //从左往右的线条
@@ -1025,9 +1027,7 @@ onMounted(() => {
     >
       <!-- 修改中间数据的名字 -->
       <div
-        v-if="
-          (cClickCode != 'scd.ied' && !isDiffdescUpAdd&& !isDiffdescUpDel)
-        "
+        v-if="cClickCode != 'scd.ied' && !isDiffdescUpAdd && !isDiffdescUpDel"
       >
         <div v-for="(value, key) in newleftDataMiddle" :key="key">
           <div
@@ -1082,7 +1082,7 @@ onMounted(() => {
           v-for="(value, key) in CommunicationS1"
           :key="key"
           class="middle-frame"
-          :class="{ 'add-middle-frame': value.add == true }"
+          :class="{ 'del-middle-frame': value.add||value.del}"
         >
           <!-- 是修改的，!value.add 是修改加新增的  !value.del是修改加删除的  -->
           <div
@@ -1091,7 +1091,8 @@ onMounted(() => {
             :ref="(el) => setdomUPLeftName(el, key)"
           >
             <!-- 左侧类型修改 -->
-            {{ value.Type }}
+            <span v-if="value.Type&&!value.upAndDel">  {{ value.Type }}</span>
+          <span v-else-if="value.Name&&value.upAndDel">  {{ value.Name }}</span>
           </div>
           <div
             v-if="value.add"
@@ -1123,14 +1124,37 @@ onMounted(() => {
               </div>
             </div>
           </div>
-
+          <!-- 中间纯修改类型的值 -->
+          <div
+            class="middle-item"
+            :ref="(el) => setdomUPMiddleName(el, key)"
+            v-if="!value.add && !value.del"
+          >
+            <div class="middle-left">
+              <div class="type-text up-type-text wraps middle-up-type-text">
+                <span v-if="value.InnerText&&!value.upAndDel">{{ value.InnerText }}</span>
+                <span v-else-if="value.Val&&value.upAndDel">{{ value.Val.InnerText }}</span>
+                <span v-else>【空】</span>
+              </div>
+            </div>
+            <img :src="jiantou" alt="" style="width: 40px" />
+            <div class="middle-right">
+              <div class="type-text up-type-text wraps middle-up-type-text">
+                <span v-if="value.nnerTextRight != '空'&!value.upAndDel">{{
+                  value.nnerTextRight
+                }}</span>
+                <span v-else-if="value.Val&&value.upAndDel">{{ value.Val.InnerText }}</span>
+                <span v-else>【空】</span>
+              </div>
+            </div>
+          </div>
           <!-- 右侧类型修改删除的值 -->
           <div
             class="middle-item"
             style="
               border: 2px dashed #e50505;
               justify-content: start;
-              margin-left: 30px;
+              margin-right: 30px;
             "
             :ref="(el) => setdomUPMiddleName(el, key + key + 'del')"
             v-if="value.del"
@@ -1154,44 +1178,14 @@ onMounted(() => {
           >
             {{ value.Name }}
           </div>
-          <!-- 类型的值 -->
-          <div
-            class="middle-item"
-            :ref="(el) => setdomUPMiddleName(el, key)"
-            v-if="!value.add"
-          >
-            <div class="middle-left">
-              <div class="type-text up-type-text wraps middle-up-type-text">
-                <span v-if="value.InnerText">{{ value.InnerText }}</span>
-                <span v-else>【空】</span>
-              </div>
-            </div>
-            <img :src="jiantou" alt="" style="width: 40px" />
-            <div class="middle-right">
-              <div class="type-text up-type-text wraps middle-up-type-text">
-                <span v-if="value.nnerTextRight != '空'">{{
-                  value.nnerTextRight
-                }}</span>
-                <span v-else>【空】</span>
-              </div>
-            </div>
-          </div>
-          <!-- <div
-            v-if="value.nnerTextRight == '空'"
-            class="middle-type-text"
-            :ref="(el) => setdomUPLeftName(el, key)"
-          >
-            左侧类型新增的值
-            {{ value.InnerText }}
-          </div> -->
-          <!-- 右侧类型 -->
 
           <div
-            v-if="!value.add"
+            v-if="!value.add && !value.del"
             class="middle-type-text"
             :ref="(el) => setdomUpRightName(el, key)"
           >
-            {{ value.Type }}
+          <span v-if="value.Type&&!value.upAndDel">  {{ value.Type }}</span>
+          <span v-else-if="value.Name&&value.upAndDel">  {{ value.Name }}</span>
           </div>
         </div>
       </div>
@@ -1467,6 +1461,11 @@ onMounted(() => {
   .add-middle-frame {
     width: 50%;
   }
+  .del-middle-frame{
+    width: 50%;
+    position: absolute;
+    right: 20px;
+  }
   .middle-item {
     border: 2px dashed #ffa011;
     color: #09162c;

src/pages/netStructPicture/components/virtualnformation.vue

@@ -8,7 +8,7 @@
           <div class="cont-title">
             <img :src="devicePng" alt="" class="img-item" />
             <div class="cont-item">
-              <div>{{ item.ref_ied_desc }}</div>
+              <div>{{ item.descName }}</div>
               <div>{{ item.ied_name }}</div>
             </div>
           </div>
@@ -33,7 +33,7 @@
         <div class="cont-title">
           <img :src="devicePng" alt="" class="img-item" />
           <div class="middle-title" v-if="tagList">
-            <div>{{ tagList.desc }}</div>
+            <div>{{ middleTitelDesc }}</div>
             <div>{{ tagList.ied_name }}</div>
           </div>
         </div>
@@ -120,7 +120,7 @@
           <div class="cont-title">
             <img :src="devicePng" alt="" class="img-item" />
             <div class="cont-item">
-              <div>{{ item.ref_ied_desc }}</div>
+              <div>{{ item.descName }}</div>
               <div>{{ item.ied_name }}</div>
             </div>
           </div>
@@ -179,7 +179,8 @@ const props = defineProps({
 const svInfo = ref(null);
 //处理两边的数据
 const processBoth = (list, svResInfo, inoutType) => {
-  list.forEach((item, index) => {
+  const iedNames = {};
+  list.forEach(async (item, index) => {
     item.titleItems = [];
     svResInfo.data.forEach((key) => {
       if (key.ied_name == item.ied_name) {
@@ -188,6 +189,26 @@ const processBoth = (list, svResInfo, inoutType) => {
         }
       }
     });
+    let iedNames = {};
+    //为了得到每个小板块的标题描述
+    if (!iedNames[item.ied_name]) {
+      iedNames[item.ied_name] = true;
+      if (!item.isdel) {
+        const iedRes = await scdIedRelation({
+          scd_id: scdIdValue,
+          ied_name: item.ied_name,
+          reset: 1,
+        });
+        item.descName = iedRes.data[item.ied_name].desc;
+      } else {
+        const iedRes = await scdIedRelation({
+          scd_id: props.clickRowDatas.target_id,
+          ied_name: item.ied_name,
+          reset: 1,
+        });
+        item.descName = iedRes.data[item.ied_name].desc;
+      }
+    }
   });
   console.log("list=========", list);
 };
@@ -235,6 +256,7 @@ watch(
   (newValue) => {
     if (newValue) {
       tagList.value = newValue;
+      clickResetLine3()
       getNetworkInfo3();
     }
   }
@@ -246,15 +268,19 @@ watch(
     if (newValue) {
       console.log("newValue========", newValue);
       cClickCode.value = newValue;
+      clickResetLine3();
       getNetworkInfo3();
     }
   }
 );
 // //scd一致性对比====
 const bothdataList = ref([]); //处理得到总的两边的数据
+const middleTitelDesc = ref('');//中间数据的标题
 //得到中间的子版块数据
 const getNetworkInfo3 = async () => {
   bothdataList.value = [];
+  leftList.value = [];
+  rightList.value = [];
   let svResInfo;
   //scd一致性对比====
   const ids = clickRow.value ? clickRow.value.id : "";
@@ -265,11 +291,12 @@ const getNetworkInfo3 = async () => {
     comptype: "u",
     itemcode: cClickCode.value,
   });
-  //   const iedRes = await scdIedRelation({
-  //       scd_id: scdIdValue,
-  //       ied_name: names,
-  //       reset: 1,
-  //     });
+  const iedRes = await scdIedRelation({
+    scd_id: scdIdValue,
+    ied_name: names,
+    reset: 1,
+  });
+middleTitelDesc.value = iedRes.data[names].desc
   //省略号===
   const data = {
     attr_ld_inst: "",
@@ -298,12 +325,22 @@ const getNetworkInfo3 = async () => {
       }
     }
   });
-  console.log(rightList.value, "bothdataList.value", leftList.value);
+
+  // recordDelIedVer  删除的全部数据
+  props.recordDelIedVer.forEach((itemdel) => {
+    svResInfo.data.forEach((item) => {
+      if (itemdel.ied_name == item.ied_name) {
+        item.isdel = true;
+      }
+    });
+  });
+
   //处理两边的数据
   if (svResInfo.data.length > 0) {
     processBoth(leftList.value, svResInfo, "in");
     processBoth(rightList.value, svResInfo, "out");
   }
+  console.log(leftList.value, "first============", props.clickRowDatas);
   //处理中间的数据有省略号的
   let newData = [];
   for (let i = 0; i < svResInfo.data.length; i++) {