scd

src/pages/netStructPicture/components/Gsix.vue

@@ -42,7 +42,7 @@ const props = defineProps({
 
 const clickRow = ref(props.clickRowDatas);
 let tagList = ref(null); //左侧更改的设备列表
-
+//对比文件：头部对比的单个数据
 watch(
   () => props.clickRowDatas,
   (newValue) => {
@@ -51,19 +51,14 @@ watch(
     }
   }
 );
-watch(
-  () => props.iedRelation,
-  (newValue) => {
-    if (newValue) {
-      tagList.value = Object.values(newValue)[0];
-    }
-  }
-);
+//点击装置列表的数据变化
 watch(
   () => props.clickList,
   (newValue) => {
     if (newValue) {
+      console.log("newVallueclickList", newValue);
       tagList.value = newValue;
+      result();
     }
   }
 );
@@ -72,7 +67,11 @@ watch(
   () => props.clickCodeValue,
   (newValue) => {
     if (newValue) {
+      DelClick.value = {};
+      IorDClick.value = {};
+      console.log("first", newValue);
       cClickCode.value = newValue;
+      clickReset();
       result();
     }
   }
@@ -82,16 +81,20 @@ const mapList = ref(null);
 const leftI = ref([]); //新增
 const dataU = ref([]); //修改
 const rightD = ref([]); //删除
+const loading = ref(true);
 const dones = () => {
   //重置
   leftI.value = [];
   dataU.value = [];
   rightD.value = [];
 };
-const leftItem = ref(null);
+const mianItem = ref(null);
 const heights = ref(0);
 const middleLine = ref(null);
 const IorDClick = ref({}); //点击或默认显示的连线数据
+const rightStartDom = ref(null); //右侧图片带差异名字大板块的dom
+const leftStartDom = ref(null); //左侧图片带差异名字大板块的dom
+const middleMain = ref(null);
 const result = async () => {
   dones();
   const ids = clickRow.value ? clickRow.value.id : "";
@@ -104,7 +107,11 @@ const result = async () => {
   });
   if (res.data) {
     res.data.forEach((item) => {
-      item.diff_desc = JSON.parse(item.diff_desc);
+      if (item.diff_desc) {
+        let text;
+        text = item.diff_desc.replace(/[\r|\n|\t]/g, "");
+        item.diff_desc = JSON.parse(text);
+      }
       switch (item.diff_opt) {
         case "i": //新增
           leftI.value.push(item);
@@ -118,27 +125,38 @@ const result = async () => {
       }
     });
   }
-
-  console.log("first", leftI.value, "rightD.value", "dataU.value", dataU.value);
-  // IorDClick;
   mapList.value = res.data;
   nextTick(() => {
     middleLine.value.style.height = 0;
-    middleLine.value.style.height = leftItem.value.scrollHeight + "px";
-    console.log("first", middleLine.value.style.height);
+    middleLine.value.style.height = mianItem.value.scrollHeight + "px";
   });
+  console.log("dataU.value", dataU.value);
+  loading.value = false;
 };
 //点击新增或删除的图片
+const DelClick = ref({});
 const clickTypeImg = (item, event) => {
-  IorDClick.value = {};
-  comonTypeImg(item, event)
+  clickReset();
+  comonTypeImg(item, event);
+};
+const clickTypeImgDel = (item, event) => {
+  clickReset();
+  comonTypeImg(item, event, 2);
 };
-const clickTypeImgDel = (item,event) =>{
+const clickReset = () => {
+  DelClick.value = {};
   IorDClick.value = {};
-  comonTypeImg(item,event)
-}
-const comonTypeImg = (item,event) =>{
-  console.log("event111111111", event);
+  newrightData.value = {};
+  newleftData.value = {};
+  if (addDiff.value && delDiff.value) {
+    addDiff.value.style.top = 0;
+    delDiff.value.style.top = 0;
+  }
+};
+const addDiff = ref(0);
+const delDiff = ref(0);
+const comonTypeImg = (item, event, num) => {
+  setTopDiffName(event);
   newrightData.value = null;
   newleftData.value = null;
   for (let key in item.diff_desc) {
@@ -149,18 +167,52 @@ const comonTypeImg = (item,event) =>{
         typeof value === "boolean" ||
         typeof value === "number"
       ) {
-        IorDClick.value[key] = value;
+        if (num == 2) {
+          DelClick.value[key] = value;
+        } else {
+          IorDClick.value[key] = value;
+        }
       }
     }
   }
-  console.log(" IorDClick.value", IorDClick.value);
-}
+};
 //点击修改的图片
 const newleftData = ref(null);
 const newrightData = ref(null);
+const clickUpTypeImgLeft = (arr, event) => {
+  clickUpTypeImg(arr, event);
+};
+const clickUpTypeImgRight = (arr, event) => {
+  clickUpTypeImg(arr, event);
+};
+const setTopDiffName = (event) => {
+  const dom1Rect = rightStartDom.value.getBoundingClientRect();
+  const dom2Rect = leftStartDom.value.getBoundingClientRect();
+  //设置差异未知
+  nextTick(() => {
+    const evt = event.target.getBoundingClientRect();
+    let keyCount = newrightData.value
+      ? Object.keys(newrightData.value).length
+      : 0;
+    let keyCount2 = newrightData.value
+      ? Object.keys(newleftData.value).length
+      : 0;
+    if (keyCount < 3 || keyCount2 < 3) {
+      const nums = evt.top - dom2Rect.top + 160 + "px";
+      addDiff.value.style.top = nums;
+      delDiff.value.style.top = nums;
+      middleMain.value.style.top = nums;
+    } else {
+      const nums2 = evt.top - dom2Rect.top + 60 + "px";
+      addDiff.value.style.top = nums2;
+      delDiff.value.style.top = nums2;
+      middleMain.value.style.top = nums2;
+    }
+  });
+};
 const clickUpTypeImg = (arr, event) => {
-  console.log("event", event);
-  IorDClick.value = null;
+  clickReset();
+  setTopDiffName(event);
   let newleft = {};
   let newright = {};
   for (let key in arr[0]) {
@@ -219,12 +271,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="main" ref="leftItem">
+  <div class="main" ref="mianItem" v-loading="loading">
     <!-- 左侧 -->
-    <div
-      class="left-main"
-      v-if="(leftI && leftI.length) || dataU & dataU.length"
-    >
+    <div class="left-main" v-if="(leftI && leftI.length) || dataU">
       <!-- 名称 -->
       <div class="ied-name">
         <img :src="squer" alt="" />
@@ -239,20 +288,21 @@ onMounted(() => {
             dataU.length > 5 ||
             leftI.length + dataU.length > 5,
         }"
+        ref="leftStartDom"
       >
-        <!-- 修改 -->
+        <!-- 左侧修改 -->
         <div v-show="dataU.length > 0">
           <div
             v-for="(item, index) in dataU"
             :key="index"
             class="left-item-cont"
-            @click="clickUpTypeImg(item.diff_desc, $event)"
+            @click="clickUpTypeImgLeft(item.diff_desc, $event)"
           >
             <div class="item-img">
               <img :src="b_report14" alt="" class="type-img" />
               <img :src="modify0" alt="" class="type-img-mini" />
             </div>
-            <div>{{ item.diff_object_name }}</div>
+            <div class="wraps">{{ item.diff_object_name }}</div>
           </div>
         </div>
         <!-- 新增 -->
@@ -267,25 +317,44 @@ onMounted(() => {
               <img :src="b_report14" alt="" class="type-img" />
               <img :src="newly0" alt="" class="type-img-mini" />
             </div>
-            <div>{{ item.diff_object_name }}</div>
+            <div class="wraps">{{ item.diff_object_name }}</div>
           </div>
         </div>
       </div>
-      <div class="left-difference" v-if="IorDClick">
+      <!-- 左侧新增差异名字 -->
+      <div class="left-difference" v-if="IorDClick" ref="addDiff">
         <!-- key是键,value是值,循环的是对象 -->
-         <div v-for="(value, key) in IorDClick" :key="key">
-           <div class="type-text">
-              {{ key }}
-           </div>
-         </div>
+        <div v-for="(value, key) in IorDClick" :key="key">
+          <div class="type-text">
+            {{ key }}
+          </div>
+        </div>
+      </div>
+      <!-- 左侧修改差异名字 -->
+      <div class="left-difference" v-if="newleftData" ref="addDiff">
+        <!-- key是键,value是值,循环的是对象 -->
+        <div v-for="(value, key) in newleftData" :key="key">
+          <div v-if="typeof value == 'object'">
+            <div
+              class="type-text up-type-text"
+              v-for="(subValue, subKey) in value"
+              :key="subKey"
+            >
+              {{ key }}.{{ subKey }}
+            </div>
+          </div>
+          <div v-else class="type-text up-type-text">
+            {{ key }}
+          </div>
+
+        </div>
       </div>
     </div>
     <div class="middle-line" ref="middleLine"></div>
+          <!-- 左侧居中修改差异数据 -->
+          <div class="middle-main" ref="middleMain">111</div>
     <!-- 右侧 -->
-    <div
-      class="right-main"
-      v-if="(rightD && rightD.length) || (dataU && dataU.length)"
-    >
+    <div class="right-main" v-if="(rightD && rightD.length) || dataU">
       <!-- 名称 -->
       <div class="ied-name">
         <img :src="squer" alt="" />
@@ -293,6 +362,7 @@ onMounted(() => {
       </div>
       <!-- 各个图片数据版块 -->
       <div
+        ref="rightStartDom"
         class="right-item-min"
         :class="{
           'right-item-max':
@@ -307,13 +377,13 @@ onMounted(() => {
             v-for="(item, index) in dataU"
             :key="index"
             class="left-item-cont"
-            @click="clickUpTypeImg(item.diff_desc, $event)"
+            @click="clickUpTypeImgRight(item.diff_desc, $event)"
           >
             <div class="item-img">
               <img :src="b_report14" alt="" class="type-img" />
               <img :src="modify0" alt="" class="type-img-mini" />
             </div>
-            <div>{{ item.diff_object_name }}</div>
+            <div class="wraps">{{ item.diff_object_name }}</div>
           </div>
         </div>
         <!-- 删除 -->
@@ -328,17 +398,36 @@ onMounted(() => {
               <img :src="b_report14" alt="" class="type-img" />
               <img :src="del0" alt="" class="type-img-mini" />
             </div>
-            <div>{{ item.diff_object_name }}</div>
+            <div class="wraps">{{ item.diff_object_name }}</div>
           </div>
         </div>
       </div>
-      <div class="right-difference" v-if="IorDClick">
+      <!-- 右侧删除差异名字 -->
+      <div class="right-difference" v-if="DelClick" ref="delDiff">
         <!-- key是键,value是值,循环的是对象 -->
-         <div v-for="(value, key) in IorDClick" :key="key">
-           <div class="type-text">
-              {{ key }}
-           </div>
-         </div>
+        <div v-for="(value, key) in DelClick" :key="key">
+          <div class="type-text">
+            {{ key }}
+          </div>
+        </div>
+      </div>
+      <!-- 右侧修改差异名字 -->
+      <div class="right-difference" v-if="newrightData" ref="delDiff">
+        <!-- key是键,value是值,循环的是对象 -->
+        <div v-for="(value, key) in newrightData" :key="key">
+          <div v-if="typeof value == 'object'">
+            <div
+              class="type-text up-type-text"
+              v-for="(subValue, subKey) in value"
+              :key="subKey"
+            >
+              {{ key }}.{{ subKey }}
+            </div>
+          </div>
+          <div v-else class="type-text up-type-text">
+            {{ key }}
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -413,7 +502,7 @@ onMounted(() => {
   .left-item-cont {
     text-align: center;
     width: 110px;
-    height: 110px;
+    height: 120px;
     & > div {
       color: #255ce7;
       font-size: 12px;
@@ -442,23 +531,42 @@ onMounted(() => {
 .left-difference {
   position: absolute;
   left: 28%;
-  .type-text{
-    border:1px solid #134BEA;
-    color:#134BEA;
+  .type-text {
+    border: 1px solid #134bea;
+    color: #134bea;
+    text-align: center;
     margin-bottom: 47px;
     padding: 3px;
     font-size: 14px;
   }
+
+  .up-type-text {
+    border: 1px solid #ffa011;
+    color: #ffa011;
+  }
 }
-.right-difference{
+.right-difference {
   position: absolute;
   right: 28%;
-  .type-text{
-    border:1px solid #FF0000;
-    color:#FF0000;
+  .type-text {
+    border: 1px solid #ff0000;
+    color: #ff0000;
     margin-bottom: 47px;
     padding: 3px;
     font-size: 14px;
   }
+  .up-type-text {
+    border: 1px solid #ffa011;
+    color: #ffa011;
+  }
+}
+// 文字换行
+.wraps {
+  word-wrap: break-word;
+}
+.middle-main {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
 }
 </style>