refactor: 重构项目结构

- 优化 `车站-设备-告警`  轮询机制
- 改进设备卡片的布局
- 支持修改设备
- 告警轮询中获取完整告警数据
- 车站告警详情支持导出完整的 `今日告警列表`
- 支持将状态持久化到 `IndexedDB`
- 新增轮询控制 (调试模式)
- 新增离线开发模式 (调试模式)
- 新增 `IndexedDB` 数据控制 (调试模式)

src/stores/alarm.ts

@@ -0,0 +1,62 @@
+import { initStationAlarms, type LineAlarms, type NdmDeviceAlarmLogResultVO, type Station, type StationAlarms } from '@/apis';
+import { NDM_ALARM_STORE_ID } from '@/constants';
+import { tryGetDeviceType } from '@/enums';
+import { defineStore } from 'pinia';
+import { computed, shallowRef, triggerRef } from 'vue';
+
+export const useAlarmStore = defineStore(
+  NDM_ALARM_STORE_ID,
+  () => {
+    // 全线所有车站的告警
+    const lineAlarms = shallowRef<LineAlarms>({}); // 数据量很大所以用shallowRef配合triggerRef优化性能
+    const setLineAlarms = (alarms: LineAlarms) => {
+      lineAlarms.value = alarms;
+      triggerRef(lineAlarms);
+    };
+    const setStationAlarms = (stationCode: Station['code'], alarms: StationAlarms) => {
+      lineAlarms.value[stationCode] = alarms;
+      triggerRef(lineAlarms);
+    };
+
+    // 全线所有车站的未读告警 (来自stomp订阅)
+    const unreadLineAlarms = shallowRef<LineAlarms>({});
+    const unreadAlarmCount = computed(() => {
+      let count = 0;
+      Object.values(unreadLineAlarms.value).forEach((stationAlarms) => {
+        count += stationAlarms['unclassified'].length;
+      });
+      return count;
+    });
+    const pushUnreadAlarm = (alarm: NdmDeviceAlarmLogResultVO) => {
+      const stationCode = alarm.stationCode;
+      if (!stationCode) return;
+      if (!unreadLineAlarms.value[stationCode]) {
+        unreadLineAlarms.value[stationCode] = initStationAlarms();
+      }
+      const deviceType = tryGetDeviceType(alarm.deviceType);
+      if (!deviceType) return;
+      const stationAlarms = unreadLineAlarms.value[stationCode];
+      stationAlarms[deviceType].push(alarm);
+      stationAlarms['unclassified'].push(alarm);
+      triggerRef(unreadLineAlarms);
+    };
+    const clearUnreadAlarms = () => {
+      unreadLineAlarms.value = {};
+      triggerRef(unreadLineAlarms);
+    };
+
+    return {
+      lineAlarms,
+      setLineAlarms,
+      setStationAlarms,
+
+      unreadLineAlarms,
+      unreadAlarmCount,
+      pushUnreadAlarm,
+      clearUnreadAlarms,
+    };
+  },
+  {
+    persistToIndexedDB: true,
+  },
+);

src/stores/device.ts

@@ -0,0 +1,46 @@
+import type { LineDevices, NdmDeviceResultVO, Station, StationDevices } from '@/apis';
+import { NDM_DEVICE_STORE_ID } from '@/constants';
+import { tryGetDeviceType } from '@/enums';
+import { defineStore } from 'pinia';
+import { shallowRef, triggerRef } from 'vue';
+
+export const useDeviceStore = defineStore(
+  NDM_DEVICE_STORE_ID,
+  () => {
+    // 全线所有车站的设备
+    const lineDevices = shallowRef<LineDevices>({}); // 数据量很大所以用shallowRef配合triggerRef优化性能
+
+    const setLineDevices = (devices: LineDevices) => {
+      lineDevices.value = devices;
+    };
+
+    const setStationDevices = (stationCode: Station['code'], devices: StationDevices) => {
+      lineDevices.value[stationCode] = devices;
+      triggerRef(lineDevices);
+    };
+
+    const patchDevice = (stationCode: Station['code'], device: NdmDeviceResultVO) => {
+      const deviceType = tryGetDeviceType(device.deviceType);
+      if (!!deviceType) {
+        if (lineDevices.value[stationCode]) {
+          const index = lineDevices.value[stationCode][deviceType].findIndex((d) => d.id === device.id);
+          if (index > -1) {
+            lineDevices.value[stationCode][deviceType][index] = device;
+            triggerRef(lineDevices);
+          }
+        }
+      }
+    };
+
+    return {
+      lineDevices,
+
+      setLineDevices,
+      setStationDevices,
+      patchDevice,
+    };
+  },
+  {
+    persistToIndexedDB: true,
+  },
+);

src/stores/index.ts

@@ -0,0 +1,6 @@
+export * from './alarm';
+export * from './device';
+export * from './polling';
+export * from './setting';
+export * from './station';
+export * from './user';

