feat(视频监控): 新增摄像头预置位管理和视频监控功能

新增摄像头预置位管理功能，包括添加、修改、删除和调用预置位
实现视频监控页面，支持扩展视图和普通视图切换
添加获取摄像头列表接口，优化视频播放器初始化逻辑
完善分页功能，根据视图类型动态调整请求数量

src/api/devicePreset/index.ts

@@ -0,0 +1,74 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { DevicePresetVO, DevicePresetForm, DevicePresetQuery } from '@/api/camera/devicePreset/types';
+
+/**
+ * 查询摄像头预置位列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listDevicePreset = (query?: DevicePresetQuery): AxiosPromise<DevicePresetVO[]> => {
+  return request({
+    url: '/camera/devicePreset/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询摄像头预置位详细
+ * @param id
+ */
+export const getDevicePreset = (id: string | number): AxiosPromise<DevicePresetVO> => {
+  return request({
+    url: '/camera/devicePreset/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增摄像头预置位
+ * @param data
+ */
+export const addDevicePreset = (data: DevicePresetForm) => {
+  return request({
+    url: '/camera/devicePreset',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改摄像头预置位
+ * @param data
+ */
+export const updateDevicePreset = (data: DevicePresetForm) => {
+  return request({
+    url: '/camera/devicePreset',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除摄像头预置位
+ * @param id
+ */
+export const delDevicePreset = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/camera/devicePreset/' + id,
+    method: 'delete'
+  });
+};
+/**
+ * 调用摄像头预置位
+ * @param data
+ */
+export const callDevicePreset = (data: DevicePresetForm) => {
+  return request({
+    url: '/camera/devicePreset/call',
+    method: 'post',
+    data: data
+  });
+};

src/api/devicePreset/types.ts

@@ -0,0 +1,86 @@
+export interface DevicePresetVO {
+  /**
+   * 主键id
+   */
+  id: string | number;
+
+  /**
+   * 设备序列号
+   */
+  deviceSerial: string;
+
+  /**
+   * 通道号
+   */
+  channelNo: number;
+
+  /**
+   * 预置点序号
+   */
+  presetIndex: number;
+
+  /**
+   * 预置点
+   */
+  presetName: string;
+
+}
+
+export interface DevicePresetForm extends BaseEntity {
+  /**
+   * 主键id
+   */
+  id?: string | number;
+
+  /**
+   * 设备序列号
+   */
+  deviceSerial?: string;
+
+  /**
+   * 通道号
+   */
+  channelNo?: number;
+
+  /**
+   * 预置点序号
+   */
+  presetIndex?: number;
+
+  /**
+   * 预置点
+   */
+  presetName?: string;
+
+}
+
+export interface DevicePresetQuery extends PageQuery {
+
+  /**
+   * 设备序列号
+   */
+  deviceSerial?: string;
+
+  /**
+   * 通道号
+   */
+  channelNo?: number;
+
+  /**
+   * 预置点序号
+   */
+  presetIndex?: number;
+
+  /**
+   * 预置点
+   */
+  presetName?: string;
+
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+

src/api/securitySurveillance/index.js

@@ -6,3 +6,11 @@ export function getToken() {
         method: 'get',
     })
 }
+// 获取摄像头列表
+export function getMonitoringList(data) {
+    return request({
+        url: '/ops/monitoriing/getMonitoringList',
+        method: 'post',
+        data
+    })
+}

src/views/camera/components/presetAdd.vue

@@ -0,0 +1,288 @@
+<template>
+    <div class="system-busPresettingBit-add">
+        <el-dialog v-model="isShowDialog" width="1250px" :close-on-click-modal="false" :destroy-on-close="true">
+            <template #header>
+                <div
+                    v-drag="['.system-busPresettingBit-add .el-dialog', '.system-busPresettingBit-add .el-dialog__header']">
+                    {{ title }}:添加摄像头预置位
+                </div>
+            </template>
+            <div class="info_list">
+                <div class="video_box">
+                    <div class="video-container" id="video-container" style="width: 870px; height: 600px"></div>
+                </div>
+                <div>
+                    <el-button type="primary" style="margin: 0 20px 10px" @click="addPre">
+                        <el-icon>
+                            <Plus />
+                        </el-icon>
+                        添加预置点
+                    </el-button>
+                    <el-table v-loading="loading" :data="tableData.data" border>
+                        <el-table-column label="序号" align="center" type="index" width="55" />
+                        <el-table-column label="名称" align="center" prop="presetName" width="120px"
+                            show-overflow-tooltip>
+                            <template #default="scope">
+                                <el-input v-model="scope.row.presetName" placeholder="请输入内容"
+                                    @change="handleEdit(scope.row)" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" align="center" width="135px">
+                            <template #default="scope">
+                                <el-button type="primary" link @click="handleDebug(scope.row)">
+                                    <el-icon>
+                                        <View />
+                                    </el-icon>调用
+                                </el-button>
+                                <el-button type="danger" link @click="handleDelete(scope.row)">
+                                    <el-icon>
+                                        <DeleteFilled />
+                                    </el-icon>删除
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <pagination style="padding: 5px 16px" v-show="tableData.total > 0" :total="tableData.total"
+                        v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize"
+                        @pagination="busPresettingBitList" :layout="layout" />
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+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';
+
+const emit = defineEmits(['update']);
+const { proxy } = getCurrentInstance() as any;
+
+const formRef = ref<HTMLElement | null>(null);
+const menuRef = ref();
+const loading = ref(false);
+
+const isShowDialog = ref(false);
+const layout = ref('total, prev, pager, next');
+const title = ref('');
+const updateRow = ref<any>(null);
+const src = ref(null);
+const flvPlayer = ref<any>(null);
+
+const formData = ref({
+    deviceSerial: undefined,
+    channelNo: '1',
+    presetName: undefined
+});
+
+const tableData = ref({
+    data: [],
+    total: 0,
+    loading: false,
+    param: {
+        pageNum: 1,
+        pageSize: 15,
+        deviceSerial: ''
+    }
+});
+
+// 打开弹窗
+function openDialog(row: any) {
+    resetForm();
+    updateRow.value = row;
+    title.value = row.deviceName;
+    formData.value.deviceSerial = row.deviceSerial;
+    tableData.value.param.deviceSerial = row.deviceSerial;
+    isShowDialog.value = true;
+    busPresettingBitList();
+    nextTick(() => {
+        videoPlay(row);
+    });
+}
+
+// 添加预置点
+function addPre() {
+    ElMessageBox.prompt('请输入预置点名称', '添加预置点', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputErrorMessage: '请输入预置点名称'
+    })
+        .then(({ value }) => {
+            formData.value.presetName = value;
+            addDevicePreset(formData.value)
+                .then(() => {
+                    ElMessage.success('添加成功');
+                    busPresettingBitList();
+                })
+                .finally(() => {
+                    loading.value = false;
+                });
+        })
+        .catch(() => { });
+}
+
+// 视频播放
+function videoPlay(obj: any) {
+    console.log('objobjobj', obj);
+
+    getAccessToken().then((res: any) => {
+        if (res.code == 200 && obj.deviceSerial) {
+            flvPlayer.value = new EZUIKit.EZUIKitPlayer({
+                audio: '0',
+                id: 'video-container',
+                accessToken: res.data,
+                url: `ezopen://open.ys7.com/${obj.deviceSerial}/1.hd.live`,
+                template: 'pcLive',
+                width: 870,
+                height: 600,
+                plugin: ['talk'],
+                handleError: function (err: any) {
+                    console.log(err);
+
+                    if (err?.data?.ret === 20020) {
+                        // 20020 是并发连接限制的错误码
+                        ElMessage.error('当前观看人数已达上限，请稍后再试');
+                    }
+                }
+            });
+        }
+    });
+}
+
+// 关闭弹窗
+function closeDialog() {
+    if (flvPlayer.value) {
+        flvPlayer.value.destroy().then((data: any) => {
+            console.log('promise 获取 数据', data);
+        });
+        flvPlayer.value = null;
+    }
+    isShowDialog.value = false;
+}
+
+// 获取列表
+function busPresettingBitList() {
+    loading.value = true;
+    listDevicePreset(tableData.value.param).then((res: any) => {
+        tableData.value.data = res.rows ?? [];
+        tableData.value.total = res.total;
+        loading.value = false;
+    });
+}
+
+// 取消
+function onCancel() {
+    closeDialog();
+}
+
+// 删除
+function handleDelete(row: any) {
+    let msg = '你确定要删除所选数据？';
+    let id: number[] = [];
+    if (row) {
+        msg = '此操作将永久删除数据，是否继续?';
+        id = [row.id];
+    }
+    if (id.length === 0) {
+        ElMessage.error('请选择要删除的数据。');
+        return;
+    }
+    ElMessageBox.confirm(msg, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+    })
+        .then(() => {
+            const obj = {
+                deviceSerial: row.deviceSerial,
+                ids: id
+            };
+            delDevicePreset(id).then((res: any) => {
+                if (res.code === 200) {
+                    ElMessage.success('删除成功');
+                    busPresettingBitList();
+                }
+            });
+        })
+        .catch(() => { });
+}
+
+// 调用
+function handleDebug(row: any) {
+    callDevicePreset(row.id).then((res: any) => {
+        if (res.code === 200) {
+            ElMessage.success('调用成功');
+        }
+    });
+}
+
+// 修改
+function handleEdit(row: any) {
+    const param = {
+        id: row.id,
+        deviceSerial: row.deviceSerial,
+        presetName: row.presetName
+    };
+    updateDevicePreset(param)
+        .then(() => {
+            ElMessage.success('修改成功');
+            busPresettingBitList();
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+}
+
+// 重置表单
+function resetForm() {
+    formData.value = {
+        deviceSerial: undefined,
+        channelNo: '1',
+        presetName: undefined
+    };
+}
+
+onBeforeUnmount(() => {
+    if (flvPlayer.value) {
+        flvPlayer.value.destroy().then((data: any) => {
+            console.log('promise 获取 数据', data);
+        });
+        flvPlayer.value = null;
+    }
+});
+
+// ✅ 关键：暴露方法给父组件调用
+defineExpose({
+    openDialog,
+    closeDialog
+});
+</script>
+
+<style scoped lang="scss">
+.system-busPresettingBit-add {
+    .info_list {
+        width: 100%;
+        display: flex;
+        height: 100%;
+
+        .video_box {
+            width: 75%;
+            height: 600px;
+            margin-right: 10px;
+
+            .iframe {
+                border: none;
+                outline: none;
+            }
+
+            .video_air {
+                width: 100%;
+                height: 100%;
+                object-fit: fill;
+            }
+        }
+    }
+}
+</style>

src/views/camera/index.vue

@@ -0,0 +1,371 @@
+<template>
+    <div class="system-ys7Devices-container">
+        <el-card shadow="hover">
+            <div class="system-ys7Devices-search mb8">
+                <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="100px">
+                    <el-row>
+                        <el-col :span="8" class="colBlock">
+                            <el-form-item label="设备名称" prop="deviceName">
+                                <el-input v-model="tableData.param.deviceName" placeholder="请输入设备名称" clearable
+                                    @keyup.enter.native="ys7DevicesList" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" class="colBlock">
+                            <el-form-item label="设备类型" prop="deviceType">
+                                <el-input v-model="tableData.param.deviceType" placeholder="请输入设备类型" clearable
+                                    @keyup.enter.native="ys7DevicesList" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="!showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item>
+                                <el-button type="primary" @click="ys7DevicesList"><el-icon>
+                                        <Search />
+                                    </el-icon>搜索</el-button>
+                                <el-button @click="resetQuery(queryRef)"><el-icon>
+                                        <Refresh />
+                                    </el-icon>重置</el-button>
+                                <el-button type="primary" link @click="toggleSearch">
+                                    {{ word }}
+                                    <el-icon v-show="showAll">
+                                        <ArrowUp />
+                                    </el-icon>
+                                    <el-icon v-show="!showAll">
+                                        <ArrowDown />
+                                    </el-icon>
+                                </el-button>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item label="设备序列号" prop="deviceSerial">
+                                <el-input v-model="tableData.param.deviceSerial" placeholder="请输入设备串号" clearable
+                                    @keyup.enter.native="ys7DevicesList" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item label="状态" prop="status">
+                                <el-select v-model="tableData.param.status" placeholder="请选择设备状态" clearable>
+                                    <el-option label="在线" :value="1" />
+                                    <el-option label="离线" :value="0" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item label="设备版本" prop="deviceVersion">
+                                <el-input v-model="tableData.param.deviceVersion" placeholder="请输入设备版本" clearable
+                                    @keyup.enter.native="ys7DevicesList" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item label="所属项目" prop="projectId">
+                                <el-select v-model="tableData.param.projectId" placeholder="请选择所属项目" clearable
+                                    filterable>
+                                    <el-option v-for="item in projectList" class="device_row" :key="item.id"
+                                        :label="item.name" :value="item.id" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item>
+                                <el-button type="primary" @click="ys7DevicesList"><el-icon>
+                                        <Search />
+                                    </el-icon>搜索</el-button>
+                                <el-button @click="resetQuery(queryRef)"><el-icon>
+                                        <Refresh />
+                                    </el-icon>重置</el-button>
+                                <el-button type="primary" link @click="toggleSearch">
+                                    {{ word }}
+                                    <el-icon v-show="showAll">
+                                        <ArrowUp />
+                                    </el-icon>
+                                    <el-icon v-show="!showAll">
+                                        <ArrowDown />
+                                    </el-icon>
+                                </el-button>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <el-row :gutter="10" class="mb8">
+                    <!-- <el-col :span="1.5">
+						<el-button type="primary" @click="handleAdd" v-auth="'api/v1/system/ys7Devices/add'"
+							><el-icon><Plus /></el-icon>新增</el-button
+						>
+					</el-col> -->
+                    <el-col :span="1.5">
+                        <el-button type="success" :disabled="single" @click="handleUpdate(null)"
+                            v-auth="'api/v1/system/ys7Devices/edit'"><el-icon>
+                                <Edit />
+                            </el-icon>修改</el-button>
+                    </el-col>
+                    <el-col :span="1.5">
+                        <el-button type="danger" :disabled="multiple" @click="handleDelete(null)"
+                            v-auth="'api/v1/system/ys7Devices/delete'"><el-icon>
+                                <Delete />
+                            </el-icon>删除</el-button>
+                    </el-col>
+                    <el-col :span="1.5">
+                        <el-button type="warning" :disabled="multiple" @click="onLinkProject(null)"
+                            v-auth="'api/v1/system/ys7Devices/add'"><el-icon>
+                                <Link />
+                            </el-icon>设备分配</el-button>
+                    </el-col>
+                </el-row>
+            </div>
+            <el-table v-loading="loading" :data="tableData.data" @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="55" align="center" />
+                <el-table-column label="设备序列号" align="center" prop="deviceSerial" min-width="100px" />
+                <el-table-column label="设备名称" align="center" prop="deviceName" min-width="100px" />
+                <el-table-column label="设备类型" align="center" prop="deviceType" min-width="100px" />
+                <el-table-column label="状态" align="center" prop="status" min-width="100px">
+                    <template #default="scope">
+                        <el-tag type="success" v-if="scope.row.status === 1">在线</el-tag>
+                        <el-tag type="danger" v-if="scope.row.status === 0">离线</el-tag>
+                    </template>
+                </el-table-column>
+                <!-- <el-table-column label="视频加密" align="center" prop="videoEncrypted" min-width="100px">
+                    <template #default="scope">
+                        <el-switch v-model="scope.row.videoEncrypted" class="ml-2" :active-value="1" :inactive-value="0"
+                            :loading="scope.row.enctyptLoading" @change="encryptChange(scope.row)" inline-prompt
+                            active-text="开启" inactive-text="关闭"
+                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
+                    </template>
+                </el-table-column> -->
+                <!-- <el-table-column label="" align="center" prop="defence" min-width="100px" /> -->
+                <el-table-column label="设备版本" align="center" prop="deviceVersion" min-width="100px" />
+                <!-- <el-table-column label="所属项目" align="center" prop="projectId" min-width="100px">
+                    <template #default="scope">
+                        {{ 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="deviceCreateTime" min-width="100px">
+                    <template #default="scope">
+                        <span>{{ proxy.parseTime(scope.row.deviceCreateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+                    </template>
+                </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)"
+                            v-auth="'api/v1/system/ys7Devices/edit'"><el-icon>
+                                <EditPen />
+                            </el-icon>修改</el-button>
+                        <el-button type="primary" link @click="handleDelete(scope.row)"
+                            v-auth="'api/v1/system/ys7Devices/delete'"><el-icon>
+                                <DeleteFilled />
+                            </el-icon>删除</el-button>
+                        <el-button type="primary" link @click="onLinkProject(scope.row)"
+                            v-auth="'api/v1/system/ys7Devices/delete'"><el-icon>
+                                <Link />
+                            </el-icon>设备分配</el-button>
+                        <el-button type="primary" link @click="addPreset(scope.row)"><el-icon>
+                                <Plus />
+                            </el-icon>添加预置位</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
+                v-model:limit="tableData.param.pageSize" @pagination="ys7DevicesList" />
+        </el-card>
+        <presetAdd ref="presetAddRef"></presetAdd>
+    </div>
+</template>
+<script setup lang="ts">
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import { useUserStoreHook } from '@/store/modules/user';
+import { getMonitoringList } from '@/api/securitySurveillance/index.js';
+import presetAdd from './components/presetAdd.vue';
+// proxy 获取
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+// ref 定义
+const loading = ref(false);
+const queryRef = ref<FormInstance>();
+const addRef = ref();
+const editRef = ref();
+const detailRef = ref();
+const bindProRef = ref();
+const presetAddRef = ref();
+
+// 展开/收起搜索项
+const showAll = ref(false);
+const word = computed(() => (showAll.value ? '收起搜索' : '展开搜索'));
+
+// 多选控制
+const single = ref(true);
+const multiple = ref(true);
+
+// 获取用户 store
+const userStore = useUserStoreHook();
+// 从 store 中获取项目列表和当前选中的项目
+const currentProject = computed(() => userStore.selectedProject);
+const projects = computed(() => userStore.projects);
+
+// 状态管理
+const state = reactive<any>({
+    ids: [],
+    serials: [],
+    tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+        param: {
+            pageNum: 1,
+            pageSize: 10,
+            id: undefined,
+            createdAt: undefined,
+            deviceSerial: undefined,
+            deviceName: undefined,
+            deviceType: undefined,
+            status: undefined,
+            defence: undefined,
+            deviceVersion: undefined,
+            projectId: currentProject.value?.id,
+            dateRange: [],
+            isFront: false
+        }
+    },
+    projectList: projects.value
+});
+
+// 初始化
+const initTableData = () => {
+    ys7DevicesList();
+    // sysProjectList();
+};
+
+// 搜索重置
+const resetQuery = (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.resetFields();
+    ys7DevicesList();
+};
+
+// 获取设备列表
+const ys7DevicesList = () => {
+    loading.value = true;
+    getMonitoringList({
+        pageStart: 1,
+        pageSize: 10
+    }).then((res: any) => {
+        let list = res.data ?? [];
+        state.tableData.data = list.map((item) => {
+            item.enctyptLoading = false;
+            return item;
+        });
+        state.tableData.total = res.total;
+        loading.value = false;
+    });
+};
+
+// 展开/收起搜索项
+const toggleSearch = () => {
+    showAll.value = !showAll.value;
+};
+
+// 多选事件
+const handleSelectionChange = (selection: any[]) => {
+    state.ids = selection.map((item) => item.id);
+    state.serials = selection.map((item) => item.deviceSerial);
+    single.value = selection.length !== 1;
+    multiple.value = !selection.length;
+};
+
+// 新增
+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 handleDelete = (row?: Ys7DeviceVO) => {
+    let msg = row ? `此操作将永久删除数据，是否继续?` : '你确定要删除所选数据？';
+    let id = row ? [row.id] : state.ids;
+
+    if (id.length === 0) {
+        ElMessage.error('请选择要删除的数据。');
+        return;
+    }
+
+    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;
+
+    if (serials.length === 0) {
+        ElMessage.error('请选择要绑定项目的设备');
+        return;
+    }
+    let info = { serials, row };
+    bindProRef.value.openDialog(toRaw(info));
+};
+
+// 添加预置位
+const addPreset = (row: any) => {
+    presetAddRef.value.openDialog(row);
+};
+
+// 开关加密
+const encryptChange = (row: Ys7DeviceVO | 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();
+        });
+};
+
+//监听项目id刷新数据
+const listeningProject = watch(
+    () => currentProject.value?.id,
+    (nid, oid) => {
+        tableData.value.param.projectId = nid;
+        initTableData();
+    }
+);
+
+// 页面加载
+onMounted(() => {
+    initTableData();
+});
+
+onUnmounted(() => {
+    listeningProject();
+});
+
+// 暴露变量
+const { tableData, projectList } = toRefs(state);
+</script>
+<style lang="scss" scoped>
+.colBlock {
+    display: block;
+}
+
+.colNone {
+    display: none;
+}
+</style>

src/views/securitySurveillance/components/spjk.vue

@@ -23,14 +23,14 @@
                                 :id="`bigVideo`">
                                 <div class="title" v-if="isExpanded"
                                     style="display: flex;justify-content: space-between;">
-                                    <div class="text">
+                                    <!-- <div class="text">
                                         {{ videoList[activeIndex].name }}
                                     </div>
                                     <div class="tools">
                                         <img src="/assets/svg/huanyuan.svg" alt=""></img>
                                         <img src="/assets/svg/quanpin.svg" alt=""></img>
                                         <img src="/assets/svg/jietu.svg" alt="">
-                                    </div>
+                                    </div> -->
                                 </div>
                             </div>
                             <!-- 大视频的切换视图按钮 -->
@@ -49,8 +49,8 @@
                                         const displayIndex = (activeIndex + i) % videoList.length;
                                         activeIndex = displayIndex;
                                     }" :id="`smallVideo-expanded-${i}`">
-                                        <div class="title">{{ videoList[(activeIndex + i) % videoList.length].name }}
+                                        <!-- <div class="title">{{ videoList[(activeIndex + i) % videoList.length].name }}
-                                        </div>
+                                        </div> -->
                                     </div>
                                     <!-- 小视频的两个按钮：切换视图和查看视频 -->
                                     <div class="video-action-btn expanded">
@@ -71,7 +71,7 @@
                         <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="title">{{ item.name }}</div>
+                                <!-- <div class="title">{{ item.name }}</div> -->
                             </div>
                             <!-- 按钮放在最外层，与视频容器同级 -->
                             <div class="video-action-btn">
@@ -86,7 +86,7 @@
                 <el-row v-if="!isExpanded">
                     <div class="pagination" v-if="activeTab !== 'record'">
                         <el-pagination layout="prev, pager, next, jumper, sizes" :total="totalRecords"
-                            v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
+                            v-model:current-page="pageStart" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
                             @current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
                     </div>
                 </el-row>
@@ -96,59 +96,27 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, nextTick, onUnmounted } from 'vue';
 import { Refresh } from '@element-plus/icons-vue';
 import EZUIKit from 'ezuikit-js';
-import TitleComponent from '@/components/TitleComponent';
+// import TitleComponent from '@/components/TitleComponent';
-import { getToken } from '@/api/securitySurveillance/index.js';
+import { getToken, getMonitoringList } from '@/api/securitySurveillance/index.js';
+import { ref, onMounted, watch, nextTick, onUnmounted } from 'vue';
+
 const activeIndex = ref(0); // 初始选中第一个视频
-const isExpanded = ref(true); // 初始为普通布局
+const isExpanded = ref(true); // 初始为扩展
-const pageSize = ref(20);
-const totalRecords = ref(100);
 const accessToken = ref('')
-const currentPage = ref(1);
+const pageStart = ref(1);
+const pageSize = ref(4); // 默认请求4个视频（扩展布局）
+const totalRecords = ref(0);
 const activeTab = ref('live');
 const bigVideoRef = ref<HTMLDivElement>(null);
 const smallVideoRef = ref<HTMLDivElement>(null);
 
-const videoList = ref([
+const videoList = ref([]);
-    {
+// 存储第二页的数据，用于处理扩展视图右边视频不足的情况
-        name: 'A区d厂',
+const nextPageVideoList = ref([]);
-        url: 'https://img.js.design/assets/img/68c144e8ba276a0e8a4a55c2.jpeg#bab7e2e06aae943525cacb13bd63e30d'
+// 标记是否已经使用了下一页的数据
-    },
+const hasUsedNextPageData = ref(false);
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c144efb5e8b987e5ca6462.jpeg#5523cf094b2f8c3a79ea4eb330c99a30'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c144fbbad414f81995e90c.webp#230d8ca5ca39982518439db26e0ea899'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c1450640d5d2a02e2540b2.webp#adad2379a0b04d6968364e4fb1133f77'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c14543d56431f9d6f6808e.webp#16f0a0d8fab4f8ff3b39b04bfabac054'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c14578d56431f9d6f68981.jpg#e77150417f28a971be4846eb0be90373'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c145e03f22157da619a7ce.png#546ff44289a22bf175e1eca1f69cd8f9'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c1461fb5e8b987e5caa293.jpeg#870e4d2b88b487ecb8f2f0b956c45c08'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c1462dcbf9ed2271880b95.webp#ae7ae94ca84ce980e2d2281869335f06'
-    }
-]);
 
 const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
     const containerId = isBig ? 'bigVideo' : isExpanded.value ? `smallVideo-expanded-${index + 1}` : `smallVideo-${index + 1}`;
@@ -158,7 +126,8 @@ const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
     if (item.player) {
         try {
             item.player.destroy();
-        } catch (error) {
+        }
+        catch (error) {
             console.error('销毁播放器失败:', error);
         }
         item.player = null;
@@ -169,12 +138,13 @@ const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
             audio: '0',
             id: containerId,
             accessToken: accessToken.value,
-            url: "ezopen://open.ys7.com/GA1044316/1.hd.live",
+            url: `ezopen://open.ys7.com/${item.deviceSerial}/1.hd.live`,
             template: "pcLive",
             width: container.clientWidth,
             height: container.clientHeight,
             plugin: ['talk']
         });
+
     }
 };
 
