skycurtain/ndm-web-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
yangsy
2025-11-14 16:36:07 +08:00
parent 1ed091f54d
commit 686fdc8724
13 changed files with 69 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/layouts/app-layout.vue
View File

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