视频监控页面逻辑更改

apps/web-antd/src/api/sis/deviceChannel/model.d.ts

@@ -1,4 +1,4 @@
-import type { PageQuery, BaseEntity } from '#/api/common';
+import type { BaseEntity, PageQuery } from '#/api/common';
 
 export interface DeviceChannelVO {
   /**
@@ -51,6 +51,13 @@ export interface DeviceChannelVO {
    */
   channelNo: string;
 
+  nvrId: string;
+  nvrFactoryNo: string;
+  nvrIp: string;
+  nvrPort: number;
+  nvrAccount: string;
+  nvrPwd: string;
+  nvrChannelNo: string;
 }
 
 export interface DeviceChannelForm extends BaseEntity {
@@ -103,7 +110,6 @@ export interface DeviceChannelForm extends BaseEntity {
    * 设备通道编号
    */
   channelNo?: string;
-
 }
 
 export interface DeviceChannelQuery extends PageQuery {

apps/web-antd/src/views/sis/video/index.vue

@@ -194,31 +194,26 @@ function onNodeChecked(
     }
     // 批量播放 currentSelectPlayerIndex 将不再生效
     else {
-      checkNode.forEach((item: any) => {
+      // 如果此次播放数量小于当前播能播放
-        // 判断当前摄像数据是否已经在播放，如果在播放则此次不进行播放处理.默认选中最后一个
+      const freeArr: number[] = []; // 空闲播放器数量
-        let firstFreePlayerIndex = playerNum.value - 1;
-        // 记录第一个空播放器是否已找到
-        let isRecord = false;
-        // 此次选中的设备是否播放
-        let isPlayer = true;
       for (let i = 0; i < playerNum.value; i++) {
-          // 记录第一个出现空播放器的索引
         const playerData = playerList[i];
-          // 没找到空播放器，并且此次循环播放器为null
+        if (!playerData) {
-          if (!isRecord && !playerData) {
+          freeArr.push(i);
-            firstFreePlayerIndex = i;
-            isRecord = true;
-          }
-
-          if (playerData && playerData.data.id == item.id) {
-            isRecord = false;
-            break;
         }
       }
-        if (isPlayer) {
+      // 要播放的视频数量，小于等于空闲播放器数量，则填充空闲即可
-          doPlayer(item, firstFreePlayerIndex);
+      if (checkNode.length <= freeArr.length) {
+        for (let j = 0; j < checkNode.length; j++) {
+          doPlayer(checkNode[j], freeArr[j]);
+        }
+      }
+      // 直接覆盖原有的播放视频
+      else {
+        for (let i = 0; i < playerNum.value; i++) {
+          doPlayer(checkNode[i], i);
+        }
       }
-      });
     }
   }
   // 删除
@@ -275,9 +270,21 @@ function changeElPlayer(playerInfo: any, index: number) {
  * @param nodeData 播放的节点数据
  * @param index 播放器的索引信息
  */
-function doPlayer(nodeData: any, index: number) {
+function doPlayer(nodeData: any, index: number = 0) {
+  console.log('index=', index);
   if (mpegts.isSupported()) {
-    const params = {
+    let params = {};
+    if (nodeData.nvrIp) {
+      params = {
+        videoIp: nodeData.nvrIp,
+        videoPort: nodeData.nvrPort,
+        factoryNo: nodeData.nvrFactoryNo,
+        account: nodeData.nvrAccount,
+        pwd: nodeData.nvrPwd,
+        channelId: nodeData.nvrChannelNo,
+      };
+    } else {
+      params = {
         videoIp: nodeData.deviceIp,
         videoPort: nodeData.devicePort,
         factoryNo: nodeData.factoryNo,
@@ -285,6 +292,7 @@ function doPlayer(nodeData: any, index: number) {
         pwd: nodeData.devicePwd,
         channelId: nodeData.channelNo,
       };
+    }
     addStreamProxy(params).then((res) => {
       const url = res.wsFlv;
       // 将url 绑定到 nodeData
@@ -367,6 +375,12 @@ onUnmounted(() => {
 .player {
   border: 1px solid #e4e4e7;
   cursor: pointer;
+
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+  }
 }
 
 .player.selected {

apps/web-antd/vite.config.mts

@@ -29,7 +29,7 @@ export default defineConfig(async () => {
             // mock代理目标地址
             // target: 'http://192.168.43.169:8080',
             // target: 'https://by.missmoc.top/api/',
-            target: 'http://127.0.0.1:8080',
+            target: 'http://192.168.13.27:8080',
             // target: 'http://192.168.0.106:8080',
             // target: 'http://47.109.37.87:3010',
             ws: true,