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

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';

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

@@ -1,16 +1,16 @@
-import { LINE_ALARM_COUNTS_QUERY_KEY } from '@/constants';
+import type { StationAlarmCounts } from './domains';
-import { useLineAlarmCountsStore } from '@/stores/line-alarm-counts';
+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 lineAlarmsStore = useLineAlarmsStore();
-  const { lineAlarmCounts } = storeToRefs(lineAlarmCountsStore);
+  const { lineAlarmCounts } = storeToRefs(lineAlarmsStore);
 
   return useMutation<StationAlarmCounts, Error, StationAlarmCountsMutationParams>({
     mutationFn: async ({ station, signal }) => {

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 {

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';

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
+      try {
-        .userLogout()
+        await userStore.userLogout();
-        .then(() => {
+        router.push('/login');
-          window.$loadingBar.finish();
+      } catch (_) {
-          router.push('/login');
+        window.$message.error('退出登录失败');
-        })
+      }
-        .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">

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';

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 { ndmExportDevices } from '@/apis/requests';
-import DeviceParamsConfigModal from '@/components/dashboard-page/device-params-config-modal.vue';
+import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables/query';
-import OfflineDeviceDetailModal from '@/components/dashboard-page/offline-device-detail-modal.vue';
+import { useLayoutStore } from '@/stores/layout';
-import StationCard from '@/components/dashboard-page/station-card.vue';
+import { useLineAlarmsStore } from '@/stores/line-alarms';
-import { useLineAlarmCountsQuery, useLineDevicesQuery } from '@/composables/query';
-import { useStationStore } from '@/stores/station';
 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 lineAlarmsStore = useLineAlarmsStore();
-const { lineAlarmCounts } = storeToRefs(lineAlarmCountsStore);
+const { lineAlarmCounts } = storeToRefs(lineAlarmsStore);
 
-const { isFetching: lineDevicesFetching, error: lineDevicesQueryError } = useLineDevicesQuery();
+const { error: lineDevicesQueryError } = useLineDevicesQuery();
-const { isFetching: lineAlarmCountsFetching, error: lineAlarmCountsQueryError } = useLineAlarmCountsQuery();
+const { error: lineAlarmsQueryError } = useLineAlarmsQuery();
 const layoutStore = useLayoutStore();
 const { stationLayoutGridCols } = storeToRefs(layoutStore);
 
-// 当设备查询或告警查询正在进行时，显示加载条
+watch([lineDevicesQueryError, lineAlarmsQueryError], ([newLineDevicesQueryError, newLineAlarmsQueryError]) => {
-watch(
-  [lineDevicesFetching, lineAlarmCountsFetching],
-  ([devicesFetching, alarmCountsFetching]) => {
-    if (devicesFetching || alarmCountsFetching) {
-      window.$loadingBar.start();
-    } else {
-      window.$loadingBar.finish();
-    }
-  },
-  {
-    immediate: true,
-  },
-);
-
-watch([lineDevicesQueryError, lineAlarmCountsQueryError], ([newLineDevicesQueryError, newLineAlarmCountsQueryError]) => {
   if (newLineDevicesQueryError) {
     window.$message.error(newLineDevicesQueryError.message);
   }
-  if (newLineAlarmCountsQueryError) {
+  if (newLineAlarmsQueryError) {
-    window.$message.error(newLineAlarmCountsQueryError.message);
+    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"

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();

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" />

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);
 

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,
-  };
-});

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,
   };
 });