refactor: 重构项目结构

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

src/composables/query/index.ts

@@ -0,0 +1,4 @@
+export * from './use-line-alarms-query';
+export * from './use-line-devices-query';
+export * from './use-line-stations-query';
+export * from './use-version-check-query';

src/composables/query/use-line-alarms-query.ts

@@ -0,0 +1,88 @@
+import { initStationAlarms, pageDeviceAlarmLogApi, type Station } from '@/apis';
+import { LINE_ALARMS_QUERY_KEY, STATION_ALARMS_MUTATION_KEY } from '@/constants';
+import { tryGetDeviceType } from '@/enums';
+import { useAlarmStore, useStationStore } from '@/stores';
+import { parseErrorFeedback } from '@/utils';
+import { CancelledError, useMutation, useQuery } from '@tanstack/vue-query';
+import { isCancel } from 'axios';
+import dayjs from 'dayjs';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+
+export const useStationAlarmsMutation = () => {
+  const alarmStore = useAlarmStore();
+
+  return useMutation({
+    mutationKey: [STATION_ALARMS_MUTATION_KEY],
+    mutationFn: async (params: { station: Station; signal?: AbortSignal }) => {
+      const { station, signal } = params;
+      const stationAlarms = initStationAlarms();
+      if (!station.online) {
+        return stationAlarms;
+      }
+      const now = dayjs();
+      const todayStart = now.startOf('date').valueOf();
+      const todayEnd = now.endOf('date').valueOf();
+      const { records } = await pageDeviceAlarmLogApi(
+        {
+          model: {
+            stationCode: station.code,
+          },
+          extra: {
+            alarmDate_ge: todayStart,
+            alarmDate_le: todayEnd,
+          },
+          size: 50000,
+          current: 1,
+          sort: 'alarmDate',
+          order: 'descending',
+        },
+        {
+          stationCode: station.code,
+          signal,
+        },
+      );
+      for (const alarm of records) {
+        const { deviceType: deviceTypeCode } = alarm;
+        const deviceType = tryGetDeviceType(deviceTypeCode);
+        if (!!deviceType) {
+          stationAlarms[deviceType].unshift(alarm);
+        }
+      }
+      stationAlarms['unclassified'] = records;
+      return stationAlarms;
+    },
+    onSuccess: (stationAlarms, { station }) => {
+      alarmStore.setStationAlarms(station.code, stationAlarms);
+    },
+    onError: (error) => {
+      console.error(error);
+      if (isCancel(error) || error instanceof CancelledError) return;
+      const errorFeedback = parseErrorFeedback(error);
+      window.$message.error(errorFeedback);
+    },
+  });
+};
+
+/**
+ * 由 `useLineStationsQuery` 显式触发
+ * @see [use-line-stations-query.ts](./use-line-stations-query.ts)
+ */
+export const useLineAlarmsQuery = () => {
+  const stationStore = useStationStore();
+  const { stations } = storeToRefs(stationStore);
+  const { mutateAsync: getStationAlarms } = useStationAlarmsMutation();
+
+  return useQuery({
+    queryKey: computed(() => [LINE_ALARMS_QUERY_KEY]),
+    enabled: false,
+    queryFn: async ({ signal }) => {
+      console.time(LINE_ALARMS_QUERY_KEY);
+      for (const station of stations.value) {
+        await getStationAlarms({ station, signal }).catch(() => {});
+      }
+      console.timeEnd(LINE_ALARMS_QUERY_KEY);
+      return null;
+    },
+  });
+};

src/composables/query/use-line-devices-query.ts

