视频摄像头预览--海康

src/assets/styles/base.scss

@@ -560,8 +560,13 @@ div::-webkit-scrollbar {
 
 //视频摄像头预览弹层样式
 .videoCustomWidth {
-  width: 770px !important;
-  height: 445px !important;
+  width: 1070px !important;
+  height: 700px !important;
+}
+//电视墙视频摄像头预览弹层样式
+.TVWallCustomWidth {
+  width: 1150px !important;
+  height: 700px !important;
 }
 
 .dia-event-info {

src/components/TVWall.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-dialog title="电视墙" :visible.sync="TVWallVisible" v-if="TVWallVisible" width="770px" style="height: 700px;"
+    <el-dialog title="电视墙" :visible.sync="TVWallVisible" v-if="TVWallVisible" customClass="TVWallCustomWidth"
                @close="cancelEventLocationShow()">
       <div style="width:100%;height:400px;position:relative;">
         <!--视频窗口展示---大华-->
@@ -24,7 +24,8 @@ export default {
   components: {},
   data() {
     return {
-      tvListJson: [{
+      tvListJson: [
+        {
         'switchTab': '1',
         'treeLabels': [
           {
@@ -427,7 +428,7 @@ export default {
               cbIntegrationCallBack: cbIntegrationCallBack
             })
 
-            that.oWebControl.JS_CreateWnd('playWnd', 768, 462).then(function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
+            that.oWebControl.JS_CreateWnd('playWnd', 850, 615).then(function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
               that.init()  // 创建播放实例成功后初始化
             })
           }, function() { // 启动插件服务失败
@@ -492,7 +493,7 @@ export default {
             buttonIDs: buttonIDs                       //自定义工具条按钮
           })
         }).then(function(oData) {
-          that.oWebControl.JS_Resize(768, 462)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+          that.oWebControl.JS_Resize(850, 615)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
         })
       })
     },
@@ -661,9 +662,9 @@ html, body {
 }
 
 .playWnd {
-  margin: -13px 0 0 -15px;
-  width: 768px; /*播放容器的宽和高设定*/
-  height: 462px;
+  margin: -13px 0 0 255px;
+  width: 850px; /*播放容器的宽和高设定*/
+  height: 615px;
   border: 1px solid red;
 }
 

src/views/monitor.vue

@@ -106,7 +106,7 @@
     <TVWall ref="TVWall"></TVWall>
     <el-dialog :title="cameraTitle" :visible.sync="cameraVisible" v-if="cameraVisible" customClass="videoCustomWidth"
                @close="cancelEventLocationShow()">
-      <div style="width:770px;height:445px;position:relative;">
+      <div style="width:1020px;height:625px;position:relative;">
         <!--视频窗口展示---海康-->
         <div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>
       </div>
@@ -610,7 +610,7 @@ export default {
         that.cameraTitle = '摄像头-'+newResponse.data.cameraName
         that.initPlugin(newResponse.data.appkey,newResponse.data.loginIp,newResponse.data.secret,newResponse.data.loginPort)
         setTimeout(function() {
-          that.playhk('33e7f21691a843f6bcb4866efebe088b')
+          that.playhk(newResponse.data.channelCode)
         }, 5000)
       })
 
@@ -642,7 +642,7 @@ export default {
               cbIntegrationCallBack: cbIntegrationCallBack
             })
 
-            that.oWebControl.JS_CreateWnd('playWnd', 768, 462).then(function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
+            that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
               that.init(newappkey,newloginIp,newsecret,newloginPort)  // 创建播放实例成功后初始化
             })
           }, function() { // 启动插件服务失败
@@ -729,7 +729,7 @@ export default {
             buttonIDs: buttonIDs                       //自定义工具条按钮
           })
         }).then(function(oData) {
-          that.oWebControl.JS_Resize(768, 462)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+          that.oWebControl.JS_Resize(1020, 600)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
         })
       })
     },
@@ -762,7 +762,7 @@ export default {
 
 // 推送消息
 function cbIntegrationCallBack(oData) {
-  showCBInfo(JSON.stringify(oData.responseMsg))
+  console.log(JSON.stringify(oData.responseMsg))
 }
 </script>
 
@@ -771,9 +771,9 @@ function cbIntegrationCallBack(oData) {
 @import '@/assets/styles/base.scss';
 
 .playWnd {
-  margin: -13px 0 0 -15px;
-  width: 768px; /*播放容器的宽和高设定*/
-  height: 462px;
+  margin: -12px 0 0 6px;
+  width: 1020px; /*播放容器的宽和高设定*/
+  height: 600px;
   border: 1px solid red;
 }
 </style>