单点摄像头触发电视墙

src/components/TVWall.vue

@@ -37,9 +37,10 @@ import { getDahuaVideoServer, getTVWallList } from '@/api/dahua/dahua'
 import { tvCameraList } from '@/api/haikang/haikang'
 import DHWs from '@/dahua/lib/DHWs'
 import { rotation } from '@/api/monitor'
+
+
 /** ----------------------------------摄像头预览结束------------------------------------- */
 export default {
-  array:[],
   dicts: ['event_source'],
   components: {},
   data() {
@@ -282,22 +283,9 @@ export default {
           })
       }
     },
-    playRealMonitorVideo(array) { // 自定义设备树自动播放指定通道编码视频
-      const config = this.ws.config
-      const { loginIp, userCode } = config
-      this.ws.postMessage('playRealMonitorVideo', {
-        loginIp,
-        userCode,
-        params: {
-          ctrlCode: "ctrl1",
-          array: array
-        }
-      })
-
-    },
-
     //火点联动电视墙调用
     showTVWall1(longitude,latitude,tvListJson) {
+
       // let that=this;
       /** ----------------------------------大华摄像头预览开始------------------------------------- */
       this.ws.addEventListener('connectStateChange', data => {
@@ -333,17 +321,20 @@ export default {
                 console.log(tvListJson)
                 const array=[]
                 const array1=[]
-                tvListJson[0].treeLabels.forEach((item,index)=>
+                if (tvListJson!=null)
                 {
-                  if (index!=0)
+                  tvListJson[0].treeLabels.forEach((item,index)=>
                   {
-                    const param =Object.assign({})
-                    param.channelId=item.labelCode
-                    array.push(param)
-                    array1.push(item.labelCode)
-                  }
-
-                })
+                    if (index!=0)
+                    {
+                      const param =Object.assign({})
+                      param.channelId=item.labelCode
+                      array.push(param)
+                      array1.push(item.labelCode)
+                    }
+
+                  })
+                }
                 this.create1(longitude,latitude,tvListJson,array,array1)
                 // var obj=JSON.parse(tvListJson)
               } else {
@@ -369,12 +360,6 @@ export default {
       this.TVWallVisible = true
 
     },
-    rotation(lng,lat,list){
-      rotation(lng,lat,list).then(res => {
-        console.log(res)
-
-      })
-    },
     create1(longitude,latitude,tvListJson,array,array1) { // 调用创建控件接口
       let _this = this
       const params = [
@@ -401,10 +386,29 @@ export default {
       setTimeout(() => {
         _this.rotation(longitude,latitude,array1)
       }, 5000)
+
+    },
+    playRealMonitorVideo(array) { // 自定义设备树自动播放指定通道编码视频
+      const config = this.ws.config
+      const { loginIp, userCode } = config
+      this.ws.postMessage('playRealMonitorVideo', {
+        loginIp,
+        userCode,
+        params: {
+          ctrlCode: "ctrl1",
+          array: array
+        }
+      })
+
+    },
+    rotation(lng,lat,list){
+      console.log(list)
+      rotation(lng,lat,list).then(res => {
+      })
     },
-    showTVWall(tvListJson, bfArray) {
+    showTVWall(tvListJson,bfArray) {
       if(tvListJson){
-        this.preview(tvListJson, bfArray);
+        this.preview(tvListJson,bfArray);
         this.TVWallVisible = true;
         return;
       }
@@ -445,7 +449,7 @@ export default {
       this.$modal.msgWarning('请重新安装客户端')
     },
     /** 预览按钮操作 */
-    preview(tvListJson, bfArray) {
+    preview(tvListJson,bfArray) {
       getTVWallList().then(newres => {
         getDahuaVideoServer().then(newResponse => {
           this.ws.detectConnectQt().then(res => {
@@ -469,7 +473,7 @@ export default {
                 if (res) {
                   this.alertLoginSuccess()
                   this.activePanel = 'key2'
-                  this.create(tvListJson?tvListJson:newres.data, bfArray);
+                  this.create(tvListJson?tvListJson:newres.data,bfArray)
                 } else {
                   this.alertLoginFailed()
                 }
@@ -482,7 +486,8 @@ export default {
       })
     },
 
-    create(tvListJson, bfArray) { // 调用创建控件接口
+    create(tvListJson,bfArray) { // 调用创建控件接口
+      // debugger
       let _this = this
       const params = [
         {

src/views/monitor.vue

@@ -78,9 +78,6 @@
         </div>
       </div>
       <!-- 地图 -->
-      <!--      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"-->
-      <!--                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false" @preview="preview">-->
-      <!--      </supermap>-->
       <supermap ref="supermap" style="width: 100%;height: 100vh;" @preview="preview">
       </supermap>
       <!-- 右侧 -->
@@ -148,11 +145,11 @@
   import {
     selectDeviceType,
     selectCameraByDeptId,
-    selectKeyAreaList,
     getSensorListByDeptId,
     getDlblistBydeptId,
-    getCamerasByDeptId,
-    getRegionalFlag
+    selectKeyAreaList,
+    getRegionalFlag,
+    getCamerasByDeptId
   } from '@/api/monitor'
   import {
     treeselect
@@ -204,22 +201,27 @@
       this.bottomMenuList() //获取底部公共组件消息和任务
       this.getTreeselect()
       this.deptId = Cookies.get("deptId")
-      this.getSensorListByDeptIds()
-      this.getDlblistBydeptIds()
+       this.getSensorListByDeptIds()
+       this.getDlblistBydeptIds()
       this.selectDeviceType(-1)
+      // this.showTVWall();
     },
     data() {
       return {
+        //摄像头名称
+        cgqData:'',
+        rightDeptName: undefined,
+        visuForestCloudCameraBOListSearch: [],
         // 部门名称
         cgqData:'',
         deptName: undefined,
+        deptId: '',
         // 部门树选项
         deptOptions: undefined,
         defaultProps: {
           children: 'children',
           label: 'label'
         },
-        iconCurrentIndex1: '-1',
         listCurrentIndex1: '-1',
         listCurrentIndex2: '-1',
         listCurrentIndex3: '-1',
@@ -257,10 +259,8 @@
         indentright: '',
         indentText: '收起左右栏',
         indentdisabled: false,
-        domId: 'dom1',
-        rightDeptName: undefined,
-        deptId: '',
         placeholderMsg: "请输入摄像头名称",
+        domId: 'dom1',
         localMark: "she",
         onShe: false,
         onChuan: false,
@@ -268,11 +268,11 @@
         colors: "green",
         sensorNum: 0,
         loudspeakerNum: 0,
-        values: Math.random(),
-        visuForestCloudCameraBOListSearch: []
+        values: Math.random()
       }
     },
     watch: {
+
       // 根据名称筛选部门树
       deptName(val) {
         this.$refs.tree.filter(val)
@@ -305,32 +305,42 @@
       },
       /* 电视墙替换开始 */
       showTVWall(channelCode, channelName) {
-        // let channelCode = '6044981090191552';
-        // let channelName = '复兴大桥中段-交通事故';
-        let tvListJson = [{
-          'switchTab': '1',
-          'treeLabels': [{
-              'labelCode': '123456',
-              'labelName': '视频场景',
-              'parentLabelCode': null
-            },
-            {
-              'labelCode': 'd941adbbd3e64dac92cc448dec5293cd',
-              'labelName': channelName,
-              'parentLabelCode': 123456
-            }
-          ],
-          'labelChannels': [{
-            'channelDates': [{
-              'channelCode': channelCode,
-              'channelName': channelName,
-              'channelSn': null,
-              'cameraType': 1,
-              'online': 1
-            }],
-            'labelCode': 'd941adbbd3e64dac92cc448dec5293cd'
-          }]
-        }]
+        let tvListJson = [
+          {
+            "switchTab": "2",
+            "treeLabels": [
+              {
+                "id": null,
+                "labelCode": "999",
+                "labelName": "电视墙",
+                "cameraType": null,
+                "parentLabelCode": ""
+              },
+              {
+                "id": "spcamera00010",
+                "labelCode": channelCode,
+                "labelName": channelName,
+                "cameraType": "1",
+                "parentLabelCode": "999"
+              }
+            ],
+            "labelChannels": [
+              {
+                "labelCode": channelCode,
+                "channelDates": [
+                  {
+                    "channelCode": channelCode,
+                    "channelName": channelName,
+                    "channelSn": null,
+                    "cameraType": "1",
+                    "online": "1",
+                    "cameraCode": "1"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
         this.$refs.TVWall.showTVWall(tvListJson, [{
           "channelId": channelCode
         }]);
@@ -419,8 +429,9 @@
                   lat: 43.02,
                   icon: "marker",
                   bindPopupHtml: "",
-                  click: "",
+                  click: i,
                   parameter: "",
+                  name: "",
                   keepBindPopup: false,
                   isAggregation: false,
                 };
@@ -446,25 +457,12 @@
             console.error(error);
           });
       },
-      // 大喇叭
       getDlblistBydeptIds() {
         let that = this;
-        let markersList = [];
-        getDlblistBydeptId(that.deptId).then(function(res) {
-            that.loudspeakerNum = res.data.length
 
-          })
-          .catch(function(error) {
-            console.error(error);
-          });
-      },
-      // 传感器
-      getSensorListByDeptIds() {
-        let that = this;
-        let markersList = [];
-        getSensorListByDeptId(that.deptId).then(function(res) {
-            that.sensorNum = res.data.length
-          })
+        getDlblistBydeptId(that.deptId).then(function(res) {
+          that.loudspeakerNum = res.data.length
+        })
           .catch(function(error) {
             console.error(error);
           });
@@ -494,24 +492,25 @@
                   bindPopupHtml: "",
                   click: "",
                   parameter: "",
+                  name: i,
                   keepBindPopup: false,
                   isAggregation: false,
                 };
-            if (res.data[i].deviceType == 1) {  // 水质传感器
-              markersMap.icon = "sj-icon-map-centerdata_water_quality_sensor";
-            } else if (res.data[i].deviceType == '002') {  // 水尺
-              markersMap.icon = "sj-icon-map-centerdata_water_gauge";
-            } else if (res.data[i].deviceType == '003') {  // 水文监测设备
-              markersMap.icon = "sj-icon-map-centerdata_hydrological_monitoring_equipment";
-            } else if (res.data[i].deviceType == 2) {  // 土壤监测设备
-              markersMap.icon = "sj-icon-map-centerdata_soil_monitoring_equipment";
-            } else if (res.data[i].deviceType == 4) {  // 病虫害监测站
-              markersMap.icon = "sj-icon-map-centerdata_pest_and_disease_monitoring_station";
-            } else if (res.data[i].deviceType == 5) {  // 大气传感器
-              markersMap.icon = "sj-icon-map-centerdata_atmospheric_sensor";
-            } else if (res.data[i].deviceType == 6) {  // 水压传感器
-              markersMap.icon = "sj-icon-map-centerdata_water_pressure_sensor";
-            }
+                if (res.data[i].deviceType == 1) {  // 水质传感器
+                  markersMap.icon = "sj-icon-map-centerdata_water_quality_sensor";
+                } else if (res.data[i].deviceType == '002') {  // 水尺
+                  markersMap.icon = "sj-icon-map-centerdata_water_gauge";
+                } else if (res.data[i].deviceType == '003') {  // 水文监测设备
+                  markersMap.icon = "sj-icon-map-centerdata_hydrological_monitoring_equipment";
+                } else if (res.data[i].deviceType == 2) {  // 土壤监测设备
+                  markersMap.icon = "sj-icon-map-centerdata_soil_monitoring_equipment";
+                } else if (res.data[i].deviceType == 4) {  // 病虫害监测站
+                  markersMap.icon = "sj-icon-map-centerdata_pest_and_disease_monitoring_station";
+                } else if (res.data[i].deviceType == 5) {  // 大气传感器
+                  markersMap.icon = "sj-icon-map-centerdata_atmospheric_sensor";
+                } else if (res.data[i].deviceType == 6) {  // 水压传感器
+                  markersMap.icon = "sj-icon-map-centerdata_water_pressure_sensor";
+                }
 
                 markersMap.lng = res.data[i].longitude;
                 markersMap.lat = res.data[i].latitude;
@@ -534,6 +533,16 @@
             console.error(error);
           });
       },
+      getSensorListByDeptIds() {
+        let that = this;
+        getSensorListByDeptId(that.deptId).then(function(res) {
+          that.sensorNum = res.data.length
+
+        })
+          .catch(function(error) {
+            console.error(error);
+          });
+      },
       selectKeyAreaList() {
         this.keyAreaList = []
         //获取重点区域列表
@@ -556,7 +565,7 @@
             }
             setTimeout(() => {
               that.$refs.supermap.clearG()
-              that.$refs.supermap.setGraphicsList(this.graphicsList, 'red', 0.8)
+              that.$refs.supermap.setGraphicsList(this.graphicsList, 'red',0.8)
             }, 1000)
           } else {
             that.$refs.supermap.clearG()
@@ -629,8 +638,7 @@
         this.$refs.supermap.layerSwitchingList(urlList)
       },
       /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-      selectDeviceType(index) {
-        this.iconCurrentIndex1 = index
+      selectDeviceType() {
         //获取左侧动态感知设备
         let that = this
         selectDeviceType().then(res => {
@@ -648,11 +656,9 @@
               this.sourceData.push(aa)
             }
           }
-
           that.visuForestCloudCameraBOList = res.data.visuForestCloudCameraBOList
           that.visuForestCloudCameraBOListSearch = res.data.visuForestCloudCameraBOList
-          if (res.data.visuForestCloudCameraBOList != null && res.data.visuForestCloudCameraBOList
-            .length > 0) {
+          if (res.data.visuForestCloudCameraBOList != null && res.data.visuForestCloudCameraBOList.length > 0) {
             for (let i = 0; i < res.data.visuForestCloudCameraBOList.length; i++) {
               let markersMap = {
                 lng: 124.59,
@@ -661,6 +667,7 @@
                 bindPopupHtml: '',
                 click: 'preview',
                 parameter: '',
+                name: i,
                 keepBindPopup: false,
                 isAggregation: false
               }
@@ -699,7 +706,6 @@
                 '                  <div class="d-l-l-text">' +
                 '                  <h4>网络运营商：' + (res.data.visuForestCloudCameraBOList[i].operatorType == "1" ?
                   "联通" : (res.data.visuForestCloudCameraBOList[i].operatorType == "2" ? "移动" : "电信")) + '</h4>' +
-
                 '                </div>' +
                 '                </div>' +
                 '                </span>' +
@@ -733,7 +739,7 @@
             setTimeout(() => {
                 that.$refs.supermap.clearM();
               that.$refs.supermap.clearMRadius()
-              that.$refs.supermap.setMarkersRadius(that.cameraMarkersList)
+              that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
             }, 3000)
           } else {
             setTimeout(() => {
@@ -745,7 +751,7 @@
       },
       dropLocation(lat, lng, index) {
         this.listCurrentIndex2 = index
-        this.$refs.supermap.dropLocation(lat, lng)
+        this.$refs.supermap.dropLocation(lat, lng, 15)
       },
       selectCameraByDeptId(depId) {
         this.listCurrentIndex1 = depId
@@ -765,6 +771,7 @@
                 bindPopupHtml: '',
                 click: 'preview',
                 parameter: '',
+                name: i,
                 keepBindPopup: false,
                 isAggregation: false
               }
@@ -817,8 +824,8 @@
               this.cameraMarkersList.push(markersMap)
             }
             setTimeout(() => {
-                that.$refs.supermap.clearM();
               that.$refs.supermap.clearMRadius()
+                that.$refs.supermap.clearM();
               that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
             }, 3000)
           } else {
@@ -949,9 +956,9 @@
               })
 
               that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(
-                function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
-                  that.init(newappkey, newloginIp, newsecret, newloginPort) // 创建播放实例成功后初始化
-                })
+            function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
+                that.init(newappkey, newloginIp, newsecret, newloginPort) // 创建播放实例成功后初始化
+              })
             }, function() { // 启动插件服务失败
             })
           },