连线切换 还有一点点问题

src/views/dashboard/components/Association.vue

@@ -7,10 +7,11 @@
         v-for="item in leftList"
         :key="item.ref_ied_id"
         :ref="`termina${item.ref_ied_id}_arrow${item.ref_type}`"
+        @click="changeTermina(item.ref_ied_name)"
       >
         <span class="small_icon"></span>
         <div class="small_terminal_font">
-          <span>{{ item.ied_name }}</span>
+          <span>{{ item.ref_ied_name }}</span>
           <span>{{ item.ref_ied_desc }}</span>
         </div>
       </div>
@@ -31,11 +32,12 @@
         class="small_terminal"
         v-for="item in rightList"
         :key="item.ref_ied_id"
+        @click="changeTermina(item.ref_ied_name)"
         :ref="`termina${item.ref_ied_id}_arrow${item.ref_type}`"
       >
         <span class="small_icon"></span>
         <div class="small_terminal_font">
-          <span>{{ item.ied_name }}</span>
+          <span>{{ item.ref_ied_name }}</span>
           <span>{{ item.ref_ied_desc }}</span>
         </div>
       </div>
@@ -143,7 +145,7 @@ export default {
   mounted() {
     // 将设备列表分成两份
     this.listArr = JSON.parse(JSON.stringify(this.relation.list));
-    // console.log("this.relation", this.relation.list);
+    console.log("this.relation", this.relation.list);
     // console.log("listArr", this.listArr);
     // 对数组进项处理 双向箭头的type为2，其他不变
     const formatArr = this.processArray(this.listArr);
@@ -156,27 +158,53 @@ export default {
     // console.log("leftList", this.leftList);
     // console.log("rightList", this.rightList);
 
-    // this.$nextTick(() => {
-    // 调用画线方法
-    // this.setLeaderline()
-    // });
+    this.$nextTick(() => {
+      // console.log('this.lineArr',this.lineArr);
+      // 调用画线方法
+      if (this.lineArr.length == 0) {
+        this.setLeaderline();
+      }
+    });
     // 循环画线
     // line.color = '#51637F'; // 颜色
     // line.size=2         //宽度
     // line.path = 'straight'  //类型
     // line.endPlug = 'arrow1'   //箭头
   },
+  watch: {
+    relation(nv, ov) {
+      // 先清除之前的线条
+      this.lineArr.forEach((item) => {
+        item.remove();
+      });
+       this.lineArr = [];
+      //重新处理数据
+      this.listArr = JSON.parse(JSON.stringify(this.relation.list));
+      console.log("this.relation", this.relation.list);
+      const formatArr = this.processArray(this.listArr);
+      const arrlenght = formatArr.length;
+      const long1 = Math.ceil(arrlenght / 2);
+      this.leftList = [...formatArr.splice(0, long1)];
+      this.rightList = [...formatArr.splice(0)];
+      console.log('leftList',this.leftList);
+      this.setLeaderline()
+    },
+  },
   beforeDestroy() {
     // 需要在跳转页面之前销毁连线
     // console.log(this.line);
     this.lineArr.forEach((item) => {
       item.remove();
     });
+    this.lineArr = [];
+    this.$emit("getLineArr", this.lineArr);
   },
   methods: {
     // 画线函数
     setLeaderline() {
-      this.lineArr = [];
+      console.log('this.lineArr',this.lineArr);
+      if (this.lineArr.length > 0) return;
+      // this.lineArr = [];
       //线条样式
       const lineStyle0 = {
         color: "#51637F",
@@ -184,12 +212,6 @@ export default {
         path: "straight",
         endPlug: "arrow1",
       };
-      // const lineStyle1 = {
-      //   color: "#51637F",
-      //   size: 2,
-      //   path: "straight",
-      //   startPlug: "arrow1",
-      // };
       const lineStyle2 = {
         color: "#134BEA",
         size: 2,
@@ -203,18 +225,19 @@ export default {
         if (key !== "terminaBig") {
           const start = this.$refs.terminaBig;
           const endDom = this.$refs[key][0];
-          let line
+          let line;
           if (key.includes("arrow0")) {
-             line = new LeaderLine(start, endDom, lineStyle0);
+            line = new LeaderLine(start, endDom, lineStyle0);
           } else if (key.includes("arrow1")) {
-             line = new LeaderLine(endDom, start, lineStyle0);
+            line = new LeaderLine(endDom, start, lineStyle0);
           } else if (key.includes("arrow2")) {
-             line = new LeaderLine(start, endDom, lineStyle2);
+            line = new LeaderLine(start, endDom, lineStyle2);
           }
           //  保存进数组，方便进行遍历删除
           this.lineArr.push(line);
         }
       }
+      console.log('this.lineArr',this.lineArr);
       this.$emit("getLineArr", this.lineArr);
     },
     // list数组处理函数
@@ -238,6 +261,12 @@ export default {
       // 将 uniqueObjects 中的值转为数组并返回
       return Object.values(uniqueObjects);
     },
+    // 点击设备切换函数
+    changeTermina(id) {
+      // 点击的设备的id
+      console.log("refId = ", id);
+      this.$emit("changeRelation", id);
+    },
   },
 };
 </script>

src/views/dashboard/index.vue

@@ -39,7 +39,7 @@
                                             </template>
                                         </div>
                                         <!-- 关联关系 -->
-                                        <AssociationVue v-if="insideOrOutside == '1'" :relation="thisRelation" ref="association" @getLineArr = "getLineArr"></AssociationVue>
+                                        <AssociationVue v-if="insideOrOutside == '1'" :relation="thisRelation" ref="association" @changeRelation="changeRelation" @getLineArr = "getLineArr"></AssociationVue>
                                         <!-- 输入输出控制块 -->
                                         <div v-if="insideOrOutside == '2'">
                                             <!-- 导航栏 -->
@@ -472,10 +472,15 @@ export default {
         // 获取终端信息列表
         async getRelationlist(){
             let res = await getiedmse({scd_id:'8000003'})
+            console.log('getRelationlist-res = ',res);
             this.relationList = res.data
             this.thisRelation = this.relationList['CE1101']
             console.log('thisRelation = ',this.thisRelation);
         },
+        // 切换显示关联关系的终端
+        changeRelation(name){
+            this.thisRelation = this.relationList[name]
+        },
         // 拿到子组件的leaderline数据
         getLineArr(arr){
             this.lineArr =  arr
@@ -486,10 +491,12 @@ export default {
         },
         // 关闭dialog时删除leaderline
         closeDialog(){
-            console.log('lineArr',this.lineArr);
              this.lineArr.forEach((item) => {
              item.remove();
             });
+            this.lineArr = [];
+            // 将组件内的数据同时清空
+            this.$refs.association.lineArr = []
             if (row.name === "SV发送") {
                 this.ifout = ''
                 this.svgoListson = []