单点摄像头触发电视墙

src/components/TVWall.vue

@@ -3,6 +3,10 @@
     <el-dialog title="电视墙" :visible.sync="TVWallVisible" v-if="TVWallVisible" customClass="TVWallCustomWidth"
                @close="cancelEventLocationShow()">
 	  <!--<div class="forthis" style="width: 22%; position: absolute;left: 0;z-index: 9999999999999;">-->
+	  	<!--&lt;!&ndash; <div class="this-title">-->
+	  		<!--<span>林场</span>-->
+	  		<!--<span>45</span>-->
+	  	<!--</div> &ndash;&gt;-->
 	  	<!--<div class="i-list-con" style="height: 46vh; overflow-y: scroll;">-->
 	  		<!--<span v-for="(item,index) in cameraList" :key="index">-->
 	  			<!--<div class="d-l-con" @click="playhk(item.channelCode)">-->
@@ -31,8 +35,9 @@
 /** ----------------------------------摄像头预览开始------------------------------------- */
 import { getDahuaVideoServer, getTVWallList } from '@/api/dahua/dahua'
 import { tvCameraList } from '@/api/haikang/haikang'
-import { findCameraByEventCoordinate,rotation } from '@/api/monitor'
 import DHWs from '@/dahua/lib/DHWs'
