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>

src/store/modules/warnningList.ts

@@ -1,26 +1,28 @@
 import { listDemo, updateDemo } from '@/api/WarningList/index';
 import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
+import { any } from 'vue-types';
 
 export const useWarningListStore = defineStore('warningListStore', () => {
   // --- State (状态) ---
   // 相当于 Vuex 中的 state，用 ref 或 reactive 定义
-  const warningList = ref([]);
+  const warningList = ref();
   const warningListTotal = ref(0);
   // --- Getters (计算属性) ---
   // 相当于 Vuex 中的 getters，直接用 computed 定义
 
   // --- Actions (动作) ---
   // 相当于 Vuex 中的 actions/mutations，直接写同步或异步函数
-  async function getWarningList(deviceId?: string | number) {
+  async function getWarningList(query?: any) {
     try {
       const response = await listDemo({
-        deviceId,
-        status: 0,
-        pageNum: 1,
-        pageSize: 300
+        ...query
+        // deviceId,
+        // status: 0,
+        // pageNum: 1,
+        // pageSize: 10
       });
-      warningList.value = response.data || [];
+      warningList.value = response.data;
       warningListTotal.value = response.data.total || 0;
     } catch (error) {
       console.error('获取消息列表失败', error);
@@ -29,7 +31,6 @@ export const useWarningListStore = defineStore('warningListStore', () => {
   async function handleAction(ids: string | number | Array<string | number>) {
     try {
       await updateDemo(ids);
-      await getWarningList();
     } catch (error) {
       console.error('处理告警失败', error);
     }

src/views/WarningList/list.vue

@@ -136,7 +136,7 @@ import { storeToRefs } from 'pinia';
 import { useWarningListStore } from '@/store/modules/warnningList';
 
 const warningListStore = useWarningListStore();
-const { getWarningList, hanldeAction } = warningListStore;
+const { getWarningList, handleAction } = warningListStore;
 const { warningListTotal, warningList } = storeToRefs(warningListStore);
 
 const deviceStore = useDeviceStore();