feat 弹窗功能修改, 去掉sse消息弹窗, 当增加消息的时候, 弹出警告弹窗

src/layout/components/Navbar.vue

@@ -37,7 +37,14 @@
         <!-- 消息 -->
         <el-tooltip content="警报" effect="dark" placement="bottom">
           <div style="display: flex; align-items: center" class="mr-[30px]">
-            <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="400" :persistent="false">
+            <el-popover
+              placement="bottom"
+              transition="el-zoom-in-top"
+              :width="400"
+              :persistent="false"
+              trigger="click"
+              v-model:visible="popoverVisible"
+            >
               <template #reference>
                 <el-badge :value="infoData" :max="999">
                   <div class="right-menu-item hover-effect" @click="goToWarningList">
@@ -124,6 +131,7 @@ const newNotice = ref(<number>0);
 const { warningList, warningListTotal } = storeToRefs(warningListStore);
 
 const infoData = ref(warningListStore.warningListTotal ?? 0);
+const popoverVisible = ref(false);
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -258,11 +266,23 @@ onMounted(() => {
 watch(
   () => warningListStore.warningListTotal,
   (newVal) => {
-    console.log('监听告警列表变化', newVal);
     infoData.value = newVal;
   },
   { deep: true }
 );
+// 告警数据变化时自动弹出弹窗
+let noticeFirstLoad = true;
+watch(
+  () => warningListStore.warningListTotal,
+  () => {
+    if (noticeFirstLoad) {
+      noticeFirstLoad = false;
+      return;
+    }
+    popoverVisible.value = true;
+  },
+  { deep: true }
+);
 </script>
 
 <style lang="scss" scoped>