合并

src/api/devicePreset/index.ts

@@ -10,7 +10,7 @@ import { DevicePresetVO, DevicePresetForm, DevicePresetQuery } from '@/api/camer
 
 export const listDevicePreset = (query?: DevicePresetQuery): AxiosPromise<DevicePresetVO[]> => {
   return request({
-    url: '/camera/devicePreset/list',
+    url: '/ops/devicePreset/list',
     method: 'get',
     params: query
   });
@@ -22,7 +22,7 @@ export const listDevicePreset = (query?: DevicePresetQuery): AxiosPromise<Device
  */
 export const getDevicePreset = (id: string | number): AxiosPromise<DevicePresetVO> => {
   return request({
-    url: '/camera/devicePreset/' + id,
+    url: '/ops/devicePreset/' + id,
     method: 'get'
   });
 };
@@ -33,7 +33,7 @@ export const getDevicePreset = (id: string | number): AxiosPromise<DevicePresetV
  */
 export const addDevicePreset = (data: DevicePresetForm) => {
   return request({
-    url: '/camera/devicePreset',
+    url: '/ops/devicePreset',
     method: 'post',
     data: data
   });
@@ -45,7 +45,7 @@ export const addDevicePreset = (data: DevicePresetForm) => {
  */
 export const updateDevicePreset = (data: DevicePresetForm) => {
   return request({
-    url: '/camera/devicePreset',
+    url: '/ops/devicePreset',
     method: 'put',
     data: data
   });
@@ -55,10 +55,11 @@ export const updateDevicePreset = (data: DevicePresetForm) => {
  * 删除摄像头预置位
  * @param id
  */
-export const delDevicePreset = (id: string | number | Array<string | number>) => {
+export const delDevicePreset = (data: any) => {
   return request({
-    url: '/camera/devicePreset/' + id,
-    method: 'delete'
+    url: '/ops/devicePreset/delYzd',
+    method: 'delete',
+    data: [data]
   });
 };
 /**
@@ -67,7 +68,7 @@ export const delDevicePreset = (id: string | number | Array<string | number>) =>
  */
 export const callDevicePreset = (data: DevicePresetForm) => {
   return request({
-    url: '/camera/devicePreset/call',
+    url: '/ops/devicePreset/callYzd',
     method: 'post',
     data: data
   });

src/api/securitySurveillance/index.js

@@ -14,3 +14,10 @@ export function getMonitoringList(data) {
         data
     })
 }
+// 获取首页大屏数据
+export function getHomeScreenData() {
+    return request({
+        url: '/ops/monitoriing/getMonitoringDp',
+        method: 'get',
+    })
+}

src/api/system/menu/index.ts

@@ -29,10 +29,11 @@ export const treeselect = (params?: any): AxiosPromise<MenuTreeOption[]> => {
 };
 
 // 根据角色ID查询菜单下拉树结构
-export const roleMenuTreeselect = (roleId: string | number): AxiosPromise<RoleMenuTree> => {
+export const roleMenuTreeselect = (roleId: string | number, params?: any): AxiosPromise<RoleMenuTree> => {
   return request({
     url: '/system/menu/roleMenuTreeselect/' + roleId,
-    method: 'get'
+    method: 'get',
+    params
   });
 };
 

src/views/camera/components/presetAdd.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="system-busPresettingBit-add">
-        <el-dialog v-model="isShowDialog" width="1250px" :close-on-click-modal="false" :destroy-on-close="true">
+        <el-dialog v-model="isShowDialog" width="1250px" :close-on-click-modal="false" :destroy-on-close="true"
+            @close="closeDialog">
             <template #header>
                 <div
                     v-drag="['.system-busPresettingBit-add .el-dialog', '.system-busPresettingBit-add .el-dialog__header']">
@@ -55,8 +56,10 @@
 import { ref, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { listDevicePreset, addDevicePreset, updateDevicePreset, delDevicePreset, callDevicePreset } from '@/api/devicePreset';
-import EZUIKit from 'ezuikit-js';
+import { getToken } from '@/api/securitySurveillance/index.js';
 
+import EZUIKit from 'ezuikit-js';
+import { ca } from 'element-plus/es/locale/index.mjs';
 const emit = defineEmits(['update']);
 const { proxy } = getCurrentInstance() as any;
 
@@ -110,6 +113,12 @@ function addPre() {
         inputErrorMessage: '请输入预置点名称'
     })
         .then(({ value }) => {
+            // 加载动画
+            const loading = ElLoading.service({
+                lock: true,
+                text: '添加中',
+                background: 'rgba(0, 0, 0, 0.7)',
+            })
             formData.value.presetName = value;
             addDevicePreset(formData.value)
                 .then(() => {
@@ -117,7 +126,8 @@ function addPre() {
                     busPresettingBitList();
                 })
                 .finally(() => {
-                    loading.value = false;
+                    // loading.value = false;
+                    loading.close();
                 });
         })
         .catch(() => { });
@@ -127,8 +137,8 @@ function addPre() {
 function videoPlay(obj: any) {
     console.log('objobjobj', obj);
 
-    getAccessToken().then((res: any) => {
-        if (res.code == 200 && obj.deviceSerial) {
+    getToken().then((res: any) => {
+        if (res.msg == "ok" && obj.deviceSerial) {
             flvPlayer.value = new EZUIKit.EZUIKitPlayer({
                 audio: '0',
                 id: 'video-container',
@@ -199,7 +209,12 @@ function handleDelete(row: any) {
                 deviceSerial: row.deviceSerial,
                 ids: id
             };
-            delDevicePreset(id).then((res: any) => {
+            delDevicePreset({
+                id: row.id,
+                deviceSerial: row.deviceSerial,
+                channelNo: "1",
+                presetIndex: row.presetIndex
+            }).then((res: any) => {
                 if (res.code === 200) {
                     ElMessage.success('删除成功');
                     busPresettingBitList();
@@ -211,7 +226,12 @@ function handleDelete(row: any) {
 
 // 调用
 function handleDebug(row: any) {
-    callDevicePreset(row.id).then((res: any) => {
+    callDevicePreset([{
+        deviceSerial: row.deviceSerial,
+        presetIndex: row.presetIndex,
+        channelNo: "1",
+        id: row.id
+    }]).then((res: any) => {
         if (res.code === 200) {
             ElMessage.success('调用成功');
         }
@@ -245,6 +265,7 @@ function resetForm() {
 }
 
 onBeforeUnmount(() => {
+
     if (flvPlayer.value) {
         flvPlayer.value.destroy().then((data: any) => {
             console.log('promise 获取 数据', data);

src/views/camera/index.vue

@@ -91,7 +91,7 @@
 							><el-icon><Plus /></el-icon>新增</el-button
 						>
 					</el-col> -->
-                    <el-col :span="1.5">
+                    <!-- <el-col :span="1.5">
                         <el-button type="success" :disabled="single" @click="handleUpdate(null)"
                             v-auth="'api/v1/system/ys7Devices/edit'"><el-icon>
                                 <Edit />
@@ -108,7 +108,7 @@
                             v-auth="'api/v1/system/ys7Devices/add'"><el-icon>
                                 <Link />
                             </el-icon>设备分配</el-button>
-                    </el-col>
+                    </el-col>-->
                 </el-row>
             </div>
             <el-table v-loading="loading" :data="tableData.data" @selection-change="handleSelectionChange">
@@ -137,7 +137,7 @@
                         {{ scope.row.projectName ? scope.row.projectName : '未分配' }}
                     </template>
                 </el-table-column> -->
-                <el-table-column label="备注" align="center" prop="remark" min-width="100px" />
+                <!-- <el-table-column label="备注" align="center" prop="remark" min-width="100px" /> -->
                 <!-- <el-table-column label="创建时间" align="center" prop="deviceCreateTime" min-width="100px">
                     <template #default="scope">
                         <span>{{ proxy.parseTime(scope.row.deviceCreateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
@@ -145,7 +145,7 @@
                 </el-table-column> -->
                 <el-table-column label="操作" align="center" class-name="small-padding" min-width="160px" fixed="right">
                     <template #default="scope">
-                        <el-button type="primary" link @click="handleUpdate(scope.row)"
+                        <!-- <el-button type="primary" link @click="handleUpdate(scope.row)"
                             v-auth="'api/v1/system/ys7Devices/edit'"><el-icon>
                                 <EditPen />
                             </el-icon>修改</el-button>
@@ -156,7 +156,7 @@
                         <el-button type="primary" link @click="onLinkProject(scope.row)"
                             v-auth="'api/v1/system/ys7Devices/delete'"><el-icon>
                                 <Link />
-                            </el-icon>设备分配</el-button>
+                            </el-icon>设备分配</el-button> -->
                         <el-button type="primary" link @click="addPreset(scope.row)"><el-icon>
                                 <Plus />
                             </el-icon>添加预置位</el-button>
@@ -243,15 +243,18 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 const ys7DevicesList = () => {
     loading.value = true;
     getMonitoringList({
-        pageStart: 1,
-        pageSize: 10
+        pageStart: state.tableData.param.pageNum,
+        pageSize: state.tableData.param.pageSize,
+        isflow: false
     }).then((res: any) => {
-        let list = res.data ?? [];
+        let list = res.data.object ?? [];
         state.tableData.data = list.map((item) => {
             item.enctyptLoading = false;
             return item;
         });
-        state.tableData.total = res.total;
+        state.tableData.total = Number(res.data.sum);
+        console.log(state.tableData);
+
         loading.value = false;
     });
 };
@@ -270,53 +273,53 @@ const handleSelectionChange = (selection: any[]) => {
 };
 
 // 新增
-const handleAdd = () => {
-    addRef.value.openDialog();
-};
+// const handleAdd = () => {
+//     addRef.value.openDialog();
+// };
 
-// 编辑
-const handleUpdate = (row?: Ys7DeviceVO) => {
-    if (!row) {
-        row = state.tableData.data.find((item) => item.id === state.ids[0])!;
-    }
-    editRef.value.openDialog(toRaw(row));
-};
+// // 编辑
+// const handleUpdate = (row?: Ys7DeviceVO) => {
+//     if (!row) {
+//         row = state.tableData.data.find((item) => item.id === state.ids[0])!;
+//     }
+//     editRef.value.openDialog(toRaw(row));
+// };
 
 // 删除
-const handleDelete = (row?: Ys7DeviceVO) => {
-    let msg = row ? `此操作将永久删除数据，是否继续?` : '你确定要删除所选数据？';
-    let id = row ? [row.id] : state.ids;
+// const handleDelete = (row?: any) => {
+//     let msg = row ? `此操作将永久删除数据，是否继续?` : '你确定要删除所选数据？';
+//     let id = row ? [row.id] : state.ids;
 
-    if (id.length === 0) {
-        ElMessage.error('请选择要删除的数据。');
-        return;
-    }
+//     if (id.length === 0) {
+//         ElMessage.error('请选择要删除的数据。');
+//         return;
+//     }
 
-    ElMessageBox.confirm(msg, '提示', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning'
-    })
-        .then(() => {
-            delYs7Device(id).then(() => {
-                ElMessage.success('删除成功');
-                ys7DevicesList();
-            });
-        })
-        .catch(() => { });
-};
+//     ElMessageBox.confirm(msg, '提示', {
+//         confirmButtonText: '确认',
+//         cancelButtonText: '取消',
+//         type: 'warning'
+//     })
+//         .then(() => {
+//             delYs7Device(id).then(() => {
+//                 ElMessage.success('删除成功');
+//                 ys7DevicesList();
+//             });
+//         })
+//         .catch(() => { });
+// };
 
 // 绑定项目
-const onLinkProject = (row?: Ys7DeviceVO) => {
-    let serials = row ? [row.deviceSerial] : state.ids;
+// const onLinkProject = (row?: Ys7DeviceVO) => {
+//     let serials = row ? [row.deviceSerial] : state.ids;
 
-    if (serials.length === 0) {
-        ElMessage.error('请选择要绑定项目的设备');
-        return;
-    }
-    let info = { serials, row };
-    bindProRef.value.openDialog(toRaw(info));
-};
+//     if (serials.length === 0) {
+//         ElMessage.error('请选择要绑定项目的设备');
+//         return;
+//     }
+//     let info = { serials, row };
+//     bindProRef.value.openDialog(toRaw(info));
+// };
 
 // 添加预置位
 const addPreset = (row: any) => {
@@ -324,38 +327,38 @@ const addPreset = (row: any) => {
 };
 
 // 开关加密
-const encryptChange = (row: Ys7DeviceVO | any) => {
-    row.enctyptLoading = true;
-    // const action = row.videoEncrypted === 0 ? 1 : 0;
-    console.log(row.videoEncrypted);
+// const encryptChange = (row: any) => {
+//     row.enctyptLoading = true;
+//     // const action = row.videoEncrypted === 0 ? 1 : 0;
+//     console.log(row.videoEncrypted);
 
-    toggleEncrypt({ videoEncrypted: row.videoEncrypted, id: row.id })
-        .then(() => {
-            proxy?.$modal.msgSuccess(row.videoEncrypted === 0 ? '关闭成功' : '开启成功');
-        })
-        .finally(() => {
-            row.enctyptLoading = false;
-            ys7DevicesList();
-        });
-};
+//     toggleEncrypt({ videoEncrypted: row.videoEncrypted, id: row.id })
+//         .then(() => {
+//             proxy?.$modal.msgSuccess(row.videoEncrypted === 0 ? '关闭成功' : '开启成功');
+//         })
+//         .finally(() => {
+//             row.enctyptLoading = false;
+//             ys7DevicesList();
+//         });
+// };
 
 //监听项目id刷新数据
-const listeningProject = watch(
-    () => currentProject.value?.id,
-    (nid, oid) => {
-        tableData.value.param.projectId = nid;
-        initTableData();
-    }
-);
+// const listeningProject = watch(
+//     () => currentProject.value?.id,
+//     (nid, oid) => {
+//         tableData.value.param.projectId = nid;
+//         initTableData();
+//     }
+// );
 
 // 页面加载
 onMounted(() => {
     initTableData();
 });
 
-onUnmounted(() => {
-    listeningProject();
-});
+// onUnmounted(() => {
+//     listeningProject();
+// });
 
 // 暴露变量
 const { tableData, projectList } = toRefs(state);

src/views/securitySurveillance/components/sbzt.vue

@@ -9,13 +9,13 @@
                     <el-col :span="12">
                         <div class="item">
                             <div class="status">在线</div>
-                            <div class="count" style="color: rgba(0, 184, 122, 1);">56</div>
+                            <div class="count" style="color: rgba(0, 184, 122, 1);">{{ data?.sumOnLine || 0 }}</div>
                         </div>
                     </el-col>
                     <el-col :span="12">
                         <div class="item">
                             <div class="status">离线</div>
-                            <div class="count" style="color: rgba(102, 102, 102, 1);">10</div>
+                            <div class="count" style="color: rgba(102, 102, 102, 1);">{{ data?.sumOffLine || 0 }}</div>
                         </div>
                     </el-col>
                     <el-col :span="12">
@@ -146,4 +146,11 @@
     }
 }
 </style>
-<script setup></script>
+<script setup>
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({})
+    }
+})
+</script>

src/views/securitySurveillance/components/spjk.vue

@@ -70,7 +70,7 @@
                     <template v-else>
                         <el-col :span="8" v-for="(item, index) in videoList" :key="index" class="video-wrapper">
                             <!-- 视频容器 -->
-                            <div class="item" :id="`smallVideo-${index + 1}`" ref="smallVideoRef">
+                            <div class="item" :id="`smallVideo-${index + 1}`" :ref="el => smallVideoRefs[index] = el">
                                 <!-- <div class="title">{{ item.name }}</div> -->
                             </div>
                             <!-- 按钮放在最外层，与视频容器同级 -->
@@ -85,7 +85,7 @@
                 </el-row>
                 <el-row v-if="!isExpanded">
                     <div class="pagination" v-if="activeTab !== 'record'">
-                        <el-pagination layout="prev, pager, next, jumper, sizes" :total="totalRecords"
+                        <el-pagination layout="prev, pager, next, jumper" :total="totalRecords"
                             v-model:current-page="pageStart" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
                             @current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
                     </div>
@@ -101,7 +101,7 @@ import EZUIKit from 'ezuikit-js';
 // import TitleComponent from '@/components/TitleComponent';
 import { getToken, getMonitoringList } from '@/api/securitySurveillance/index.js';
 import { ref, onMounted, watch, nextTick, onUnmounted } from 'vue';
-
+import { useUserStore } from '@/store/modules/user';
 const activeIndex = ref(0); // 初始选中第一个视频
 const isExpanded = ref(true); // 初始为扩展
 const accessToken = ref('')
@@ -110,7 +110,8 @@ const pageSize = ref(4); // 默认请求4个视频（扩展布局）
 const totalRecords = ref(0);
 const activeTab = ref('live');
 const bigVideoRef = ref<HTMLDivElement>(null);
-const smallVideoRef = ref<HTMLDivElement>(null);
+const smallVideoRefs = ref<Array<HTMLDivElement | null>>([]); // 使用数组存储多个视频容器引用
+const currentProject = computed(() => useUserStore().selectedProject);
 
 const videoList = ref([]);
 // 存储第二页的数据，用于处理扩展视图右边视频不足的情况
@@ -119,21 +120,35 @@ const nextPageVideoList = ref([]);
 const hasUsedNextPageData = ref(false);
 
 const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
+    // 添加输入参数的安全检查
+    if (!item || typeof item !== 'object') {
+        console.error('无效的视频项数据:', item);
+        return;
+    }
+
     const containerId = isBig ? 'bigVideo' : isExpanded.value ? `smallVideo-expanded-${index + 1}` : `smallVideo-${index + 1}`;
     const container = document.getElementById(containerId);
 
     // 先销毁旧的播放器实例（如果存在）
     if (item.player) {
         try {
+            // 添加安全检查，确保destroy方法存在
+            if (typeof item.player.destroy === 'function') {
+                // 尝试移除所有事件监听器
+                if (item.player.off) {
+                    item.player.off('*');
+                }
                 item.player.destroy();
             }
+        }
         catch (error) {
             console.error('销毁播放器失败:', error);
         }
         item.player = null;
     }
 
-    if (container) {
+    if (container && accessToken.value && item.deviceSerial) {
+        try {
             item.player = new EZUIKit.EZUIKitPlayer({
                 audio: '0',
                 id: containerId,
@@ -144,7 +159,12 @@ const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
                 height: container.clientHeight,
                 plugin: ['talk']
             });
-
+        } catch (error) {
+            console.error('创建播放器失败:', error);
+            item.player = null;
+        }
+    } else {
+        console.error(`创建播放器失败，缺少必要条件: container=${!!container}, accessToken=${!!accessToken.value}, deviceSerial=${!!item.deviceSerial}`);
     }
 };
 
@@ -157,21 +177,26 @@ const getTokenData = async () => {
 const getMonitoringListData = async () => {
     // 根据当前视图类型设置请求数量
     const currentPageSize = isExpanded.value ? 4 : 9;
-    const { data } = await getMonitoringList({
+    const { data: { object, sum }, } = await getMonitoringList({
         pageStart: pageStart.value,
-        pageSize: currentPageSize
+        pageSize: currentPageSize,
+        isflow: true,
+        projectId: currentProject.value?.id,
     })
-    // totalRecords.value = data.total
-    videoList.value = data
+    totalRecords.value = Number(sum)
+    // 确保object是数组，如果不是则使用空数组
+    videoList.value = Array.isArray(object) ? object : []
 }
 
 // 获取下一页视频数据
 const getNextPageData = async () => {
-    const { data } = await getMonitoringList({
+    const { data: { object, sum } } = await getMonitoringList({
         pageStart: pageStart.value + 1,
+        isflow: true,
         pageSize: 3 // 只需要3个视频
     })
-    nextPageVideoList.value = data;
+    // 确保object是数组，如果不是则使用空数组
+    nextPageVideoList.value = Array.isArray(object) ? object : [];
     // 标记已经使用了下一页的数据
     hasUsedNextPageData.value = true;
 }
@@ -193,39 +218,64 @@ const initVideo = async () => {
         bigVideoRef.value.innerHTML = '';
     }
 
+    // 清理所有小视频容器的内容
+    smallVideoRefs.value.forEach(ref => {
+        if (ref) {
+            ref.innerHTML = '';
+        }
+    });
+
+    // 确保videoList是数组，如果不是则使用空数组
+    const safeVideoList = Array.isArray(videoList.value) ? videoList.value : [];
+    // 确保nextPageVideoList是数组，如果不是则使用空数组
+    const safeNextPageVideoList = Array.isArray(nextPageVideoList.value) ? nextPageVideoList.value : [];
+
     if (isExpanded.value) {
         // 扩展布局：初始化大视频和右侧3个小视频
-        StructureEZUIKitPlayer(videoList.value[activeIndex.value], 0, true);
+        // 安全检查：确保activeIndex在有效范围内
+        const safeActiveIndex = Math.min(Math.max(activeIndex.value, 0), safeVideoList.length - 1);
+        if (safeVideoList.length > 0 && safeVideoList[safeActiveIndex] && typeof safeVideoList[safeActiveIndex] === 'object') {
+            StructureEZUIKitPlayer(safeVideoList[safeActiveIndex], 0, true);
+        }
 
         // 检查当前视频后面是否有足够的视频
-        const remainingVideos = videoList.value.length - activeIndex.value - 1;
+        const remainingVideos = safeVideoList.length - safeActiveIndex - 1;
 
         if (remainingVideos >= 3) {
             // 当前页后面有足够的视频，直接使用当前页的数据
             for (let i = 0; i < 3; i++) {
-                const displayIndex = activeIndex.value + i + 1;
-                StructureEZUIKitPlayer(videoList.value[displayIndex], i);
+                const videoIndex = safeActiveIndex + 1 + i;
+                if (safeVideoList[videoIndex] && typeof safeVideoList[videoIndex] === 'object') {
+                    // 修复索引：使用i而不是i+1，确保正确对应smallVideo-expanded-1, 2, 3
+                    StructureEZUIKitPlayer(safeVideoList[videoIndex], i);
+                }
             }
-            // 重置已使用下一页数据的标记
-            hasUsedNextPageData.value = false;
         } else {
             // 当前页后面视频不足3个，需要获取下一页的数据
             await getNextPageData();
+            // 重新获取安全的视频列表
+            const updatedSafeNextPageVideoList = Array.isArray(nextPageVideoList.value) ? nextPageVideoList.value : [];
             // 使用当前页后面的视频和下一页的前几个视频
             let displayCount = 0;
 
             // 先显示当前页后面的视频
-            for (let i = activeIndex.value + 1; i < videoList.value.length && displayCount < 3; i++) {
-                StructureEZUIKitPlayer(videoList.value[i], displayCount);
+            for (let i = safeActiveIndex + 1; i < safeVideoList.length && displayCount < 3; i++) {
+                if (safeVideoList[i] && typeof safeVideoList[i] === 'object') {
+                    // 修复索引：使用displayCount而不是displayCount+1
+                    StructureEZUIKitPlayer(safeVideoList[i], displayCount);
                     displayCount++;
                 }
+            }
 
             // 再显示下一页的视频补充到3个
-            for (let i = 0; i < nextPageVideoList.value.length && displayCount < 3; i++) {
-                StructureEZUIKitPlayer(nextPageVideoList.value[i], displayCount);
+            for (let i = 0; i < updatedSafeNextPageVideoList.length && displayCount < 3; i++) {
+                if (updatedSafeNextPageVideoList[i] && typeof updatedSafeNextPageVideoList[i] === 'object') {
+                    // 修复索引：使用displayCount而不是displayCount+1
+                    StructureEZUIKitPlayer(updatedSafeNextPageVideoList[i], displayCount);
                     displayCount++;
                 }
             }
+        }
     } else {
         // 普通布局：如果之前在扩展视图中使用了下一页数据，现在需要更新页码
         if (hasUsedNextPageData.value) {
@@ -234,9 +284,13 @@ const initVideo = async () => {
             await getMonitoringListData();
             hasUsedNextPageData.value = false;
         }
-        // 初始化所有视频
-        videoList.value.forEach((item, index) => {
+        // 初始化所有视频，添加更严格的类型检查
+        safeVideoList.forEach((item, index) => {
+            if (item && typeof item === 'object') {
                 StructureEZUIKitPlayer(item, index);
+            } else {
+                console.warn(`跳过无效的视频项: ${index}`);
+            }
         });
     }
 }
@@ -244,37 +298,53 @@ const initVideo = async () => {
 const handlePageChange = (page: number) => {
     pageStart.value = page;
     // 这里可以添加分页逻辑
+    getData()
 }
 
 const handleSizeChange = (size: number) => {
-    pageSize.value = size;
+    // 根据当前视图类型设置合适的页面大小
+    // 扩展视图固定为4，普通视图固定为9
+    pageSize.value = isExpanded.value ? 4 : 9;
     pageStart.value = 1;
-    // 这里可以添加分页逻辑
+    getData()
 }
 
 // 清理所有播放器实例
 const cleanupPlayers = () => {
+    // 清理当前页视频的播放器
     videoList.value.forEach(item => {
-        if (item.player) {
+        if (item && item.player && typeof item.player.destroy === 'function') {
             try {
+                // 尝试移除所有事件监听器
+                if (item.player.off) {
+                    item.player.off('*');
+                }
+                // 销毁播放器实例
                 item.player.destroy();
             }
             catch (error) {
                 console.error('销毁播放器失败:', error);
             }
+            // 确保播放器引用被清除
             item.player = null;
         }
     });
 
     // 清理下一页视频的播放器
     nextPageVideoList.value.forEach(item => {
-        if (item.player) {
+        if (item && item.player && typeof item.player.destroy === 'function') {
             try {
+                // 尝试移除所有事件监听器
+                if (item.player.off) {
+                    item.player.off('*');
+                }
+                // 销毁播放器实例
                 item.player.destroy();
             }
             catch (error) {
                 console.error('销毁下一页视频播放器失败:', error);
             }
+            // 确保播放器引用被清除
             item.player = null;
         }
     });
@@ -287,15 +357,32 @@ watch(isExpanded, async (newValue, oldValue) => {
 
     // 从扩展视图切换到普通视图，需要重新请求9个视频
     if (newValue === false && oldValue === true) {
+        // 同步更新页面大小为9
+        pageSize.value = 9;
+        // 清理所有播放器实例
+        cleanupPlayers();
+        // 等待DOM更新
+        await nextTick();
         // 重新请求9个视频数据
-        await getData();
+        await getMonitoringListData();
+        // 再次等待DOM更新
+        await nextTick();
+        // 初始化视频
+        initVideo();
         // 恢复保存的activeIndex值
         activeIndex.value = currentActiveIndex;
     }
     // 从普通视图切换到扩展视图，不需要重新请求数据
     else if (newValue === true && oldValue === false) {
-        // 但是需要重新初始化视频布局
+        // 同步更新页面大小为4
+        pageSize.value = 4;
+        // 清理所有播放器实例
+        cleanupPlayers();
+        // 等待DOM更新完成后再初始化视频
         await nextTick();
+        // 再次等待，确保DOM完全渲染
+        await new Promise(resolve => setTimeout(resolve, 100));
+        // 初始化视频
         initVideo();
     }
 });

src/views/securitySurveillance/components/top.vue

@@ -35,9 +35,11 @@
             <div class="box" style="height: 100%;display: flex;">
                 <div class="left"
                     style="display: flex;flex-direction: column;height: 100%;justify-content: space-around;padding: 15px;">
-                    <div style="color: rgba(102, 102, 102, 1);">今日录像时长</div>
+                    <div style="color: rgba(102, 102, 102, 1);">今日设备情况</div>
                     <div><span
-                            style="font-size: 30px;font-weight: 400;letter-spacing: 0px;line-height: 36px;color: rgba(0, 0, 0, 1);font-weight: bold;">54</span>
+                            style="font-size: 30px;font-weight: 400;letter-spacing: 0px;line-height: 36px;color: rgba(0, 0, 0, 1);font-weight: bold;">{{
+                                data?.sumMon
+                            || 0}}</span>
                         <span
                             style="font-size: 12px;font-weight: 400;letter-spacing: 0px;line-height: 17.38px;color: rgba(154, 154, 154, 1);">
                             台
@@ -48,14 +50,14 @@
                             style="width: 63px;height: 18px;border-radius: 16px;background: rgba(0, 184, 122, .3);text-align: center;">
                             <span
                                 style="font-size: 12px;font-weight: 400;letter-spacing: 0;line-height: 17.38px;color: rgba(0, 184, 122, 1);">
-                                正常：<span>53</span>
+                                正常：<span>{{ data?.sumOnLine || 0 }}</span>
                             </span>
                         </div>
                         <div
                             style="width: 63px;height: 18px;border-radius: 16px;background: rgba(227, 39, 39, .3);text-align: center;margin-left: 10px;">
                             <span
                                 style="font-size: 12px;font-weight: 400;letter-spacing: 0;line-height: 17.38px;color: rgba(0, 184, 122, 1);color: red;">
-                                异常<span>53</span>
+                                异常<span>{{ data?.sumOffLine || 0 }}</span>
                             </span>
                         </div>
                         <!-- <div>异常：<span>1</span></div> -->
@@ -153,4 +155,11 @@
     margin-right: 30px;
 }
 </style>
-<script setup></script>
+<script setup>
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({})
+    }
+})
+</script>

src/views/securitySurveillance/index.vue

@@ -25,7 +25,7 @@
             </el-col>
         </el-row>
         <el-row style="margin-top: 20px;">
-            <Top />
+            <Top :data="data" />
         </el-row>
         <el-row style="margin-top: 20px;" :gutter="25">
             <el-col :span="18">
@@ -37,7 +37,7 @@
         </el-row>
         <el-row style="margin-top: 20px;">
             <el-col>
-                <Sbzt />
+                <Sbzt :data="data" />
             </el-col>
         </el-row>
     </div>
@@ -55,4 +55,11 @@ import Top from "./components/top"
 import Spjk from "./components/spjk"
 import Spgl from "./components/spgl";
 import Sbzt from "./components/sbzt";
+import { getHomeScreenData } from "@/api/securitySurveillance";
+const data = ref(null)
+onMounted(() => {
+    getHomeScreenData().then(res => {
+        data.value = res.data
+    })
+})
 </script>