feat(alarm-page): realtime refresh

src/pages/alarm-page.vue

@@ -5,7 +5,9 @@ import { AlarmType, DeviceType, DeviceTypeCode, DeviceTypeName, FaultLevel, tryG
 import { useAlarmStore, useStationStore } from '@/stores';
 import { downloadByData } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
+import { watchDebounced } from '@vueuse/core';
 import dayjs from 'dayjs';
+import { debounce } from 'es-toolkit';
 import {
   NForm,
   NInput,
@@ -25,6 +27,8 @@ import {
   type DataTableColumns,
   type DataTableRowData,
   type PaginationProps,
+  NFlex,
+  NSwitch,
 } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import { ref, reactive, onBeforeMount, h, computed, watch } from 'vue';
@@ -41,6 +45,20 @@ watch(unreadCountCleared, (newValue, oldValue) => {
   }
 });
 
+const realtimeRefresh = ref(false);
+
+watchDebounced(
+  [unreadAlarmCount, realtimeRefresh],
+  ([unreadCount, refresh]) => {
+    if (unreadCount > 0 && refresh) {
+      onClickReset();
+    }
+  },
+  {
+    debounce: 500,
+  },
+);
+
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
 
@@ -280,6 +298,7 @@ const onClickReset = () => {
   tablePagination.itemCount = 0;
   getTableData();
 };
+const onClickResetDebounced = debounce(onClickReset, 500);
 const onClickQuery = () => {
   if (searchFieldsChanged.value) {
     tablePagination.page = 1;
@@ -428,9 +447,11 @@ onBeforeMount(() => getTableData());
     <!-- 工具栏：横向、右对齐按钮） -->
     <div style="flex: 0 0 auto; display: flex; align-items: center; padding: 8px">
       <div style="font-size: medium">设备告警列表</div>
-      <NSpace style="margin-left: auto">
+      <NFlex align="center" style="margin-left: auto">
+        <div>实时刷新</div>
+        <NSwitch size="small" v-model:value="realtimeRefresh" />
         <NButton type="primary" :loading="exporting" @click="() => exportTableData()">导出</NButton>
-      </NSpace>
+      </NFlex>
     </div>
 
     <!-- 表格区域：填满剩余空间 -->