From b02bb5490fbbda068c5a6b7e78f9189c9aeaa6b9 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Wed, 12 Feb 2025 17:45:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=88=B7=E6=96=B0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/static/config.js                       |  5 ++
 .../alarmCenter/alarmHistory/index.vue        | 74 ++++++++++++-----
 .../analysisMonitor/alarmAnalysis/index.vue   |  2 +-
 .../analysisMonitor/alarmHistory/index.vue    | 80 ++++++++++++-------
 .../abnormalAlarm/components/searchBar.vue    | 31 ++++---
 .../databaseMonitor/alarmHistory/index.vue    | 74 ++++++++++++-----
 .../emailMonitor/alarmHistory/index.vue       | 74 ++++++++++++-----
 .../serverMonitor/alarmHistory/index.vue      | 62 +++++++++-----
 8 files changed, 286 insertions(+), 116 deletions(-)

diff --git a/public/static/config.js b/public/static/config.js
index 587cf73..43da33f 100644
--- a/public/static/config.js
+++ b/public/static/config.js
@@ -14,5 +14,10 @@ window._CONFIG = {
     online:
       'https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm',
     offline: 'http://localhost:8001/map/{z}/{x}/{y}.jpg'
+  },
+  // alarm模块alarm history配置
+  VUE_APP_ALARM_HISTORY: {
+    refreshInterval: 30 * 1000, // 刷新间隔
+    alarmTimeRange: 60 * 60 * 1000 // 告警时间范围
   }
 }
diff --git a/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue b/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
index fae8149..ea9d5c0 100644
--- a/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
+++ b/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="height: 100%">
-    <SearchBar type="alarmCenter" @search="handleSearch"></SearchBar>
+    <SearchBar ref="searchBarRef" type="alarmCenter" @search="handleSearch"></SearchBar>
     <div class="chart-layout" id="alarmChartBar"></div>
     <a-card :bordered="false" style="height: calc(100% - 280px); margin-left: 20px">
       <a-tabs default-active-key="alarmHistory" @change="handleTabChange">
@@ -16,7 +16,7 @@
               :scroll="{ y: 390 }"
             >
               <template slot="info" slot-scope="{ record }">
-                <a-popover>
+                <a-popover :class="{ 'is-recent': record.isRecent }">
                   <template slot="content">
                     {{ JSON.parse(record.alarmInfo) }}{{ JSON.parse(record.operator).units }}
                   </template>
@@ -101,6 +101,8 @@ const columns = [
   },
 ]
 
