模拟数据简单实现画线功能

package-lock.json

@@ -12,6 +12,7 @@
         "core-js": "^3.8.3",
         "element-ui": "^2.15.13",
         "express": "^4.18.2",
+        "leader-line": "^1.0.7",
         "sm-crypto": "^0.3.12",
         "vue": "^2.6.14",
         "vue-router": "^3.5.1",
@@ -24,6 +25,7 @@
         "@vue/cli-service": "~5.0.0",
         "sass": "^1.64.2",
         "sass-loader": "^13.3.2",
+        "skeleton-loader": "^2.0.0",
         "vue-template-compiler": "^2.6.14"
       }
     },
@@ -6057,6 +6059,11 @@
         "launch-editor": "^2.6.0"
       }
     },
+    "node_modules/leader-line": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/leader-line/-/leader-line-1.0.7.tgz",
+      "integrity": "sha512-PhJpQLV7XychSIuGPD0TEqR9PgRYBbrhReaOcmHFOVtTw4dWKfUMAtOb7UP7xTsoib6sFzq2giQeOUHy7LCuJQ=="
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -8505,6 +8512,15 @@
         "node": ">= 10"
       }
     },
+    "node_modules/skeleton-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/skeleton-loader/-/skeleton-loader-2.0.0.tgz",
+      "integrity": "sha512-juKGqmMbD0MNRYm1X7vJLJIvOQWVJNpupmkYaUHltMS9oqIMuQk9upmPmYfo1n2XiYQnLm7tgDpDCjmueJH0AQ==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^1.1.0"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
@@ -14583,6 +14599,11 @@
         "launch-editor": "^2.6.0"
       }
     },
+    "leader-line": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/leader-line/-/leader-line-1.0.7.tgz",
+      "integrity": "sha512-PhJpQLV7XychSIuGPD0TEqR9PgRYBbrhReaOcmHFOVtTw4dWKfUMAtOb7UP7xTsoib6sFzq2giQeOUHy7LCuJQ=="
+    },
     "lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -16461,6 +16482,15 @@
         "totalist": "^1.0.0"
       }
     },
+    "skeleton-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/skeleton-loader/-/skeleton-loader-2.0.0.tgz",
+      "integrity": "sha512-juKGqmMbD0MNRYm1X7vJLJIvOQWVJNpupmkYaUHltMS9oqIMuQk9upmPmYfo1n2XiYQnLm7tgDpDCjmueJH0AQ==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0"
+      }
+    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",

package.json

@@ -11,6 +11,7 @@
     "core-js": "^3.8.3",
     "element-ui": "^2.15.13",
     "express": "^4.18.2",
+    "leader-line": "^1.0.7",
     "sm-crypto": "^0.3.12",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
@@ -23,6 +24,7 @@
     "@vue/cli-service": "~5.0.0",
     "sass": "^1.64.2",
     "sass-loader": "^13.3.2",
+    "skeleton-loader": "^2.0.0",
     "vue-template-compiler": "^2.6.14"
   }
 }

src/main.js

@@ -10,10 +10,12 @@ import '@/assets/font/font.css'
 
 //引用Elementui组件
 import ElementUI from 'element-ui';
+
 //导入elementui样式
 import 'element-ui/lib/theme-chalk/index.css';
 //向Vue注册安装elementui
 Vue.use(ElementUI)
+// Vue.use(LeaderLine)
 // Vue.use(SmCrypto)
 Vue.config.productionTip = false
 

src/views/dashboard/components/Association.vue

@@ -2,14 +2,19 @@
   <div class="association_box">
     <div class="left_row">
       <!-- 单个的小终端 -->
-      <div class="small_terminal">
+      <div
+        class="small_terminal"
+        v-for="item in leftList"
+        :key="item.ref_ied_id"
+        :ref="`termina${item.ref_ied_id}`"
+      >
         <span class="small_icon"></span>
         <div class="small_terminal_font">
-          <span>MT3501A</span>
-          <span>#1主变中压侧测控PCS-9705A-D-H2</span>
+          <span>{{ item.ied_name }}</span>
+          <span>{{ item.ref_ied_desc }}</span>
         </div>
       </div>
