From 1d1afb0162457c1cc01f1f1dcc8112e6fb59e52c Mon Sep 17 00:00:00 2001
From: fyy <2717885210@qq.com>
Date: Tue, 12 Aug 2025 13:51:35 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E9=A2=84=E8=AD=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/layouts/basic.vue           |  55 ++--
 .../workforceManagement/arrangement-modal.vue |  52 +++-
 .../workforceManagement/data.ts               |  34 ++-
 .../workforceManagement/dept-tree.vue         | 122 ++++++++
 .../workforceManagement/scheduleView.vue      |   3 +-
 .../workforceManagement/type.d.ts             | 109 +++----
 .../workforceManagement/unit-person-modal.vue | 204 ++++---------
 .../videoWarning/videoAlertList/index.vue     |   1 -
 .../videoWarning/videoWarningHasDone/data.ts  | 265 +++++++++++++++++
 .../videoWarningHasDone/index.vue             | 279 ++++++++++++++++++
 .../level-setting-modal.vue                   |  45 +++
 .../videoWarningHasDone/warning-detail.vue    | 147 +++++++++
 .../videoWarningHasDone/warning-modal.vue     | 122 ++++++++
 .../videoWarningProcessing/data.ts            | 103 +++++--
 .../videoWarningProcessing/index.vue          | 152 +++++-----
 .../videoWarningProcessing/warning-detail.vue |  79 ++++-
 .../videoWarningProcessing/warning-modal.vue  |  13 +
 .../videoWarning/videoWarningToDone/data.ts   | 265 +++++++++++++++++
 .../videoWarning/videoWarningToDone/index.vue | 276 +++++++++++++++++
 .../level-setting-modal.vue                   |  45 +++
 .../videoWarningToDone/warning-detail.vue     | 147 +++++++++
 .../videoWarningToDone/warning-modal.vue      | 121 ++++++++
 22 files changed, 2260 insertions(+), 379 deletions(-)
 create mode 100644 apps/web-antd/src/views/property/attendanceManagement/workforceManagement/dept-tree.vue
 create mode 100644 apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/data.ts
 create mode 100644 apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/index.vue
 create mode 100644 apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/level-setting-modal.vue
 create mode 100644 apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/warning-detail.vue
 create mode 100644 apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/warning-modal.vue
 create mode 100644 apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/data.ts
 create mode 100644 apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/index.vue
 create mode 100644 apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/level-setting-modal.vue
 create mode 100644 apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/warning-detail.vue
 create mode 100644 apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/warning-modal.vue

