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>

src/pages/alarm-page.vue

@@ -3,6 +3,7 @@ import type { NdmDeviceAlarmLogResultVO } from '@/apis/models';
 import { ndmDeviceAlarmLogDefaultExportByTemplate, postNdmDeviceAlarmLogPage } from '@/apis/requests';
 import { JAVA_INTEGER_MAX_VALUE } from '@/constants';
 import { DeviceType, DeviceTypeCode, DeviceTypeName, type DeviceTypeVal } from '@/enums/device-type';
+import { useCurrentAlarmsStore } from '@/stores/current-alarms';
 import { useStationStore } from '@/stores/station';
 import { downloadByData } from '@/utils/download';
 import { useMutation } from '@tanstack/vue-query';
@@ -10,7 +11,16 @@ import dayjs from 'dayjs';
 import type { DataTableColumns, DataTableRowData, PaginationProps, SelectOption } from 'naive-ui';
 import { NForm, NInput, NButton, NSpace, NDataTable, NFormItemGi, NGrid, NSelect, NGridItem, NDatePicker } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { ref, reactive, onBeforeMount, h, computed } from 'vue';
+import { ref, reactive, onBeforeMount, h, computed, watch } from 'vue';
+
+const currentAlarmsStore = useCurrentAlarmsStore();
+const { needReload } = storeToRefs(currentAlarmsStore);
+watch(needReload, async (newVal) => {
+  if (newVal) {
+    needReload.value = false;
+    onClickReset();
+  }
+});
 
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
@@ -27,7 +37,7 @@ const searchFields = reactive({
   deviceType_in: [] as string[],
   deviceName_like: '',
   // deviceId_likeRight: '',
-  alarmDate: [dayjs().startOf('date').subtract(7, 'day').valueOf(), dayjs().endOf('date').valueOf()] as [number, number],
+  alarmDate: [dayjs().startOf('date').valueOf(), dayjs().endOf('date').valueOf()] as [number, number],
 });
 const resetSearchFields = () => {
   searchFields.stationCode_in = [];
@@ -35,6 +45,21 @@ const resetSearchFields = () => {
   searchFields.deviceName_like = '';
   searchFields.alarmDate = [dayjs().startOf('date').subtract(7, 'day').valueOf(), dayjs().endOf('date').valueOf()];
 };
+const onDateChange = (value: [number, number] | null) => {
+  if (!value || value.length !== 2) {
+    return;
+  }
+  const [start, end] = value;
+  const diffDays = dayjs(end).diff(dayjs(start), 'day');
+  if (diffDays > 7) {
+    // 如果超过7天，自动调整结束时间
+    const adjustedEnd = dayjs(start).add(7, 'day').valueOf();
+    searchFields.alarmDate = [start, adjustedEnd];
+    window.$message.warning('时间范围不能超过7天，已自动调整');
+  } else {
+    searchFields.alarmDate = value;
+  }
+};
 
 const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
   { title: '告警流水号', key: 'alarmNo' },
@@ -205,7 +230,7 @@ onBeforeMount(() => getAlarmList());
             <NInput v-model:value="searchFields.deviceName_like" placeholder="请输入设备名称" clearable />
           </NFormItemGi>
           <NFormItemGi :span="1" label="告警发生时间" label-placement="left">
-            <NDatePicker v-model:value="searchFields.alarmDate" type="datetimerange" />
+            <NDatePicker v-model:value="searchFields.alarmDate" type="datetimerange" @update:value="onDateChange" />
           </NFormItemGi>
         </NGrid>
         <!-- 按钮 -->

src/pages/login-page.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { userClient } from '@/apis/client';
 import type { LoginParams } from '@/apis/models';
-import ThemeSwitch from '@/components/theme-switch.vue';
+import ThemeSwitch from '@/components/global/theme-switch.vue';
 import { useUserStore } from '@/stores/user';
 import { randomNum } from '@/utils/random-num';
 import { useMutation } from '@tanstack/vue-query';

src/stores/current-alarms.ts

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useCurrentAlarmsStore = defineStore('ndm-current-alarms-store', () => {
+  const currentAlarmCount = ref(0);
+  const needReload = ref(false);
+
+  return {
+    currentAlarmCount,
+    needReload,
+  };
+});