perf: camera manage add load faild message

@@ -12,12 +12,15 @@
   import { useDrawer } from '/@/components/Drawer';
   import { useDrawer } from '/@/components/Drawer';
   import { PageMode } from './config.data';
   import { PageMode } from './config.data';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
+  import { isDef } from '/@/utils/is';
+
+  type CameraRecordItem = CameraRecord & { canPlay?: boolean };
 
 
   const emit = defineEmits(['switchMode']);
   const emit = defineEmits(['switchMode']);
   const organizationIdTreeRef = ref(null);
   const organizationIdTreeRef = ref(null);
   const videoContainer = ref<Nullable<HTMLDivElement>>(null);
   const videoContainer = ref<Nullable<HTMLDivElement>>(null);
   const activeKey = ref(PageMode.SPLIT_SCREEN_MODE);
   const activeKey = ref(PageMode.SPLIT_SCREEN_MODE);
-  const cameraList = ref<CameraRecord[]>([]);
+  const cameraList = ref<CameraRecordItem[]>([]);
   const organizationId = ref<Nullable<string>>(null);
   const organizationId = ref<Nullable<string>>(null);
   const loading = ref(false);
   const loading = ref(false);
   const pagination = reactive({
   const pagination = reactive({
@@ -106,8 +109,18 @@
     }
     }
   };
   };
 
 
-  const handleVideoError = (event) => {
-    console.log('video happend error', event);
+  const handleLoadStart = (record: CameraRecordItem) => {
+    const index = unref(cameraList).findIndex((item) => item.id === record.id);
+    setTimeout(() => {
+      ~index &&
+        !unref(cameraList).at(index)!.canPlay &&
+        (unref(cameraList).at(index)!.canPlay = false);
+    }, 10000);
+  };
+
+  const handleLoadData = (record: CameraRecordItem) => {
+    const index = unref(cameraList).findIndex((item) => item.id === record.id);
+    ~index && (unref(cameraList).at(index)!.canPlay = true);
   };
   };
 
 
   const [registerDrawer, { openDrawer }] = useDrawer();
   const [registerDrawer, { openDrawer }] = useDrawer();
@@ -192,12 +205,19 @@
                 <div class="box-border w-full h-full p-3">
                 <div class="box-border w-full h-full p-3">
                   <div class="bg-yellow-50 w-full h-full overflow-hidden relative video-container">
                   <div class="bg-yellow-50 w-full h-full overflow-hidden relative video-container">
                     <VideoPlay
                     <VideoPlay
-                      @error="handleVideoError"
+                      @loadstart="handleLoadStart(item)"
+                      @loadeddata="handleLoadData(item)"
                       v-bind="options"
                       v-bind="options"
                       :src="item.videoUrl"
                       :src="item.videoUrl"
                       :title="item.name"
                       :title="item.name"
                     />
                     />
                     <div
                     <div
+                      v-if="isDef(item.canPlay) && !item.canPlay"
+                      class="video-container-error-msk absolute top-0 left-0 text-lg w-full h-full text-light-50 flex justify-center items-center z-50 bg-black"
+                    >
+                      视频加载出错了！
+                    </div>
+                    <div
                       class="video-container-mask absolute top-0 left-0 z-50 text-lg w-full text-light-50 flex justify-center items-center"
                       class="video-container-mask absolute top-0 left-0 z-50 text-lg w-full text-light-50 flex justify-center items-center"
                       style="height: 100%; background-color: rgba(0, 0, 0, 0.5)"
                       style="height: 100%; background-color: rgba(0, 0, 0, 0.5)"
                     >
                     >
@@ -257,6 +277,12 @@
       .video-container-mask {
       .video-container-mask {
         opacity: 1;
         opacity: 1;
       }
       }
+
+      .video-container-error-msk {
+        // opacity: 0;
+        // visibility: hidden;
+        color: #000;
+      }
     }
     }
   }
   }
 </style>
 </style>