-      <div class="small_terminal">
+      <!-- <div class="small_terminal" ref="termina2">
         <span class="small_icon"></span>
         <div class="small_terminal_font">
           <span>MT3501A</span>
@@ -22,10 +27,10 @@
           <span>MT3501A</span>
           <span>#1主变中压侧测控PCS-9705A-D-H2</span>
         </div>
-      </div>
+      </div> -->
     </div>
     <!-- 中间的当前终端 -->
-    <div class="center_row">
+    <div class="center_row" ref="terminaBig">
       <div class="big_terminal">
         <span class="big_icon"></span>
         <div class="big_terminal_font">
@@ -36,14 +41,19 @@
     </div>
     <div class="right_row">
       <!-- 单个的小终端 -->
-      <div class="small_terminal">
+      <div
+        class="small_terminal"
+        v-for="item in rightList"
+        :key="item.ref_ied_id"
+        :ref="`termina${item.ref_ied_id}`"
+      >
         <span class="small_icon"></span>
         <div class="small_terminal_font">
-          <span>MT3501A</span>
-          <span>#1主变中压侧测控PCS-9705A-D-H2</span>
+          <span>{{ item.ied_name }}</span>
+          <span>{{ item.ref_ied_desc }}</span>
         </div>
       </div>
-      <div class="small_terminal">
+      <!-- <div class="small_terminal">
         <span class="small_icon"></span>
         <div class="small_terminal_font">
           <span>MT3501A</span>
@@ -56,12 +66,15 @@
           <span>MT3501A</span>
           <span>#1主变中压侧测控PCS-9705A-D-H2</span>
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
 
 <script>
+//引入画线
+import LeaderLine from "leader-line";
+import router from "@/router";
 export default {
   data() {
     return {
@@ -74,63 +87,63 @@ export default {
             {
               ied_desc: "110kVⅠ母合并单元",
               ied_name: "MM1101A",
-              node_id: 8273494,
+              node_id: 1,
               ref_ied_desc: "110kV母联智能终端",
-              ref_ied_id: 8399528,
+              ref_ied_id: 1,
               ref_ied_name: "IE1101",
               ref_type: "1",
             },
             {
               ied_desc: "110kVⅠ母合并单元",
               ied_name: "MM1101A",
-              node_id: 8273494,
+              node_id: 2,
               ref_ied_desc: "110kV母联智能终端",
-              ref_ied_id: 8399528,
+              ref_ied_id: 2,
               ref_ied_name: "IE1101",
               ref_type: "1",
             },
             {
               ied_desc: "110kVⅠ母合并单元",
               ied_name: "MM1101A",
-              node_id: 8273494,
+              node_id: 3,
               ref_ied_desc: "110kV母联智能终端",
-              ref_ied_id: 8399528,
+              ref_ied_id: 3,
               ref_ied_name: "IE1101",
               ref_type: "1",
             },
             {
               ied_desc: "110kVⅠ母合并单元",
               ied_name: "MM1101A",
-              node_id: 8273494,
+              node_id: 4,
               ref_ied_desc: "110kV母联智能终端",
-              ref_ied_id: 8399528,
+              ref_ied_id: 4,
               ref_ied_name: "IE1101",
               ref_type: "1",
             },
             {
               ied_desc: "110kVⅠ母合并单元",
               ied_name: "MM1101A",
-              node_id: 8273494,
+              node_id: 5,
               ref_ied_desc: "110kV母联智能终端",
-              ref_ied_id: 8399528,
+              ref_ied_id: 5,
               ref_ied_name: "IE1101",
               ref_type: "1",
             },
             {
               ied_desc: "110kVⅠ母合并单元",
               ied_name: "MM1101A",
-              node_id: 8273494,
+              node_id: 6,
               ref_ied_desc: "110kV母联智能终端",
-              ref_ied_id: 8399528,
+              ref_ied_id: 6,
               ref_ied_name: "IE1101",
               ref_type: "1",
             },
             {
               ied_desc: "110kVⅠ母合并单元",
               ied_name: "MM1101A",
-              node_id: 8273494,
+              node_id: 7,
               ref_ied_desc: "110kV母联智能终端",
-              ref_ied_id: 8399528,
+              ref_ied_id: 7,
               ref_ied_name: "IE1101",
               ref_type: "1",
             },
@@ -138,11 +151,58 @@ export default {
           node_id: 8371048,
         },
       },
+      // 左右节点
+      leftList: [],
+      rightList: [],
+      // 线条数组
+      lineArr: [],
     };
   },
 
-  mounted() {},
+  mounted() {
+    // 将设备列表分成两份
+    const listArr = [...this.list.CE1101.list];
+    const arrlenght = listArr.length;
+    const long1 = Math.ceil(arrlenght / 2);
+    this.leftList = listArr.splice(0, long1);
+    this.rightList = listArr.splice(0);
+    // console.log("ref", this.$refs);
+    // console.log("leftList", this.leftList);
+    // console.log("rightList", this.rightList);
 
+    this.$nextTick(() => {
+      //线条样式
+      const lineStyle = {
+        color: "#51637F",
+        size: 2,
+        path: "straight",
+        endPlug: "arrow1",
+      };
+      //循环画线
+      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);
+          //  保存进数组，方便进行遍历删除
+          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();
+    });
+  },
   methods: {},
 };
 </script>

