修改看板

ruoyi-ui/public/demo/jsPlugin-1.2.0.min.js

@@ -6238,12 +6238,18 @@
           g = w[S].szId
         }
         var u = '<div class="parent-wnd" style="overflow:hidden;width:100%; height:100%; position: relative;">';
-                for (var f = 0; f < 1; f++) {
+        for (var f = 0; f < w[_]; f++) {
           e = r + (f % l === l - 1 ? i : 0);
           t = o + (f + l >= Math.pow(l, 2) ? n : 0);
           var h = a + (f % l === l - 1 ? i : 0);
           var c = s + (f + l >= Math.pow(l, 2) ? n : 0);
+          if (f === 1) {
+            u += '<div style="float:left; background-color: ' + w[S].oStyle.background + "; position: absolute;top:0;left:-100%; width: " + h + "px; height: " + c + 'px;">' + '<canvas id="canvas' + f + '" class="play-window" wid="' + f + '" width="' + h + '" height="' + c + '"></canvas>' + (f === 0 ? '<img style="display:none;" id="playImg' + f + '" src="">' : "") + '<canvas id="canvas_draw' + f + '"  class="draw-window" style="border:1px solid ' + w[S].oStyle.border + ';position:absolute; top:0; left:0;" wid="' + f + '" width=' + e + " height=" + t + "></canvas>" + "</div>"
+
+          } else {
             u += '<div style="float:left; background-color: ' + w[S].oStyle.background + "; position: relative; width: " + h + "px; height: " + c + 'px;">' + '<canvas id="canvas' + f + '" class="play-window" wid="' + f + '" width="' + h + '" height="' + c + '"></canvas>' + (f === 0 ? '<img style="display:none;" id="playImg' + f + '" src="">' : "") + '<canvas id="canvas_draw' + f + '"  class="draw-window" style="border:1px solid ' + w[S].oStyle.border + ';position:absolute; top:0; left:0;" wid="' + f + '" width=' + e + " height=" + t + "></canvas>" + "</div>"
+
+          }
         }
         u += "</div>";
         g.html(u);
@@ -6343,6 +6349,9 @@
         }()
       }
 
+      setTimeout(()=>{
+        w.EventCallback.windowEventSelect(1)
+      },1000)
       function L() {
         e();
         g.find(".parent-wnd").eq(0).children().each(function (n) {
@@ -8542,7 +8551,8 @@
           }
         }
 
-                n(e, [{                    key: "openStream", value: function e(t, p, v, i) {
+        n(e, [{
+          key: "openStream", value: function e(t, p, v, i) {
             var n = false;
             if (t.indexOf("[") > -1) {
               n = true

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'],
   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();
-            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,7 +124,7 @@ 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,
@@ -198,13 +134,13 @@ export default {
       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,8 +165,9 @@ 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,
@@ -240,13 +177,13 @@ export default {
       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();
           }
@@ -277,8 +214,65 @@ export default {
     }, 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>