电视墙修改

src/components/TVWall.vue

@@ -2,28 +2,26 @@
   <div>
     <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;">
-	  	<!-- <div class="this-title">
-	  		<span>林场</span>
-	  		<span>45</span>
-	  	</div> -->
-	  	<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)">
-	  				<div class="d-l-l-text">
-	  					<i class="i-small"></i>
-	  					<h4>{{ item.cameraName }}</h4>
-	  				</div>
-	  			</div>
-	  		</span>
-	  	</div>
-	  </div>
-      <div style="width:70%;height:400px;position:absolute;">
-        <!--视频窗口展示---大华-->
-        <div id="dom1" class="dom1"></div>
-        <!--视频窗口展示---海康-->
-        <div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>
-      </div>
+	  <!--<div class="forthis" style="width: 22%; position: absolute;left: 0;z-index: 9999999999999;">-->
+	  	<!--<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)">-->
+	  				<!--<div class="d-l-l-text">-->
+	  					<!--<i class="i-small"></i>-->
+	  					<!--<h4>{{ item.cameraName }}</h4>-->
+	  				<!--</div>-->
+	  			<!--</div>-->
+	  		<!--</span>-->
+	  	<!--</div>-->
+	  <!--</div>-->
+      <!--<div style="width:70%;height:400px;position:absolute;">-->
+        <!--&lt;!&ndash;视频窗口展示-&#45;&#45;大华&ndash;&gt;-->
+        <!--<div id="dom1" class="dom1"></div>-->
+        <!--&lt;!&ndash;视频窗口展示-&#45;&#45;海康&ndash;&gt;-->
+        <!--<div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>-->
+      <!--</div>-->
+
+      <div id="dom1" class="dom1"></div>
     </el-dialog>
   </div>
 
@@ -33,6 +31,7 @@
 /** ----------------------------------摄像头预览开始------------------------------------- */
 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'
 
 /** ----------------------------------摄像头预览结束------------------------------------- */
@@ -41,57 +40,9 @@ 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': [{
@@ -249,8 +200,8 @@ export default {
         }],
       crtPosX: 0,
       crtPosY: 0,
-      crtWidth: 740,
-      crtHeight: 400,
+      crtWidth: 1148,
+      crtHeight: 650,
       domId: 'dom1',
       mixedVideoDisplayMode: 2,
       isShowTipe: true,
@@ -262,12 +213,27 @@ export default {
     }
   },
   created() {
+    const DHWsInstance = DHWs.getInstance()
+    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
-      // this.destroy()
+      this.destroy()
 
       if (this.oWebControl != null) {
         this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
@@ -277,41 +243,137 @@ export default {
           })
       }
     },
-    showTVWall() {
-      let that=this;
+    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;
       /** ----------------------------------大华摄像头预览开始------------------------------------- */
-      // const DHWsInstance = DHWs.getInstance()
-      // this.ws = DHWsInstance
-      // this.ws.addEventListener('connectStateChange', data => {
-      //   if (data) {
-      //     console.log('连接成功')
-      //   } else {
-      //     console.log('连接失败，下载客户端')
-      //     this.alertReinstall()
-      //     // this.isShowTipe && this.$modal.confirm({
-      //     //   title: '下载客户端',
-      //     //   content: '检测到您未安装部分插件,将影响部分功能使用，请下载后使用？',
-      //     //   onOk: () => {
-      //     //     //这里写下载方法
-      //     //     this.isShowTipe = false
-      //     //   },
-      //     //   onCancel: () => {
-      //     //     this.isShowTipe = false
-      //     //   }
-      //     // });
-      //   }
-      // })
-      // this.preview()
+      this.ws.addEventListener('connectStateChange', data => {
+        if (data) {
+          console.log('连接成功')
+        } 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=[]
+                  tvListJson[0].treeLabels.forEach((item,index)=>
+                  {
+                    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 {
+                  this.alertLoginFailed()
+                }
+              })
+            } else { // 连接客户端失败
+              this.alertReinstall()
+            }
+          })
+
+        })
       /** ----------------------------------大华摄像头预览结束------------------------------------- */
       /** ----------------------------------海康摄像头预览开始------------------------------------- */
