fix 优化报警消息

src/layout/components/Navbar.vue

@@ -39,14 +39,14 @@
           <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="newNotice > 0 ? newNotice : ''" :max="99">
+                <el-badge :value="warningListStore.warningListTotal > 0 ? warningListStore.warningListTotal : ''" :max="999">
                   <div class="right-menu-item hover-effect" @click="goToWarningList">
                     <el-icon><BellFilled /></el-icon>
                   </div>
                 </el-badge>
               </template>
               <template #default>
-                <notice></notice>
+                <notice :warningList="warningList"></notice>
               </template>
             </el-popover>
           </div>
@@ -113,12 +113,15 @@ import { NavTypeEnum } from '@/enums/NavTypeEnum';
 import Logo from '@/layout/components/Sidebar/Logo.vue';
 import TopBar from './TopBar';
 import { getDemo } from '@/api/systemList/index';
+import { useWarningListStore } from '@/store/modules/warnningList';
 
 const appStore = useAppStore();
+const warningListStore = useWarningListStore();
 const userStore = useUserStore();
 const settingsStore = useSettingsStore();
 const noticeStore = storeToRefs(useNoticeStore());
 const newNotice = ref(<number>0);
+const { warningList, warningListTotal } = storeToRefs(warningListStore);
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -235,6 +238,9 @@ onMounted(() => {
     logoUrl.value = res.data.url;
   });
 });
+onMounted(() => {
+  warningListStore.getWarningList();
+});
 </script>
 
 <style lang="scss" scoped>

src/layout/components/notice/index.vue

@@ -6,11 +6,11 @@
       <!-- <div class="head-box-btn" @click="readAll">全部已读</div> -->
     </div>
     <div v-loading="state.loading" class="content-box">
-      <template v-if="newsList.length > 0">
+      <template v-if="warningListRows.length > 0">
         <!-- <div v-for="(v, k) in newsList" :key="k" class="content-box-item" @click="onNewsClick(k)"> -->
-        <div v-for="(v, k) in newsList" :key="k" class="content-box-item">
+        <div v-for="(v, k) in warningListRows" :key="k" class="content-box-item">
           <div class="item-conten">
-            <div>{{ v.message }}</div>
+            <div>{{ `设备[${v.deviceName}] 检测到异常移动, ${v.alarmTime}` }}</div>
             <div class="content-box-msg"></div>
             <!-- <div class="content-box-time">{{ v.time }}</div> -->
           </div>
@@ -51,6 +51,7 @@ import { useNoticeStore } from '@/store/modules/notice';
 import { listNotice } from '@/api/system/notice';
 import { initHls, destroyHls } from '@/utils/video';
 import { onBeforeRouteLeave } from 'vue-router';
+import { useWarningListStore } from '@/store/modules/warnningList';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -58,7 +59,15 @@ import { nextTick } from 'vue';
 import { useVideosStore } from '@/store/modules/video';
 const videosStore = useVideosStore();
 
+const warningListStore = useWarningListStore();
 const noticeStore = useNoticeStore();
+
+const props = defineProps<{
+  warningList?: any[];
+}>();
+const { warningList } = toRefs(props);
+const warningListRows = computed(() => warningList.value?.rows || []);
+console.log('666666666666666666_warningListRows', warningListRows.value);
 const { readAll } = useNoticeStore();
 const monitorVideoRef = ref<HTMLVideoElement>();
 
@@ -185,6 +194,9 @@ onBeforeRouteLeave(() => {
   dialog.visible = false;
   monitorVideoUrl.value = '';
 });
+// onMounted(() => {
+//   warningListStore.getWarningList();
+// });
 </script>
 
 <style lang="scss" scoped>

src/store/modules/warnningList.ts

@@ -0,0 +1,36 @@
+import { listDemo, updateDemo } from '@/api/WarningList/index';
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+export const useWarningListStore = defineStore('warningListStore', () => {
+  // --- State (状态) ---
+  // 相当于 Vuex 中的 state，用 ref 或 reactive 定义
+  const warningList = ref([]);
+  const warningListTotal = ref(0);
+  // --- Getters (计算属性) ---
+  // 相当于 Vuex 中的 getters，直接用 computed 定义
+
+  // --- Actions (动作) ---
+  // 相当于 Vuex 中的 actions/mutations，直接写同步或异步函数
+  async function getWarningList(deviceId?: string | number) {
+    try {
+      const response = await listDemo({
+        deviceId,
+        pageNum: 1,
+        pageSize: 10
+      });
+      // console.log('6666666666666666666', response);
+      warningList.value = response.data || [];
+      warningListTotal.value = response.data.total || 0;
+    } catch (error) {
+      console.error('获取消息列表失败', error);
+    }
+  }
+
+  //  核心点：必须把需要暴露出去的变量和方法 return 出去！
+  return {
+    warningList,
+    warningListTotal,
+    getWarningList
+  };
+});