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

.eslintrc-auto-import.json

@@ -5,6 +5,10 @@
     "ComputedRef": true,
     "DirectiveBinding": true,
     "EffectScope": true,
+    "ElLoading": true,
+    "ElMessage": true,
+    "ElMessageBox": true,
+    "ElNotification": true,
     "ExtractDefaultPropTypes": true,
     "ExtractPropTypes": true,
     "ExtractPublicPropTypes": true,

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>

src/store/modules/notice.ts

@@ -10,7 +10,8 @@ interface NoticeItem {
 
 export const useNoticeStore = defineStore('notice', () => {
   const state = reactive({
-    notices: [] as NoticeItem[]
+    notices: [] as NoticeItem[],
+    isNotice: false as boolean
   });
 
   const addNotice = (notice: NoticeItem) => {

src/utils/sse.ts

@@ -1,9 +1,12 @@
 import { getToken } from '@/utils/auth';
 import { ElNotification } from 'element-plus';
 import { useNoticeStore } from '@/store/modules/notice';
+import { toRefs } from 'vue';
 
 // 初始化
 export const initSSE = (url: any) => {
+  const noticeStore = useNoticeStore();
+  const { isNotice, notices } = toRefs(noticeStore.state);
   if (import.meta.env.VITE_APP_SSE === 'false') {
     return;
   }
@@ -40,12 +43,13 @@ export const initSSE = (url: any) => {
       time: new Date().toLocaleString()
     });
     const displayMessage = data.value.split('|')[0].trim();
-    ElNotification({
-      title: '消息',
-      message: displayMessage,
-      type: 'success',
-      duration: 3000
-    });
+    // ElNotification({
+    //   title: '消息',
+    //   message: displayMessage,
+    //   type: 'success',
+    //   duration: 3000
+    // });
+    noticeStore.state.isNotice = true;
     data.value = null;
   });
 };

src/views/WarningList/list.vue

@@ -314,7 +314,7 @@ onMounted(() => {
 
 //监听数据源变化，自动刷新列表
 watch(warningListTotal, async (newVal) => {
-  console.log('监听到报警列表变化，自动刷新列表', newVal);
+  //console.log('监听到报警列表变化，自动刷新列表', newVal);
   //数据源不同， 接口复用，请求多了一遍（不属于bug）
   await getList();
 });