@@ -182,14 +152,42 @@ const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
 const getTokenData = async () => {
     const { data } = await getToken()
     accessToken.value = data
-    initVideo()
+}
+// 获取摄像头列表
+const getMonitoringListData = async () => {
+    // 根据当前视图类型设置请求数量
+    const currentPageSize = isExpanded.value ? 4 : 9;
+    const { data } = await getMonitoringList({
+        pageStart: pageStart.value,
+        pageSize: currentPageSize
+    })
+    // totalRecords.value = data.total
+    videoList.value = data
+}
+
+// 获取下一页视频数据
+const getNextPageData = async () => {
+    const { data } = await getMonitoringList({
+        pageStart: pageStart.value + 1,
+        pageSize: 3 // 只需要3个视频
+    })
+    nextPageVideoList.value = data;
+    // 标记已经使用了下一页的数据
+    hasUsedNextPageData.value = true;
 }
 
 const getData = async () => {
-    await getTokenData()
+    // 先清理所有播放器
+    cleanupPlayers();
+    // 不再每次都获取token，token只在组件挂载时获取一次
+    await getMonitoringListData()
+    // 不再重置activeIndex，保留用户之前选择的视频索引
+    // 等待DOM更新后初始化视频
+    await nextTick();
+    initVideo()
 }
 
