监控中心-传感器修改

src/api/components/supermap.js

@@ -39,4 +39,19 @@ export const iconList = {
   'sj-icon-map-centerdata-t-firecontrol-fire-key-places': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-firecontrol-fire-key-places.png'),//重点场所
   'sj-icon-map-centerdata-t-firecontrol-fire-pressure-sensor': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-firecontrol-fire-pressure-sensor.png'),//压力传感器
   'sj-icon-map-centerdata-t-firecontrol-fulltime-station': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata-t-firecontrol-fulltime-station.png'),//专职站
+  'sj-icon-map-centerdata_t_forest_watercrane': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_t_forest_watercrane.png'),//水鹤
+  'sj-icon-map-centerdata_t_forest_firehydrant@1': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_t_forest_firehydrant@1.png'),//地上消防栓
+  'sj-icon-map-centerdata_t_forest_firehydrant@2': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_t_forest_firehydrant@2.png'),//地下消防栓
+  'sj-icon-map-centerdata_t_forest_firehydrant@3': require('@/assets/icons/sj-icon-map/centerdata/sj-icon-map-centerdata_t_forest_firehydrant@3.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

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

src/components/supermap.vue

@@ -131,6 +131,7 @@ export default {
       isheatPlotting: false,//火灾蔓延
       heat_lat: 0, //火灾蔓延经纬度
       heat_lng: 0, //火灾蔓延经纬度
+      aac:null,
       host:''
     }
   },
@@ -1054,6 +1055,71 @@ export default {
       }
       _that.map.addLayer(_that.isAggregationLayers)
     },
+    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)
+    },
     setMarkersByType: function(markersList, type) { //地图标点(根据类型,可取消落点 clearMByType方法)
       const _that = this
       let lay = []

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: {
@@ -69,6 +70,7 @@ const user = {
             commit('SET_ROLES', ['ROLE_DEFAULT'])
           }
           commit('SET_NAME', user.userName)
+          Cookies.set('deptId',user.deptId)
           commit('SET_USERID', user.id)
           commit('SET_AVATAR', avatar)
           resolve(res)
@@ -90,7 +92,7 @@ const user = {
         })
       })
     },