src/stores/polling.ts

@@ -0,0 +1,35 @@
+import { LINE_ALARMS_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_STATIONS_QUERY_KEY, NDM_POLLIING_STORE_ID } from '@/constants';
+import { useQueryClient } from '@tanstack/vue-query';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const usePollingStore = defineStore(
+  NDM_POLLIING_STORE_ID,
+  () => {
+    const queryClient = useQueryClient();
+
+    // 允许控制轮询
+    const pollingEnabled = ref(true);
+    const startPolling = () => {
+      pollingEnabled.value = true;
+    };
+    const stopPolling = () => {
+      pollingEnabled.value = false;
+      queryClient.cancelQueries({ queryKey: [LINE_STATIONS_QUERY_KEY] });
+      queryClient.cancelQueries({ queryKey: [LINE_DEVICES_QUERY_KEY] });
+      queryClient.cancelQueries({ queryKey: [LINE_ALARMS_QUERY_KEY] });
+      queryClient.invalidateQueries({ queryKey: [LINE_STATIONS_QUERY_KEY] });
+      queryClient.invalidateQueries({ queryKey: [LINE_DEVICES_QUERY_KEY] });
+      queryClient.invalidateQueries({ queryKey: [LINE_ALARMS_QUERY_KEY] });
+    };
+
+    return {
+      pollingEnabled,
+      startPolling,
+      stopPolling,
+    };
+  },
+  {
+    persist: true,
+  },
+);

src/stores/setting.ts

@@ -0,0 +1,81 @@
+import { NDM_SETTING_STORE_ID } from '@/constants';
+import { darkTheme, lightTheme } from 'naive-ui';
+import { defineStore } from 'pinia';
+import { computed, ref, watch } from 'vue';
+import { useUserStore } from './user';
+import router from '@/router';
+
+export const useSettingStore = defineStore(
+  NDM_SETTING_STORE_ID,
+  () => {
+    const darkThemeEnabled = ref(true);
+    const themeMode = computed(() => {
+      return darkThemeEnabled.value ? darkTheme : lightTheme;
+    });
+
+    const menuCollpased = ref(false);
+
+    const stationGridCols = ref(6);
+
+    const debugModeEnabled = ref(false);
+    const enableDebugMode = () => {
+      debugModeEnabled.value = true;
+    };
+    const disableDebugMode = () => {
+      debugModeEnabled.value = false;
+    };
+
+    // 离线开发模式
+    // 控制 版本轮询 stomp连接 app-layout中的自动getUserInfo
+    const offlineDev = ref(false);
+    watch(offlineDev, (newValue, oldValue) => {
+      // 如果启用离线开发模式且当前未登录 自动填写token以绕过路由守卫并跳过登录页
+      if (!oldValue && newValue) {
+        const userStore = useUserStore();
+        if (!userStore.userLoginResult) {
+          userStore.userLoginResult = {
+            tenantId: '',
+            uuid: '',
+            token: 'test',
+            refreshToken: '',
+            expire: '',
+            expiration: '',
+          };
+        }
+        if (!userStore.userLoginResult.token) {
+          userStore.userLoginResult.token = 'test';
+        }
+        if (router.currentRoute.value.path === '/login') {
+          router.push({ path: '/' });
+        }
+      }
+    });
+
+    return {
+      darkThemeEnabled,
+      themeMode,
+
+      menuCollpased,
+
+      stationGridCols,
+
+      debugModeEnabled,
+      enableDebugMode,
+      disableDebugMode,
+
+      offlineDev,
+    };
+  },
+  {
+    persist: [
+      {
+        omit: ['debugModeEnabled'],
+        storage: window.localStorage,
+      },
+      {
+        pick: ['debugModeEnabled'],
+        storage: window.sessionStorage,
+      },
+    ],
+  },
+);

src/stores/station.ts

@@ -0,0 +1,28 @@
+import type { Station } from '@/apis';
+import { NDM_STATION_STORE_ID } from '@/constants';
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+
+export const useStationStore = defineStore(
+  NDM_STATION_STORE_ID,
+  () => {
+    const stations = ref<Station[]>([]);
+    const onlineStations = computed(() => {
+      return stations.value.filter((station) => station.online);
+    });
+
+    const setStations = (newStations: Station[]) => {
+      stations.value = newStations;
+    };
+
+    return {
+      stations,
+      onlineStations,
+
+      setStations,
+    };
+  },
+  {
+    persistToIndexedDB: true,
+  },
+);

src/stores/user.ts