@@ -0,0 +1,55 @@
+import { getAllDevicesApi, initStationDevices, type Station } from '@/apis';
+import { LINE_DEVICES_QUERY_KEY, STATION_DEVICES_MUTATION_KEY } from '@/constants';
+import { useDeviceStore, useStationStore } from '@/stores';
+import { parseErrorFeedback } from '@/utils';
+import { CancelledError, useMutation, useQuery } from '@tanstack/vue-query';
+import { isCancel } from 'axios';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+
+export const useStationDevicesMutation = () => {
+  const deviceStore = useDeviceStore();
+
+  return useMutation({
+    mutationKey: [STATION_DEVICES_MUTATION_KEY],
+    mutationFn: async (params: { station: Station; signal?: AbortSignal }) => {
+      const { station, signal } = params;
+      if (!station.online) {
+        return initStationDevices();
+      }
+      return await getAllDevicesApi({ stationCode: station.code, signal });
+    },
+    onSuccess: (devices, { station }) => {
+      deviceStore.setStationDevices(station.code, devices);
+    },
+    onError: (error) => {
+      console.error(error);
+      if (isCancel(error) || error instanceof CancelledError) return;
+      const errorFeedback = parseErrorFeedback(error);
+      window.$message.error(errorFeedback);
+    },
+  });
+};
+
+/**
+ * 由 `useLineStationsQuery` 显式触发
+ * @see [use-line-stations-query.ts](./use-line-stations-query.ts)
+ */
+export const useLineDevicesQuery = () => {
+  const stationStore = useStationStore();
+  const { stations } = storeToRefs(stationStore);
+  const { mutateAsync: getStationDevices } = useStationDevicesMutation();
+
+  return useQuery({
+    queryKey: computed(() => [LINE_DEVICES_QUERY_KEY]),
+    enabled: false,
+    queryFn: async ({ signal }) => {
+      console.time(LINE_DEVICES_QUERY_KEY);
+      for (const station of stations.value) {
+        await getStationDevices({ station, signal }).catch(() => {});
+      }
+      console.timeEnd(LINE_DEVICES_QUERY_KEY);
+      return null;
+    },
+  });
+};

src/composables/query/use-line-stations-query.ts

@@ -0,0 +1,73 @@
+import { batchVerifyApi, type Station } from '@/apis';
+import { LINE_STATIONS_MUTATION_KEY, LINE_STATIONS_QUERY_KEY } from '@/constants';
+import { usePollingStore, useStationStore } from '@/stores';
+import { getAppEnvConfig, parseErrorFeedback } from '@/utils';
+import { CancelledError, useMutation, useQuery } from '@tanstack/vue-query';
+import axios, { isCancel } from 'axios';
+import dayjs from 'dayjs';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+import { useLineDevicesQuery } from './use-line-devices-query';
+import { useLineAlarmsQuery } from './use-line-alarms-query';
+
+export const useLineStationsMutation = () => {
+  const stationStore = useStationStore();
+
+  return useMutation({
+    mutationKey: [LINE_STATIONS_MUTATION_KEY],
+    mutationFn: async (params: { signal?: AbortSignal }) => {
+      const { signal } = params;
+      const { data: ndmStationList } = await axios.get<{ code: string; name: string }[]>(`/minio/ndm/ndm-stations.json?_t=${dayjs().unix()}`, { signal });
+      const stations = ndmStationList.map<Station>((station) => ({
+        code: station.code ?? '',
+        name: station.name ?? '',
+        online: false,
+        ip: '',
+      }));
+      const verifyList = await batchVerifyApi({ signal });
+      return stations.map((station) => ({
+        ...station,
+        online: !!verifyList.find((verify) => verify.stationCode === station.code)?.onlineState,
+        ip: verifyList.find((verify) => verify.stationCode === station.code)?.ipAddress ?? '',
+      }));
+    },
+    onSuccess: (stations) => {
+      stationStore.setStations(stations);
+    },
+    onError: (error) => {
+      console.error(error);
+      if (isCancel(error) || error instanceof CancelledError) return;
+      const errorFeedback = parseErrorFeedback(error);
+      window.$message.error(errorFeedback);
+    },
+  });
+};
+
+export const useLineStationsQuery = () => {
+  const pollingStore = usePollingStore();
+  const { pollingEnabled } = storeToRefs(pollingStore);
+  const { requestInterval } = getAppEnvConfig();
+  const { mutateAsync: getLineStations } = useLineStationsMutation();
+  const { refetch: refetchLineDevicesQuery } = useLineDevicesQuery();
+  const { refetch: refetchLineAlarmsQuery } = useLineAlarmsQuery();
+
+  return useQuery({
+    queryKey: computed(() => [LINE_STATIONS_QUERY_KEY]),
+    enabled: computed(() => pollingEnabled.value),
+    refetchInterval: requestInterval * 1000,
+    staleTime: (requestInterval * 1000) / 2,
+    queryFn: async ({ signal }) => {
+      console.time(LINE_STATIONS_QUERY_KEY);
+      await getLineStations({ signal }).catch(() => {});
+      console.timeEnd(LINE_STATIONS_QUERY_KEY);
+
+      if (!pollingEnabled.value) return null;
+      await refetchLineDevicesQuery();
+
+      if (!pollingEnabled.value) return null;
+      await refetchLineAlarmsQuery();
+
+      return null;
+    },
+  });
+};

