diff --git a/src/composables/query/alarm/use-line-alarm-counts-query.ts b/src/composables/query/alarm/use-line-alarm-counts-query.ts index 9fa2d32..bfbd42a 100644 --- a/src/composables/query/alarm/use-line-alarm-counts-query.ts +++ b/src/composables/query/alarm/use-line-alarm-counts-query.ts @@ -11,6 +11,7 @@ import { sleepFrame } from '@/utils/sleep'; import type { Station } from '@/apis/domains'; import { DeviceType, getDeviceTypeVal } from '@/enums/device-type'; import type { StationAlarmCounts } from './domains'; +import { runTask } from '@/utils/run-task'; const createEmptyStationAlarmCounts = () => { return { @@ -92,9 +93,12 @@ function useStationAlarmCountsMutation() { stationAlarmCounts.unclassified = parseInt(total); return stationAlarmCounts; }, - onSuccess: async (stationAlarmCounts, { station }) => { - lineAlarmCounts.value[station.code] = stationAlarmCounts; - await sleepFrame(); + onSuccess: (stationAlarmCounts, { station }) => { + // lineAlarmCounts.value[station.code] = stationAlarmCounts; + // await sleepFrame(); + runTask(() => { + lineAlarmCounts.value[station.code] = stationAlarmCounts; + }); }, onError: (error, { station }) => { console.error(`获取车站 ${station.name} 设备告警数据失败:`, error); diff --git a/src/composables/query/device/use-line-devices-query.ts b/src/composables/query/device/use-line-devices-query.ts index abd8b17..d8554c3 100644 --- a/src/composables/query/device/use-line-devices-query.ts +++ b/src/composables/query/device/use-line-devices-query.ts @@ -10,6 +10,7 @@ import { LINE_DEVICES_QUERY_KEY } from '@/constants'; import { ndmClient } from '@/apis/client'; import { sleepFrame } from '@/utils/sleep'; import type { Station } from '@/apis/domains'; +import { runTask } from '@/utils/run-task'; const createEmptyStationDevices = (): StationDevices => { return { @@ -74,9 +75,13 @@ function useStationDevicesMutation() { } return await getNdmDevicesAll(station.code, signal); }, - onSuccess: async (stationDevices, { station }) => { - lineDevices.value[station.code] = stationDevices; - await sleepFrame(); + onSuccess: (stationDevices, { station }) => { + // TODO: 优化性能,避免阻塞主线程(待测试) + // lineDevices.value[station.code] = stationDevices; + // await sleepFrame(); + runTask(() => { + lineDevices.value[station.code] = stationDevices; + }); }, onError: (error, { station }) => { console.error(`获取车站 ${station.name} 设备数据失败:`, error); diff --git a/src/utils/run-task.ts b/src/utils/run-task.ts new file mode 100644 index 0000000..1230543 --- /dev/null +++ b/src/utils/run-task.ts @@ -0,0 +1,20 @@ +export const runTask = (task: () => void) => { + // 方案一:rIC + requestIdleCallback((idle) => { + if (idle.timeRemaining() > 0) { + task(); + } else { + runTask(task); + } + }); + // 方案二:rAF + 时间判断 + // const start = Date.now(); + // requestAnimationFrame(() => { + // const now = Date.now(); + // if (now - start > 16.6) { + // task(); + // } else { + // runTask(task); + // } + // }); +};