@@ -0,0 +1,142 @@
+import { useStationStore } from './station';
+import { usePollingStore } from './polling';
+import { userClient, type LoginParams, type LoginResult, type Station } from '@/apis';
+import type { Result } from '@/types';
+import { AesEncryption, getAppEnvConfig } from '@/utils';
+import axios, { AxiosError } from 'axios';
+import dayjs from 'dayjs';
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+import { NDM_USER_STORE_ID } from '@/constants';
+
+const getHeaders = () => {
+  const { lampAuthorization, lampClientId, lampClientSecret } = getAppEnvConfig();
+  const newAuthorization = window.btoa(`${lampClientId}:${lampClientSecret}`);
+  const authorization = lampAuthorization.trim() !== '' ? lampAuthorization : newAuthorization;
+  return {
+    'content-type': 'application/json',
+    'accept-language': 'zh-CN,zh;q=0.9',
+    accept: 'application/json, text/plain, */*',
+    ApplicationId: '1',
+    TenantId: '1',
+    Authorization: authorization,
+  };
+};
+
+const aesEncryption = new AesEncryption();
+
+export const useUserStore = defineStore(
+  NDM_USER_STORE_ID,
+  () => {
+    const userLoginResult = ref<LoginResult | null>(null);
+    const userInfo = ref<any>(null);
+    const lampLoginResultRecord = ref<Record<string, LoginResult> | null>(null);
+
+    const isLamp = computed(() => userInfo.value?.['id'] === '2');
+
+    const resetStore = () => {
+      userLoginResult.value = null;
+      userInfo.value = null;
+      lampLoginResultRecord.value = null;
+    };
+
+    const userLogin = async (loginParams: LoginParams) => {
+      const { username, password, code, key, grantType } = loginParams;
+      const body = {
+        username: aesEncryption.encryptByAES(username),
+        password: aesEncryption.encryptByAES(password),
+        code,
+        key,
+        grantType,
+      };
+      const { data: respData } = await axios.post<Result<LoginResult>>(`/api/oauth/anyTenant/login`, body, { headers: getHeaders() });
+      if (!respData.isSuccess) {
+        console.error(respData);
+        window.$dialog.destroyAll();
+        window.$dialog.error({
+          closable: false,
+          maskClosable: false,
+          title: '错误提示',
+          content: respData.msg,
+          positiveText: '确认',
+          onPositiveClick: () => {
+            window.$message.destroyAll();
+          },
+        });
+        throw new AxiosError(respData.msg, `${respData.code}`);
+      } else {
+        userLoginResult.value = respData.data;
+      }
+    };
+
+    const userLogout = async () => {
+      const [err] = await userClient.post(`/api/oauth/anyUser/logout`, { token: userLoginResult.value?.token });
+      if (err) throw err;
+      resetStore();
+    };
+
+    const userGetInfo = async (options?: { signal?: AbortSignal }) => {
+      const { signal } = options ?? {};
+      const [err, info] = await userClient.get<any>(`/api/oauth/anyone/getUserInfoById`, { signal });
+      if (err || !info) {
+        throw err;
+      }
+      userInfo.value = info;
+    };
+
+    const lampLogin = async (stationCode: Station['code']) => {
+      const { data: accountRecord } = await axios.get<Record<string, { username: string; password: string }>>(`/minio/ndm/ndm-accounts.json?_t=${dayjs().unix()}`);
+      const body = {
+        username: aesEncryption.encryptByAES(accountRecord[stationCode]?.username ?? ''),
+        password: aesEncryption.encryptByAES(accountRecord[stationCode]?.password ?? ''),
+        grantType: 'PASSWORD',
+      };
+      const { data: respData } = await axios.post<Result<LoginResult>>(`/${stationCode}/api/oauth/anyTenant/login`, body, { headers: getHeaders() });
+      // 如果登录返回失败，需要提示用户检查用户名和密码配置，并全局停止轮询
+      if (!respData.isSuccess) {
+        console.error(respData);
+        const stationStore = useStationStore();
+        const stationName = stationStore.stations.find((station) => station.code === stationCode)?.name ?? '';
+        window.$dialog.destroyAll();
+        window.$dialog.error({
+          closable: false,
+          maskClosable: false,
+          draggable: true,
+          title: `${stationName}登录失败`,
+          content: `请检查该车站的用户名和密码配置，并在确认无误后刷新页面！`,
+          positiveText: '刷新',
+          onPositiveClick: () => {
+            window.$dialog.destroyAll();
+            window.location.reload();
+          },
+        });
+        // 登录失败时，需要全局停止轮询
+        const pollingStore = usePollingStore();
+        pollingStore.stopPolling();
+        throw new AxiosError(respData.msg, `${respData.code}`);
+      } else {
+        if (lampLoginResultRecord.value === null) {
+          lampLoginResultRecord.value = {};
+        }
+        lampLoginResultRecord.value[stationCode] = respData.data;
+      }
+    };
+
+    return {
+      userLoginResult,
+      userInfo,
+      lampLoginResultRecord,
+
+      isLamp,
+
+      resetStore,
+      userLogin,
+      userLogout,
+      userGetInfo,
+      lampLogin,
+    };
+  },
+  {
+    persist: true,
+  },
+);