zhangchao/Visualize-electronic-fences
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 增加消息报警查看画面

Browse Source
This commit is contained in:
Ironsp
2026-05-25 10:19:50 +08:00
parent cef368b9dc
commit 2c5b9d4fcc
2 changed files with 16 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/layout/components/Navbar.vue
View File

@@ -35,12 +35,14 @@
</div> </div>
</el-tooltip> --> </el-tooltip> -->
<!-- 消息 --> <!-- 消息 -->
<el-tooltip :content="proxy.$t('navbar.message')" effect="dark" placement="bottom"> <el-tooltip content="警报" effect="dark" placement="bottom">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false"> <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
<template #reference> <template #reference>
<el-badge :value="newNotice > 0 ? newNotice : ''" :max="99"> <el-badge :value="newNotice > 0 ? newNotice : ''" :max="99">
<div class="right-menu-item hover-effect"><svg-icon icon-class="message" /></div> <div class="right-menu-item hover-effect" @click="goToWarningList">
<el-icon><BellFilled /></el-icon>
</div>
</el-badge> </el-badge>
</template> </template>
<template #default> <template #default>
@@ -215,6 +217,10 @@ watch(
const refresh = () => { const refresh = () => {
proxy?.$tab.refreshPage(); proxy?.$tab.refreshPage();
}; };
const goToWarningList = () => {
router.push('/warningList/list');
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

25
src/layout/components/notice/index.vue
View File

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