摄像头范围模块添加

src/api/monitor.js

@@ -1,11 +1,12 @@
 import request from '@/utils/request'
 
 // 获取左侧动态感知设备
-export function selectDeviceType(deptId) {
+export function selectDeviceType(param) {
   return request({
     url: '/center-firecontrol/VisuForestMonitorCenterController/selectDeviceType',
     method: 'post',
-    data:{"deptId":deptId}
+    data:param
+
   })
 }
 
@@ -86,3 +87,14 @@ export function getMonitorDeviceAndDataList(deptId) {
     method: 'get',
   })
 }
+//根据部门ID获取具有查看权限的摄像头
+export function selectCameraByCoverage(deptId) {
+  return request({
+    url: '/center-monitor/camera/selectCameraByCoverage',
+    method: 'post',
+    data:{
+      deptId:deptId,
+      type:'8'
+    }
+  })
+}

src/views/monitor.vue

@@ -91,7 +91,7 @@
                   prefix-icon="el-icon-search"
                 />
               </div>
-              <div class="i-list-con" style="height: 62vh">
+              <div class="i-list-con" style="height: 38vh;overflow:scroll" >
                 <el-tree
                   :data="deptOptions"
                   :props="defaultProps"
@@ -103,7 +103,25 @@
                   @node-click="handleNodeClick"
                 />
               </div>
+              <div class="overflow-y" style="height: 34vh" v-show="onShe">
+                <div class="d-l-con-icon">
+                  <div
+                    class="icon-con w-33 m-btm-no"
+                    v-for="(item, index) in CameraCoverageList"
+                    :class="{ on: onCoverage==index }"
+                    @click="selectDeviceType(item.cameraRadius,index)"
+                  >
+                    <!--@click="laClick"-->
+                    <!--&gt;-->
+                    <div class="icon-text">
+                      <h6>{{ item.cameraCount }}</h6>
+                      <h5>{{ item.radius }}</h5>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
+
           </dv-border-box-13>
         </div>
       </div>
@@ -221,8 +239,8 @@ import {
   getDlblistBydeptId,
   selectKeyAreaList,
   getRegionalFlag,
-  getCamerasByDeptId,
-} from "@/api/monitor";
+  getCamerasByDeptId, selectCameraByCoverage
+} from '@/api/monitor'
 import { treeselect } from "@/api/system/dept";
 import supermap from "@/components/supermap-2.5d"; //超图
 import vheader from "@/components/v-header.vue"; //一体化共用头部
@@ -266,7 +284,7 @@ export default {
   mounted() {
     // 初始化地图数据
     this.getSuperMapUrl();
-
+    this.selectCameraByCoverage()
     setTimeout(() => {
       this.selectKeyAreaList();
       this.bottomMenuList(); //获取底部公共组件消息和任务
@@ -274,7 +292,7 @@ export default {
       this.deptId = parseInt(Cookies.get("deptId"));
       this.getMonitorDeviceAndDataLists(this.deptId);
        this.getDlblistBydeptIds();
-      this.selectDeviceType(-1);
+      this.selectDeviceType('',-2);
     }, 2000)
   },
   beforeDestroy() {
@@ -338,14 +356,16 @@ export default {
       placeholderMsg: "请输入摄像头名称",
       domId: "dom1",
       localMark: "she",
-      onShe: false,
+      onShe: true,
       onChuan: false,
       onLa: false,
+      onCoverage: '-1',
       colors: "green",
       sensorNum: 0,
       loudspeakerNum: 0,
       cgqTimer: null,
       values: Math.random(),
+      CameraCoverageList:[]
     };
   },
   watch: {
@@ -365,6 +385,12 @@ export default {
     },
   },
   methods: {
+    selectCameraByCoverage()
+    {
+      selectCameraByCoverage(365).then(res=>{
+        this.CameraCoverageList=res.data
+      })
+    },
     //初始化地图数据
     getSuperMapUrl(){
       getUserProfile().then(response => {
@@ -513,7 +539,7 @@ export default {
       this.deptId=Cookies.get("deptId")
       this.placeholderMsg = "请输入摄像头名称";
       clearInterval(this.cgqTimer);
-      this.selectDeviceType();
+      this.selectDeviceType('',-2);
       this.jkListIcon = 'sj-icon-jkzx'
     },
     laClick() {
@@ -1164,10 +1190,13 @@ export default {
       this.$refs.supermap.layerSwitchingList(urlList);
     },
     /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-    selectDeviceType() {
+    selectDeviceType(cameraRadius,index) {
       //获取左侧动态感知设备
       let that = this;
-      selectDeviceType(this.deptId).then((res) => {
+      that.onCoverage=index
+      this.$refs.supermap.clearM()
+      this.$refs.supermap.clearMRadius()
+      selectDeviceType({deptId:this.deptId,cameraRadius:cameraRadius,type:8}).then((res) => {
         that.cameraMarkersList = [];
         that.visuForestCloudMapDeviceBOList =
           res.data.visuForestCloudMapDeviceBOList;

vue.config.js

@@ -54,7 +54,7 @@ module.exports = {
       [process.env.VUE_APP_BASE_API]: {
         //target: `http://127.0.0.1:3031`,
         // target: `http://192.168.2.118:3031`,
-          target: `http://10.6.52.11:3031`,
+          target: `http://192.168.31.235:3031`,
         //  target: `https://29613561xe.eicp.vip`,
         changeOrigin: true,
         pathRewrite: {