v3-school-level-big-data-web/src/views/videoSurveillance/pageComponent/deptListComponent.vue

<template>
  <div class="deptListComponent">
    <div id="tree-box">
      <el-form :model="queryParams" class="form-box" ref="queryForm"
               :inline="true" style="width:100%;">
        <el-form-item label="" prop="state">
          <el-input
            v-model="queryParams.searchValue"
            placeholder="实验室"
            clearable
            style="width:178px;"
          />
        </el-form-item>
        <p class="form-inquire-common-style-button" @click="handleQuery">查询</p>
        <p class="form-reset-common-style-button" @click="resetQuery">重置</p>
      </el-form>
      <div class="for-level-max-box">
        <div class="for-level-box"
             @click="checkLevelButton(item,index)"
             v-for="(item,index) in levelList" :key="index">
          {{item.titleName}}
          <p class="checkLevel" v-if="checkLeveList[index].type"><span class="el-icon-check"></span></p>
        </div>
      </div>
      <div class="tree-max-box">
        <el-tree
          class="tree-line"
          @node-click="nodeClickButton"
          :indent="0"

          :current-node-key="treeId"
          :check-on-click-node="false"
          check-strictly

          highlight-current
          :default-expanded-keys="defaultKey"
          node-key="treeId"
          :data="deptOptions"
          :props="defaultProps"
          ref="tree"
          :load="loadNode"
          accordion
          lazy>
          <template #default="{ node, data }">
            <span style="
                max-width:255px;
                display:block;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;"
              :style="!data.level?'font-size:20px':(data.level==1?'font-size:26px':(data.level==2||data.level==3||data.level==4?'font-size:24px':(data.level==5?'font-size:20px':'')))">{{data.deptName}}</span>
         </template>
        </el-tree>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    laboratoryLevelConfigGetLevelTitleList,
    laboratoryLabDeptTreeGetTreeList,
    laboratoryLabDeptTreeGetRoomList } from "@/api/index";
  export default {
    name: 'deptListComponent',
    data () {
      return {
        treeList:[],
        showType:false,
        deptId:null,
        deptName:null,
        buildId:null,
        buildName:null,
        floorId:null,
        floorName:null,
        //新树
        deptOptions: null,
        defaultKey:null,
        defaultProps: {
          children: "childTreeList",
          label: "deptName",
          isLeaf:"leaf",
        },
        //当前选中ID
        treeId:null,
        queryParams: {
          searchValue: '',
        },
        levelList:[],
        checkLeveList:[],
      }
    },
    created(){

    },
    mounted(){
      this.laboratoryLevelConfigGetLevelTitleList();
      this.laboratoryLabDeptTreeGetTreeList()
    },
    methods:{
      //查询按钮
      handleQuery(){
        this.laboratoryLabDeptTreeGetTreeList();
      },
      //重置按钮
      resetQuery(){
        let self = this;
        this.$set(this,'queryParams',{
          searchValue: '',
        });
        for(let i=0;i<self.checkLeveList.length;i++){
          self.checkLeveList[i].type = false;
        }
        this.laboratoryLabDeptTreeGetTreeList();
      },
      //选中级别
      checkLevelButton(item,index){
        this.$set(this.checkLeveList[index],'type',!this.checkLeveList[index].type);
      },
      //分级下拉列表
      laboratoryLevelConfigGetLevelTitleList(){
        laboratoryLevelConfigGetLevelTitleList({}).then(response => {
          let list = [];
          for (let i=0;i<response.data.length;i++){
            list.push({
              type:false,
              levelId:response.data[i].levelId
            })
          }
          this.$set(this,'levelList',response.data);
          this.$set(this,'checkLeveList',list);
        });
      },
      //新树
      laboratoryLabDeptTreeGetTreeList() {
        let self = this;
        let obj = {
          searchValue:this.searchValue,
          levelIds:[],
        }
        for(let i=0;i<self.checkLeveList.length;i++){
          if(self.checkLeveList[i].type){
            obj.levelIds.push(self.checkLeveList[i].levelId)
          }
        }
        laboratoryLabDeptTreeGetTreeList(obj).then(response => {
          let self = this;
          let list = this.delList(response.data);
          this.$nextTick(()=>{
            //写入楼层下数据
            this.$set(this,'deptOptions',list)
            this.$set(this,'defaultKey',[list[0].treeId,list[0].childTreeList[0].treeId,list[0].childTreeList[0].childTreeList[0].treeId,list[0].childTreeList[0].childTreeList[0].childTreeList[0].treeId]);
            setTimeout(function(){
              self.$refs.tree.setCurrentKey(list[0].childTreeList[0].childTreeList[0].childTreeList[0].treeId);
              self.$set(self,'treeId',list[0].childTreeList[0].childTreeList[0].childTreeList[0].treeId);
            },200);
            //等待后续逻辑-面板展示-实验室信息-视屏信息





            // let minObj = JSON.parse(JSON.stringify(obj))
            // minObj.floorId = list[0].childTreeList[0].childTreeList[0].childTreeList[0].treeId;
            // laboratoryLabDeptTreeGetRoomList(minObj).then(minResponse => {
            //   for(let i=0;i<minResponse.data.length;i++){
            //     minResponse.data[i].leaf = true;
            //   }
            //   list[0].childTreeList[0].childTreeList[0].childTreeList[0].childTreeList[0].childTreeList = minResponse.data[0]?minResponse.data:[];
            //   //选中逻辑
            //   this.defaultKey=[list[0].treeId,list[0].childTreeList[0].treeId,list[0].childTreeList[0].childTreeList[0].treeId,list[0].childTreeList[0].childTreeList[0].childTreeList[0].treeId,list[0].childTreeList[0].childTreeList[0].childTreeList[0].childTreeList[0].treeId]
            //   this.$nextTick(()=>{
            //     this.$refs.tree.setCurrentKey(list[0].childTreeList[0].childTreeList[0].childTreeList[0].childTreeList[0].treeId);
            //     this.$nextTick(()=>{
            //       setTimeout(function(){
            //         self.$refs.tree.setCurrentKey(list[0].childTreeList[0].childTreeList[0].childTreeList[0].childTreeList[0].childTreeList[0].treeId);
            //         self.$set(self,'treeId',list[0].childTreeList[0].childTreeList[0].childTreeList[0].childTreeList[0].childTreeList[0].treeId);
            //       },200);
            //     })
            //   })
            //   this.$set(this,'deptOptions',list)
            // })
          })
        })
      },
      //空数据处理
      delList(list){
        let self = this;
        for(let i=1;i<4;i++){
          list.forEach((item,index)=>{
            if(item.level != 5){
              if(item.childTreeList){
                if(!item.childTreeList[0]){
                  list.splice(index,1)
                }else{
                  self.delList(item.childTreeList);
                }
              }else{
                list.splice(index,1)
              }
            }
          })
        }
        return list
      },
      //点击操作
      nodeClickButton(e,data){
        this.$nextTick(() => {
          if (!e.level||e.level == 4||e.level == 5) {
            this.treeId = e.treeId;
            console.log('chenggong')
            //等待后续逻辑-面板展示-实验室信息-视屏信息
          }
          this.$refs.tree.setCurrentKey(this.treeId);
        });
      },
      //手动加载
      loadNode(node, resolve) {
        let self = this;
        if (node.data){
          if(node.data.level == 5){
            let obj = {
              searchValue:this.searchValue,
              levelIds:[],
            }
            for(let i=0;i<self.checkLeveList.length;i++){
              if(self.checkLeveList[i].type){
                obj.levelIds.push(self.checkLeveList[i].levelId)
              }
            }
            obj.floorId = node.data.treeId;
            laboratoryLabDeptTreeGetRoomList(obj).then(response => {
              for(let i=0;i<response.data.length;i++){
                response.data[i].leaf = true;
              }
              resolve(response.data[0]?response.data:[]);
            })
          }else{
            if(node.data.childTreeList){
              if(node.data.childTreeList[0]){
                if(node.data.level != 4){
                  node.data.childTreeList.forEach((item)=>{
                    if(item.childTreeList){
                      if(!item.childTreeList[0]){
                        item.leaf = true;
                      }
                    }else{
                      item.leaf = true;
                    }
                  })
                }
                resolve(node.data.childTreeList);
              }else{
                resolve([]);
              }
            }else{
              resolve([]);
            }
          }
        }

      }
    },
  }