+const { refreshInterval, alarmTimeRange } = window._CONFIG.VUE_APP_ALARM_HISTORY
+
 export default {
   components: {
     SearchBar,
@@ -139,27 +141,27 @@ export default {
       paramsArg: {},
     }
   },
-  mounted() {
-    let currentTime = moment()
-    let agoDays = moment().subtract(6, 'days')
-    this.handleSearch({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
+  activated() {
+    this.$refs.searchBarRef.onSearch()
+  },
+  deactivated() {
+    this.stopTimer()
   },
   methods: {
     getUid() {
       return (Math.random() + new Date().getTime()).toString(32).slice(0, 8)
     },
-    handleSearch({ startDate, endDate, types }) {
+    handleSearch(queryParams) {
       this.ipagination.current = 1
+      const { alarmDate, types } = queryParams
+      const [startDate, endDate] = alarmDate
       if (startDate && endDate) {
-        this.paramsArg = {
-          startDate,
-          endDate,
-          types,
-        }
+        this.paramsArg = queryParams
         this.getAlarmLogBar({ startDate, endDate, types })
         this.getTypeAlarmPie({ startDate, endDate })
-        this.getAlarmLogTable({ startDate, endDate, types })
         this.getAlarmTop({ startDate, endDate, types })
+
+        this.getAlarmLogTable()
       } else {
         this.$message.warning('The Start Time Or End Time Cannot Be Empty!')
       }
@@ -180,20 +182,30 @@ export default {
         }
       })
     },
-    getAlarmLogTable(obj) {
+    getAlarmLogTable() {
+      const { alarmDate, types, autoRefresh } = this.paramsArg
+      const [startDate, endDate] = alarmDate
+
       this.loading = true
       let params = {
         pageNo: this.ipagination.current,
         pageSize: this.ipagination.pageSize,
-        type: obj.types || null,
-        startDate: obj.startDate,
-        endDate: obj.endDate,
+        type: types || null,
+        startDate,
+        endDate,
       }
       postAction('/alarmLog/findPage', params).then((res) => {
         this.loading = false
         if (res.success) {
           this.ipagination.total = res.result.total
+          res.result.records.forEach((item) => {
+            const isRecent = moment(item.alarmStartDate).isAfter(moment().add(-alarmTimeRange, 'millisecond'))
+            item.isRecent = isRecent
+          })
           this.dataSource = res.result.records
+          if (autoRefresh) {
+            this.startTimer()
+          }
         } else {
           this.$message.warning('This operation fails. Contact your system administrator')
         }
@@ -285,12 +297,12 @@ export default {
     handlePageChange(page, pageSize) {
       this.ipagination.current = page
       this.ipagination.pageSize = pageSize
-      this.getAlarmLogTable(this.paramsArg)
+      this.getAlarmLogTable()
     },
     handleSizeChange(current, size) {
       this.ipagination.current = current
       this.ipagination.pageSize = size
-      this.getAlarmLogTable(this.paramsArg)
+      this.getAlarmLogTable()
     },
     handleTabChange(key) {
       if (key == 'alarmAnalysis') {
@@ -455,6 +467,18 @@ export default {
         this.alarmTop.resize()
       })
     },
+
+    startTimer() {
+      this.timer = window.setTimeout(() => {
+        this.$refs.searchBarRef.handleAutoRefreshChange()
+      }, refreshInterval)
+    },
+    stopTimer() {
+      if (this.timer) {
+        window.clearTimeout(this.timer)
+        this.timer = null
+      }
+    },
   },
 }
 </script>
@@ -521,4 +545,16 @@ export default {
   bottom: 0;
   transform: translateX(-50%);
 }
+
+.is-recent {
+  color: #f62424;
+}
+
+.custom-table {
+  ::v-deep {
+    .ant-table-row-cell-ellipsis:has(.is-recent) {
+      color: #f62424;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue b/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue
index b638675..f45197f 100644
--- a/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue
+++ b/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="height: 100%">
-    <SearchBar type="alarmAnalysis" @search="handleSearch"></SearchBar>
+    <SearchBar type="alarmAnalysis" @search="handleSearch" :show-auto-refresh="false"></SearchBar>
     <div style="width: 100%; height: calc(100% - 50px)">
       <a-spin :spinning="spinning">
         <div class="chart-layout" id="analysisChartBar"></div>
diff --git a/src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue b/src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue
index fdde122..6ae6773 100644
--- a/src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue
+++ b/src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="height: 100%">
     <div v-if="!isDetail" style="height: 100%">
-      <SearchBar type="analysisMonitor" :options="stationOptions" @search="handleSearch"></SearchBar>
+      <SearchBar ref="searchBarRef" type="analysisMonitor" :options="stationOptions" @search="handleSearch"></SearchBar>
       <div class="analysis-main">
         <TableList
           size="middle"
@@ -59,6 +59,7 @@
                     white-space: nowrap;
                     text-overflow: ellipsis;
                   "
+                  :class="{ 'is-recent': record.isRecent }"
                   >{{ text }}</span
                 >
               </a-popover>
@@ -272,6 +273,9 @@ const columns_info = [
     width: 200,
   },
 ]
+
+const { refreshInterval, alarmTimeRange } = window._CONFIG.VUE_APP_ALARM_HISTORY
+
 export default {
   components: {
     SearchBar,
@@ -282,10 +286,7 @@ export default {
       popClicked: false,
       popHovered: false,
       stationOptions: [],
-      paramsArg: {
-        startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
-        endDate: dateFormat(new Date(), 'yyyy-MM-dd'),
-      },
+      paramsArg: {},
       columns,
       columns_info,
       dataSource: [],
@@ -312,19 +313,14 @@ export default {
       sampleInfo: {},
     }
   },
-  mounted() {
-    this.getBeforeDate(6)
+  activated() {
     this.getStationList()
-    this.getPageData()
+    this.$refs.searchBarRef.onSearch()
+  },
+  deactivated() {
+    this.stopTimer()
   },
   methods: {
-    // 获取n天前的日期
-    getBeforeDate(n) {
-      let currentTime = moment()
-      let agoDays = moment().subtract(n, 'days')
-      this.paramsArg.startDate = agoDays.format('YYYY-MM-DD')
-      this.paramsArg.endDate = currentTime.format('YYYY-MM-DD')
-    },
     handleHoverChange(visible, row) {
       row.popClicked = false
       row.popHovered = visible
@@ -352,13 +348,17 @@ export default {
       })
     },
     getPageData() {
+      const { alarmDate, sources, stations, nuclides, autoRefresh } = this.paramsArg
+      const [startDate, endDate] = alarmDate
+      this.stopTimer()
+
       this.loading = true
       let param = {
-        source: this.paramsArg.sources,
-        stations: this.paramsArg.stations,
-        nuclides: this.paramsArg.nuclides,
-        startDate: this.paramsArg.startDate,
-        endDate: this.paramsArg.endDate,
+        source: sources,
+        stations,
+        nuclides,
+        startDate,
+        endDate,
         pageNo: this.ipagination.current,
         pageSize: this.ipagination.pageSize,
       }
@@ -366,13 +366,20 @@ export default {
         this.loading = false
         if (res.success) {
           this.dataSource = res.result.records.map((item) => {
+            const isRecent = moment(item.alarmStartDate).isAfter(moment().add(-alarmTimeRange, 'millisecond'))
+
             return {
               ...item,
               popClicked: false,
               popHovered: false,
+              isRecent,
             }
           })
           this.ipagination.total = res.result.total
+
+          if (autoRefresh) {
+            this.startTimer()
+          }
         } else {
           this.$message.warning('This operation fails. Contact your system administrator')
         }
@@ -384,14 +391,9 @@ export default {
         this.loading = false
       })
     },
-    handleSearch({ startDate, endDate, stations, sources }) {
+    handleSearch(queryParams) {
       this.ipagination.current = 1
-      this.paramsArg = {
-        startDate,
-        endDate,
-        stations,
-        sources,
-      }
+      this.paramsArg = queryParams
       this.getPageData()
     },
     async rowClick(record) {
@@ -415,6 +417,18 @@ export default {
     handleback() {
       this.isDetail = false
     },
+
+    startTimer() {
+      this.timer = window.setTimeout(() => {
+        this.$refs.searchBarRef.handleAutoRefreshChange()
+      }, refreshInterval)
+    },
+    stopTimer() {
+      if (this.timer) {
+        window.clearTimeout(this.timer)
+        this.timer = null
+      }
+    },
   },
 }
 </script>
@@ -520,4 +534,16 @@ export default {
     background-color: rgba(13, 113, 139, 0.2);
   }
 }
+
+.is-recent {
+  color: #f62424;
+}
+
+.custom-table {
+  ::v-deep {
+    .ant-table-row-cell-ellipsis:has(.is-recent) {
+      color: #f62424;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/components/searchBar.vue b/src/views/abnormalAlarm/components/searchBar.vue
index ed7df4e..767fd02 100644
--- a/src/views/abnormalAlarm/components/searchBar.vue
+++ b/src/views/abnormalAlarm/components/searchBar.vue
@@ -115,11 +115,7 @@
       </a-col>
       <a-col flex="380px">
         <a-form-model-item label="Alarm date">
-          <a-range-picker
-            dropdownClassName="asd"
-            :default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
-            @change="onRangeDateChange"
-          />
+          <a-range-picker dropdownClassName="asd" v-model="queryParams.alarmDate" value-format="YYYY-MM-DD" />
         </a-form-model-item>
       </a-col>
       <a-col flex="108px">
@@ -128,12 +124,16 @@
           Search
         </a-button>
       </a-col>
+      <a-col v-if="showAutoRefresh">
+        <a-form-model-item label=" ">
+          <a-checkbox v-model="queryParams.autoRefresh" @change="handleAutoRefreshChange">Auto Refresh</a-checkbox>
+        </a-form-model-item>
+      </a-col>
     </a-row>
   </div>
 </template>
 
 <script>
-import dateFormat from '@/components/jeecg/JEasyCron/format-date'
 import moment from 'moment'
 export default {
   props: {
@@ -145,6 +145,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    showAutoRefresh: {
+      type: Boolean,
+      default: true,
+    },
   },
   components: {
     VNodes: {
@@ -187,8 +191,8 @@ export default {
         names: undefined,
         stations: undefined,
         sources: undefined,
-        startDate: moment().subtract(6, 'days').format('YYYY-MM-DD'),
-        endDate: moment().format('YYYY-MM-DD'),
+        alarmDate: [moment().subtract(6, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
+        autoRefresh: false, // 是否自动刷新
       },
     }
   },
@@ -293,13 +297,16 @@ export default {
         this.allVal_source = false
       }
     },
-    onRangeDateChange(date, dateString) {
-      this.queryParams.startDate = dateString[0]
-      this.queryParams.endDate = dateString[1]
-    },
+
     onSearch() {
       this.$emit('search', this.queryParams)
     },
+    handleAutoRefreshChange() {
+      if (this.queryParams.autoRefresh) {
+        this.$set(this.queryParams.alarmDate, 1, moment().format('YYYY-MM-DD'))
+        this.onSearch()
+      }
+    },
   },
 }
 </script>
diff --git a/src/views/abnormalAlarm/databaseMonitor/alarmHistory/index.vue b/src/views/abnormalAlarm/databaseMonitor/alarmHistory/index.vue
index b34412b..68ae180 100644
--- a/src/views/abnormalAlarm/databaseMonitor/alarmHistory/index.vue
+++ b/src/views/abnormalAlarm/databaseMonitor/alarmHistory/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="height: 100%">
-    <SearchBar type="DbMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
+    <SearchBar ref="searchBarRef" type="DbMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
     <div class="server-main">
       <TableList
         size="middle"
@@ -13,7 +13,7 @@
         :scroll="{ y: 655 }"
       >
         <template slot="info" slot-scope="{ record }">
-          <a-popover>
+          <a-popover :class="{ 'is-recent': record.isRecent }">
             <template slot="content">
               {{ JSON.parse(record.alarmInfo) }}{{ JSON.parse(record.operator).units }}
             </template>
@@ -69,6 +69,9 @@ const columns = [
     },
   },
 ]
+
+const { refreshInterval, alarmTimeRange } = window._CONFIG.VUE_APP_ALARM_HISTORY
+
 export default {
   components: {
     SearchBar,
@@ -95,11 +98,12 @@ export default {
       paramsArg: {},
     }
   },
-  mounted() {
-    let currentTime = moment()
-    let agoDays = moment().subtract(6, 'days')
+  activated() {
     this.getDbList()
-    this.getDbAlarmHistory({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
+    this.$refs.searchBarRef.onSearch()
+  },
+  deactivated() {
+    this.stopTimer()
   },
   methods: {
     getDbList() {
@@ -116,21 +120,21 @@ export default {
         }
       })
     },
-    handleSearch({ startDate, endDate, names }) {
+    handleSearch(queryParams) {
       this.ipagination.current = 1
-      this.paramsArg = {
-        startDate,
-        endDate,
-        names,
-      }
-      this.getDbAlarmHistory({ startDate, endDate, names })
+      this.paramsArg = queryParams
+      this.getDbAlarmHistory()
     },
-    getDbAlarmHistory(obj) {
+    getDbAlarmHistory() {
+      const { alarmDate, names, autoRefresh } = this.paramsArg
+      const [startDate, endDate] = alarmDate
+      this.stopTimer()
+
       this.loading = true
       let params = {
-        sourceId: obj.names || null,
-        startDate: obj.startDate,
-        endDate: obj.endDate,
+        sourceId: names || null,
+        startDate: startDate,
+        endDate: endDate,
         pageNo: this.ipagination.current,
         pageSize: this.ipagination.pageSize,
       }
@@ -139,12 +143,21 @@ export default {
           this.loading = false
           if (res.success) {
             this.ipagination.total = res.result.total
+            res.result.records.forEach((item) => {
+              const isRecent = moment(item.alarmStartDate).isAfter(moment().add(-alarmTimeRange, 'millisecond'))
+              item.isRecent = isRecent
+            })
             this.dataSource = res.result.records
+
+            if (autoRefresh) {
+              this.startTimer()
+            }
           } else {
             this.$message.warning('This operation fails. Contact your system administrator')
           }
         })
         .catch((err) => {
+          console.log('%c [ err ]-157', 'font-size:13px; background:pink; color:#bf2c9f;', err)
           this.loading = false
           this.$message.warning('This operation fails. Contact your system administrator')
         })
@@ -152,12 +165,23 @@ export default {
     handlePageChange(page, pageSize) {
       this.ipagination.current = page
       this.ipagination.pageSize = pageSize
-      this.getDbAlarmHistory(this.paramsArg)
+      this.getDbAlarmHistory()
     },
     handleSizeChange(current, size) {
       this.ipagination.current = current
       this.ipagination.pageSize = size
-      this.getDbAlarmHistory(this.paramsArg)
+      this.getDbAlarmHistory()
+    },
+    startTimer() {
+      this.timer = window.setTimeout(() => {
+        this.$refs.searchBarRef.handleAutoRefreshChange()
+      }, refreshInterval)
+    },
+    stopTimer() {
+      if (this.timer) {
+        window.clearTimeout(this.timer)
+        this.timer = null
+      }
     },
   },
 }
@@ -183,4 +207,16 @@ export default {
   font-size: 16px;
   // color: #f62424;
 }
+
+.is-recent {
+  color: #f62424;
+}
+
+.custom-table {
+  ::v-deep {
+    .ant-table-row-cell-ellipsis:has(.is-recent) {
+      color: #f62424;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/emailMonitor/alarmHistory/index.vue b/src/views/abnormalAlarm/emailMonitor/alarmHistory/index.vue
index ee3e663..9d034a0 100644
--- a/src/views/abnormalAlarm/emailMonitor/alarmHistory/index.vue
+++ b/src/views/abnormalAlarm/emailMonitor/alarmHistory/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="height: 100%">
-    <SearchBar type="emailMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
+    <SearchBar ref="searchBarRef" type="emailMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
     <div class="server-main">
       <TableList
         size="middle"
@@ -13,7 +13,7 @@
         :scroll="{ y: 655 }"
       >
         <template slot="info" slot-scope="{ record }">
-          <a-popover>
+          <a-popover :class="{ 'is-recent': record.isRecent }">
             <template slot="content">
               {{ JSON.parse(record.alarmInfo) }}{{ JSON.parse(record.operator).units }}
             </template>
@@ -69,6 +69,9 @@ const columns = [
     },
   },
 ]
+
+const { refreshInterval, alarmTimeRange } = window._CONFIG.VUE_APP_ALARM_HISTORY
+
 export default {
   components: {
     SearchBar,
@@ -95,11 +98,12 @@ export default {
       paramsArg: {},
     }
   },
-  mounted() {
-    let currentTime = moment()
-    let agoDays = moment().subtract(6, 'days')
+  activated() {
     this.getEmailList()
-    this.getEmailAlarmHistory({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
+    this.$refs.searchBarRef.onSearch()
+  },
+  deactivated() {
+    this.stopTimer()
   },
   methods: {
     getEmailList() {
@@ -116,21 +120,21 @@ export default {
         }
       })
     },
-    handleSearch({ startDate, endDate, names }) {
+    handleSearch(queryParams) {
       this.ipagination.current = 1
-      this.paramsArg = {
-        startDate,
-        endDate,
-        names,
-      }
-      this.getEmailAlarmHistory({ startDate, endDate, names })
+      this.paramsArg = queryParams
+      this.getEmailAlarmHistory()
     },
-    getEmailAlarmHistory(obj) {
+    getEmailAlarmHistory() {
+      const { alarmDate, names, autoRefresh } = this.paramsArg
+      const [startDate, endDate] = alarmDate
+      this.stopTimer()
+
       this.loading = true
       let params = {
-        sourceId: obj.names || null,
-        startDate: obj.startDate,
-        endDate: obj.endDate,
+        sourceId: names || null,
+        startDate,
+        endDate,
         pageNo: this.ipagination.current,
         pageSize: this.ipagination.pageSize,
       }
@@ -139,7 +143,16 @@ export default {
           this.loading = false
           if (res.success) {
             this.ipagination.total = res.result.total
+            res.result.records.forEach((item) => {
+              const isRecent = moment(item.alarmStartDate).isAfter(moment().add(-alarmTimeRange, 'millisecond'))
+              item.isRecent = isRecent
+            })
+
             this.dataSource = res.result.records
+
+            if (autoRefresh) {
+              this.startTimer()
+            }
           } else {
             this.$message.warning('This operation fails. Contact your system administrator')
           }
@@ -152,12 +165,23 @@ export default {
     handlePageChange(page, pageSize) {
       this.ipagination.current = page
       this.ipagination.pageSize = pageSize
-      this.getEmailAlarmHistory(this.paramsArg)
+      this.getEmailAlarmHistory()
     },
     handleSizeChange(current, size) {
       this.ipagination.current = current
       this.ipagination.pageSize = size
-      this.getEmailAlarmHistory(this.paramsArg)
+      this.getEmailAlarmHistory()
+    },
+    startTimer() {
+      this.timer = window.setTimeout(() => {
+        this.$refs.searchBarRef.handleAutoRefreshChange()
+      }, refreshInterval)
+    },
+    stopTimer() {
+      if (this.timer) {
+        window.clearTimeout(this.timer)
+        this.timer = null
+      }
     },
   },
 }
@@ -183,4 +207,16 @@ export default {
   font-size: 18px;
   color: #f62424;
 }
+
+.is-recent {
+  color: #f62424;
+}
+
+.custom-table {
+  ::v-deep {
+    .ant-table-row-cell-ellipsis:has(.is-recent) {
+      color: #f62424;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/serverMonitor/alarmHistory/index.vue b/src/views/abnormalAlarm/serverMonitor/alarmHistory/index.vue
index 18c1ba1..a4fbb3e 100644
--- a/src/views/abnormalAlarm/serverMonitor/alarmHistory/index.vue
+++ b/src/views/abnormalAlarm/serverMonitor/alarmHistory/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="height: 100%">
-    <SearchBar type="serverMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
+    <SearchBar ref="searchBarRef" type="serverMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
     <div class="server-main">
       <TableList
         size="middle"
@@ -13,7 +13,7 @@
         :scroll="{ y: 655 }"
       >
         <template slot="info" slot-scope="{ record }">
-          <a-popover>
+          <a-popover :class="{ 'is-recent': record.isRecent }">
             <template slot="content">
               {{ JSON.parse(record.alarmInfo) }}{{ JSON.parse(record.operator).units }}
             </template>
@@ -69,6 +69,9 @@ const columns = [
     },
   },
 ]
+
+const { refreshInterval, alarmTimeRange } = window._CONFIG.VUE_APP_ALARM_HISTORY
+
 export default {
   components: {
     SearchBar,
@@ -95,11 +98,12 @@ export default {
       paramsArg: {},
     }
   },
-  mounted() {
-    let currentTime = moment()
-    let agoDays = moment().subtract(6, 'days')
+  activated() {
     this.getServerList()
-    this.getServerAlarmHistory({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
+    this.$refs.searchBarRef.onSearch()
+  },
+  deactivated() {
+    this.stopTimer()
   },
   methods: {
     getServerList() {
@@ -116,21 +120,21 @@ export default {
         }
       })
     },
-    handleSearch({ startDate, endDate, names }) {
+    handleSearch(queryParams) {
       this.ipagination.current = 1
-      this.paramsArg = {
-        startDate,
-        endDate,
-        names,
-      }
-      this.getServerAlarmHistory({ startDate, endDate, names })
+      this.paramsArg = queryParams
+      this.getServerAlarmHistory()
     },
-    getServerAlarmHistory(obj) {
+    getServerAlarmHistory() {
+      const { alarmDate, names, autoRefresh } = this.paramsArg
+      const [startDate, endDate] = alarmDate
+      this.stopTimer()
+
       this.loading = true
       let params = {
-        sourceId: obj.names || null,
-        startDate: obj.startDate,
-        endDate: obj.endDate,
+        sourceId: names || null,
+        startDate: startDate,
+        endDate: endDate,
         pageNo: this.ipagination.current,
         pageSize: this.ipagination.pageSize,
       }
@@ -139,7 +143,16 @@ export default {
           this.loading = false
           if (res.success) {
             this.ipagination.total = res.result.total
+
+            res.result.records.forEach((item) => {
+              const isRecent = moment(item.alarmStartDate).isAfter(moment().add(-alarmTimeRange, 'millisecond'))
+              item.isRecent = isRecent
+            })
             this.dataSource = res.result.records
+
+            if (autoRefresh) {
+              this.startTimer()
+            }
           } else {
             this.$message.warning('This operation fails. Contact your system administrator')
           }
@@ -152,12 +165,23 @@ export default {
     handlePageChange(page, pageSize) {
       this.ipagination.current = page
       this.ipagination.pageSize = pageSize
-      this.getServerAlarmHistory(this.paramsArg)
+      this.getServerAlarmHistory()
     },
     handleSizeChange(current, size) {
       this.ipagination.current = current
       this.ipagination.pageSize = size
-      this.getServerAlarmHistory(this.paramsArg)
+      this.getServerAlarmHistory()
+    },
+    startTimer() {
+      this.timer = window.setTimeout(() => {
+        this.$refs.searchBarRef.handleAutoRefreshChange()
+      }, refreshInterval)
+    },
+    stopTimer() {
+      if (this.timer) {
+        window.clearTimeout(this.timer)
+        this.timer = null
+      }
     },
   },
 }