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  :focus="true"  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]) {
          setTimeout(()=>{
            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]
          },200)



        } 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>