src/views/dashboard/index.vue

@@ -8,7 +8,7 @@
       </el-container>
     </el-container>
     <!-- 测试弹窗 注释掉即可隐藏弹窗 -->
-    <BulletBox :windowWidth="'150rem'" :windowHeight="'72rem'"></BulletBox>
+    <!-- <BulletBox :windowWidth="'150rem'" :windowHeight="'72rem'"></BulletBox> -->
   </div>
 </template>
 

vue.config.js

@@ -1,23 +1,3 @@
-// const { defineConfig } = require('@vue/cli-service')
-// module.exports = defineConfig({
-//   // transpileDependencies: true,
-//   devServer: {
-//     open: true,
-//     overlay: {
-//       warnings: false,
-//       errors: true
-//     },
-//     proxy: {
-//       '^/api': {
-//         target: 'http://8.142.173.95:10086',
-//         changeOrigin: true,
-//         pathRewrite: {
-//           '^/api': '/api'
-//         }
-//       }
-//     }
-//   },
-// })
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
   transpileDependencies: true,
@@ -32,6 +12,20 @@ module.exports = defineConfig({
         }
       }
     }
+  },
+  configureWebpack: config => {
+    let path = require('path')
+    config.module.rules.push({
+      test: path.resolve(__dirname, 'node_modules/leader-line/'),
+      use: [
+        {
+          loader: 'skeleton-loader',
+          options: {
+            procedure: content => `${content}export default LeaderLine`
+          }
+        }
+      ]
+    })
   }
 })
 

yarn.lock

@@ -3631,6 +3631,11 @@
     "picocolors" "^1.0.0"
     "shell-quote" "^1.7.3"
 
+"leader-line@^1.0.7":
+  "integrity" "sha512-PhJpQLV7XychSIuGPD0TEqR9PgRYBbrhReaOcmHFOVtTw4dWKfUMAtOb7UP7xTsoib6sFzq2giQeOUHy7LCuJQ=="
+  "resolved" "https://registry.npmmirror.com/leader-line/-/leader-line-1.0.7.tgz"
+  "version" "1.0.7"
+
 "lilconfig@^2.0.3":
   "integrity" "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="
   "resolved" "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz"
@@ -5049,6 +5054,13 @@
     "mrmime" "^1.0.0"
     "totalist" "^1.0.0"
 
+"skeleton-loader@^2.0.0":
+  "integrity" "sha512-juKGqmMbD0MNRYm1X7vJLJIvOQWVJNpupmkYaUHltMS9oqIMuQk9upmPmYfo1n2XiYQnLm7tgDpDCjmueJH0AQ=="
+  "resolved" "https://registry.npmmirror.com/skeleton-loader/-/skeleton-loader-2.0.0.tgz"
+  "version" "2.0.0"
+  dependencies:
+    "loader-utils" "^1.1.0"
+
 "slash@^3.0.0":
   "integrity" "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
   "resolved" "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz"