修改看板

ruoyi-ui/src/views/board/index.vue

@@ -116,7 +116,7 @@
         <Monitor :iChannelID="1" monitorId="monitor1" key="monitor1"/>
       </div>
       <div class="video2">
-        <Monitor :iChannelID="2" monitorId="monitor2" key="monitor2"/>
+        <Monitor1 :iChannelID="2" monitorId="monitor2" key="monitor2"/>
       </div>
 
       <!--      <div class="safe">已安全运行 <span style="color: #4667d0;font-size: 1.2vw;padding: 0 0.3vw"> 382 </span> 天</div>-->
@@ -129,6 +129,7 @@
 import Chart from '@/components/Charts/Chart'
 import vueSeamlessScroll from 'vue-seamless-scroll'
 import Monitor from './monitor'
+import Monitor1 from './monitor2'
 
 export default {
   data() {
@@ -328,7 +329,8 @@ export default {
   components: {
     vueSeamlessScroll,
     Chart,
-    Monitor
+    Monitor,
+    Monitor1
   },
   mounted() {
     this.getData()

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div :id="monitorId" class="plugin"></div>
+    <div id="monitorId1" class="plugin"></div>
   </div>
 </template>
 
@@ -42,7 +42,7 @@ export default {
           console.log("关闭远程配置库！");
         },
         cbInitPluginComplete: function () {
-          WebVideoCtrl.I_InsertOBJECTPlugin(_this.monitorId);
+          WebVideoCtrl.I_InsertOBJECTPlugin('monitorId1');
           // 检查插件是否最新
           if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
             alert("检测到新的插件版本");
@@ -168,7 +168,7 @@ export default {
       var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
         szDeviceIdentify = '192.168.2.64',
         iRtspPort = 554,
-        iChannelID = _this.iChannelID || 1,
+        iChannelID =  1,
         bZeroChannel =  false,
         szInfo = "";
 

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

@@ -0,0 +1,219 @@
+<template>
+  <div>
+    <div id="monitorId2" class="plugin"></div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  data() {
+    return {}
+  },
+  props:['iChannelID','monitorId'],
+  async mounted() {
+    await this.$nextTick()
+    const _this = this
+    var g_iWndIndex = 0;
+    $(function () {
+      // 检查插件是否已经安装过
+      var iRet = window.WebVideoCtrl.I_CheckPluginInstall();
+      if (-1 == iRet) {
+        alert("未安装插件");
+        return;
+      }
+
+      // 初始化插件参数及插入插件
+      WebVideoCtrl.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 () {
+          WebVideoCtrl.I_InsertOBJECTPlugin('monitorId2');
+          // 检查插件是否最新
+          if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
+            alert("检测到新的插件版本");
+            return;
+          }
+        }
+      });
+
+
+    });
+// 登录
+    function clickLogin() {
+      var szIP = '192.168.2.64',
+        szPort = '80',
+        szUsername = 'admin',
+        szPassword = 'haiwei@2024';
+
+      if ("" == szIP || "" == szPort) {
+        return;
+      }
+
+
+      var iRet = WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
+        success: function (xmlDoc) {
+          setTimeout(function () {
+            getChannelInfo();
+            getDevicePort();
+            setTimeout(()=>{
+
+              clickStartRealPlay()
+            },2000)
+          }, 10);
+        },
+        error: function (status, xmlDoc) {
+        }
+      });
+
+      if (-1 == iRet) {
+        console.log(" 已登录过！");
+      }
+    }
+
+// 获取端口
+    function getDevicePort() {
+      var szDeviceIdentify = '192.168.2.64';
+
+
+      var oPort = WebVideoCtrl.I_GetDevicePort(szDeviceIdentify);
+      if (oPort != null) {
+
+        console.log(szDeviceIdentify + " 获取端口成功！");
+      } else {
+        console.log(szDeviceIdentify + " 获取端口失败！");
+      }
+    }
+
+    function getChannelInfo() {
+      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) {
+        }
+      });
+      // 数字通道
+      WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
+        async: false,
+        success: function (xmlDoc) {
+          var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
+
+          $.each(oChannels, function (i) {
+            var id = $(this).find("id").eq(0).text(),
+              name = $(this).find("name").eq(0).text(),
+              online = $(this).find("online").eq(0).text();
+            if ("false" == online) {// 过滤禁用的数字通道
+              return true;
+            }
+            if ("" == name) {
+              name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
+            }
+          });
+        },
+        error: function (status, xmlDoc) {
+        }
+      });
+      // 零通道
+      WebVideoCtrl.I_GetZeroChannelInfo(szDeviceIdentify, {
+        async: false,
+        success: function (xmlDoc) {
+          var oChannels = $(xmlDoc).find("ZeroVideoChannel");
+
+          $.each(oChannels, function (i) {
+            var id = $(this).find("id").eq(0).text(),
+              name = $(this).find("name").eq(0).text();
+            if ("" == name) {
+              name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
+            }
+            if ("true" == $(this).find("enabled").eq(0).text()) {// 过滤禁用的零通道
+            }
+          });
+        },
+        error: function (status, xmlDoc) {
+        }
+      });
+    }
+
+
+// 开始预览
+    function clickStartRealPlay(iStreamType) {
+      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
+        szDeviceIdentify = '192.168.2.64',
+        iRtspPort = 554,
+        iChannelID = 2,
+        bZeroChannel =  false,
+        szInfo = "";
+
+      iStreamType = 1;
+
+      var startRealPlay = function () {
+        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
+          iRtspPort: iRtspPort,
+          iStreamType: iStreamType,
+          iChannelID: iChannelID,
+          bZeroChannel: bZeroChannel,
+          success: function () {
+            szInfo = "开始预览成功！";
+            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();
+      }
+    }
+
+    setTimeout(()=>{
+      clickLogin()
+    },1000)
+  },
+  methods: {
+  }
+}
+</script>
+<style>
+</style>