-const initVideo = () => {
+const initVideo = async () => {
     // 先清理所有视频容器的内容，避免残留
     if (bigVideoRef.value) {
         bigVideoRef.value.innerHTML = '';
@@ -198,12 +196,45 @@ const initVideo = () => {
     if (isExpanded.value) {
         // 扩展布局：初始化大视频和右侧3个小视频
         StructureEZUIKitPlayer(videoList.value[activeIndex.value], 0, true);
-        for (let i = 0; i < 3; i++) {
+
-            const displayIndex = (activeIndex.value + i + 1) % videoList.value.length;
+        // 检查当前视频后面是否有足够的视频
-            StructureEZUIKitPlayer(videoList.value[displayIndex], i);
+        const remainingVideos = videoList.value.length - activeIndex.value - 1;
+
+        if (remainingVideos >= 3) {
+            // 当前页后面有足够的视频，直接使用当前页的数据
+            for (let i = 0; i < 3; i++) {
+                const displayIndex = activeIndex.value + i + 1;
+                StructureEZUIKitPlayer(videoList.value[displayIndex], i);
+            }
+            // 重置已使用下一页数据的标记
+            hasUsedNextPageData.value = false;
+        } else {
+            // 当前页后面视频不足3个，需要获取下一页的数据
+            await getNextPageData();
+            // 使用当前页后面的视频和下一页的前几个视频
+            let displayCount = 0;
+
+            // 先显示当前页后面的视频
+            for (let i = activeIndex.value + 1; i < videoList.value.length && displayCount < 3; i++) {
+                StructureEZUIKitPlayer(videoList.value[i], displayCount);
+                displayCount++;
+            }
+
+            // 再显示下一页的视频补充到3个
+            for (let i = 0; i < nextPageVideoList.value.length && displayCount < 3; i++) {
+                StructureEZUIKitPlayer(nextPageVideoList.value[i], displayCount);
+                displayCount++;
+            }
         }
     } else {
-        // 普通布局：初始化所有视频
+        // 普通布局：如果之前在扩展视图中使用了下一页数据，现在需要更新页码
+        if (hasUsedNextPageData.value) {
+            pageStart.value += 1;
+            // 重新获取第二页的9个视频数据
+            await getMonitoringListData();
+            hasUsedNextPageData.value = false;
+        }
+        // 初始化所有视频
         videoList.value.forEach((item, index) => {
             StructureEZUIKitPlayer(item, index);
         });
@@ -211,38 +242,62 @@ const initVideo = () => {
 }
 
 const handlePageChange = (page: number) => {
-    currentPage.value = page;
+    pageStart.value = page;
     // 这里可以添加分页逻辑
 }
 
 const handleSizeChange = (size: number) => {
     pageSize.value = size;
-    currentPage.value = 1;
+    pageStart.value = 1;
     // 这里可以添加分页逻辑
 }
 
 // 清理所有播放器实例
 const cleanupPlayers = () => {
     videoList.value.forEach(item => {
-        console.log(item);
-
         if (item.player) {
             try {
                 item.player.destroy();
-            } catch (error) {
+            }
+            catch (error) {
                 console.error('销毁播放器失败:', error);
             }
             item.player = null;
         }
     });
+
+    // 清理下一页视频的播放器
+    nextPageVideoList.value.forEach(item => {
+        if (item.player) {
+            try {
+                item.player.destroy();
+            }
+            catch (error) {
+                console.error('销毁下一页视频播放器失败:', error);
+            }
+            item.player = null;
+        }
+    });
 }
 
-// 监听isExpanded变化，重新初始化视频
+// 监听isExpanded变化，根据不同情况处理数据请求
 watch(isExpanded, async (newValue, oldValue) => {
-    // 确保DOM已经更新
+    // 保存当前activeIndex的值
-    await nextTick();
+    const currentActiveIndex = activeIndex.value;
-    // 重新初始化视频，确保在切换布局时正确显示
+
-    initVideo();
+    // 从扩展视图切换到普通视图，需要重新请求9个视频
+    if (newValue === false && oldValue === true) {
+        // 重新请求9个视频数据
+        await getData();
+        // 恢复保存的activeIndex值
+        activeIndex.value = currentActiveIndex;
+    }
+    // 从普通视图切换到扩展视图，不需要重新请求数据
+    else if (newValue === true && oldValue === false) {
+        // 但是需要重新初始化视频布局
+        await nextTick();
+        initVideo();
+    }
 });
 
 watch(activeIndex, (newIndex) => {
@@ -253,7 +308,13 @@ watch(activeIndex, (newIndex) => {
 });
 
 onMounted(() => {
-    getData()
+    // 组件挂载时获取一次token
+    getTokenData().then(() => {
+        // token获取成功后，获取视频数据
+        getData();
+    }).catch(error => {
+        console.error('获取token失败:', error);
+    });
 });
 
 // 组件卸载时销毁所有播放器