监控中心-传感器-大喇叭

src/api/components/supermap.js

@@ -47,4 +47,14 @@ export const iconList = {
   'sj-icon-map-centerdata-t-forest-firehydrant': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-forest-firehydrant.png'),//消防栓
 
 
+  // 数据中心传感器
+  'sj-icon-map-centerdata_water_quality_sensor': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_water_quality_sensor.png'),//水质传感器
+  'sj-icon-map-centerdata_water_gauge': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_water_gauge.png'),//水尺
+  'sj-icon-map-centerdata_hydrological_monitoring_equipment': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_hydrological_monitoring_equipment.png'),//水文监测设备
+  'sj-icon-map-centerdata_soil_monitoring_equipment': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_soil_monitoring_equipment.png'),//土壤监测设备
+  'sj-icon-map-centerdata_pest_and_disease_monitoring_station': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_pest_and_disease_monitoring_station.png'),//病虫害监测站
+  'sj-icon-map-centerdata_atmospheric_sensor': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_atmospheric_sensor.png'),//大气传感器
+  'sj-icon-map-centerdata_water_pressure_sensor': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_water_pressure_sensor.png'),//水压传感器
+
+
 }

src/api/monitor.js

@@ -60,3 +60,18 @@ export function getCamerasByDeptId(deptId) {
     method: 'get',
   })
 }
+
+//根据部门id查询部门及部门以下的数据，没有则默认查询所有
+export function getSensorListByDeptId(deptId) {
+  return request({
+    url: '/center-resources/VisuForestMonitorCenterController/getSensorListByDeptId?deptId=' + deptId,
+    method: 'get',
+  })
+}
+//根据部门id查询部门及部门以下的数据，没有则默认查询所有
+export function getDlblistBydeptId(deptId) {
+  return request({
+    url: '/center-resources/VisuForestMonitorCenterController/getDlblistBydeptId?deptId=' + deptId,
+    method: 'get',
+  })
+}

src/components/supermap.vue

@@ -132,6 +132,7 @@ export default {
       isheatPlotting: false,//火灾蔓延
       heat_lat: 0, //火灾蔓延经纬度
       heat_lng: 0, //火灾蔓延经纬度
+      aac:null,
       host:''
     }
   },
@@ -1001,6 +1002,72 @@ export default {
       //结果得到的也是number类型，单位是 米
       return (dis / 10e2).toFixed(2) + 'km'
     },
