视频告警页面完善

apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/index.vue

@@ -2,76 +2,20 @@
 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 { Modal, Popconfirm, Space } from 'ant-design-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',
-  },
-]);
+import {alarmEventsList, alarmEventsListCurr, alarmEventsRemove} from '#/api/sis/alarmEvents';
+import type { AlarmEventsForm } from '#/api/sis/alarmEvents/model';
 
+/* 搜索栏配置 */
 const formOptions: VbenFormProps = {
   commonConfig: {
     labelWidth: 100,
@@ -83,14 +27,32 @@ const formOptions: VbenFormProps = {
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
 };
 
+/* table栏配置 */
 const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+  // columns: columns(),
   columns,
   height: 'auto',
-  data: mockData.value,
-  pagerConfig: {
-    currentPage: 1,
-    pageSize: 10,
-    total: mockData.value.length,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await alarmEventsListCurr({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          states: [20, 30, 31, 32],
+          ...formValues,
+        });
+      },
+    },
   },
   rowConfig: {
     keyField: 'id',
@@ -104,14 +66,6 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
 });
 
 // 监听数据变化，强制重新渲染表格
-const tableKey = ref(0);
-watch(
-  mockData,
-  () => {
-    tableKey.value++;
-  },
-  { deep: true },
-);
 
 const [WarningModal, modalApi] = useVbenModal({
   connectedComponent: warningModal,
@@ -121,51 +75,22 @@ 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.setData({ id: row.id, data: row });
   detailApi.open();
 }
 
 // 编辑
 async function handleEdit(row: any) {
-  modalApi.setData({ id: row.id, data: mockData.value });
+  modalApi.setData({ id: row.id, data: row });
   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);
+  const index = row.id;
   if (index !== -1) {
-    mockData.value.splice(index, 1);
     await tableApi.query();
   }
 }
@@ -173,18 +98,13 @@ async function handleDelete(row: any) {
 // 批量删除
 function handleMultiDelete() {
   const rows = tableApi.grid.getCheckboxRecords();
-  const ids = rows.map((row: any) => row.id);
+  const ids = rows.map((row: Required<AlarmEventsForm>) => 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 alarmEventsRemove(ids);
       await tableApi.query();
     },
   });
@@ -192,11 +112,7 @@ function handleMultiDelete() {
 </script>
 <template>
   <Page :auto-content-height="true">
-    <BasicTable
-      :key="tableKey"
-      class="flex-1 overflow-hidden"
-      table-title="视频预警处理"
-    >
+    <BasicTable class="flex-1 overflow-hidden" table-title="视频预警处理">
       <template #toolbar-tools>
         <Space>
           <a-button
@@ -224,19 +140,14 @@ function handleMultiDelete() {
           >
             {{ $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"
@@ -256,7 +167,6 @@ function handleMultiDelete() {
     </BasicTable>
     <WarningModal @reload="tableApi.query()" />
     <WarningDetail />
-    <LevelSettingModalComp @reload="tableKey++" />
   </Page>
 </template>
 <style scoped lang="scss">