-      tvCameraList().then(response => {
-        this.cameraList=response.data
+      // tvCameraList().then(response => {
+      //   this.cameraList=response.data
+      // })
+      // that.initPlugin()
+      // setTimeout(function() {
+      //   that.playhk();
+      // }, 5000)
+      // /** ----------------------------------海康摄像头预览结束------------------------------------- */
+      this.TVWallVisible = true
+
+    },
+    showTVWall() {
+      // let that=this;
+      /** ----------------------------------大华摄像头预览开始------------------------------------- */
+      this.ws.addEventListener('connectStateChange', data => {
+        if (data) {
+          console.log('连接成功')
+        } else {
+          console.log('连接失败，下载客户端')
+          this.alertReinstall()
+          this.isShowTipe && this.$modal.confirm({
+            title: '下载客户端',
+            content: '检测到您未安装部分插件,将影响部分功能使用，请下载后使用？',
+            onOk: () => {
+              //这里写下载方法
+              this.isShowTipe = false
+            },
+            onCancel: () => {
+              this.isShowTipe = false
+            }
+          });
+        }
       })
-      that.initPlugin()
-      setTimeout(function() {
-        that.playhk();
-      }, 5000)
-      /** ----------------------------------海康摄像头预览结束------------------------------------- */
+      this.preview()
+      /** ----------------------------------大华摄像头预览结束------------------------------------- */
+      /** ----------------------------------海康摄像头预览开始------------------------------------- */
+      // tvCameraList().then(response => {
+      //   this.cameraList=response.data
+      // })
+      // that.initPlugin()
+      // setTimeout(function() {
+      //   that.playhk();
+      // }, 5000)
+      // /** ----------------------------------海康摄像头预览结束------------------------------------- */
       this.TVWallVisible = true
     },
     /** ----------------------------------大华摄像头预览开始------------------------------------- */
@@ -339,6 +401,10 @@ export default {
                 loginPort: newResponse.loginPort,
                 userName: newResponse.userName,
                 userPwd: newResponse.userPwd,
+                // loginIp: '192.168.100.100',
+                // loginPort: 8314,
+                // userName: 'system',
+                // userPwd: 'Admin@123',
                 token: '',
                 https: 1
               })
@@ -349,6 +415,7 @@ export default {
                   this.alertLoginSuccess()
                   this.activePanel = 'key2'
                   this.create(newres.data)
+
                 } else {
                   this.alertLoginFailed()
                 }
@@ -360,7 +427,34 @@ 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) { // 调用创建控件接口
       let _this = this
       const params = [
@@ -372,7 +466,7 @@ export default {
             'splitNum': 1,
             'channelList': [
               {
-                'channelId': '8ORBqXFlA1D77U45SM1ROC'
+                'channelId': ''
               }
             ]
           },
@@ -382,9 +476,10 @@ export default {
       ]
       this.setPos()
       this.customizeTree(tvListJson);
-      setTimeout(function () {
+      setTimeout(() => {
         _this.ws.createCtrl(params);
-      }, 3000);
+      }, 5000)
+
     },
     setPos() {
       let target = document.getElementById(this.domId)
@@ -450,7 +545,7 @@ export default {
         },
         cbConnectError: function() { // 创建WebControl实例失败
           that.oWebControl = null
-          $('#playWnd').html('插件未启动，正在尝试启动，请稍候...')
+          $('#playWnd').html('插件未启动，正在尝试启动，请稍候...<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
           WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
           initCount++
           if (initCount < 3) {
@@ -458,7 +553,7 @@ export default {
               that.initPlugin()
             }, 3000)
           } else {
-            $('#playWnd').html('插件启动失败，请检查插件是否安装！')
+            $('#playWnd').html('插件启动失败，请检查插件是否安装！<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
           }
         },
         cbConnectClose: function(bNormalClose) {