feat: 添加活动告警自动刷新功能并优化代码结构

src/layouts/BasicLayout.vue

@@ -217,6 +217,7 @@ onMounted(() => {
 let serverTimeInterval: any = null;
 let serverTime = 0;
 let serverTimeZone = getTimezoneOffset();
+let activeAlarmRefresh = 0;
 
 // 获取服务器时间
 function fnGetServerTime() {
@@ -230,6 +231,7 @@ function fnGetServerTime() {
       const serverTimeDom = document.getElementById('serverTimeDom');
       serverTimeInterval = setInterval(() => {
         serverTime += 1000;
+        activeAlarmRefresh += 1;
         if (serverTimeDom) {
           serverTimeDom.innerText = parseDateUTCToStr(
             serverTime,
@@ -239,6 +241,10 @@ function fnGetServerTime() {
           clearInterval(serverTimeInterval);
           serverTimeInterval = null;
         }
+        if (activeAlarmRefresh === 5) {
+          useAlarmStore().fnGetActiveAlarmInfo();
+          activeAlarmRefresh = 0;
+        }
       }, 1000);
     }
   });

src/views/faultManage/active-alarm/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, toRaw } from 'vue';
+import { reactive, ref, onMounted, toRaw, onBeforeUnmount } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { ProModal } from 'antdv-pro-modal';
 import { message, Modal } from 'ant-design-vue/es';
@@ -560,22 +560,24 @@ function fnCancelConfirm() {
  */
 function fnSync() {
   const hide = message.loading(t('common.loading'), 0);
-  listSync().then(res => {
+  listSync()
-    if (res.code === RESULT_CODE_SUCCESS) {
+    .then(res => {
-      message.success({
+      if (res.code === RESULT_CODE_SUCCESS) {
-        content: t('views.faultManage.activeAlarm.sysncSuss'),
+        message.success({
-        duration: 2,
+          content: t('views.faultManage.activeAlarm.sysncSuss'),
-      });
+          duration: 2,
-      fnGetList();
+        });
-    } else {
+        fnGetList();
-      message.error({
+      } else {
-        content: `${res.msg}`,
+        message.error({
-        duration: 2,
+          content: `${res.msg}`,
-      });
+          duration: 2,
-    }
+        });
-  }).finally(()=>{
+      }
-    hide();
+    })
-  });
+    .finally(() => {
+      hide();
+    });
 }
 
 /**
@@ -821,6 +823,24 @@ function fnGetList(pageNum?: number) {
   });
 }
 
+
+let interval: any = null;
+/**自动刷新 */
+function AutoRefresh() {
+  interval = setInterval(() => {
+    listAct(toRaw(queryParams)).then((res: any) => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        const { total, rows } = res.data;
+        tablePagination.total = total;
+        tableState.data = rows;
+      } else {
+        tablePagination.total = 0;
+        tableState.data = [];
+      }
+    });
+  }, 5_000);
+}
+
 onMounted(() => {
   // 初始字典数据
   Promise.allSettled([
@@ -844,7 +864,12 @@ onMounted(() => {
   });
   // 获取列表
   fnGetList();
+  // 自动刷新
+  AutoRefresh();
 });
+onBeforeUnmount(() => {
+  clearInterval(interval);
+})
 </script>
 
 <template>
@@ -957,7 +982,11 @@ onMounted(() => {
             {{ t('views.faultManage.activeAlarm.updateConfirm') }}
           </a-button>
 
-          <a-button type="primary" @click.prevent="fnSync()" v-perms:has="['faultManage:active-alarm:async']">
+          <a-button
+            type="primary"
+            @click.prevent="fnSync()"
+            v-perms:has="['faultManage:active-alarm:async']"
+          >
             <template #icon>
               <ReloadOutlined />
             </template>
@@ -982,7 +1011,11 @@ onMounted(() => {
             {{ t('views.faultManage.activeAlarm.clear') }}
           </a-button>
 
-          <a-button type="dashed" @click.prevent="fnExportList()" v-perms:has="['faultManage:active-alarm:export']">
+          <a-button
+            type="dashed"
+            @click.prevent="fnExportList()"
+            v-perms:has="['faultManage:active-alarm:export']"
+          >
             <template #icon><ExportOutlined /></template>
             {{ t('common.export') }}
           </a-button>