perf: fix camera manage mode split container has some problem

@@ -26,7 +26,6 @@
       muted: true,
       muted: true,
       liveui: true,
       liveui: true,
       controls: true,
       controls: true,
-      fluid: true,
     };
     };
     return { ...defaultOptions, ...options };
     return { ...defaultOptions, ...options };
   });
   });
@@ -65,4 +64,12 @@
 
 
 <style lang="less">
 <style lang="less">
   @prefix-cls: ~'@{namespace}-basic-video-play';
   @prefix-cls: ~'@{namespace}-basic-video-play';
+
+  .@{prefix-cls} {
+    .vjs-error-display {
+      .vjs-modal-dialog-content::after {
+        content: '无法加载视频,原因可能是服务器或网络故障,也可能是格式不支持.';
+      }
+    }
+  }
 </style>
 </style>

@@ -15,6 +15,7 @@
   import { buildUUID } from '/@/utils/uuid';
   import { buildUUID } from '/@/utils/uuid';
   import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
   import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
   import { VideoJsPlayerOptions } from 'video.js';
   import { VideoJsPlayerOptions } from 'video.js';
+  import { getBoundingClientRect } from '/@/utils/domUtils';
 
 
   type CameraRecordItem = CameraRecord & {
   type CameraRecordItem = CameraRecord & {
     canPlay?: boolean;
     canPlay?: boolean;
@@ -159,6 +160,19 @@
   onMounted(() => {
   onMounted(() => {
     getCameraList();
     getCameraList();
   });
   });
+
+  const listEl = ref();
+  onMounted(() => {
+    const clientHeight = document.documentElement.clientHeight;
+    const rect = getBoundingClientRect(unref(listEl)!.$el!) as DOMRect;
+    // list pading top 8 maring-top 8 extra slot 56
+    const listContainerMarginBottom = 16;
+    const listContainerHeight = clientHeight - rect.top - listContainerMarginBottom;
+    const listContainerEl = (unref(listEl)!.$el as HTMLElement).querySelector(
+      '.ant-spin-container'
+    ) as HTMLElement;
+    listContainerEl && (listContainerEl.style.height = listContainerHeight + 'px');
+  });
 </script>
 </script>
 
 
 <template>
 <template>
@@ -221,6 +235,7 @@
         </div>
         </div>
         <section ref="videoContainer" class="flex-auto">
         <section ref="videoContainer" class="flex-auto">
           <List
           <List
+            ref="listEl"
             :loading="loading"
             :loading="loading"
             :data-source="cameraList"
             :data-source="cameraList"
             class="bg-light-50 w-full h-full dark:bg-dark-900 split-mode-list"
             class="bg-light-50 w-full h-full dark:bg-dark-900 split-mode-list"
@@ -275,24 +290,6 @@
     height: 100%;
     height: 100%;
   }
   }
 
 
-  .split-screen-mode:deep(.d-player-wrap) {
-    width: 100%;
-    height: 100%;
-  }
-
-  .split-screen-mode:deep(.ant-tabs-tab-active) {
-    border-bottom: 1px solid #eee;
-  }
-
-  .split-screen-mode:deep(video) {
-    position: absolute;
-    height: calc(100%) !important;
-  }
-
-  .split-screen-mode:deep(.d-player-control) {
-    z-index: 99;
-  }
-
   .video-container {
   .video-container {
     .video-container-mask {
     .video-container-mask {
       opacity: 0;
       opacity: 0;
@@ -306,8 +303,6 @@
       }
       }
 
 
       .video-container-error-msk {
       .video-container-error-msk {
-        // opacity: 0;
-        // visibility: hidden;
         color: #000;
         color: #000;
       }
       }
     }
     }
@@ -325,7 +320,6 @@
 
 
   .split-mode-list:deep(.ant-col) {
   .split-mode-list:deep(.ant-col) {
     width: 100%;
     width: 100%;
-    // height: var(--height);
     height: 100%;
     height: 100%;
   }
   }
 </style>
 </style>