feat 优化报警数量联动功能

Co-authored-by: Copilot <copilot@github.com>

src/layout/components/Navbar.vue

@@ -39,7 +39,7 @@
           <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">
               <template #reference>
-                <el-badge :value="warningListStore.warningListTotal > 0 ? warningListStore.warningListTotal : ''" :max="999">
+                <el-badge :value="infoData" :max="999">
                   <div class="right-menu-item hover-effect" @click="goToWarningList">
                     <el-icon><BellFilled /></el-icon>
                   </div>
@@ -123,6 +123,8 @@ const noticeStore = storeToRefs(useNoticeStore());
 const newNotice = ref(<number>0);
 const { warningList, warningListTotal } = storeToRefs(warningListStore);
 
+const infoData = ref(warningListStore.warningListTotal ?? 0);
+
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const userId = ref(userStore.userId);
@@ -239,8 +241,22 @@ onMounted(() => {
   });
 });
 onMounted(() => {
-  warningListStore.getWarningList();
+  warningListStore.getWarningList({
+    status: 0,
+    pageNum: 1,
+    pageSize: 300
+  });
 });
+
+//监听数据变化
+watch(
+  () => warningListStore.warningListTotal,
+  (newVal) => {
+    console.log('监听告警列表变化', newVal);
+    infoData.value = newVal;
+  },
+  { deep: true }
+);
 </script>
 
 <style lang="scss" scoped>

src/layout/components/notice/index.vue

@@ -62,7 +62,7 @@ const videosStore = useVideosStore();
 
 const warningListStore = useWarningListStore();
 const noticeStore = useNoticeStore();
-const { getWarningList, hanldeAction } = warningListStore;
+const { getWarningList, handleAction } = warningListStore;
 const { warningListTotal, warningList } = storeToRefs(warningListStore);
 
 // const props = defineProps<{
@@ -72,6 +72,18 @@ const warningListRows = computed(() => warningList.value?.rows || []);
 const { readAll } = useNoticeStore();
 const monitorVideoRef = ref<HTMLVideoElement>();
 
+const getList = async () => {
+  try {
+    await getWarningList({
+      status: 0,
+      pageNum: 1,
+      pageSize: 300
+    });
+  } catch (error) {
+    console.error('获取消息列表失败', error);
+  }
+};
+
 // 定义变量内容
 const state = reactive({
   loading: false
@@ -108,7 +120,8 @@ const handleSee = async (row: any) => {
   dialog.visible = true;
   await nextTick();
   initHls(monitorVideoUrl, monitorVideoRef);
-  await hanldeAction(row.id);
+  await handleAction(row.id);
+  await getList();
 };
 
 const handleMonitorDialogClose = async (done: () => void) => {
@@ -196,8 +209,9 @@ onBeforeRouteLeave(() => {
   dialog.visible = false;
   monitorVideoUrl.value = '';
 });
+
 onMounted(() => {
-  getWarningList();
+  getList();
   console.log('111111111111111111111_warningList.value', warningList.value);
 });
 </script>