末端标识，弹出单页面查看

src/router/index.js

@@ -305,7 +305,7 @@ export const powerRoutes = [
 export const constantRoutes = [
   {
     path: '/sblxtree',
-    component: () => import('@/views/sbxxgl/sblxgx/sblxtree'),
+    component: () => import('@/views/sbxxgl/sblxgx/sblxtree/fullPage'),
     hidden: true
   },
   {

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

+<template>
+  <div class="full padding-content">
+    <!-- title-->
+    <div class="sblxtreeTitle">
+      节点流向关系查询
+      <!-- 全屏查询-->
+
+    </div>
+    <!-- 查询框-->
+    <div style="padding: 10px;">
+      <el-row :gutter="20">
+        <el-col :span="19"  class="padding-10 flex-center" >
+          <el-input    v-model="dqjd" placeholder="请输入查询节点">
+          </el-input>
+        </el-col>
+
+        <el-col :span="2">
+          <div class="padding-10 flex-center">
+            <el-button @click="cx(true)" size='mini' type="primary">上游查询</el-button>
+          </div>
+        </el-col>
+        <el-col :span="2">
+          <div class="padding-10 flex-center">
+            <el-button @click="cx(false)" size='mini' type="primary">下游查询</el-button>
+          </div>
+        </el-col>
+
+        </el-col>
+      </el-row>
+    </div>
+    <div v-if="showList.length==0" class="flex-center" style="color: #999;font-size: 18px;line-height: 400px">
+      暂无数据
+    </div>
+    <!-- 手风琴折叠面板-->
+    <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}(${item.lx})`" :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>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+  const html2canvas = require('html2canvas');
+  export default {
+    mounted() {
+      this.$nextTick(() => {
+        const scrollableDiv = document.body
+        scrollableDiv.addEventListener('scroll', () => {
+          this.arrowLineList.forEach(item => item.position())
+        });
+      })
+      this.timer = setInterval(() => {
+        this.arrowLineList.forEach(item => item.position())
+      }, 500)
+    },
+    beforeDestroy() {
+      this.arrowLineList.forEach(item => item.remove())
+      this.arrowLineList = []
+      clearInterval(this.timer)
+      this.activeName = -1
+    },
+    deactivated() {
+      this.arrowLineList.forEach(item => item.remove())
+      this.arrowLineList = []
+      this.activeName = -1
+    },
+    data() {
+      return {
+        dqjd: '',
+        activeName: -1,
+        sylist: {},
+        showList: [],
+        arrowLineList: [],
+        lxObj: {},
+        timer: null
+
+      }
+    },
+    methods: {
+      /* 上游查询构建*/
+      // buildUpTree(apidata) {
+
+      // },
+      cx(isUp) {
+        this.activeName = -1
+        this.arrowLineList.forEach(item => item.remove())
+        this.showList = []
+        this.arrowLineList = []
+        this.lxObj = {}
+        if (!this.dqjd) {
+          this.$warning('请输入查询节点')
+        } else {
+          this.$post('sbgl/usblxgx/tree/groups', {
+            isUp,
+            sbxxCode: this.dqjd
+          }).then(res => {
+            this.sbxxCode = this.dqjd
+            this.sylist = res.data.records || {}
+            let keyList = Object.keys(this.sylist)
+            keyList.forEach(key => {
+              let item = {
+                lx:isUp?'上游':'下游',
+                name: key,
+                data: this.sylist[key]
+              }
+              this.showList.push(item)
+            })
+            /* 绘制流向*/
+            this.$nextTick(() => {
+              /* 外层div*/
+              this.showList.forEach(item => {
+                this.hzlx(item)
+              })
+
+            })
+          })
+        }
+
+      },
+      /* 绘制指向*/
+      /* 绘制流向*/
+      hzlx(data) {
+        /* dom*/
+        let $dom = $(this.$refs[data.name])
+        let lxList = data.data
+        lxList.forEach(item => {
+          /* 判定溯源节点/当前节点
+          存在溯源节点，就把子节点插入到后面
+          如果不存在溯源节点，然后判定是否存在当前节点，如果存在就插入当前节点之前，不存在就新建溯源插入子节点
+          */
+          if ($dom.find(`[data-jd=${data.name+item.syjd}]`).length == 0) {
+            // $($dom.find(`[data-jd=${item.syjd}]`)[0]).after(`<div data-jd=${item.dqjd} class="jd">${item.dqjd}</div>`)
+            if ($dom.find(`[data-jd=${data.name+item.dqjd}]`).length == 0) {
+              /* 都没有的情况*/
+              $dom.append(
+                `<div data-jd=${data.name+item.syjd} class="jd">${item.syjd}</div><div data-jd=${data.name+item.dqjd} class="jd">${item.dqjd}</div>`
+              )
+            } else {
+              $($dom.find(`[data-jd=${data.name+item.dqjd}]`)[0]).before(
+                `<div data-jd=${data.name+item.syjd} class="jd">${item.syjd}</div>`)
+            }
+          } else {
+            /* 存在溯源节点，插入子节点在溯源节点之后*/
+            if ($dom.find(`[data-jd=${data.name+item.dqjd}]`).length == 0) {
+              $($dom.find(`[data-jd=${data.name+item.syjd}]`)[0]).after(
+                `<div data-jd=${data.name+item.dqjd} class="jd">${item.dqjd}</div>`)
+            } else {
+              console.log('存在溯源节点和当前节点之前已存在', data.name)
+            }
+          }
+        })
+      },
+      change(val) {
+
+        if (this.showList[val]) {
+          this.$nextTick(() => {
+            this.arrowLineList.forEach(item => item.remove())
+            this.arrowLineList = []
+            let name = this.showList[val].name
+            let lxList = this.showList[val].data
+            lxList.forEach(item => {
+              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',
+                    // startSocket:'boottom',
+                    // endSocket:'top',
+                    size: 2,
+                    gradient: true,
+                    dash: {
+                      animation: true
+                    }
+                  });
+                this.arrowLineList.push(arrobj)
+              }
+            })
+            /* 判定哪些是终端节点而不是上游节点*/
+            let syjdList = lxList.map(lxitem => lxitem.syjd)
+
+            let zddjList = []
+            lxList.forEach(item => {
+              if (!syjdList.includes(item.dqjd)) {
+                zddjList.push(item.dqjd)
+              }
+            })
+            zddjList.forEach(item => {
+              document.querySelector(`[data-jd="${name+item}"]`).classList.add('zdClass'); // 添加一个类
+            })
+
+
+
+            /* -----*/
+
+
+            this.arrowLineList.forEach(item => item.position())
+            this.lxObj = this.showList[val]
+          })
+
+        } else {
+          this.arrowLineList.forEach(item => item.remove())
+          this.arrowLineList = []
+          this.lxList = []
+          this.lxObj = {}
+        }
+
+
+      },
+      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' 表示在新窗口或标签页中打开
+
+      }
+    }
+
+  }
+</script>
+<style>
+  .jd {
+    height: 30px;
+    width: 100px;
+    background-color: #0b90ce;
+    color: #fff;
+    margin-bottom: 40px;
+    line-height: 30px;
+    text-align: center;
+  }
+  .zdClass {
+    animation: glow 1.5s infinite alternate
+  }
+
+  @keyframes glow {
+    0% {
+      box-shadow: 0 0 2px #3498db, 0 0 2px #3498db, 0 0 2px #3498db, 0 0 2px #3498db;
+    }
+    25% {
+      box-shadow: 0 0 2px #ffff00, 0 0 2px #ffff00, 0 0 2px #ffff00, 0 0 2px #ffff00;
+    }
+    50% {
+      box-shadow: 0 0 2px #aa00ff, 0 0 2px #aa00ff, 0 0 2px #aa00ff, 0 0 2px #aa00ff;
+    }
+    75% {
+      box-shadow: 0 0 2px #ffff00, 0 0 2px #ffff00, 0 0 2px #ffff00, 0 0 2px #ffff00;
+    }
+    100% {
+      box-shadow: 0 0 2px #3498db, 0 0 2px #3498db, 0 0 2px #3498db, 0 0 2px #3498db;
+    }
+  }
+
+  .navbar {
+    z-index: 999;
+  }
+
+  .el-scrollbar__view {
+    z-index: 999;
+  }
+
+  #scrollPane {
+    z-index: 999;
+  }
+</style>
+<style lang="scss" scoped>
+  .full {}
+
+  .sblxtreeTitle {
+    line-height: 30px;
+    font-size: 14px;
+    color: #666;
+    text-align: center;
+    font-weight: 700;
+  }
+
+  .padding-10 {
+    padding: 10px;
+  }
+
+  ::v-deep .el-scrollbar__view {
+    z-index: 999999;
+  }
+
+  ::v-deep .navbar {
+    z-index: 999999;
+  }
+
+  .divlist {
+    display: flex;
+    justify-content: center;
+    /* 水平居中 */
+    align-items: center;
+    flex-direction: column;
+    /* 垂直居中 */
+  }
+
+
+</style>

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

@@ -12,7 +12,7 @@
     <div style="padding: 10px;">
       <el-row :gutter="20">
         <el-col :span="24">
-          <el-input v-model="dqjd" placeholder="请输入查询节点">
+          <el-input  @focus="toFullPage"  v-model="dqjd" placeholder="请输入查询节点">
           </el-input>
         </el-col>
         <el-col :span="12">
@@ -35,7 +35,7 @@
     <!-- 手风琴折叠面板-->
     <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">
+        <el-collapse-item v-for="(item,index) in showList"   :title="`${item.name}(${item.lx})`" :name="index">
           <!-- -->
           <!--      <i title='保存流向' @click="savefile()"
             style="float: right;line-height: 30px;margin-right: 15px;font-size: 16px;cursor: pointer;"
@@ -52,7 +52,6 @@
 </template>
 
 <script>
-
   const html2canvas = require('html2canvas');
   export default {
     mounted() {
@@ -112,6 +111,7 @@
             let keyList = Object.keys(this.sylist)
             keyList.forEach(key => {
               let item = {
+                lx:isUp?'上游':'下游',
                 name: key,
                 data: this.sylist[key]
               }
@@ -160,12 +160,7 @@
               console.log('存在溯源节点和当前节点之前已存在', data.name)
             }
           }
-
         })
-
-
-
-
       },
       change(val) {
 
@@ -176,14 +171,17 @@
             let name = this.showList[val].name
             let lxList = this.showList[val].data
             lxList.forEach(item => {
-              if(item.syjd==item.dqjd){
+              if (item.syjd == item.dqjd) {
                 console.log(`绘制${item.syjd}====>${item.dqjd}节点重复,取消绘制`)
-              }else{
+              } 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',
+                    // startSocket:'boottom',
+                    // endSocket:'top',
+                    size: 2,
                     gradient: true,
                     dash: {
                       animation: true
@@ -191,9 +189,25 @@
                   });
                 this.arrowLineList.push(arrobj)
               }
+            })
+            /* 判定哪些是终端节点而不是上游节点*/
+            let syjdList = lxList.map(lxitem => lxitem.syjd)
 
-
+            let zddjList = []
+            lxList.forEach(item => {
+              if (!syjdList.includes(item.dqjd)) {
+                zddjList.push(item.dqjd)
+              }
             })
+            zddjList.forEach(item => {
+              document.querySelector(`[data-jd="${name+item}"]`).classList.add('zdClass'); // 添加一个类
+            })
+
+
+
+            /* -----*/
+
+
             this.arrowLineList.forEach(item => item.position())
             this.lxObj = this.showList[val]
           })
@@ -207,7 +221,7 @@
 
 
       },
-      savefile(){
+      savefile() {
         const element = document.getElementsByName('body');
         html2canvas(element).then(canvas => {
           const imgData = canvas.toDataURL('image/png');
@@ -237,6 +251,27 @@
     line-height: 30px;
     text-align: center;
   }
+  .zdClass {
+    animation: glow 1.5s infinite alternate
+  }
+
+  @keyframes glow {
+    0% {
+      box-shadow: 0 0 2px #3498db, 0 0 2px #3498db, 0 0 2px #3498db, 0 0 2px #3498db;
+    }
+    25% {
+      box-shadow: 0 0 2px #ffff00, 0 0 2px #ffff00, 0 0 2px #ffff00, 0 0 2px #ffff00;
+    }
+    50% {
+      box-shadow: 0 0 2px #aa00ff, 0 0 2px #aa00ff, 0 0 2px #aa00ff, 0 0 2px #aa00ff;
+    }
+    75% {
+      box-shadow: 0 0 2px #ffff00, 0 0 2px #ffff00, 0 0 2px #ffff00, 0 0 2px #ffff00;
+    }
+    100% {
+      box-shadow: 0 0 2px #3498db, 0 0 2px #3498db, 0 0 2px #3498db, 0 0 2px #3498db;
+    }
+  }
 
   .navbar {
     z-index: 999;
@@ -281,4 +316,6 @@
     flex-direction: column;
     /* 垂直居中 */
   }
+
+
 </style>