src/composables/query/use-version-check-query.ts

@@ -0,0 +1,75 @@
+import { verifyApi, type VersionInfo } from '@/apis';
+import { VERSION_CHECK_QUERY_KEY } from '@/constants';
+import { useSettingStore, useUserStore } from '@/stores';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
+import axios from 'axios';
+import { useThemeVars } from 'naive-ui';
+import { storeToRefs } from 'pinia';
+import { computed, h, ref, watch } from 'vue';
+
+export const useVersionCheckQuery = () => {
+  const localVersionInfo = ref<VersionInfo>();
+  const showDialog = ref<boolean>(false);
+  const themeVars = useThemeVars();
+  const queryClient = useQueryClient();
+  const userStore = useUserStore();
+  const { userLoginResult } = storeToRefs(userStore);
+  const settingStore = useSettingStore();
+  const { offlineDev } = storeToRefs(settingStore);
+
+  const { data: remoteVersionInfo, dataUpdatedAt } = useQuery({
+    queryKey: [VERSION_CHECK_QUERY_KEY],
+    enabled: computed(() => !offlineDev.value),
+    refetchInterval: 10 * 1000,
+    queryFn: async ({ signal }) => {
+      if (!!userLoginResult.value?.token) await verifyApi({ signal });
+      const { data } = await axios.get<VersionInfo>(`/manifest.json?t=${Date.now()}`, { signal });
+      return data;
+    },
+  });
+
+  watch(offlineDev, (offline) => {
+    if (offline) {
+      queryClient.cancelQueries({ queryKey: [VERSION_CHECK_QUERY_KEY] });
+    }
+  });
+
+  watch(dataUpdatedAt, () => {
+    const newVersionInfo = remoteVersionInfo.value;
+    if (!newVersionInfo) return;
+
+    if (!localVersionInfo.value) {
+      localVersionInfo.value = newVersionInfo;
+      return;
+    }
+
+    const { version: localVersion, buildTime: localBuildTime } = localVersionInfo.value;
+    const { version: remoteVersion, buildTime: remoteBuildTime } = newVersionInfo;
+
+    if ((localVersion !== remoteVersion || localBuildTime !== remoteBuildTime) && !showDialog.value) {
+      showDialog.value = true;
+      window.$dialog.info({
+        title: '发现新版本',
+        content: () =>
+          h('div', {}, [
+            h('div', {}, { default: () => `当前版本：${localVersionInfo.value?.version}` }),
+            h('div', {}, { default: () => `最新版本：${newVersionInfo.version}` }),
+            h('div', {}, { default: () => '请点击刷新页面以更新' }),
+            h('div', { style: { marginTop: '8px', fontWeight: '700', color: themeVars.value.warningColor } }, { default: () => '⚠️ 注意，更新后可能需要重新登录或调整系统设置！' }),
+          ]),
+        positiveText: '刷新页面',
+        maskClosable: false,
+        onPositiveClick: () => {
+          window.location.reload();
+        },
+        negativeText: '稍后检查',
+        onNegativeClick: () => {
+          showDialog.value = false;
+        },
+        onClose: () => {
+          showDialog.value = false;
+        },
+      });
+    }
+  });
+};