zc

src/api/index.js

@@ -192,22 +192,6 @@ export function reportReportBsCageRateList (query) {
     params: query
   })
 }
-//资源设备统计-大仪一年内空闲率
-export function reportReportBsEquipFreeList (query) {
-  return request({
-    url: '/report/reportBsEquipFree/list',
-    method: 'get',
-    params: query
-  })
-}
-//资源设备统计-资源预约
-export function reportReportBsResourceRateList (query) {
-  return request({
-    url: '/report/reportBsResourceRate/list',
-    method: 'get',
-    params: query
-  })
-}
 //资源设备统计-设备使用寿命统计
 export function reportReportBsEquipLifeList (query) {
   return request({
@@ -224,22 +208,6 @@ export function reportReportBsEquipOverdueList (query) {
     params: query
   })
 }
-//资源设备统计-大仪预约排行
-export function reportReportBsEquipRankList (query) {
-  return request({
-    url: '/report/reportBsEquipRank/list',
-    method: 'get',
-    params: query
-  })
-}
-//资源设备统计-大仪预约情况概览
-export function reportReportBsEquipRateList (query) {
-  return request({
-    url: '/report/reportBsEquipRate/list',
-    method: 'get',
-    params: query
-  })
-}
 //资源设备统计-设备隐患统计
 export function reportReportBsEquipDangerList (data) {
   return request({
@@ -280,3 +248,74 @@ export function laboratoryLevelConfigGetLevelTitleList(data) {
     data: data
   })
 }
+// 大仪预约情况概览
+export function reportReportBsEquipStatusList(query) {
+  return request({
+    url: '/report/reportBsEquipStatus/list',
+    method: 'get',
+    params: query
+  })
+}
+// 大仪使用排行
+export function reportReportBsEquipRankTopList(query) {
+  return request({
+    url: '/report/reportBsEquipRank/topList',
+    method: 'get',
+    params: query
+  })
+}
+// 大仪使用排行-列表
+export function reportReportBsEquipRankList(data) {
+  return request({
+    url: '/report/reportBsEquipRank/list',
+    method: 'post',
+    data: data
+  })
+}
+// 大仪预约排行
+export function reportReportBsEquipAppointTopList(query) {
+  return request({
+    url: '/report/reportBsEquipAppoint/topList',
+    method: 'get',
+    params: query
+  })
+}
+// 大仪预约排行
+export function reportReportBsEquipAppointList(data) {
+  return request({
+    url: '/report/reportBsEquipAppoint/list',
+    method: 'post',
+    data: data
+  })
+}
+// 资源设备统计-资源分类占比统计
+export function reportReportBsResourceRateAnalysisList(query) {
+  return request({
+    url: '/report/reportBsResourceRate/analysisList',
+    method: 'get',
+    params: query
+  })
+}
+
+//资源设备统计-资源预约情况概览
+export function reportReportBsResourceRateRresourceList (query) {
+  return request({
+    url: '/report/reportBsResourceRate/resourceList',
+    method: 'get',
+    params: query
+  })
+}
+
+/*
+* 获取楼栋楼层实验室打卡在线记录
+* buildId-楼栋
+* floorId-楼层/楼道
+* subId-实验室
+*/
+export function laboratorySubPassOutGetCountByBuildId (data) {
+  return request({
+    url: '/laboratory/subPassOut/getCountByBuildId',
+    method: 'post',
+    data: data
+  })
+}

src/assets/styles/index.scss

@@ -90,6 +90,10 @@ body {
     .el-select .el-input .el-select__caret{
       color:#15827C;
     }
+    .el-input__inner::placeholder{
+      font-size:18px;
+      color:#999;
+    }
   }
   .el-select-dropdown{
     background-color: #032F33;

src/views/emergencyManagement/index.vue

@@ -63,6 +63,17 @@
       this.offPlanMQTT('on');
     },
     methods: {
+      setAddress(list){
+        this.$refs['mapComponent'].getAddress(list)
+      },
+      setUserNum(num){
+        this.$refs['mapComponent'].getUserNum(num)
+      },
+      setMapData(data){
+        this.$refs['equipmentComponent'].initialize({floorId:data.treeId})
+        this.$refs['mapComponent'].initialize({floorId:data.treeId})
+        this.$refs['videoListComponent'].initialize({floorId:data.treeId})
+      },
       //页面切换
       goPage(type){
         this.$parent.pageCheck(type);

src/views/emergencyManagement/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>
-      </div>
+    <!--<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>-->
+      <!--</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>
 </template>
 <script>
-  import { systemBuildingGetTreeList,} from "@/api/index";
+  import {
+    laboratoryLabDeptTreeGetTreeList,
+    laboratorySubPassOutGetCountByBuildId,
+  } from "@/api/index";
   export default {
     name: 'deptListComponent',
     data () {
@@ -40,14 +71,25 @@
         buildId:null,
         buildName:null,
         floorId:null,
-        floorName:null
+        floorName:null,
+        //新树
+        deptOptions: null,
+        defaultKey:null,
+        defaultProps: {
+          children: "childTreeList",
+          label: "deptName",
+          isLeaf:"leaf",
+        },
+        //当前选中ID
+        treeId:null,
       }
     },
     created(){
 
     },
     mounted(){
-      this.systemBuildingGetTreeList()
+      // this.systemBuildingGetTreeList()
+      this.laboratoryLabDeptTreeGetTreeList()
     },
     methods:{
       //选中楼层
@@ -123,6 +165,141 @@
         }
         return list
       },
+
+      //新树
+      laboratoryLabDeptTreeGetTreeList() {
+        let self = this;
+        laboratoryLabDeptTreeGetTreeList({}).then(response => {
+          let self = this;
+          let list = this.delList(response.data);
+          this.$nextTick(()=>{
+            let checkData = list[0].childTreeList[0].childTreeList[0].childTreeList[0].childTreeList[0];
+            //写入楼层下数据
+            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(checkData.treeId);
+              self.$set(self,'treeId',checkData.treeId);
+              //当前位置展示
+              self.checkAddress(checkData.treeId);
+              //查询实验室人数
+              self.laboratorySubPassOutGetCountByBuildId(2,checkData.treeId);
+              //父级地图数据
+              self.$parent.setMapData(checkData);
+            },200);
+          })
+        })
+      },
+      //空数据处理
+      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)
+              }
+            }else{
+              item.leaf = true;
+            }
+          })
+        }
+        return list
+      },
+      //点击操作
+      nodeClickButton(e,data){
+        this.$nextTick(() => {
+          if (e.level == 5) {
+            if(this.treeId != e.treeId){
+              this.treeId = e.treeId;
+              //等待后续逻辑-面板展示-实验室信息-视屏信息
+              //当前位置展示
+              this.checkAddress(e.treeId);
+              //查询实验室人数
+              this.laboratorySubPassOutGetCountByBuildId(2,e.treeId);
+              //父级地图数据
+              this.$parent.setMapData(e);
+            }
+          }
+          this.$refs.tree.setCurrentKey(this.treeId);
+        });
+      },
+      //手动加载
+      loadNode(node, resolve) {
+        let self = this;
+        if (node.data){
+          if(node.data.level != 5){
+            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([]);
+            }
+          }
+        }
+
+      },
+      //选中位置联查
+      checkAddress(id){
+        let list = this.forAddress(this.$refs.tree._data.root.childNodes,id);
+        this.$parent.setAddress(list);
+      },
+      forAddress(list,id){
+        let self = this;
+        let nameList = [];
+        let name = []
+        for(let i=0;i<list.length;i++){
+          if(list[i].data.treeId == id){
+            return list[i].data.deptName
+          }else{
+            if(list[i].childNodes){
+              if(list[i].childNodes[0]){
+                name = self.forAddress(list[i].childNodes,id);
+                if(name){
+                  nameList = [list[i].data.deptName].concat(name)
+                  return nameList
+                }
+              }
+            }
+          }
+        }
+      },
+      //查询实验室在线人数
+      laboratorySubPassOutGetCountByBuildId(type,id){
+        let obj = {};
+        if(type == 1){
+          obj.buildId = id
+        }else if(type == 2){
+          obj.floorId = id
+        }else if(type == 3){
+          obj.subId = id
+        }
+        laboratorySubPassOutGetCountByBuildId(obj).then(response => {
+          this.$parent.setUserNum(response.data)
+        });
+      },
     },
   }
 </script>