+
+    setMarkersA: function(markersList) { //地图标点
+      const _that = this
+      for (let i = 0; i < markersList.length; i++) {
+        let isAggregation = markersList[i].isAggregation == null ? false : markersList[i]
+          .isAggregation //是否聚合点位
+        let keepBindPopup = isAggregation == true ? false : markersList[i].keepBindPopup //提示气泡是否一直显示
+
+        let icon = new window.L.Icon({
+          iconUrl: iconList[markersList[i].icon],
+          iconSize: [48, 48],
+          iconAnchor: [24, 40],
+          popupAnchor: [-3, -40],
+          shadowSize: [41, 41]
+        })
+        let markerClick = window.L.marker([markersList[i].lat, markersList[i].lng], {
+          icon: icon
+        })
+
+        markerClick.on('mouseover', function() {
+          let a = "";
+          _that.aac = setInterval(function (){
+            var color = "green";
+            var value = Math.random();
+            var up = "▲";
+            var down = "▼";
+            if(value>0.5){
+              color = "red";
+              value = value +""+ up;
+            }else{
+              value = value +""+ down;
+            }
+            a = "<span style='color:"+color+"'>当前传感器数值:"+value+"</span>";
+            markerClick.bindPopup(a).openPopup(markerClick.getLatLng());
+            console.log(this);
+          },500);
+        }).on('mouseout', function() {
+          clearInterval(_that.aac);
+          this.closePopup();
+        })
+        if (markersList[i].click != null && markersList[i].click !== '') {
+          if (markersList[i].parameter != null && markersList[i].parameter !== '') {
+            markerClick.on('click', function() {
+              let clickName = markersList[i].click
+              _that.$emit(clickName, markersList[i].parameter)
+            })
+          } else {
+            markerClick.on('click', function() {
+              let clickName = markersList[i].click
+              _that.$emit(clickName)
+            })
+          }
+        }
+        if (isAggregation) {
+          _that.isAggregationLayers.addLayer(markerClick)
+          _that.isAggregationMyGroup = window.L.layerGroup(_that.isAggregationLayers)
+        } else {
+          _that.layers.push(markerClick)
+          _that.myGroup = window.L.layerGroup(_that.layers)
+        }
+      }
+      if (_that.myGroup != undefined && _that.myGroup != false) {
+        _that.map.addLayer(_that.myGroup)
+      }
+      _that.map.addLayer(_that.isAggregationLayers)
+    },
     setMarkers: function(markersList) { //地图标点
       const _that = this
       for (let i = 0; i < markersList.length; i++) {

src/store/modules/user.js

@@ -1,5 +1,6 @@
 import { login, logout, getInfo, refreshToken } from '@/api/login'
 import { getToken, setToken, setExpiresIn, removeToken } from '@/utils/auth'
+import Cookies from "js-cookie";
 
 const user = {
   state: {
@@ -71,6 +72,7 @@ const user = {
           commit('SET_NAME', user.userName)
           commit('SET_USERID', user.id)
           commit('SET_AVATAR', avatar)
+          Cookies.set('deptId',user.deptId)
           resolve(res)
         }).catch(error => {
           reject(error)
@@ -90,7 +92,7 @@ const user = {
         })
       })
     },
-    
+
     // 退出系统
     LogOut({ commit, state }) {
       return new Promise((resolve, reject) => {

src/views/monitor.vue

@@ -16,27 +16,25 @@
             </div>
             <div class="i-list-con h-73">
               <div class="d-l-con-icon">
-                <div class="icon-con w-33 m-btm-no" :class="{on:iconCurrentIndex1==index}"
-                     v-for="(item,index) in visuForestCloudMapDeviceBOList"
-                     v-on:click="selectDeviceType(index)">
+                <div class="icon-con w-33 m-btm-no" :class="{on:onShe}" @click="sheClick">
                   <!--   -->
                   <div class="icon icon-dot"></div>
                   <div class="icon-text">
-                    <h6>{{ item.deviceCount }}</h6>
-                    <h5>{{ item.deviceName }}</h5>
+                    <h6>{{ visuForestCloudMapDeviceBOList[0].deviceCount }}</h6>
+                    <h5>{{ visuForestCloudMapDeviceBOList[0].deviceName }}</h5>
                   </div>
                 </div>
-                <div class="icon-con w-33 m-btm-no">
+                <div class="icon-con w-33 m-btm-no" :class="{on:onChuan}" @click="chuanClick">
                   <div class="icon icon-dot"></div>
                   <div class="icon-text">
-                    <h6>0</h6>
+                    <h6>{{ sensorNum }}</h6>
                     <h5>传感器</h5>
                   </div>
                 </div>
-                <div class="icon-con w-33 m-btm-no">
+                <div class="icon-con w-33 m-btm-no" :class="{on:onLa}" @click="laClick">
                   <div class="icon icon-dot"></div>
                   <div class="icon-text">
-                    <h6>0</h6>
+                    <h6>{{ loudspeakerNum }}</h6>
                     <h5>大喇叭</h5>
                   </div>
                 </div>
@@ -108,7 +106,7 @@
             <div class="i-list-con h-43">
               <el-input
                 v-model="rightDeptName"
-                placeholder="请输入摄像头名称"
+                :placeholder="placeholderMsg"
                 clearable
                 size="small"
                 prefix-icon="el-icon-search"
@@ -168,6 +166,8 @@ import {
   selectDeviceType,
   selectCameraByDeptId,
   selectKeyAreaList,
+  getSensorListByDeptId,
+  getDlblistBydeptId,
   getCamerasByDeptId,
   getRegionalFlag
 } from '@/api/monitor'
@@ -191,6 +191,7 @@ import DHWs from '@/dahua/lib/DHWs'
 /** ----------------------------------摄像头预览结束------------------------------------- */
   // import echarts from 'echarts'
 let echarts = require('echarts')
+import Cookies from 'js-cookie';
 
 export default {
   components: {
@@ -214,10 +215,13 @@ export default {
     /** ----------------------------------底部按钮公用组件结束------------------------------------- */
   },
   mounted() {
-    this.selectDeviceType(-1)
     this.selectKeyAreaList()
     this.bottomMenuList() //获取底部公共组件消息和任务
     this.getTreeselect()
+    this.deptId = Cookies.get("deptId")
+    this.getSensorListByDeptId()
+    this.getDlblistBydeptId()
+    this.selectDeviceType(-1)
   },
   data() {
     return {
@@ -247,7 +251,7 @@ export default {
       pubKey: '',
       oWebControl: null,
       /** ----------------------------------摄像头预览结束------------------------------------- */
-      visuForestCloudMapDeviceBOList: [],
+      visuForestCloudMapDeviceBOList: [{deviceCount: 0, deviceName: "摄像头"}],
       visuForestCloudCameraBOList: [],
       cameraMarkersList: [],
       sourceData: [],
@@ -266,6 +270,16 @@ export default {
       indentdisabled: false,
       domId: 'dom1',
       rightDeptName: undefined,
+      deptId: '',
+      placeholderMsg: "请输入摄像头名称",
+      localMark: "she",
+      onShe: false,
+      onChuan: false,
+      onLa: false,
+      colors: "green",
+      sensorNum: 0,
+      loudspeakerNum: 0,
+      values: Math.random(),
       visuForestCloudCameraBOListSearch:[]
     }
   },
@@ -338,12 +352,156 @@ export default {
 // 节点单击事件
     handleNodeClick(data) {
       let that = this
-      console.log("节点单击事件",data);
+      that.deptId = data.id
+      console.log("节点单击事件", data, that.localMark);
       // this.findCameraByDept(data.id)
-      that.selectCameraByDeptId(data.id);
-      getCamerasByDeptId(data.id).then(res => {
-        that.$refs.TVWalls.showTVWall(res.data, {longitude: data.deptLongitude, latitude: data.deptLatitude});
+      if (that.localMark == 'she') {
+        that.selectCameraByDeptId(data.id);
+        getCamerasByDeptId(data.id).then(res => {
+          that.$refs.TVWalls.showTVWall(res.data, {longitude: data.deptLongitude, latitude: data.deptLatitude});
+        })
+      } else if (that.localMark == 'chuan') {
+        that.getSensorListByDeptId()
+      } else if (that.localMark == 'la') {
+        that.getDlblistBydeptId()
+      }
+    },
+    sheClick() {
+      this.onLa = false
+      this.onShe = true
+      this.onChuan = false
+      this.localMark = 'she'
+      this.placeholderMsg = "请输入摄像头名称"
+      this.selectDeviceType()
+    },
+    laClick() {
+      this.onLa = true
+      this.onShe = false
+      this.onChuan = false
+      this.localMark = 'la'
+      this.placeholderMsg = "请输入大喇叭名称"
+      this.getDlblistBydeptId()
+    },
+    chuanClick() {
+      this.onLa = false
+      this.onShe = false
+      this.onChuan = true
+      this.localMark = 'chuan'
+      this.placeholderMsg = "请输入传感器名称"
+      this.getSensorListByDeptId()
+    },
+    // 大喇叭
+    getDlblistBydeptId() {
+      let that = this;
+      let markersList = [];
+      getDlblistBydeptId(that.deptId).then(function (res) {
+        that.loudspeakerNum = res.data.length
+        that.visuForestCloudCameraBOListSearch = []
+        if (res.data != null && res.data.length > 0) {
+          for (let j = 0; j < res.data.length; j++) {
+            let dat = {
+              cameraName: res.data[j].name,
+              longitude: res.data[j].longitude,
+              latitude: res.data[j].latitude,
+            }
+            that.visuForestCloudCameraBOListSearch.push(dat)
+          }
+          for (let i = 0; i < res.data.length; i++) {
+            let markersMap = {
+              lng: 124.59,
+              lat: 43.02,
+              icon: "marker",
+              bindPopupHtml: "",
+              click: "",
+              parameter: "",
+              keepBindPopup: false,
+              isAggregation: false,
+            };
+            markersMap.icon = "big-horn";
+
+            markersMap.lng = res.data[i].longitude;
+            markersMap.lat = res.data[i].latitude;
+            markersList.push(markersMap);
+          }
+          setTimeout(() => {
+            that.$refs.supermap.clearM(false);
+            that.$refs.supermap.clearM(true);
+            that.$refs.supermap.setMarkers(markersList);
+          }, 2000);
+        } else {
+          setTimeout(() => {
+            that.$refs.supermap.clearM(false);
+            that.$refs.supermap.clearM(true);
+          }, 2000);
+        }
+      })
+        .catch(function (error) {
+          console.error(error);
+        });
+    },
+    // 传感器
+    getSensorListByDeptId() {
+      let that = this;
+      let markersList = [];
+      getSensorListByDeptId(that.deptId).then(function (res) {
+        that.visuForestCloudCameraBOListSearch = []
+        that.sensorNum = res.data.length
+        if (res.data != null && res.data.length > 0) {
+          for (let j = 0; j < res.data.length; j++) {
+            let dat = {
+              cameraName: res.data[j].deviceName,
+              longitude: res.data[j].longitude,
+              latitude: res.data[j].latitude,
+            }
+            that.visuForestCloudCameraBOListSearch.push(dat)
+          }
+          for (let i = 0; i < res.data.length; i++) {
+            let markersMap = {
+              lng: 124.59,
+              lat: 43.02,
+              icon: "marker",
+              bindPopupHtml: "",
+              click: "",
+              parameter: "",
+              keepBindPopup: false,
+              isAggregation: false,
+            };
+            if (res.data[i].deviceCode == '001') {  // 水质传感器
+              markersMap.icon = "sj-icon-map-centerdata_water_quality_sensor";
+            } else if (res.data[i].deviceCode == '002') {  // 水尺
+              markersMap.icon = "sj-icon-map-centerdata_water_gauge";
+            } else if (res.data[i].deviceCode == '003') {  // 水文监测设备
+              markersMap.icon = "sj-icon-map-centerdata_hydrological_monitoring_equipment";
+            } else if (res.data[i].deviceCode == '004') {  // 土壤监测设备
+              markersMap.icon = "sj-icon-map-centerdata_soil_monitoring_equipment";
+            } else if (res.data[i].deviceCode == '005') {  // 病虫害监测站
+              markersMap.icon = "sj-icon-map-centerdata_pest_and_disease_monitoring_station";
+            } else if (res.data[i].deviceCode == '006') {  // 大气传感器
+              markersMap.icon = "sj-icon-map-centerdata_atmospheric_sensor";
+            } else if (res.data[i].deviceCode == '007') {  // 水压传感器
+              markersMap.icon = "sj-icon-map-centerdata_water_pressure_sensor";
+            }
+
+            markersMap.lng = res.data[i].longitude;
+            markersMap.lat = res.data[i].latitude;
+
+            markersList.push(markersMap);
+          }
+          setTimeout(() => {
+            that.$refs.supermap.clearM(false);
+            that.$refs.supermap.clearM(true);
+            that.$refs.supermap.setMarkersA(markersList);
+          }, 2000);
+        } else {
+          setTimeout(() => {
+            that.$refs.supermap.clearM(false);
+            that.$refs.supermap.clearM(true);
+          }, 2000);
+        }
       })
+        .catch(function (error) {
+          console.error(error);
+        });
     },
     selectKeyAreaList() {
       this.keyAreaList=[]