监控中心替换组织机构查询摄像头

src/views/monitor.vue

@@ -41,26 +41,52 @@
                   </div>
                 </div>
               </div>
-              <div class="overflow-y" style="height: 33vh;">
-                <el-collapse accordion>
-                  <el-collapse-item v-for="(item,index) in region" :key="index">
-                    <!-- deptId -->
-                    <template slot="title">
-                      <div class="d-l-con sj-collapse" :class="{on:listCurrentIndex1==item.deptId}"
-                           v-on:click="selectCameraByDeptId(item.deptId)">
-                        <div class="d-l-l-text">
-                          <h4 class="collapse-title">{{ item.deptName }}</h4>
-                        </div>
-                        <div class="d-l-l-count">{{ item.deptCount }}</div>
-                      </div>
-                    </template>
-                  </el-collapse-item>
-                </el-collapse>
-              </div>
+              <!--<div class="overflow-y" style="height: 33vh;">-->
+                <!--<el-collapse accordion>-->
+                  <!--<el-collapse-item v-for="(item,index) in region" :key="index">-->
+                    <!--&lt;!&ndash; deptId &ndash;&gt;-->
+                    <!--<template slot="title">-->
+                      <!--<div class="d-l-con sj-collapse" :class="{on:listCurrentIndex1==item.deptId}"-->
+                           <!--v-on:click="selectCameraByDeptId(item.deptId)">-->
+                        <!--<div class="d-l-l-text">-->
+                          <!--<h4 class="collapse-title">{{ item.deptName }}</h4>-->
+                        <!--</div>-->
+                        <!--<div class="d-l-l-count">{{ item.deptCount }}</div>-->
+                      <!--</div>-->
+                    <!--</template>-->
+                  <!--</el-collapse-item>-->
+                <!--</el-collapse>-->
+              <!--</div>-->
 
-              <!-- 横向柱状 echart -->
-              <div class="overflow-y" style="height: 33vh;">
-                <div id="camera-chart" style="width: 100%;height:33vh;"></div>
+              <!--&lt;!&ndash; 横向柱状 echart &ndash;&gt;-->
+              <!--<div class="overflow-y" style="height: 33vh;">-->
+                <!--<div id="camera-chart" style="width: 100%;height:33vh;"></div>-->
+              <!--</div>-->
+              <div  class="overflow-y" style="height: 70vh;">
+                <div class="i-list-con h-65">
+                  <div class="head-container">
+                    <el-input
+                      v-model="deptName"
+                      placeholder="请输入部门名称"
+                      clearable
+                      size="small"
+                      prefix-icon="el-icon-search"
+                      style="margin-bottom: 20px"
+                    />
+                  </div>
+                  <div class="head-container tree-scrollbar" style="height: 700px;overflow-y:auto;">
+                    <el-tree
+                      :data="deptOptions"
+                      :props="defaultProps"
+                      :expand-on-click-node="false"
+                      :filter-node-method="filterNode"
+                      ref="tree"
+                      node-key="id"
+                      :default-expanded-keys="[100]"
+                      @node-click="handleNodeClick"
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </dv-border-box-13>
@@ -137,6 +163,7 @@ import {
 } from '@/api/monitor'
 
 import supermap from '@/components/supermap' //超图
+import { treeselect } from '@/api/system/dept'
 import vheader from '@/components/v-header.vue' //一体化共用头部
 import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
 import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
@@ -176,8 +203,9 @@ export default {
     /** ----------------------------------底部按钮公用组件结束------------------------------------- */
   },
   mounted() {
-    this.selectDeviceType(-1)
-    this.selectKeyAreaList()
+    this.selectDeviceType(-1);
+    this.selectKeyAreaList();
+    this.getTreeselect();
   },
   data() {
     return {
@@ -217,9 +245,42 @@ export default {
       indentText: '收起左右栏',
       indentdisabled: false,
       domId: 'dom1',
+
+      // 部门名称
+      deptName: undefined,
+// 部门树选项
+      deptOptions: undefined,
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+    }
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val)
     }
   },
   methods: {
+    /** 部门树*/
+// 查询部门下拉树结构
+    getTreeselect() {
+      treeselect().then(response => {
+        console.log(response.data)
+        this.deptOptions = response.data
+      })
+    },
+// 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+// 节点单击事件
+    handleNodeClick(data) {
+      // this.findCameraByDept(data.id)
+      this.selectCameraByDeptId(data.id);
+    },
     selectKeyAreaList() {
       this.keyAreaList=[]
       //获取重点区域列表
@@ -441,7 +502,7 @@ export default {
         }
 
         that.visuForestCloudCameraBOList = res.data.visuForestCloudCameraBOList
-        this.cameraChat()
+        // this.cameraChat()
         if (res.data.visuForestCloudCameraBOList != null && res.data.visuForestCloudCameraBOList
           .length > 0) {
           for (let i = 0; i < res.data.visuForestCloudCameraBOList.length; i++) {