单点摄像头触发电视墙

src/components/TVWall.vue

@@ -35,8 +35,9 @@
 /** ----------------------------------摄像头预览开始------------------------------------- */
 import { getDahuaVideoServer, getTVWallList } from '@/api/dahua/dahua'
 import { tvCameraList } from '@/api/haikang/haikang'
-import { rotation } from '@/api/monitor'
 import DHWs from '@/dahua/lib/DHWs'
+import { rotation } from '@/api/monitor'
+
 
 /** ----------------------------------摄像头预览结束------------------------------------- */
 export default {
@@ -283,7 +284,8 @@ export default {
       }
     },
     //火点联动电视墙调用
-    showTVWall1(longitude, latitude, tvListJson) {
+    showTVWall1(longitude,latitude,tvListJson) {
+
       // let that=this;
       /** ----------------------------------大华摄像头预览开始------------------------------------- */
       this.ws.addEventListener('connectStateChange', data => {
@@ -319,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 {
@@ -397,12 +402,13 @@ export default {
 
     },
     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;
       }
@@ -443,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 => {
@@ -467,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()
                 }
@@ -481,6 +487,7 @@ export default {
     },
 
     create(tvListJson,bfArray) { // 调用创建控件接口
+      // debugger
       let _this = this
       const params = [
         {
@@ -509,18 +516,6 @@ export default {
       _this.ws.createCtrl(params);
       _this.playRealMonitorVideo(bfArray)
     },
-    playRealMonitorVideo(array) { // 自定义设备树自动播放指定通道编码视频
-      const config = this.ws.config
-      const { loginIp, userCode } = config
-      this.ws.postMessage('playRealMonitorVideo', {
-        loginIp,
-        userCode,
-        params: {
-          ctrlCode: "ctrl1",
-          array: array
-        }
-      })
-    },
     setPos() {
       let target = document.getElementById(this.domId)
       console.log(target, 'target')

src/views/monitor.vue

@@ -148,8 +148,8 @@
     getSensorListByDeptId,
     getDlblistBydeptId,
     selectKeyAreaList,
-    getCamerasByDeptId,
-    getRegionalFlag
+    getRegionalFlag,
+    getCamerasByDeptId
   } from '@/api/monitor'
   import {
     treeselect
@@ -198,25 +198,29 @@
     },
     mounted() {
       this.selectKeyAreaList()
+      this.bottomMenuList() //获取底部公共组件消息和任务
       this.getTreeselect()
       this.deptId = Cookies.get("deptId")
        this.getSensorListByDeptIds()
        this.getDlblistBydeptIds()
       this.selectDeviceType(-1)
-      this.bottomMenuList() //获取底部公共组件消息和任务
+      // this.showTVWall();
     },
     data() {
       return {
+        //摄像头名称
+        rightDeptName: undefined,
+        visuForestCloudCameraBOListSearch: [],
         // 部门名称
         cgqData:'',
         deptName: undefined,
+        deptId: '',
         // 部门树选项
         deptOptions: undefined,
         defaultProps: {
           children: 'children',
           label: 'label'
         },
-        iconCurrentIndex1: '-1',
         listCurrentIndex1: '-1',
         listCurrentIndex2: '-1',
         listCurrentIndex3: '-1',
@@ -248,28 +252,26 @@
         activeName: 'info',
         radio: '1',
         region: [],
-        rightDeptName: undefined,
-        visuForestCloudCameraBOListSearch: [],
         //左右缩进
         indentStyle: '',
         indentleft: '',
         indentright: '',
         indentText: '收起左右栏',
         indentdisabled: false,
-        domId: 'dom1',
         placeholderMsg: "请输入摄像头名称",
+        domId: 'dom1',
         localMark: "she",
         onShe: false,
         onChuan: false,
         onLa: false,
         colors: "green",
         sensorNum: 0,
-        deptId: '',
         loudspeakerNum: 0,
         values: Math.random()
       }
     },
     watch: {
+
       // 根据名称筛选部门树
       deptName(val) {
         this.$refs.tree.filter(val)
@@ -300,34 +302,45 @@
           that.cgqData =  "<span style='color:" + color + "'>" + value + "</span>";
         }, 1000)
       },
+
       /* 电视墙替换开始 */
       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
         }]);
@@ -354,6 +367,8 @@
       handleNodeClick(data) {
         let that = this
         that.deptId = data.id
+        console.log("节点单击事件", data, that.localMark);
+        // this.findCameraByDept(data.id)
         if (that.localMark == 'she') {
           that.selectCameraByDeptId(data.id);
           getCamerasByDeptId(data.id).then(res => {
@@ -414,8 +429,9 @@
                   lat: 43.02,
                   icon: "marker",
                   bindPopupHtml: "",
-                  click: "",
+                  click: i,
                   parameter: "",
+                  name: "",
                   keepBindPopup: false,
                   isAggregation: false,
                 };
@@ -429,12 +445,12 @@
                 that.$refs.supermap.clearM();
               that.$refs.supermap.clearMRadius()
                 that.$refs.supermap.setMarkers(markersList);
-              }, 3000);
+              }, 2000);
             } else {
               setTimeout(() => {
                 that.$refs.supermap.clearM();
               that.$refs.supermap.clearMRadius()
-              }, 3000);
+              }, 2000);
             }
           })
           .catch(function(error) {
@@ -476,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;
@@ -504,12 +521,12 @@
                 that.$refs.supermap.clearM();
               that.$refs.supermap.clearMRadius()
                 that.$refs.supermap.setMarkers(markersList);
-              }, 3000);
+              }, 2000);
             } else {
               setTimeout(() => {
                 that.$refs.supermap.clearM();
               that.$refs.supermap.clearMRadius()
-              }, 3000);
+              }, 2000);
             }
           })
           .catch(function(error) {
@@ -518,9 +535,7 @@
       },
       getSensorListByDeptIds() {
         let that = this;
-        let markersList = [];
         getSensorListByDeptId(that.deptId).then(function(res) {
-
           that.sensorNum = res.data.length
 
         })
@@ -550,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()
@@ -623,8 +638,7 @@
         this.$refs.supermap.layerSwitchingList(urlList)
       },
       /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-      selectDeviceType(index) {
-        this.iconCurrentIndex1 = index
+      selectDeviceType() {
         //获取左侧动态感知设备
         let that = this
         selectDeviceType().then(res => {
@@ -642,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,
@@ -655,6 +667,7 @@
                 bindPopupHtml: '',
                 click: 'preview',
                 parameter: '',
+                name: i,
                 keepBindPopup: false,
                 isAggregation: false
               }
@@ -727,7 +740,7 @@
                 that.$refs.supermap.clearM();
               that.$refs.supermap.clearMRadius()
               that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
-            }, 1000)
+            }, 3000)
           } else {
             setTimeout(() => {
                 that.$refs.supermap.clearM();
@@ -738,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
@@ -758,6 +771,7 @@
                 bindPopupHtml: '',
                 click: 'preview',
                 parameter: '',
+                name: i,
                 keepBindPopup: false,
                 isAggregation: false
               }
@@ -808,28 +822,12 @@
                 '                </span>' +
                 '</div>'
               this.cameraMarkersList.push(markersMap)
-              //   cameraAccount: "1"
-              // cameraCode: "1000010"
-              // cameraFactory: "2"
-              // cameraIp: "1"
-              // cameraName: "2"
-              // cameraPasword: "2"
-              // cameraPort: 2
-              // cameraRadius: 20
-              // cameraRegion: "3"
-              // dataDeptId: null
-              // dataStatus: null
-              // eventType: null
-              // height: "11"
-              // id: "0d165fc362514f79b12a899ea66295fd"
-              // latitude: "49.325625"
-              // longitude: "125.3333"
             }
             setTimeout(() => {
-                that.$refs.supermap.clearM();
               that.$refs.supermap.clearMRadius()
+                that.$refs.supermap.clearM();
               that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
-            }, 1000)
+            }, 3000)
           } else {
             setTimeout(() => {
                 that.$refs.supermap.clearM();