监控中心根据部门落点查看范围内摄像头

src/api/monitor.js

@@ -29,3 +29,11 @@ export function getRegionalFlag(id) {
     method: 'get',
   })
 }
+// 查询部门经纬度在摄像头半径范围内的摄像头列表
+export function findCameraByDept(deptId) {
+  return request({
+    url: '/center-fire/VisuForestEventCenterController/findCameraByDept',
+    method: 'post',
+    data: {deptId:deptId,type:'1'}
+  })
+}

src/views/monitor.vue

@@ -70,6 +70,31 @@
       <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"
                 :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false" @preview="preview">
       </supermap>
+      <div class="rightbar" :class="indentright" ref="right">
+        <!--部门数据-->
+          <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 class="rightbar" :class="indentright" ref="right">
         <div class="forthis">
@@ -133,9 +158,10 @@ import {
   selectDeviceType,
   selectCameraByDeptId,
   selectKeyAreaList,
-  getRegionalFlag
+  getRegionalFlag,
+  findCameraByDept
 } from '@/api/monitor'
-
+import { treeselect } from '@/api/system/dept'
 import supermap from '@/components/supermap' //超图
 import vheader from '@/components/v-header.vue' //一体化共用头部
 import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
@@ -163,6 +189,12 @@ export default {
     eventLocation,
     TVWall
   },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
   created() {
     /** ----------------------------------摄像头预览开始------------------------------------- */
     const DHWsInstance = DHWs.getInstance()
@@ -180,6 +212,7 @@ export default {
     this.selectDeviceType(-1)
     this.selectKeyAreaList()
     this.bottomMenuList() //获取底部公共组件消息和任务
+    this.getTreeselect()
   },
   data() {
     return {
@@ -219,9 +252,124 @@ export default {
       indentText: '收起左右栏',
       indentdisabled: false,
       domId: 'dom1',
+
+
+
+      // 部门名称
+      deptName: undefined,
+      // 部门树选项
+      deptOptions: undefined,
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
     }
   },
   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)
+    },
+    findCameraByDept(deptId) {
+      findCameraByDept(deptId).then(res => {
+        let that = this;
+        //根据设备类型查看列表
+        this.cameraMarkersList = [];
+        that.visuForestCloudCameraBOList = res.data
+        if (res.data != null && res.data.length > 0) {
+          this.cameraMarkersList.push({
+            lng: res.data[0].deptLongitude,
+            lat: res.data[0].deptLatitude,
+            icon: 'marker',
+            bindPopupHtml: '',
+            click: '',
+            keepBindPopup: false,
+            isAggregation: true,
+            radius:0
+          })
+          for (let i = 0; i < res.data.length; i++) {
+            let markersMap = {
+              lng: 124.59,
+              lat: 43.02,
+              icon: 'camera',
+              bindPopupHtml: '',
+              click: 'preview',
+              parameter: '',
+              keepBindPopup: false,
+              isAggregation: false
+            }
+            if (res.data[i].channelCode != null) {
+              markersMap.parameter = {code:res.data[i].cameraCode,
+                type:res.data[i].cameraFactory}
+            } else {
+              markersMap.parameter = []
+            }
+
+            markersMap.lng = res.data[i].longitude
+            markersMap.lat = res.data[i].latitude
+            markersMap.radius = res.data[i].cameraRadius
+            markersMap.bindPopupHtml = '<div class="map-tip">' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>经纬度：' + res.data[i].longitude + ',' + res.data[i].latitude +
+              '</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>摄像头名称：' + res.data[i].cameraName + '</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>摄像头类型：' + (res.data[i].cameraFactory=="1"?"大华":"海康") + '</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>摄像头半径：' + res.data[i].cameraRadius + '米</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
+              '</div>'
+            this.cameraMarkersList.push(markersMap)
+          }
+          setTimeout(() => {
+            that.$refs.supermap.clearM(true)
+            that.$refs.supermap.clearM(false)
+            that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
+          }, 1000)
+        }else{
+          setTimeout(() => {
+            that.$refs.supermap.clearM(false)
+            that.$refs.supermap.clearM(false)
+            that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
+          }, 1000)
+        }
+      })
+    },
+    /** 部门树*/
+
     selectKeyAreaList() {
       this.keyAreaList=[]
       //获取重点区域列表
@@ -559,8 +707,8 @@ export default {
               isAggregation: false
             }
             if (res.data[i].channelCode != null) {
-              markersMap.parameter = {code:res.data.data[i].cameraCode,
-                type:res.data.data[i].cameraFactory}
+              markersMap.parameter = {code:res.data[i].cameraCode,
+                type:res.data[i].cameraFactory}
             } else {
               markersMap.parameter = []
             }