关联关系画线样式已经ok

src/api/common-action.js

@@ -1,27 +1,5 @@
 import request from '@/utils/request'
 
-
-
-// 修改可编辑表格中的某行数据
-export function editRow(editPath, editData) {
-  // console.log('提交修改数据', editData)
-  editData = editData || {}
-  // console.log(editPath)
-  return request({
-    url: editPath,
-    method: 'put',
-    data: editData
-  })
-}
-
-// 获取选择框选项
-export function getOptions(opPath) {
-  return request({
-    url: opPath,
-    method: 'get'
-  })
-}
-
 // 获取 get 请求 数据
 export function httpGet(getPath) {
   return request({

src/layout/components/SideBar/UserIcon.vue

@@ -84,7 +84,7 @@ export default {
   },
   beforeDestroy() {
     // 组件销毁前清除定时器
-    clearInterval(timer)
+    clearInterval(this.timer)
   },
 
   methods: {

src/router/index.js

@@ -20,7 +20,7 @@ const routes = [
       {
         path: 'dashboard',
         component: () => import('@/views/dashboard/index'),
-        name: 'Dashboard2',
+        name: 'Dashboard',
         meta: { title: '首页', icon: 'el-icon-s-home', affix: true }
       }
     ]

src/styles/index.scss

@@ -20,6 +20,10 @@ body {
     height: 100%;
     // overflow-y: hidden;
   }
+  // leaderline线条的层级要大于dialog
+ .leader-line {
+    z-index: 9999 !important
+  }
   
   *,
   *:before,

src/views/dashboard/components/Association.vue

@@ -6,7 +6,7 @@
         class="small_terminal"
         v-for="item in leftList"
         :key="item.ref_ied_id"
-        :ref="`termina${item.ref_ied_id}`"
+        :ref="`termina${item.ref_ied_id}_arrow${item.ref_type}`"
       >
         <span class="small_icon"></span>
         <div class="small_terminal_font">
@@ -14,28 +14,14 @@
           <span>{{ item.ref_ied_desc }}</span>
         </div>
       </div>
-      <!-- <div class="small_terminal" ref="termina2">
-        <span class="small_icon"></span>
-        <div class="small_terminal_font">
-          <span>MT3501A</span>
-          <span>#1主变中压侧测控PCS-9705A-D-H2</span>
-        </div>
-      </div>
-      <div class="small_terminal">
-        <span class="small_icon"></span>
-        <div class="small_terminal_font">
-          <span>MT3501A</span>
-          <span>#1主变中压侧测控PCS-9705A-D-H2</span>
-        </div>
-      </div> -->
     </div>
     <!-- 中间的当前终端 -->
     <div class="center_row" ref="terminaBig">
       <div class="big_terminal">
         <span class="big_icon"></span>
         <div class="big_terminal_font">
-          <span>MT3501A</span>
-          <span>#1主变中压侧测控PCS-9705A-D-H2</span>
+          <span>{{ relation.ied_name }}</span>
+          <span>{{ relation.desc }}</span>
         </div>
       </div>
     </div>
@@ -45,7 +31,7 @@
         class="small_terminal"
         v-for="item in rightList"
         :key="item.ref_ied_id"
-        :ref="`termina${item.ref_ied_id}`"
+        :ref="`termina${item.ref_ied_id}_arrow${item.ref_type}`"
       >
         <span class="small_icon"></span>
         <div class="small_terminal_font">
@@ -53,20 +39,6 @@
           <span>{{ item.ref_ied_desc }}</span>
         </div>
       </div>
-      <!-- <div class="small_terminal">
-        <span class="small_icon"></span>
-        <div class="small_terminal_font">
-          <span>MT3501A</span>
-          <span>#1主变中压侧测控PCS-9705A-D-H2</span>
-        </div>
-      </div>
-      <div class="small_terminal">
-        <span class="small_icon"></span>
-        <div class="small_terminal_font">
-          <span>MT3501A</span>
-          <span>#1主变中压侧测控PCS-9705A-D-H2</span>
-        </div>
-      </div> -->
     </div>
   </div>
 </template>
@@ -76,6 +48,14 @@
 import LeaderLine from "leader-line";
 import router from "@/router";
 export default {
+  props: {
+    relation: {
+      type: Object,
+      default: function () {
+        return;
+      },
+    },
+  },
   data() {
     return {
       //模拟数据
@@ -151,6 +131,7 @@ export default {
           node_id: 8371048,
         },
       },
+      listArr: [],
       // 左右节点
       leftList: [],
       rightList: [],
@@ -161,54 +142,109 @@ export default {
 
   mounted() {
     // 将设备列表分成两份
-    const listArr = [...this.list.CE1101.list];
-    const arrlenght = listArr.length;
+    this.listArr = JSON.parse(JSON.stringify(this.relation.list));
+    // console.log("this.relation", this.relation.list);
+    // console.log("listArr", this.listArr);
+    // 对数组进项处理 双向箭头的type为2，其他不变
+    const formatArr = this.processArray(this.listArr);
+    // console.log("formatArr", formatArr[0]);
+    const arrlenght = formatArr.length;
     const long1 = Math.ceil(arrlenght / 2);
-    this.leftList = listArr.splice(0, long1);
-    this.rightList = listArr.splice(0);
+    this.leftList = formatArr.splice(0, long1);
+    this.rightList = formatArr.splice(0);
     // console.log("ref", this.$refs);
     // console.log("leftList", this.leftList);
     // console.log("rightList", this.rightList);
 
-    this.$nextTick(() => {
+    // this.$nextTick(() => {
+    // 调用画线方法
+    // this.setLeaderline()
+    // });
+    // 循环画线
+    // line.color = '#51637F'; // 颜色
+    // line.size=2         //宽度
+    // line.path = 'straight'  //类型
+    // line.endPlug = 'arrow1'   //箭头
+  },
+  beforeDestroy() {
+    // 需要在跳转页面之前销毁连线
+    // console.log(this.line);
+    this.lineArr.forEach((item) => {
+      item.remove();
+    });
+  },
+  methods: {
+    // 画线函数
+    setLeaderline() {
+      this.lineArr = [];
       //线条样式
-      const lineStyle = {
+      const lineStyle0 = {
         color: "#51637F",
         size: 2,
         path: "straight",
         endPlug: "arrow1",
       };
+      // const lineStyle1 = {
+      //   color: "#51637F",
+      //   size: 2,
+      //   path: "straight",
+      //   startPlug: "arrow1",
+      // };
+      const lineStyle2 = {
+        color: "#134BEA",
+        size: 2,
+        path: "straight",
+        startPlug: "arrow1",
+        endPlug: "arrow1",
+      };
       //循环画线
+      // console.log("ref", this.$refs);
       for (const key in this.$refs) {
-        console.log("ref", this.$refs);
         if (key !== "terminaBig") {
           const start = this.$refs.terminaBig;
           const endDom = this.$refs[key][0];
-          const line = new LeaderLine(start, endDom, lineStyle);
+          let line
+          if (key.includes("arrow0")) {
+             line = new LeaderLine(start, endDom, lineStyle0);
+          } else if (key.includes("arrow1")) {
+             line = new LeaderLine(endDom, start, lineStyle0);
+          } else if (key.includes("arrow2")) {
+             line = new LeaderLine(start, endDom, lineStyle2);
+          }
           //  保存进数组，方便进行遍历删除
           this.lineArr.push(line);
         }
       }
-    });
-    // 循环画线
-    // line.color = '#51637F'; // 颜色
-    // line.size=2         //宽度
-    // line.path = 'straight'  //类型
-    // line.endPlug = 'arrow1'   //箭头
-  },
-  beforeDestroy() {
-    // 需要在跳转页面之前销毁连线
-    console.log(this.line);
-    this.lineArr.forEach((item) => {
-      item.remove();
-    });
+      this.$emit("getLineArr", this.lineArr);
+    },
+    // list数组处理函数
+    processArray(arr) {
+      var uniqueObjects = {};
+
+      // 遍历数组
+      for (var i = 0; i < arr.length; i++) {
+        var obj = arr[i];
+
+        // 如果当前对象的 ref_ied_id 属性已经存在于 uniqueObjects 中
+        if (uniqueObjects.hasOwnProperty(obj.ref_ied_id)) {
+          // 将对应对象的 ref_type 属性设为 2
+          uniqueObjects[obj.ref_ied_id].ref_type = 2;
+        } else {
+          // 否则，将当前对象添加到 uniqueObjects 中
+          uniqueObjects[obj.ref_ied_id] = obj;
+        }
+      }
+
+      // 将 uniqueObjects 中的值转为数组并返回
+      return Object.values(uniqueObjects);
+    },
   },
-  methods: {},
 };
 </script>
 
 <style lang="scss" scoped>
 .association_box {
+  height: 100%;
   position: relative;
   display: flex;
   justify-content: space-between;

src/views/dashboard/index.vue

@@ -10,7 +10,7 @@
          <button @click="detailsModal = true">测试打开模态框</button>
         <!-- 详细信息 -->
             <div>
-              <el-dialog :visible.sync="detailsModal" width="98%" top="1vh" :height="ceshi">
+              <el-dialog :visible.sync="detailsModal" @opened="openDialog" width="98%" @close="closeDialog" top="1vh" :height="ceshi">
                 <div class="detailsTittle">
                     <span>xxx-详细信息</span>
                 </div>
@@ -18,7 +18,7 @@
                     <div class="inBoxLeft">
                         <el-input style="width: 300px;margin-top: 10px;" v-model="searchFast" placeholder="快速查找"></el-input>
                         <template v-for="(item, index) in modelLeftList">
-                            <div class="leftMes" @click="insideBox(item)">
+                            <div class="leftMes" @click="insideBox(item)" :key="index">
                                 <span class="leftMesSpan">{{ item.ied_name }}</span>
                                 <span>{{ item.desc }}</span>
                             </div>
@@ -29,11 +29,12 @@
                         <!-- 导航栏 -->
                         <div class="navigationBox">
                             <template v-for="(item, index) in modalList">
-                                <p :class="['tabCard', { active: selectedIndex === index }]" @click="goUrl(item, index)">
+                                <p :class="['tabCard', { active: selectedIndex === index }]" :key="index" @click="goUrl(item, index)">
                                     {{ item.name }}
                                 </p>
                             </template>
                         </div>
+                        <AssociationVue :relation="thisRelation" ref="association" @getLineArr = "getLineArr"></AssociationVue>
                     </div>
                 </div>
                 <!-- <span slot="footer" class="dialog-footer">
@@ -55,8 +56,10 @@
 <script>
 import { getscdlist,getiedmse } from "@/api/ied/ied"
 import { forGround } from "@/api/basic/basic"
+import AssociationVue from './components/Association.vue'
 export default {
-    name: 'ScdProjectIndex',
+    components:{AssociationVue},
+    name:'Dashboard',
     data() {
         return {
             detailsModal: false,
@@ -95,7 +98,11 @@ export default {
             ceshi: "500px",
             modelLeftList: [],//模态框内列表
             stationCid:"",
-        };
+            lineArr : [], //leaderline数据
+            relationList:{},//终端列表
+            thisRelation:{} //当前选中终端
+        
+        }; 
     },
 
     mounted() {
@@ -104,6 +111,7 @@ export default {
     created () {
         this.forMesTo()
         this.getAllIedLink()
+        this.getRelationlist()
     },
     methods: {
         goUrl(item, index) {
@@ -129,6 +137,29 @@ export default {
         // 切换盒子
         insideBox(row){
             console.log(row,'row');
+        },
+
+        // 获取终端信息列表
+        async getRelationlist(){
+            let res = await getiedmse({scd_id:'8000003'})
+            this.relationList = res.data
+            this.thisRelation = this.relationList['CE1101']
+            console.log('thisRelation = ',this.thisRelation);
+        },
+        // 拿到子组件的leaderline数据
+        getLineArr(arr){
+            this.lineArr =  arr
+        },
+         // 打开dialog时画leaderline
+        openDialog(){
+            this.$refs.association.setLeaderline()
+        },
+        // 关闭dialog时删除leaderline
+        closeDialog(){
+            console.log('lineArr',this.lineArr);
+             this.lineArr.forEach((item) => {
+             item.remove();
+            });
         }
     },
   }
@@ -212,4 +243,5 @@ export default {
     justify-content: space-around;
     align-items: center;
 }
+
 </style>