diff --git a/apps/web-antd/src/layouts/basic.vue b/apps/web-antd/src/layouts/basic.vue
index 4d5fee5d..fffb92c6 100644
--- a/apps/web-antd/src/layouts/basic.vue
+++ b/apps/web-antd/src/layouts/basic.vue
@@ -11,7 +11,6 @@ import {
   GiteeIcon,
   GitHubOutlined,
   UserOutlined,
-
 } from '@vben/icons';
 import {
   BasicLayout,
@@ -58,34 +57,34 @@ const menus = computed(() => {
       icon: UserOutlined,
       text: $t('ui.widgets.profile'),
     },
+    // {
+    //   handler: () => {
+    //     openWindow('https://gitee.com/dapppp/ruoyi-plus-vben5', {
+    //       target: '_blank',
+    //     });
+    //   },
+    //   icon: () => h(GiteeIcon, { class: 'text-red-800' }),
+    //   text: 'Gitee项目地址',
+    // },
+    // {
+    //   handler: () => {
+    //     openWindow(VBEN_GITHUB_URL, {
+    //       target: '_blank',
+    //     });
+    //   },
+    //   icon: GitHubOutlined,
+    //   text: 'Vben官方地址',
+    // },
+    // {
+    //   handler: () => {
+    //     openWindow(`${VBEN_GITHUB_URL}/issues`, {
+    //       target: '_blank',
+    //     });
+    //   },
+    //   icon: CircleHelp,
+    //   text: $t('ui.widgets.qa'),
+    // },
     {
-      handler: () => {
-        openWindow('https://gitee.com/dapppp/ruoyi-plus-vben5', {
-          target: '_blank',
-        });
-      },
-      icon: () => h(GiteeIcon, { class: 'text-red-800' }),
-      text: 'Gitee项目地址',
-    },
-    {
-      handler: () => {
-        openWindow(VBEN_GITHUB_URL, {
-          target: '_blank',
-        });
-      },
-      icon: GitHubOutlined,
-      text: 'Vben官方地址',
-    },
-    {
-      handler: () => {
-        openWindow(`${VBEN_GITHUB_URL}/issues`, {
-          target: '_blank',
-        });
-      },
-      icon: CircleHelp,
-      text: $t('ui.widgets.qa'),
-    },
-     {
       handler: () => {
         router.push('/navigation');
       },
diff --git a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-modal.vue b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-modal.vue
index 1a941699..85d4c4ec 100644
--- a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-modal.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-modal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, onMounted } from 'vue';
+import { reactive, onMounted, computed } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
@@ -60,7 +60,7 @@ const rules = {
 const groupOptions = ref<any[]>([]);
 const groupMap = ref<Record<string, any>>({}); // 用于快速查找
 let tableData = reactive<
-  { dept: { unitId: string | number; unitName: string }; users: PersonVO[] }[]
+  { dept: { deptId: string | number; deptName: string }; users: PersonVO[] }[]
 >([]); //存放考勤组人员列表数据
 const columns = [
   {
@@ -75,20 +75,41 @@ const columns = [
     dataIndex: ['dept', 'unitName'],
     key: 'dept',
     width: 120,
-    customRender: ({ record }: { record: any }) => record.dept.unitName,
+    customRender: ({
+      record,
+    }: {
+      record: {
+        dept: { deptId: string | number; deptName: string };
+        users: PersonVO[];
+      };
+    }) => record.dept.deptName,
   },
   {
     title: '已选人数',
     dataIndex: 'users',
     key: 'userCount',
     width: 100,
-    customRender: ({ record }: { record: any }) => record.users.length,
+    customRender: ({
+      record,
+    }: {
+      record: {
+        dept: { deptId: string | number; deptName: string };
+        users: PersonVO[];
+      };
+    }) => record.users.length,
   },
   {
     title: '人员',
     dataIndex: 'users',
     key: 'users',
-    customRender: ({ record }: { record: any }) =>
+    customRender: ({
+      record,
+    }: {
+      record: {
+        dept: { deptId: string | number; deptName: string };
+        users: PersonVO[];
+      };
+    }) =>
       record.users.map((user: any) =>
         h(
           Tag,
@@ -129,7 +150,12 @@ function handleRemoveRow(index: number) {
   tableData.splice(index, 1);
 }
 
-function handleTableData(newTableData: any) {
+function handleTableData(
+  newTableData: {
+    dept: { deptId: string | number; deptName: string };
+    users: PersonVO[];
+  }[],
+) {
   // 如果现有数据为空，直接替换
   if (tableData.length === 0) {
     tableData.splice(0, 0, ...newTableData);
@@ -145,7 +171,7 @@ function handleTableData(newTableData: any) {
   for (const newItem of newTableData) {
     // 查找是否已存在相同部门
     const existingDeptIndex = tableData.findIndex(
-      (item) => item.dept.unitId === newItem.dept.unitId,
+      (item) => item.dept.deptId === newItem.dept.deptId,
     );
 
     if (existingDeptIndex !== -1) {
@@ -154,7 +180,7 @@ function handleTableData(newTableData: any) {
       for (const newUser of newItem.users) {
         // 检查该用户是否已存在
         const userExists = existingDept?.users.some(
-          (existingUser) => existingUser.id === newUser.id,
+          (existingUser) => existingUser.userId === newUser.userId,
         );
         if (!userExists) {
           // 用户不存在，添加到现有部门
@@ -187,7 +213,9 @@ const [BasicModal, modalApi] = useVbenModal({
     modalApi.modalLoading(false);
   },
 });
-const totalSelected: number = 0;
+const totalSelected = computed(() =>
+  tableData.reduce((sum, row) => sum + (row.users?.length || 0), 0),
+);
 
 function handleAdd() {
   unitPersonmodalApi.setData({});
@@ -255,9 +283,9 @@ async function handleConfirm() {
     for (const item of tableData) {
       for (const user of item.users) {
         data.userGroupList.push({
-          deptId: item.dept.unitId, //部门ID
-          deptName: item.dept.unitName, //部门名称
-          employeeId: user.id, //员工ID
+          deptId: item.dept.deptId, //部门ID
+          deptName: item.dept.deptName, //部门名称
+          employeeId: user.userId, //员工ID
           employeeName: user.userName, //员工姓名
         });
       }
diff --git a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts
index b8f8f270..27466c77 100644
--- a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts
@@ -106,7 +106,10 @@ export const columns: VxeGridProps['columns'] = [
     field: 'attendanceGroup.attendanceType',
     slots: {
       default: ({ row }) => {
-        return renderDict(String(row.attendanceGroup.attendanceType),'wy_kqlx')
+        return renderDict(
+          String(row.attendanceGroup.attendanceType),
+          'wy_kqlx',
+        );
       },
     },
     width: 'auto',
@@ -118,9 +121,12 @@ export const columns: VxeGridProps['columns'] = [
     slots: {
       default: ({ row }) => {
         if (row.attendanceShift.startTime && row.attendanceShift.endTime) {
-          if(row.attendanceShift.restEndTime&&row.attendanceShift.restStartTime){
+          if (
+            row.attendanceShift.restEndTime &&
+            row.attendanceShift.restStartTime
+          ) {
             return `${row.attendanceShift.startTime}～${row.attendanceShift.endTime} ${row.shift.restStartTime}～${row.shift.restEndTime}`;
-          }else{
+          } else {
             return `${row.attendanceShift.startTime}～${row.attendanceShift.endTime}`;
           }
         }
@@ -193,12 +199,12 @@ export const unitColumns: VxeGridProps['columns'] = [
   },
   {
     title: '所属单位',
-    field: 'unitName',
+    field: 'deptName',
     width: 'auto',
   },
   {
     title: '电话',
-    field: 'phone',
+    field: 'phonenumber',
     minWidth: 120,
   },
 ];
@@ -266,7 +272,7 @@ export const modalSchema: FormSchemaGetter = () => [
 ];
 
 //排班日期详情
-export const workforceDayDetailColumns:VxeGridProps['columns'] =[
+export const workforceDayDetailColumns: VxeGridProps['columns'] = [
   {
     title: '序号',
     field: 'id',
@@ -287,16 +293,18 @@ export const workforceDayDetailColumns:VxeGridProps['columns'] =[
     field: 'attendanceGroup.attendanceType',
     slots: {
       default: ({ row }) => {
-        return renderDict(String(row.attendanceGroup.attendanceType),'wy_kqlx')
+        return renderDict(
+          String(row.attendanceGroup.attendanceType),
+          'wy_kqlx',
+        );
       },
     },
     width: 'auto',
-
   },
   {
     title: '班次名称',
     field: 'shift.name',
-    width:'auto' ,
+    width: 'auto',
   },
   {
     title: '考勤时间',
@@ -305,9 +313,9 @@ export const workforceDayDetailColumns:VxeGridProps['columns'] =[
     slots: {
       default: ({ row }) => {
         if (row.shift.startTime && row.shift.endTime) {
-          if(row.shift.restEndTime&&row.shift.restStartTime){
+          if (row.shift.restEndTime && row.shift.restStartTime) {
             return `${row.shift.startTime}～${row.shift.endTime} ${row.shift.restStartTime}～${row.shift.restEndTime}`;
-          }else{
+          } else {
             return `${row.shift.startTime}～${row.shift.endTime}`;
           }
         }
@@ -318,7 +326,7 @@ export const workforceDayDetailColumns:VxeGridProps['columns'] =[
   {
     title: '班组人数',
     field: 'userCount',
-    width:100,
+    width: 100,
     slots: { default: 'userCount' },
   },
   {
@@ -328,4 +336,4 @@ export const workforceDayDetailColumns:VxeGridProps['columns'] =[
     fixed: 'right',
     slots: { default: 'userGroupList' },
   },
-]
+];
diff --git a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/dept-tree.vue b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/dept-tree.vue
new file mode 100644
index 00000000..5eca1902
--- /dev/null
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/dept-tree.vue
@@ -0,0 +1,122 @@
+<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 { getDeptTree } from '#/api/system/user';
+
+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);
+
+async function loadTree() {
+  showTreeSkeleton.value = true;
+  searchValue.value = '';
+  selectDeptId.value = [];
+  const ret = await getDeptTree();
+  deptTreeArray.value = ret;
+  showTreeSkeleton.value = false;
+}
+
+async function handleReload() {
+  await loadTree();
+  emit('reload');
+}
+
+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-if="deptTreeArray.length > 0"
+            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 v-else class="mt-5">
+            <Empty
+              :image="Empty.PRESENTED_IMAGE_SIMPLE"
+              description="无部门数据"
+            />
+          </div>
+        </div>
+      </div>
+    </Skeleton>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/scheduleView.vue b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/scheduleView.vue
index c2d101a0..6a22a6aa 100644
--- a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/scheduleView.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/scheduleView.vue
@@ -114,6 +114,7 @@ async function handleDelete(row: Required<ArrangementForm>) {
             border: '1px solid #d9d9d9',
             borderRadius: '4px',
           }"
+          class="calendar"
         >
           <Calendar
             v-model:value="value"
@@ -158,7 +159,7 @@ async function handleDelete(row: Required<ArrangementForm>) {
   </div>
 </template>
 <style scoped>
-:deep(.ant-radio-group) {
+.calendar :deep(.ant-radio-group) {
   display: none;
 }
 </style>
diff --git a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/type.d.ts b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/type.d.ts
index f3685f2a..9f4afa2d 100644
--- a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/type.d.ts
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/type.d.ts
@@ -1,67 +1,52 @@
 //列表数据，用于展示人员列表
 export interface PersonVO {
-  /**
-   * 主键id
-   */
-  id: string | number;
-
-  /**
-   * 用户id
-   */
-  userId: string | number;
-
-  /**
-   * 用户名称
-   */
+  userId: string;
+  tenantId: string;
+  deptId: number;
   userName: string;
-
-  /**
-   * 联系电话
-   */
-  phone: string;
-
-  /**
-   * 性别
-   */
-  gender: number;
-
-  /**
-   * 人脸图片
-   */
-  img: string;
-
-  /**
-   * 所属单位id
-   */
-  unitId: string | number;
-
-  /**
-   * 所属单位名称
-   */
-  unitName: string;
-
-  /**
-   * 入驻位置
-   */
-  locathon: string;
-
-  /**
-   * 入驻时间
-   */
-  time: string;
-
-  /**
-   * 车牌号码
-   */
-  carNumber: string;
-
-  /**
-   * 状态
-   */
-  state: number | string;
-
-  /**
-   * 备注
-   */
+  nickName: string;
+  userType: string;
+  email: string;
+  phonenumber: string;
+  sex: string;
+  avatar?: string;
+  status: string;
+  loginIp: string;
+  loginDate: string;
   remark: string;
+  createTime: string;
+  dept: Dept;
+  roles: Role[];
+  roleIds?: string[];
+  postIds?: number[];
+  roleId: string;
+  deptName: string;
+}
+export interface Dept {
+  deptId: number;
+  parentId: number;
+  parentName?: string;
+  ancestors: string;
+  deptName: string;
+  orderNum: number;
+  leader: string;
+  phone?: string;
+  email?: string;
+  status: string;
+  createTime?: string;
+}
+
+export interface Role {
+  roleId: string;
+  roleName: string;
+  roleKey: string;
+  roleSort: number;
+  dataScope: string;
+  menuCheckStrictly?: boolean;
+  deptCheckStrictly?: boolean;
+  status: string;
+  remark: string;
+  createTime?: string;
+  flag: boolean;
+  superAdmin: boolean;
 }
diff --git a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/unit-person-modal.vue b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/unit-person-modal.vue
index d2b9a3b4..425ef105 100644
--- a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/unit-person-modal.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/unit-person-modal.vue
@@ -1,35 +1,22 @@
 <script setup lang="ts">
-import { computed, ref, reactive, onMounted, watch } from 'vue';
-import { SyncOutlined } from '@ant-design/icons-vue';
-import {
-  Tree,
-  InputSearch,
-  Skeleton,
-  Empty,
-  Button,
-  Tag,
-} from 'ant-design-vue';
+import { computed, ref, reactive, watch } from 'vue';
+import { Tag } from 'ant-design-vue';
 
 import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
 
 import { useVbenForm } from '#/adapter/form';
-import {
-  arrangementAdd,
-  arrangementInfo,
-  arrangementUpdate,
-} from '#/api/property/attendanceManagement/arrangement';
+import { arrangementInfo } from '#/api/property/attendanceManagement/arrangement';
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
 import { modalSchema, unitColumns, unitQuerySchema } from './data';
-import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
-import { resident_unitList } from '#/api/property/resident/unit';
-import { personList } from '#/api/property/resident/person';
+import { useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { userList } from '#/api/system/user';
 import type { PersonVO } from './type';
+import DeptTree from './dept-tree.vue';
 const emit = defineEmits<{
   reload: [
     tableData: {
-      dept: { unitId: string | number; unitName: string };
+      dept: { deptId: string | number; deptName: string };
       users: PersonVO[];
     }[],
   ];
@@ -39,27 +26,8 @@ const isUpdate = ref(false);
 const title = computed(() => {
   return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
 });
-const showSearch = ref(true);
-const searchValue = ref('');
 const selectedDeptIds = ref<string[]>([]);
 const showTreeSkeleton = ref(false);
-//单位树
-const deptTree = reactive<
-  {
-    id: string;
-    label: string;
-    children: {
-      id: string;
-      label: string;
-    }[];
-  }[]
->([
-  {
-    id: '',
-    label: '全部单位',
-    children: [],
-  },
-]);
 
 //勾选内容
 let selectedUsers = ref<PersonVO[]>([]);
@@ -67,34 +35,10 @@ let selectedUsers = ref<PersonVO[]>([]);
 
 let tableData = reactive<
   {
-    dept: { unitId: string | number; unitName: string };
+    dept: { deptId: string | number; deptName: string };
     users: PersonVO[];
   }[]
 >([]);
-function handleReload() {
-  showTreeSkeleton.value = true;
-  setTimeout(() => {
-    showTreeSkeleton.value = false;
-  }, 800);
-}
-
-const filteredDeptTree = computed(() => {
-  if (!searchValue.value) return deptTree;
-  // 递归过滤树
-  function filter(tree: any[]): any[] {
-    return tree
-      .map((node) => {
-        if (node.label.includes(searchValue.value)) return node;
-        if (node.children) {
-          const children = filter(node.children);
-          if (children.length) return { ...node, children };
-        }
-        return null;
-      })
-      .filter(Boolean);
-  }
-  return filter(deptTree);
-});
 
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
@@ -159,6 +103,15 @@ const formOptions: VbenFormProps = {
   //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
   //  ],
   // ],
+  handleReset: async () => {
+    selectDeptId.value = [];
+
+    const { formApi, reload } = tableApi;
+    await formApi.resetForm();
+    const formValues = formApi.form.values;
+    formApi.setLatestSubmissionValues(formValues);
+    await reload(formValues);
+  },
 };
 const gridOptions: VxeGridProps = {
   checkboxConfig: {
@@ -178,11 +131,17 @@ const gridOptions: VxeGridProps = {
   pagerConfig: {},
   proxyConfig: {
     ajax: {
-      query: async ({ page }) => {
-        return await personList({
+      query: async ({ page }, formValues = {}) => {
+        // 部门树选择处理
+        if (selectDeptId.value.length === 1) {
+          formValues.deptId = selectDeptId.value[0];
+        } else {
+          Reflect.deleteProperty(formValues, 'deptId');
+        }
+        return await userList({
           pageNum: page.currentPage,
           pageSize: page.pageSize,
-          unitId: selectedDeptIds.value[0],
+          ...formValues,
         });
       },
     },
@@ -222,13 +181,13 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
 async function handleConfirm() {
   try {
     for (const user of selectedUsers.value) {
-      if (tableData.find((item) => item.dept.unitId === user.unitId)) {
+      if (tableData.find((item) => item.dept.deptId === user.deptId)) {
         tableData
-          .find((item) => item.dept.unitId === user.unitId)!
+          .find((item) => item.dept.deptId === user.deptId)!
           .users.push(user);
       } else {
         tableData.push({
-          dept: { unitId: user.unitId, unitName: user.unitName },
+          dept: { deptId: user.deptId, deptName: user.deptName },
           users: [user],
         });
       }
@@ -237,7 +196,7 @@ async function handleConfirm() {
     resetInitialized();
     emit('reload', tableData);
     tableData = [];
-    selectedUsers.value =[];
+    selectedUsers.value = [];
     modalApi.close();
   } catch (error) {
     console.error(error);
@@ -250,19 +209,6 @@ async function handleClosed() {
   await formApi.resetForm();
   resetInitialized();
 }
-
-async function getUnitList() {
-  deptTree[0]!.children = [];
-  const res = await resident_unitList();
-  if (deptTree[0] && Array.isArray(deptTree[0].children)) {
-    for (const item of res.rows) {
-      deptTree[0].children.push({
-        id: item.id as string,
-        label: item.name as string,
-      });
-    }
-  }
-}
 // 查询对应部门人员列表
 async function fetchDeptUsers() {
   tableApi.query();
@@ -272,85 +218,35 @@ watch(selectedDeptIds, (newVal) => {
     fetchDeptUsers();
   }
 });
-onMounted(() => {
-  getUnitList();
-});
 </script>
 
 <template>
   <BasicModal :title="title">
-    <div class="mb-2 flex">
-      <div>
-        <Skeleton
-          :loading="showTreeSkeleton"
-          :paragraph="{ rows: 8 }"
-          active
-          class="p-[8px]"
-        >
+    <Page :auto-content-height="true">
+      <div class="flex h-full gap-[8px]">
+        <DeptTree
+          v-model:select-dept-id="selectDeptId"
+          class="w-[200px]"
+          @reload="() => tableApi.reload()"
+          @select="() => tableApi.reload()"
+        />
+        <div class="flex-1 overflow-hidden">
           <div
-            class="bg-background z-100 sticky left-0 top-0 flex items-center p-[8px]"
+            class="mb-2 flex overflow-auto"
+            style="max-height: 80px; font-size: 14px"
           >
-            <InputSearch
-              v-model:value="searchValue"
-              placeholder="搜索单位"
-              size="small"
-              style="flex: 1"
+            已选人员：
+            <span
+              v-for="user in selectedUsers"
+              :key="user.userId"
+              style="margin-right: 8px"
             >
-              <template #enterButton>
-                <Button type="text" @click="getUnitList">
-                  <SyncOutlined class="text-primary" />
-                </Button>
-              </template>
-            </InputSearch>
+              <Tag>{{ user.userName }}</Tag>
+            </span>
           </div>
-          <div class="h-full overflow-x-hidden px-[8px]">
-            <Tree
-              v-if="filteredDeptTree.length > 0"
-              v-model:selectedKeys="selectedDeptIds"
-              :field-names="{ title: 'label', key: 'id' }"
-              :show-line="{ showLeafIcon: false }"
-              :tree-data="filteredDeptTree"
-              :virtual="false"
-              default-expand-all
-            >
-              <template #title="{ label }">
-                <span v-if="searchValue && 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 v-else class="mt-5">
-              <Empty
-                :image="Empty.PRESENTED_IMAGE_SIMPLE"
-                description="无单位数据"
-              />
-            </div>
-          </div>
-        </Skeleton>
-      </div>
-      <div class="flex-1">
-        <div
-          class="mb-2 flex overflow-auto"
-          style="max-height: 80px; font-size: 14px"
-        >
-          已选人员：
-          <span
-            v-for="user in selectedUsers"
-            :key="user.id"
-            style="margin-right: 8px"
-          >
-            <Tag>{{ user.userName }}</Tag>
-          </span>
+          <BasicTable> </BasicTable>
         </div>
-        <BasicTable> </BasicTable>
       </div>
-    </div>
+    </Page>
   </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
index 52143fee..d56d9376 100644
--- a/apps/web-antd/src/views/videoSystem/videoWarning/videoAlertList/index.vue
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoAlertList/index.vue
@@ -38,7 +38,6 @@
           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="{
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/data.ts b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/data.ts
new file mode 100644
index 00000000..a6cae811
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/data.ts
@@ -0,0 +1,265 @@
+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: 'deviceName',
+    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: 'expectedProcessingTime',
+    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',
+    disabled: true,
+  },
+  {
+    label: '预警时间',
+    fieldName: 'alarmTime',
+    component: 'DatePicker',
+    componentProps: {
+      format: 'YYYY.MM.DD HH:mm',
+      valueFormat: 'YYYY.MM.DD HH:mm',
+      showTime: true,
+    },
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '预警类型',
+    fieldName: 'alarmType',
+    component: 'Input',
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '描述',
+    fieldName: 'description',
+    component: 'Input',
+    formItemClass: 'col-span-2',
+    disabled: true,
+  },
+  {
+    label: '所在位置',
+    fieldName: 'location',
+    component: 'Input',
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '设备名称',
+    fieldName: 'deviceName',
+    component: 'Input',
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '处理情况',
+    fieldName: 'processingDetails',
+    component: 'Input',
+    componentProps: {
+      rows: 3,
+    },
+    formItemClass: 'col-span-2',
+    disabled: true,
+  },
+  {
+    label: '处理时间',
+    fieldName: 'processingTime',
+    component: 'DatePicker',
+    componentProps: {
+      format: 'YYYY.MM.DD HH:mm',
+      valueFormat: 'YYYY.MM.DD HH:mm',
+      showTime: true,
+    },
+    disabled: true,
+  },
+  {
+    label: '处理图片',
+    fieldName: 'imgUrl',
+    component: 'Input',
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '级别',
+    fieldName: 'level',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '特大', value: '特大' },
+        { label: '重要', value: '重要' },
+        { label: '一般', value: '一般' },
+      ],
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '处理状态',
+    fieldName: 'processingStatus',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '待分配', value: '待分配' },
+        { label: '处理中', value: '处理中' },
+        { label: '已完成', value: '已完成' },
+      ],
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '预期处理时间',
+    fieldName: 'expectedProcessingTime',
+    component: 'DatePicker',
+    componentProps: {
+      format: 'YYYY.MM.DD HH:mm',
+      valueFormat: 'YYYY.MM.DD HH:mm',
+      showTime: true,
+    },
+    rules: 'required',
+  },
+];
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/index.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/index.vue
new file mode 100644
index 00000000..99106647
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/index.vue
@@ -0,0 +1,279 @@
+<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';
+import imgPng from '../../../../assets/algorithmManagement/image.png';
+
+// 假数据
+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',
+    imgUrl: imgPng,
+  },
+  {
+    id: 3,
+    alarmId: 'JWD-3434236',
+    alarmTime: '2025.07.21 10:45',
+    level: '一般',
+    alarmType: '设备故障',
+    description: '摄像头离线',
+    location: '3栋走廊',
+    processingStatus: '已完成',
+    processingDetails: '已修复设备',
+    processingTime: '2025.07.21 11:00',
+    imgUrl: imgPng,
+  },
+  {
+    id: 4,
+    alarmId: 'JWD-3434236',
+    alarmTime: '2025.07.21 10:45',
+    level: '一般',
+    alarmType: '设备故障',
+    description: '摄像头离线',
+    location: '3栋走廊',
+    processingStatus: '已完成',
+    processingDetails: '已修复设备',
+    processingTime: '2025.07.21 11:00',
+    imgUrl: imgPng,
+  },
+]);
+
+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>
+<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>
+<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/videoWarningHasDone/level-setting-modal.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/level-setting-modal.vue
new file mode 100644
index 00000000..1568374a
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/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/videoWarningHasDone/warning-detail.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/warning-detail.vue
new file mode 100644
index 00000000..9479a43b
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/warning-detail.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import { useVbenModal } from '@vben/common-ui';
+import {
+  Descriptions,
+  DescriptionsItem,
+  Tag,
+  Timeline,
+  TimelineItem,
+} 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' }"
+      style="margin-bottom: 30px"
+    >
+      <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>
+      <DescriptionsItem label="设备名称">
+        {{ warningDetail.deviceName || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem
+        label="预处理时间"
+        v-if="warningDetail.processingStatus === '处理中'"
+      >
+        {{ warningDetail.expectedProcessingTime || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem
+        label="处理图片"
+        v-if="warningDetail.processingStatus === '已完成'"
+      >
+        <img
+          :src="warningDetail.imgUrl"
+          alt="处理图片"
+          style="max-width: 200px; max-height: 150px"
+        />
+      </DescriptionsItem>
+    </Descriptions>
+    <Timeline>
+      <TimelineItem>
+        <p style="display: flex">类型：已完成</p>
+        <p>时间：2025-06-01 11:07:59</p>
+        <p>处理人：张三</p>
+      </TimelineItem>
+      <TimelineItem>
+        <p style="display: flex">类型：处理异常</p>
+        <p>时间：2025-06-01 11:07:59</p>
+        <p>处理人：张三</p>
+        <p>异常原因：时长不够</p>
+      </TimelineItem>
+      <TimelineItem>
+        <p style="display: flex">类型：处理中</p>
+        <p>时间：2025-06-01 11:07:59</p>
+        <p>处理人：张三</p>
+      </TimelineItem>
+      <TimelineItem>
+        <p style="display: flex">类型：创建预警</p>
+        <p>时间：2025-06-01 11:07:59</p>
+        <p>处理人：张三</p>
+      </TimelineItem>
+    </Timeline>
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/warning-modal.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/warning-modal.vue
new file mode 100644
index 00000000..125a333e
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/warning-modal.vue
@@ -0,0 +1,122 @@
+<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>
+
+<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),
+:deep(.ant-picker-disabled .ant-picker-input > input) {
+  /* 设置一个更深的颜色 */
+  color: rgb(0 0 0 / 65%) !important;
+
+  /* 有些浏览器需要这个来覆盖默认颜色 */
+  -webkit-text-fill-color: rgb(0 0 0 / 65%) !important;
+}
+</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
index 7639cf63..a6cae811 100644
--- a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/data.ts
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/data.ts
@@ -48,6 +48,11 @@ export const columns: VxeGridProps['columns'] = [
     field: 'alarmTime',
     width: 150,
   },
+  {
+    title: '设备名称',
+    field: 'deviceName',
+    width: 150,
+  },
   {
     title: '级别',
     field: 'level',
@@ -116,6 +121,11 @@ export const columns: VxeGridProps['columns'] = [
     field: 'processingDetails',
     width: 150,
   },
+  {
+    title: '预期处理时间',
+    field: 'expectedProcessingTime',
+    width: 150,
+  },
   {
     title: '处理时间',
     field: 'processingTime',
@@ -145,6 +155,7 @@ export const modalSchema: FormSchemaGetter = () => [
     fieldName: 'alarmId',
     component: 'Input',
     rules: 'required',
+    disabled: true,
   },
   {
     label: '预警时间',
@@ -156,6 +167,63 @@ export const modalSchema: FormSchemaGetter = () => [
       showTime: true,
     },
     rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '预警类型',
+    fieldName: 'alarmType',
+    component: 'Input',
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '描述',
+    fieldName: 'description',
+    component: 'Input',
+    formItemClass: 'col-span-2',
+    disabled: true,
+  },
+  {
+    label: '所在位置',
+    fieldName: 'location',
+    component: 'Input',
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '设备名称',
+    fieldName: 'deviceName',
+    component: 'Input',
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '处理情况',
+    fieldName: 'processingDetails',
+    component: 'Input',
+    componentProps: {
+      rows: 3,
+    },
+    formItemClass: 'col-span-2',
+    disabled: true,
+  },
+  {
+    label: '处理时间',
+    fieldName: 'processingTime',
+    component: 'DatePicker',
+    componentProps: {
+      format: 'YYYY.MM.DD HH:mm',
+      valueFormat: 'YYYY.MM.DD HH:mm',
+      showTime: true,
+    },
+    disabled: true,
+  },
+  {
+    label: '处理图片',
+    fieldName: 'imgUrl',
+    component: 'Input',
+    rules: 'required',
+    disabled: true,
   },
   {
     label: '级别',
@@ -170,27 +238,6 @@ export const modalSchema: FormSchemaGetter = () => [
     },
     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',
@@ -205,22 +252,14 @@ export const modalSchema: FormSchemaGetter = () => [
     rules: 'selectRequired',
   },
   {
-    label: '处理情况',
-    fieldName: 'processingDetails',
-    component: 'InputTextArea',
-    componentProps: {
-      rows: 3,
-    },
-    formItemClass: 'col-span-2',
-  },
-  {
-    label: '处理时间',
-    fieldName: 'processingTime',
+    label: '预期处理时间',
+    fieldName: 'expectedProcessingTime',
     component: 'DatePicker',
     componentProps: {
       format: 'YYYY.MM.DD HH:mm',
       valueFormat: 'YYYY.MM.DD HH:mm',
       showTime: true,
     },
+    rules: 'required',
   },
 ];
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/index.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/index.vue
index b7ca1380..7ff8410d 100644
--- a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/index.vue
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/index.vue
@@ -1,73 +1,3 @@
-<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';
@@ -88,6 +18,7 @@ import { columns, querySchema } from './data';
 import warningModal from './warning-modal.vue';
 import warningDetail from './warning-detail.vue';
 import LevelSettingModal from './level-setting-modal.vue';
+import imgPng from '../../../../assets/algorithmManagement/image.png';
 
 // 假数据
 const mockData = ref([
@@ -102,6 +33,7 @@ const mockData = ref([
     processingStatus: '待分配',
     processingDetails: '',
     processingTime: '',
+    deviceName: '监控设备',
   },
   {
     id: 2,
@@ -114,6 +46,8 @@ const mockData = ref([
     processingStatus: '处理中',
     processingDetails: '已派人员前往处理',
     processingTime: '2025.07.21 11:30',
+    expectedProcessingTime: '2025.07.21 11:30',
+    deviceName: '门禁设备',
   },
   {
     id: 3,
@@ -126,6 +60,8 @@ const mockData = ref([
     processingStatus: '已完成',
     processingDetails: '已修复设备',
     processingTime: '2025.07.21 11:00',
+    imgUrl: imgPng,
+    deviceName: '消防设备',
   },
 ]);
 
@@ -209,9 +145,9 @@ function handleAssign(row: any) {
       // 模拟分配处理
       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();
+        // mockData.value[index].processingStatus = '处理中';
+        // mockData.value[index].processingDetails = '已分配给处理人员';
+        // mockData.value[index].processingTime = new Date().toLocaleString();
         tableApi.query();
       }
     },
@@ -247,7 +183,75 @@ function handleMultiDelete() {
   });
 }
 </script>
-
+<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>
 <style scoped lang="scss">
 .ant-table-wrapper {
   .ant-table-thead > tr > th {
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
index fe57c7f4..e6907e18 100644
--- a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-detail.vue
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-detail.vue
@@ -1,17 +1,36 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
-import { Descriptions, DescriptionsItem, Tag } from 'ant-design-vue';
+import {
+  Descriptions,
+  DescriptionsItem,
+  Tag,
+  Timeline,
+  TimelineItem,
+} from 'ant-design-vue';
 
 const [BasicModal, modalApi] = useVbenModal({
   onOpenChange: handleOpenChange,
   onClosed() {
-    warningDetail.value = null;
+    // warningDetail.value = null;
+     modalApi.close();
   },
 });
 
 const warningDetail = shallowRef<any>(null);
 
+// 时间线显示条件配置
+const timelineConfig = {
+  '已完成': ['已完成'],
+  '处理异常': ['已完成', '处理异常'],
+  '处理中': ['已完成', '处理中', '处理异常']
+};
+
+function showTimelineItem(type: string): boolean {
+  const currentStatus = warningDetail.value?.processingStatus;
+  return timelineConfig[type as keyof typeof timelineConfig]?.includes(currentStatus) || false;
+}
+
 async function handleOpenChange(open: boolean) {
   if (!open) {
     return null;
@@ -45,6 +64,7 @@ async function handleOpenChange(open: boolean) {
       :column="2"
       bordered
       :labelStyle="{ width: '120px' }"
+      style="margin-bottom: 30px"
     >
       <DescriptionsItem label="预警编号">
         {{ warningDetail.alarmId }}
@@ -93,6 +113,61 @@ async function handleOpenChange(open: boolean) {
       <DescriptionsItem label="处理时间">
         {{ warningDetail.processingTime || '-' }}
       </DescriptionsItem>
+      <DescriptionsItem label="设备名称">
+        {{ warningDetail.deviceName || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="预处理时间" v-if="warningDetail.processingStatus === '处理中'">
+        {{ warningDetail.expectedProcessingTime || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="处理图片" v-if="warningDetail.processingStatus === '已完成'">
+        <img :src="warningDetail.imgUrl" alt="处理图片" style="max-width: 200px; max-height: 150px;">
+      </DescriptionsItem>
     </Descriptions>
+          <!-- <Timeline>
+        <TimelineItem v-if="showTimelineItem('已完成')">
+          <p style="display: flex">类型：已完成</p>
+          <p>时间：2025-06-01 11:07:59</p>
+          <p>处理人：张三</p>
+        </TimelineItem>
+        <TimelineItem v-if="showTimelineItem('处理异常')">
+          <p style="display: flex">类型：处理异常</p>
+          <p>时间：2025-06-01 11:07:59</p>
+          <p>处理人：张三</p>
+          <p>异常原因：时长不够</p>
+        </TimelineItem>
+        <TimelineItem v-if="showTimelineItem('处理中')">
+          <p style="display: flex">类型：处理中</p>
+          <p>时间：2025-06-01 11:07:59</p>
+          <p>处理人：张三</p>
+        </TimelineItem>
+        <TimelineItem>
+          <p style="display: flex">类型：创建预警</p>
+          <p>时间：2025-06-01 11:07:59</p>
+          <p>处理人：张三</p>
+        </TimelineItem>
+      </Timeline> -->
+      <Timeline>
+      <TimelineItem v-if="warningDetail.processingStatus === '已完成'">
+        <p style="display: flex">类型：已完成</p>
+        <p>时间：2025-06-01 11:07:59</p>
+        <p>处理人：张三</p>
+      </TimelineItem>
+      <TimelineItem v-if="warningDetail.processingStatus === '已完成' || warningDetail.processingStatus === '处理异常'">
+        <p style="display: flex">类型：处理异常</p>
+        <p>时间：2025-06-01 11:07:59</p>
+        <p>处理人：张三</p>
+        <p>异常原因：时长不够</p>
+      </TimelineItem>
+      <TimelineItem v-if="warningDetail.processingStatus === '已完成'|| warningDetail.processingStatus === '处理中' || warningDetail.processingStatus === '处理异常'">
+        <p style="display: flex">类型：处理中</p>
+        <p>时间：2025-06-01 11:07:59</p>
+        <p>处理人：张三</p>
+      </TimelineItem>
+      <TimelineItem>
+        <p style="display: flex">类型：创建预警</p>
+        <p>时间：2025-06-01 11:07:59</p>
+        <p>处理人：张三</p>
+      </TimelineItem>
+    </Timeline>
   </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
index 9ad62f62..78c338ea 100644
--- a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-modal.vue
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-modal.vue
@@ -106,3 +106,16 @@ async function handleClosed() {
     <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),
+:deep(.ant-picker-disabled .ant-picker-input > input) {
+  /* 设置一个更深的颜色 */
+  color: rgb(0 0 0 / 65%) !important;
+
+  /* 有些浏览器需要这个来覆盖默认颜色 */
+  -webkit-text-fill-color: rgb(0 0 0 / 65%) !important;
+}
+</style>
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/data.ts b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/data.ts
new file mode 100644
index 00000000..a6cae811
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/data.ts
@@ -0,0 +1,265 @@
+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: 'deviceName',
+    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: 'expectedProcessingTime',
+    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',
+    disabled: true,
+  },
+  {
+    label: '预警时间',
+    fieldName: 'alarmTime',
+    component: 'DatePicker',
+    componentProps: {
+      format: 'YYYY.MM.DD HH:mm',
+      valueFormat: 'YYYY.MM.DD HH:mm',
+      showTime: true,
+    },
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '预警类型',
+    fieldName: 'alarmType',
+    component: 'Input',
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '描述',
+    fieldName: 'description',
+    component: 'Input',
+    formItemClass: 'col-span-2',
+    disabled: true,
+  },
+  {
+    label: '所在位置',
+    fieldName: 'location',
+    component: 'Input',
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '设备名称',
+    fieldName: 'deviceName',
+    component: 'Input',
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '处理情况',
+    fieldName: 'processingDetails',
+    component: 'Input',
+    componentProps: {
+      rows: 3,
+    },
+    formItemClass: 'col-span-2',
+    disabled: true,
+  },
+  {
+    label: '处理时间',
+    fieldName: 'processingTime',
+    component: 'DatePicker',
+    componentProps: {
+      format: 'YYYY.MM.DD HH:mm',
+      valueFormat: 'YYYY.MM.DD HH:mm',
+      showTime: true,
+    },
+    disabled: true,
+  },
+  {
+    label: '处理图片',
+    fieldName: 'imgUrl',
+    component: 'Input',
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '级别',
+    fieldName: 'level',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '特大', value: '特大' },
+        { label: '重要', value: '重要' },
+        { label: '一般', value: '一般' },
+      ],
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '处理状态',
+    fieldName: 'processingStatus',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '待分配', value: '待分配' },
+        { label: '处理中', value: '处理中' },
+        { label: '已完成', value: '已完成' },
+      ],
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '预期处理时间',
+    fieldName: 'expectedProcessingTime',
+    component: 'DatePicker',
+    componentProps: {
+      format: 'YYYY.MM.DD HH:mm',
+      valueFormat: 'YYYY.MM.DD HH:mm',
+      showTime: true,
+    },
+    rules: 'required',
+  },
+];
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/index.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/index.vue
new file mode 100644
index 00000000..cb074052
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/index.vue
@@ -0,0 +1,276 @@
+<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';
+import imgPng from '../../../../assets/algorithmManagement/image.png';
+
+// 假数据
+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',
+  },
+  {
+    id: 4,
+    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>
+<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>
+<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/videoWarningToDone/level-setting-modal.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/level-setting-modal.vue
new file mode 100644
index 00000000..1568374a
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/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/videoWarningToDone/warning-detail.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/warning-detail.vue
new file mode 100644
index 00000000..9479a43b
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/warning-detail.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import { useVbenModal } from '@vben/common-ui';
+import {
+  Descriptions,
+  DescriptionsItem,
+  Tag,
+  Timeline,
+  TimelineItem,
+} 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' }"
+      style="margin-bottom: 30px"
+    >
+      <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>
+      <DescriptionsItem label="设备名称">
+        {{ warningDetail.deviceName || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem
+        label="预处理时间"
+        v-if="warningDetail.processingStatus === '处理中'"
+      >
+        {{ warningDetail.expectedProcessingTime || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem
+        label="处理图片"
+        v-if="warningDetail.processingStatus === '已完成'"
+      >
+        <img
+          :src="warningDetail.imgUrl"
+          alt="处理图片"
+          style="max-width: 200px; max-height: 150px"
+        />
+      </DescriptionsItem>
+    </Descriptions>
+    <Timeline>
+      <TimelineItem>
+        <p style="display: flex">类型：已完成</p>
+        <p>时间：2025-06-01 11:07:59</p>
+        <p>处理人：张三</p>
+      </TimelineItem>
+      <TimelineItem>
+        <p style="display: flex">类型：处理异常</p>
+        <p>时间：2025-06-01 11:07:59</p>
+        <p>处理人：张三</p>
+        <p>异常原因：时长不够</p>
+      </TimelineItem>
+      <TimelineItem>
+        <p style="display: flex">类型：处理中</p>
+        <p>时间：2025-06-01 11:07:59</p>
+        <p>处理人：张三</p>
+      </TimelineItem>
+      <TimelineItem>
+        <p style="display: flex">类型：创建预警</p>
+        <p>时间：2025-06-01 11:07:59</p>
+        <p>处理人：张三</p>
+      </TimelineItem>
+    </Timeline>
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/warning-modal.vue b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/warning-modal.vue
new file mode 100644
index 00000000..78c338ea
--- /dev/null
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/warning-modal.vue
@@ -0,0 +1,121 @@
+<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>
+<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),
+:deep(.ant-picker-disabled .ant-picker-input > input) {
+  /* 设置一个更深的颜色 */
+  color: rgb(0 0 0 / 65%) !important;
+
+  /* 有些浏览器需要这个来覆盖默认颜色 */
+  -webkit-text-fill-color: rgb(0 0 0 / 65%) !important;
+}
+</style>