refactor: 优化查询链的耗时和错误日志输出

.env

@@ -19,7 +19,7 @@ VITE_LAMP_PASSWORD = fjoc(1KHP(Ls&Bje)C
 VITE_LAMP_AUTHORIZATION = Y3VlZGVzX2FkbWluOmN1ZWRlc19hZG1pbl9zZWNyZXQ=
 
 # 当需要重置localStorage时, 修改此变量
-VITE_STORAGE_VERSION = 3
+VITE_STORAGE_VERSION = 4
 
 # 调试码
 VITE_DEBUG_CODE = ndm_debug

src/components/device/device-card/components/current-diag/nvr-record-card.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import { getChannelListApi, getRecordCheckApi, reloadAllRecordCheckApi, reloadRecordCheckApi, type NdmNvrResultVO, type NdmRecordCheck, type RecordItem, type Station } from '@/apis';
 import { exportRecordDiagCsv, transformRecordChecks } from '@/helpers';
-import { useStationStore } from '@/stores';
 import { parseErrorFeedback } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
 import { isCancel } from 'axios';
 import dayjs from 'dayjs';
 import { DownloadIcon, RotateCwIcon } from 'lucide-vue-next';
 import { NButton, NCard, NFlex, NIcon, NPagination, NPopconfirm, NPopover, NRadioButton, NRadioGroup, NTooltip, useThemeVars } from 'naive-ui';
-import { storeToRefs } from 'pinia';
 import { computed, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue';
 
 const props = defineProps<{
@@ -18,9 +16,6 @@ const props = defineProps<{
 
 const themeVars = useThemeVars();
 
-const stationStore = useStationStore();
-const { stations } = storeToRefs(stationStore);
-
 const { ndmDevice, station } = toRefs(props);
 
 const recordChecks = ref<NdmRecordCheck[]>([]);
@@ -78,9 +73,7 @@ const { mutate: reloadAllRecordCheck, isPending: reloading } = useMutation({
 });
 
 const onExportRecordCheck = () => {
-  const code = station.value.code;
+  exportRecordDiagCsv(recordDiags.value, station.value.name);
-  const stationName = stations.value.find((station) => station.code === code)?.name ?? '';
-  exportRecordDiagCsv(recordDiags.value, stationName);
 };
 
 const page = ref(1);

src/components/global/settings-drawer/settings-drawer.vue

@@ -159,7 +159,7 @@ type IndexedDbStoreId = typeof NDM_STATION_STORE_ID | typeof NDM_DEVICE_STORE_ID
 type IndexedDbStoreStates = {
   [NDM_STATION_STORE_ID]: { stations: Station[] };
   [NDM_DEVICE_STORE_ID]: { lineDevices: LineDevices };
-  [NDM_ALARM_STORE_ID]: { lineAlarms: LineAlarms; unreadLineAlarms: LineAlarms };
+  [NDM_ALARM_STORE_ID]: { lineAlarms: LineAlarms };
 };
 const exportFromIndexedDB = async <K extends IndexedDbStoreId>(storeId: K, options?: { errorMsg?: string }) => {
   const { errorMsg } = options ?? {};

src/composables/index.ts

@@ -1,4 +1,5 @@
 export * from './alarm';
 export * from './device';
 export * from './query';
+export * from './station';
 export * from './stomp';

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

@@ -56,8 +56,8 @@ export const useStationAlarmsMutation = () => {
       alarmStore.setStationAlarms(station.code, stationAlarms);
     },
     onError: (error) => {
-      console.error(error);
       if (isCancel(error) || error instanceof CancelledError) return;
+      console.error(error);
       const errorFeedback = parseErrorFeedback(error);
       window.$message.error(errorFeedback);
     },
@@ -77,11 +77,13 @@ export const useLineAlarmsQuery = () => {
     queryKey: computed(() => [LINE_ALARMS_QUERY_KEY]),
     enabled: false,
     queryFn: async ({ signal }) => {
-      console.time(LINE_ALARMS_QUERY_KEY);
+      const startTime = performance.now();
       for (const station of stations.value) {
         await getStationAlarms({ station, signal }).catch(() => {});
       }
-      console.timeEnd(LINE_ALARMS_QUERY_KEY);
+      const endTime = performance.now();
+      console.log(`${LINE_ALARMS_QUERY_KEY}: ${endTime - startTime} ms`);
+
       return null;
     },
   });

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

@@ -23,8 +23,8 @@ export const useStationDevicesMutation = () => {
       deviceStore.setStationDevices(station.code, devices);
     },
     onError: (error) => {
-      console.error(error);
       if (isCancel(error) || error instanceof CancelledError) return;
+      console.error(error);
       const errorFeedback = parseErrorFeedback(error);
       window.$message.error(errorFeedback);
     },
@@ -44,11 +44,13 @@ export const useLineDevicesQuery = () => {
     queryKey: computed(() => [LINE_DEVICES_QUERY_KEY]),
     enabled: false,
     queryFn: async ({ signal }) => {
-      console.time(LINE_DEVICES_QUERY_KEY);
+      const startTime = performance.now();
       for (const station of stations.value) {
         await getStationDevices({ station, signal }).catch(() => {});
       }
-      console.timeEnd(LINE_DEVICES_QUERY_KEY);
+      const endTime = performance.now();
+      console.log(`${LINE_DEVICES_QUERY_KEY}: ${endTime - startTime} ms`);
+
       return null;
     },
   });

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

@@ -35,8 +35,8 @@ export const useLineStationsMutation = () => {
       stationStore.setStations(stations);
     },
     onError: (error) => {
-      console.error(error);
       if (isCancel(error) || error instanceof CancelledError) return;
+      console.error(error);
       const errorFeedback = parseErrorFeedback(error);
       window.$message.error(errorFeedback);
     },
@@ -57,9 +57,10 @@ export const useLineStationsQuery = () => {
     refetchInterval: requestInterval * 1000,
     staleTime: (requestInterval * 1000) / 2,
     queryFn: async ({ signal }) => {
-      console.time(LINE_STATIONS_QUERY_KEY);
+      const startTime = performance.now();
       await getLineStations({ signal }).catch(() => {});
-      console.timeEnd(LINE_STATIONS_QUERY_KEY);
+      const endTime = performance.now();
+      console.log(`${LINE_STATIONS_QUERY_KEY}: ${endTime - startTime} ms`);
 
       if (!pollingEnabled.value) return null;
       await refetchLineDevicesQuery();

src/composables/station/index.ts

@@ -0,0 +1 @@
+export * from './use-batch-actions';

src/composables/station/use-batch-actions.ts

@@ -0,0 +1,104 @@
+import { type Station } from '@/apis';
+import { computed, ref, watch, type Ref } from 'vue';
+
+type BatchActionKey = 'export-icmp' | 'export-record' | 'sync-camera' | 'sync-nvr';
+
+type BatchAction = {
+  label: string;
+  key: BatchActionKey;
+  active: boolean;
+};
+
+export const useBatchActions = (stations: Ref<Station[]>, abortController?: Ref<AbortController | undefined>) => {
+  const batchActions = ref<BatchAction[]>([
+    {
+      label: '导出设备状态',
+      key: 'export-icmp',
+      active: false,
+    },
+    {
+      label: '导出录像诊断',
+      key: 'export-record',
+      active: false,
+    },
+    {
+      label: '同步摄像机',
+      key: 'sync-camera',
+      active: false,
+    },
+    {
+      label: '同步录像机通道',
+      key: 'sync-nvr',
+      active: false,
+    },
+  ]);
+
+  const selectedAction = computed(() => {
+    return batchActions.value.find((action) => action.active);
+  });
+
+  const selectableStations = computed(() => {
+    if (!selectedAction.value) return [];
+    return stations.value;
+  });
+
+  const stationSelection = ref<Record<Station['code'], boolean>>({});
+
+  const toggleSelectAction = (action: BatchAction) => {
+    batchActions.value.forEach((batchAction) => {
+      if (batchAction.key === action.key) {
+        if (batchAction.active) stationSelection.value = {};
+        batchAction.active = !batchAction.active;
+      } else {
+        batchAction.active = false;
+      }
+    });
+  };
+
+  const toggleSelectAllStations = (checked: boolean) => {
+    if (!checked) {
+      stationSelection.value = {};
+      return;
+    }
+    selectableStations.value.forEach((station) => {
+      stationSelection.value[station.code] = checked;
+    });
+  };
+
+  watch(selectedAction, () => {
+    toggleSelectAllStations(false);
+  });
+
+  const confirmAction = (callbacks: Record<BatchActionKey, () => void>) => {
+    const { key } = selectedAction.value ?? {};
+    if (!key) return;
+    const noStationSeleted = !Object.values(stationSelection.value).some((selected) => selected);
+    if (noStationSeleted) {
+      window.$message.warning('请选择车站');
+      return;
+    }
+    callbacks[key]();
+  };
+
+  const cancelAction = () => {
+    abortController?.value?.abort();
+    stationSelection.value = {};
+    batchActions.value.forEach((batchAction) => {
+      batchAction.active = false;
+    });
+  };
+
+  return {
+    batchActions,
+    selectedAction,
+
+    selectableStations,
+    stationSelection,
+
+    toggleSelectAction,
+    toggleSelectAllStations,
+
+    confirmAction,
+    cancelAction,
+  };
+};

src/composables/stomp/use-stomp-client.ts

@@ -1,6 +1,6 @@
 import type { NdmDeviceAlarmLogResultVO, Station, SyncCameraResult } from '@/apis';
 import { ALARM_TOPIC, SYNC_CAMERA_STATUS_TOPIC } from '@/constants';
-import { useAlarmStore, useSettingStore, useStationStore } from '@/stores';
+import { useSettingStore, useStationStore, useUnreadStore } from '@/stores';
 import { Client } from '@stomp/stompjs';
 import { watchDebounced } from '@vueuse/core';
 import destr from 'destr';
@@ -19,8 +19,10 @@ const getBrokerUrl = () => {
 export const useStompClient = () => {
   const stationStore = useStationStore();
   const { stations } = storeToRefs(stationStore);
-  const alarmStore = useAlarmStore();
+
-  const { unreadLineAlarms } = storeToRefs(alarmStore);
+  const unreadStore = useUnreadStore();
+  const { unreadLineAlarms } = storeToRefs(unreadStore);
+
   const settingStore = useSettingStore();
   const { offlineDev } = storeToRefs(settingStore);
 
@@ -40,8 +42,9 @@ export const useStompClient = () => {
         console.log('Stomp连接成功');
         stompClient.value?.subscribe(ALARM_TOPIC, (message) => {
           const alarm = destr<NdmDeviceAlarmLogResultVO>(message.body);
-          if (alarm.alarmCategory === '1') {
+          const { alarmCategory, stationCode } = alarm;
-            alarmStore.pushUnreadAlarm(alarm);
+          if (alarmCategory === '1' && !!stations.value.find((station) => station.code === stationCode)) {
+            unreadStore.pushUnreadAlarm(alarm);
           }
         });
         stompClient.value?.subscribe(SYNC_CAMERA_STATUS_TOPIC, (message) => {

src/constants/store.ts

@@ -3,4 +3,5 @@ export const NDM_DEVICE_STORE_ID = 'ndm-device-store';
 export const NDM_POLLIING_STORE_ID = 'ndm-polling-store';
 export const NDM_SETTING_STORE_ID = 'ndm-setting-store';
 export const NDM_STATION_STORE_ID = 'ndm-station-store';
+export const NDM_UNREAD_STORE_ID = 'ndm-unread-store';
 export const NDM_USER_STORE_ID = 'ndm-user-store';

src/layouts/app-layout.vue

@@ -2,7 +2,7 @@
 import { SettingsDrawer, SyncCameraResultModal } from '@/components';
 import { useLineStationsQuery, useStompClient, useVerifyUserQuery } from '@/composables';
 import { LINE_ALARMS_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_STATIONS_MUTATION_KEY, LINE_STATIONS_QUERY_KEY, STATION_ALARMS_MUTATION_KEY, STATION_DEVICES_MUTATION_KEY } from '@/constants';
-import { useAlarmStore, useSettingStore, useUserStore } from '@/stores';
+import { useSettingStore, useUnreadStore, useUserStore } from '@/stores';
 import { parseErrorFeedback } from '@/utils';
 import { useIsFetching, useIsMutating, useMutation } from '@tanstack/vue-query';
 import { isCancel } from 'axios';
@@ -33,8 +33,8 @@ const router = useRouter();
 const userStore = useUserStore();
 const { userInfo } = storeToRefs(userStore);
 
-const alarmStore = useAlarmStore();
+const unreadStore = useUnreadStore();
-const { unreadAlarmCount } = storeToRefs(alarmStore);
+const { unreadAlarmCount } = storeToRefs(unreadStore);
 
 const settingStore = useSettingStore();
 const { menuCollpased, offlineDev } = storeToRefs(settingStore);
@@ -141,7 +141,7 @@ const routeToRoot = () => {
 };
 
 const routeToAlarmPage = () => {
-  alarmStore.clearUnreadAlarms();
+  unreadStore.clearUnreadAlarms();
   if (route.path !== '/alarm/alarm-log') {
     router.push({ path: '/alarm/alarm-log' });
   }

src/pages/alarm/alarm-log-page.vue

@@ -3,7 +3,7 @@ import { exportDeviceAlarmLogApi, pageDeviceAlarmLogApi, type NdmDeviceAlarmLog,
 import { useAlarmActionColumn, useCameraSnapColumn } from '@/composables';
 import { ALARM_TYPES, DEVICE_TYPE_CODES, DEVICE_TYPE_LITERALS, DEVICE_TYPE_NAMES, FAULT_LEVELS, tryGetDeviceType, type DeviceType } from '@/enums';
 import { renderAlarmDateCell, renderAlarmTypeCell, renderDeviceTypeCell, renderFaultLevelCell } from '@/helpers';
-import { useAlarmStore, useDeviceStore, useStationStore } from '@/stores';
+import { useDeviceStore, useStationStore, useUnreadStore } from '@/stores';
 import { downloadByData, parseErrorFeedback } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
 import { watchDebounced } from '@vueuse/core';
@@ -44,10 +44,12 @@ const router = useRouter();
 
 const stationStore = useStationStore();
 const { stations } = storeToRefs(stationStore);
+
 const deviceStore = useDeviceStore();
 const { lineDevices } = storeToRefs(deviceStore);
-const alarmStore = useAlarmStore();
+
-const { unreadAlarmCount } = storeToRefs(alarmStore);
+const unreadStore = useUnreadStore();
+const { unreadAlarmCount } = storeToRefs(unreadStore);
 
 const stationSelectOptions = computed<SelectOption[]>(() => {
   return stations.value.map((station) => ({

src/pages/station-page.vue

@@ -1,225 +0,0 @@
-<script setup lang="ts">
-import { initStationAlarms, initStationDevices, syncCameraApi, syncNvrChannelsApi, type Station } from '@/apis';
-import { AlarmDetailModal, DeviceDetailModal, DeviceParamConfigModal, IcmpExportModal, RecordCheckExportModal, StationCard, type StationCardProps } from '@/components';
-import { useLineDevicesQuery } from '@/composables';
-import { useAlarmStore, useDeviceStore, useSettingStore, useStationStore } from '@/stores';
-import { parseErrorFeedback } from '@/utils';
-import { useMutation } from '@tanstack/vue-query';
-import { NButton, NButtonGroup, NCheckbox, NFlex, NGrid, NGridItem, NScrollbar } from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { computed, ref } from 'vue';
-
-const settingStore = useSettingStore();
-const { stationGridCols: stationGridColumns } = storeToRefs(settingStore);
-const stationStore = useStationStore();
-const { stations } = storeToRefs(stationStore);
-const deviceStore = useDeviceStore();
-const { lineDevices } = storeToRefs(deviceStore);
-const alarmStore = useAlarmStore();
-const { lineAlarms } = storeToRefs(alarmStore);
-
-const { refetch: refetchLineDevicesQuery } = useLineDevicesQuery();
-
-// 操作栏
-// 当点击操作栏中的一个按钮时，其他按钮会被禁用
-type Action = 'export-icmp' | 'export-record' | 'sync-camera' | 'sync-nvr' | null;
-const selectedAction = ref<Action>(null);
-const showOperation = ref(false);
-const stationSelectable = ref(false);
-const stationSelection = ref<Record<Station['code'], boolean>>({});
-const showIcmpExportModal = ref(false);
-const showRecordCheckExportModal = ref(false);
-
-const onToggleSelectAll = (checked: boolean) => {
-  if (!checked) {
-    stationSelection.value = {};
-  } else {
-    stationSelection.value = Object.fromEntries(stations.value.map((station) => [station.code, true]));
-  }
-};
-
-const onAction = (action: Action) => {
-  selectedAction.value = action;
-  if (action === null) return;
-  showOperation.value = true;
-  stationSelectable.value = true;
-};
-
-const onCancel = () => {
-  selectedAction.value = null;
-  showOperation.value = false;
-  stationSelectable.value = false;
-  stationSelection.value = {};
-};
-
-const onFinish = onCancel;
-
-const { mutate: syncCamera, isPending: cameraSyncing } = useMutation({
-  mutationFn: async () => {
-    const stationCodes = Object.entries(stationSelection.value)
-      .filter(([, selected]) => selected)
-      .map(([code]) => code);
-    const results = await Promise.allSettled(stationCodes.map((stationCode) => syncCameraApi({ stationCode })));
-    return results.map((result, index) => ({ ...result, stationCode: stationCodes[index] }));
-  },
-  onSuccess: (results) => {
-    const successCount = results.filter((result) => result.status === 'fulfilled').length;
-    const failures = results.filter((result) => result.status === 'rejected');
-    const failureCount = failures.length;
-    if (failureCount > 0) {
-      const failedStations = failures.map((f) => stations.value.find((s) => s.code === f.stationCode)?.name).join('、');
-      if (successCount === 0) {
-        window.$message.error('摄像机同步全部失败');
-        window.$message.error(`${failedStations}`);
-      } else {
-        window.$message.warning(`摄像机同步完成：成功${successCount}个车站，失败${failureCount}个车站`);
-        window.$message.warning(`${failedStations}`);
-      }
-    } else {
-      window.$message.success('摄像机同步成功');
-    }
-    if (successCount > 0) {
-      // 摄像机同步后，需要重新查询一次设备，待测试
-      refetchLineDevicesQuery();
-    }
-    onFinish();
-  },
-  onError: (error) => {
-    console.error(error);
-    const errorFeedback = parseErrorFeedback(error);
-    window.$message.error(errorFeedback);
-    onCancel();
-  },
-});
-
-const { mutate: syncNvrChannels, isPending: nvrChannelsSyncing } = useMutation({
-  mutationFn: async () => {
-    const stationCodes = Object.entries(stationSelection.value)
-      .filter(([, selected]) => selected)
-      .map(([code]) => code);
-    const results = await Promise.allSettled(stationCodes.map((stationCode) => syncNvrChannelsApi({ stationCode })));
-    return results.map((result, index) => ({ ...result, stationCode: stationCodes[index] }));
-  },
-  onSuccess: (results) => {
-    const successCount = results.filter((result) => result.status === 'fulfilled').length;
-    const failures = results.filter((result) => result.status === 'rejected');
-    const failureCount = failures.length;
-    if (failureCount > 0) {
-      const failedStations = failures.map((failure) => stations.value.find((station) => station.code === failure.stationCode)?.name).join('、');
-      if (successCount === 0) {
-        window.$message.error('录像机通道同步全部失败');
-        window.$message.error(`${failedStations}`);
-      } else {
-        window.$message.warning(`录像机通道同步完成：成功${successCount}个车站，失败${failureCount}个车站`);
-        window.$message.warning(`${failedStations}`);
-      }
-    } else {
-      window.$message.success('录像机通道同步成功');
-    }
-    onFinish();
-  },
-  onError: (error) => {
-    console.error(error);
-    const errorFeedback = parseErrorFeedback(error);
-    window.$message.error(errorFeedback);
-    onCancel();
-  },
-});
-
-const confirming = computed(() => cameraSyncing.value || nvrChannelsSyncing.value);
-
-const onConfirm = async () => {
-  const noStationSelected = !Object.values(stationSelection.value).some((selected) => selected);
-  if (selectedAction.value === 'export-icmp') {
-    if (noStationSelected) {
-      window.$message.warning('请选择要导出设备状态的车站');
-      return;
-    }
-    showIcmpExportModal.value = true;
-  } else if (selectedAction.value === 'export-record') {
-    if (noStationSelected) {
-      window.$message.warning('请选择要导出录像诊断的车站');
-      return;
-    }
-    showRecordCheckExportModal.value = true;
-  } else if (selectedAction.value === 'sync-camera') {
-    if (noStationSelected) {
-      window.$message.warning('请选择要同步摄像机的车站');
-      return;
-    }
-    syncCamera();
-  } else if (selectedAction.value === 'sync-nvr') {
-    if (noStationSelected) {
-      window.$message.warning('请选择要同步录像机通道的车站');
-      return;
-    }
-    syncNvrChannels();
-  } else {
-    return;
-  }
-};
-
-// 车站卡片的事件
-const selectedStation = ref<Station>();
-const showDeviceParamConfigModal = ref(false);
-const showDeviceDetailModal = ref(false);
-const showAlarmDetailModal = ref(false);
-
-const onClickConfig: StationCardProps['onClickConfig'] = (station) => {
-  selectedStation.value = station;
-  showDeviceParamConfigModal.value = true;
-};
-
-const onClickDetail: StationCardProps['onClickDetail'] = (type, station) => {
-  selectedStation.value = station;
-  if (type === 'device') {
-    showDeviceDetailModal.value = true;
-  }
-  if (type === 'alarm') {
-    showAlarmDetailModal.value = true;
-  }
-};
-</script>
-
-<template>
-  <NScrollbar content-style="padding-right: 8px" style="width: 100%; height: 100%">
-    <!-- 工具栏 -->
-    <NFlex align="center" style="padding: 8px 8px 0 8px">
-      <NButtonGroup>
-        <NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'export-icmp'" @click="() => onAction('export-icmp')">导出设备状态</NButton>
-        <NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'export-record'" @click="() => onAction('export-record')">导出录像诊断</NButton>
-        <NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'sync-camera'" @click="() => onAction('sync-camera')">同步摄像机</NButton>
-        <NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'sync-nvr'" @click="() => onAction('sync-nvr')">同步录像机通道</NButton>
-      </NButtonGroup>
-      <template v-if="showOperation">
-        <NCheckbox label="全选" @update:checked="onToggleSelectAll" />
-        <NButton tertiary size="small" type="primary" :focusable="false" :loading="confirming" @click="onConfirm">确定</NButton>
-        <NButton tertiary size="small" type="tertiary" :focusable="false" :disabled="confirming" @click="onCancel">取消</NButton>
-      </template>
-    </NFlex>
-
-    <!-- 车站 -->
-    <NGrid :cols="stationGridColumns" :x-gap="6" :y-gap="6" style="padding: 8px">
-      <NGridItem v-for="station in stations" :key="station.code">
-        <StationCard
-          :station="station"
-          :devices="lineDevices[station.code] ?? initStationDevices()"
-          :alarms="lineAlarms[station.code] ?? initStationAlarms()"
-          :selectable="stationSelectable"
-          v-model:selected="stationSelection[station.code]"
-          @click-detail="onClickDetail"
-          @click-config="onClickConfig"
-        />
-      </NGridItem>
-    </NGrid>
-  </NScrollbar>
-
-  <IcmpExportModal v-model:show="showIcmpExportModal" :stations="stations.filter((station) => stationSelection[station.code])" @after-leave="onFinish" />
-  <RecordCheckExportModal v-model:show="showRecordCheckExportModal" :stations="stations.filter((station) => stationSelection[station.code])" @after-leave="onFinish" />
-
-  <DeviceParamConfigModal v-model:show="showDeviceParamConfigModal" :station="selectedStation" />
-  <DeviceDetailModal v-model:show="showDeviceDetailModal" :station="selectedStation" />
-  <AlarmDetailModal v-model:show="showAlarmDetailModal" :station="selectedStation" />
-</template>
-
-<style scoped lang="scss"></style>

src/pages/station/station-page.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { initStationAlarms, initStationDevices, syncCameraApi, syncNvrChannelsApi, type Station } from '@/apis';
+import { AlarmDetailModal, DeviceDetailModal, DeviceParamConfigModal, IcmpExportModal, RecordCheckExportModal, StationCard, type StationCardProps } from '@/components';
+import { useBatchActions, useLineDevicesQuery } from '@/composables';
+import { useAlarmStore, useDeviceStore, useSettingStore, useStationStore } from '@/stores';
+import { useMutation } from '@tanstack/vue-query';
+import { objectEntries } from '@vueuse/core';
+import { isCancel } from 'axios';
+import { NButton, NButtonGroup, NCheckbox, NFlex, NGrid, NGridItem, NScrollbar } from 'naive-ui';
+import { storeToRefs } from 'pinia';
+import { computed, ref } from 'vue';
+
+const settingStore = useSettingStore();
+const { stationGridCols: stationGridColumns } = storeToRefs(settingStore);
+
+const stationStore = useStationStore();
+const { stations } = storeToRefs(stationStore);
+
+const deviceStore = useDeviceStore();
+const { lineDevices } = storeToRefs(deviceStore);
+
+const alarmStore = useAlarmStore();
+const { lineAlarms } = storeToRefs(alarmStore);
+
+const showIcmpExportModal = ref(false);
+const showRecordCheckExportModal = ref(false);
+
+const abortController = ref(new AbortController());
+
+const { batchActions, selectedAction, selectableStations, stationSelection, toggleSelectAction, toggleSelectAllStations, confirmAction, cancelAction } = useBatchActions(stations, abortController);
+
+const { refetch: refetchLineDevicesQuery } = useLineDevicesQuery();
+
+const { mutate: syncCamera, isPending: cameraSyncing } = useMutation({
+  mutationFn: async () => {
+    abortController.value.abort();
+    abortController.value = new AbortController();
+
+    const signal = abortController.value.signal;
+
+    const stationCodes = Object.entries(stationSelection.value)
+      .filter(([, selected]) => selected)
+      .map(([code]) => code);
+    const requests = await Promise.allSettled(stationCodes.map((stationCode) => syncCameraApi({ stationCode, signal })));
+    return requests.map((result, index) => ({ ...result, stationCode: stationCodes[index] }));
+  },
+  onSuccess: (requests) => {
+    type PromiseRequest = (typeof requests)[number];
+    const successRequests: PromiseRequest[] = [];
+    const failedRequests: PromiseRequest[] = [];
+    const canceledRequests: PromiseRequest[] = [];
+    for (const request of requests) {
+      if (request.status === 'fulfilled') {
+        successRequests.push(request);
+      } else if (isCancel(request.reason)) {
+        canceledRequests.push(request);
+      } else {
+        failedRequests.push(request);
+      }
+    }
+    const notices: string[] = [`成功 ${successRequests.length} 个车站`, `失败 ${failedRequests.length} 个车站`];
+    if (canceledRequests.length > 0) notices.push(`取消 ${canceledRequests.length} 个车站`);
+    window.$notification.info({
+      title: '摄像机同步结果',
+      content: notices.join('，'),
+      duration: 3000,
+    });
+    if (successRequests.length > 0) {
+      // 摄像机同步后，需要重新查询一次设备
+      refetchLineDevicesQuery();
+    }
+    cancelAction();
+  },
+});
+
+const { mutate: syncNvrChannels, isPending: nvrChannelsSyncing } = useMutation({
+  mutationFn: async () => {
+    abortController.value.abort();
+    abortController.value = new AbortController();
+
+    const signal = abortController.value.signal;
+
+    const stationCodes = Object.entries(stationSelection.value)
+      .filter(([, selected]) => selected)
+      .map(([code]) => code);
+    const requests = await Promise.allSettled(stationCodes.map((stationCode) => syncNvrChannelsApi({ stationCode, signal })));
+    return requests.map((result, index) => ({ ...result, stationCode: stationCodes[index] }));
+  },
+  onSuccess: (requests) => {
+    type PromiseRequest = (typeof requests)[number];
+    const successRequests: PromiseRequest[] = [];
+    const failedRequests: PromiseRequest[] = [];
+    const canceledRequests: PromiseRequest[] = [];
+    for (const request of requests) {
+      if (request.status === 'fulfilled') {
+        successRequests.push(request);
+      } else if (isCancel(request.reason)) {
+        canceledRequests.push(request);
+      } else {
+        failedRequests.push(request);
+      }
+    }
+    const notices: string[] = [`成功 ${successRequests.length} 个车站`, `失败 ${failedRequests.length} 个车站`];
+    if (canceledRequests.length > 0) notices.push(`取消 ${canceledRequests.length} 个车站`);
+    window.$notification.info({
+      title: '录像机通道同步结果',
+      content: notices.join('，'),
+      duration: 3000,
+    });
+    cancelAction();
+  },
+});
+
+const confirming = computed(() => cameraSyncing.value || nvrChannelsSyncing.value);
+
+const onClickConfirmAction = () => {
+  confirmAction({
+    'export-icmp': () => {
+      showIcmpExportModal.value = true;
+    },
+    'export-record': () => {
+      showRecordCheckExportModal.value = true;
+    },
+    'sync-camera': () => {
+      syncCamera();
+    },
+    'sync-nvr': () => {
+      syncNvrChannels();
+    },
+  });
+};
+
+// 车站卡片的事件
+const modalStation = ref<Station>();
+const showDeviceParamConfigModal = ref(false);
+const showDeviceDetailModal = ref(false);
+const showAlarmDetailModal = ref(false);
+
+const onClickConfig: StationCardProps['onClickConfig'] = (station) => {
+  modalStation.value = station;
+  showDeviceParamConfigModal.value = true;
+};
+
+const onClickDetail: StationCardProps['onClickDetail'] = (type, station) => {
+  modalStation.value = station;
+  if (type === 'device') {
+    showDeviceDetailModal.value = true;
+  }
+  if (type === 'alarm') {
+    showAlarmDetailModal.value = true;
+  }
+};
+</script>
+
+<template>
+  <NScrollbar content-style="padding-right: 8px" style="width: 100%; height: 100%">
+    <!-- 工具栏 -->
+    <NFlex align="center" style="padding: 8px 8px 0 8px">
+      <NButtonGroup>
+        <template v-for="batchAction in batchActions" :key="batchAction.key">
+          <NButton :secondary="!batchAction.active" :focusable="false" @click="() => toggleSelectAction(batchAction)">{{ batchAction.label }}</NButton>
+        </template>
+      </NButtonGroup>
+      <template v-if="selectedAction">
+        <NCheckbox
+          label="全选"
+          :disabled="selectableStations.length === 0"
+          :checked="selectableStations.length > 0 && selectableStations.length === objectEntries(stationSelection).filter(([, selected]) => selected).length"
+          @update:checked="toggleSelectAllStations"
+        />
+        <NButton tertiary size="small" type="primary" :focusable="false" :loading="confirming" @click="onClickConfirmAction">确定</NButton>
+        <NButton tertiary size="small" type="tertiary" :focusable="false" @click="cancelAction">取消</NButton>
+      </template>
+    </NFlex>
+
+    <!-- 车站 -->
+    <NGrid :cols="stationGridColumns" :x-gap="6" :y-gap="6" style="padding: 8px">
+      <NGridItem v-for="station in stations" :key="station.code">
+        <StationCard
+          :station="station"
+          :devices="lineDevices[station.code] ?? initStationDevices()"
+          :alarms="lineAlarms[station.code] ?? initStationAlarms()"
+          :selectable="!!selectableStations.find((selectable) => selectable.code === station.code)"
+          v-model:selected="stationSelection[station.code]"
+          @click-detail="onClickDetail"
+          @click-config="onClickConfig"
+        />
+      </NGridItem>
+    </NGrid>
+  </NScrollbar>
+
+  <IcmpExportModal v-model:show="showIcmpExportModal" :stations="stations.filter((station) => stationSelection[station.code])" @after-leave="cancelAction" />
+  <RecordCheckExportModal v-model:show="showRecordCheckExportModal" :stations="stations.filter((station) => stationSelection[station.code])" @after-leave="cancelAction" />
+
+  <DeviceParamConfigModal v-model:show="showDeviceParamConfigModal" :station="modalStation" />
+  <DeviceDetailModal v-model:show="showDeviceDetailModal" :station="modalStation" />
+  <AlarmDetailModal v-model:show="showAlarmDetailModal" :station="modalStation" />
+</template>
+
+<style scoped lang="scss"></style>

src/router/index.ts

@@ -6,7 +6,7 @@ const router = createRouter({
   routes: [
     {
       path: '/login',
-      component: () => import('@/pages/login-page.vue'),
+      component: () => import('@/pages/login/login-page.vue'),
     },
     {
       path: '/',
@@ -15,22 +15,22 @@ const router = createRouter({
       children: [
         {
           path: 'station',
-          component: () => import('@/pages/station-page.vue'),
+          component: () => import('@/pages/station/station-page.vue'),
         },
         {
           path: 'device',
-          component: () => import('@/pages/device-page.vue'),
+          component: () => import('@/pages/device/device-page.vue'),
         },
         {
           path: 'alarm',
           children: [
             {
               path: 'alarm-log',
-              component: () => import('@/pages/alarm-log-page.vue'),
+              component: () => import('@/pages/alarm/alarm-log-page.vue'),
             },
             {
               path: 'alarm-ignore',
-              component: () => import('@/pages/alarm-ignore-page.vue'),
+              component: () => import('@/pages/alarm/alarm-ignore-page.vue'),
             },
           ],
         },
@@ -39,17 +39,17 @@ const router = createRouter({
           children: [
             {
               path: 'vimp-log',
-              component: () => import('@/pages/vimp-log-page.vue'),
+              component: () => import('@/pages/log/vimp-log-page.vue'),
             },
             {
               path: 'call-log',
-              component: () => import('@/pages/call-log-page.vue'),
+              component: () => import('@/pages/log/call-log-page.vue'),
             },
           ],
         },
         {
           path: '/:pathMatch(.*)*',
-          component: () => import('@/pages/not-found-page.vue'),
+          component: () => import('@/pages/error/not-found-page.vue'),
         },
       ],
     },

src/stores/alarm.ts

@@ -1,8 +1,7 @@
-import { initStationAlarms, type LineAlarms, type NdmDeviceAlarmLogResultVO, type Station, type StationAlarms } from '@/apis';
+import { type LineAlarms, 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';
+import { shallowRef, triggerRef } from 'vue';
 
 export const useAlarmStore = defineStore(
   NDM_ALARM_STORE_ID,
@@ -18,42 +17,10 @@ export const useAlarmStore = defineStore(
       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,
     };
   },
   {

src/stores/index.ts

@@ -3,4 +3,5 @@ export * from './device';
 export * from './polling';
 export * from './setting';
 export * from './station';
+export * from './unread';
 export * from './user';

src/stores/unread.ts

@@ -0,0 +1,44 @@
+import { initStationAlarms, type LineAlarms, type NdmDeviceAlarmLogResultVO } from '@/apis';
+import { NDM_UNREAD_STORE_ID } from '@/constants';
+import { tryGetDeviceType } from '@/enums';
+import { defineStore } from 'pinia';
+import { computed, shallowRef, triggerRef } from 'vue';
+
+export const useUnreadStore = defineStore(NDM_UNREAD_STORE_ID, () => {
+  // 全线所有车站的未读告警 (来自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 {
+    unreadLineAlarms,
+    unreadAlarmCount,
+
+    pushUnreadAlarm,
+    clearUnreadAlarms,
+  };
+});