refactor(query): remove unnecessary query calls and optimize global loading

2025-11-14 16:36:07 +08:00
parent 1ed091f54d
commit 686fdc8724
13 changed files with 69 additions and 105 deletions
--- a/src/components/dashboard-page/device-statistic-card.vue
+++ b/src/components/dashboard-page/device-statistic-card.vue
--- a/src/composables/query/alarm/index.ts
+++ b/src/composables/query/alarm/index.ts
@@ -1,3 +1,3 @@
 export * from './domains';

-export * from './use-line-alarm-counts-query';
+export * from './use-line-alarms-query';
--- a/src/composables/query/alarm/use-line-alarm-counts-query.ts
+++ b/src/composables/query/alarm/use-line-alarm-counts-query.ts
@@ -1,16 +1,16 @@
-import { LINE_ALARM_COUNTS_QUERY_KEY } from '@/constants';
-import { useLineAlarmCountsStore } from '@/stores/line-alarm-counts';
+import type { StationAlarmCounts } from './domains';
+import type { Station } from '@/apis/domains';
+import { postNdmDeviceAlarmLogPage } from '@/apis/requests';
+import { LINE_ALARMS_QUERY_KEY } from '@/constants';
+import { DeviceType, tryGetDeviceTypeVal } from '@/enums/device-type';
+import { useLineAlarmsStore } from '@/stores/line-alarms';
 import { useQueryControlStore } from '@/stores/query-control';
 import { useStationStore } from '@/stores/station';
 import { isCancelledError, useMutation, useQuery } from '@tanstack/vue-query';
