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

src/api/components/supermap.js

@@ -28,4 +28,14 @@ export const iconList = {
   'sj-icon-map-centerdata-t-environment-source-pollution': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-environment-source-pollution.png'),//污染源
   'sj-icon-map-centerdata_t_environment_sewage_outlet': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_t_environment_sewage_outlet.png'),//排污口
   'sj-icon-map-centerdata-t-environment-key-enterprise': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-environment-key-enterprise.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/forest.js

@@ -15,6 +15,13 @@ export function getTodayEvents(param) {
     data: param
   })
 }
+// 获取消息列表
+export function selectMessageList(userId) {
+  return request({
+    url: '/center-message/centerMessageFeign/selectMessageList/'+userId,
+    method: 'get'
+  })
+}
 // 左侧获取事件部门数量
 export function getDeptEventCount(param) {
   return request({

src/api/monitor.js

@@ -52,6 +52,23 @@ export function rotation(lng,lat,list) {
     }
   })
 }
+
+//根据部门id查询部门及部门以下的数据，没有则默认查询所有
+export function getSensorListByDeptId(deptId) {
+  return request({
+    url: '/center-environment/VisuForestMonitorCenterController/getSensorListByDeptId?deptId=' + deptId,
+    method: 'get',
+  })
+}
+//根据部门id查询部门及部门以下的数据，没有则默认查询所有
+export function getDlblistBydeptId(deptId) {
+  return request({
+    url: '/center-environment/VisuForestMonitorCenterController/getDlblistBydeptId?deptId=' + deptId,
+    method: 'get',
+  })
+}
+
+
 /***********************************和上面方法目前一样只是入参不一样以后可能有不一样的地方 start  所以下面三个方法暂时没用到**********************/
 // // 获取环保污染源设备列表
 // export function selectListDevice(param) {

src/components/supermap.vue

@@ -131,6 +131,7 @@ export default {
       isheatPlotting: false,//火灾蔓延
       heat_lat: 0, //火灾蔓延经纬度
       heat_lng: 0, //火灾蔓延经纬度
+      aac:null,
       host:''
     }
   },
@@ -994,6 +995,71 @@ 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)

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"
@@ -167,6 +165,8 @@
 import {
   selectDeviceType,
   selectCameraByDeptId,
+  getSensorListByDeptId,
+  getDlblistBydeptId,
   selectKeyAreaList,
   getCamerasByDeptId,
   getRegionalFlag
@@ -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,9 +215,12 @@ export default {
     /** ----------------------------------底部按钮公用组件结束------------------------------------- */
   },
   mounted() {
-    this.selectDeviceType(-1)
     this.selectKeyAreaList()
     this.getTreeselect()
+    this.deptId = Cookies.get("deptId")
+    this.getSensorListByDeptId()
+    this.getDlblistBydeptId()
+    this.selectDeviceType(-1)
     this.bottomMenuList() //获取底部公共组件消息和任务
   },
   data() {
@@ -247,7 +251,7 @@ export default {
       pubKey: '',
       oWebControl: null,
       /** ----------------------------------摄像头预览结束------------------------------------- */
-      visuForestCloudMapDeviceBOList: [],
+      visuForestCloudMapDeviceBOList: [{deviceCount: 0, deviceName: "摄像头"}],
       visuForestCloudCameraBOList: [],
       cameraMarkersList: [],
       sourceData: [],
@@ -267,6 +271,16 @@ export default {
       indentText: '收起左右栏',
       indentdisabled: false,
       domId: 'dom1',
+      placeholderMsg: "请输入摄像头名称",
+      localMark: "she",
+      onShe: false,
+      onChuan: false,
+      onLa: false,
+      colors: "green",
+      sensorNum: 0,
+      deptId: '',
+      loudspeakerNum: 0,
+      values: Math.random()
     }
   },
   watch: {
@@ -338,12 +352,154 @@ export default {
 // 节点单击事件
     handleNodeClick(data) {
       let that = this
-      console.log("节点单击事件",data);
-      // 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});
+      that.deptId = data.id
+      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=[]