zc

src/api/index.js

@@ -256,3 +256,27 @@ export function laboratorySubRelInfoKeySubList  (data) {
     data: data
   })
 }
+//校级-校区-楼栋-楼层-列表
+export function laboratoryLabDeptTreeGetTreeList (data) {
+  return request({
+    url: '/laboratory/labDeptTree/getTreeList',
+    method: 'post',
+    data: data
+  })
+}
+//楼层下查询房间列表
+export function laboratoryLabDeptTreeGetRoomList (data) {
+  return request({
+    url: '/laboratory/labDeptTree/getRoomList',
+    method: 'post',
+    data: data
+  })
+}
+// 分级下拉列表
+export function laboratoryLevelConfigGetLevelTitleList(data) {
+  return request({
+    url: '/laboratory/levelConfig/getLevelTitleList',
+    method: 'post',
+    data: data
+  })
+}

src/views/videoSurveillance/pageComponent/deptListComponent.vue

@@ -1,34 +1,65 @@
 <template>
   <div class="deptListComponent">
-    <p class="title-p">西北农林林大学</p>
-    <div class="for-big-box" v-for="(bigItem,bigIndex) in treeList" :key="bigItem.id" v-if="bigItem.onType">
-      <div class="for-big-name-box">
-        <p class="border-p"></p>
-        <p></p>
-        <p :class="bigItem.id == deptId?'checkColor':''">{{bigItem.name}}</p>
-      </div>
-      <div class="for-box" v-for="(item,index) in bigItem.buildFloorVoList" :key="item.id" v-if="item.onType">
-        <div class="for-name-box">
-          <p class="none-p-1"></p>
-          <p class="border-p"></p>
-          <p></p>
-          <p :class="item.id == buildId?'checkColor':''">{{item.name}}</p>
-        </div>
-        <div class="for-min-box" v-for="(minItem,minIndex) in item.buildFloorVoList" :key="minItem.id">
-          <div class="for-min-name-box" @click="checkButton(bigItem,item,minItem)">
-            <p class="none-p-1"></p>
-            <p class="none-p-2"></p>
-            <p class="border-p"></p>
-            <p></p>
-            <p :class="minItem.id == floorId?'checkColor':''">{{minItem.name}}</p>
-          </div>
+    <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 { systemBuildingGetTreeList,} from "@/api/index";
+  import {
+    laboratoryLevelConfigGetLevelTitleList,
+    laboratoryLabDeptTreeGetTreeList,
+    laboratoryLabDeptTreeGetRoomList } from "@/api/index";
   export default {
     name: 'deptListComponent',
     data () {
@@ -40,89 +71,194 @@
         buildId:null,
         buildName:null,
         floorId:null,
-        floorName:null
+        floorName:null,
+        //新树
+        deptOptions: null,
+        defaultKey:null,
+        defaultProps: {
+          children: "childTreeList",
+          label: "deptName",
+          isLeaf:"leaf",
+        },
+        //当前选中ID
+        treeId:null,
+        queryParams: {
+          searchValue: '',
+        },
+        levelList:[],
+        checkLeveList:[],
       }
     },
     created(){
 
     },
     mounted(){
-      this.systemBuildingGetTreeList()
+      this.laboratoryLevelConfigGetLevelTitleList();
+      this.laboratoryLabDeptTreeGetTreeList()
     },
     methods:{
-      //选中楼层
-      checkButton(bigItem,item,minItem){
-        this.$set(this, 'deptId', bigItem.id)
-        this.$set(this, 'deptName', bigItem.name)
-        this.$set(this, 'buildId', item.id)
-        this.$set(this, 'buildName', item.name)
-        this.$set(this, 'floorId', minItem.id)
-        this.$set(this, 'floorName', minItem.name)
+      //查询按钮
+      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 = {
-          deptId:bigItem.id,
-          deptName:bigItem.name,
-          buildId:item.id,
-          buildName:item.name,
-          floorId:minItem.id,
-          floorName:minItem.name,
+          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)
+          }
         }
-        this.$parent.checkComponent(JSON.parse(JSON.stringify(obj)));
+        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)
+            // })
+          })
+        })
       },
-      //获取学校/楼栋/楼层数据
-      systemBuildingGetTreeList() {
-        systemBuildingGetTreeList({}).then(response => {
-          let list = this.forBuildFloor(response.data);
-          if (list[0]) {
-            for (let i = 0; i < list.length; i++) {
-              if(list[i].buildFloorVoList){
-                list[i].onType = true
-                for (let o = 0; o < list[i].buildFloorVoList.length; o++) {
-                  if(list[i].buildFloorVoList[o].buildFloorVoList){
-                    list[i].buildFloorVoList[o].onType = true
-                    for (let x = 0; x < list[i].buildFloorVoList[o].buildFloorVoList.length; x++) {
-                      if(!this.showType){
-                        this.$set(this, 'deptId', list[i].id)
-                        this.$set(this, 'deptName', list[i].name)
-                        this.$set(this, 'buildId', list[i].buildFloorVoList[o].id)
-                        this.$set(this, 'buildName', list[i].buildFloorVoList[o].name)
-                        this.$set(this, 'floorId', list[i].buildFloorVoList[o].buildFloorVoList[x].id)
-                        this.$set(this, 'floorName', list[i].buildFloorVoList[o].buildFloorVoList[x].name)
-                        this.$set(this, 'showType', true)
-                        let obj = {
-                          deptId:list[i].id,
-                          deptName:list[i].name,
-                          buildId:list[i].buildFloorVoList[o].id,
-                          buildName:list[i].buildFloorVoList[o].name,
-                          floorId:list[i].buildFloorVoList[o].buildFloorVoList[x].id,
-                          floorName:list[i].buildFloorVoList[o].buildFloorVoList[x].name,
-                        }
-                        this.$parent.checkComponent(JSON.parse(JSON.stringify(obj)));
-                      }
-                    }
-                  }
+      //空数据处理
+      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)
               }
             }
-            this.$set(this, 'treeList', list)
+          })
+        }
+        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);
+        });
       },
