站控层的数据修改，新增还未出来

src/pages/netStructPicture/components/CidTree.vue

@@ -222,7 +222,7 @@ const codeStatic = async () => {
 const updateNum = (treeNode, data) => {
   for (let node of treeNode) {  
     // 检查当前节点的 itemcode 是否在 data 中  
-    if (data.hasOwnProperty(node.itemcode)) {  
+    if (data&&data.hasOwnProperty(node.itemcode)) {  
       node.num = parseInt(data[node.itemcode], 10);  
     }  
   

src/pages/netStructPicture/components/Gsix.vue

@@ -69,6 +69,7 @@ watch(
   () => props.clickCodeValue,
   (newValue) => {
     if (newValue) {
+      isDiffdesc.value = false; //点击侧边栏的时候站控层的这个先置为空
       cClickCode.value = newValue;
       CodeImg(newValue); //找到差异项对应的图片进行展示
       clickLineResult(); //重置
@@ -110,6 +111,7 @@ const IorDClick = ref({}); //点击或默认显示的连线数据
 const rightStartDom = ref(null); //右侧图片带差异名字大板块的dom
 const leftStartDom = ref(null); //左侧图片带差异名字大板块的dom
 const middleMain = ref(null);
+const isDiffdesc = ref(false); //判断是否是数组，如果是数组并且又是修改，那么修改的数据显示需要重新处理
 const getData = async () => {
   dones();
   const ids = clickRow.value ? clickRow.value.id : "";
@@ -122,12 +124,10 @@ const getData = async () => {
   });
   if (res.data && cClickCode.value != "scd.ied") {
     res.data.forEach((item) => {
-      if (item.diff_desc) {
-        let text;
-        text = item.diff_desc.replace(/[\r|\n|\t]/g, ""); //处理返回的数据中换行等，整理好规整数据
-        item.diff_desc = JSON.parse(text);
-      }
-      console.log("item", item);
+      let text;
+      text = item.diff_desc.replace(/[\r|\n|\t]/g, ""); //处理返回的数据中换行等，整理好规整数据
+      item.diff_desc = JSON.parse(text);
+      isDiffdesc.value = false;
       switch (item.diff_opt) {
         case "i": //新增
           leftI.value.push(item);
@@ -187,6 +187,7 @@ const clickReset = () => {
 const addDiff = ref(0);
 const delDiff = ref(0);
 const comonTypeImg = (item, event, num) => {
+  clickLineResult();
   setTopDiffName(event);
   newrightData.value = null;
   newleftData.value = null;
@@ -211,26 +212,136 @@ const comonTypeImg = (item, event, num) => {
 const newleftData = ref(null);
 const newrightData = ref(null);
 const clickUpIdDomName = ref(null); //点击的name
-const clickUpTypeImgLeft = (arr, event, name) => {
+const Communication = (arr, list) => {
+  //站控层数据特殊处理
+  if (
+    Array.isArray(arr) &&
+    list.diff_opt == "u" &&
+    cClickCode.value == "scd.ied.Communication.S1"
+  ) {
+    //如果是站控层，数据要从新处理并且是数组
+    isDiffdesc.value = true;
+  } else {
+    isDiffdesc.value = false;
+  }
+};
+const clickUpTypeImgLeft = (arr, event, name, list) => {
   clickLineResult();
+  Communication(arr, list);
   clickUpIdDomName.value = name.replace(/[^\w\s]/g, ""); //如果有冒号query查找会报错，所以替换 成了点
-  console.log(" clickUpIdDomName.value", clickUpIdDomName.value);
   domListUpLeft.value = event.target;
   setTimeout(() => {
     setLeaderlines("UpLeft");
     newPositionLine2(leaderLineShow.value);
   }, 100);
-  clickUpTypeImg(arr, event);
+  if (!isDiffdesc.value && arr.length > 0) {
+    //如果不是修改数据并且diff_desc不是数组
+    clickUpTypeImg(arr, event);
+  } else if (isDiffdesc.value) {
+    //修改里面包含新增和删除
+    clickUpTypeImgUpdate(arr, event);
+  }
 };
-const clickUpTypeImgRight = (arr, event, name) => {
+const clickUpTypeImgRight = (arr, event, name, list) => {
   clickLineResult();
+  Communication(arr, list);
   clickUpIdDomName.value = name.replace(/[^\w\s]/g, "");
   domListUpRight.value = event.target;
   setTimeout(() => {
     setLeaderlines("UpRight");
     newPositionLine2(leaderLineShow.value);
   }, 100);
-  clickUpTypeImg(arr, event);
+  if (!isDiffdesc.value && arr.length > 0) {
+    clickUpTypeImg(arr, event);
+  } else if (isDiffdesc.value) {
+    //修改里面包含新增和删除
+    clickUpTypeImgUpdate(arr, event);
+  }
+};
+const CommunicationS1 = ref([]); //站控层的修改时有新增和修改的数据
+const clickUpTypeImgUpdate = (arr, event) => {
+  //点击修改的图片
+  console.log("arr-----", arr);
+  clickLineResult();
+  setTopDiffName(event);
+  if (arr.length && arr.length > 0) {
+    arr[0].P.forEach((item1) => {
+      let foundMatch = false;
+
+      for (let item2 of arr[1].P) {
+        if (item1.Type === item2.Type) {
+          foundMatch = true;
+          // 正则是为了删除所有的空格
+          if (
+            item1.InnerText.replace(/\s+/g, "") !=
+            item2.InnerText.replace(/\s+/g, "")
+          ) {
+            CommunicationS1.value.unshift({
+              InnerText: item1.InnerText,
+              Type: item1.Type,
+              nnerTextRight: item2.InnerText,
+            });
+          }
+          break;
+        }
+      }
+
+      if (!foundMatch) {
+        CommunicationS1.value.unshift({
+          InnerText: item1.InnerText,
+          Type: item1.Type,
+          nnerTextRight: "空",
+        });
+      }
+    });
+  }
+  CommunicationS1.value.forEach(item=>{
+    if(item.nnerTextRight == ''){
+      item.add = true;
+      CommunicationS1.value.push(item)
+    }
+  })
+  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();
@@ -326,6 +437,7 @@ function flattenObject(obj, prefix = "") {
       flattenedObj[`${prefix}${key}`] = obj[key];
     }
   }
+  console.log("flattenedObj", flattenedObj);
   return flattenedObj;
 }
 //动态处理点击右侧code左右侧大板块图片
@@ -669,6 +781,7 @@ const removeLine2 = () => {
 //点击的线条重置
 const clickLineResult = () => {
   clickReset();
+  CommunicationS1.value = [];
   domListAddName.value.clear();
   domListAddValue.value.clear();
   domListDelName.value.clear();
@@ -743,7 +856,12 @@ onMounted(() => {
             :key="index"
             class="left-item-cont"
             @click="
-              clickUpTypeImgLeft(item.diff_desc, $event, item.diff_object_name)
+              clickUpTypeImgLeft(
+                item.diff_desc,
+                $event,
+                item.diff_object_name,
+                item
+              )
             "
             :ref="(el) => setdomLeftMain(el, item.diff_object_name)"
             :id="item.diff_object_name.replace(/[^\w\s]/g, '')"
@@ -827,7 +945,12 @@ onMounted(() => {
             :key="index"
             class="left-item-cont"
             @click="
-              clickUpTypeImgRight(item.diff_desc, $event, item.diff_object_name)
+              clickUpTypeImgRight(
+                item.diff_desc,
+                $event,
+                item.diff_object_name,
+                item
+              )
             "
             :id="item.diff_object_name.replace(/[^\w\s]/g, '')"
             :ref="(el) => setdomRightMain(el, item.diff_object_name)"
@@ -891,7 +1014,7 @@ onMounted(() => {
       ref="middleMain"
     >
       <!-- 修改中间数据的名字 -->
-      <div v-if="cClickCode != 'scd.ied'">
+      <div v-if="cClickCode != 'scd.ied' && !isDiffdesc">
         <div v-for="(value, key) in newleftDataMiddle" :key="key">
           <div
             v-for="(value2, key2) in newrightDataMiddle"
@@ -934,6 +1057,67 @@ onMounted(() => {
           </div>
         </div>
       </div>
+      <!-- 站控层通信参数 -->
+      <div v-else-if="cClickCode != 'scd.ied' && isDiffdesc">
+        <!-- 11111CommunicationS1 -->
+        <div
+          v-for="(value, key) in CommunicationS1"
+          :key="key"
+          class="middle-frame"
+        >
+        <!-- !value.add 是修改的，否则是新增的 -->
+          <div
+            v-if="!value.add"
+            class="middle-type-text"
+            :ref="(el) => setdomUPLeftName(el, key)"
+          >
+            <!-- 左侧类型修改 -->
+            {{ value.Type }}
+          </div>
+          <div
+            v-if="value.add"
+            class="middle-type-text"
+            :ref="(el) => setdomUPLeftName(el, key)"
+          >
+            <!-- 左侧类型修改 -->
+            {{ value.Type }}
+          </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"
+            class="middle-type-text"
+            :ref="(el) => setdomUpRightName(el, key)"
+          >
+            {{ value.Type }}
+          </div>
+        </div>
+      </div>
       <!-- 装置信息基本信息修改 -->
       <div v-else-if="mapList && mapList.length > 0 && cClickCode == 'scd.ied'">
         <div v-for="(value, key) in mapList[0]" :key="key">