feat: current-alarms-store & move ThemeSwitch

src/layouts/app-layout.vue

@@ -5,34 +5,77 @@ function renderIcon(icon: Component): () => VNode {
 </script>
 
 <script setup lang="ts">
-import ThemeSwitch from '@/components/theme-switch.vue';
+import type { NdmDeviceAlarmLogResultVO } from '@/apis/models';
+import ThemeSwitch from '@/components/global/theme-switch.vue';
 import { useStationListQuery } from '@/composables/query';
-import { useStationStore } from '@/stores/station';
+import { useCurrentAlarmsStore } from '@/stores/current-alarms';
 import { useUserStore } from '@/stores/user';
+import { Client as StompClient } from '@stomp/stompjs';
 import { AlertFilled, /* AreaChartOutlined, */ FileTextFilled, HomeFilled, LogoutOutlined, VideoCameraFilled } from '@vicons/antd';
-import { ChevronDown } from '@vicons/carbon';
+import { ChevronDown, Debug } from '@vicons/carbon';
 import type { AxiosError } from 'axios';
-import { NButton, NDropdown, NFlex, NIcon, NLayout, NLayoutContent, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NScrollbar, type DropdownOption, type MenuOption } from 'naive-ui';
+import { destr } from 'destr';
+import { NBadge, NButton, NDropdown, NFlex, NIcon, NLayout, NLayoutContent, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NScrollbar, type DropdownOption, type MenuOption } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { h, onBeforeMount, onBeforeUnmount, ref, type Component, type VNode } from 'vue';
+import { h, onBeforeMount, onBeforeUnmount, onMounted, ref, type Component, type VNode } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 
 const userStore = useUserStore();
 const { userInfo } = storeToRefs(userStore);
 
-const stationStore = useStationStore();
-const { stationList } = storeToRefs(stationStore);
+const stompClient = ref<StompClient | null>(null);
+
+const currentAlarmsStore = useCurrentAlarmsStore();
+const { currentAlarmCount, needReload } = storeToRefs(currentAlarmsStore);
 
 useStationListQuery();
 
-onBeforeUnmount(() => {
-  stationList.value = [];
-});
-
 onBeforeMount(() => {
   userStore.userGetInfo().catch((err) => window.$message.error((err as AxiosError).message));
 });
 
+onMounted(() => {
+  stompClient.value = new StompClient({
+    brokerURL: '/ws',
+    // webSocketFactory: () => {
+    //   const ws = new WebSocket('/ws');
+    //   return ws;
+    // },
+    reconnectDelay: 5000,
+    heartbeatIncoming: 10000,
+    heartbeatOutgoing: 10000,
+    // debug: (str) => {
+    //   console.log('Stomp调试:', str);
+    // },
+    onConnect: () => {
+      console.log('Stomp连接成功');
+      stompClient.value?.subscribe('/topic/deviceAlarm', (message) => {
+        const alarm = destr<NdmDeviceAlarmLogResultVO>(message.body);
+        // console.log(alarm);
+        if (alarm.alarmCategory === '1') {
+          currentAlarmCount.value++;
+        }
+      });
+    },
+    onDisconnect: () => {
+      console.log('Stomp连接断开');
+      stompClient.value?.unsubscribe('/topic/deviceAlarm');
+    },
+    onStompError: (frame) => {
+      console.log('Stomp错误', frame);
+    },
+    onWebSocketError: (event) => {
+      console.log('WebSocket错误', event);
+    },
+  });
+  stompClient.value.activate();
+});
+
+onBeforeUnmount(() => {
+  stompClient.value?.deactivate();
+  stompClient.value = null;
+});
+
 const route = useRoute();
 const router = useRouter();
 
@@ -68,6 +111,12 @@ const menuOptions = ref<MenuOption[]>([
     //   },
     // ],
   },
+  {
+    label: () => h(RouterLink, { to: '/debug' }, { default: () => '调试' }),
+    key: '/debug',
+    icon: renderIcon(Debug),
+    show: import.meta.env.DEV,
+  },
 ]);
 
 const dropdownOptions = ref<DropdownOption[]>([
@@ -89,6 +138,14 @@ const selectDropdownOption = (key: string, option: DropdownOption) => {
 };
 
 const toDashboardPage = () => router.push('/');
+const toAlarmPage = () => {
+  currentAlarmCount.value = 0;
+  if (route.path === '/alarm') {
+    needReload.value = true;
+  } else {
+    router.push('/alarm');
+  }
+};
 </script>
 
 <template>
@@ -119,7 +176,19 @@ const toDashboardPage = () => router.push('/');
         <NLayoutContent class="app-layout-content">
           <RouterView />
         </NLayoutContent>
-        <NLayoutFooter bordered class="app-layout-footer" />
+        <NLayoutFooter bordered class="app-layout-footer">
+          <NFlex :align="'center'" style="height: 100%; margin: 0 16px">
+            <NBadge :value="currentAlarmCount">
+              <NButton secondary strong @click="toAlarmPage">
+                <template #icon>
+                  <NIcon>
+                    <AlertFilled />
+                  </NIcon>
+                </template>
+              </NButton>
+            </NBadge>
+          </NFlex>
+        </NLayoutFooter>
       </NLayout>
     </NLayout>
   </NScrollbar>