-    
+
     // 退出系统
     LogOut({ commit, state }) {
       return new Promise((resolve, reject) => {

src/views/monitor.vue

@@ -16,53 +16,51 @@
             </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>
               </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>-->
+              <!--              <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>-->
 
-<!--              &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;">
+              <!--              &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
@@ -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"
@@ -133,7 +131,8 @@
               <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
             </div>
             <div class="i-list-con h-25">
-              <div class="d-l-con" v-for="(item,index) in keyAreaList" :class="{on:listCurrentIndex3 == index}" @click="getRegionalFlag(item.id)">
+              <div class="d-l-con" v-for="(item,index) in keyAreaList" :class="{on:listCurrentIndex3 == index}"
+                   @click="getRegionalFlag(item.id)">
                 <div class="d-l-l-text">
                   <i class="i-small"></i>
                   <h4>{{ item.areaName }}</h4>
@@ -144,10 +143,10 @@
         </div>
       </div>
       <vBottomMenu ref="bottomMenu"></vBottomMenu>
-<!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
-<!--        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img-->
-<!--          src="@/assets/images/mascot.png"/></div>-->
-<!--      </el-tooltip>-->
+      <!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
+      <!--        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img-->
+      <!--          src="@/assets/images/mascot.png"/></div>-->
+      <!--      </el-tooltip>-->
 
     </div>
     <eventLocation ref="eventLocation"></eventLocation>
@@ -167,10 +166,12 @@
 import {
   selectDeviceType,
   selectCameraByDeptId,
+  getSensorListByDeptId,
+  getDlblistBydeptId,
   selectKeyAreaList,
   getRegionalFlag, getCamerasByDeptId
 } from '@/api/monitor'
-import { treeselect } from '@/api/system/dept'
+import {treeselect} from '@/api/system/dept'
 import supermap from '@/components/supermap' //超图
 import vheader from '@/components/v-header.vue' //一体化共用头部
 import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
@@ -190,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: {
@@ -213,30 +215,33 @@ export default {
     /** ----------------------------------底部按钮公用组件结束------------------------------------- */
   },
   mounted() {
-    this.selectDeviceType(-1)
     this.selectKeyAreaList()
     this.bottomMenuList() //获取底部公共组件消息和任务
     this.getTreeselect()
+    this.deptId = Cookies.get("deptId")
+    this.getSensorListByDeptId()
+    this.getDlblistBydeptId()
+    this.selectDeviceType(-1)
     // this.showTVWall();
   },
   data() {
     return {
       //摄像头名称
       rightDeptName: undefined,
-      visuForestCloudCameraBOListSearch:[],
+      visuForestCloudCameraBOListSearch: [],
       // 部门名称
       deptName: undefined,
-// 部门树选项
+      deptId: '',
+      // 部门树选项
       deptOptions: undefined,
       defaultProps: {
         children: 'children',
         label: 'label'
       },
-      iconCurrentIndex1: '-1',
       listCurrentIndex1: '-1',
       listCurrentIndex2: '-1',
       listCurrentIndex3: '-1',
-      graphicsList:[],//重点区域
+      graphicsList: [],//重点区域
       /** ----------------------------------摄像头预览开始------------------------------------- */
       //大华
       activePanel: 'key1',
@@ -250,7 +255,7 @@ export default {
       pubKey: '',
       oWebControl: null,
       /** ----------------------------------摄像头预览结束------------------------------------- */
-      visuForestCloudMapDeviceBOList: [],
+      visuForestCloudMapDeviceBOList: [{deviceCount: 0, deviceName: "摄像头"}],
       visuForestCloudCameraBOList: [],
       cameraMarkersList: [],
       sourceData: [],
@@ -267,24 +272,35 @@ export default {
       indentright: '',
       indentText: '收起左右栏',
       indentdisabled: false,
+      placeholderMsg: "请输入摄像头名称",
       domId: 'dom1',
+      localMark: "she",
+      onShe: false,
+      onChuan: false,
+      onLa: false,
+      colors: "green",
+      sensorNum: 0,
+      loudspeakerNum: 0,
+      values: Math.random()
     }
   },
   watch: {
+
     // 根据名称筛选部门树
     deptName(val) {
       this.$refs.tree.filter(val)
     },
-    rightDeptName(val){
-      this.visuForestCloudCameraBOListSearch=[];
+    rightDeptName(val) {
+      this.visuForestCloudCameraBOListSearch = [];
       for (let i in this.visuForestCloudCameraBOList) {
-        if(this.visuForestCloudCameraBOList[i].cameraName.indexOf(val) != -1){
+        if (this.visuForestCloudCameraBOList[i].cameraName.indexOf(val) != -1) {
           this.visuForestCloudCameraBOListSearch.push(this.visuForestCloudCameraBOList[i]);
         }
       }
     }
   },
   methods: {
+
     /* 电视墙替换开始 */
     showTVWall(channelCode, channelName) {
       let tvListJson = [
@@ -314,7 +330,7 @@ export default {
           }]
         }
       ]
-      this.$refs.TVWall.showTVWall(tvListJson,[{"channelId":channelCode}]);
+      this.$refs.TVWall.showTVWall(tvListJson, [{"channelId": channelCode}]);
       this.$refs.supermap.isEditableLayers = false;
       this.$refs.bottomMenu.showChild = false;
       this.$refs.bottomMenu.showBanChild = false;
@@ -322,7 +338,7 @@ export default {
     },
     /* 电视墙替换结束 */
     /** 部门树*/
-// 查询部门下拉树结构
+    // 查询部门下拉树结构
     getTreeselect() {
       treeselect().then(response => {
         console.log(response.data)
@@ -337,27 +353,171 @@ 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=[]
+      this.keyAreaList = []
       //获取重点区域列表
       let that = this
       selectKeyAreaList().then(res => {
         that.keyAreaList = res.data
       })
     },
-    getRegionalFlag(id){
+    getRegionalFlag(id) {
       //获取重点区域
-      this.listCurrentIndex3=id
+      this.listCurrentIndex3 = id
       let that = this
       getRegionalFlag(id).then(res => {
-        that.graphicsList=[]
+        that.graphicsList = []
         //地图标记
         if (res.data != null && res.data.length > 0) {
           for (let i = 0; i < res.data.length; i++) {
@@ -442,12 +602,11 @@ export default {
       this.$refs.supermap.layerSwitchingList(urlList)
     },
     /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-    selectDeviceType(index) {
-      this.iconCurrentIndex1 = index
+    selectDeviceType() {
       //获取左侧动态感知设备
       let that = this
       selectDeviceType().then(res => {
-        that.cameraMarkersList=[]
+        that.cameraMarkersList = []
         that.visuForestCloudMapDeviceBOList = res.data.visuForestCloudMapDeviceBOList
 
         that.region = res.data.visuForestCloudTodaySjfbBOList
@@ -478,8 +637,11 @@ export default {
               isAggregation: false
             }
             if (res.data.visuForestCloudCameraBOList[i].channelCode != null) {
-              markersMap.parameter = {code:res.data.visuForestCloudCameraBOList[i].cameraCode, name:res.data.visuForestCloudCameraBOList[i].cameraName,
-                type:res.data.visuForestCloudCameraBOList[i].cameraFactory}
+              markersMap.parameter = {
+                code: res.data.visuForestCloudCameraBOList[i].cameraCode,
+                name: res.data.visuForestCloudCameraBOList[i].cameraName,
+                type: res.data.visuForestCloudCameraBOList[i].cameraFactory
+              }
             } else {
               markersMap.parameter = []
             }
@@ -507,7 +669,7 @@ export default {
               '<span>' +
               '                  <div class="d-l-con">' +
               '                  <div class="d-l-l-text">' +
-              '                  <h4>网络运营商：' + (res.data.visuForestCloudCameraBOList[i].operatorType == "1" ? "联通" : (res.data.visuForestCloudCameraBOList[i].operatorType == "2" ? "移动":"电信")) + '</h4>' +
+              '                  <h4>网络运营商：' + (res.data.visuForestCloudCameraBOList[i].operatorType == "1" ? "联通" : (res.data.visuForestCloudCameraBOList[i].operatorType == "2" ? "移动" : "电信")) + '</h4>' +
               '                </div>' +
               '                </div>' +
               '                </span>' +
@@ -572,8 +734,10 @@ export default {
               isAggregation: false
             }
             if (res.data[i].channelCode != null) {
-              markersMap.parameter = {code:res.data[i].cameraCode, name:res.data[i].cameraName,
-                type:res.data[i].cameraFactory}
+              markersMap.parameter = {
+                code: res.data[i].cameraCode, name: res.data[i].cameraName,
+                type: res.data[i].cameraFactory
+              }
             } else {
               markersMap.parameter = []
             }
@@ -600,7 +764,7 @@ export default {
               '<span>' +
               '                  <div class="d-l-con">' +
               '                  <div class="d-l-l-text">' +
-              '                  <h4>网络运营商：' + (res.data[i].operatorType == "1" ? "联通" : (res.data[i].operatorType == "2" ? "移动":"电信")) + '</h4>' +
+              '                  <h4>网络运营商：' + (res.data[i].operatorType == "1" ? "联通" : (res.data[i].operatorType == "2" ? "移动" : "电信")) + '</h4>' +
               '                </div>' +
               '                </div>' +
               '                </span>' +
@@ -620,7 +784,7 @@ export default {
             that.$refs.supermap.clearM(false)
             that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
           }, 1000)
-        }else{
+        } else {
           that.$refs.supermap.clearM(true)
           that.$refs.supermap.clearM(false)
         }
@@ -643,24 +807,24 @@ export default {
       }
     },
     /** ----------------------------------摄像头预览开始------------------------------------- */
-    alertLogin: function() {
+    alertLogin: function () {
       this.$modal.msg('登录中....')
     },
-    alertLoginSuccess: function() {
+    alertLoginSuccess: function () {
       this.$modal.msgSuccess('登录成功！')
     },
-    alertLoginFailed: function() {
+    alertLoginFailed: function () {
       this.$modal.msgError('登陆失败！')
     },
-    alertReinstall: function() {
+    alertReinstall: function () {
       this.$modal.msgWarning('请重新安装客户端')
     },
     cancelEventLocationShow() {
       if (this.oWebControl != null) {
         this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
-        this.oWebControl.JS_Disconnect().then(function() {  // 断开与插件服务连接成功
+        this.oWebControl.JS_Disconnect().then(function () {  // 断开与插件服务连接成功
           },
-          function() {  // 断开与插件服务连接失败
+          function () {  // 断开与插件服务连接失败
           })
       }
     },
@@ -671,7 +835,7 @@ export default {
 
     /** 预览按钮操作 */
     preview_废弃(cameraParam) {
-      if(cameraParam.type=='1'){
+      if (cameraParam.type == '1') {
         getDahuaVideoServer().then(newResponse => {
           console.log(newResponse)
           this.ws.detectConnectQt().then(res => {
@@ -701,13 +865,13 @@ export default {
             }
           })
         })
-      }else if(cameraParam.type=='0'){
+      } else if (cameraParam.type == '0') {
         let that = this
         that.cameraVisible = true
-        getHaiKangVideoServer({cameraCode:cameraParam.code}).then(newResponse => {
-          that.cameraTitle = '摄像头-'+newResponse.data.cameraName
-          that.initPlugin(newResponse.data.appkey,newResponse.data.loginIp,newResponse.data.secret,newResponse.data.loginPort)
-          setTimeout(function() {
+        getHaiKangVideoServer({cameraCode: cameraParam.code}).then(newResponse => {
+          that.cameraTitle = '摄像头-' + newResponse.data.cameraName
+          that.initPlugin(newResponse.data.appkey, newResponse.data.loginIp, newResponse.data.secret, newResponse.data.loginPort)
+          setTimeout(function () {
             that.playhk(newResponse.data.channelCode)
           }, 5000)
         })
@@ -727,41 +891,41 @@ export default {
 
     /** ----------------------------------海康摄像头预览开始------------------------------------- */
     // 创建播放实例
-    initPlugin(newappkey,newloginIp,newsecret,newloginPort) {
-      let that=this
+    initPlugin(newappkey, newloginIp, newsecret, newloginPort) {
+      let that = this
       that.oWebControl = new WebControl({
         szPluginContainer: 'playWnd',                       // 指定容器id
         iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
         iServicePortEnd: 15909,
         szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',   // 用于IE10使用ActiveX的clsid
-        cbConnectSuccess: function() {                     // 创建WebControl实例成功
+        cbConnectSuccess: function () {                     // 创建WebControl实例成功
           that.oWebControl.JS_StartService('window', {         // WebControl实例创建成功后需要启动服务
             dllPath: './VideoPluginConnect.dll'         // 值"./VideoPluginConnect.dll"写死
-          }).then(function() {                           // 启动插件服务成功
+          }).then(function () {                           // 启动插件服务成功
             that.oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
               cbIntegrationCallBack: cbIntegrationCallBack
             })
 
-            that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
-              that.init(newappkey,newloginIp,newsecret,newloginPort)  // 创建播放实例成功后初始化
+            that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
+              that.init(newappkey, newloginIp, newsecret, newloginPort)  // 创建播放实例成功后初始化
             })
-          }, function() { // 启动插件服务失败
+          }, function () { // 启动插件服务失败
           })
         },
-        cbConnectError: function() { // 创建WebControl实例失败
+        cbConnectError: function () { // 创建WebControl实例失败
           that.oWebControl = null
           $('#playWnd').html('插件未启动，正在尝试启动，请稍候...<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
           WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
           initCount++
           if (initCount < 3) {
-            setTimeout(function() {
-              that.initPlugin(newappkey,newloginIp,newsecret,newloginPort)
+            setTimeout(function () {
+              that.initPlugin(newappkey, newloginIp, newsecret, newloginPort)
             }, 3000)
           } else {
             $('#playWnd').html('插件启动失败，请检查插件是否安装！<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
           }
         },
-        cbConnectClose: function(bNormalClose) {
+        cbConnectClose: function (bNormalClose) {
           // 异常断开：bNormalClose = false
           // JS_Disconnect正常断开：bNormalClose = true
           console.log('cbConnectClose')
@@ -792,9 +956,9 @@ export default {
       })
     },
     //初始化
-    init(newappkey,newloginIp,newsecret,newloginPort) {
+    init(newappkey, newloginIp, newsecret, newloginPort) {
       let that = this
-      that.getPubKey(function() {
+      that.getPubKey(function () {
         ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
         var appkey = newappkey                           //综合安防管理平台提供的appkey，必填
         var secret = that.setEncrypt(newsecret)   //综合安防管理平台提供的secret，必填
@@ -828,7 +992,7 @@ export default {
             showSmart: showSmart,                      //是否显示智能信息
             buttonIDs: buttonIDs                       //自定义工具条按钮
           })
-        }).then(function(oData) {
+        }).then(function (oData) {
           that.oWebControl.JS_Resize(1020, 600)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
         })
       })
@@ -841,7 +1005,7 @@ export default {
         argument: JSON.stringify({
           keyLength: 1024
         })
-      }).then(function(oData) {
+      }).then(function (oData) {
         console.log(oData)
         if (oData.responseMsg.data) {
           that.pubKey = oData.responseMsg.data

vue.config.js

@@ -52,8 +52,9 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        // target: `http://127.0.0.1:3031`,
-        target: `http://121.36.228.66:3031`,
+        // target: `http://117.78.49.164:3031`,
+        target: `http://127.0.0.1:3031`,
+        // target: `http://121.36.228.66:3031`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''