diff --git a/apps/web-antd/src/api/property/assetManage/procurementApplication/index.ts b/apps/web-antd/src/api/property/assetManage/procurementApplication/index.ts
index e51c1110..22f8ab8b 100644
--- a/apps/web-antd/src/api/property/assetManage/procurementApplication/index.ts
+++ b/apps/web-antd/src/api/property/assetManage/procurementApplication/index.ts
@@ -19,7 +19,7 @@ export function procurementApplicationList(
   params?: ProcurementApplicationQuery,
 ) {
   return requestClient.get<PageResult<ProcurementApplicationVO>>(
-    '/domain/procurementApplication/list',
+    '/property/capitalApplication/list',
     { params },
   );
 }
@@ -32,7 +32,7 @@ export function procurementApplicationList(
 export function procurementApplicationExport(
   params?: ProcurementApplicationQuery,
 ) {
-  return commonExport('/domain/procurementApplication/export', params ?? {});
+  return commonExport('/property/capitalApplication/export', params ?? {});
 }
 
 /**
@@ -42,7 +42,7 @@ export function procurementApplicationExport(
  */
 export function procurementApplicationInfo(id: ID) {
   return requestClient.get<ProcurementApplicationVO>(
-    `/domain/procurementApplication/${id}`,
+    `/property/capitalApplication/${id}`,
   );
 }
 
@@ -52,10 +52,7 @@ export function procurementApplicationInfo(id: ID) {
  * @returns void
  */
 export function procurementApplicationAdd(data: ProcurementApplicationForm) {
-  return requestClient.postWithMsg<void>(
-    '/domain/procurementApplication',
-    data,
-  );
+  return requestClient.postWithMsg<void>('/property/capitalApplication', data);
 }
 
 /**
@@ -64,7 +61,7 @@ export function procurementApplicationAdd(data: ProcurementApplicationForm) {
  * @returns void
  */
 export function procurementApplicationUpdate(data: ProcurementApplicationForm) {
-  return requestClient.putWithMsg<void>('/domain/procurementApplication', data);
+  return requestClient.putWithMsg<void>('/property/capitalApplication', data);
 }
 
 /**
@@ -74,6 +71,6 @@ export function procurementApplicationUpdate(data: ProcurementApplicationForm) {
  */
 export function procurementApplicationRemove(id: ID | IDS) {
   return requestClient.deleteWithMsg<void>(
-    `/domain/procurementApplication/${id}`,
+    `/property/capitalApplication/${id}`,
   );
 }
diff --git a/apps/web-antd/src/api/property/assetManage/procurementApplication/model.d.ts b/apps/web-antd/src/api/property/assetManage/procurementApplication/model.d.ts
index d2484328..f33f9a38 100644
--- a/apps/web-antd/src/api/property/assetManage/procurementApplication/model.d.ts
+++ b/apps/web-antd/src/api/property/assetManage/procurementApplication/model.d.ts
@@ -51,6 +51,11 @@ export interface ProcurementApplicationVO {
    */
   state: string;
 
+  /**
+   * 审核意见
+   */
+  auditOpinion?: string;
+
   /**
    * 备注
    */
@@ -65,6 +70,11 @@ export interface ProcurementApplicationVO {
    * 搜索值
    */
   searchValue: string;
+
+  /**
+   * 资产信息
+   */
+  capitalInfoVoList: any[];
 }
 
 export interface ProcurementApplicationForm extends BaseEntity {
@@ -118,6 +128,11 @@ export interface ProcurementApplicationForm extends BaseEntity {
    */
   state?: string;
 
+  /**
+   * 审核意见
+   */
+  auditOpinion?: string;
+
   /**
    * 备注
    */
@@ -132,6 +147,7 @@ export interface ProcurementApplicationForm extends BaseEntity {
    * 搜索值
    */
   searchValue?: string;
+  capitalInfoBolist?: any;
 }
 
 export interface ProcurementApplicationQuery extends PageQuery {
diff --git a/apps/web-antd/src/assets/algorithmManagement/image.png b/apps/web-antd/src/assets/algorithmManagement/image.png
new file mode 100644
index 00000000..d99585cf
Binary files /dev/null and b/apps/web-antd/src/assets/algorithmManagement/image.png differ
diff --git a/apps/web-antd/src/assets/algorithmManagement/image2.png b/apps/web-antd/src/assets/algorithmManagement/image2.png
new file mode 100644
index 00000000..1a138912
Binary files /dev/null and b/apps/web-antd/src/assets/algorithmManagement/image2.png differ
diff --git a/apps/web-antd/src/assets/algorithmManagement/image3.png b/apps/web-antd/src/assets/algorithmManagement/image3.png
new file mode 100644
index 00000000..8411352f
Binary files /dev/null and b/apps/web-antd/src/assets/algorithmManagement/image3.png differ
diff --git a/apps/web-antd/src/assets/algorithmManagement/image4.png b/apps/web-antd/src/assets/algorithmManagement/image4.png
new file mode 100644
index 00000000..b82f33d0
Binary files /dev/null and b/apps/web-antd/src/assets/algorithmManagement/image4.png differ
diff --git a/apps/web-antd/src/assets/algorithmManagement/image5.png b/apps/web-antd/src/assets/algorithmManagement/image5.png
new file mode 100644
index 00000000..0e678492
Binary files /dev/null and b/apps/web-antd/src/assets/algorithmManagement/image5.png differ
diff --git a/apps/web-antd/src/assets/algorithmManagement/image6.png b/apps/web-antd/src/assets/algorithmManagement/image6.png
new file mode 100644
index 00000000..2893a792
Binary files /dev/null and b/apps/web-antd/src/assets/algorithmManagement/image6.png differ
diff --git a/apps/web-antd/src/assets/algorithmManagement/image7.png b/apps/web-antd/src/assets/algorithmManagement/image7.png
new file mode 100644
index 00000000..1bf850b3
Binary files /dev/null and b/apps/web-antd/src/assets/algorithmManagement/image7.png differ
diff --git a/apps/web-antd/src/router/routes/local.ts b/apps/web-antd/src/router/routes/local.ts
index 9beca3c2..19f8f606 100644
--- a/apps/web-antd/src/router/routes/local.ts
+++ b/apps/web-antd/src/router/routes/local.ts
@@ -38,15 +38,15 @@ export const localMenuList: RouteRecordStringComponent[] = [
       title: '首页',
     },
   },
-  {
-    component: '/_core/about/index',
-    meta: {
-      icon: 'lucide:copyright',
-      order: 9999,
-      title: $t('demos.vben.about'),
-    },
-    name: 'About',
-    path: '/vben-admin/about',
-  },
+  // {
+  //   component: '/_core/about/index',
+  //   meta: {
+  //     icon: 'lucide:copyright',
+  //     order: 9999,
+  //     title: $t('demos.vben.about'),
+  //   },
+  //   name: 'About',
+  //   path: '/vben-admin/about',
+  // },
   ...localRoutes,
 ];
diff --git a/apps/web-antd/src/views/property/assetManage/procurementApplication/audit-modal.vue b/apps/web-antd/src/views/property/assetManage/procurementApplication/audit-modal.vue
new file mode 100644
index 00000000..cf8530b3
--- /dev/null
+++ b/apps/web-antd/src/views/property/assetManage/procurementApplication/audit-modal.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+import { useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { useVbenForm } from '#/adapter/form';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+import {
+  procurementApplicationUpdate,
+  procurementApplicationInfo,
+} from '#/api/property/assetManage/procurementApplication';
+import type { ProcurementApplicationForm } from '#/api/property/assetManage/procurementApplication/model';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const title = computed(() => '采购审批');
+
+// 存储完整的申请数据
+const fullApplicationData = ref<ProcurementApplicationForm>({});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: [
+    {
+      label: '审核状态',
+      fieldName: 'state',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '通过', value: '1' },
+          { label: '驳回', value: '2' },
+        ],
+      },
+      rules: 'required',
+    },
+    {
+      label: '审核意见',
+      fieldName: 'auditOpinion',
+      component: 'Textarea',
+      componentProps: {
+        rows: 4,
+        placeholder: '请输入审核意见',
+      },
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  class: 'w-[500px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    const { id } = modalApi.getData() as { id?: number | string };
+    if (id) {
+      // 获取完整的申请数据
+      const record = await procurementApplicationInfo(id);
+      fullApplicationData.value = cloneDeep(record);
+
+      // 设置表单默认值
+      await formApi.setValues({
+        id,
+        state: '',
+        auditOpinion: '',
+      });
+    }
+    await markInitialized();
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+
+    // 获取审核表单数据
+    const auditData = await formApi.getValues();
+
+    // 合并完整数据，只更新审核相关字段
+    const updateData = {
+      ...fullApplicationData.value,
+      state: auditData.state,
+      auditOpinion: auditData.auditOpinion,
+    };
+
+    await procurementApplicationUpdate(updateData);
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+  fullApplicationData.value = {};
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/property/assetManage/procurementApplication/data.ts b/apps/web-antd/src/views/property/assetManage/procurementApplication/data.ts
index ca200787..8239e602 100644
--- a/apps/web-antd/src/views/property/assetManage/procurementApplication/data.ts
+++ b/apps/web-antd/src/views/property/assetManage/procurementApplication/data.ts
@@ -3,48 +3,46 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { getDictOptions } from '#/utils/dict';
 import { renderDict } from '#/utils/render';
+import { suppliersList } from '#/api/property/assetManage/suppliers';
+import { depotList } from '#/api/property/assetManage/depot';
+import { useUserStore } from '@vben/stores';
+
+const userStore = useUserStore();
 
 export const querySchema: FormSchemaGetter = () => [
-  {
-    component: 'Input',
-    fieldName: 'title',
-    label: '标题',
-  },
+  // {
+  //   component: 'Input',
+  //   fieldName: 'title',
+  //   label: '标题',
+  // },
   {
     component: 'Input',
     fieldName: 'applicat',
-    label: '申请人id',
-  },
-  {
-    component: 'Input',
-    fieldName: 'phone',
-    label: '申请人手机号',
-  },
-  {
-    component: 'Input',
-    fieldName: 'supplier',
-    label: '供应商id',
-  },
-  {
-    component: 'Input',
-    fieldName: 'capitalId',
-    label: '资产id',
+    label: '申请人',
   },
+  // {
+  //   component: 'Input',
+  //   fieldName: 'phone',
+  //   label: '申请人手机号',
+  // },
+  // {
+  //   component: 'ApiSelect',
+  //   fieldName: 'supplier',
+  //   label: '供应商',
+  //   componentProps: {
+  //     api: suppliersList({ pageNum: 1, pageSize: 1000 }),
+  //     resultField: 'rows',
+  //     labelField: 'assetTypeName',
+  //     valueField: 'id',
+  //   },
+  // },
+
   {
     component: 'Select',
     componentProps: {},
     fieldName: 'buyType',
     label: '采购方式',
-  },
-  {
-    component: 'Input',
-    fieldName: 'buyUnitPrice',
-    label: '采购单价',
-  },
-  {
-    component: 'Input',
-    fieldName: 'buyAmount',
-    label: '采购金额',
+    options: getDictOptions('wy_zccgfs'),
   },
   {
     component: 'Select',
@@ -55,21 +53,6 @@ export const querySchema: FormSchemaGetter = () => [
     fieldName: 'state',
     label: '状态',
   },
-  {
-    component: 'DatePicker',
-    componentProps: {
-      showTime: true,
-      format: 'YYYY-MM-DD HH:mm:ss',
-      valueFormat: 'YYYY-MM-DD HH:mm:ss',
-    },
-    fieldName: 'applicationTime',
-    label: '申请时间',
-  },
-  {
-    component: 'Input',
-    fieldName: 'searchValue',
-    label: '搜索值',
-  },
 ];
 
 // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
@@ -77,12 +60,18 @@ export const querySchema: FormSchemaGetter = () => [
 export const columns: VxeGridProps['columns'] = [
   { type: 'checkbox', width: 60 },
   {
-    title: '',
+    title: '序号',
     field: 'id',
+    slots: {
+      default: ({ rowIndex }) => {
+        return (rowIndex + 1).toString();
+      },
+    },
   },
   {
     title: '标题',
     field: 'title',
+    width: 'auto',
   },
   {
     title: '申请人id',
@@ -96,21 +85,15 @@ export const columns: VxeGridProps['columns'] = [
     title: '供应商id',
     field: 'supplier',
   },
-  {
-    title: '资产id',
-    field: 'capitalId',
-  },
   {
     title: '采购方式',
     field: 'buyType',
-  },
-  {
-    title: '采购单价',
-    field: 'buyUnitPrice',
-  },
-  {
-    title: '采购金额',
-    field: 'buyAmount',
+    slots: {
+      default: ({ row }) => {
+        // 可选从DictEnum中获取 DictEnum.WY_ZCSQSHZT 便于维护
+        return renderDict(row.buyType, 'wy_zccgfs');
+      },
+    },
   },
   {
     title: '状态',
@@ -126,20 +109,12 @@ export const columns: VxeGridProps['columns'] = [
     title: '备注',
     field: 'remark',
   },
-  {
-    title: '申请时间',
-    field: 'applicationTime',
-  },
-  {
-    title: '搜索值',
-    field: 'searchValue',
-  },
   {
     field: 'action',
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    width: 280,
   },
 ];
 
@@ -160,73 +135,131 @@ export const modalSchema: FormSchemaGetter = () => [
     rules: 'required',
   },
   {
-    label: '申请人id',
-    fieldName: 'applicat',
-    component: 'Input',
+    label: '存放仓库',
+    fieldName: 'depotId',
+    component: 'ApiSelect',
     rules: 'required',
-  },
-  {
-    label: '申请人手机号',
-    fieldName: 'phone',
-    component: 'Input',
-    rules: 'required',
-  },
-  {
-    label: '供应商id',
-    fieldName: 'supplier',
-    component: 'Input',
-    rules: 'required',
-  },
-  {
-    label: '资产id',
-    fieldName: 'capitalId',
-    component: 'Input',
-    rules: 'required',
-  },
-  {
-    label: '采购方式',
-    fieldName: 'buyType',
-    component: 'Select',
-    componentProps: {},
-    rules: 'selectRequired',
-  },
-  {
-    label: '采购单价',
-    fieldName: 'buyUnitPrice',
-    component: 'Input',
-  },
-  {
-    label: '采购金额',
-    fieldName: 'buyAmount',
-    component: 'Input',
-  },
-  {
-    label: '状态',
-    fieldName: 'state',
-    component: 'Select',
     componentProps: {
-      // 可选从DictEnum中获取 DictEnum.WY_ZCSQSHZT 便于维护
-      options: getDictOptions('wy_zcsqshzt'),
+      api: async () => {
+        const res = await depotList({ pageNum: 1, pageSize: 1000 });
+        return res;
+      },
+      resultField: 'rows',
+      labelField: 'depotName',
+      valueField: 'id',
     },
   },
+  {
+    component: 'Input',
+    fieldName: 'applicatDisplay', // 显示用
+    label: '申请人',
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    component: 'Input',
+    rules: 'required',
+    fieldName: 'applicat', // 实际存储ID
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'phone',
+    rules: 'required',
+    label: '申请人手机号',
+  },
+  {
+    component: 'ApiSelect',
+    rules: 'required',
+    fieldName: 'supplier',
+    label: '供应商',
+    componentProps: {
+      api: async () => {
+        const res = await suppliersList({ pageNum: 1, pageSize: 1000 });
+        return res;
+      },
+      resultField: 'rows',
+      labelField: 'suppliersName',
+      valueField: 'id',
+    },
+  },
+  {
+    rules: 'required',
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('wy_zccgfs'),
+    },
+    fieldName: 'buyType',
+    label: '采购方式',
+  },
+  // {
+  //   label: '采购单价',
+  //   fieldName: 'buyUnitPrice',
+  //   component: 'Input',
+  // },
+  // {
+  //   label: '采购金额',
+  //   fieldName: 'buyAmount',
+  //   component: 'Input',
+  // },
+  // {
+  //   label: '状态',
+  //   fieldName: 'state',
+  //   component: 'Select',
+  //   componentProps: {
+  //     // 可选从DictEnum中获取 DictEnum.WY_ZCSQSHZT 便于维护
+  //     options: getDictOptions('wy_zcsqshzt'),
+  //   },
+  // },
   {
     label: '备注',
     fieldName: 'remark',
     component: 'Input',
   },
+];
+
+export const detailColumns: VxeGridProps['columns'] = [
   {
-    label: '申请时间',
-    fieldName: 'applicationTime',
-    component: 'DatePicker',
-    componentProps: {
-      showTime: true,
-      format: 'YYYY-MM-DD HH:mm:ss',
-      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    title: '序号',
+    field: 'id',
+    width: 80,
+    slots: {
+      default: ({ rowIndex }) => {
+        return (rowIndex + 1).toString();
+      },
     },
   },
   {
-    label: '搜索值',
-    fieldName: 'searchValue',
-    component: 'Input',
+    title: '资产名称',
+    field: 'capitalName',
+    width: 150,
+  },
+  {
+    title: '规格',
+    field: 'spec',
+    width: 120,
+  },
+  {
+    title: '购买数量',
+    field: 'buyQuantity',
+    width: 120,
+  },
+  {
+    title: '采购单价',
+    field: 'buyUnitPrice',
+    width: 120,
+  },
+  {
+    title: '金额小计',
+    field: 'buyAmount',
+    width: 120,
+  },
+  {
+    title: '备注',
+    field: 'remark',
+    width: 150,
   },
 ];
diff --git a/apps/web-antd/src/views/property/assetManage/procurementApplication/index.vue b/apps/web-antd/src/views/property/assetManage/procurementApplication/index.vue
index 7a25d660..62d25e5b 100644
--- a/apps/web-antd/src/views/property/assetManage/procurementApplication/index.vue
+++ b/apps/web-antd/src/views/property/assetManage/procurementApplication/index.vue
@@ -24,6 +24,7 @@ import type { ProcurementApplicationForm } from '#/api/property/assetManage/proc
 import { commonDownloadExcel } from '#/utils/file/download';
 
 import procurementApplicationModal from './procurementApplication-modal.vue';
+import auditModal from './audit-modal.vue';
 import { columns, querySchema } from './data';
 
 const formOptions: VbenFormProps = {
@@ -88,12 +89,29 @@ const [ProcurementApplicationModal, modalApi] = useVbenModal({
   connectedComponent: procurementApplicationModal,
 });
 
+const [AuditModal, auditModalApi] = useVbenModal({
+  connectedComponent: auditModal,
+});
+
 function handleAdd() {
   modalApi.setData({});
   modalApi.open();
 }
 
-async function handleEdit(row: Required<ProcurementApplicationForm>) {
+async function handleAudit(row: Required<ProcurementApplicationForm>) {
+  // 检查审核状态，如果已审核则不允许再次审核
+  if (row.state === '1' || row.state === '2') {
+    Modal.warning({
+      title: '提示',
+      content: '该申请已审核，不能重复审核',
+    });
+    return;
+  }
+  auditModalApi.setData({ id: row.id });
+  auditModalApi.open();
+}
+
+async function handleDetail(row: Required<ProcurementApplicationForm>) {
   modalApi.setData({ id: row.id });
   modalApi.open();
 }
@@ -140,6 +158,13 @@ function handleDownloadExcel() {
           >
             {{ $t('pages.common.export') }}
           </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['domain:procurementApplication:add']"
+            @click="handleAdd"
+          >
+            新增
+          </a-button>
           <a-button
             :disabled="!vxeCheckboxChecked(tableApi)"
             danger
@@ -149,22 +174,23 @@ function handleDownloadExcel() {
           >
             {{ $t('pages.common.delete') }}
           </a-button>
-          <a-button
-            type="primary"
-            v-access:code="['domain:procurementApplication:add']"
-            @click="handleAdd"
-          >
-            {{ $t('pages.common.add') }}
-          </a-button>
         </Space>
       </template>
       <template #action="{ row }">
         <Space>
           <ghost-button
-            v-access:code="['domain:procurementApplication:edit']"
-            @click.stop="handleEdit(row)"
+            v-access:code="['domain:procurementApplication:audit']"
+            :disabled="row.state === '1' || row.state === '2'"
+            type="primary"
+            @click.stop="handleAudit(row)"
           >
-            {{ $t('pages.common.edit') }}
+            审核
+          </ghost-button>
+          <ghost-button
+            v-access:code="['domain:procurementApplication:detail']"
+            @click.stop="handleDetail(row)"
+          >
+            详情
           </ghost-button>
           <Popconfirm
             :get-popup-container="getVxePopupContainer"
@@ -183,6 +209,8 @@ function handleDownloadExcel() {
         </Space>
       </template>
     </BasicTable>
+    <!-- Removed ProcurementApplicationModal @reload="tableApi.query()" -->
+    <AuditModal @reload="tableApi.query()" />
     <ProcurementApplicationModal @reload="tableApi.query()" />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/property/assetManage/procurementApplication/procurement-detail-modal.vue b/apps/web-antd/src/views/property/assetManage/procurementApplication/procurement-detail-modal.vue
new file mode 100644
index 00000000..1729a7dd
--- /dev/null
+++ b/apps/web-antd/src/views/property/assetManage/procurementApplication/procurement-detail-modal.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+import { useVbenForm } from '#/adapter/form';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+import { assetTypeList } from '#/api/property/assetManage/assetType';
+import { useUserStore } from '@vben/stores';
+const userStore = useUserStore();
+const emit = defineEmits<{ reload: [data: any]; editReload: [data: any] }>();
+
+const isUpdate = ref(false);
+const isAdd = ref(false);
+const isView = ref(false);
+const title = computed(() => {
+  if (isAdd.value) {
+    return $t('pages.common.add');
+  } else if (isView.value) {
+    return '查看';
+  } else {
+    return $t('pages.common.edit');
+  }
+});
+
+// 缓存清洁服务数据
+const detailIndex = ref<number>(); //传index对应详情的某条数据,对该条数据进行编辑修改
+const detailSchema = [
+  {
+    label: '资产名称',
+    fieldName: 'capitalName',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '资产类型',
+    fieldName: 'capitalType',
+    component: 'ApiSelect',
+    componentProps: {
+      api: async () => {
+        const res = await assetTypeList({ pageNum: 1, pageSize: 1000 });
+        return res;
+      },
+      resultField: 'rows',
+      labelField: 'assetTypeName',
+      valueField: 'id',
+    },
+    rules: 'required',
+  },
+  {
+    label: '规格',
+    fieldName: 'spec',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '采购单价',
+    fieldName: 'buyUnitPrice',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      onChange: async () => {
+        const formValues = await formApi.getValues();
+        const price = Number(formValues.buyUnitPrice) || 0;
+        const count = Number(formValues.buyQuantity) || 0;
+        const amount = price * count;
+        await formApi.setValues({
+          buyAmount: amount ? amount.toFixed(2) : '',
+        });
+      },
+    },
+  },
+  {
+    label: '采购数量',
+    fieldName: 'buyQuantity',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      onChange: async () => {
+        const formValues = await formApi.getValues();
+        const price = Number(formValues.buyUnitPrice) || 0;
+        const count = Number(formValues.buyQuantity) || 0;
+        const amount = price * count;
+        await formApi.setValues({
+          buyAmount: amount ? amount.toFixed(2) : '',
+        });
+      },
+    },
+  },
+  {
+    label: '金额小计',
+    fieldName: 'buyAmount',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Textarea',
+  },
+];
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    labelWidth: 120,
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: detailSchema,
+  showDefaultActions: false,
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    console.log(userStore.userInfo);
+
+    modalApi.modalLoading(true);
+    const data = modalApi.getData();
+    detailIndex.value = modalApi.getData().index;
+    if (!data || Object.keys(data).length === 0) {
+      //modalApi.getData()为空时表示添加
+      isAdd.value = true;
+    } else if (data.readonly) {
+      isView.value = true;
+    } else {
+      //表示编辑
+      isUpdate.value = true;
+    }
+    // TODO: 获取详情数据
+    await formApi.setValues(modalApi.getData());
+    await markInitialized();
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    let data = cloneDeep(await formApi.getValues());
+    if (isUpdate.value) {
+      data.index = detailIndex.value;
+      emit('editReload', data);
+    } else if (isAdd.value) {
+      emit('reload', data);
+    }
+    handleClosed();
+    await markInitialized();
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  isAdd.value = false;
+  isView.value = false;
+  isUpdate.value = false;
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm> </BasicForm>
+  </BasicModal>
+</template>
+<style scoped>
+/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
+:deep(.ant-input[disabled]),
+:deep(.ant-input-number-disabled .ant-input-number-input),
+:deep(.ant-select-disabled .ant-select-selection-item) {
+  /* 设置一个更深的颜色，可以自己调整 */
+  color: rgba(0, 0, 0, 0.65) !important;
+  /* 有些浏览器需要这个来覆盖默认颜色 */
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
+}
+</style>
diff --git a/apps/web-antd/src/views/property/assetManage/procurementApplication/procurementApplication-modal.vue b/apps/web-antd/src/views/property/assetManage/procurementApplication/procurementApplication-modal.vue
index ef0877e0..58bca9c9 100644
--- a/apps/web-antd/src/views/property/assetManage/procurementApplication/procurementApplication-modal.vue
+++ b/apps/web-antd/src/views/property/assetManage/procurementApplication/procurementApplication-modal.vue
@@ -1,36 +1,44 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
+import { Button } from 'ant-design-vue';
 import { $t } from '@vben/locales';
 import { cloneDeep } from '@vben/utils';
-
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { useVbenForm } from '#/adapter/form';
+import { procurementApplicationInfo } from '#/api/property/assetManage/procurementApplication';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
+import { modalSchema } from './data';
+import procurementDetailModal from './procurement-detail-modal.vue';
+import { detailColumns } from './data';
 import {
   procurementApplicationAdd,
-  procurementApplicationInfo,
   procurementApplicationUpdate,
 } from '#/api/property/assetManage/procurementApplication';
-import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
-
-import { modalSchema } from './data';
+import { useUserStore } from '@vben/stores';
 
+const userStore = useUserStore();
 const emit = defineEmits<{ reload: [] }>();
-
+const detailData = ref<any[]>([]); //采购资产详情
 const isUpdate = ref(false);
+const isDetail = ref(false);
 const title = computed(() => {
+  if (isDetail.value) {
+    return '采购申请详情';
+  }
   return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
 });
 
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
     // 默认占满两列
-    formItemClass: 'col-span-2',
+    formItemClass: 'col-span-1',
     // 默认label宽度 px
     labelWidth: 80,
     // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
+      disabled: computed(() => isDetail.value),
     },
   },
   schema: modalSchema(),
@@ -47,7 +55,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
 
 const [BasicModal, modalApi] = useVbenModal({
   // 在这里更改宽度
-  class: 'w-[550px]',
+  class: 'w-[70%]',
   fullscreenButton: false,
   onBeforeClose,
   onClosed: handleClosed,
@@ -57,21 +65,77 @@ const [BasicModal, modalApi] = useVbenModal({
       return null;
     }
     modalApi.modalLoading(true);
-
     const { id } = modalApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
-
+    // 只有在有id时才设置为详情模式（用于详情查看）
+    isDetail.value = !!id;
     if (isUpdate.value && id) {
       const record = await procurementApplicationInfo(id);
       await formApi.setValues(record);
+
+      // 在详情模式下，设置资产详情数据到表格
+      if (isDetail.value && record.capitalInfoVoList) {
+        detailData.value = record.capitalInfoVoList;
+        // 更新表格数据
+        if (tableApi.grid && tableApi.grid.loadData) {
+          tableApi.grid.loadData(detailData.value);
+        }
+      }
+    } else {
+      // 新增模式
+      isDetail.value = false; // 确保新增时不是详情模式
+      await formApi.setValues({
+        applicat: userStore.userInfo?.userId, // 存放ID
+        applicatDisplay: userStore.userInfo?.realName, // 显示姓名
+      });
     }
     await markInitialized();
 
     modalApi.modalLoading(false);
   },
 });
+const [ProcurementDetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: procurementDetailModal,
+});
 
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+  columns: detailColumns,
+  data: detailData.value,
+  // height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'domain-procurementApplication-index',
+  toolbarConfig: {
+    // 隐藏"刷新/重置"按钮（对应 redo）
+    refresh: false,
+    zoom: false, // 显示全屏
+    custom: false, // 隐藏列设置
+  },
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  gridOptions,
+});
 async function handleConfirm() {
+  // 如果是详情模式，直接关闭弹窗
+  if (isDetail.value) {
+    modalApi.close();
+    return;
+  }
+
   try {
     modalApi.lock(true);
     const { valid } = await formApi.validate();
@@ -82,7 +146,11 @@ async function handleConfirm() {
     const data = cloneDeep(await formApi.getValues());
     await (isUpdate.value
       ? procurementApplicationUpdate(data)
-      : procurementApplicationAdd(data));
+      : procurementApplicationAdd({
+          ...data,
+          capitalInfoBolist: detailData.value,
+        }));
+
     resetInitialized();
     emit('reload');
     modalApi.close();
@@ -97,10 +165,28 @@ async function handleClosed() {
   await formApi.resetForm();
   resetInitialized();
 }
+function handleDetailReload(data: any) {
+  detailData.value.push(data);
+}
+function handleEditDetailReload() {}
+//添加物资
+function handleAddDetail() {
+  detailModalApi.setData({});
+  detailModalApi.open();
+}
 </script>
 
 <template>
   <BasicModal :title="title">
     <BasicForm />
+    <div class="flex items-center justify-between" v-if="!isDetail">
+      <div>采购物资：</div>
+      <Button type="primary" @click="handleAddDetail">选择物资</Button>
+    </div>
+    <BasicTable />
+    <ProcurementDetailModal
+      @reload="handleDetailReload"
+      @editReload="handleEditDetailReload"
+    />
   </BasicModal>
 </template>
diff --git a/apps/web-antd/src/views/videoSystem/deviceManagement/components/machine-type-tree.vue b/apps/web-antd/src/views/videoSystem/deviceManagement/components/machine-type-tree.vue
new file mode 100644
index 00000000..3d27df8a
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/deviceManagement/components/machine-type-tree.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import type { DeptTree } from '#/api/system/user/model';
+import { onMounted, ref } from 'vue';
+import { SyncOutlined } from '@ant-design/icons-vue';
+import { Empty, InputSearch, Skeleton, Tree } from 'ant-design-vue';
+import { getMachineTypeTree } from '#/api/property/machineType';
+defineOptions({ inheritAttrs: false });
+
+withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });
+
+const emit = defineEmits<{
+  /**
+   * 点击刷新按钮的事件
+   */
+  reload: [];
+  /**
+   * 点击节点的事件
+   */
+  select: [];
+}>();
+
+const selectDeptId = defineModel('selectDeptId', {
+  required: true,
+  type: Array as PropType<string[]>,
+});
+
+const searchValue = defineModel('searchValue', {
+  type: String,
+  default: '',
+});
+
+/** 数据源 */
+type DeptTreeArray = DeptTree[];
+const deptTreeArray = ref<DeptTreeArray>([]);
+/** 骨架屏加载 */
+const showTreeSkeleton = ref<boolean>(true);
+function convertTreeLabel(list: any) {
+  return list.map((item: any) => ({
+    ...item,
+    label: item.machineTypeName,
+    children: item.children ? convertTreeLabel(item.children) : [],
+  }));
+}
+async function loadTree() {
+  showTreeSkeleton.value = true;
+  searchValue.value = '';
+  // selectDeptId.value = []; // 移除这行，刷新树时不清空选中
+  const ret = await getMachineTypeTree();
+  deptTreeArray.value = convertTreeLabel(ret);
+  showTreeSkeleton.value = false;
+}
+
+async function handleReload() {
+  await loadTree();
+  emit('reload');
+}
+defineExpose({
+  handleReload,
+});
+onMounted(loadTree);
+</script>
+
+<template>
+  <div :class="$attrs.class">
+    <Skeleton
+      :loading="showTreeSkeleton"
+      :paragraph="{ rows: 8 }"
+      active
+      class="p-[8px]"
+    >
+      <div
+        class="bg-background flex h-full flex-col overflow-y-auto rounded-lg"
+      >
+        <!-- 固定在顶部 必须加上bg-background背景色 否则会产生'穿透'效果 -->
+        <div
+          v-if="showSearch"
+          class="bg-background z-100 sticky left-0 top-0 p-[8px]"
+        >
+          <InputSearch
+            v-model:value="searchValue"
+            :placeholder="$t('pages.common.search')"
+            size="small"
+          >
+            <template #enterButton>
+              <a-button @click="handleReload">
+                <SyncOutlined class="text-primary" />
+              </a-button>
+            </template>
+          </InputSearch>
+        </div>
+        <div class="h-full overflow-x-hidden px-[8px]">
+          <Tree
+            v-bind="$attrs"
+            v-model:selected-keys="selectDeptId"
+            :class="$attrs.class"
+            :field-names="{ title: 'label', key: 'id' }"
+            :show-line="{ showLeafIcon: false }"
+            :tree-data="deptTreeArray"
+            :virtual="false"
+            default-expand-all
+            @select="$emit('select')"
+          >
+            <template #title="{ label }">
+              <span v-if="label.indexOf(searchValue) > -1">
+                {{ label.substring(0, label.indexOf(searchValue)) }}
+                <span style="color: #f50">{{ searchValue }}</span>
+                {{
+                  label.substring(
+                    label.indexOf(searchValue) + searchValue.length,
+                  )
+                }}
+              </span>
+              <span v-else>{{ label }}</span>
+            </template>
+          </Tree>
+        </div>
+      </div>
+    </Skeleton>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/deviceManagement/deviceList/data.ts b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceList/data.ts
new file mode 100644
index 00000000..e2c2e63e
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceList/data.ts
@@ -0,0 +1,216 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getDictOptions } from '#/utils/dict';
+import { renderDict } from '#/utils/render';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'machineName',
+    label: '设备名称',
+  },
+  {
+    component: 'Input',
+    fieldName: 'machineCode',
+    label: '设备编码',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('wy_sbsyzt'),
+    },
+    fieldName: 'state',
+    label: '使用状态',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '设备名称',
+    field: 'machineName',
+    minWidth: 180,
+  },
+  {
+    title: '设备编码',
+    field: 'machineCode',
+    width: 100,
+  },
+  {
+    title: '设备品牌',
+    field: 'machineBrand',
+    width: 100,
+  },
+  // {
+  //   title: '设备类型',
+  //   field: 'machineTypeId',
+  //   width:100
+  // },
+  // {
+  //   title: '位置详情',
+  //   field: 'locationId',
+  //   width:100
+  // },
+  {
+    title: '采购价格',
+    field: 'purchasePrice',
+    width: 100,
+  },
+  {
+    title: '启用时间',
+    field: 'activationTime',
+    width: 100,
+  },
+  {
+    title: '保修截至时间',
+    field: 'deadline',
+    width: 100,
+  },
+  {
+    title: '使用年限',
+    field: 'serviceLife',
+    width: 100,
+  },
+  {
+    title: '保修周期',
+    field: 'maintenanceCycle',
+    width: 100,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.maintenanceCycle, 'wy_sbbxzq');
+      },
+    },
+  },
+  {
+    title: '使用状态',
+    field: 'state',
+    width: 100,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.state, 'wy_sbsyzt');
+      },
+    },
+  },
+  // {
+  //   title: '责任人',
+  //   field: 'personId',
+  //   width:100
+  // },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '主键',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '设备名称',
+    fieldName: 'machineName',
+    component: 'Input',
+    rules: 'required',
+    formItemClass: 'col-span-2',
+  },
+  {
+    label: '设备编码',
+    fieldName: 'machineCode',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '设备品牌',
+    fieldName: 'machineBrand',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '设备类型',
+    fieldName: 'machineTypeId',
+    component: 'TreeSelect',
+    rules: 'selectRequired',
+    formItemClass: 'col-span-2',
+  },
+  {
+    label: '位置详情',
+    fieldName: 'locationId',
+    component: 'ApiSelect',
+    rules: 'selectRequired',
+    formItemClass: 'col-span-2',
+  },
+  {
+    label: '采购价格',
+    fieldName: 'purchasePrice',
+    component: 'InputNumber',
+    componentProps: {
+      min: 0,
+      precision: 2,
+    },
+    rules: 'required',
+  },
+  {
+    label: '启用时间',
+    fieldName: 'activationTime',
+    component: 'DatePicker',
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD',
+    },
+    rules: 'required',
+  },
+  {
+    label: '保修截至时间',
+    fieldName: 'deadline',
+    component: 'DatePicker',
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD',
+    },
+    rules: 'required',
+  },
+  {
+    label: '使用年限',
+    fieldName: 'serviceLife',
+    component: 'InputNumber',
+    componentProps: {
+      min: 1,
+      precision: 0,
+    },
+    rules: 'required',
+  },
+  {
+    label: '保修周期',
+    fieldName: 'maintenanceCycle',
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('wy_sbbxzq'),
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '使用状态',
+    fieldName: 'state',
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('wy_sbsyzt'),
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '责任人',
+    fieldName: 'personId',
+    component: 'ApiSelect',
+    rules: 'selectRequired',
+    formItemClass: 'col-span-2',
+  },
+];
diff --git a/apps/web-antd/src/views/videoSystem/deviceManagement/deviceList/index.vue b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceList/index.vue
new file mode 100644
index 00000000..8aabf056
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceList/index.vue
@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+
+import {
+  useVbenVxeGrid,
+  vxeCheckboxChecked,
+  type VxeGridProps,
+} from '#/adapter/vxe-table';
+
+import {
+  machineExport,
+  machineList,
+  machineRemove,
+} from '#/api/property/equipmentManagement/machine';
+import type { MachineForm } from '#/api/property/equipmentManagement/machine/model';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import machineModal from './machine-modal.vue';
+import { columns, querySchema } from './data';
+import MachineTypeTree from '../components/machine-type-tree.vue';
+import machineDetail from './machine-detail.vue';
+import { ref } from 'vue';
+
+const selectTypeId = ref([]);
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  handleReset: async () => {
+    selectTypeId.value = [];
+    const { formApi, reload } = tableApi;
+    await formApi.resetForm();
+    const formValues = formApi.form.values;
+    formApi.setLatestSubmissionValues(formValues);
+    await reload(formValues);
+  },
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        if (selectTypeId.value && selectTypeId.value.length) {
+          formValues.machineTypeId = selectTypeId.value[0];
+        } else {
+          formValues.machineTypeId = [];
+        }
+        return await machineList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'property-machine-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [MachineModal, modalApi] = useVbenModal({
+  connectedComponent: machineModal,
+});
+
+const [MachineDetail, detailApi] = useVbenModal({
+  connectedComponent: machineDetail,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(row: Required<MachineForm>) {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+
+async function handleInfo(row: Required<MachineForm>) {
+  detailApi.setData({ id: row.id });
+  detailApi.open();
+}
+
+async function handleDelete(row: Required<MachineForm>) {
+  await machineRemove(row.id);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<MachineForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await machineRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(
+    machineExport,
+    '设备列表数据',
+    tableApi.formApi.form.values,
+    {
+      fieldMappingTime: formOptions.fieldMappingTime,
+    },
+  );
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <div class="flex h-full gap-[8px]">
+      <MachineTypeTree
+        v-model:select-dept-id="selectTypeId"
+        class="w-[260px]"
+        @reload="() => tableApi.reload()"
+        @select="() => tableApi.reload()"
+      />
+      <BasicTable class="flex-1 overflow-hidden" table-title="设备列表列表">
+        <template #toolbar-tools>
+          <Space>
+            <a-button
+              v-access:code="['property:machine:export']"
+              @click="handleDownloadExcel"
+            >
+              {{ $t('pages.common.export') }}
+            </a-button>
+            <a-button
+              :disabled="!vxeCheckboxChecked(tableApi)"
+              danger
+              type="primary"
+              v-access:code="['property:machine:remove']"
+              @click="handleMultiDelete"
+            >
+              {{ $t('pages.common.delete') }}
+            </a-button>
+            <a-button
+              type="primary"
+              v-access:code="['property:machine:add']"
+              @click="handleAdd"
+            >
+              {{ $t('pages.common.add') }}
+            </a-button>
+          </Space>
+        </template>
+        <template #action="{ row }">
+          <Space>
+            <ghost-button
+              v-access:code="['property:machine:info']"
+              @click.stop="handleInfo(row)"
+            >
+              {{ $t('pages.common.info') }}
+            </ghost-button>
+            <ghost-button
+              v-access:code="['property:machine:edit']"
+              @click.stop="handleEdit(row)"
+            >
+              {{ $t('pages.common.edit') }}
+            </ghost-button>
+            <Popconfirm
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              title="确认删除？"
+              @confirm="handleDelete(row)"
+            >
+              <ghost-button
+                danger
+                v-access:code="['property:machine:remove']"
+                @click.stop=""
+              >
+                {{ $t('pages.common.delete') }}
+              </ghost-button>
+            </Popconfirm>
+          </Space>
+        </template>
+      </BasicTable>
+    </div>
+    <MachineModal @reload="tableApi.query()" />
+    <MachineDetail />
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/deviceManagement/deviceList/machine-detail.vue b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceList/machine-detail.vue
new file mode 100644
index 00000000..3b06244a
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceList/machine-detail.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import { useVbenModal } from '@vben/common-ui';
+import { Descriptions, DescriptionsItem } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { renderDict } from '#/utils/render';
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+import { CheckboxGroup } from 'ant-design-vue';
+import { getDictOptions } from '#/utils/dict';
+import { machineInfo } from '#/api/property/equipmentManagement/machine';
+import type { MachineVO } from '#/api/property/equipmentManagement/machine/model';
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    machineDetail.value = null;
+  },
+});
+
+const machineDetail = shallowRef<null | MachineVO>(null);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const { id } = modalApi.getData() as { id: number | string };
+  machineDetail.value = await machineInfo(id);
+  modalApi.modalLoading(false);
+}
+</script>
+
+<template>
+  <BasicModal
+    :footer="false"
+    :fullscreen-button="false"
+    title="设备详情"
+    class="w-[70%]"
+  >
+    <Descriptions
+      v-if="machineDetail"
+      size="small"
+      :column="2"
+      bordered
+      :labelStyle="{ width: '120px' }"
+    >
+      <DescriptionsItem label="设备名称">
+        {{ machineDetail.machineName }}
+      </DescriptionsItem>
+      <DescriptionsItem label="设备编码">
+        {{ machineDetail.machineCode }}
+      </DescriptionsItem>
+      <DescriptionsItem label="设备品牌">
+        {{ machineDetail.machineBrand }}
+      </DescriptionsItem>
+      <DescriptionsItem label="设备类型">
+        {{ machineDetail.machineTypeId }}
+      </DescriptionsItem>
+      <DescriptionsItem label="位置详情">
+        {{ machineDetail.locationId }}
+      </DescriptionsItem>
+      <DescriptionsItem label="采购价格">
+        {{ machineDetail.purchasePrice }}
+      </DescriptionsItem>
+      <DescriptionsItem label="启用时间">
+        {{ machineDetail.activationTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="保修截至时间">
+        {{ machineDetail.deadline }}
+      </DescriptionsItem>
+      <DescriptionsItem label="使用年限(年)">
+        {{ machineDetail.serviceLife }}
+      </DescriptionsItem>
+
+      <DescriptionsItem
+        label="保修周期"
+        v-if="machineDetail.maintenanceCycle != null"
+      >
+        <component
+          :is="renderDict(machineDetail.maintenanceCycle, 'wy_sbbxzq')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="使用状态" v-if="machineDetail.state != null">
+        <component :is="renderDict(machineDetail.state, 'wy_sbsyzt')" />
+      </DescriptionsItem>
+      <DescriptionsItem label="责任人">
+        {{ machineDetail.personId }}
+      </DescriptionsItem>
+    </Descriptions>
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/deviceManagement/deviceList/machine-modal.vue b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceList/machine-modal.vue
new file mode 100644
index 00000000..13cdef7d
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceList/machine-modal.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  machineAdd,
+  machineInfo,
+  machineUpdate,
+} from '#/api/property/equipmentManagement/machine';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { modalSchema } from './data';
+import { personList } from '#/api/property/resident/person';
+import { renderDictValue } from '#/utils/render';
+import { getMachineTypeTree } from '#/api/property/machineType';
+import { deviceLocationList } from '#/api/property/equipmentManagement/deviceLocation';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满一列
+    formItemClass: 'col-span-1',
+    // 默认label宽度 px
+    labelWidth: 110,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[70%]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    await queryPersonData();
+    await setupTypeSelect();
+    await queryLocationData();
+    const { id } = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await machineInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? machineUpdate(data) : machineAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+
+/**
+ * 查询负责人数据
+ */
+async function queryPersonData() {
+  let params = {
+    pageSize: 1000,
+    pageNum: 1,
+  };
+  const res = await personList(params);
+  const options = res.rows.map((user) => ({
+    label:
+      user.userName +
+      '-' +
+      renderDictValue(user.gender, 'sys_user_sex') +
+      '-' +
+      user.phone +
+      '-' +
+      user.unitName,
+    value: user.id,
+  }));
+  formApi.updateSchema([
+    {
+      componentProps: () => ({
+        options: options,
+        showSearch: true,
+        optionFilterProp: 'label',
+        optionLabelProp: 'label',
+      }),
+      fieldName: 'personId',
+    },
+  ]);
+}
+
+/**
+ *初始化设别类型数据
+ */
+async function setupTypeSelect() {
+  const typeList = await getMachineTypeTree();
+  formApi.updateSchema([
+    {
+      componentProps: () => ({
+        class: 'w-full',
+        fieldNames: {
+          key: 'id',
+          label: 'machineTypeName',
+          value: 'id',
+          children: 'children',
+        },
+        placeholder: '请选择',
+        showSearch: true,
+        treeData: typeList,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'label',
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'machineTypeName',
+      }),
+      fieldName: 'machineTypeId',
+    },
+  ]);
+}
+/**
+ * 查询设备位置数据
+ */
+async function queryLocationData() {
+  let params = {
+    pageSize: 1000,
+    pageNum: 1,
+  };
+  const res = await deviceLocationList(params);
+  const options = res.rows.map((item) => ({
+    label:
+      item.locationName +
+      '-' +
+      renderDictValue(item.locationType, 'pro_location_type'),
+    value: item.id,
+  }));
+  formApi.updateSchema([
+    {
+      componentProps: () => ({
+        options: options,
+        showSearch: true,
+        optionFilterProp: 'label',
+        optionLabelProp: 'label',
+      }),
+      fieldName: 'locationId',
+    },
+  ]);
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/deviceManagement/deviceLocation/data.ts b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceLocation/data.ts
new file mode 100644
index 00000000..6b03087f
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceLocation/data.ts
@@ -0,0 +1,94 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getDictOptions } from '#/utils/dict';
+import { renderDict } from '#/utils/render';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'locationName',
+    label: '位置名称',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('pro_location_type'),
+    },
+    fieldName: 'locationType',
+    label: '位置类型',
+  },
+];
+
+// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+// export const columns: () => VxeGridProps['columns'] = () => [
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '位置编码',
+    field: 'locationCode',
+  },
+  {
+    title: '位置名称',
+    field: 'locationName',
+  },
+
+  {
+    title: '位置类型',
+    field: 'locationType',
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.locationType, 'pro_location_type');
+      },
+    },
+  },
+  {
+    title: '备注',
+    field: 'remark',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
+// export const modalSchema: FormSchemaGetter = () => [
+//   {
+//     label: '主键',
+//     fieldName: 'id',
+//     component: 'Input',
+//     dependencies: {
+//       show: () => false,
+//       triggerFields: [''],
+//     },
+//   },
+//   {
+//     label: '位置名称',
+//     fieldName: 'locationName',
+//     component: 'Input',
+//     rules: 'required',
+//   },
+//   {
+//     label: '位置类型',
+//     fieldName: 'locationType',
+//     component: 'Select',
+//     componentProps: {
+//       options: getDictOptions('pro_location_type'),
+//     },
+//     rules: 'selectRequired',
+//   },
+//   {
+//     component: 'TreeSelect',
+//     fieldName: 'locationObject',
+//     defaultValue: undefined,
+//     label: '位置对象',
+//     rules: 'selectRequired',
+//   },
+//   {
+//     label: '备注',
+//     fieldName: 'remark',
+//     component: 'Textarea',
+//   },
+// ];
diff --git a/apps/web-antd/src/views/videoSystem/deviceManagement/deviceLocation/deviceLocation-detail.vue b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceLocation/deviceLocation-detail.vue
new file mode 100644
index 00000000..34c8035d
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceLocation/deviceLocation-detail.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { DeviceLocationVO } from '#/api/property/equipmentManagement/deviceLocation/model';
+import { shallowRef } from 'vue';
+import { useVbenModal } from '@vben/common-ui';
+import { Descriptions, DescriptionsItem } from 'ant-design-vue';
+import { deviceLocationInfo } from '#/api/property/equipmentManagement/deviceLocation';
+import { renderDict } from '#/utils/render';
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    deviceLocationDetail.value = null;
+  },
+});
+
+const deviceLocationDetail = shallowRef<null | DeviceLocationVO>(null);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const { id } = modalApi.getData() as { id: number | string };
+  const response = await deviceLocationInfo(id);
+  deviceLocationDetail.value = response;
+  modalApi.modalLoading(false);
+}
+</script>
+
+<template>
+  <BasicModal
+    :footer="false"
+    :fullscreen-button="false"
+    title="查看收费"
+    class="w-[70%]"
+  >
+    <Descriptions
+      v-if="deviceLocationDetail"
+      size="small"
+      :column="2"
+      bordered
+      :labelStyle="{ width: '100px' }"
+    >
+      <DescriptionsItem label="位置编码">
+        {{ deviceLocationDetail.locationCode }}
+      </DescriptionsItem>
+      <DescriptionsItem label="位置名称">
+        {{ deviceLocationDetail.locationName }}
+      </DescriptionsItem>
+      <DescriptionsItem
+        label="位置类型"
+        v-if="deviceLocationDetail.locationType != null"
+      >
+        <component
+          :is="
+            renderDict(deviceLocationDetail.locationType, 'pro_location_type')
+          "
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="位置对象">
+        {{ deviceLocationDetail.locationObjName }}
+      </DescriptionsItem>
+      <DescriptionsItem label="备注">
+        {{ deviceLocationDetail.remark }}
+      </DescriptionsItem>
+    </Descriptions>
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/deviceManagement/deviceLocation/deviceLocation-modal.vue b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceLocation/deviceLocation-modal.vue
new file mode 100644
index 00000000..cbcd7498
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceLocation/deviceLocation-modal.vue
@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep, handleNode } from '@vben/utils';
+import { useVbenForm } from '#/adapter/form';
+import {
+  deviceLocationAdd,
+  deviceLocationInfo,
+  deviceLocationUpdate,
+} from '#/api/property/equipmentManagement/deviceLocation';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+// import { modalSchema } from './data';
+import { communityTree } from '#/api/property/community';
+import { getDictOptions } from '#/utils/dict';
+
+const emit = defineEmits<{ reload: [] }>();
+const isUpdate = ref(false);
+
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const modalSchema = [
+  {
+    label: '主键',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '位置名称',
+    fieldName: 'locationName',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '位置类型',
+    fieldName: 'locationType',
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('pro_location_type'),
+      onChange: async (value: string) => {
+        if (value) {
+          await setupCommunitySelect(value);
+          await formApi.setFieldValue('locationObjId', null);
+        }
+      },
+    },
+    rules: 'selectRequired',
+  },
+  {
+    component: 'TreeSelect',
+    fieldName: 'locationObjId',
+    defaultValue: undefined,
+    label: '位置对象',
+    dependencies: {
+      show: (formValue) => formValue.locationType !== undefined,
+      triggerFields: ['locationType'],
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Textarea',
+  },
+];
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    const { id } = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+    if (isUpdate.value && id) {
+      const record = await deviceLocationInfo(id);
+      await setupCommunitySelect(record.locationType);
+      record.locationType = record.locationType?.toString();
+      await formApi.setValues(record);
+    }
+
+    await markInitialized();
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value
+      ? deviceLocationUpdate(data)
+      : deviceLocationAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+
+async function setupCommunitySelect(value: any) {
+  const areaList = await communityTree(Number(value) + 1);
+  const splitStr = '/';
+  handleNode(areaList, 'label', splitStr, function (node: any) {
+    if (node.level != Number(value) + 1) {
+      node.disabled = true;
+    }
+  });
+  formApi.updateSchema([
+    {
+      componentProps: () => ({
+        class: 'w-full',
+        fieldNames: {
+          key: 'id',
+          label: 'label',
+          value: 'code',
+          children: 'children',
+        },
+        placeholder: '请选择',
+        showSearch: true,
+        treeData: areaList,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'label',
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      }),
+      fieldName: 'locationObjId',
+    },
+  ]);
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/deviceManagement/deviceLocation/index.vue b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceLocation/index.vue
new file mode 100644
index 00000000..5640999e
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceLocation/index.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import {
+  useVbenVxeGrid,
+  vxeCheckboxChecked,
+  type VxeGridProps,
+} from '#/adapter/vxe-table';
+import {
+  deviceLocationList,
+  deviceLocationRemove,
+} from '#/api/property/equipmentManagement/deviceLocation';
+import type { DeviceLocationForm } from '#/api/property/equipmentManagement/deviceLocation/model';
+import deviceLocationModal from './deviceLocation-modal.vue';
+import deviceLocationDetail from './deviceLocation-detail.vue';
+import { columns, querySchema } from './data';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await deviceLocationList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'property-deviceLocation-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [DeviceLocationModal, modalApi] = useVbenModal({
+  connectedComponent: deviceLocationModal,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(row: Required<DeviceLocationForm>) {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+
+async function handleDelete(row: Required<DeviceLocationForm>) {
+  await deviceLocationRemove(row.id);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<DeviceLocationForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deviceLocationRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+const [deviceLocationDetailModal, deviceLocationDetailApi] = useVbenModal({
+  connectedComponent: deviceLocationDetail,
+});
+
+async function handleInfo(row: Required<DeviceLocationForm>) {
+  deviceLocationDetailApi.setData({ id: row.id });
+  deviceLocationDetailApi.open();
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="设备位置列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['property:deviceLocation:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['property:deviceLocation:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button @click.stop="handleInfo(row)">
+            {{ $t('pages.common.info') }}
+          </ghost-button>
+          <ghost-button
+            v-access:code="['property:deviceLocation:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['property:deviceLocation:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <DeviceLocationModal @reload="tableApi.query()" />
+    <deviceLocationDetailModal />
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/deviceManagement/deviceType/data.ts b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceType/data.ts
new file mode 100644
index 00000000..f0cdb36a
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceType/data.ts
@@ -0,0 +1,125 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getDictOptions } from '#/utils/dict';
+import { renderDict } from '#/utils/render';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'machineTypeName',
+    label: '类型名称',
+    labelWidth: 100,
+  },
+  {
+    component: 'Input',
+    fieldName: 'machineTypeCode',
+    label: '类型编号',
+    labelWidth: 100,
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      // 可选从DictEnum中获取 DictEnum.WY_KG 便于维护
+      options: getDictOptions('wy_kg'),
+    },
+    fieldName: 'isEnable',
+    label: '是否启用',
+    labelWidth: 100,
+  },
+];
+
+// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+// export const columns: () => VxeGridProps['columns'] = () => [
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '序号',
+    field: 'id',
+    width: 60,
+    slots: {
+      default: ({ rowIndex }) => {
+        return (rowIndex + 1).toString();
+      },
+    },
+  },
+  {
+    title: '类型名称',
+    field: 'machineTypeName',
+    minWidth: 180,
+  },
+  {
+    title: '类型编号',
+    field: 'machineTypeCode',
+    minWidth: 180,
+  },
+  {
+    title: '是否启用',
+    field: 'isEnable',
+    slots: {
+      default: ({ row }) => {
+        // 可选从DictEnum中获取 DictEnum.WY_KG 便于维护
+        return renderDict(row.isEnable, 'wy_kg');
+      },
+    },
+  },
+  {
+    title: '备注',
+    field: 'remark',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '主键',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '类型名称',
+    fieldName: 'machineTypeName',
+    component: 'Input',
+    rules: 'required',
+    labelWidth: 100,
+  },
+  {
+    label: '类型编号',
+    fieldName: 'machineTypeCode',
+    component: 'Input',
+    rules: 'required',
+    labelWidth: 100,
+  },
+  {
+    label: '上级类型',
+    fieldName: 'parentTypeId',
+    component: 'TreeSelect',
+    defaultValue: undefined,
+    labelWidth: 100,
+  },
+  {
+    label: '是否启用',
+    fieldName: 'isEnable',
+    component: 'Select',
+    componentProps: {
+      // 可选从DictEnum中获取 DictEnum.WY_KG 便于维护
+      options: getDictOptions('wy_kg'),
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Input',
+  },
+];
diff --git a/apps/web-antd/src/views/videoSystem/deviceManagement/deviceType/index.vue b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceType/index.vue
new file mode 100644
index 00000000..93b711b8
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceType/index.vue
@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import { ref, onMounted, watch } from 'vue';
+
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import MachineTypeTree from '../components/machine-type-tree.vue';
+import {
+  useVbenVxeGrid,
+  vxeCheckboxChecked,
+  type VxeGridProps,
+} from '#/adapter/vxe-table';
+
+import {
+  machineTypeExport,
+  machineTypeList,
+  machineTypeInfo,
+  getMachineTypeTree,
+  machineTypeRemove,
+} from '#/api/property/machineType';
+import type { MachineTypeForm } from '#/api/property/machineType/model';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import machineTypeModal from './machineType-modal.vue';
+import { columns } from './data';
+const selectDeptId = ref<string[]>([]);
+
+// 新增：详情数据
+const detailData = ref<any>(null);
+interface MachineTypeTree {
+  id: number;
+  /**
+   * antd组件必须要这个属性 实际是没有这个属性的
+   */
+  key: string;
+  parentId: number;
+  label: string;
+  weight: number;
+  children?: MachineTypeTree[];
+}
+interface MachineTypeTreeData {
+  id: number;
+  label: string;
+  children?: MachineTypeTreeData[];
+}
+async function loadDetail() {
+  // 这里假设 selectDeptId 选中后加载详情，否则加载第一个
+  let id: any = selectDeptId.value[0];
+  if (!id) {
+    // 可选：默认加载第一个类型详情
+    const res: MachineTypeTree[] = await getMachineTypeTree();
+    if (res.length > 0 && res[0]) {
+      id = res[0].id;
+    }
+  }
+  if (id) {
+    // 获取详情接口
+    const { machineTypeInfo } = await import('#/api/property/machineType');
+    detailData.value = await machineTypeInfo(id);
+  } else {
+    detailData.value = null;
+  }
+}
+
+onMounted(loadDetail);
+
+watch(selectDeptId, loadDetail);
+
+const treeRef = ref();
+
+function reloadTree() {
+  treeRef.value?.handleReload?.();
+}
+
+const [MachineTypeModal, modalApi] = useVbenModal({
+  connectedComponent: machineTypeModal,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit() {
+  if (detailData.value && detailData.value.id) {
+    modalApi.setData({ id: detailData.value.id });
+    modalApi.open();
+  }
+}
+
+async function handleDelete() {
+  if (detailData.value && detailData.value.id) {
+    await machineTypeRemove(detailData.value.id);
+    reloadTree();
+    await loadDetail();
+  }
+}
+// async function handleDelete() {
+//   if (detailData.value && detailData.value.id) {
+//     const currentId = detailData.value.id;
+//     // 1. 获取完整树
+//     const tree = await getMachineTypeTree();
+
+//     // 2. 递归查找当前节点的父节点和同级节点
+//     function findParentAndSiblings(list:any, targetId:any, parent:any = null) {
+//       for (const node of list) {
+//         if (node.id === targetId) {
+//           return { parent, siblings: list };
+//         }
+//         if (node.children && node.children.length) {
+//           const res:any = findParentAndSiblings(node.children, targetId, node);
+//           if (res) return res;
+//         }
+//       }
+//       return null;
+//     }
+//     const found = findParentAndSiblings(tree, currentId);
+
+//     // 3. 删除
+//     await machineTypeRemove(currentId);
+
+//     // 4. 选中逻辑
+//     let nextId = null;
+//     if (found) {
+//       // 同级第一个（排除自己）
+//       const sameLevel = found.siblings.filter((n:any) => n.id !== currentId);
+//       if (sameLevel.length > 0) {
+//         nextId = sameLevel[0].id;
+//       } else if (found.parent) {
+//         nextId = found.parent.id;
+//       }
+//     }
+//     // 5. 设置选中
+//     if (nextId) {
+//       selectDeptId.value = [nextId];
+//     } else {
+//       selectDeptId.value = [];
+//     }
+
+//     // 6. 刷新树和详情
+//     reloadTree();
+//     await loadDetail();
+//   }
+// }
+
+function handleDownloadExcel() {
+  commonDownloadExcel(
+    machineTypeExport,
+    '设备类型数据',
+    {},
+    {
+      fieldMappingTime: [],
+    },
+  );
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <div class="flex h-full gap-[8px]">
+      <MachineTypeTree
+        ref="treeRef"
+        v-model:select-dept-id="selectDeptId"
+        class="w-[260px]"
+        @reload="loadDetail"
+        @select="loadDetail"
+      />
+      <div class="flex-1">
+        <!-- 顶部操作按钮 -->
+        <div class="mb-4 flex gap-2">
+          <a-button
+            danger
+            type="primary"
+            v-access:code="['property:machineType:remove']"
+            @click="handleDelete"
+            :disabled="!detailData || !detailData.id"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['property:machineType:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+          <a-button
+            v-if="detailData && detailData.id"
+            type="default"
+            v-access:code="['property:machineType:edit']"
+            @click="handleEdit"
+          >
+            {{ $t('pages.common.edit') }}
+          </a-button>
+        </div>
+        <!-- 详情展示 -->
+        <a-card v-if="detailData" :title="detailData.machineTypeName">
+          <p><b>类型名称：</b>{{ detailData.machineTypeName }}</p>
+          <p><b>类型编号：</b>{{ detailData.machineTypeCode }}</p>
+          <p>
+            <b>是否启用：</b>{{ detailData.isEnable == '1' ? '启用' : '禁用' }}
+          </p>
+          <p><b>备注：</b>{{ detailData.remark || '-' }}</p>
+        </a-card>
+        <a-empty v-else description="暂无详情" />
+        <MachineTypeModal
+          @reload="
+            () => {
+              reloadTree();
+              loadDetail();
+            }
+          "
+        />
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/deviceManagement/deviceType/machineType-modal.vue b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceType/machineType-modal.vue
new file mode 100644
index 00000000..1ff558f3
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/deviceManagement/deviceType/machineType-modal.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep, handleNode, getPopupContainer } from '@vben/utils';
+import { useVbenForm } from '#/adapter/form';
+import {
+  machineTypeAdd,
+  machineTypeInfo,
+  machineTypeUpdate,
+} from '#/api/property/machineType';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+import { getMachineTypeTree } from '#/api/property/machineType';
+
+import { modalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    setupCommunitySelect();
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await machineTypeInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+async function setupCommunitySelect() {
+  const areaList = await getMachineTypeTree();
+  // 选中后显示在输入框的值 即父节点 / 子节点
+  // addFullName(areaList, 'areaName', ' / ');
+  const splitStr = '/';
+  handleNode(areaList, 'machineTypeName', splitStr, function (node: any) {
+    // if (node.level != 5) {
+    //   node.disabled = true;
+    // }
+  });
+  formApi.updateSchema([
+    {
+      componentProps: () => ({
+        class: 'w-full',
+        fieldNames: {
+          key: 'id',
+          label: 'machineTypeName',
+          value: 'id',
+          children: 'children',
+        },
+        getPopupContainer,
+        placeholder: '请选择设备类型',
+        showSearch: true,
+        treeData: areaList,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'machineTypeName',
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      }),
+      fieldName: 'parentTypeId',
+    },
+  ]);
+}
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? machineTypeUpdate(data) : machineTypeAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitGallery/data.ts b/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitGallery/data.ts
new file mode 100644
index 00000000..5817bee6
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitGallery/data.ts
@@ -0,0 +1,59 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'libName',
+    label: '库名称',
+  },
+];
+
+// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+// export const columns: () => VxeGridProps['columns'] = () => [
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+
+  {
+    title: '人员库编码',
+    field: 'id',
+  },
+  {
+    title: '人员库名称',
+    field: 'libName',
+  },
+  {
+    title: '人员库描述',
+    field: 'libDesc',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '主键',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '库名称',
+    fieldName: 'libName',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '描述',
+    fieldName: 'libDesc',
+    component: 'Input',
+  },
+];
diff --git a/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitGallery/index.vue b/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitGallery/index.vue
new file mode 100644
index 00000000..0a3f588e
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitGallery/index.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
+import type { PersonLibForm } from '#/api/sis/personLib/model';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space, Tag } from 'ant-design-vue';
+import {
+  personLibExport,
+  personLibList,
+  personLibRemove,
+} from '#/api/sis/personLib';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import { columns, querySchema } from './data';
+import personLibModal from './personLib-modal.vue';
+import libAuthModal from '#/views/sis/personLib/libAuth-modal.vue';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  // 不需要直接删除
+  // fieldMappingTime: [
+  //  [
+  //    'createTime',
+  //    ['params[beginTime]', 'params[endTime]'],
+  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  //  ],
+  // ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+  // columns: columns(),
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await personLibList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'sis-personLib-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [PersonLibModal, modalApi] = useVbenModal({
+  connectedComponent: personLibModal,
+});
+
+const [LibAuthModal, libAuthModalApi] = useVbenModal({
+  connectedComponent: libAuthModal,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(row: Required<PersonLibForm>) {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+
+async function handleDelete(row: Required<PersonLibForm>) {
+  await personLibRemove(row.id);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<PersonLibForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await personLibRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(
+    personLibExport,
+    '人像库数据',
+    tableApi.formApi.form.values,
+    {
+      fieldMappingTime: formOptions.fieldMappingTime,
+    },
+  );
+}
+
+function handleAuth(row: Required<PersonLibForm>) {
+  libAuthModalApi.setData({ id: row.id });
+  libAuthModalApi.open();
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="人像库列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['sis:personLib:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['sis:personLib:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['sis:personLib:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button @click.stop="handleAuth(row)"> 授权</ghost-button>
+
+          <ghost-button
+            v-access:code="['sis:personLib:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['sis:personLib:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+
+      <template #libType="{ row }">
+        <Tag v-if="row.libType == 1" color="#108ee9">人脸库</Tag>
+        <Tag v-else color="#2db7f5">工服库</Tag>
+      </template>
+    </BasicTable>
+    <PersonLibModal @reload="tableApi.query()" />
+    <LibAuthModal @reload="tableApi.query()" />
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitGallery/libAuth-modal.vue b/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitGallery/libAuth-modal.vue
new file mode 100644
index 00000000..db088285
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitGallery/libAuth-modal.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { useBeforeCloseDiff } from '#/utils/popup';
+import { message, Tree } from 'ant-design-vue';
+import {
+  authRecordAdd,
+  queryAuthDevice,
+  queryTree,
+} from '#/api/sis/authRecord';
+
+const emit = defineEmits<{ reload: [] }>();
+const title = ref('门禁授权');
+const { onBeforeClose } = useBeforeCloseDiff({});
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[700px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (isOpen) {
+      const { id } = modalApi.getData();
+      queryAuthDevice(id).then((res = []) => {
+        const arr: any[] = [];
+        res.forEach((item) => {
+          arr.push(item.deviceId);
+          checkedKeys.value = arr;
+        });
+      });
+    } else {
+      // 关闭时清除选中
+      checkedKeys.value = [];
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { id } = modalApi.getData();
+
+    if (eleIds.value.length === 0 && acIds.value.length === 0) {
+      message.error('请选择授权设备');
+      return;
+    }
+    // if (eleIds.value.length !== 0 && eleIds.value.length === 0) {
+    //   message.error('请选择授权设备')
+    //   return
+    // }
+    if (eleIds.value.length !== 0 && floorIds.value.length === 0) {
+      message.error('存在电梯未选中授权楼层，请选择！');
+      return;
+    }
+
+    const params = {
+      libId: id,
+      deviceIds: [acIds.value, eleIds.value, floorIds.value],
+    };
+    authRecordAdd(params);
+    // console.log(params)
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+function handleClosed() {
+  // await formApi.resetForm();
+  // resetInitialized();
+}
+
+const checkedKeys = ref<any[]>([]);
+const treeData = ref([]);
+const fieldNames = {
+  title: 'title',
+  label: 'label',
+  key: 'code',
+  children: 'children',
+};
+
+onMounted(() => {
+  loadDeviceTree();
+});
+
+function loadDeviceTree() {
+  queryTree().then((data: any) => {
+    treeData.value = data;
+  });
+}
+
+type Key = string | number;
+const eleIds = ref<any[]>([]);
+const acIds = ref<any[]>([]);
+const floorIds = ref<any[]>([]);
+function handleCheck(
+  checked: Key[] | { checked: Key[]; halfChecked: Key[] },
+  info: any,
+) {
+  if (info.checked) {
+    switch (info.node.label) {
+      case 'floor':
+        const floorArr: any[] = [info.node.code];
+        floorIds.value = floorIds.value.concat(floorArr);
+        break;
+      case 'accessControl':
+        const acArr: any[] = [info.node.code];
+        acIds.value = acIds.value.concat(acArr);
+        break;
+      case 'elevator':
+        const eleArr: any[] = [info.node.code];
+        eleIds.value = eleIds.value.concat(eleArr);
+        break;
+    }
+  } else {
+    switch (info.node.label) {
+      case 'floor':
+        floorIds.value = floorIds.value.filter(
+          (item) => item !== info.node.code,
+        );
+        break;
+      case 'accessControl':
+        acIds.value = acIds.value.filter((item) => item !== info.node.code);
+        break;
+      case 'elevator':
+        eleIds.value = eleIds.value.filter((item) => item !== info.node.code);
+        break;
+    }
+  }
+  console.log('floorIds', floorIds.value);
+  console.log('acIds', acIds.value);
+  console.log('eleIds', eleIds.value);
+  // checkData.handlfChecked = [0, 1, 2]
+  // checkedKeys.value = { checked: checkData.checked, halfChecked: checkData.handlfChecked }
+  // console.log("checked---", checked)
+  // console.log("halfChecked---", info)
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <div class="p-4">
+      <Tree
+        checkable
+        checkStrictly
+        :tree-data="treeData"
+        :fieldNames="fieldNames"
+        v-model:checkedKeys="checkedKeys"
+        :onCheck="handleCheck"
+      >
+      </Tree>
+    </div>
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitGallery/personLib-modal.vue b/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitGallery/personLib-modal.vue
new file mode 100644
index 00000000..2737d80c
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitGallery/personLib-modal.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  personLibAdd,
+  personLibInfo,
+  personLibUpdate,
+} from '#/api/sis/personLib';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { modalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await personLibInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? personLibUpdate(data) : personLibAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitManagement/data.tsx b/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitManagement/data.tsx
new file mode 100644
index 00000000..67267703
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitManagement/data.tsx
@@ -0,0 +1,175 @@
+import { type FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+
+import { getDictOptions } from '#/utils/dict';
+import { personLibList } from '#/api/sis/personLib';
+import type { PersonLibQuery, PersonLibVO } from '#/api/sis/personLib/model';
+
+let libArr: PersonLibVO[] = [];
+export const querySchema: FormSchemaGetter = () => [
+  {
+    label: '图片库',
+    fieldName: 'libId',
+    component: 'ApiSelect',
+    componentProps: {
+      resultField: 'list', // 根据API返回结构调整
+      labelField: 'libName',
+      valueField: 'id',
+      // immediate: true,
+      api: async () => {
+        if (!libArr || libArr.length == 0) {
+          const params: PersonLibQuery = {
+            pageNum: 1,
+            pageSize: 500,
+          };
+          const res = await personLibList(params);
+          libArr = res.rows;
+        }
+        return libArr;
+      },
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'imgName',
+    label: '人像名称',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_USER_SEX),
+    },
+    fieldName: 'sex',
+    label: '性别',
+  },
+];
+
+// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+// export const columns: () => VxeGridProps['columns'] = () => [
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  /*  {
+    title: '人员库编码',
+    field: 'libCode',
+  },*/
+  {
+    title: '人像名称',
+    field: 'imgName',
+  },
+  {
+    title: '性别',
+    field: 'sex',
+  },
+  {
+    title: '邮箱',
+    field: 'email',
+  },
+  {
+    title: '联系方式',
+    field: 'tel',
+  },
+  {
+    title: '证件类型',
+    field: 'certificateType',
+  },
+  {
+    title: '证件号码',
+    field: 'certificateNo',
+  },
+  {
+    title: '出生日期',
+    field: 'birthDate',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '图片库',
+    fieldName: 'libIds',
+    component: 'ApiSelect',
+    rules: 'required',
+    componentProps: {
+      resultField: 'list', // 根据API返回结构调整
+      labelField: 'libName',
+      valueField: 'id',
+      mode: 'multiple',
+      // immediate: true,
+      api: async () => {
+        if (!libArr || libArr.length == 0) {
+          const params: PersonLibQuery = {
+            pageNum: 1,
+            pageSize: 500,
+          };
+          const res = await personLibList(params);
+          libArr = res.rows;
+        }
+        return libArr;
+      },
+    },
+  },
+  {
+    label: '人像名称',
+    fieldName: 'imgName',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '性别',
+    fieldName: 'sex',
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_USER_SEX),
+    },
+  },
+  {
+    label: '邮箱',
+    fieldName: 'email',
+    component: 'Input',
+  },
+  {
+    label: '联系方式',
+    fieldName: 'tel',
+    component: 'Input',
+  },
+  {
+    label: '证件类型',
+    fieldName: 'certificateType',
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_CERTIFICATE_TYPE),
+    },
+  },
+  {
+    label: '证件号码',
+    fieldName: 'certificateNo',
+    component: 'Input',
+  },
+  {
+    label: '出生日期',
+    fieldName: 'birthDate',
+    component: 'Input',
+  },
+  {
+    label: '人像图片',
+    fieldName: 'imgOssId',
+    component: 'ImageUpload',
+    componentProps: {
+      // accept: 'image/*', // 可选拓展名或者mime类型 ,拼接
+      maxCount: 1, // 最大上传文件数 默认为1 为1会绑定为string而非string[]类型
+    },
+    formItemClass: 'col-span-2',
+  },
+];
diff --git a/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitManagement/imgAuth-modal.vue b/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitManagement/imgAuth-modal.vue
new file mode 100644
index 00000000..badb683c
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitManagement/imgAuth-modal.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { useBeforeCloseDiff } from '#/utils/popup';
+import { Switch, Transfer, Tree } from 'ant-design-vue';
+import { queryTree } from '#/api/sis/accessControl';
+import { authRecordAdd } from '#/api/sis/authRecord';
+import type { TreeNode } from '#/api/common';
+import type { AuthRecordForm } from '#/api/sis/authRecord/model';
+
+const emit = defineEmits<{ reload: [] }>();
+const title = ref('门禁授权');
+const { onBeforeClose } = useBeforeCloseDiff({});
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[700px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      checked.value = false;
+      targetKeys.value = []
+    }
+  }
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { ids, libId } = modalApi.getData() as {
+      ids?: number[] | string[];
+      libId: number | string;
+    };
+    const params: AuthRecordForm = {
+      libId,
+      imgIds: ids,
+      acIds: targetKeys.value,
+      issue: checked.value
+    };
+    const res = await authRecordAdd(params);
+    console.log(res);
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  // await formApi.resetForm();
+  // resetInitialized();
+}
+
+const checked = ref(false);
+const targetKeys = ref<string[]>([]);
+const dataSource = ref<TreeNode[]>([]);
+const treeData = ref<any[]>([]);
+
+onMounted(() => {
+  queryAcTree();
+});
+
+function handleTreeData(treeData: TreeNode[] | any[], datasource: TreeNode[]) {
+  treeData.forEach((item) => {
+    item.title = item.label;
+    item.key = item.code;
+    // 如果不是门禁，则
+    if (item.level != 5) {
+      item.disabled = true;
+    }
+    datasource.push(item);
+    if (item.children) {
+      handleTreeData(item.children, datasource);
+    }
+  });
+}
+
+function queryAcTree() {
+  queryTree().then((res = []) => {
+    const datasource: TreeNode[] = [];
+    handleTreeData(res, datasource);
+    dataSource.value = datasource;
+    treeData.value = res;
+  });
+}
+
+const onChecked = (
+  e: any,
+  checkedKeys: string[],
+  onItemSelect: (n: any, c: boolean) => void,
+) => {
+  const { eventKey } = e.node;
+  onItemSelect(eventKey, !isChecked(checkedKeys, eventKey));
+};
+
+function isChecked(
+  selectedKeys: (string | number)[],
+  eventKey: string | number,
+) {
+  return selectedKeys.indexOf(eventKey) !== -1;
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <div class="p-4">
+      <span>AI盒子授权: </span>
+      <Switch v-model:checked="checked" />
+    </div>
+    <div class="p-4">
+      <Transfer
+        v-model:target-keys="targetKeys"
+        class="tree-transfer h-[400px] overflow-auto"
+        :data-source="dataSource"
+        :render="(item) => item.title"
+      >
+        <template #children="{ direction, selectedKeys, onItemSelect }">
+          <Tree
+            v-if="direction === 'left'"
+            block-node
+            checkable
+            check-strictly
+            :show-line="true"
+            default-expand-all
+            :checked-keys="[...selectedKeys, ...targetKeys]"
+            :tree-data="treeData"
+            @check="
+              (_, props) => {
+                onChecked(
+                  props,
+                  [...selectedKeys, ...targetKeys],
+                  onItemSelect,
+                );
+              }
+            "
+            @select="
+              (_, props) => {
+                onChecked(
+                  props,
+                  [...selectedKeys, ...targetKeys],
+                  onItemSelect,
+                );
+              }
+            "
+          />
+        </template>
+      </Transfer>
+    </div>
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitManagement/index.vue b/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitManagement/index.vue
new file mode 100644
index 00000000..ebf5df11
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitManagement/index.vue
@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
+import type { PersonLibImgForm } from '#/api/sis/personLibImg/model';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import {
+  personLibImgExport,
+  personLibImgList,
+  personLibImgRemove,
+} from '#/api/sis/personLibImg';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import { columns, querySchema } from './data';
+import personLibImgModal from './personLibImg-modal.vue';
+import imgAuthModal from './imgAuth-modal.vue';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  // 不需要直接删除
+  // fieldMappingTime: [
+  //  [
+  //    'createTime',
+  //    ['params[beginTime]', 'params[endTime]'],
+  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  //  ],
+  // ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+  // columns: columns(),
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await personLibImgList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'system-personLibImg-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [PersonLibImgModal, modalApi] = useVbenModal({
+  connectedComponent: personLibImgModal,
+});
+
+const [ImgAuthModal, authModalApi] = useVbenModal({
+  connectedComponent: imgAuthModal,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(row: Required<PersonLibImgForm>) {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+
+async function handleDelete(row: Required<PersonLibImgForm>) {
+  await personLibImgRemove(row.id);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<PersonLibImgForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await personLibImgRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(
+    personLibImgExport,
+    '人像信息数据',
+    tableApi.formApi.form.values,
+    {
+      fieldMappingTime: formOptions.fieldMappingTime,
+    },
+  );
+}
+
+/**
+ * 对图像进行门禁授权
+ */
+function accessControlAuth() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<PersonLibImgForm>) => row.id);
+  authModalApi.setData({ ids, libId: rows[0].libId });
+  authModalApi.open();
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="人像信息列表">
+      <template #toolbar-tools>
+        <Space>
+          <!-- <a-button
+            type="primary"
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            v-access:code="['system:personLibImg:add']"
+            @click="accessControlAuth"
+          >
+            门禁授权
+          </a-button> -->
+          <a-button
+            v-access:code="['system:personLibImg:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['system:personLibImg:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['system:personLibImg:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['system:personLibImg:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['system:personLibImg:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <PersonLibImgModal @reload="tableApi.query()" />
+    <ImgAuthModal @reload="tableApi.query()" />
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitManagement/personLibImg-modal.vue b/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitManagement/personLibImg-modal.vue
new file mode 100644
index 00000000..9a9a2b5c
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoAnalysis/portraitManagement/personLibImg-modal.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  personLibImgAdd,
+  personLibImgInfo,
+  personLibImgUpdate,
+} from '#/api/sis/personLibImg';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { modalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-1',
+    // 默认label宽度 px
+    labelWidth: 100,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+      allowClear: true,
+    },
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[700px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await personLibImgInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? personLibImgUpdate(data) : personLibImgAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/videoSurveillance/index.vue b/apps/web-antd/src/views/videoSystem/videoSurveillance/index.vue
new file mode 100644
index 00000000..91149712
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoSurveillance/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <h1>视频监控</h1>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/algorithmManagement/algorithm-detail-modal.vue b/apps/web-antd/src/views/videoSystem/videoWarning/algorithmManagement/algorithm-detail-modal.vue
new file mode 100644
index 00000000..0b1d6684
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/algorithmManagement/algorithm-detail-modal.vue
@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import { shallowRef, ref } from 'vue';
+import { useVbenModal } from '@vben/common-ui';
+import {
+  Descriptions,
+  DescriptionsItem,
+  Tag,
+  Image,
+  Tabs,
+  Input,
+  Button,
+  Upload,
+} from 'ant-design-vue';
+import { QuestionCircleOutlined, UploadOutlined } from '@ant-design/icons-vue';
+import image3 from '../../../../assets/algorithmManagement/image3.png';
+import image4 from '../../../../assets/algorithmManagement/image4.png';
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    algorithmDetail.value = null;
+  },
+});
+
+const algorithmDetail = shallowRef<any>(null);
+const activeTab = ref('recognition');
+const confidence = ref(64);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const { id, data } = modalApi.getData() as {
+    id: number | string;
+    data: any[];
+  };
+
+  // 从传递的数据中查找对应的记录
+  const record = data.find((item: any) => item.id === id);
+  if (record) {
+    algorithmDetail.value = record;
+  }
+
+  modalApi.modalLoading(false);
+}
+
+// 获取算法类型颜色
+const getAlgorithmTypeColor = (type: string) => {
+  const colorMap: Record<string, string> = {
+    安全监控: 'red',
+    环境监测: 'green',
+    基础设施: 'blue',
+    交通管理: 'orange',
+  };
+  return colorMap[type] || 'default';
+};
+
+// 模拟识别结果JSON
+const recognitionResult = {
+  msg: 'success',
+  code: 200,
+  data: [
+    {
+      image: null,
+      coordinate: {
+        xyxy: [191, 202, 809, 521],
+      },
+      label: 'Fall-Detected',
+      score: '0.64',
+    },
+  ],
+};
+
+// 上传图片处理
+const handleUploadImage = (file: any) => {
+  console.log('上传图片', file);
+
+  // 创建文件URL
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    uploadedImageUrl.value = e.target?.result as string;
+    hasUploadedImage.value = true;
+  };
+  reader.readAsDataURL(file);
+
+  return false; // 阻止默认上传行为
+};
+
+// 上传配置
+const uploadProps = {
+  beforeUpload: handleUploadImage,
+  showUploadList: false,
+  accept: 'image/*',
+};
+
+// 是否已上传图片
+const hasUploadedImage = ref(false);
+// 上传的图片URL
+const uploadedImageUrl = ref('');
+// 识别框的坐标（模拟数据）
+const detectionBox = ref({
+  x: 61,
+  y: 52,
+  width: 618, // 809 - 191
+  height: 219, // 521 - 202
+});
+</script>
+
+<template>
+  <BasicModal
+    :footer="false"
+    :fullscreen-button="false"
+    title="人体跌倒识别"
+    class="w-[90%]"
+  >
+    <div v-if="algorithmDetail" class="space-y-6">
+      <!-- 头部信息 -->
+      <div class="flex items-start gap-4">
+        <!-- 缩略图 -->
+        <div class="h-24 w-24 flex-shrink-0 overflow-hidden rounded-lg">
+          <img
+            :src="algorithmDetail.image"
+            :alt="algorithmDetail.title"
+            class="h-full w-full object-cover"
+          />
+        </div>
+        <!-- 标题和描述 -->
+        <div class="flex-1">
+          <h2 class="mb-2 text-xl font-bold text-gray-900">
+            {{ algorithmDetail.title }}
+          </h2>
+          <div class="mb-3 flex flex-wrap gap-2">
+            <Tag
+              v-for="category in [
+                '公安行业',
+                '智慧医院',
+                '地铁站',
+                '交通枢纽',
+                '城市道路',
+                '社区',
+                '园区',
+              ]"
+              :key="category"
+              color="blue"
+            >
+              {{ category }}
+            </Tag>
+          </div>
+          <p class="text-gray-600">{{ algorithmDetail.description }}</p>
+        </div>
+      </div>
+
+      <!-- 主要内容区域 -->
+      <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        <!-- 左侧：识别图片 -->
+        <div class="space-y-4">
+          <h3 class="text-lg font-semibold text-gray-900">识别图片</h3>
+          <div v-if="hasUploadedImage" class="relative">
+            <img
+              :src="uploadedImageUrl"
+              :alt="algorithmDetail.title"
+              class="h-60 w-full rounded-lg object-cover"
+            />
+          </div>
+          <div
+            v-else
+            class="flex h-60 items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50"
+          >
+            <Upload v-bind="uploadProps">
+              <div
+                class="cursor-pointer text-center text-gray-500 hover:text-blue-500"
+              >
+                <UploadOutlined class="mb-2 text-4xl" />
+                <p>点击上传图片</p>
+              </div>
+            </Upload>
+          </div>
+          <div v-if="hasUploadedImage" class="text-center">
+            <Upload v-bind="uploadProps">
+              <Button type="primary">
+                <template #icon>
+                  <UploadOutlined />
+                </template>
+                重新上传
+              </Button>
+            </Upload>
+          </div>
+        </div>
+
+        <!-- 右侧：识别结果 -->
+        <div v-if="hasUploadedImage" class="space-y-4">
+          <div class="flex items-center justify-between">
+            <Tabs v-model:activeKey="activeTab" class="flex-1">
+              <Tabs.TabPane key="recognition" tab="识别结果" />
+              <Tabs.TabPane key="json" tab="JSON结果" />
+            </Tabs>
+            <div class="flex items-center gap-2">
+              <span class="text-sm text-gray-600">置信度</span>
+              <QuestionCircleOutlined class="text-gray-400" />
+              <Input
+                v-model:value="confidence"
+                class="w-16"
+                size="small"
+                placeholder="10~99"
+              />
+              <span class="text-sm text-gray-600">%</span>
+            </div>
+          </div>
+
+          <!-- 识别结果内容 -->
+          <div v-if="activeTab === 'recognition'" class="relative">
+            <img
+              :src="uploadedImageUrl"
+              :alt="algorithmDetail.title"
+              class="h-60 w-full rounded-lg object-cover"
+            />
+            <!-- 红色识别框 -->
+            <div
+              class="absolute border-2 border-red-500"
+              :style="{
+                left: `${detectionBox.x}px`,
+                top: `${detectionBox.y}px`,
+                width: `${detectionBox.width}px`,
+                height: `${detectionBox.height}px`,
+              }"
+            >
+              <!-- 标签文字 -->
+              <div
+                class="absolute -top-6 left-0 rounded bg-red-500 px-2 py-1 text-xs text-white"
+              >
+                Fall-Detected 0.64
+              </div>
+            </div>
+          </div>
+
+          <!-- JSON结果内容 -->
+          <div v-else class="rounded-lg bg-gray-50 p-4">
+            <pre class="whitespace-pre-wrap text-sm text-gray-800">{{
+              JSON.stringify(recognitionResult, null, 2)
+            }}</pre>
+          </div>
+        </div>
+
+        <!-- 未上传图片时的提示 -->
+        <div
+          v-else
+          class="flex h-60 items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50"
+        >
+          <div class="text-center text-gray-500">
+            <UploadOutlined class="mb-2 text-4xl" />
+            <p>请先上传图片进行识别</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/algorithmManagement/index.vue b/apps/web-antd/src/views/videoSystem/videoWarning/algorithmManagement/index.vue
new file mode 100644
index 00000000..ec595534
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/algorithmManagement/index.vue
@@ -0,0 +1,281 @@
+<template>
+  <Page class="h-full w-full">
+    <!-- 导航分类 -->
+    <div class="mb-6">
+      <!-- 第一行分类 -->
+      <div class="mb-2 flex flex-wrap gap-2">
+        <a-button
+          v-for="category in categories1"
+          :key="category"
+          :type="selectedCategory === category ? 'primary' : 'default'"
+          size="small"
+          @click="handleCategoryChange(category)"
+        >
+          {{ category }}
+        </a-button>
+      </div>
+      <!-- 第二行分类 -->
+      <div class="flex flex-wrap gap-2">
+        <a-button
+          v-for="category in categories2"
+          :key="category"
+          :type="selectedCategory === category ? 'primary' : 'default'"
+          size="small"
+          @click="handleCategoryChange(category)"
+        >
+          {{ category }}
+        </a-button>
+      </div>
+    </div>
+
+    <!-- 搜索结果和操作 -->
+    <div class="mb-4 flex items-center justify-between">
+      <div class="text-gray-600">为您找到相关算法{{ totalCount }}个</div>
+      <a-button type="primary" @click="handleImport">
+        <template #icon>
+          <UploadOutlined />
+        </template>
+        导入模型
+
+      </a-button>
+    </div>
+
+    <!-- 算法卡片网格 -->
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+      <div
+        v-for="algorithm in algorithmList"
+        :key="algorithm.id"
+        class="cursor-pointer overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-md"
+        @click="handleAlgorithmClick(algorithm)"
+      >
+        <!-- 算法图片 -->
+        <div class="relative h-48 bg-gray-100">
+          <div
+            :style="{ background: `url(${algorithm.image})`, backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' }"
+            class="h-full w-full object-cover"
+          />
+          <!-- 算法类型标签 -->
+          <div class="absolute left-2 top-2">
+            <a-tag :color="getAlgorithmTypeColor(algorithm.type)">
+              {{ algorithm.type }}
+            </a-tag>
+          </div>
+        </div>
+
+        <!-- 算法详情 -->
+        <div class="space-y-3 p-4">
+          <h3 class="text-lg font-semibold text-gray-900">{{ algorithm.title }}</h3>
+          <p class="text-sm text-gray-600 leading-relaxed">{{ algorithm.description }}</p>
+          <div class="flex items-center justify-between">
+            <span class="text-xs text-gray-500">准确率: {{ algorithm.accuracy }}</span>
+            <a-button type="link" size="small" @click.stop="handleViewDetail(algorithm)">
+              查看详情
+            </a-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 分页 -->
+    <div class="mt-6 flex items-center justify-between border-t border-gray-200 pt-4">
+      <div class="text-gray-600">共搜索到{{ filteredCount }}条数据</div>
+      <div class="flex items-center gap-4">
+        <Pagination
+          v-model:current="pagination.current"
+          v-model:page-size="pagination.pageSize"
+          :total="filteredCount"
+          :show-size-changer="false"
+          :show-quick-jumper="true"
+          @change="handlePageChange"
+        />
+        <Select
+          v-model:value="pagination.pageSize"
+          class="w-24"
+          @change="handlePageSizeChange"
+        >
+          <SelectOption value="10">10条/页</SelectOption>
+          <SelectOption value="20">20条/页</SelectOption>
+          <SelectOption value="50">50条/页</SelectOption>
+        </Select>
+      </div>
+    </div>
+
+    <!-- 算法详情弹窗 -->
+    <AlgorithmDetailModal />
+  </Page>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { UploadOutlined } from '@ant-design/icons-vue';
+import { message, Pagination, Select, SelectOption } from 'ant-design-vue';
+import AlgorithmDetailModalComponent from './algorithm-detail-modal.vue';
+import image from '../../../../assets/algorithmManagement/image.png'
+import image5 from '../../../../assets/algorithmManagement/image5.png'
+import image6 from '../../../../assets/algorithmManagement/image6.png'
+import image7 from '../../../../assets/algorithmManagement/image7.png'
+
+// 分类数据
+const categories1 = [
+  '全部', '智慧工地', '公安行业', '智慧医院', '地铁站', '交通枢纽',
+  '城市道路', '社区', '园区', '城市治理', '交通治理', '平安校园',
+  '智慧零售', '小区', '写字楼', '消防行业'
+];
+
+const categories2 = [
+  '购物中心', '车站', '化工生产', '智慧电网', '监控室', '后厨',
+  '火车站', '娱乐场所', '机场', '电焊车间', '水务管理', '河道管理', '边境监控'
+];
+
+// 状态管理
+const selectedCategory = ref('园区');
+const totalCount = ref(4);
+const filteredCount = ref(2);
+
+// 分页配置
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+});
+
+// 算法列表
+const algorithmList = ref<any[]>([]);
+
+// 创建详情弹窗
+const [AlgorithmDetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: AlgorithmDetailModalComponent,
+});
+
+// 模拟算法数据
+const mockAlgorithmData = [
+  {
+    id: 1,
+    title: '人体跌倒识别',
+    type: '安全监控',
+    description: '适用于地铁扶梯/楼梯、老人儿童活动区域等场所，准确率超过90%。',
+    accuracy: '90%+',
+    image: image,
+    category: '园区',
+    features: ['实时检测', '高准确率', '多场景适用'],
+    applications: ['地铁站', '医院', '养老院', '学校']
+  },
+  {
+    id: 2,
+    title: '地面垃圾',
+    type: '环境监测',
+    description: '在居民区和城市街道部署智能垃圾识别系统，自动检测并上报垃圾堆积情况。',
+    accuracy: '85%+',
+    image: image5,
+    category: '园区',
+    features: ['自动识别', '实时上报', '智能分类'],
+    applications: ['社区', '街道', '公园', '商业区']
+  },
+  {
+    id: 3,
+    title: '烟雾识别',
+    type: '安全监控',
+    description: '在办公楼、居民区、学校等重点场所实施烟雾检测技术，监控并精确定位烟雾源，预防火灾。',
+    accuracy: '95%+',
+    image: image6,
+    category: '园区',
+    features: ['早期预警', '精确定位', '快速响应'],
+    applications: ['办公楼', '居民区', '学校', '工厂']
+  },
+  {
+    id: 4,
+    title: '井盖状态识别',
+    type: '基础设施',
+    description: '井盖识别系统监控城市基础设施，识别井盖状态包括损坏、变形或位移，自动报警维护团队。',
+    accuracy: '88%+',
+    image: image7,
+    category: '园区',
+    features: ['状态监测', '自动报警', '维护管理'],
+    applications: ['城市道路', '小区', '工业园区', '市政设施']
+  }
+];
+
+// 获取算法类型颜色
+const getAlgorithmTypeColor = (type: string) => {
+  const colorMap: Record<string, string> = {
+    '安全监控': 'red',
+    '环境监测': 'green',
+    '基础设施': 'blue',
+    '交通管理': 'orange',
+  };
+  return colorMap[type] || 'default';
+};
+
+// 分类变化处理
+const handleCategoryChange = (category: string) => {
+  selectedCategory.value = category;
+  loadAlgorithmData();
+};
+
+// 导入处理
+const handleImport = () => {
+  message.info('导入功能开发中...');
+};
+
+// 算法点击处理
+const handleAlgorithmClick = (algorithm: any) => {
+  console.log('点击算法:', algorithm);
+};
+
+// 查看详情
+const handleViewDetail = (algorithm: any) => {
+  detailModalApi.setData({ id: algorithm.id, data: algorithmList.value });
+  detailModalApi.open();
+};
+
+// 分页变化处理
+const handlePageChange = (page: number) => {
+  pagination.current = page;
+  loadAlgorithmData();
+};
+
+// 每页条数变化处理
+const handlePageSizeChange = (value: any) => {
+  pagination.pageSize = Number(value);
+  pagination.current = 1;
+  loadAlgorithmData();
+};
+
+// 加载算法数据
+const loadAlgorithmData = () => {
+  // 模拟API调用
+  setTimeout(() => {
+    // 根据分类过滤数据
+    let filteredData = [...mockAlgorithmData];
+
+    if (selectedCategory.value !== '全部') {
+      filteredData = filteredData.filter(item =>
+        item.category === selectedCategory.value
+      );
+    }
+
+    // 模拟分页
+    const start = (pagination.current - 1) * pagination.pageSize;
+    const end = start + pagination.pageSize;
+    algorithmList.value = filteredData.slice(start, end);
+    filteredCount.value = filteredData.length;
+  }, 300);
+};
+
+// 初始化
+onMounted(() => {
+  loadAlgorithmData();
+});
+</script>
+
+<style scoped>
+/* 自定义样式 */
+.ant-pagination-item-active {
+  background-color: #1890ff;
+  border-color: #1890ff;
+}
+
+.ant-pagination-item-active a {
+  color: #fff;
+}
+</style>
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoAlertList/alarm-detail-modal.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoAlertList/alarm-detail-modal.vue
new file mode 100644
index 00000000..b71dd27b
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoAlertList/alarm-detail-modal.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import { useVbenModal } from '@vben/common-ui';
+import { Descriptions, DescriptionsItem, Tag } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    alarmDetail.value = null;
+  },
+});
+
+const alarmDetail = shallowRef<any>(null);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const { id, data } = modalApi.getData() as {
+    id: number | string;
+    data: any[];
+  };
+
+  // 从传递的数据中查找对应的记录
+  const record = data.find((item: any) => item.id === id);
+  if (record) {
+    alarmDetail.value = record;
+  }
+
+  modalApi.modalLoading(false);
+}
+
+// 获取预警类型颜色
+const getAlarmTypeColor = (type: string) => {
+  const colorMap: Record<string, string> = {
+    停车侦测: 'blue',
+    区域入侵侦测: 'red',
+    人员聚集: 'orange',
+    异常行为: 'purple',
+  };
+  return colorMap[type] || 'default';
+};
+
+// 获取告警级别颜色
+const getAlarmLevelColor = (level: string) => {
+  const colorMap: Record<string, string> = {
+    一般: 'blue',
+    重要: 'orange',
+    紧急: 'red',
+  };
+  return colorMap[level] || 'default';
+};
+
+// 格式化时间
+const formatTime = (time: string) => {
+  return dayjs(time).format('YYYY.MM.DD HH:mm');
+};
+</script>
+
+<template>
+  <BasicModal
+    :footer="false"
+    :fullscreen-button="false"
+    title="预警详情"
+    class="w-[70%]"
+  >
+    <div v-if="alarmDetail" class="flex gap-6">
+      <!-- 左侧详情信息 -->
+      <div class="flex-1 space-y-4">
+        <Descriptions
+          size="small"
+          :column="1"
+          bordered
+          :labelStyle="{ width: '120px' }"
+        >
+          <DescriptionsItem label="预警编号">
+            {{ alarmDetail.alarmId }}
+          </DescriptionsItem>
+          <DescriptionsItem label="监控区域">
+            {{ alarmDetail.cameraLocation }}
+          </DescriptionsItem>
+          <DescriptionsItem label="预警类型">
+            <Tag :color="getAlarmTypeColor(alarmDetail.alarmType)">
+              {{ alarmDetail.alarmType }}
+            </Tag>
+          </DescriptionsItem>
+          <DescriptionsItem label="预警时间">
+            {{ formatTime(alarmDetail.alarmTime) }}
+          </DescriptionsItem>
+          <DescriptionsItem label="告警级别">
+            <Tag :color="getAlarmLevelColor(alarmDetail.alarmLevel)">
+              {{ alarmDetail.alarmLevel }}
+            </Tag>
+          </DescriptionsItem>
+        </Descriptions>
+      </div>
+      <!-- 右侧图片 -->
+      <div class="flex-1">
+        <div
+          :style="{
+            background: `url(${alarmDetail.image})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
+          }"
+          class="h-64 w-full rounded-lg object-cover"
+        />
+      </div>
+    </div>
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoAlertList/index.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoAlertList/index.vue
new file mode 100644
index 00000000..52143fee
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoAlertList/index.vue
@@ -0,0 +1,286 @@
+<template>
+  <Page class="h-full w-full">
+    <!-- 搜索区域 -->
+    <div
+      class="mb-4 flex items-center justify-between rounded-lg bg-white p-4 shadow-sm"
+    >
+      <!-- 左侧搜索 -->
+      <div class="flex items-center gap-4">
+        <div class="text-gray-600">共有{{ totalCount }}条预警事件</div>
+      </div>
+
+      <!-- 右侧时间范围 -->
+      <div class="flex items-center gap-2">
+        <span class="font-medium text-gray-700">时间范围:</span>
+        <RadioGroup
+          v-model:value="searchForm.timeRange"
+          @change="handleTimeRangeChange"
+        >
+          <Radio value="">时间不限</Radio>
+          <Radio value="1">过去1小时</Radio>
+          <Radio value="24">过去24小时</Radio>
+          <Radio value="168">过去1周</Radio>
+          <Radio value="720">过去1个月</Radio>
+          <Radio value="2160">过去3个月</Radio>
+          <Radio value="8760">过去1年</Radio>
+        </RadioGroup>
+      </div>
+    </div>
+
+    <!-- 预警事件列表 -->
+    <div class="rounded-lg bg-white shadow-sm">
+      <div
+        class="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+      >
+        <div
+          v-for="item in alarmList"
+          :key="item.id"
+          class="cursor-pointer overflow-hidden rounded-lg border border-gray-200 transition-shadow hover:shadow-md"
+          @click="handleViewDetail(item)"
+        >
+          <!-- 视频缩略图 -->
+          <div
+            class="relative h-48 bg-gray-100"
+            :style="{
+              background: `url(${item.thumbnail})`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              backgroundRepeat: 'no-repeat',
+            }"
+          >
+            <!-- 预警类型标签 -->
+            <div class="absolute left-2 top-2">
+              <a-tag :color="getAlarmTypeColor(item.alarmType)">
+                {{ item.alarmType }}
+              </a-tag>
+            </div>
+          </div>
+
+          <!-- 事件详情 -->
+          <div class="space-y-2 p-3">
+            <div class="text-sm text-gray-600">
+              <span class="font-medium">摄像头点位:</span>
+              {{ item.cameraLocation }}
+            </div>
+            <div class="text-sm text-gray-600">
+              <span class="font-medium">预警类型:</span>
+              {{ item.alarmType }}
+            </div>
+            <div class="text-sm text-gray-600">
+              <span class="font-medium">预警时间:</span>
+              {{ formatTime(item.alarmTime) }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 分页 -->
+      <div
+        class="flex items-center justify-between border-t border-gray-200 p-4"
+      >
+        <div class="text-gray-600">共搜索到{{ filteredCount }}条数据</div>
+        <div class="flex items-center gap-4">
+          <Pagination
+            v-model:current="pagination.current"
+            v-model:page-size="pagination.pageSize"
+            :total="filteredCount"
+            :show-size-changer="false"
+            :show-quick-jumper="true"
+            @change="handlePageChange"
+          />
+          <Select
+            v-model:value="pagination.pageSize"
+            class="w-24"
+            @change="handlePageSizeChange"
+          >
+            <SelectOption value="10">10条/页</SelectOption>
+            <SelectOption value="20">20条/页</SelectOption>
+            <SelectOption value="50">50条/页</SelectOption>
+          </Select>
+        </div>
+      </div>
+    </div>
+
+    <!-- 预警详情弹窗 -->
+    <AlarmDetailModal @reload="loadAlarmData" />
+  </Page>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { SearchOutlined } from '@ant-design/icons-vue';
+import {
+  message,
+  RadioGroup,
+  Radio,
+  Pagination,
+  Select,
+  SelectOption,
+} from 'ant-design-vue';
+import dayjs from 'dayjs';
+import AlarmDetailModalComponent from './alarm-detail-modal.vue';
+import monitor6 from '../../../../assets/monitor/monitor6.png';
+// 搜索表单
+const searchForm = reactive({
+  alarmType: '',
+  timeRange: '2160', // 默认选择过去3个月
+});
+
+// 分页配置
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+});
+
+// 数据状态
+const totalCount = ref(21);
+const filteredCount = ref(2);
+const alarmList = ref<any[]>([]);
+
+// 创建详情弹窗
+const [AlarmDetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: AlarmDetailModalComponent,
+});
+
+// 查看详情的处理函数
+const handleViewDetail = (item: any) => {
+  if (item) {
+    detailModalApi.setData({ id: item.id, data: alarmList.value });
+    detailModalApi.open();
+  }
+};
+
+// 模拟数据
+const mockAlarmData = [
+  {
+    id: 1,
+    alarmId: 'JSD-1231',
+    cameraLocation: '1栋3号电梯旁',
+    alarmType: '停车侦测',
+    alarmTime: '2025-07-12 12:35:00',
+    alarmLevel: '一般',
+    thumbnail: monitor6,
+    image: monitor6,
+  },
+  {
+    id: 2,
+    alarmId: 'JSD-1232',
+    cameraLocation: '1栋3号电梯旁',
+    alarmType: '区域入侵侦测',
+    alarmTime: '2025-07-12 12:35:00',
+    alarmLevel: '一般',
+    thumbnail: monitor6,
+    image: monitor6,
+  },
+  {
+    id: 3,
+    alarmId: 'JSD-1233',
+    cameraLocation: '1栋3号电梯旁',
+    alarmType: '区域入侵侦测',
+    alarmTime: '2025-07-12 12:35:00',
+    alarmLevel: '一般',
+    thumbnail: monitor6,
+    image: monitor6,
+  },
+  {
+    id: 4,
+    alarmId: 'JSD-1234',
+    cameraLocation: '1栋3号电梯旁',
+    alarmType: '停车侦测',
+    alarmTime: '2025-07-12 12:35:00',
+    alarmLevel: '一般',
+    thumbnail: monitor6,
+    image: monitor6,
+  },
+];
+
+// 获取预警类型颜色
+const getAlarmTypeColor = (type: string) => {
+  const colorMap: Record<string, string> = {
+    停车侦测: 'blue',
+    区域入侵侦测: 'red',
+    人员聚集: 'orange',
+    异常行为: 'purple',
+  };
+  return colorMap[type] || 'default';
+};
+
+// 获取告警级别颜色
+const getAlarmLevelColor = (level: string) => {
+  const colorMap: Record<string, string> = {
+    一般: 'blue',
+    重要: 'orange',
+    紧急: 'red',
+  };
+  return colorMap[level] || 'default';
+};
+
+// 格式化时间
+const formatTime = (time: string) => {
+  return dayjs(time).format('YYYY.MM.DD HH:mm');
+};
+
+// 搜索处理
+const handleSearch = () => {
+  // 模拟搜索逻辑
+  console.log('搜索条件:', searchForm);
+  loadAlarmData();
+};
+
+// 时间范围变化处理
+const handleTimeRangeChange = () => {
+  loadAlarmData();
+};
+
+// 分页变化处理
+const handlePageChange = (page: number) => {
+  pagination.current = page;
+  loadAlarmData();
+};
+
+// 每页条数变化处理
+const handlePageSizeChange = (value: any) => {
+  pagination.pageSize = Number(value);
+  pagination.current = 1;
+  loadAlarmData();
+};
+
+// 加载预警数据
+const loadAlarmData = () => {
+  // 模拟API调用
+  setTimeout(() => {
+    // 根据搜索条件过滤数据
+    let filteredData = [...mockAlarmData];
+
+    if (searchForm.alarmType) {
+      filteredData = filteredData.filter((item) =>
+        item.alarmType.includes(searchForm.alarmType),
+      );
+    }
+
+    // 模拟分页
+    const start = (pagination.current - 1) * pagination.pageSize;
+    const end = start + pagination.pageSize;
+    alarmList.value = filteredData.slice(start, end);
+    filteredCount.value = filteredData.length;
+  }, 300);
+};
+
+// 初始化
+onMounted(() => {
+  loadAlarmData();
+});
+</script>
+
+<style scoped>
+/* 自定义样式 */
+.ant-pagination-item-active {
+  background-color: #1890ff;
+  border-color: #1890ff;
+}
+
+.ant-pagination-item-active a {
+  color: #fff;
+}
+</style>
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/data.ts b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/data.ts
new file mode 100644
index 00000000..7639cf63
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/data.ts
@@ -0,0 +1,226 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getDictOptions } from '#/utils/dict';
+import { renderDict } from '#/utils/render';
+import { h } from 'vue';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'alarmType',
+    label: '视频预警类型',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '特大', value: '特大' },
+        { label: '重要', value: '重要' },
+        { label: '一般', value: '一般' },
+      ],
+    },
+    fieldName: 'level',
+    label: '级别',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '待分配', value: '待分配' },
+        { label: '处理中', value: '处理中' },
+        { label: '已完成', value: '已完成' },
+      ],
+    },
+    fieldName: 'processingStatus',
+    label: '处理状态',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '预警编号',
+    field: 'alarmId',
+    width: 150,
+  },
+  {
+    title: '预警时间',
+    field: 'alarmTime',
+    width: 150,
+  },
+  {
+    title: '级别',
+    field: 'level',
+    width: 100,
+    slots: {
+      default: ({ row }: any) => {
+        const levelColors: Record<string, string> = {
+          特大: 'red',
+          重要: 'orange',
+          一般: 'blue',
+        };
+        return h(
+          'span',
+          {
+            style: {
+              color: levelColors[row.level] || '#666',
+              fontWeight: 'bold',
+            },
+          },
+          row.level,
+        );
+      },
+    },
+  },
+  {
+    title: '预警类型',
+    field: 'alarmType',
+    width: 120,
+  },
+  {
+    title: '描述',
+    field: 'description',
+    minWidth: 200,
+  },
+  {
+    title: '所在位置',
+    field: 'location',
+    width: 150,
+  },
+  {
+    title: '处理状态',
+    field: 'processingStatus',
+    width: 100,
+    slots: {
+      default: ({ row }: any) => {
+        const statusColors: Record<string, string> = {
+          待分配: 'red',
+          处理中: 'orange',
+          已完成: 'green',
+        };
+        return h(
+          'span',
+          {
+            style: {
+              color: statusColors[row.processingStatus] || '#666',
+              fontWeight: 'bold',
+            },
+          },
+          row.processingStatus,
+        );
+      },
+    },
+  },
+  {
+    title: '处理情况',
+    field: 'processingDetails',
+    width: 150,
+  },
+  {
+    title: '处理时间',
+    field: 'processingTime',
+    width: 150,
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 380,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '主键',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '预警编号',
+    fieldName: 'alarmId',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '预警时间',
+    fieldName: 'alarmTime',
+    component: 'DatePicker',
+    componentProps: {
+      format: 'YYYY.MM.DD HH:mm',
+      valueFormat: 'YYYY.MM.DD HH:mm',
+      showTime: true,
+    },
+    rules: 'required',
+  },
+  {
+    label: '级别',
+    fieldName: 'level',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '特大', value: '特大' },
+        { label: '重要', value: '重要' },
+        { label: '一般', value: '一般' },
+      ],
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '预警类型',
+    fieldName: 'alarmType',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '描述',
+    fieldName: 'description',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 3,
+    },
+    formItemClass: 'col-span-2',
+  },
+  {
+    label: '所在位置',
+    fieldName: 'location',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '处理状态',
+    fieldName: 'processingStatus',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '待分配', value: '待分配' },
+        { label: '处理中', value: '处理中' },
+        { label: '已完成', value: '已完成' },
+      ],
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '处理情况',
+    fieldName: 'processingDetails',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 3,
+    },
+    formItemClass: 'col-span-2',
+  },
+  {
+    label: '处理时间',
+    fieldName: 'processingTime',
+    component: 'DatePicker',
+    componentProps: {
+      format: 'YYYY.MM.DD HH:mm',
+      valueFormat: 'YYYY.MM.DD HH:mm',
+      showTime: true,
+    },
+  },
+];
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/index.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/index.vue
new file mode 100644
index 00000000..b7ca1380
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/index.vue
@@ -0,0 +1,265 @@
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable
+      :key="tableKey"
+      class="flex-1 overflow-hidden"
+      table-title="视频预警处理"
+    >
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['video:warning:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['video:warning:level']"
+            @click.stop="handleLevelSetting(row)"
+          >
+            级别设置
+          </ghost-button>
+          <ghost-button
+            v-access:code="['video:warning:view']"
+            @click.stop="handleView(row)"
+          >
+            {{ $t('pages.common.info') }}
+          </ghost-button>
+          <ghost-button
+            v-access:code="['video:warning:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <ghost-button
+            v-access:code="['video:warning:assign']"
+            @click.stop="handleAssign(row)"
+            :disabled="row.processingStatus === '已完成'"
+          >
+            分配处理
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['video:warning:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <WarningModal @reload="tableApi.query()" />
+    <WarningDetail />
+    <LevelSettingModalComp @reload="tableKey++" />
+  </Page>
+</template>
+
+<script setup lang="ts">
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space, Tag } from 'ant-design-vue';
+import { ref, watch } from 'vue';
+
+import {
+  useVbenVxeGrid,
+  vxeCheckboxChecked,
+  type VxeGridProps,
+} from '#/adapter/vxe-table';
+
+import { commonDownloadExcel } from '#/utils/file/download';
+import { renderDict } from '#/utils/render';
+
+import { columns, querySchema } from './data';
+import warningModal from './warning-modal.vue';
+import warningDetail from './warning-detail.vue';
+import LevelSettingModal from './level-setting-modal.vue';
+
+// 假数据
+const mockData = ref([
+  {
+    id: 1,
+    alarmId: 'JWD-3434234',
+    alarmTime: '2025.07.21 12:20',
+    level: '特大',
+    alarmType: '越界侦测',
+    description: '温度高于80度发生火宅',
+    location: '1栋3号电梯旁',
+    processingStatus: '待分配',
+    processingDetails: '',
+    processingTime: '',
+  },
+  {
+    id: 2,
+    alarmId: 'JWD-3434235',
+    alarmTime: '2025.07.21 11:15',
+    level: '重要',
+    alarmType: '异常行为',
+    description: '人员异常聚集',
+    location: '2栋大厅',
+    processingStatus: '处理中',
+    processingDetails: '已派人员前往处理',
+    processingTime: '2025.07.21 11:30',
+  },
+  {
+    id: 3,
+    alarmId: 'JWD-3434236',
+    alarmTime: '2025.07.21 10:45',
+    level: '一般',
+    alarmType: '设备故障',
+    description: '摄像头离线',
+    location: '3栋走廊',
+    processingStatus: '已完成',
+    processingDetails: '已修复设备',
+    processingTime: '2025.07.21 11:00',
+  },
+]);
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 100,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+};
+
+const gridOptions: VxeGridProps = {
+  columns,
+  height: 'auto',
+  data: mockData.value,
+  pagerConfig: {
+    currentPage: 1,
+    pageSize: 10,
+    total: mockData.value.length,
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  id: 'video-warning-processing-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+// 监听数据变化，强制重新渲染表格
+const tableKey = ref(0);
+watch(
+  mockData,
+  () => {
+    tableKey.value++;
+  },
+  { deep: true },
+);
+
+const [WarningModal, modalApi] = useVbenModal({
+  connectedComponent: warningModal,
+});
+
+const [WarningDetail, detailApi] = useVbenModal({
+  connectedComponent: warningDetail,
+});
+
+const [LevelSettingModalComp, levelModalApi] = useVbenModal({
+  connectedComponent: LevelSettingModal,
+});
+
+// 级别设置
+function handleLevelSetting(row: any) {
+  levelModalApi.setData({ id: row.id, level: row.level, data: mockData.value });
+  levelModalApi.open();
+}
+
+// 查看详情
+async function handleView(row: any) {
+  detailApi.setData({ id: row.id, data: mockData.value });
+  detailApi.open();
+}
+
+// 编辑
+async function handleEdit(row: any) {
+  modalApi.setData({ id: row.id, data: mockData.value });
+  modalApi.open();
+}
+
+// 分配处理
+function handleAssign(row: any) {
+  Modal.confirm({
+    title: '分配处理',
+    content: `确定要分配预警 ${row.alarmId} 给处理人员吗？`,
+    onOk() {
+      // 模拟分配处理
+      const index = mockData.value.findIndex((item: any) => item.id === row.id);
+      if (index !== -1) {
+        mockData.value[index].processingStatus = '处理中';
+        mockData.value[index].processingDetails = '已分配给处理人员';
+        mockData.value[index].processingTime = new Date().toLocaleString();
+        tableApi.query();
+      }
+    },
+  });
+}
+
+// 删除
+async function handleDelete(row: any) {
+  const index = mockData.value.findIndex((item: any) => item.id === row.id);
+  if (index !== -1) {
+    mockData.value.splice(index, 1);
+    await tableApi.query();
+  }
+}
+
+// 批量删除
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: any) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      ids.forEach((id) => {
+        const index = mockData.value.findIndex((item: any) => item.id === id);
+        if (index !== -1) {
+          mockData.value.splice(index, 1);
+        }
+      });
+      await tableApi.query();
+    },
+  });
+}
+</script>
+
+<style scoped lang="scss">
+.ant-table-wrapper {
+  .ant-table-thead > tr > th {
+    background-color: #fafafa;
+    font-weight: 600;
+  }
+}
+
+.ant-pagination {
+  .ant-pagination-item-active {
+    background-color: #1890ff;
+    border-color: #1890ff;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/level-setting-modal.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/level-setting-modal.vue
new file mode 100644
index 00000000..1568374a
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/level-setting-modal.vue
@@ -0,0 +1,45 @@
+<template>
+  <BasicModal>
+    <RadioGroup v-model:value="selectedLevel">
+      <Radio value="特大">特大</Radio>
+      <Radio value="重要">重要</Radio>
+      <Radio value="一般">一般</Radio>
+    </RadioGroup>
+  </BasicModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useVbenModal } from '@vben/common-ui';
+import { RadioGroup, Radio } from 'ant-design-vue';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const selectedLevel = ref('一般');
+
+const [BasicModal, modalApi] = useVbenModal({
+  class: 'w-[360px]',
+  title: '设置级别',
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) return null;
+    const { level } = modalApi.getData() as { level?: string };
+    selectedLevel.value = level || '一般';
+  },
+  onConfirm: handleConfirm,
+});
+
+function handleConfirm() {
+  const { id, data } = modalApi.getData() as {
+    id: number | string;
+    data: any[];
+  };
+  if (id != null && data) {
+    const idx = data.findIndex((item: any) => item.id === id);
+    if (idx !== -1) {
+      data[idx].level = selectedLevel.value;
+    }
+  }
+  emit('reload');
+  modalApi.close();
+}
+</script>
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-detail.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-detail.vue
new file mode 100644
index 00000000..fe57c7f4
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-detail.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import { useVbenModal } from '@vben/common-ui';
+import { Descriptions, DescriptionsItem, Tag } from 'ant-design-vue';
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    warningDetail.value = null;
+  },
+});
+
+const warningDetail = shallowRef<any>(null);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const { id, data } = modalApi.getData() as {
+    id: number | string;
+    data: any[];
+  };
+
+  // 从传递的数据中查找对应的记录
+  const record = data.find((item: any) => item.id === id);
+  if (record) {
+    warningDetail.value = record;
+  }
+
+  modalApi.modalLoading(false);
+}
+</script>
+
+<template>
+  <BasicModal
+    :footer="false"
+    :fullscreen-button="false"
+    title="预警详情"
+    class="w-[70%]"
+  >
+    <Descriptions
+      v-if="warningDetail"
+      size="small"
+      :column="2"
+      bordered
+      :labelStyle="{ width: '120px' }"
+    >
+      <DescriptionsItem label="预警编号">
+        {{ warningDetail.alarmId }}
+      </DescriptionsItem>
+      <DescriptionsItem label="预警时间">
+        {{ warningDetail.alarmTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="级别">
+        <Tag
+          :color="
+            warningDetail.level === '特大'
+              ? 'red'
+              : warningDetail.level === '重要'
+                ? 'orange'
+                : 'blue'
+          "
+        >
+          {{ warningDetail.level }}
+        </Tag>
+      </DescriptionsItem>
+      <DescriptionsItem label="预警类型">
+        {{ warningDetail.alarmType }}
+      </DescriptionsItem>
+      <DescriptionsItem label="描述" :span="2">
+        {{ warningDetail.description }}
+      </DescriptionsItem>
+      <DescriptionsItem label="所在位置">
+        {{ warningDetail.location }}
+      </DescriptionsItem>
+      <DescriptionsItem label="处理状态">
+        <Tag
+          :color="
+            warningDetail.processingStatus === '待分配'
+              ? 'red'
+              : warningDetail.processingStatus === '处理中'
+                ? 'orange'
+                : 'green'
+          "
+        >
+          {{ warningDetail.processingStatus }}
+        </Tag>
+      </DescriptionsItem>
+      <DescriptionsItem label="处理情况" :span="2">
+        {{ warningDetail.processingDetails || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="处理时间">
+        {{ warningDetail.processingTime || '-' }}
+      </DescriptionsItem>
+    </Descriptions>
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-modal.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-modal.vue
new file mode 100644
index 00000000..9ad62f62
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-modal.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { modalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-1',
+    labelWidth: 110,
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  class: 'w-[70%]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    const { id } = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      // 从传递的数据中查找对应的记录
+      const { data } = modalApi.getData() as {
+        id: number | string;
+        data: any[];
+      };
+      const record = data.find((item: any) => item.id === id);
+      if (record) {
+        await formApi.setValues(record);
+      }
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const formData = cloneDeep(await formApi.getValues());
+
+    // 更新表格数据
+    const { data } = modalApi.getData() as { id: number | string; data: any[] };
+    const index = data.findIndex((item: any) => item.id === formData.id);
+    if (index !== -1) {
+      // 更新数据
+      Object.assign(data[index], formData);
+    }
+
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>