cID连线初步

src/pages/netStructPicture/components/CidTree.vue

@@ -67,7 +67,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["treeBack", "clickCode"]);
 let tagList = ref(props.iedRelation);
-let tagChoose = ref(0);
+let tagChoose = ref('');
 let treeData = ref([
   {
     label: "装置信息",
@@ -244,6 +244,7 @@ const handleNodeClick = (e) => {
   emit("clickCode", e.itemcode);
 };
 onMounted(() => {
+  tagChoose.value = props.iedRelation?Object.keys(props.iedRelation)[0]:'';
   reload();
 });
 </script>

src/pages/netStructPicture/components/Gsix.vue

@@ -1,26 +1,14 @@
 
 <script setup>
-import { nextTick, onMounted, ref, watch } from "vue";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
 import { compIedstatType, compResult } from "@/api/scdCheck/scdCheck2";
 import squer from "@/assets/image/CID/squer.png";
-import b_get4 from "@/assets/image/CID/b_get4.png";
-import b_go5 from "@/assets/image/CID/b_go5.png";
-import b_goose2 from "@/assets/image/CID/b_goose2.png";
-import b_navicat_plus17 from "@/assets/image/CID/b_navicat_plus17.png";
-import b_navicat16 from "@/assets/image/CID/b_navicat16.png";
-import b_pole6 from "@/assets/image/CID/b_pole6.png";
-import b_report14 from "@/assets/image/CID/b_report14.png";
-import b_setting15 from "@/assets/image/CID/b_setting15.png";
-import b_speed9 from "@/assets/image/CID/b_speed9.png";
-import b_stand1 from "@/assets/image/CID/b_stand1.png";
-import b_stknum11 from "@/assets/image/CID/b_stknum11.png";
-import b_sv3 from "@/assets/image/CID/b_sv3.png";
-import b_wifi7 from "@/assets/image/CID/b_wifi7.png";
-import bb10 from "@/assets/image/CID/bb10.png";
-import btn8 from "@/assets/image/CID/btn8.png";
 import del0 from "@/assets/image/CID/del0.png";
 import modify0 from "@/assets/image/CID/modify0.png";
 import newly0 from "@/assets/image/CID/newly0.png";
+import LeaderLine from "../../../../public/leader-line.min.js";
+import AnimEvent from "../../../../public/anim-event.min.js";
+import { hiddenLine2,newPositionLine2 } from '@/utils/linesPosition'; 
 const props = defineProps({
   clickRowDatas: {
     type: Object,
@@ -58,7 +46,8 @@ watch(
     if (newValue) {
       console.log("newVallueclickList", newValue);
       tagList.value = newValue;
-      result();
+      leaderLineShow.value = [];
+      getData();
     }
   }
 );
@@ -67,12 +56,10 @@ watch(
   () => props.clickCodeValue,
   (newValue) => {
     if (newValue) {
-      DelClick.value = {};
-      IorDClick.value = {};
-      console.log("first", newValue);
       cClickCode.value = newValue;
+      CodeImg(newValue);
       clickReset();
-      result();
+      getData();
     }
   }
 );
@@ -95,7 +82,7 @@ const IorDClick = ref({}); //点击或默认显示的连线数据
 const rightStartDom = ref(null); //右侧图片带差异名字大板块的dom
 const leftStartDom = ref(null); //左侧图片带差异名字大板块的dom
 const middleMain = ref(null);
-const result = async () => {
+const getData = async () => {
   dones();
   const ids = clickRow.value ? clickRow.value.id : "";
   const names = tagList.value ? tagList.value.ied_name : "";
@@ -130,16 +117,24 @@ const result = async () => {
     middleLine.value.style.height = 0;
     middleLine.value.style.height = mianItem.value.scrollHeight + "px";
   });
-  console.log("dataU.value", dataU.value);
   loading.value = false;
+  console.log("dataU.value", dataU.value);
 };
 //点击新增或删除的图片
 const DelClick = ref({});
 const clickTypeImg = (item, event) => {
+  console.log("event.target", event.target);
+  leaderLineShow.value.forEach((line) => line.remove());
+  domListAdd.value = event.target;
+  setTimeout(() => {
+    setLeaderlines();
+    newPositionLine2(leaderLineShow.value);
+  }, 40);
   clickReset();
   comonTypeImg(item, event);
 };
 const clickTypeImgDel = (item, event) => {
+  domListDel.value = event.target;
   clickReset();
   comonTypeImg(item, event, 2);
 };
@@ -148,6 +143,9 @@ const clickReset = () => {
   IorDClick.value = {};
   newrightData.value = {};
   newleftData.value = {};
+  newrightDataMiddle.value = {};
+  newleftDataMiddle.value = {};
+  leaderLineShow.value = [];
   if (addDiff.value && delDiff.value) {
     addDiff.value.style.top = 0;
     delDiff.value.style.top = 0;
@@ -188,7 +186,7 @@ const clickUpTypeImgRight = (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
@@ -197,19 +195,23 @@ const setTopDiffName = (event) => {
     let keyCount2 = newrightData.value
       ? Object.keys(newleftData.value).length
       : 0;
-    if (keyCount < 3 || keyCount2 < 3) {
+    if ((keyCount != 0 && keyCount < 3) || (keyCount != 0 && keyCount2 < 3)) {
       const nums = evt.top - dom2Rect.top + 160 + "px";
+      const numsR = evt.top - dom1Rect.top + 160 + "px";
       addDiff.value.style.top = nums;
-      delDiff.value.style.top = nums;
+      delDiff.value.style.top = numsR;
       middleMain.value.style.top = nums;
     } else {
       const nums2 = evt.top - dom2Rect.top + 60 + "px";
+      const numsR = evt.top - dom1Rect.top + 60 + "px";
       addDiff.value.style.top = nums2;
-      delDiff.value.style.top = nums2;
+      delDiff.value.style.top = numsR;
       middleMain.value.style.top = nums2;
     }
   });
 };
+const newleftDataMiddle = ref(null); //处理修改居中展示的数据
+const newrightDataMiddle = ref(null);
 const clickUpTypeImg = (arr, event) => {
   clickReset();
   setTopDiffName(event);
@@ -259,19 +261,99 @@ const clickUpTypeImg = (arr, event) => {
   }
   newrightData.value = newright;
   newleftData.value = newleft;
-  console.log("newleft =", newleftData.value);
-  console.log("newright =", newrightData.value);
+  //处理中间展示的数据===
+  newrightDataMiddle.value = flattenObject(newright);
+  newleftDataMiddle.value = flattenObject(newleft);
+};
+function flattenObject(obj, prefix = "") {
+  const flattenedObj = {};
+  //函数会遍历对象的属性，并根据属性的类型将其拆分成扁平的形式。
+  for (let key in obj) {
+    //如果属性的值是一个对象，并且不为nul，则递归调用 flattenobiect 函数来处理嵌套对象，同时更新前缀。
+    if (typeof obj[key] === "object" && obj[key] !== null) {
+      const nestedObj = flattenObject(obj[key], `${prefix}${key}.`);
+      Object.assign(flattenedObj, nestedObj);
+    } else {
+      flattenedObj[`${prefix}${key}`] = obj[key];
+    }
+  }
+  return flattenedObj;
+}
+//动态处理点击右侧code左右侧大板块图片
+const codeImg = ref(null);
+const codeImgs = {
+  "scd.ied.ExtRef": require("@/assets/image/CID/b_get4.png"),
+  "scd.ied.FCDA": require("@/assets/image/CID/b_go5.png"),
+  "scd.ied.GSEControl": require("@/assets/image/CID/b_goose2.png"),
+  "scd.ied.Communication.GSE": require("@/assets/image/CID/b_goose2.png"),
+  "scd.ied.DatSet": require("@/assets/image/CID/b_navicat_plus17.png"),
+  "scd.ied.DatSetMeber": require("@/assets/image/CID/b_navicat16.png"),
+  "scd.ied": require("@/assets/image/CID/b_pole6.png"),
+  "scd.ied.ReportControl": require("@/assets/image/CID/b_report14.png"),
+  "scd.ied.LogControl": require("@/assets/image/CID/b_setting15.png"),
+  "scd.ied.YC": require("@/assets/image/CID/b_speed9.png"),
+  "scd.ied.Communication.S1": require("@/assets/image/CID/b_stand1.png"),
+  "scd.ied.DZ": require("@/assets/image/CID/b_stknum11.png"),
+  "scd.ied.SampledValueControl": require("@/assets/image/CID/b_sv3.png"),
+  "scd.ied.YX": require("@/assets/image/CID/b_wifi7.png"),
+  "scd.ied.Communication": require("@/assets/image/CID/b_wifi7.png"),
+  "scd.ied.YM": require("@/assets/image/CID/bb10.png"),
+  "scd.ied.YK": require("@/assets/image/CID/btn8.png"),
+};
+const CodeImg = (val) => {
+  if (val) {
+    codeImg.value = codeImgs[val];
+  }
 };
+//处理中间展示的数据===
+// 连线====
+const leaderLineShow = ref([]); //控制线条显示
+// 新增差异名字dom
+const domListAdd = ref(null); //获取左侧新增图片的dom
+const domListDel = ref(null); //获取右侧删除图片的dom
+const domListAddName = ref(new Map()); //获取所有差异名字
+const setdomAddName = (el, item) => {
+  //左侧点击新增差异名字dom
+  // 检查 item 是否已经存在于 domListAddName.value 中
+  if (domListAddName.value.has(item)) {
+    // 如果存在，将 're' 后缀添加到 item 上，然后再添加到 Map 中
+    const updatedItem = `${item}re`;
+    domListAddName.value.set(updatedItem, el);
+  } else {
+    // 如果不存在，直接添加到 Map 中
+    domListAddName.value.set(item, el);
+  }
+  console.log("domListAddName.value", domListAddName.value);
+};
+const setLeaderlines = () => {
+  for (const [key, value] of domListAddName.value) {
+    const startDom = domListAdd.value;
+    let line;
+    line = new LeaderLine(startDom, value, {
+      color: "red",
+      size: 2,
+      path: "grid",
+      endPlug: "behind",
+      startSocket: "right",
+      endSocket: "left",
+    });
+    leaderLineShow.value.push(line);
+    //弹窗打开后使得线条在指定区域中
+    hiddenLine2();
+  }
+};
+
+//连线===
 onMounted(() => {
   if (props.iedRelation) {
     tagList.value = Object.values(props.iedRelation)[0];
   }
-  result();
+  getData();
 });
 </script>
 
 <template>
-  <div class="main" ref="mianItem" v-loading="loading">
+  <div class="main" ref="mianItem" v-loading="loading"  id="treedom2">
     <!-- 左侧 -->
     <div class="left-main" v-if="(leftI && leftI.length) || dataU">
       <!-- 名称 -->
@@ -299,7 +381,7 @@ onMounted(() => {
             @click="clickUpTypeImgLeft(item.diff_desc, $event)"
           >
             <div class="item-img">
-              <img :src="b_report14" alt="" class="type-img" />
+              <img :src="codeImg" alt="" class="type-img" />
               <img :src="modify0" alt="" class="type-img-mini" />
             </div>
             <div class="wraps">{{ item.diff_object_name }}</div>
@@ -314,7 +396,7 @@ onMounted(() => {
             @click="clickTypeImg(item, $event)"
           >
             <div class="item-img">
-              <img :src="b_report14" alt="" class="type-img" />
+              <img :src="codeImg" alt="" class="type-img" />
               <img :src="newly0" alt="" class="type-img-mini" />
             </div>
             <div class="wraps">{{ item.diff_object_name }}</div>
@@ -325,34 +407,17 @@ onMounted(() => {
       <div class="left-difference" v-if="IorDClick" ref="addDiff">
         <!-- key是键,value是值,循环的是对象 -->
         <div v-for="(value, key) in IorDClick" :key="key">
-          <div class="type-text">
+          <div class="type-text" :ref="(el) => setdomAddName(el, value)">
             {{ 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 class="type-text add-type-text wraps" v-if="value">
+            {{ value }}
           </div>
-          <div v-else class="type-text up-type-text">
-            {{ key }}
-          </div>
-
+          <div class="type-text add-type-text wraps" v-else>【空】</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">
       <!-- 名称 -->
@@ -380,7 +445,7 @@ onMounted(() => {
             @click="clickUpTypeImgRight(item.diff_desc, $event)"
           >
             <div class="item-img">
-              <img :src="b_report14" alt="" class="type-img" />
+              <img :src="codeImg" alt="" class="type-img" />
               <img :src="modify0" alt="" class="type-img-mini" />
             </div>
             <div class="wraps">{{ item.diff_object_name }}</div>
@@ -395,7 +460,7 @@ onMounted(() => {
             @click="clickTypeImgDel(item, $event)"
           >
             <div class="item-img">
-              <img :src="b_report14" alt="" class="type-img" />
+              <img :src="codeImg" alt="" class="type-img" />
               <img :src="del0" alt="" class="type-img-mini" />
             </div>
             <div class="wraps">{{ item.diff_object_name }}</div>
@@ -406,30 +471,44 @@ onMounted(() => {
       <div class="right-difference" v-if="DelClick" ref="delDiff">
         <!-- key是键,value是值,循环的是对象 -->
         <div v-for="(value, key) in DelClick" :key="key">
+          <div class="type-text del-type-text wraps" v-if="value">
+            {{ value }}
+          </div>
+          <div class="type-text del-type-text wraps" v-else>【空】</div>
           <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 class="middle-main" ref="middleMain">
+      <!-- 修改中间数据的名字 -->
+      <div v-for="(value, key) in newleftDataMiddle" :key="key">
+        <div
+          v-for="(value2, key2) in newrightDataMiddle"
+          :key="key2"
+          class="middle-frame"
+        >
+          <div v-if="key == key2" class="middle-type-text">{{ key }}</div>
+          <div v-if="key == key2" class="middle-item">
+            <div class="middle-left">
+              <div class="type-text up-type-text wraps middle-up-type-text">
+                <span v-if="value">{{ value }}</span>
+                <span v-else>【空】</span>
+              </div>
+            </div>
+            <div class="middle-right">
+              <div class="type-text up-type-text wraps middle-up-type-text">
+                <span v-if="value2">{{ value2 }}</span>
+                <span v-else>【空】</span>
+              </div>
             </div>
           </div>
-          <div v-else class="type-text up-type-text">
-            {{ key }}
-          </div>
+          <div v-if="key == key2" class="middle-type-text">{{ key2 }}</div>
         </div>
       </div>
     </div>
+    <div id="wrapper"></div>
   </div>
 </template>
 
@@ -500,6 +579,7 @@ onMounted(() => {
 .left-item-min,
 .right-item-min {
   .left-item-cont {
+    cursor: pointer;
     text-align: center;
     width: 110px;
     height: 120px;
@@ -531,7 +611,13 @@ onMounted(() => {
 .left-difference {
   position: absolute;
   left: 28%;
+  & > div {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
   .type-text {
+    width: 80px;
     border: 1px solid #134bea;
     color: #134bea;
     text-align: center;
@@ -539,34 +625,80 @@ onMounted(() => {
     padding: 3px;
     font-size: 14px;
   }
-
+  .add-type-text {
+    border: 2px dashed #134bea;
+    color: #134bea;
+    width: 113px;
+    margin-left: 40px;
+    padding: 12px 8px;
+  }
   .up-type-text {
     border: 1px solid #ffa011;
     color: #ffa011;
   }
 }
+.middle-type-text {
+  border: 1px solid #ffa011;
+  color: #ffa011;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 45px;
+  width: 120px;
+  height: 23px;
+}
 .right-difference {
   position: absolute;
   right: 28%;
   .type-text {
     border: 1px solid #ff0000;
     color: #ff0000;
+    text-align: center;
     margin-bottom: 47px;
     padding: 3px;
     font-size: 14px;
   }
-  .up-type-text {
-    border: 1px solid #ffa011;
-    color: #ffa011;
+  & > div {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
   }
+  .del-type-text {
+    border: 2px dashed #ff0000;
+    color: #ff0000;
+    width: 113px;
+    margin-right: 40px;
+    padding: 12px 8px;
+  }
+}
+.middle-up-type-text {
+  width: 100px;
 }
 // 文字换行
 .wraps {
   word-wrap: break-word;
 }
 .middle-main {
+  width: 50%;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
+  .middle-frame {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+  .middle-item {
+    border: 2px dashed #ffa011;
+    color: #09162c;
+    font-size: 13px;
+    // margin-bottom: 47px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 10px 40px;
+    margin-bottom: 45px;
+  }
 }
 </style>

src/pages/netStructPicture/components/gsix2.vue

@@ -183,7 +183,7 @@ export default {
             // 左部分连线
             leaderLines.push(new LeaderLine(goose, mainOne, { color: 'gray', size: 2, path: "grid" }))//左连中
             leaderLines.push(new LeaderLine(goose, mainTwo, { color: 'gray', size: 2, path: "grid" }))//左连中
-            leaderLines.push(new LeaderLine(goose, mainThree, { color: 'gray', size: 2, path: "grid"}))//左连中
+            leaderLines.push(new LeaderLine(goose, mainThree, { color: 'gray', size: 2, path: "grid",endSocket: "left",}))//左连中
             leaderLines.push(new LeaderLine(mainTwo, botOne, { color: 'orange', size: 2, path: "grid", endLabel: "装置IP", startSocket: "center", }))//中连右
             leaderLines.push(new LeaderLine(mainTwo, botTwo, { color: 'orange', size: 2, path: "grid", endLabel: "掩码", startLabel: "修改" }))//中连右
             leaderLines.push(new LeaderLine(mainTwo, botThree, { color: 'orange', size: 2, path: "grid", endLabel: '网关' }))//中连右

src/pages/netStructPicture/index.vue

@@ -151,7 +151,7 @@ import { ref, watch, onMounted } from "vue";
 import netWork from "./components/netWork";
 import scdVisual from "./components/scdVisual";
 import CidTree from "./components/CidTree.vue";
-import Gsix from "./components/Gsix.vue";
+import Gsix from "./components/gsix2.vue";
 import scdTree from "./components/scdTree.vue";
 import scdMap from "./components/scdMap.vue";
 import CrcCheck from "./newTitle/CrcCheck";

src/utils/linesPosition.js

@@ -0,0 +1,41 @@
+import AnimEvent from "../../public/anim-event.min.js";
+export function  hiddenLine2(){
+    const elmWrapper = document.getElementById("wrapper");
+    // 移动 line
+    document.body.querySelectorAll("body .leader-line").forEach((node) => {
+      elmWrapper.appendChild(node);
+    });
+    elmWrapper.style.transform = "none";
+    var rectWrapper = elmWrapper.getBoundingClientRect();
+    // Move to the origin of coordinates as the document
+    elmWrapper.style.transform = `translate(${
+      (rectWrapper.left + window.scrollY) * -1
+    }px, ${(rectWrapper.top + window.scrollX) * -1}px)`;
+  };
+  export function newPositionLine2(diffline) {  
+    document.getElementById("treedom2").addEventListener(
+        "scroll",
+        AnimEvent.add(() => {
+          diffline.forEach((line) => {
+            if (line) {
+              hiddenLine2();
+              line.position();
+              line.positionByWindowResize = false;
+            }
+          });
+          //中间展示图片的
+        }),
+        false
+      );
+      window.addEventListener(
+        "resize",
+        AnimEvent.add(function () {
+          diffline.forEach((line) => {
+            hiddenLine2();
+            line.position();
+            line.positionByWindowResize = false;
+          });
+        }),
+        false
+      );
+  }