电视墙

src/assets/styles/base.scss

@@ -83,12 +83,12 @@ $date-state3: #d6333b;
 //视频摄像头预览弹层样式
 .videoCustomWidth {
   width: 1070px !important;
-  height: 700px !important;
+  height: 750px !important;
 }
 //电视墙视频摄像头预览弹层样式
 .TVWallCustomWidth {
-  width: 1150px !important;
-  height: 700px !important;
+  width: 1200px !important;
+  height: 800px !important;
 }
 
 

src/components/TVWall.vue

@@ -281,7 +281,12 @@ export default {
           })
       }
     },
-    showTVWall() {
+    showTVWall(tvListJson, bfArray) {
+      if(tvListJson){
+        this.preview(tvListJson, bfArray);
+        this.TVWallVisible = true;
+        return;
+      }
       // let that=this;
       /** ----------------------------------大华摄像头预览开始------------------------------------- */
       this.ws.addEventListener('connectStateChange', data => {
@@ -330,7 +335,7 @@ export default {
       this.$modal.msgWarning('请重新安装客户端')
     },
     /** 预览按钮操作 */
-    preview() {
+    preview(tvListJson, bfArray) {
       getTVWallList().then(newres => {
         getDahuaVideoServer().then(newResponse => {
           this.ws.detectConnectQt().then(res => {
@@ -354,7 +359,7 @@ export default {
                 if (res) {
                   this.alertLoginSuccess()
                   this.activePanel = 'key2'
-                  this.create(newres.data)
+                  this.create(tvListJson?tvListJson:newres.data, bfArray);
                 } else {
                   this.alertLoginFailed()
                 }
@@ -367,7 +372,7 @@ export default {
       })
     },
 
-    create(tvListJson) { // 调用创建控件接口
+    create(tvListJson, bfArray) { // 调用创建控件接口
       debugger
       let _this = this
       const params = [
@@ -393,6 +398,7 @@ export default {
       }).catch(e => {
         console.log(e)
       })
+      _this.playRealMonitorVideo(bfArray);
       _this.ws.on('createCtrlResult', (res) => {
         this.customizeTree(tvListJson)
         _this.ws.on('createCtrlResult', (res) => {
@@ -400,6 +406,18 @@ export default {
         })
       })
     },
+    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

@@ -262,6 +262,44 @@ export default {
     }
   },
   methods: {
+    /* 电视墙替换开始 */
+    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'
+          }]
+        }
+      ]
+      this.$refs.TVWall.showTVWall(tvListJson, [{"channelId": channelCode}]);
+      this.$refs.supermap.isEditableLayers = false;
+      this.$refs.bottomMenu.showChild = false;
+      this.$refs.bottomMenu.showBanChild = false;
+      this.$refs.bottomMenu.showChangChild = false;
+    },
+    /* 电视墙替换结束 */
     /** 部门树*/
 // 查询部门下拉树结构
     getTreeselect() {
@@ -413,8 +451,11 @@ export default {
               isAggregation: false
             }
             if (res.data.visuForestCloudCameraBOList[i].channelCode != null) {
-              markersMap.parameter = {code:res.data.visuForestCloudCameraBOList[i].cameraCode,
-                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 = []
             }
@@ -506,8 +547,11 @@ export default {
               isAggregation: false
             }
             if (res.data[i].channelCode != null) {
-              markersMap.parameter = {code:res.data[i].cameraCode,
-                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 = []
             }
@@ -613,6 +657,11 @@ export default {
     },
     /** 预览按钮操作 */
     preview(cameraParam) {
+      this.showTVWall(cameraParam.code, cameraParam.name);
+    },
+
+    /** 预览按钮操作 */
+    preview_废弃(cameraParam) {
       if(cameraParam.type=='1'){
         getDahuaVideoServer().then(newResponse => {
           console.log(newResponse)