feat 增加消息报警查看画面

src/layout/components/notice/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-loading="state.loading" class="layout-navbars-breadcrumb-user-news">
     <div class="head-box">
-      <div class="head-box-title">通知公告</div>
+      <div class="head-box-title"><p style="color: red; font-size: 16px; font-weight: 800">入侵警告</p></div>
       <!-- <div class="head-box-btn" @click="readAll">全部已读</div> -->
     </div>
     <div v-loading="state.loading" class="content-box">
@@ -14,8 +14,8 @@
             <div class="content-box-time">{{ v.time }}</div>
           </div>
           <!-- 已读/未读 -->
-          <span v-if="v.read" class="el-tag el-tag--success el-tag--mini read">已读</span>
-          <span v-else class="el-tag el-tag--danger el-tag--mini read">未读</span>
+          <!-- <span v-if="v.read" class="el-tag el-tag--success el-tag--mini read">已读</span> -->
+          <span v-if="!v.read" class="el-tag el-tag--danger el-tag--mini read">查看画面</span>
         </div>
       </template>
       <el-empty v-else :description="'消息为空'"></el-empty>
@@ -38,26 +38,17 @@ const state = reactive({
 const newsList = ref([]) as any;
 
 /**
- * 过滤5分钟内的消息（最多5条）
+ * 过滤消息（只保留最新的5条）
  * @param messages 消息列表
  * @returns 过滤后的消息列表
  */
 const filterMessages = (messages: any[]) => {
-  const now = new Date().getTime();
-  const fiveMinutesAgo = now - 5 * 60 * 1000; // 5分钟前的时间戳
-
-  // 过滤掉5分钟前的消息
-  const recentMessages = messages.filter((msg: any) => {
-    const msgTime = new Date(msg.time).getTime();
-    return msgTime >= fiveMinutesAgo;
-  });
-
-  // 如果5分钟内的消息超过5条，则只保留最新的5条
-  if (recentMessages.length > 5) {
-    return recentMessages.slice(0, 5); // 只取前5条最新消息
+  // 如果消息超过5条，则只保留最新的5条
+  if (messages.length > 5) {
+    return messages.slice(0, 5); // 只取前5条最新消息
   }
 
-  return recentMessages;
+  return messages;
 };
 
 /**