diff --git a/src/components/dashboard-page/device-statistic.vue b/src/components/dashboard-page/device-statistic-card.vue similarity index 100% rename from src/components/dashboard-page/device-statistic.vue rename to src/components/dashboard-page/device-statistic-card.vue diff --git a/src/composables/query/alarm/index.ts b/src/composables/query/alarm/index.ts index f19ffed..19e2d14 100644 --- 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'; diff --git a/src/composables/query/alarm/use-line-alarm-counts-query.ts b/src/composables/query/alarm/use-line-alarms-query.ts similarity index 90% rename from src/composables/query/alarm/use-line-alarm-counts-query.ts rename to src/composables/query/alarm/use-line-alarms-query.ts index 06d5e9c..e8dc357 100644 --- a/src/composables/query/alarm/use-line-alarm-counts-query.ts +++ b/src/composables/query/alarm/use-line-alarms-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({ mutationFn: async ({ station, signal }) => { diff --git a/src/composables/query/device/use-line-devices-query.ts b/src/composables/query/device/use-line-devices-query.ts index f0b8f17..efab5fa 100644 --- 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 { diff --git a/src/constants/query.ts b/src/constants/query.ts index e9fa5ea..56010dc 100644 --- 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'; diff --git a/src/layouts/app-layout.vue b/src/layouts/app-layout.vue index 0a564ec..48035e0 100644 --- 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([ 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([ 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 = () => { - 网络设备管理平台 + +
网络设备管理平台
+ +
diff --git a/src/pages/alarm-page.vue b/src/pages/alarm-page.vue index a789787..362faaa 100644 --- 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'; diff --git a/src/pages/dashboard-page.vue b/src/pages/dashboard-page.vue index 769f547..0853886 100644 --- a/src/pages/dashboard-page.vue +++ b/src/pages/dashboard-page.vue @@ -1,56 +1,42 @@