+import { runTask } from '@/utils/run-task';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import dayjs from 'dayjs';
-import { postNdmDeviceAlarmLogPage } from '@/apis/requests';
-import type { Station } from '@/apis/domains';
-import { DeviceType, tryGetDeviceTypeVal } from '@/enums/device-type';
-import type { StationAlarmCounts } from './domains';
-import { runTask } from '@/utils/run-task';

 const createEmptyStationAlarmCounts = () => {
  return {
@@ -26,7 +26,7 @@ const createEmptyStationAlarmCounts = () => {
  };
 };

-export function useLineAlarmCountsQuery() {
+export function useLineAlarmsQuery() {
  const stationStore = useStationStore();
  const { stationList } = storeToRefs(stationStore);
  const queryControlStore = useQueryControlStore();
@@ -34,7 +34,7 @@ export function useLineAlarmCountsQuery() {
  const { mutateAsync: getStationAlarmCounts } = useStationAlarmCountsMutation();

  return useQuery({
-    queryKey: [LINE_ALARM_COUNTS_QUERY_KEY, alarmQueryStamp],
+    queryKey: [LINE_ALARMS_QUERY_KEY, alarmQueryStamp],
    enabled: computed(() => alarmQueryStamp.value > 0),
    staleTime: Infinity,
    refetchOnMount: false,
@@ -58,8 +58,8 @@ interface StationAlarmCountsMutationParams {
 }

 function useStationAlarmCountsMutation() {
-  const lineAlarmCountsStore = useLineAlarmCountsStore();
-  const { lineAlarmCounts } = storeToRefs(lineAlarmCountsStore);
+  const lineAlarmsStore = useLineAlarmsStore();
+  const { lineAlarmCounts } = storeToRefs(lineAlarmsStore);

  return useMutation<StationAlarmCounts, Error, StationAlarmCountsMutationParams>({
    mutationFn: async ({ station, signal }) => {
--- a/src/composables/query/device/use-line-devices-query.ts
+++ b/src/composables/query/device/use-line-devices-query.ts
@@ -1,15 +1,15 @@
+import type { StationDevices } from './domains';
+import { ndmClient } from '@/apis/client';
+import type { Station } from '@/apis/domains';
+import { LINE_DEVICES_QUERY_KEY } from '@/constants';
 import { DeviceType } from '@/enums/device-type';
+import { useLineDevicesStore } from '@/stores/line-devices';
 import { useQueryControlStore } from '@/stores/query-control';
 import { useStationStore } from '@/stores/station';
 import { isCancelledError, useMutation, useQuery } from '@tanstack/vue-query';
+import { runTask } from '@/utils/run-task';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
-import type { StationDevices } from './domains';
-import { useLineDevicesStore } from '@/stores/line-devices';
-import { LINE_DEVICES_QUERY_KEY } from '@/constants';
-import { ndmClient } from '@/apis/client';
-import type { Station } from '@/apis/domains';
-import { runTask } from '@/utils/run-task';

 const createEmptyStationDevices = (): StationDevices => {
  return {
--- a/src/constants/query.ts
+++ b/src/constants/query.ts
@@ -1,4 +1,4 @@
 export const STATION_LIST_QUERY_KEY = 'station-list';
 export const LINE_DEVICES_QUERY_KEY = 'line-devices';
-export const LINE_ALARM_COUNTS_QUERY_KEY = 'line-alarm-counts';
+export const LINE_ALARMS_QUERY_KEY = 'line-alarms';
 export const DEVICE_SNMP_LOGS_QUERY_KEY = 'device-snmp-logs';
--- a/src/layouts/app-layout.vue
+++ b/src/layouts/app-layout.vue
@@ -10,16 +10,18 @@ function renderIcon(icon: Component): () => VNode {
 import type { NdmDeviceAlarmLogResultVO } from '@/apis/models';
 import SettingsDrawer from '@/components/global/settings-drawer.vue';
 import { useStationListQuery } from '@/composables/query';
+import { STATION_LIST_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_ALARMS_QUERY_KEY } from '@/constants';
 import { useCurrentAlarmsStore } from '@/stores/current-alarms';
 import { useUserStore } from '@/stores/user';
 import { Client as StompClient } from '@stomp/stompjs';
+import { useIsFetching } from '@tanstack/vue-query';
 import { AlertFilled, /* AreaChartOutlined, */ FileTextFilled, HomeFilled, LogoutOutlined, SettingOutlined, VideoCameraFilled } from '@vicons/antd';
 import { ChevronDown, Debug } from '@vicons/carbon';
 import type { AxiosError } from 'axios';
 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, onMounted, ref, watch, type Component, type VNode } from 'vue';
+import { computed, h, onBeforeMount, onBeforeUnmount, onMounted, ref, watch, type Component, type VNode } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';

 const userStore = useUserStore();
@@ -38,6 +40,13 @@ watch(stationListQueryError, (newStationListQueryError) => {
  }
 });

+const stationListFetchingCount = useIsFetching({ queryKey: [STATION_LIST_QUERY_KEY] });
+const lineDevicesFetchingCount = useIsFetching({ queryKey: [LINE_DEVICES_QUERY_KEY] });
+const lineAlarmsFetchingCount = useIsFetching({ queryKey: [LINE_ALARMS_QUERY_KEY] });
+const fetchingCount = computed(() => {
+  return stationListFetchingCount.value + lineDevicesFetchingCount.value + lineAlarmsFetchingCount.value;
+});
+
 onBeforeMount(() => {
  userStore.userGetInfo().catch((err) => window.$message.error((err as AxiosError).message));
 });
@@ -104,7 +113,7 @@ const menuOptions = ref<MenuOption[]>([
    icon: renderIcon(AlertFilled),
  },
  // {
-  //   label: () => h(RouterLink, { to: '/statistics' }, { default: () => '设备性能统计' }),
+  //   label: () => h(RouterLink, { to: '/statistics' }, { default: () => '设备数据统计' }),
  //   key: '/statistics',
  //   icon: renderIcon(AreaChartOutlined),
  // },
@@ -133,13 +142,12 @@ const dropdownOptions = ref<DropdownOption[]>([
    key: 'logout',
    icon: renderIcon(LogoutOutlined),
    onClick: async () => {
-      await userStore
-        .userLogout()
-        .then(() => {
-          window.$loadingBar.finish();
-          router.push('/login');
-        })
-        .catch(() => window.$message.error('退出登录失败'));
+      try {
+        await userStore.userLogout();
+        router.push('/login');
+      } catch (_) {
+        window.$message.error('退出登录失败');
+      }
    },
  },
 ]);
@@ -175,7 +183,10 @@ const openSettingsDrawer = () => {
      <NLayout :native-scrollbar="false">
        <NLayoutHeader bordered class="app-layout-header">
          <NFlex justify="space-between" align="center" :size="8" style="width: 100%; height: 100%">
-            <span style="font-size: 16px; font-weight: 500; margin-left: 16px; cursor: pointer" @click="toDashboardPage">网络设备管理平台</span>
+            <NFlex>
+              <div style="font-size: 16px; font-weight: 500; margin-left: 16px; cursor: pointer" @click="toDashboardPage">网络设备管理平台</div>
+              <NButton text size="tiny" :loading="fetchingCount > 0" />
+            </NFlex>
            <NFlex align="center" :size="0" style="height: 100%">
              <!-- <ThemeSwitch /> -->
              <NDropdown trigger="hover" show-arrow :options="dropdownOptions" @select="selectDropdownOption">
--- a/src/pages/alarm-page.vue
+++ b/src/pages/alarm-page.vue
@@ -2,9 +2,9 @@
 import type { NdmDeviceAlarmLogResultVO } from '@/apis/models';
 import { ndmDeviceAlarmLogDefaultExportByTemplate, postNdmDeviceAlarmLogPage, putNdmDeviceAlarmLog } from '@/apis/requests';
 import { renderAlarmDateCell, renderAlarmTypeCell, renderDeviceTypeCell, renderFaultLevelCell } from '@/components/helper';
-import { FaultLevel } from '@/enums/fault-level';
 import { AlarmType } from '@/enums/alarm-type';
 import { DeviceType, DeviceTypeCode, DeviceTypeName, type DeviceTypeVal } from '@/enums/device-type';
+import { FaultLevel } from '@/enums/fault-level';
 import { useCurrentAlarmsStore } from '@/stores/current-alarms';
 import { useStationStore } from '@/stores/station';
 import { downloadByData } from '@/utils/download';
--- a/src/pages/dashboard-page.vue
+++ b/src/pages/dashboard-page.vue
@@ -1,56 +1,42 @@
 <script setup lang="ts">
 import type { Station } from '@/apis/domains';
-import DeviceAlarmDetailModal from '@/components/dashboard-page/device-alarm-detail-modal.vue';
-import DeviceParamsConfigModal from '@/components/dashboard-page/device-params-config-modal.vue';
-import OfflineDeviceDetailModal from '@/components/dashboard-page/offline-device-detail-modal.vue';
-import StationCard from '@/components/dashboard-page/station-card.vue';
-import { useLineAlarmCountsQuery, useLineDevicesQuery } from '@/composables/query';
-import { useStationStore } from '@/stores/station';
+import { ndmExportDevices } from '@/apis/requests';
+import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables/query';
+import { useLayoutStore } from '@/stores/layout';
+import { useLineAlarmsStore } from '@/stores/line-alarms';
 import { useLineDevicesStore } from '@/stores/line-devices';
+import { useStationStore } from '@/stores/station';
+import { downloadByData } from '@/utils/download';
+import { useMutation } from '@tanstack/vue-query';
 import { NGrid, NGi } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import { ref, watch } from 'vue';
-import { useLineAlarmCountsStore } from '@/stores/line-alarm-counts';
-import { useLayoutStore } from '@/stores/layout';
-import DeviceStatistic from '@/components/dashboard-page/device-statistic.vue';
-import { useMutation } from '@tanstack/vue-query';
-import { ndmExportDevices } from '@/apis/requests';
-import { downloadByData } from '@/utils/download';
 import dayjs from 'dayjs';

+import DeviceAlarmDetailModal from '@/components/dashboard-page/device-alarm-detail-modal.vue';
+import DeviceParamsConfigModal from '@/components/dashboard-page/device-params-config-modal.vue';
+import DeviceStatisticCard from '@/components/dashboard-page/device-statistic-card.vue';
+import OfflineDeviceDetailModal from '@/components/dashboard-page/offline-device-detail-modal.vue';
+import StationCard from '@/components/dashboard-page/station-card.vue';
+
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
 const lineDevicesStore = useLineDevicesStore();
 const { lineDevices } = storeToRefs(lineDevicesStore);
-const lineAlarmCountsStore = useLineAlarmCountsStore();
-const { lineAlarmCounts } = storeToRefs(lineAlarmCountsStore);
+const lineAlarmsStore = useLineAlarmsStore();
+const { lineAlarmCounts } = storeToRefs(lineAlarmsStore);

-const { isFetching: lineDevicesFetching, error: lineDevicesQueryError } = useLineDevicesQuery();
-const { isFetching: lineAlarmCountsFetching, error: lineAlarmCountsQueryError } = useLineAlarmCountsQuery();
+const { error: lineDevicesQueryError } = useLineDevicesQuery();
+const { error: lineAlarmsQueryError } = useLineAlarmsQuery();
 const layoutStore = useLayoutStore();
 const { stationLayoutGridCols } = storeToRefs(layoutStore);

-// 当设备查询或告警查询正在进行时，显示加载条
-watch(
-  [lineDevicesFetching, lineAlarmCountsFetching],
-  ([devicesFetching, alarmCountsFetching]) => {
-    if (devicesFetching || alarmCountsFetching) {
-      window.$loadingBar.start();
-    } else {
-      window.$loadingBar.finish();
-    }
-  },
-  {
-    immediate: true,
-  },
-);
-
-watch([lineDevicesQueryError, lineAlarmCountsQueryError], ([newLineDevicesQueryError, newLineAlarmCountsQueryError]) => {
+watch([lineDevicesQueryError, lineAlarmsQueryError], ([newLineDevicesQueryError, newLineAlarmsQueryError]) => {
  if (newLineDevicesQueryError) {
    window.$message.error(newLineDevicesQueryError.message);
  }
-  if (newLineAlarmCountsQueryError) {
-    window.$message.error(newLineAlarmCountsQueryError.message);
+  if (newLineAlarmsQueryError) {
+    window.$message.error(newLineAlarmsQueryError.message);
  }
 });

@@ -95,7 +81,7 @@ const openDeviceParamsConfigModal = (station: Station) => {
 </script>

 <template>
-  <DeviceStatistic
+  <DeviceStatisticCard
    :station-list="stationList"
    :line-devices="lineDevices"
    :button-loading="exporting"
--- a/src/pages/debug-page.vue
+++ b/src/pages/debug-page.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { useQueryControlStore } from '@/stores/query-control';
 import { NLayout, NLayoutContent } from 'naive-ui';
 import { onBeforeUnmount } from 'vue';
-import { useQueryControlStore } from '@/stores/query-control';

 const queryControlStore = useQueryControlStore();
 queryControlStore.disablePolling();
--- a/src/pages/device-page.vue
+++ b/src/pages/device-page.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { useDeviceSelection } from '@/composables/device';
-import { useLineDevicesQuery, type LineDevices } from '@/composables/query';
+import { useLineDevicesQuery } from '@/composables/query';
 import { useLineDevicesStore } from '@/stores/line-devices';
 import { useStationStore } from '@/stores/station';
 import { ChevronBack } from '@vicons/ionicons5';
 import { watchDebounced } from '@vueuse/core';
 import { NEmpty, NIcon, NLayout, NLayoutContent, NLayoutSider, NPageHeader, NScrollbar, NSpin } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';

 import DeviceTree from '@/components/device-page/device-tree.vue';
 import DeviceRenderer from '@/components/device-page/device-renderer.vue';

 // 数据获取
-const { isFetching: lineDevicesFetching, error: lineDevicesQueryError } = useLineDevicesQuery();
+const { error: lineDevicesQueryError } = useLineDevicesQuery();
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
 const lineDevicesStore = useLineDevicesStore();
@@ -32,21 +32,6 @@ onMounted(() => {
  initFromRoute(lineDevices.value);
 });

-// 加载条控制
-watch(
-  lineDevicesFetching,
-  (fetching) => {
-    if (fetching) {
-      window.$loadingBar.start();
-    } else {
-      window.$loadingBar.finish();
-    }
-  },
-  {
-    immediate: true,
-  },
-);
-
 // 当设备数据更新时，需要重新配置设备树
 watchDebounced(
  lineDevices,
@@ -98,11 +83,6 @@ watch(lineDevicesQueryError, (newLineDevicesQueryError) => {
              <DeviceRenderer :station-code="selectedStationCode" :device="selectedDevice" />
            </NScrollbar>
          </template>
-          <template v-else-if="lineDevicesFetching">
-            <div style="width: 100%; height: 100%; display: flex">
-              <NSpin style="margin: auto" />
-            </div>
-          </template>
          <template v-else>
            <div style="width: 100%; height: 100%; display: flex">
              <NEmpty description="选择设备查看诊断数据" style="margin: auto" />
--- a/src/pages/vimp-log-page.vue
+++ b/src/pages/vimp-log-page.vue
@@ -30,7 +30,6 @@ const vimpOperationTypeOptions: SelectOption[] = [
 <script setup lang="ts">
 import type { NdmVimpLogResultVO } from '@/apis/models/device';
 import { ndmVimpLogDefaultExportByTemplate, postNdmVimpLogPage } from '@/apis/requests';
-import { useStationListQuery } from '@/composables/query';
 import { useStationStore } from '@/stores/station';
 import { downloadByData } from '@/utils/download';
 import { useMutation } from '@tanstack/vue-query';
@@ -57,7 +56,6 @@ import {
 import { storeToRefs } from 'pinia';
 import { computed, h, onMounted, reactive, ref, watch, watchEffect } from 'vue';

-useStationListQuery();
 const stationStore = useStationStore();
 const { stationList, onlineStationList } = storeToRefs(stationStore);

--- a/src/stores/line-alarm-counts.ts
+++ b/src/stores/line-alarm-counts.ts
@@ -1,11 +0,0 @@
-import type { LineAlarmCounts } from '@/composables/query';
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-
-export const useLineAlarmCountsStore = defineStore('ndm-line-alarm-counts-store', () => {
-  const lineAlarmCounts = ref<LineAlarmCounts>({});
-
-  return {
-    lineAlarmCounts,
-  };
-});
--- a/src/stores/line-alarms.ts
+++ b/src/stores/line-alarms.ts
@@ -1,11 +1,11 @@
-import type { LineAlarms } from '@/composables/query';
+import type { LineAlarmCounts } from '@/composables/query';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';

 export const useLineAlarmsStore = defineStore('ndm-line-alarms-store', () => {
-  const lineAlarms = ref<LineAlarms>({});
+  const lineAlarmCounts = ref<LineAlarmCounts>({});

  return {
-    lineAlarms,
+    lineAlarmCounts,
  };
 });