+import { rotation } from '@/api/monitor'
+
 
 /** ----------------------------------摄像头预览结束------------------------------------- */
 export default {
@@ -40,9 +45,57 @@ export default {
   components: {},
   data() {
     return {
-      array:[],
       tvListJson: [
         {
+        'switchTab': '1',
+        'treeLabels': [
+          {
+            'labelCode': '123456',
+            'labelName': '视频场景',
+            'parentLabelCode': null
+          },
+          {
+            'labelCode': '5a81d1bd499b4940a21fc63ca51f4dfa',
+            'labelName': '标签2',
+            'parentLabelCode': 123456
+          },
+          {
+            'labelCode': 'd941adbbd3e64dac92cc448dec5293cd',
+            'labelName': '标签1',
+            'parentLabelCode': 123456
+          }
+        ],
+        'labelChannels': [{
+          'channelDates': [{
+            'channelCode': '6044981090191552',
+            'channelName': '复兴大桥中段-交通事故',
+            'channelSn': null,
+            'cameraType': 0,
+            'online': 1
+          },
+            {
+              'channelCode': 'ZgVzqsjwA1DTF561VGHK5E',
+              'channelName': '北京7青羊东二路77号2通道1',
+              'channelSn': null,
+              'cameraType': 1,
+              'online': 1
+            }
+          ],
+          'labelCode': 'd941adbbd3e64dac92cc448dec5293cd'
+        },
+          {
+            'channelDates': [{
+              'channelCode': 'ZgVzqsjwA1DTF561VGHKK7',
+              'channelName': '北京7青羊东二路77号2通道2',
+              'channelSn': null,
+              'cameraType': 2,
+              'online': 0
+            }],
+            'labelCode': '5a81d1bd499b4940a21fc63ca51f4dfa'
+          }
+        ]
+      },
+        {
           'switchTab': '2',
           'labelChannels': [{
             'channelDates': [{
@@ -200,8 +253,8 @@ export default {
         }],
       crtPosX: 0,
       crtPosY: 0,
-      crtWidth: 1148,
-      crtHeight: 650,
+      crtWidth: 1150,
+      crtHeight: 700,
       domId: 'dom1',
       mixedVideoDisplayMode: 2,
       isShowTipe: true,
@@ -217,19 +270,6 @@ export default {
     this.ws = DHWsInstance
   },
   methods: {
-    findCameraByEventCoordinate(){
-      findCameraByEventCoordinate().then(res => {
-        const list = [];
-        for(let i in res.data){
-          list.push(res.data[i].cameraCode)
-        }
-        this.rotation('','',list);
-      })
-    },
-    rotation(lng,lat,list){
-      rotation(lng,lat,list).then(res => {
-      })
-    },
     cancelEventLocationShow() {
       // this.activeName = 'tv'
       this.TVWallVisible = false
@@ -243,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 => {
@@ -267,67 +294,59 @@ export default {
         } else {
           console.log('连接失败，下载客户端')
           this.alertReinstall()
-          this.isShowTipe && this.$modal.confirm({
-            title: '下载客户端',
-            content: '检测到您未安装部分插件,将影响部分功能使用，请下载后使用？',
-            onOk: () => {
-              //这里写下载方法
-              this.isShowTipe = false
-            },
-            onCancel: () => {
-              this.isShowTipe = false
-            }
-          });
         }
       })
-        getDahuaVideoServer().then(newResponse => {
-          this.ws.detectConnectQt().then(res => {
-            if (res) { // 连接客户端成功
-              this.alertLogin()
-              this.ws.login({
-                loginIp: newResponse.loginIp,
-                loginPort: newResponse.loginPort,
-                userName: newResponse.userName,
-                userPwd: newResponse.userPwd,
-                // loginIp: '192.168.100.100',
-                // loginPort: 8314,
-                // userName: 'system',
-                // userPwd: 'Admin@123',
-                token: '',
-                https: 1
-              })
-              this.ws.on('loginState', (res) => {
-                this.isLogin = res
-                console.log('---res-----', res)
-                if (res) {
-                  this.alertLoginSuccess()
-                  this.activePanel = 'key2'
-                  console.log(tvListJson)
-                  const array=[]
-                  const array1=[]
+      getDahuaVideoServer().then(newResponse => {
+        this.ws.detectConnectQt().then(res => {
+          if (res) { // 连接客户端成功
+            this.alertLogin()
+            this.ws.login({
+              loginIp: newResponse.loginIp,
+              loginPort: newResponse.loginPort,
+              userName: newResponse.userName,
+              userPwd: newResponse.userPwd,
+              // loginIp: '192.168.100.100',
+              // loginPort: 8314,
+              // userName: 'system',
+              // userPwd: 'Admin@123',
+              token: '',
+              https: 1
+            })
+            this.ws.on('loginState', (res) => {
+              this.isLogin = res
+              console.log('---res-----', res)
+              if (res) {
+                this.alertLoginSuccess()
+                this.activePanel = 'key2'
+                console.log(tvListJson)
+                const array=[]
+                const array1=[]
+                if (tvListJson!=null)
+                {
                   tvListJson[0].treeLabels.forEach((item,index)=>
                   {
                     if (index!=0)
                     {
                       const param =Object.assign({})
                       param.channelId=item.labelCode
-                       array.push(param)
-                       array1.push(item.labelCode)
-                      }
+                      array.push(param)
+                      array1.push(item.labelCode)
+                    }
 
                   })
-                  this.create1(longitude,latitude,tvListJson,array,array1)
-                  // var obj=JSON.parse(tvListJson)
-                } else {
-                  this.alertLoginFailed()
                 }
-              })
-            } else { // 连接客户端失败
-              this.alertReinstall()
-            }
-          })
-
+                this.create1(longitude,latitude,tvListJson,array,array1)
+                // var obj=JSON.parse(tvListJson)
+              } else {
+                this.alertLoginFailed()
+              }
+            })
+          } else { // 连接客户端失败
+            this.alertReinstall()
+          }
         })
+
+      })
       /** ----------------------------------大华摄像头预览结束------------------------------------- */
       /** ----------------------------------海康摄像头预览开始------------------------------------- */
       // tvCameraList().then(response => {
@@ -341,7 +360,58 @@ export default {
       this.TVWallVisible = true
 
     },
-    showTVWall() {
+    create1(longitude,latitude,tvListJson,array,array1) { // 调用创建控件接口
+      let _this = this
+      const params = [
+        {
+          'ctrlType': 'realMonitorUI',
+          'ctrlCode': 'ctrl1',
+          'ctrlProperty': {
+            'displayMode': 1,
+            'splitNum': 1,
+            'channelList': [
+              {
+                'channelId': ''
+              }
+            ]
+          },
+          'visible': true,
+          'domId': 'dom1'
+        }
+      ]
+      this.setPos()
+      this.customizeTree(tvListJson);
+      _this.ws.createCtrl(params);
+      _this.playRealMonitorVideo(array)
+      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) {
+      if(tvListJson){
+        this.preview(tvListJson,bfArray);
+        this.TVWallVisible = true;
+        return;
+      }
       // let that=this;
       /** ----------------------------------大华摄像头预览开始------------------------------------- */
       this.ws.addEventListener('connectStateChange', data => {
@@ -350,17 +420,6 @@ export default {
         } else {
           console.log('连接失败，下载客户端')
           this.alertReinstall()
-          this.isShowTipe && this.$modal.confirm({
-            title: '下载客户端',
-            content: '检测到您未安装部分插件,将影响部分功能使用，请下载后使用？',
-            onOk: () => {
-              //这里写下载方法
-              this.isShowTipe = false
-            },
-            onCancel: () => {
-              this.isShowTipe = false
-            }
-          });
         }
       })
       this.preview()
@@ -390,7 +449,7 @@ export default {
       this.$modal.msgWarning('请重新安装客户端')
     },
     /** 预览按钮操作 */
-    preview() {
+    preview(tvListJson,bfArray) {
       getTVWallList().then(newres => {
         getDahuaVideoServer().then(newResponse => {
           this.ws.detectConnectQt().then(res => {
@@ -414,8 +473,7 @@ export default {
                 if (res) {
                   this.alertLoginSuccess()
                   this.activePanel = 'key2'
-                  this.create(newres.data)
-
+                  this.create(tvListJson?tvListJson:newres.data,bfArray)
                 } else {
                   this.alertLoginFailed()
                 }
@@ -427,35 +485,9 @@ export default {
         })
       })
     },
-    create1(longitude,latitude,tvListJson,array,array1) { // 调用创建控件接口
-      let _this = this
-      const params = [
-        {
-          'ctrlType': 'realMonitorUI',
-          'ctrlCode': 'ctrl1',
-          'ctrlProperty': {
-            'displayMode': 1,
-            'splitNum': 1,
-            'channelList': [
-              {
-                'channelId': ''
-              }
-            ]
-          },
-          'visible': true,
-          'domId': 'dom1'
-        }
-      ]
-      this.setPos()
-      this.customizeTree(tvListJson);
-      _this.ws.createCtrl(params);
-      _this.playRealMonitorVideo(array)
-      setTimeout(() => {
-        _this.rotation(longitude,latitude,array1)
-      }, 5000)
 
-    },
-    create(tvListJson) { // 调用创建控件接口
+    create(tvListJson,bfArray) { // 调用创建控件接口
+      // debugger
       let _this = this
       const params = [
         {
@@ -477,13 +509,12 @@ export default {
       this.setPos()
       this.customizeTree(tvListJson);
       let length = tvListJson[0].treeLabels.length > 4 ? 5 : tvListJson[0].treeLabels.length;
-      const bfArray = [];
+      bfArray = [];
       for (let i = 1; i < length; i++) {
         bfArray.push({"channelId": tvListJson[0].treeLabels[i].labelCode})
       }
       _this.ws.createCtrl(params);
       _this.playRealMonitorVideo(bfArray)
-
     },
     setPos() {
       let target = document.getElementById(this.domId)

src/components/TVWalls.vue

@@ -287,7 +287,8 @@ export default {
       this.data = val
       this.autoList = []
       this.stringList = []
-      for (let i = 1; i < data[0].treeLabels.length; i++) {
+      let length = data[0].treeLabels.length >= 4 ? 5 : data[0].treeLabels.length
+      for (let i = 1; i < length; i++) {
         this.autoList.push({"channelId": data[0].treeLabels[i].labelCode})
         this.stringList.push(data[0].treeLabels[i].labelCode)
       }
@@ -301,17 +302,6 @@ export default {
         } else {
           console.log('连接失败，下载客户端')
           this.alertReinstall()
-          this.isShowTipe && this.$modal.confirm({
-            title: '下载客户端',
-            content: '检测到您未安装部分插件,将影响部分功能使用，请下载后使用？',
-            onOk: () => {
-              //这里写下载方法
-              this.isShowTipe = false
-            },
-            onCancel: () => {
-              this.isShowTipe = false
-            }
-          });
         }
       })
       this.preview()