From 68c32081444e374c9335a4bbe18501102b06544e Mon Sep 17 00:00:00 2001
From: huang <1724659546@qq.com>
Date: Sun, 16 Nov 2025 20:03:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8F=B3=E4=B8=8A=E8=A7=92?=
=?UTF-8?q?=E5=91=8A=E8=AD=A6=E9=93=83=E9=93=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/layouts/MainLayout.vue | 114 +++++++++++++++++++++++++++++--------
1 file changed, 91 insertions(+), 23 deletions(-)
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index c9e28981..76c1183d 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -77,6 +77,28 @@
计划管理
+
+
+
+
+
+
+ 告警中心
+
+
+
+
+
+ 告警管理
+
+
+
+
+
+ 阈值告警配置
+
+
+
@@ -195,28 +217,6 @@
-
-
-
-
-
-
- 告警中心
-
-
-
-
-
- 告警管理
-
-
-
-
-
- 阈值告警配置
-
-
-
@@ -235,6 +235,12 @@
{{ currentPageTitle }}
+
+
+
+
+
+
{{ username }}
@@ -297,6 +303,7 @@ import {
Management,
Bell
} from '@element-plus/icons-vue';
+import { getActiveAlarms } from '../api/alarm'; // 导入告警API
export default {
name: 'MainLayout',
@@ -336,17 +343,64 @@ export default {
const router = useRouter();
const isCollapse = ref(false);
const username = ref(localStorage.getItem('username') || '管理员');
+ /**
+ * 未解决告警数量
+ * @type {import('vue').Ref}
+ */
+ const unresolvedAlarmCount = ref(0);
+ /**
+ * 告警刷新定时器
+ * @type {number | null}
+ */
+ let alarmFetchInterval = null;
const handleStorageChange = () => {
username.value = localStorage.getItem('username') || '管理员';
};
+ /**
+ * 获取未解决告警数量
+ * @returns {Promise}
+ */
+ const fetchUnresolvedAlarmCount = async () => {
+ try {
+ // 调用API获取活跃且未忽略的告警数量
+ const response = await getActiveAlarms({
+ is_ignored: false,
+ page_size: 1 // 只需获取总数，所以page_size设为1
+ });
+ if (response && response.pagination) {
+ unresolvedAlarmCount.value = response.pagination.total || 0;
+ }
+ } catch (error) {
+ console.error('获取未解决告警数量失败:', error);
+ unresolvedAlarmCount.value = 0; // 发生错误时重置为0
+ }
+ };
+
+ /**
+ * 跳转到告警列表页面
+ * @returns {void}
+ */
+ const goToAlarmList = () => {
+ router.push('/alarms');
+ };
+
onMounted(() => {
window.addEventListener('storage', handleStorageChange);
+ // 首次加载时获取告警数量
+ fetchUnresolvedAlarmCount();
+ // 每30秒刷新一次告警数量
+ alarmFetchInterval = setInterval(fetchUnresolvedAlarmCount, 30000);
});
onUnmounted(() => {
window.removeEventListener('storage', handleStorageChange);
+ // 清除定时器
+ if (alarmFetchInterval) {
+ clearInterval(alarmFetchInterval);
+ alarmFetchInterval = null;
+ }
});
const toggleCollapse = () => {
@@ -378,7 +432,9 @@ export default {
currentPageTitle,
toggleCollapse,
logout,
- username
+ username,
+ unresolvedAlarmCount, // 暴露给模板
+ goToAlarmList // 暴露给模板
};
}
};
@@ -454,6 +510,18 @@ export default {
.user-info {
margin-right: 10px;
+ display: flex; /* 使内部元素水平排列 */
+ align-items: center; /* 垂直居中 */
+ gap: 20px; /* 元素间距 */
+}
+
+.alarm-badge {
+ cursor: pointer;
+}
+
+.alarm-icon {
+ cursor: pointer;
+ color: #606266; /* 默认图标颜色 */
}
.main-content {