@@ -130,7 +307,9 @@
   .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;
@@ -268,17 +447,116 @@
         }
       }
     }
+
+    //新树
+    .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;

src/views/emergencyManagement/pageComponent/mapComponent.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="mapComponent">
     <div class="top-num-max-box">
-      <p class="name-p">{{deptName}}</p>
-      <p class="el-icon-d-arrow-right icon-p"></p>
-      <p class="name-p">{{buildName}}</p>
-      <p class="el-icon-d-arrow-right icon-p"></p>
-      <p class="name-p">{{floorName}}</p>
+      <div class="for-address-box" v-for="(item,index) in addressList" :key="index">
+        <p class="el-icon-d-arrow-right icon-p" v-if="index != 0"></p>
+        <p class="name-p">{{item}}</p>
+      </div>
       <img class="num-img" src="@/assets/ZDimages/icon_bg_rs@1x.png">
       <p class="name-p">实时人数</p>
-      <div class="for-p" v-for="(item,index) in floorUserNum" :key="index">
-        <p>{{item}}</p>
+      <div class="for-p" v-for="(item,index) in floorUserNum" :key="item.value">
+        <p>{{item.label}}</p>
       </div>
+      <p class="name-p" style="margin-left:10px;">人</p>
     </div>
     <!--楼层图/楼层选择-->
     <div class="content-map-select-box">
@@ -95,7 +95,7 @@
   </div>
 </template>
 <script>
-  import { laboratoryBigViewGetFloorByBigView,laboratoryBigViewOnLineUserList,laboratoryBigViewSelectTriggerInfo } from "@/api/index";
+  import { laboratoryBigViewGetFloorByBigView,laboratoryBigViewSelectTriggerInfo } from "@/api/index";
   export default {
     name: 'mapComponent',
     data () {
@@ -104,10 +104,10 @@
         mapData:[],
         mapList:[],
         zoomData:null,
+        //地址
+        addressList:[],
+        //人数
         planMapList:[],
-        deptName:null,
-        buildName:null,
-        floorName:null,
         floorId:null,
         floorUserNum:null,
         //报警页面状态
@@ -132,15 +132,35 @@
         // }
       },
       initialize(item){
-        this.$set(this,'deptName',item.deptName);
-        this.$set(this,'buildName',item.buildName);
         this.$set(this,'floorId',item.floorId);
-        this.$set(this,'floorName',item.floorName);
         this.$nextTick(()=>{
           this.laboratoryBigViewGetFloorByBigView();
-          this.laboratoryBigViewOnLineUserList();
         })
       },
+      //刷新地址
+      getAddress(list){
+        this.$set(this,'addressList',list);
+      },
+      //刷新人数
+      getUserNum(num){
+        if(num == 0){
+          this.$set(this,'floorUserNum',[{
+            value:'a0',
+            label:'0',
+          }]);
+        }else{
+          let list = [];
+          let newNum = num;
+          newNum = newNum+'';
+          for(let i=0;i<newNum.length;i++){
+            list.push({
+              value:'a'+i,
+              label:newNum[i]+'',
+            })
+          }
+          this.$set(this,'floorUserNum',list);
+        }
+      },
       //查询当前正在发生的预案
       laboratoryBigViewSelectTriggerInfo(){
         let self = this;
@@ -290,22 +310,6 @@
           }
         })
       },
