一致性对比结果，修改包含新增，修改包含删除（还未写完整）

src/pages/netStructPicture/components/Gsix.vue

@@ -11,6 +11,7 @@ import LeaderLine from "../../../../public/leader-line.min.js";
 import AnimEvent from "../../../../public/anim-event.min.js";
 import { hiddenLine2, hiddenLineDialog } from "@/utils/linesPosition";
 import jiantou from "@/assets/image/CID/jiantou.png";
+import { translate } from "element-plus";
 const props = defineProps({
   clickRowDatas: {
     type: Object,
@@ -69,7 +70,8 @@ watch(
   () => props.clickCodeValue,
   (newValue) => {
     if (newValue) {
-      isDiffdesc.value = false; //点击侧边栏的时候站控层的这个先置为空
+      isDiffdescUpAdd.value = false; //点击侧边栏的时候站控层的这个先置为空
+      isDiffdescUpDel.value = false;
       cClickCode.value = newValue;
       CodeImg(newValue); //找到差异项对应的图片进行展示
       clickLineResult(); //重置
@@ -111,7 +113,8 @@ const IorDClick = ref({}); //点击或默认显示的连线数据
 const rightStartDom = ref(null); //右侧图片带差异名字大板块的dom
 const leftStartDom = ref(null); //左侧图片带差异名字大板块的dom
 const middleMain = ref(null);
-const isDiffdesc = ref(false); //判断是否是数组，如果是数组并且又是修改，那么修改的数据显示需要重新处理
+const isDiffdescUpAdd = ref(false); //判断是否是数组，如果是数组并且又是修改并且有属性P，那么表示修改新增，修改的数据显示需要重新处理
+const isDiffdescUpDel = ref(false); //判断是否是数组，如果是数组并且又是修改并且有属性DAI，那么表示修改删除，那么修改的数据显示需要重新处理
 const getData = async () => {
   dones();
   const ids = clickRow.value ? clickRow.value.id : "";
@@ -127,7 +130,8 @@ const getData = async () => {
       let text;
       text = item.diff_desc.replace(/[\r|\n|\t]/g, ""); //处理返回的数据中换行等，整理好规整数据
       item.diff_desc = JSON.parse(text);
-      isDiffdesc.value = false;
+      isDiffdescUpAdd.value = false;
+      isDiffdescUpDel.value = false;
       switch (item.diff_opt) {
         case "i": //新增
           leftI.value.push(item);
@@ -140,7 +144,6 @@ const getData = async () => {
           break;
       }
     });
-  } else {
   }
   mapList.value = res.data;
   nextTick(() => {
@@ -214,15 +217,14 @@ const newrightData = ref(null);
 const clickUpIdDomName = ref(null); //点击的name
 const Communication = (arr, list) => {
   //站控层数据特殊处理
-  if (
-    Array.isArray(arr) &&
-    list.diff_opt == "u" &&
-    cClickCode.value == "scd.ied.Communication.S1"
-  ) {
+  if (Array.isArray(arr) && arr[0].P && list.diff_opt == "u") {
     //如果是站控层，数据要从新处理并且是数组
-    isDiffdesc.value = true;
+    isDiffdescUpAdd.value = true;
+  } else if (Array.isArray(arr) && arr[0].DAI && list.diff_opt == "u") {
+    isDiffdescUpDel.value = true;
   } else {
-    isDiffdesc.value = false;
+    isDiffdescUpAdd.value = false;
+    isDiffdescUpDel.value = false;
   }
 };
 const clickUpTypeImgLeft = (arr, event, name, list) => {
@@ -234,12 +236,16 @@ const clickUpTypeImgLeft = (arr, event, name, list) => {
     setLeaderlines("UpLeft");
     newPositionLine2(leaderLineShow.value);
   }, 100);
-  if (!isDiffdesc.value && arr.length > 0) {
-    //如果不是修改数据并且diff_desc不是数组
+  console.log("arr-----", arr);
+  if (!isDiffdescUpAdd.value && !isDiffdescUpDel.value && arr.length > 0) {
+    //只有修改
     clickUpTypeImg(arr, event);
-  } else if (isDiffdesc.value) {
+  } else if (isDiffdescUpDel.value) {
+    //修改里面包含删除
+    clickUpTypeImgUpDel(arr, event);
+  } else if (isDiffdescUpAdd.value) {
     //修改里面包含新增和删除
-    clickUpTypeImgUpdate(arr, event);
+    clickUpTypeImgUpAdd(arr, event);
   }
 };
 const clickUpTypeImgRight = (arr, event, name, list) => {
@@ -251,16 +257,42 @@ const clickUpTypeImgRight = (arr, event, name, list) => {
     setLeaderlines("UpRight");
     newPositionLine2(leaderLineShow.value);
   }, 100);
-  if (!isDiffdesc.value && arr.length > 0) {
+  if (!isDiffdescUpAdd.value && arr && arr.length > 0) {
+    //只有修改
     clickUpTypeImg(arr, event);
-  } else if (isDiffdesc.value) {
+  } else if (isDiffdescUpDel.value) {
+    //修改里面包含删除
+    clickUpTypeImgUpDel(arr, event);
+  } else if (isDiffdescUpAdd.value) {
     //修改里面包含新增和删除
-    clickUpTypeImgUpdate(arr, event);
+    clickUpTypeImgUpAdd(arr, event);
   }
 };
 const CommunicationS1 = ref([]); //站控层的修改时有新增和修改的数据
-const clickUpTypeImgUpdate = (arr, event) => {
+// const CommunicationS1 = ref([]); //站控层的修改时有新增和删除的数据
+const clickUpTypeImgUpDel = (arr, event) => {
+  arr[1].DAI.forEach((item1) => {
+    let found = false;
+    arr[0].DAI.forEach((item2) => {
+      if (item1.Name === item2.Name) {
+        CommunicationS1.value.push(item1);
+        found = true;
+      }
+    });
+    if (!found) {
+      CommunicationS1.value.push({ ...item1, del: true });
+    }
+  });
+  //修改遥控  如果data[0].DAI数组对象中的Name和如果data[0].DAI数组中的Name和data[1].DAI数组对象中的Name相同，
+  // 添加data[0].DAI中的那一项到新数组中，如果data[1].DAI数组对象中的Name，data[0]中没有，那么添加到数组中并添加一个属性del：true
+  //示例结果，给出js代码
+};
+const clickUpTypeImgUpAdd = (arr, event) => {
   //点击修改的图片
+  // // data中[0]的属性的数组中的Type值等于了data中[1]的属性的数组中的Type值,并且nnerText值也相同就不用放在newdata新数组中
+  // // 如果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);
@@ -295,53 +327,15 @@ const clickUpTypeImgUpdate = (arr, event) => {
       }
     });
   }
-  CommunicationS1.value.forEach(item=>{
-    if(item.nnerTextRight == ''){
-      item.add = true;
-      CommunicationS1.value.push(item)
+  //新增 的数据
+  let itemsToAdd = [];
+  CommunicationS1.value.forEach((item) => {
+    if (item.nnerTextRight == "空") {
+      itemsToAdd.push({ ...item, add: true });
     }
-  })
+  });
+  CommunicationS1.value.push(...itemsToAdd);
   console.log(" CommunicationS1.value", CommunicationS1.value);
-  // const data = [
-  //   {
-  //     P: [
-  //       { InnerText: "255.255.0.0", Type: "IP-SUBNET" },
-  //       { nnerText: "255.255.0.0", Type: "IP-GATEWAY" },
-  //       { nnerText: "00 01", Type: "OSI-TSEL" },
-  //       { nnerText: "00 01", Type: "OSI-SSEL" },
-  //       { InnerText: "00 00 00 01", Type: "OSI-PSEL" },
-  //       { nnerText: "OSI-NSAP", Type: "OSI-NSAP" },
-  //       { nnerText: "1 3 9999 33", Type: "OSI-AP-Title" },
-  //       { nnerText: "OSI-AP-Invoke", Type: "OSI-AP-Invoke" },
-  //       { nnerText: "33", Type: "OSI-AE-Qualifier" },
-  //       { nnerText: "OSI-AE-Invoke", Type: "OSI-AE-Invoke" },
-  //       { nnerText: "172.20.11.2", Type: "IP" },
-  //     ],
-  //   },
-  //   {
-  //     P: [
-  //       { nnerText: "198.120.0.58", Type: "IP" },
-  //       { nnerText: "255.255.0.0", Type: "IP-SUBNET" },
-  //     ],
-  //   },
-  // ];
-  // // data中[0]的属性的数组中的Type值等于了data中[1]的属性的数组中的Type值,并且nnerText值也相同就不用放在newdata新数组中
-  // // 如果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为空，那么同时展示在左侧最下方表示新增
-  // // 示例结果
-  // const newdata = [
-  //   { nnerText: "255.255.0.0", Type: "IP-GATEWAY", nnerTextRight: "空" },
-  //   { nnerText: "00 01", Type: "OSI-TSEL", nnerTextRight: "空" },
-  //   { nnerText: "00 01", Type: "OSI-SSEL", nnerTextRight: "空" },
-  //   { InnerText: "00 00 00 01", Type: "OSI-PSEL", nnerTextRight: "空" },
-  //   { nnerText: "OSI-NSAP", Type: "OSI-NSAP", nnerTextRight: "空" },
-  //   { nnerText: "1 3 9999 33", Type: "OSI-AP-Title", nnerTextRight: "空" },
-  //   { nnerText: "OSI-AP-Invoke", Type: "OSI-AP-Invoke", nnerTextRight: "空" },
-  //   { nnerText: "33", Type: "OSI-AE-Qualifier", nnerTextRight: "空" },
-  //   { nnerText: "OSI-AE-Invoke", Type: "OSI-AE-Invoke", nnerTextRight: "空" },
-  //   { nnerText: "172.20.11.2", Type: "IP", nnerTextRight: "198.120.0.58" },
-  // ];
 };
 const setTopDiffName = (event) => {
   const dom1Rect = rightStartDom.value.getBoundingClientRect();
@@ -352,10 +346,10 @@ const setTopDiffName = (event) => {
     let keyCount = newrightData.value
       ? Object.keys(newrightData.value).length
       : 0;
-    let keyCount2 = newrightData.value
+    let keyCount2 = newleftData.value
       ? Object.keys(newleftData.value).length
       : 0;
-    if ((keyCount != 0 && keyCount < 3) || (keyCount != 0 && keyCount2 < 3)) {
+    if ((keyCount > 0 && keyCount < 3) || (keyCount > 1 && keyCount2 < 0)) {
       const nums = evt.top - dom2Rect.top + 160 + "px";
       const numsR = evt.top - dom1Rect.top + 160 + "px";
       addDiff.value.style.top = nums;
@@ -437,7 +431,6 @@ function flattenObject(obj, prefix = "") {
       flattenedObj[`${prefix}${key}`] = obj[key];
     }
   }
-  console.log("flattenedObj", flattenedObj);
   return flattenedObj;
 }
 //动态处理点击右侧code左右侧大板块图片
@@ -536,6 +529,7 @@ const setdomUpRightName = (el, item) => {
   if (el) {
     domListUpRightName.value.set(item, el);
   }
+  console.log('domListUpRightName.value', domListUpRightName.value)
 };
 const lineStyleAdd = {
   color: "#134bea",
@@ -632,7 +626,7 @@ const setLeaderlines = (types) => {
         }
       }
     }
-  } else if (
+  } else if (//点击修改的左侧图标或装置信息中的基本信息
     (types == "UpLeft" && domListUpLeft.value) ||
     (types == "UpLeftBasic" && cClickCode.value == "scd.ied")
   ) {
@@ -640,14 +634,10 @@ const setLeaderlines = (types) => {
       types == "UpLeft"
         ? domListUpLeft.value
         : document.getElementById("leftBasic");
-    console.log(
-      "first",
-      document.querySelectorAll(`#${clickUpIdDomName.value}`)
-    );
     const doms =
       types == "UpLeftBasic"
         ? domListUpRight.value
-        : document.querySelectorAll(`#${clickUpIdDomName.value}`);
+        : document.querySelectorAll(`#${clickUpIdDomName.value}`);//基本信息固定了id，其他的是动态生成的
     let sameDom;
     if (types == "UpLeft") {
       sameDom = doms && doms.length > 1 ? doms[1] : doms[0]; //点击修改左侧或右侧每点击相同名字的dom
@@ -665,9 +655,31 @@ 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) {
+        //又有新增又有修改，站控层
+        if (typeof key == "string" && key.includes("add") && key == key2) {
+          let line4; //从左往右的线条
+          line4 = new LeaderLine(startDom, value, lineStyleAdd);
+          leaderLineShow.value.push(line4);
+          let lineValue5;
+          lineValue5 = new LeaderLine(value, value2, lineStyleAdd);
+          leaderLineShow.value.push(lineValue5);
+          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();
+        }
           if (key == key2 && key2 == key3) {
             let line; //从左往右的线条
             line = new LeaderLine(startDom, value, lineStylUp);
@@ -703,6 +715,7 @@ 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; //从左往右的线条
@@ -724,10 +737,6 @@ const setLeaderlines = (types) => {
       }
     }
   }
-  // else if(types=='UpLeftBasic'&&cClickCode.value=='scd.ied'){
-  //   console.log('domListUpLeftName.value', domListUpLeftName.value)
-
-  // }
 };
 //滚动时重定位线条
 const newPositionLine2 = (diffline) => {
@@ -782,6 +791,7 @@ const removeLine2 = () => {
 const clickLineResult = () => {
   clickReset();
   CommunicationS1.value = [];
+  CommunicationS1.value = [];
   domListAddName.value.clear();
   domListAddValue.value.clear();
   domListDelName.value.clear();
@@ -1014,7 +1024,11 @@ onMounted(() => {
       ref="middleMain"
     >
       <!-- 修改中间数据的名字 -->
-      <div v-if="cClickCode != 'scd.ied' && !isDiffdesc">
+      <div
+        v-if="
+          (cClickCode != 'scd.ied' && !isDiffdescUpAdd&& !isDiffdescUpDel)
+        "
+      >
         <div v-for="(value, key) in newleftDataMiddle" :key="key">
           <div
             v-for="(value2, key2) in newrightDataMiddle"
@@ -1057,17 +1071,22 @@ onMounted(() => {
           </div>
         </div>
       </div>
-      <!-- 站控层通信参数 -->
-      <div v-else-if="cClickCode != 'scd.ied' && isDiffdesc">
-        <!-- 11111CommunicationS1 -->
+      <!-- 修改加新增的或修改加删除 -->
+      <div
+        v-else-if="
+          (cClickCode != 'scd.ied' && isDiffdescUpAdd) ||
+          (cClickCode != 'scd.ied' && isDiffdescUpDel)
+        "
+      >
         <div
           v-for="(value, key) in CommunicationS1"
           :key="key"
           class="middle-frame"
+          :class="{ 'add-middle-frame': value.add == true }"
         >
-        <!-- !value.add 是修改的，否则是新增的 -->
+          <!-- 是修改的，!value.add 是修改加新增的  !value.del是修改加删除的  -->
           <div
-            v-if="!value.add"
+            v-if="!value.add && !value.del"
             class="middle-type-text"
             :ref="(el) => setdomUPLeftName(el, key)"
           >
@@ -1077,13 +1096,70 @@ onMounted(() => {
           <div
             v-if="value.add"
             class="middle-type-text"
-            :ref="(el) => setdomUPLeftName(el, key)"
+            style="color: #134bea; border: 1px solid #134bea"
+            :ref="(el) => setdomUPLeftName(el, key + key + 'add')"
           >
-            <!-- 左侧类型修改 -->
+            <!-- 左侧类型新增 -->
             {{ value.Type }}
           </div>
+          <!-- 左侧类型新增的值 -->
+          <div
+            class="middle-item"
+            style="
+              border: 2px dashed #134bea;
+              justify-content: start;
+              margin-left: 30px;
+            "
+            :ref="(el) => setdomUPMiddleName(el, key + key + 'add')"
+            v-if="value.add"
+          >
+            <div class="middle-left">
+              <div
+                class="type-text up-type-text wraps middle-up-type-text"
+                style="color: #134bea"
+              >
+                <span v-if="value.InnerText">{{ value.InnerText }}</span>
+                <span v-else>【空】</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 右侧类型修改删除的值 -->
+          <div
+            class="middle-item"
+            style="
+              border: 2px dashed #e50505;
+              justify-content: start;
+              margin-left: 30px;
+            "
+            :ref="(el) => setdomUPMiddleName(el, key + key + 'del')"
+            v-if="value.del"
+          >
+            <div class="middle-right">
+              <div
+                class="type-text up-type-text wraps middle-up-type-text"
+                style="color: #e50505"
+              >
+                <span v-if="value.Val">{{ value.Val.InnerText }}</span>
+                <span v-else>【空】</span>
+              </div>
+            </div>
+          </div>
+          <!-- 右侧类型修改和删除 -->
+          <div
+            v-if="value.del"
+            class="middle-type-text"
+            style="color: #e50505; border: 2px solid #e50505"
+            :ref="(el) => setdomUpRightName(el, key + key + 'del')"
+          >
+            {{ value.Name }}
+          </div>
           <!-- 类型的值 -->
-          <div class="middle-item" :ref="(el) => setdomUPMiddleName(el, key)" v-if="!value.add">
+          <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>
@@ -1109,8 +1185,9 @@ onMounted(() => {
             {{ value.InnerText }}
           </div> -->
           <!-- 右侧类型 -->
+
           <div
-          v-if="!value.add"
+            v-if="!value.add"
             class="middle-type-text"
             :ref="(el) => setdomUpRightName(el, key)"
           >
@@ -1381,11 +1458,15 @@ onMounted(() => {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  .middle-frame {
+  .middle-frame,
+  .add-middle-frame {
     display: flex;
     justify-content: space-around;
     align-items: center;
   }
+  .add-middle-frame {
+    width: 50%;
+  }
   .middle-item {
     border: 2px dashed #ffa011;
     color: #09162c;