添加未处理报警角标

src/layouts/MainLayout.vue

@@ -19,7 +19,11 @@
           label="报警列表"
           @click="alarmListQuery"
           class="q-mr-sm"
-        />
+        >
+          <q-badge v-if="lineNetStore.untreatedNum" color="red" floating>{{
+            badgeNum
+          }}</q-badge>
+        </q-btn>
 
         <q-btn
           v-show="route.path.includes('monitor')"
@@ -116,7 +120,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue';
+import { ref, reactive, computed } from 'vue';
 import SysMenu from 'src/components/SysMenu.vue';
 import { useRouter, useRoute } from 'vue-router';
 import { Dialog, useQuasar } from 'quasar';
@@ -124,6 +128,16 @@ import { clearJwtToken } from 'src/configs/TokenManage';
 import { mockAlertSet } from 'src/api/AlertMock';
 import alarmInfoList from 'src/components/alarm/alarmInfoList.vue';
 import commonAlarm from 'src/components/alarm/commonAlarm.vue';
+import { useLineNetStore } from 'src/stores/line-net-store';
+
+const lineNetStore = useLineNetStore();
+const badgeNum = computed(() => {
+  let n = lineNetStore.untreatedNum + '';
+  if (lineNetStore.untreatedNum > 99) {
+    n = '99+';
+  }
+  return n;
+});
 
 const leftDrawerOpen = ref(false);
 const router = useRouter();

src/stores/line-net-store.ts

@@ -20,8 +20,12 @@ export const useLineNetStore = defineStore('lineNet', {
     selectedGraphics: null as JlGraphic[] | null,
     lineNetName: null as string | null,
     alarmInfo: [] as AlarmInfo[], //报警信息
+    untreatedMap: new Map(), // 未处理的报警
   }),
   getters: {
+    untreatedNum: (state) => {
+      return state.untreatedMap.size;
+    },
     selectedGraphicType: (state) => {
       if (state.selectedGraphics) {
         if (state.selectedGraphics.length === 1) {
@@ -64,8 +68,16 @@ export const useLineNetStore = defineStore('lineNet', {
     setLineNetName(name: string | null) {
       this.lineNetName = name;
     },
-    setAlarmInfo(data: []) {
+    setAlarmInfo(data: AlarmInfo[]) {
       this.alarmInfo = data;
+      data.forEach((item) => {
+        this.untreatedMap.set(item.id, item);
+      });
+    },
+    treatedAlarm(data: AlarmInfo) {
+      if (this.untreatedMap.has(data.id)) {
+        this.untreatedMap.delete(data.id);
+      }
     },
   },
 });