-      //查询楼层人数
-      laboratoryBigViewOnLineUserList(){
-        laboratoryBigViewOnLineUserList({floorId:this.floorId}).then(response => {
-          if(response.data == 0){
-            this.$set(this,'floorUserNum',[0]);
-          }else{
-            let list = [];
-            let num = response.data;
-            num = num+'';
-            for(let i=0;i<num.length;i++){
-              list.push(num[i])
-            }
-            this.$set(this,'floorUserNum',list);
-          }
-        })
-      },
       //计算布局最大尺寸
       calculateMapMax(list) {
         //基础参数
@@ -362,6 +366,9 @@
       padding:0 51px;
       height:100px;
       display: flex;
+      .for-address-box{
+        display: flex;
+      }
       .name-p{
         line-height:100px;
         font-size:24px;

src/views/resourceDevice/pageComponent/instrumentLeisureComponent.vue

@@ -12,8 +12,8 @@
           <p>{{item.orderDuration}}</p>
         </div>
         <div class="for-num">
-          <p>使用率</p>
-          <p>{{item.freeRate}}%</p>
+          <p>预约次数</p>
+          <p>{{item.orderNum}}</p>
         </div>
       </div>
       <p v-if="!dataList[0]" style="color:#dedede;font-size:18px;line-height:200px;text-align: center;">暂无数据</p>
@@ -22,7 +22,7 @@
 </template>
 <script>
   import {
-    reportReportBsEquipFreeList,
+    reportReportBsEquipAppointTopList
   } from "@/api/index";
   import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
   export default {
@@ -33,7 +33,7 @@
     data () {
       return {
         propsData:{
-          title:'大仪一年内使用率排行榜',
+          title:'大仪预约排行',
           checkType:'instrumentLeisureComponent',
         },
         eChartsTimer:null,
@@ -57,7 +57,7 @@
         },1000*30);
       },
       getData(){
-        reportReportBsEquipFreeList().then(response => {
+        reportReportBsEquipAppointTopList().then(response => {
           this.$set(this,'dataList',response.data);
         })
       },

src/views/resourceDevice/pageComponent/instrumentRankingComponent.vue

@@ -10,7 +10,8 @@
 </template>
 <script>
 import {
-  reportReportBsEquipRankList,
+  reportReportBsEquipRankTopList,
+
 } from "@/api/index";
   import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
   export default {
@@ -21,7 +22,7 @@ import {
     data () {
       return {
         propsData:{
-          title:'大仪预约排行',
+          title:'大仪使用排行',
           checkType:'instrumentRankingComponent',
         },
         //eCharts定时器
@@ -45,7 +46,7 @@ import {
         },1000*30);
       },
       getData(){
-        reportReportBsEquipRankList().then(response => {
+        reportReportBsEquipRankTopList().then(response => {
           let Data = [];
           let xzData = [];
           let tclData = [];

src/views/resourceDevice/pageComponent/instrumentReservationComponent.vue

@@ -4,96 +4,98 @@
     <div class="eCharts-max-big-box">
       <div id="instrumentReservationComponentECharts"></div>
       <!--<div class="position-dept-box" ref="scrollDiv" @mouseleave="tableTimerFun" @mouseenter="tableTimerOff">-->
-        <!--<div class="max-box" :style="'top:'+tableTop+'px;'">-->
-          <!--<div v-for="(item,index) in dataList" :key="index">-->
-            <!--<p>{{item.name}}</p>-->
-            <!--<p>{{item.value}}</p>-->
-          <!--</div>-->
-        <!--</div>-->
+      <!--<div class="max-box" :style="'top:'+tableTop+'px;'">-->
+      <!--<div v-for="(item,index) in dataList" :key="index">-->
+      <!--<p>{{item.name}}</p>-->
+      <!--<p>{{item.value}}</p>-->
+      <!--</div>-->
+      <!--</div>-->
       <!--</div>-->
     </div>
   </div>
 </template>
 <script>
   import {
-    reportReportBsEquipRateList,
-  } from "@/api/index";
+    reportReportBsEquipStatusList
+  } from '@/api/index'
   import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
+
   export default {
     name: 'instrumentReservationComponent',
     components: {
       titlePageImgComponents
     },
-    data () {
+    data() {
       return {
-        propsData:{
-          title:'大仪预约情况概览',
+        propsData: {
+          title: '大仪预约情况概览'
         },
         //eCharts定时器
-        eChartsTimer:null,
-        dataList:[],
-        tableTimer:null,
-        maxCanSee:4,
-        tableLineHeight:50,
-        tableTop:0,
+        eChartsTimer: null,
+        dataList: [],
+        tableTimer: null,
+        maxCanSee: 4,
+        tableLineHeight: 50,
+        tableTop: 0
       }
     },
-    created(){
+    created() {
 
     },
     mounted() {
-      this.timedRefresh();
+      this.timedRefresh()
     },
     methods: {
-      timedRefresh(){
-        let self = this;
-        self.getData();
+      timedRefresh() {
+        let self = this
+        self.getData()
         //定时动画
-        window.clearInterval(self.eChartsTimer);
-        self.eChartsTimer = setInterval(function(){
-          window.clearInterval(self.tableTimer);
-          self.getData();
-        },1000*30);
+        window.clearInterval(self.eChartsTimer)
+        self.eChartsTimer = setInterval(function() {
+          window.clearInterval(self.tableTimer)
+          self.getData()
+        }, 1000 * 30)
       },
-      getData(){
-        reportReportBsEquipRateList().then(response => {
-          let dataList = [];
-          for(let i=0;i<response.data.equipRateList.length;i++){
+      getData() {
+        reportReportBsEquipStatusList().then(response => {
+          let dataList = []
+          for (let i = 0; i < response.data.length; i++) {
             dataList.push({
-              name:response.data.equipRateList[i].deptName,
-              value:response.data.equipRateList[i].deviceNum
-            });
+              name: response.data[i].name,
+              value: response.data[i].value
+            })
           }
-          this.$set(this,'dataList',dataList);
-          this.eChartsMethod(response.data.dataList);
-          this.tableTimerFun();
+          // this.$set(this,'dataList',dataList);
+          this.eChartsMethod(dataList)
+          // this.tableTimerFun();
         })
       },
       eChartsMethod(dataList) {
         const chartData = dataList
         let option = {
-          color:['#E85657','#0183FA','#FF8400',],
+          color: ['#E85657', '#0183FA', '#FF8400'],
           tooltip: {
+            show:false,
             trigger: 'item',
             textStyle: {
               fontSize: 18
             },
           },
           legend: {
-            icon:'rect',
-            itemWidth:20,
-            itemHeight:20,
-            itemGap:40,
+            icon: 'rect',
+            itemWidth: 20,
+            itemHeight: 20,
+            itemGap: 40,
             orient: 'vertical',
             // bottom:'center',
-            top:90,
-            right:120,
-            textStyle:{
+            top: 90,
+            right: 110,
+            textStyle: {
               // 个
               color: '#D8DDE3',
               rich: {
                 name: {
-                  padding:[0,10,0,0],
+                  padding: [0, 10, 0, 0],
                   verticalAlign: 'right',
                   align: 'left',
                   fontSize: 18,
@@ -101,126 +103,150 @@
                 },
                 percent: {
                   color: '#D8DDE3',
-                  fontSize: 18,
-                },
+                  fontSize: 18
+                }
               },
               borderWidth: 53 // 间距的宽度
             },
 
-            formatter: (name,value) => {
-              let num = null;
+            formatter: (name, value) => {
+              let num = null
               const item = chartData.find(i => {
-                if(name == i.name){
+                if (name == i.name) {
                   num = i.value
                 }
               })
-              return '{name|' + name + '}' + '{percent|' + num + '}' + '{percent|%}'
+              // return '{name|' + name + '}' + '{percent|' + num + '}' + '{percent|%}'
+              return '{name|' + name + '}' + '{percent|' + num + '}'
             }
           },
           grid: {
             left: 0,
             right: 0,
             bottom: 0,
-            top:0,
+            top: 0
           },
           series: [
             {
               name: '占比',
               type: 'pie',
-              center: ['30%', '50%'],
+              center: ['35%', '50%'],
               radius: '50%',
               labelLine: {
-                show: false
+                normal: {
+                  length: 5,
+                  length2: 20,
+                  smooth: true
+                }
               },
               label: {
-                show: false,
-                position: 'center'
+                show: true,
+                position: 'center',
+                normal: {
+                  formatter: '{xx|{b} }{yy|{d} %}',
+                  rich: {
+                    xx: {
+                      fontSize: 16,
+                      lineHeight: 32,
+                      color: '#fff'
+                    },
+                    yy: {
+                      fontSize: 16,
+                      fontWeight: 600,
+                      lineHeight: 32,
+                      color: '#fff'
+                    }
+                  }
+                }
               },
-              itemStyle:{
-                // borderColor:'#000',
-                borderWidth:5,
+              itemStyle: {
+                emphasis: { // 鼠标经过扇形区域时的阴影效果
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
               },
-              data: chartData,
+              data: chartData
             }
           ]
-        };
-        let echartsBox = this.$echarts.init(document.getElementById('instrumentReservationComponentECharts'));
-        echartsBox.clear();
-        echartsBox.setOption(option);
+        }
+        let echartsBox = this.$echarts.init(document.getElementById('instrumentReservationComponentECharts'))
+        echartsBox.clear()
+        echartsBox.setOption(option)
       },
       //开始滚动
       tableTimerFun() {
-        let self = this;
-        var count = 0;  //每滚动一次，count加1
+        let self = this
+        var count = 0  //每滚动一次，count加1
         //tableList是列表的数据对象，maxCanSee代表可视范围内的最大完整数据条数
         if (this.dataList.length > this.maxCanSee) {
           this.tableTimer = setInterval(() => {
             // 如果还没滚动到最后一条数据，则列表向上移动以上的高度
             if (count < self.dataList.length - self.maxCanSee) {
-              self.tableTop -= self.tableLineHeight;   //tableLineHeight代表列表中一行的高度
-              count++;   //每滚动一次，count加1
+              self.tableTop -= self.tableLineHeight   //tableLineHeight代表列表中一行的高度
+              count++   //每滚动一次，count加1
             } else {   //如果滚动到最后一条，则恢复初始状态
-              count = 0;
-              self.tableTop = 0;
+              count = 0
+              self.tableTop = 0
             }
-          }, 3000);
+          }, 3000)
         }
       },
       //停止滚动
-      tableTimerOff(){
+      tableTimerOff() {
         window.clearInterval(this.tableTimer)
-      },
+      }
     },
     beforeDestroy() {
       //清除定时器
-      window.clearInterval(this.tableTimer);
-      window.clearInterval(this.eChartsTimer);
+      window.clearInterval(this.tableTimer)
+      window.clearInterval(this.eChartsTimer)
     },
     destroyed() {
       //清除定时器
-      window.clearInterval(this.tableTimer);
-      window.clearInterval(this.eChartsTimer);
+      window.clearInterval(this.tableTimer)
+      window.clearInterval(this.eChartsTimer)
     }
   }
 </script>
 <style scoped lang="scss">
-  .instrumentReservationComponent{
+  .instrumentReservationComponent {
     height: 403px;
-    width:680px;
+    width: 680px;
     .eCharts-max-big-box {
-      height:341px;
+      height: 341px;
       background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
       overflow: hidden;
       position: relative;
-      #instrumentReservationComponentECharts{
-        width:680px;
-        height:341px;
+      #instrumentReservationComponentECharts {
+        width: 680px;
+        height: 341px;
       }
-      .position-dept-box{
+      .position-dept-box {
         position: absolute;
-        top:90px;
-        left:324px;
-        height:200px;
-        width:300px;
+        top: 90px;
+        left: 324px;
+        height: 200px;
+        width: 300px;
         overflow-y: scroll;
         z-index: 100;
-        .max-box{
+        .max-box {
           position: absolute;
-          transition:all 0.5s;
-          div{
-            height:50px;
+          transition: all 0.5s;
+          div {
+            height: 50px;
             display: flex;
-            overflow:hidden;
+            overflow: hidden;
             transition: all 0.5s;
-            p{
-              height:50px;
-              font-size:20px;
-              line-height:50px;
-              color:#fff;
-              overflow:hidden;
+            p {
+              height: 50px;
+              font-size: 20px;
+              line-height: 50px;
+              color: #fff;
+              overflow: hidden;
             }
-            p:nth-child(1){
-              width:260px;
+            p:nth-child(1) {
+              width: 260px;
             }
           }
         }

src/views/resourceDevice/pageComponent/resourceDangerComponent.vue

@@ -2,20 +2,20 @@
   <div class="resourceDangerComponent">
     <title-page-img-components :propsData="propsData"></title-page-img-components>
     <div class="eCharts-max-big-box">
-      <div class="position-button-left">
-        <p @click="checkButton(1)" :class="buttonType == 1?'left-border-1':'left-border-2'">年度</p>
-        <p @click="checkButton(2)" :class="buttonType == 1?'center-border-2':(buttonType == 2?'center-border-1':(buttonType == 3?'center-border-3':''))">季度</p>
-        <p @click="checkButton(3)" :class="buttonType == 3?'right-border-1':'right-border-2'">月度</p>
-      </div>
+      <!--<div class="position-button-left">-->
+        <!--<p @click="checkButton(1)" :class="buttonType == 1?'left-border-1':'left-border-2'">年度</p>-->
+        <!--<p @click="checkButton(2)" :class="buttonType == 1?'center-border-2':(buttonType == 2?'center-border-1':(buttonType == 3?'center-border-3':''))">季度</p>-->
+        <!--<p @click="checkButton(3)" :class="buttonType == 3?'right-border-1':'right-border-2'">月度</p>-->
+      <!--</div>-->
       <div class="position-text-box">
         <p class="position-text">隐患数</p>
         <p class="position-num">{{dangerNum}}</p>
-        <div class="position-num-box" v-if="yearOverYear>0">
-          <p class="null-p"></p>
-          <p class="text-num-p">同比 {{yearOverYear}}% </p>
-          <img src="@/assets/ZDimages/icom_whpclph_sz@1x.png">
-          <p class="null-p"></p>
-        </div>
+        <!--<div class="position-num-box" v-if="yearOverYear>0">-->
+          <!--<p class="null-p"></p>-->
+          <!--<p class="text-num-p">同比 {{yearOverYear}}% </p>-->
+          <!--<img src="@/assets/ZDimages/icom_whpclph_sz@1x.png">-->
+          <!--<p class="null-p"></p>-->
+        <!--</div>-->
       </div>
       <p class="position-img-box rotate-animation"></p>
       <div id="resourceDangerComponentECharts">
@@ -26,7 +26,7 @@
 </template>
 <script>
   import {
-    reportReportBsEquipDangerList,
+    reportReportBsResourceRateAnalysisList,
   } from "@/api/index";
   import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
   export default {
@@ -37,12 +37,12 @@
     data () {
       return {
         propsData:{
-          title:'资源设施实验室隐患统计',
+          title:'资源分类占比统计',
           // checkType:'resourceDangerComponent',//本次暂无
         },
         //eCharts定时器
         eChartsTimer:null,
-        buttonType:1,
+        // buttonType:1,
         dangerNum:0,
         yearOverYear:0,
       }
@@ -64,17 +64,20 @@
         },1000*30);
       },
       getData(){
-        reportReportBsEquipDangerList({dangerType:4,statisticsType:this.buttonType}).then(response => {
-          this.$set(this,'dangerNum',response.data.dangerNum?response.data.dangerNum:0);
-          this.$set(this,'yearOverYear',response.data.yearOverYear?response.data.yearOverYear:0);
+        reportReportBsResourceRateAnalysisList({}).then(response => {
+          let dangerNum = 0;
+          // this.$set(this,'dangerNum',response.data.dangerNum?response.data.dangerNum:0);
+          // this.$set(this,'yearOverYear',response.data.yearOverYear?response.data.yearOverYear:0);
           let list = [];
-          for(let i=0;i<response.data.subjectList.length;i++){
+          for(let i=0;i<response.data.length;i++){
+            dangerNum = dangerNum + response.data[i].equNumber;
             list.push({
-              name:response.data.subjectList[i].subjectName,
-              value:response.data.subjectList[i].dangerNum
+              name:response.data[i].equType,
+              value:response.data[i].equNumber
             });
           }
           if(list[0]){
+            this.$set(this,'dangerNum',dangerNum);
             this.eChartsMethod(list);
           }
         })
@@ -94,7 +97,7 @@
             itemHeight:10,
             itemGap: 30,
             left:343,
-            top:100,
+            top:50,
             textStyle:{
               // 个
               fontSize:18,

src/views/resourceDevice/pageList/instrumentLeisureComponentTable.vue

@@ -2,7 +2,7 @@
   <div class="instrumentLeisureComponentTable">
     <div class="top-title-max-ox">
       <p></p>
-      <p>大仪一年内使用率排行</p>
+      <p>大仪预约排行</p>
       <p></p>
       <div class="title-button" @click="outButton">
         <img src="@/assets/ZDimages/icon_yh_fh@1x.png">
@@ -13,26 +13,12 @@
       <p class="table-title-p">数据筛选</p>
       <el-form :model="queryParams" class="form-box" ref="queryForm"
                :inline="true" style="width:100%;">
-        <el-form-item label="学院：" prop="state">
-          <el-select v-model="queryParams.state"
-                     placeholder="请选择学院"
-                     style="width: 260px">
-            <el-option
-              v-for="item in deptOptions"
-              :key="item.deptId"
-              :label="item.deptName"
-              :value="item.deptId"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="周期：" prop="timeType" style="margin-left:30px!important;">
-          <el-select v-model="queryParams.timeType"
-                     placeholder="请选择周期"
-                     style="width: 260px;">
-            <el-option key="1" label="年度" value="1"/>
-            <el-option key="2" label="季度" value="2"/>
-            <el-option key="3" label="月度" value="3"/>
-          </el-select>
+        <el-form-item label="设备：" prop="deviceName">
+          <el-input
+            v-model="queryParams.deviceName"
+            placeholder="输入设备"
+            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>
@@ -41,26 +27,17 @@
     <div class="table-list-box">
       <p class="table-list-p">数据列表</p>
       <div class="table-list">
-        <el-table class="table-box" :row-class-name="tableRowClassName"
+        <el-table class="table-box"
                   :data="dataList" @sort-change="sortChange">
           <el-table-column align="center" label="序号"  width="150"  type="index"/>
-          <el-table-column align="center" label="学院" prop="data1"  show-overflow-tooltip/>
-          <el-table-column align="center" label="实验室总数" prop="data2" show-overflow-tooltip/>
-          <el-table-column align="center" label="使用数" prop="data3" show-overflow-tooltip/>
-          <el-table-column align="center" sortable="custom" label="预约时长" prop="data4" width="240" show-overflow-tooltip>
-            <template slot-scope="scope">{{scope.row.data4}}小时</template>
-          </el-table-column>
-          <el-table-column align="center" sortable="custom" label="使用率" prop="data5" width="240" show-overflow-tooltip>
-            <template slot-scope="scope">{{scope.row.data5}}%</template>
-          </el-table-column>
-          <el-table-column align="center" sortable="custom" label="最后一次预约日期" prop="data6" width="240" show-overflow-tooltip>
-            <template slot-scope="scope">{{scope.row.data6}}</template>
+          <el-table-column align="center" label="设备名称" prop="deviceName" show-overflow-tooltip/>
+          <el-table-column align="center" sortable="custom" label="预约时长" width="300" prop="orderDuration" show-overflow-tooltip/>
+          <el-table-column align="center" label="预约次数" prop="orderNum" width="300" show-overflow-tooltip/>
+          <el-table-column align="center" label="最后一次预约日期" width="600" prop="createTime" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime,'{y}-{m}-{d} {h}:{i}') }}</span>
+            </template>
           </el-table-column>
-          <!--<el-table-column align="center" label="创建时间" prop="createTime" width="200" show-overflow-tooltip>-->
-          <!--<template slot-scope="scope">-->
-          <!--<span>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</span>-->
-          <!--</template>-->
-          <!--</el-table-column>-->
         </el-table>
         <pagination :page-sizes="[20, 30, 40, 50]"
                     v-show="total>0"
@@ -75,20 +52,17 @@
   </div>
 </template>
 <script>
-  import { getDeptDropList,} from "@/api/index";
+  import { reportReportBsEquipAppointList } from "@/api/index";
   export default {
     name: 'instrumentLeisureComponentTable',
     data () {
       return {
-        //学院列表
-        deptOptions:[],
         //查询条件
         queryParams:{
           page:1,
           pageSize:20,
-          searchValue:"",
-          state :null,
-          timeType:null,
+          deviceName:"",
+          ascOrDesc:'',
         },
         //列表数据
         dataList:[],
@@ -100,7 +74,6 @@
 
     },
     mounted(){
-      this.getDeptDropList();
       this.getList();
     },
     methods:{
@@ -109,91 +82,34 @@
       },
       //排序方法
       sortChange(val){
-
+        if(val.prop == 'orderDuration'){
+          this.$set(this.queryParams,'ascOrDesc',val.order=='ascending'?true:(val.order=='descending'?false:''));
+          this.handleQuery();
+        }else{
+          this.$set(this.queryParams,'ascOrDesc','');
+        }
       },
       //列表查询
       getList(){
-        let list = [];
-        let dataNameA = ['水产科学实验室','草业科学实验室','预防兽医实验室','临床兽医实验室','基础兽医实验室','动物生物技术实验室','动物科学实验室'];
-        let dataNameB = ["X射线衍射仪", "场发射扫描电子显微镜", "多功能光电子能谱仪", "显微共聚焦拉曼光谱仪", "基质辅助激光解析电离串联飞行时间质谱仪","X射线衍射仪", "场发射扫描电子显微镜", "多功能光电子能谱仪", "显微共聚焦拉曼光谱仪", "基质辅助激光解析电离串联飞行时间质谱仪",];
-        let dataNameC = ['空闲','维修','已预约'];
-        let dataNameD = [
-          '2024-02-03','2024-02-04','2024-02-05','2024-02-06','2024-02-07','2024-02-08','2024-02-09','2024-02-10','2024-02-11',
-          '2024-02-12','2024-02-13','2024-02-14','2024-02-15','2024-02-16','2024-02-17','2024-02-18','2024-02-19','2024-02-20',
-          '2024-02-21','2024-02-22','2024-02-23','2024-02-24','2024-02-25','2024-02-26','2024-02-27','2024-02-28','2024-02-29'
-        ];
-        let maxNum = 20;
-        let num = 9;
-        function getRandomInt(min, max) {
-          min = Math.ceil(min); // 确保min是整数
-          max = Math.floor(max); // 确保max是整数
-          return Math.floor(Math.random() * (max - min + 1)) + min; // 返回介于min和max之间的整数
-        }
-        for(let i=0;i<maxNum;i++){
-          let obj = {};
-          for(let o=0;o<num;o++){
-            if(o == 0){
-              if(dataNameA[0]){
-                obj['data'+(o+1)] = dataNameA[getRandomInt(0,(dataNameA.length-1))]
-              }else{
-                obj['data'+(o+1)] = getRandomInt(1,500)
-              }
-            }else if(o == 1){
-              if(dataNameB[0]){
-                obj['data'+(o+1)] = dataNameB[getRandomInt(0,(dataNameB.length-1))]
-              }else{
-                obj['data'+(o+1)] = getRandomInt(1,500)
-              }
-            }else if(o == 2){
-              if(dataNameC[0]){
-                obj['data'+(o+1)] = dataNameC[getRandomInt(0,(dataNameC.length-1))]
-              }else{
-                obj['data'+(o+1)] = getRandomInt(1,500)
-              }
-            }else if(o == 4){
-              obj['data'+(o+1)] = getRandomInt(1,100)
-            }else if(o == 5){
-              if(dataNameD[0]){
-                obj['data'+(o+1)] = dataNameD[getRandomInt(0,(dataNameD.length-1))]
-              }else{
-                obj['data'+(o+1)] = getRandomInt(1,500)
-              }
-            }else{
-              obj['data'+(o+1)] = getRandomInt(1,500)
-            }
-          }
-          list.push(obj)
-        }
-        this.$set(this,'dataList',list);
+        reportReportBsEquipAppointList(this.queryParams).then(response => {
+          this.$set(this,'dataList',response.data.records);
+          this.$set(this,'total',response.data.total);
+        });
       },
       //查询按钮
       handleQuery(){
         this.$set(this.queryParams,'page',1);
-        // this.getList();
+        this.getList();
       },
       //重置按钮
       resetQuery(){
         this.$set(this,'queryParams',{
           page:1,
           pageSize:20,
-          searchValue:"",
-          state :null,
-        });
-        // this.getList();
-      },
-      tableRowClassName({row, rowIndex}) {
-        if (rowIndex  % 2 == 0) {
-          return 'warning-row';
-        } else {
-          return 'success-row';
-        }
-        return ''
-      },
-      //查询学院列表
-      getDeptDropList(){
-        getDeptDropList({deptName:"",level:2,deptType:1}).then(response => {
-          this.$set(this, 'deptOptions', response.data)
+          deviceName:"",
+          ascOrDesc:'',
         });
+        this.getList();
       },
     },
   }

src/views/resourceDevice/pageList/instrumentRankingComponentTable.vue

@@ -2,7 +2,7 @@
   <div class="instrumentRankingComponentTable">
     <div class="top-title-max-ox">
       <p></p>
-      <p>大仪预约排行</p>
+      <p>大仪使用排行</p>
       <p></p>
       <div class="title-button" @click="outButton">
         <img src="@/assets/ZDimages/icon_yh_fh@1x.png">
@@ -13,17 +13,12 @@
       <p class="table-title-p">数据筛选</p>
       <el-form :model="queryParams" class="form-box" ref="queryForm"
                :inline="true" style="width:100%;">
-        <el-form-item label="学院：" prop="state">
-          <el-select v-model="queryParams.state"
-                     placeholder="请选择学院"
-                     style="width: 260px">
-            <el-option
-              v-for="item in deptOptions"
-              :key="item.deptId"
-              :label="item.deptName"
-              :value="item.deptId"
-            />
-          </el-select>
+        <el-form-item label="设备：" prop="deviceName">
+          <el-input
+            v-model="queryParams.deviceName"
+            placeholder="输入设备"
+            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>
@@ -32,19 +27,13 @@
     <div class="table-list-box">
       <p class="table-list-p">数据列表</p>
       <div class="table-list">
-        <el-table class="table-box" :row-class-name="tableRowClassName"
+        <el-table class="table-box"
                   :data="dataList" @sort-change="sortChange">
           <el-table-column align="center" label="序号"  width="150"  type="index"/>
-          <el-table-column align="center" label="实验室" prop="data1"  show-overflow-tooltip/>
-          <el-table-column align="center" label="设备名称" prop="data2" show-overflow-tooltip/>
-          <el-table-column align="center" sortable="custom" label="预约时长" prop="data3" width="400" show-overflow-tooltip/>
-          <el-table-column align="center" sortable="custom" label="预约费用" prop="data4" width="400" show-overflow-tooltip/>
-          <el-table-column align="center" sortable="custom" label="测试样品" prop="data5" width="400" show-overflow-tooltip/>
-          <!--<el-table-column align="center" label="创建时间" prop="createTime" width="200" show-overflow-tooltip>-->
-          <!--<template slot-scope="scope">-->
-          <!--<span>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</span>-->
-          <!--</template>-->
-          <!--</el-table-column>-->
+          <el-table-column align="center" label="设备名称" prop="deviceName" show-overflow-tooltip/>
+          <el-table-column align="center" sortable="custom" label="预约时长" prop="useTime" width="400" show-overflow-tooltip/>
+          <el-table-column align="center" sortable="custom" label="预约费用" prop="appointFee" width="400" show-overflow-tooltip/>
+          <el-table-column align="center" sortable="custom" label="测试样品" prop="testSample" width="400" show-overflow-tooltip/>
         </el-table>
         <pagination :page-sizes="[20, 30, 40, 50]"
                     v-show="total>0"
@@ -59,31 +48,29 @@
   </div>
 </template>
 <script>
-  import { getDeptDropList,} from "@/api/index";
+  import { reportReportBsEquipRankList} from "@/api/index";
   export default {
     name: 'instrumentRankingComponentTable',
     data () {
       return {
-        //学院列表
-        deptOptions:[],
         //查询条件
         queryParams:{
           page:1,
           pageSize:20,
-          searchValue:"",
-          state :null,
+          deviceName:"",
+          ascOrDesc:'',
+          type:'',
         },
         //列表数据
         dataList:[],
         //数据数量
-        total:60,
+        total:0,
       }
     },
     created(){
 
     },
     mounted(){
-      this.getDeptDropList();
       this.getList();
     },
     methods:{
@@ -92,78 +79,45 @@
       },
       //排序方法
       sortChange(val){
-
+        if(val.prop == 'useTime'){
+          this.$set(this.queryParams,'ascOrDesc',val.order=='ascending'?true:(val.order=='descending'?false:''));
+          this.$set(this.queryParams,'type',1);
+          this.handleQuery();
+        }else if(val.prop == 'appointFee'){
+          this.$set(this.queryParams,'ascOrDesc',val.order=='ascending'?true:(val.order=='descending'?false:''));
+          this.$set(this.queryParams,'type',2);
+          this.handleQuery();
+        }else if(val.prop == 'testSample'){
+          this.$set(this.queryParams,'ascOrDesc',val.order=='ascending'?true:(val.order=='descending'?false:''));
+          this.$set(this.queryParams,'type',3);
+          this.handleQuery();
+        }else{
+          this.$set(this.queryParams,'ascOrDesc','');
+          this.$set(this.queryParams,'type','');
+        }
       },
       //列表查询
       getList(){
-        let list = [];
-        let dataNameA = ['水产科学实验室','草业科学实验室','预防兽医实验室','临床兽医实验室','基础兽医实验室','动物生物技术实验室','动物科学实验室'];
-        let dataNameB = ["X射线衍射仪", "场发射扫描电子显微镜", "多功能光电子能谱仪", "显微共聚焦拉曼光谱仪", "基质辅助激光解析电离串联飞行时间质谱仪","X射线衍射仪", "场发射扫描电子显微镜", "多功能光电子能谱仪", "显微共聚焦拉曼光谱仪", "基质辅助激光解析电离串联飞行时间质谱仪",];
-        let dataNameC = [];
-        let maxNum = 20;
-        let num = 9;
-        function getRandomInt(min, max) {
-          min = Math.ceil(min); // 确保min是整数
-          max = Math.floor(max); // 确保max是整数
-          return Math.floor(Math.random() * (max - min + 1)) + min; // 返回介于min和max之间的整数
-        }
-        for(let i=0;i<maxNum;i++){
-          let obj = {};
-          for(let o=0;o<num;o++){
-            if(o == 0){
-              if(dataNameA[0]){
-                obj['data'+(o+1)] = dataNameA[getRandomInt(0,(dataNameA.length-1))]
-              }else{
-                obj['data'+(o+1)] = getRandomInt(1,500)
-              }
-            }else if(o == 1){
-              if(dataNameB[0]){
-                obj['data'+(o+1)] = dataNameB[getRandomInt(0,(dataNameB.length-1))]
-              }else{
-                obj['data'+(o+1)] = getRandomInt(1,500)
-              }
-            }else if(o == 2){
-              if(dataNameC[0]){
-                obj['data'+(o+1)] = dataNameC[getRandomInt(0,(dataNameC.length-1))]
-              }else{
-                obj['data'+(o+1)] = getRandomInt(1,500)
-              }
-            }else{
-              obj['data'+(o+1)] = getRandomInt(1,500)
-            }
-          }
-          list.push(obj)
-        }
-        this.$set(this,'dataList',list);
+        reportReportBsEquipRankList(this.queryParams).then(response => {
+          this.$set(this,'dataList',response.data.records);
+          this.$set(this,'total',response.data.total);
+        });
       },
       //查询按钮
       handleQuery(){
         this.$set(this.queryParams,'page',1);
-        // this.getList();
+        this.getList();
       },
       //重置按钮
       resetQuery(){
         this.$set(this,'queryParams',{
           page:1,
           pageSize:20,
-          searchValue:"",
-          state :null,
-        });
-        // this.getList();
-      },
-      tableRowClassName({row, rowIndex}) {
-        if (rowIndex  % 2 == 0) {
-          return 'warning-row';
-        } else {
-          return 'success-row';
-        }
-        return ''
-      },
-      //查询学院列表
-      getDeptDropList(){
-        getDeptDropList({deptName:"",level:2,deptType:1}).then(response => {
-          this.$set(this, 'deptOptions', response.data)
+          deviceName:"",
+          ascOrDesc:'',
+          type:'',
         });
+        this.getList();
       },
     },
   }

src/views/resourceDevice/pageList/resourceDangerComponentTable.vue

@@ -2,7 +2,7 @@
   <div class="resourceDangerComponentTable">
     <div class="top-title-max-ox">
       <p></p>
-      <p>资源设施实验室隐患统计</p>
+      <p>资源分类占比统计</p>
       <p></p>
       <div class="title-button" @click="outButton">
         <img src="@/assets/ZDimages/icon_yh_fh@1x.png">

src/views/videoSurveillance/index.vue

@@ -50,8 +50,14 @@
       goPage(type){
         this.$parent.pageCheck(type);
       },
-      checkComponent(item){
-        this.$refs['videoComponent'].initialize(item)
+      setAddress(list){
+        this.$refs['videoComponent'].getAddress(list)
+      },
+      setUserNum(num){
+        this.$refs['videoComponent'].getUserNum(num)
+      },
+      setVideoData(data){
+        this.$refs['videoComponent'].getVideoData(data)
       },
     },
   }

src/views/videoSurveillance/pageComponent/deptListComponent.vue

@@ -27,11 +27,9 @@
           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"
@@ -59,7 +57,9 @@
   import {
     laboratoryLevelConfigGetLevelTitleList,
     laboratoryLabDeptTreeGetTreeList,
-    laboratoryLabDeptTreeGetRoomList } from "@/api/index";
+    laboratoryLabDeptTreeGetRoomList,
+    laboratorySubPassOutGetCountByBuildId,
+  } from "@/api/index";
   export default {
     name: 'deptListComponent',
     data () {
@@ -146,19 +146,22 @@
           let self = this;
           let list = this.delList(response.data);
           this.$nextTick(()=>{
+            let checkData = list[0].childTreeList[0].childTreeList[0].childTreeList[0];
             //写入楼层下数据
             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);
+              //选中列表
+              self.$refs.tree.setCurrentKey(checkData.treeId);
+              self.$set(self,'treeId',checkData.treeId);
+              //当前位置展示
+              self.checkAddress(checkData.treeId);
+              //查询实验室人数
+              self.laboratorySubPassOutGetCountByBuildId(1,checkData.treeId);
+              //父级视屏数据
+              self.$parent.setVideoData(checkData);
             },200);
-            //等待后续逻辑-面板展示-实验室信息-视屏信息
-
-
-
-
-
             // let minObj = JSON.parse(JSON.stringify(obj))
             // minObj.floorId = list[0].childTreeList[0].childTreeList[0].childTreeList[0].treeId;
             // laboratoryLabDeptTreeGetRoomList(minObj).then(minResponse => {
@@ -206,9 +209,17 @@
       nodeClickButton(e,data){
         this.$nextTick(() => {
           if (!e.level||e.level == 4||e.level == 5) {
-            this.treeId = e.treeId;
-            console.log('chenggong')
-            //等待后续逻辑-面板展示-实验室信息-视屏信息
+            if(this.treeId != e.treeId){
+              this.treeId = e.treeId;
+              //等待后续逻辑-面板展示-实验室信息-视屏信息
+              //当前位置展示
+              this.checkAddress(e.treeId);
+              //查询实验室人数
+              let type = !e.subId&&!e.level?3:(e.level == 4 ?1:(e.level == 5?2:''))
+              this.laboratorySubPassOutGetCountByBuildId(type,e.treeId);
+              //父级视屏数据
+              this.$parent.setVideoData(e);
+            }
           }
           this.$refs.tree.setCurrentKey(this.treeId);
         });
@@ -258,7 +269,46 @@
           }
         }
 
-      }
+      },
+      //选中位置联查
+      checkAddress(id){
+        let list = this.forAddress(this.$refs.tree._data.root.childNodes,id);
+        this.$parent.setAddress(list);
+      },
+      forAddress(list,id){
+        let self = this;
+        let nameList = [];
+        let name = []
+        for(let i=0;i<list.length;i++){
+          if(list[i].data.treeId == id){
+            return list[i].data.deptName
+          }else{
+            if(list[i].childNodes){
+              if(list[i].childNodes[0]){
+                name = self.forAddress(list[i].childNodes,id);
+                if(name){
+                  nameList = [list[i].data.deptName].concat(name)
+                  return nameList
+                }
+              }
+            }
+          }
+        }
+      },
+      //查询实验室在线人数
+      laboratorySubPassOutGetCountByBuildId(type,id){
+        let obj = {};
+        if(type == 1){
+          obj.buildId = id
+        }else if(type == 2){
+          obj.floorId = id
+        }else if(type == 3){
+          obj.subId = id
+        }
+        laboratorySubPassOutGetCountByBuildId(obj).then(response => {
+          this.$parent.setUserNum(response.data)
+        });
+      },
     },
   }
 </script>

src/views/videoSurveillance/pageComponent/videoComponent.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="videoComponent">
     <div class="top-num-max-box">
-      <p class="name-p">{{deptName}}</p>
-      <p class="el-icon-d-arrow-right icon-p"></p>
-      <p class="name-p">{{buildName}}</p>
-      <p class="el-icon-d-arrow-right icon-p"></p>
-      <p class="name-p">{{floorName}}</p>
+      <div class="for-address-box" v-for="(item,index) in addressList" :key="index">
+        <p class="el-icon-d-arrow-right icon-p" v-if="index != 0"></p>
+        <p class="name-p">{{item}}</p>
+      </div>
       <img class="num-img" src="@/assets/ZDimages/icon_bg_rs@1x.png">
       <p class="name-p">实时人数</p>
-      <div class="for-p" v-for="(item,index) in floorUserNum" :key="index">
-        <p>{{item}}</p>
+      <div class="for-p" v-for="(item,index) in floorUserNum" :key="item.value">
+        <p>{{item.label}}</p>
       </div>
+      <p class="name-p" style="margin-left:10px;">人</p>
     </div>
     <div class="video-max-big-box">
       <H5PlayerVideo style="margin:10px 0 0 12px;"
@@ -27,7 +27,6 @@
   </div>
 </template>
 <script>
-  import { laboratoryBigViewOnLineUserList } from "@/api/index";
   import { iotCameraFindByCondition } from "@/api/index";
   import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
   export default {
@@ -37,11 +36,11 @@
     },
     data () {
       return {
-        deptName:null,
-        buildName:null,
-        floorName:null,
-        floorId:null,
+        //地址
+        addressList:[],
+        //人数
         floorUserNum:null,
+        //视频
         width:685,
         height:350,
         videoType:false,
@@ -60,14 +59,49 @@
 
     },
     methods:{
-      initialize(item){
-        this.$set(this,'deptName',item.deptName);
-        this.$set(this,'buildName',item.buildName);
-        this.$set(this,'floorId',item.floorId);
-        this.$set(this,'floorName',item.floorName);
-        this.$set(this.videoQueryParams,'page',1);
+      //刷新地址
+      getAddress(list){
+        this.$set(this,'addressList',list);
+      },
+      //刷新人数
+      getUserNum(num){
+        if(num == 0){
+          this.$set(this,'floorUserNum',[{
+            value:'a0',
+            label:'0',
+          }]);
+        }else{
+          let list = [];
+          let newNum = num;
+          newNum = newNum+'';
+          for(let i=0;i<newNum.length;i++){
+            list.push({
+              value:'a'+i,
+              label:newNum[i]+'',
+            })
+          }
+          this.$set(this,'floorUserNum',list);
+        }
+      },
+      //刷新视屏
+      getVideoData(data){
+        let obj = {
+          page:1,
+          pageSize:9,
+          passageway:'',
+          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws'
+        };
+        if(data.level == 4){
+          obj.buildId = data.treeId;
+        }else if(data.level == 5){
+          obj.floorId = data.treeId;
+        }else if(!data.subId&&!data.level){
+          obj.floorId = data.treeId;
+        }else if(data.subId&&!data.level){
+          obj.subId = [data.treeId];
+        }
+        this.$set(this,'videoQueryParams',obj);
         this.$nextTick(()=>{
-          this.laboratoryBigViewOnLineUserList();
           this.videoInitialize()
         })
       },
@@ -75,17 +109,7 @@
         let self = this;
         self.$set(self, 'videoType', false);
         self.$set(self, 'videoList', []);
-        // type 1.楼栋 2.楼层 3.楼道 4.实验室
-        let obj = {
-          page:this.videoQueryParams.page,
-          pageSize:this.videoQueryParams.pageSize,
-          buildId:'',
-          floorId:this.floorId,
-          passageway:'',
-          subIds:[],
-          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws'
-        };
-        iotCameraFindByCondition(obj).then(response => {
+        iotCameraFindByCondition(this.videoQueryParams).then(response => {
           let list = [];
           for(let i=0;i<response.data.records.length;i++){
             list.push(
@@ -105,22 +129,6 @@
           })
         });
       },
-      //查询楼层人数
-      laboratoryBigViewOnLineUserList(){
-        laboratoryBigViewOnLineUserList({floorId:this.floorId}).then(response => {
-          if(response.data == 0){
-            this.$set(this,'floorUserNum',[0]);
-          }else{
-            let list = [];
-            let num = response.data;
-            num = num+'';
-            for(let i=0;i<num.length;i++){
-              list.push(num[i])
-            }
-            this.$set(this,'floorUserNum',list);
-          }
-        })
-      },
     },
   }
 </script>
@@ -135,6 +143,9 @@
       padding:0 51px;
       height:100px;
       display: flex;
+      .for-address-box{
+        display: flex;
+      }
       .name-p{
         line-height:100px;
         font-size:24px;