修改看板

ruoyi-ui/src/views/board/monitor/monitor2.vue

@@ -1,39 +1,42 @@
 <template>
   <div>
-    <div id="monitorId1" class="plugin"></div>
+    <div class="aaa">
-    <div id="monitorId2" class="plugin"></div>
+      <el-button @click="aaaa" type="primary">主要按钮</el-button>
+    </div>
+    <div id="divPlugin" class="plugin"></div>
   </div>
 </template>
 
 <script>
 
 
+var g_iWndIndex = 0;
 export default {
   data() {
     return {}
   },
-  props:['iChannelID','monitorId'],
+  props: ['iChannelID', 'monitorId'],
   async mounted() {
-    window.WebVideoCtrl1 = window.WebVideoCtrl
+    const vw = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) / 100
+    const vh = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) / 100
     await this.$nextTick()
     const _this = this
-    var g_iWndIndex = 0;
     $(function () {
       // 检查插件是否已经安装过
-      var iRet = window.WebVideoCtrl1.I_CheckPluginInstall();
+      var iRet = WebVideoCtrl.I_CheckPluginInstall();
       if (-1 == iRet) {
         alert("未安装插件");
         return;
       }
 
       // 初始化插件参数及插入插件
-      WebVideoCtrl.I_InitPlugin(500, 300, {
+      WebVideoCtrl.I_InitPlugin(27.3 * vw, 23.5 * vh, {
         bWndFull: true,     //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
         iPackageType: 2,
         iWndowType: 1,
         bNoPlugin: true,
         cbSelWnd: function (xmlDoc) {
-          console.log(xmlDoc)
+          g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
         },
         cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
           console.log(iWndIndex, bFullScreen)
@@ -44,34 +47,9 @@ export default {
           console.log("关闭远程配置库！");
         },
         cbInitPluginComplete: function () {
-          WebVideoCtrl1.I_InsertOBJECTPlugin('monitorId1');
+          WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin');
           // 检查插件是否最新
-          if (-1 == WebVideoCtrl1.I_CheckPluginVersion()) {
+          if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
-            alert("检测到新的插件版本");
-            return;
-          }
-        }
-      });
-      WebVideoCtrl1.I_InitPlugin(500, 300, {
-        bWndFull: true,     //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
-        iPackageType: 2,
-        iWndowType: 1,
-        bNoPlugin: true,
-        cbSelWnd: function (xmlDoc) {
-          console.log(xmlDoc)
-        },
-        cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
-          console.log(iWndIndex, bFullScreen)
-        },
-        cbEvent: function (iEventType, iParam1, iParam2) {
-        },
-        cbRemoteConfig: function () {
-          console.log("关闭远程配置库！");
-        },
-        cbInitPluginComplete: function () {
-          WebVideoCtrl1.I_InsertOBJECTPlugin('monitorId2');
-          // 检查插件是否最新
-          if (-1 == WebVideoCtrl1.I_CheckPluginVersion()) {
             alert("检测到新的插件版本");
             return;
           }
@@ -80,6 +58,7 @@ export default {
 
 
     });
+
 // 登录
     function clickLogin() {
       var szIP = '192.168.2.64',
@@ -92,17 +71,17 @@ export default {
       }
 
 
-      let iRet = WebVideoCtrl1.I_Login(szIP, 1, szPort, szUsername, szPassword, {
+      let iRet = WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
         success: function (xmlDoc) {
           setTimeout(function () {
             getChannelInfo();
             getDevicePort();
-            getChannelInfo1();
+            setTimeout(() => {
-            getDevicePort1();
-            setTimeout(()=>{
               clickStartRealPlay()
+            }, 500)
+            setTimeout(() => {
               clickStartRealPlay1()
-            },2000)
+            }, 1500)
           }, 10);
         },
         error: function (status, xmlDoc) {
@@ -119,18 +98,6 @@ export default {
       var szDeviceIdentify = '192.168.2.64';
 
 
-      var oPort = WebVideoCtrl1.I_GetDevicePort(szDeviceIdentify);
-      if (oPort != null) {
-
-        console.log(szDeviceIdentify + " 获取端口成功！");
-      } else {
-        console.log(szDeviceIdentify + " 获取端口失败！");
-      }
-    }
-    function getDevicePort1() {
-      var szDeviceIdentify = '192.168.2.64';
-
-
       var oPort = WebVideoCtrl.I_GetDevicePort(szDeviceIdentify);
       if (oPort != null) {
 
@@ -144,41 +111,10 @@ export default {
       var szDeviceIdentify = '192.168.2.64'
 
 
-      // 模拟通道
-      WebVideoCtrl1.I_GetAnalogChannelInfo(szDeviceIdentify, {
-        async: false,
-        success: function (xmlDoc) {
-          var oChannels = $(xmlDoc).find("VideoInputChannel");
-
-          $.each(oChannels, function (i) {
-            var id = $(this).find("id").eq(0).text(),
-              name = $(this).find("name").eq(0).text();
-            if ("" == name) {
-              name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
-            }
-          });
-        },
-        error: function (status, xmlDoc) {
-        }
-      });
-    }
-    function getChannelInfo1() {
-      var szDeviceIdentify = '192.168.2.64'
-
-
       // 模拟通道
       WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
         async: false,
         success: function (xmlDoc) {
-          var oChannels = $(xmlDoc).find("VideoInputChannel");
-
-          $.each(oChannels, function (i) {
-            var id = $(this).find("id").eq(0).text(),
-              name = $(this).find("name").eq(0).text();
-            if ("" == name) {
-              name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
-            }
-          });
         },
         error: function (status, xmlDoc) {
         }
@@ -188,23 +124,23 @@ export default {
 
 // 开始预览
     function clickStartRealPlay(iStreamType) {
-      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
+      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
         szDeviceIdentify = '192.168.2.64',
         iRtspPort = 554,
         iChannelID = 1,
-        bZeroChannel =  false,
+        bZeroChannel = false,
         szInfo = "";
 
       iStreamType = 1;
 
       var startRealPlay = function () {
-        WebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
+        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
           iRtspPort: iRtspPort,
           iStreamType: iStreamType,
           iChannelID: iChannelID,
           bZeroChannel: bZeroChannel,
           success: function () {
-            szInfo = "开始预览成功！";
+            szInfo = "开始预览成功1！";
             console.log(szDeviceIdentify + " " + szInfo);
 
           },
@@ -220,7 +156,7 @@ export default {
       };
 
       if (oWndInfo != null) {// 已经在播放了，先停止
-        WebVideoCtrl1.I_Stop({
+        WebVideoCtrl.I_Stop({
           success: function () {
             startRealPlay();
           }
@@ -229,24 +165,25 @@ export default {
         startRealPlay();
       }
     }
+
     function clickStartRealPlay1(iStreamType) {
-      var oWndInfo = WebVideoCtrl1.I_GetWindowStatus(g_iWndIndex),
+      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(1),
         szDeviceIdentify = '192.168.2.64',
         iRtspPort = 554,
         iChannelID = 2,
-        bZeroChannel =  false,
+        bZeroChannel = false,
         szInfo = "";
 
       iStreamType = 1;
 
       var startRealPlay = function () {
-        WebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
+        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
           iRtspPort: iRtspPort,
           iStreamType: iStreamType,
           iChannelID: iChannelID,
           bZeroChannel: bZeroChannel,
           success: function () {
-            szInfo = "开始预览成功！";
+            szInfo = "开始预览成功2！";
             console.log(szDeviceIdentify + " " + szInfo);
 
           },
@@ -262,7 +199,7 @@ export default {
       };
 
       if (oWndInfo != null) {// 已经在播放了，先停止
-        WebVideoCtrl1.I_Stop({
+        WebVideoCtrl.I_Stop({
           success: function () {
             startRealPlay();
           }
@@ -272,13 +209,70 @@ export default {
       }
     }
 
-    setTimeout(()=>{
+    setTimeout(() => {
       clickLogin()
-    },1000)
+    }, 1000)
   },
   methods: {
+    aaaa() {
+      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
+        szDeviceIdentify = '192.168.2.64',
+        iRtspPort = 554,
+        iChannelID = Math.random() > 0.5 ? 1 : 2,
+        bZeroChannel = false,
+        szInfo = "";
+
+      let iStreamType = 1;
+
+      var startRealPlay = function () {
+        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
+          iRtspPort: iRtspPort,
+          iStreamType: iStreamType,
+          iChannelID: iChannelID,
+          bZeroChannel: bZeroChannel,
+          success: function () {
+            szInfo = "开始预览成功1！";
+            console.log(szDeviceIdentify + " " + szInfo);
+
+          },
+          error: function (status, xmlDoc) {
+            if (403 === status) {
+              szInfo = "设备不支持Websocket取流！";
+            } else {
+              szInfo = "开始预览失败！";
+            }
+            console.log(szDeviceIdentify + " " + szInfo);
+          }
+        });
+      };
+
+      if (oWndInfo != null) {// 已经在播放了，先停止
+        WebVideoCtrl.I_Stop({
+          success: function () {
+            startRealPlay();
+          }
+        });
+      } else {
+        startRealPlay();
+      }
+
+    }
   }
 }
 </script>
-<style>
+<style scoped>
+.plugin {
+  width: 27.3vw;
+  height: 23.5vh;
+}
+
+.aaa {
+  position: absolute;
+  top: -20%;
+  left: 10%;
+}
+/deep/ .parent-wnd{
+  overflow: unset !important;
+  overflow-y: clip !important;
+}
 </style>