过滤无用数据

src/views/sbxxgl/sblxgx/sblxtree/index.vue

@@ -4,7 +4,9 @@
     <div class="sblxtreeTitle">
       节点流向关系查询
       <!-- 全屏查询-->
-      <i  title='在单独页面查看'  @click="toFullPage"  style="float: right;line-height: 30px;margin-right: 15px;font-size: 16px;cursor: pointer;"  class="el-icon-full-screen"></i>
+      <i title='在单独页面查看' @click="toFullPage"
+        style="float: right;line-height: 30px;margin-right: 15px;font-size: 16px;cursor: pointer;"
+        class="el-icon-full-screen"></i>
     </div>
     <!-- 查询框-->
     <div style="padding: 10px;">
@@ -34,6 +36,10 @@
     <div v-if="showList.length!=0" class="padding-10">
       <el-collapse v-model='activeName' @change='change' accordion>
         <el-collapse-item v-for="(item,index) in showList" :title="item.name" :name="index">
+          <!-- -->
+    <!--      <i title='保存流向' @click="savefile()"
+            style="float: right;line-height: 30px;margin-right: 15px;font-size: 16px;cursor: pointer;"
+            class="el-icon-paperclip"></i> -->
           <div class="padding-10 divlist" :id='item.name' :ref="item.name">
 
           </div>
@@ -46,10 +52,12 @@
 </template>
 
 <script>
+
+  const html2canvas = require('html2canvas');
   export default {
     mounted() {
       this.$nextTick(() => {
-        const scrollableDiv = document.getElementById('sblxtree');
+        const scrollableDiv = document.body
         scrollableDiv.addEventListener('scroll', () => {
           this.arrowLineList.forEach(item => item.position())
         });
@@ -60,14 +68,14 @@
     },
     beforeDestroy() {
       this.arrowLineList.forEach(item => item.remove())
-      this.arrowLineList=[]
+      this.arrowLineList = []
       clearInterval(this.timer)
-      this.activeName=-1
+      this.activeName = -1
     },
-    deactivated (){
+    deactivated() {
       this.arrowLineList.forEach(item => item.remove())
-       this.arrowLineList=[]
-       this.activeName=-1
+      this.arrowLineList = []
+      this.activeName = -1
     },
     data() {
       return {
@@ -168,17 +176,23 @@
             let name = this.showList[val].name
             let lxList = this.showList[val].data
             lxList.forEach(item => {
-              let arrobj = new LeaderLine(document.querySelector(`[data-jd="${name+item.syjd}"]`), document
-                .querySelector(`[data-jd="${name+item.dqjd}"]`), {
-                  path: 'arc',
-                  startPlugColor: '#1a6be0',
-                  endPlugColor: '#1efdaa',
-                  gradient: true,
-                  dash: {
-                    animation: true
-                  }
-                });
-              this.arrowLineList.push(arrobj)
+              if(item.syjd==item.dqjd){
+                console.log(`绘制${item.syjd}====>${item.dqjd}节点重复,取消绘制`)
+              }else{
+                let arrobj = new LeaderLine(document.querySelector(`[data-jd="${name+item.syjd}"]`), document
+                  .querySelector(`[data-jd="${name+item.dqjd}"]`), {
+                    path: 'arc',
+                    startPlugColor: '#1a6be0',
+                    endPlugColor: '#1efdaa',
+                    gradient: true,
+                    dash: {
+                      animation: true
+                    }
+                  });
+                this.arrowLineList.push(arrobj)
+              }
+
+
             })
             this.arrowLineList.forEach(item => item.position())
             this.lxObj = this.showList[val]
@@ -193,7 +207,18 @@
 
 
       },
-      toFullPage(){
+      savefile(){
+        const element = document.getElementsByName('body');
+        html2canvas(element).then(canvas => {
+          const imgData = canvas.toDataURL('image/png');
+          var link = document.createElement('a');
+          link.href = imgData;
+          link.download = 'image.png';
+          link.click();
+          link.remove()
+        });
+      },
+      toFullPage() {
         const url = `${location.origin}/#/sblxtree`
         window.open(url, '_blank'); // 第二个参数 '_blank' 表示在新窗口或标签页中打开