</script>
<style scoped lang="scss">
  .deptListComponent{
    width:430px;
    height:1330px;
    overflow-y:hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
    #tree-box{
      flex:1;
      overflow-y:hidden;
      display: flex;
      flex-direction: column;
      //检索
      .form-box{
        padding:32px 0 20px 29px;
        .el-input__inner{
          height: 40px;
          line-height: 38px;
          font-size: 16px;
        }
        ::v-deep .el-form-item__content{
          height:40px;
        }
        ::v-deep .el-input--medium .el-input__inner{
          height:40px;
        }
        .form-reset-common-style-button{
          width:80px;
          height:40px;
          line-height:40px;
          font-size:16px;
          font-weight:500;
          border:1px solid #06DEFF;
          color:#06DEFF;
        }
        .form-inquire-common-style-button{
          width:80px;
          height:40px;
          line-height:40px;
          font-size:16px;
          font-weight:500;
          color:#fff;
          background-color: #06DEFF;
          margin:0 17px;
        }
      }
      .for-level-max-box{
        display: flex;
        padding-left:29px;
        .for-level-box{
          cursor: pointer;
          color:#fff;
          border: 1px solid #1ED0F8;
          width:80px;
          height:40px;
          text-align: center;
          line-height: 40px;
          margin-right:17px;
          border-radius:4px;
          position: relative;
          overflow: hidden;
          font-size:16px;
          font-weight:500;
          .checkLevel{
            height:25px;
            position: absolute;
            right: -1px;
            bottom: -1px;
            span{
              font-size:14px;
              position: relative;
              width: 0;
              height: 0;
              border-left: 25px solid transparent;
              border-right: 0px solid transparent;
              border-bottom: 25px solid #06DEFF; /* 三角形的颜色 */
            }
            .el-icon-check:before{
              position: absolute;
              left:-14px;
              top:10px;
            }
          }
        }
      }
    }
    //新树
    .tree-max-box{
      flex:1;
      margin:30px 0 30px 9px;
      overflow-y:scroll;
    }
    .el-tree{
      background-color: transparent;
      color:#fff;

    }
    ::v-deep .tree-line .el-tree-node__expand-icon{
      display: block;
      height: 60px;
      width: 60px;
      padding: 0;
      line-height: 60px;
      text-align: center;
      margin-right: auto;
      font-size: 24px!important;
      color:#15827C;
    }
    //选中
    ::v-deep .is-current{
      /*color:#03B7CA;*/
    }
    ::v-deep .el-tree-node:focus > .el-tree-node__content{
      background-color: transparent;
    }
    ::v-deep .el-tree-node__content{
      height:60px;
      display: flex;
      flex-direction: row-reverse;
    }
    ::v-deep .el-tree-node__content:hover{
      background-color: transparent;
      color:#03B7CA;
    }
    ::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
      background-color: transparent;
      color:#03B7CA;
    }
    //引导线
    ::v-deep .tree-line {
      .el-tree-node {
        position: relative;
        padding-left: 16px; // 缩进量
      }
      .el-tree-node__children {
        padding-left: 16px; // 缩进量
      }

      // 竖线
      .el-tree-node::before {
        content: '';
        height: 100%;
        width: 1px;
        position: absolute;
        left: -3px;
        top: -8px;
        border-width: 1px;
        border-left: 1px solid #15827C;
      }
      // 当前层最后一个节点的竖线高度固定
      .el-tree-node:last-child::before {
        height: 38px; // 可以自己调节到合适数值
      }

      // 横线
      .el-tree-node::after {
        content: '';
        width: 24px;
        height: 20px;
        position: absolute;
        left: 0px;
        top: 30px;
        border-width: 1px;
        border-top: 1px dashed #15827C;
      }

      // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
      & > .el-tree-node::after {
        border-top: none;
      }
      & > .el-tree-node::before {
        border-left: none;
      }

      // 展开关闭的icon
      .el-tree-node__expand-icon {
        font-size: 16px;
        // 叶子节点（无子节点）
        &.is-leaf {
          color: transparent;
          // display: none; // 也可以去掉
        }
      }
    }
  }
  .tree-max-box::-webkit-scrollbar {
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
  }
  .tree-max-box::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px #07B4C7;
    background: #07B4C7;
  }
  .tree-max-box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px #013138;
    border-radius: 0;
    background: #013138;
  }
</style>