视频监控页面逻辑更改

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

@@ -194,31 +194,26 @@ function onNodeChecked(
     }
     // 批量播放 currentSelectPlayerIndex 将不再生效
     else {
-      checkNode.forEach((item: any) => {
-        // 判断当前摄像数据是否已经在播放，如果在播放则此次不进行播放处理.默认选中最后一个
-        let firstFreePlayerIndex = playerNum.value - 1;
-        // 记录第一个空播放器是否已找到
-        let isRecord = false;
-        // 此次选中的设备是否播放
-        let isPlayer = true;
+      // 如果此次播放数量小于当前播能播放
+      const freeArr: number[] = []; // 空闲播放器数量
+      for (let i = 0; i < playerNum.value; i++) {
+        const playerData = playerList[i];
+        if (!playerData) {
+          freeArr.push(i);
+        }
+      }
+      // 要播放的视频数量，小于等于空闲播放器数量，则填充空闲即可
+      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++) {
-          // 记录第一个出现空播放器的索引
-          const playerData = playerList[i];
-          // 没找到空播放器，并且此次循环播放器为null
-          if (!isRecord && !playerData) {
-            firstFreePlayerIndex = i;
-            isRecord = true;
-          }
-
-          if (playerData && playerData.data.id == item.id) {
-            isRecord = false;
-            break;
-          }
+          doPlayer(checkNode[i], i);
         }
-        if (isPlayer) {
-          doPlayer(item, firstFreePlayerIndex);
-        }
-      });
+      }
     }
   }
   // 删除
@@ -275,16 +270,29 @@ 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 = {
-      videoIp: nodeData.deviceIp,
-      videoPort: nodeData.devicePort,
-      factoryNo: nodeData.factoryNo,
-      account: nodeData.deviceAccount,
-      pwd: nodeData.devicePwd,
-      channelId: nodeData.channelNo,
-    };
+    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,
+        account: nodeData.deviceAccount,
+        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 {