perf: camera manage split mode add pagination

@@ -2,7 +2,7 @@
   import { PageWrapper } from '/@/components/Page';
   import { PageWrapper } from '/@/components/Page';
   import OrganizationIdTree from '../../common/organizationIdTree/src/OrganizationIdTree.vue';
   import OrganizationIdTree from '../../common/organizationIdTree/src/OrganizationIdTree.vue';
   import { computed, onMounted, reactive, ref, unref, watch } from 'vue';
   import { computed, onMounted, reactive, ref, unref, watch } from 'vue';
-  import { Tabs, Row, Col, Spin, Button } from 'ant-design-vue';
+  import { Tabs, Row, Col, Spin, Button, Pagination } from 'ant-design-vue';
   import { cameraPage } from '/@/api/camera/cameraManager';
   import { cameraPage } from '/@/api/camera/cameraManager';
   import { CameraRecord } from '/@/api/camera/model/cameraModel';
   import { CameraRecord } from '/@/api/camera/model/cameraModel';
   import { videoPlay as VideoPlay } from 'vue3-video-play'; // 引入组件
   import { videoPlay as VideoPlay } from 'vue3-video-play'; // 引入组件
@@ -24,6 +24,7 @@
     page: 1,
     page: 1,
     pageSize: 4,
     pageSize: 4,
     colNumber: 2,
     colNumber: 2,
+    total: 0,
   });
   });
 
 
   const options = reactive({
   const options = reactive({
@@ -66,11 +67,12 @@
   const getCameraList = async () => {
   const getCameraList = async () => {
     try {
     try {
       loading.value = true;
       loading.value = true;
-      const { items } = await cameraPage({
-        page: 1,
+      const { items, total } = await cameraPage({
+        page: pagination.page,
         pageSize: pagination.pageSize,
         pageSize: pagination.pageSize,
         organizationId: unref(organizationId)!,
         organizationId: unref(organizationId)!,
       });
       });
+      pagination.total = total;
       cameraList.value = items;
       cameraList.value = items;
       console.log({ url: cameraList.value.map((item) => item.videoUrl) });
       console.log({ url: cameraList.value.map((item) => item.videoUrl) });
     } catch (error) {
     } catch (error) {
@@ -103,6 +105,10 @@
     }
     }
   };
   };
 
 
+  const handleVideoError = (event) => {
+    console.log('video happend error', event);
+  };
+
   const [registerDrawer, { openDrawer }] = useDrawer();
   const [registerDrawer, { openDrawer }] = useDrawer();
 
 
   const handleAddCamera = () => {
   const handleAddCamera = () => {
@@ -144,6 +150,17 @@
             >
             >
               <SvgIcon class="text-2xl" prefix="iconfont" name="grid-nine" />
               <SvgIcon class="text-2xl" prefix="iconfont" name="grid-nine" />
             </div>
             </div>
+            <div>
+              <Pagination
+                v-model:current="pagination.page"
+                :total="pagination.total"
+                :page-size="pagination.pageSize"
+                :show-size-changer="false"
+                @change="getCameraList"
+                size="small"
+                :show-total="(total) => `共 ${total} 条`"
+              />
+            </div>
           </div>
           </div>
           <div class="flex items-center gap-4">
           <div class="flex items-center gap-4">
             <div class="flex">
             <div class="flex">
@@ -168,7 +185,12 @@
               >
               >
                 <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">
                   <div class="bg-yellow-50 w-full h-full overflow-hidden relative">
-                    <VideoPlay v-bind="options" :src="item.videoUrl" :title="item.name" />
+                    <VideoPlay
+                      @error="handleVideoError"
+                      v-bind="options"
+                      :src="item.videoUrl"
+                      :title="item.name"
+                    />
                     <div
                     <div
                       class="absolute hidden top-0 left-0 z-50 bg-gray-200 text-lg w-full h-full flex justify-center items-center"
                       class="absolute hidden top-0 left-0 z-50 bg-gray-200 text-lg w-full h-full flex justify-center items-center"
                     >
                     >