-      //处理楼栋楼层数据
-      forBuildFloor(list){
+      //手动加载
+      loadNode(node, resolve) {
         let self = this;
-        for(let i=0;i<list.length;i++){
-          if(list[i].buildFloorVoList){
-            if(list[i].buildFloorVoList[0]){
-              list[i].buildFloorVoList = self.forBuildFloor(list[i].buildFloorVoList);
-            }else{
-              delete list[i].buildFloorVoList;
+        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{
-            delete list[i].buildFloorVoList;
+            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([]);
+            }
           }
         }
-        return list
-      },
+
+      }
     },
   }
 </script>
@@ -130,155 +266,198 @@
   .deptListComponent{
     width:430px;
     height:1330px;
-    overflow-y:scroll;
+    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%);
-    .title-p{
-      font-size:26px;
-      color:#03B7CA;
-      margin:16px 0 0 29px;
-    }
-    .checkColor{
-      color:#03B7CA!important;
-    }
-    .for-big-box:nth-last-child(1){
-      .for-big-name-box{
-        .border-p{
-          height:39px!important;
+    #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;
         }
-      }
-      .none-p-1{
-        background-color: rgba(0,0,0,0)!important;
-      }
-      .for-box:nth-last-child(1){
-        .none-p-2{
-          background-color: rgba(0,0,0,0)!important;
+        ::v-deep .el-form-item__content{
+          height:40px;
         }
-      }
-    }
-    .for-big-box{
-      .for-big-name-box{
-        display: flex;
-        margin-left:38px;
-        p:nth-child(1){
-          width:1px;
-          height:50px;
-          background-color: #15827c;
+        ::v-deep .el-input--medium .el-input__inner{
+          height:40px;
         }
-        p:nth-child(2){
-          width:30px;
-          height:1px;
-          margin-top:38px;
-          border-top:1px dashed #15827c;
+        .form-reset-common-style-button{
+          width:80px;
+          height:40px;
+          line-height:40px;
+          font-size:16px;
+          font-weight:500;
+          border:1px solid #06DEFF;
+          color:#06DEFF;
         }
-        p:nth-child(3){
-          cursor: pointer;
-          flex:1;
-          margin-top:28px;
-          line-height:24px;
-          font-size:24px;
-          height:24px;
+        .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-box:nth-last-child(1){
-        .for-name-box{
-          .border-p{
-            height:39px!important;
-          }
-        }
-        .none-p-2{
-          background-color: rgba(0,0,0,0)!important;
-        }
-      }
-      .for-box{
-        .for-name-box{
-          display: flex;
-          margin-left:38px;
-          p:nth-child(1){
-            width:1px;
-            height:50px;
-            background-color: #15827c;
-          }
-          p:nth-child(2){
-            margin-left:42px;
-            width:1px;
-            height:50px;
-            background-color: #15827c;
-          }
-          p:nth-child(3){
-            width:30px;
-            height:1px;
-            margin-top:38px;
-            border-top:1px dashed #15827c;
-          }
-          p:nth-child(4){
-            cursor: pointer;
-            flex:1;
-            margin-top:26px;
-            line-height:24px;
-            font-size:24px;
-            height:24px;
-            color:#fff;
-          }
-        }
-        .for-min-box{
-          .for-min-name-box{
-            display: flex;
-            margin-left:38px;
-            p:nth-child(1){
-              width:1px;
-              height:50px;
-              background-color: #15827c;
-            }
-            p:nth-child(2){
-              margin-left:42px;
-              width:1px;
-              height:50px;
-              background-color: #15827c;
-            }
-            p:nth-child(3){
-              margin-left:42px;
-              width:1px;
-              height:50px;
-              background-color: #15827c;
-            }
-            p:nth-child(4){
-              width:30px;
-              height:1px;
-              margin-top:38px;
-              border-top:1px dashed #15827c;
+      .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; /* 三角形的颜色 */
             }
-            p:nth-child(5){
-              cursor: pointer;
-              flex:1;
-              margin-top:30px;
-              line-height:20px;
-              font-size:20px;
-              height:20px;
-              color:#fff;
+            .el-icon-check:before{
+              position: absolute;
+              left:-14px;
+              top:10px;
             }
           }
         }
-        .for-min-box:nth-last-child(1){
-          .for-min-name-box{
-            .border-p{
-              height:39px!important;
-            }
-          }
+      }
+    }
+    //新树
+    .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; // 也可以去掉
         }
       }
     }
   }
-  .deptListComponent::-webkit-scrollbar {
+  .tree-max-box::-webkit-scrollbar {
     width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
     height: 6px;
   }
-  .deptListComponent::-webkit-scrollbar-thumb {
+  .tree-max-box::-webkit-scrollbar-thumb {
     border-radius: 5px;
     -webkit-box-shadow: inset 0 0 5px #07B4C7;
     background: #07B4C7;
   }
-  .deptListComponent::-webkit-scrollbar-track {
+  .tree-max-box::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 5px #013138;
     border-radius: 0;
     background: #013138;