From 7ec2605cc7f2571e270fd46e0e09ab4042254dcf Mon Sep 17 00:00:00 2001 From: xh <11675084@qq.com> Date: Sat, 25 Oct 2025 01:15:53 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=92=AD=E6=94=BE=E6=97=B6?= =?UTF-8?q?=E9=97=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../composables/useTrajectoryControls.ts | 87 +++++++++++++++++----- .../Home/components/services/popup.service.ts | 2 +- .../HandDevice/Home/components/types/map.types.ts | 4 +- .../HandDevice/Home/components/utils/map.utils.ts | 4 +- 4 files changed, 72 insertions(+), 25 deletions(-) diff --git a/web/src/views/HandDevice/Home/components/composables/useTrajectoryControls.ts b/web/src/views/HandDevice/Home/components/composables/useTrajectoryControls.ts index 1928398..35937d2 100644 --- a/web/src/views/HandDevice/Home/components/composables/useTrajectoryControls.ts +++ b/web/src/views/HandDevice/Home/components/composables/useTrajectoryControls.ts @@ -17,41 +17,82 @@ export const useTrajectoryControls = () => { }) // 轨迹播放定时器 - const trajectoryPlayTimer = ref(null) + // const trajectoryPlayTimer = ref(null) + let animationId: number | null = null + let lastTime = performance.now() + + const run = () => { + if (!trajectoryPlayState.value.isPlaying) return + + const currentTime = performance.now() + const deltaTime = currentTime - lastTime + + if (deltaTime > 1000 / trajectoryPlayState.value.speed) { + lastTime = currentTime + + trajectoryPlayState.value.currentTime += 1000 + if ( + trajectoryPlayState.value.endTime && + trajectoryPlayState.value.currentTime >= trajectoryPlayState.value.endTime + ) { + trajectoryPlayState.value.currentTime = trajectoryPlayState.value.endTime + trajectoryPlayState.value.isPlaying = false + return + } + } + + animationId = requestAnimationFrame(() => run()) + } /** * 播放轨迹 */ const playTrajectory = () => { - if (trajectoryPlayTimer.value) { - window.clearInterval(trajectoryPlayTimer.value) + // if (trajectoryPlayTimer.value) { + // window.clearInterval(trajectoryPlayTimer.value) + // } + if (animationId) { + window.cancelAnimationFrame(animationId) + } + if (trajectoryPlayState.value.currentTime >= trajectoryPlayState.value.endTime) { + // 已播放完的重置时间到开始时间 + trajectoryPlayState.value.currentTime = trajectoryPlayState.value.startTime } trajectoryPlayState.value.isPlaying = true - trajectoryPlayTimer.value = window.setInterval(() => { - trajectoryPlayState.value.currentTime += 1000 * trajectoryPlayState.value.speed - }, 500) + run() + // trajectoryPlayTimer.value = window.setInterval(() => { + // trajectoryPlayState.value.currentTime += 1000 * trajectoryPlayState.value.speed + // }, 500) } /** * 暂停轨迹 */ const pauseTrajectory = () => { - if (trajectoryPlayTimer.value) { - window.clearInterval(trajectoryPlayTimer.value) - } - trajectoryPlayTimer.value = null + // if (trajectoryPlayTimer.value) { + // window.clearInterval(trajectoryPlayTimer.value) + // } trajectoryPlayState.value.isPlaying = false + if (animationId) { + window.cancelAnimationFrame(animationId) + } } /** * 停止轨迹 */ const stopTrajectory = () => { - if (trajectoryPlayTimer.value) { - window.clearInterval(trajectoryPlayTimer.value) - } - trajectoryPlayTimer.value = null + // if (trajectoryPlayTimer.value) { + // window.clearInterval(trajectoryPlayTimer.value) + // } trajectoryPlayState.value.isPlaying = false + if (animationId) { + window.cancelAnimationFrame(animationId) + } + + if (trajectoryPlayState.value.startTime) { + trajectoryPlayState.value.currentTime = trajectoryPlayState.value.startTime + } } /** @@ -81,9 +122,12 @@ export const useTrajectoryControls = () => { */ const setTrajectoryTimeRange = (range: { startTime: number; endTime: number }) => { // 停止当前播放 - if (trajectoryPlayTimer.value) { - window.clearInterval(trajectoryPlayTimer.value) - trajectoryPlayTimer.value = null + // if (trajectoryPlayTimer.value) { + // window.clearInterval(trajectoryPlayTimer.value) + // trajectoryPlayTimer.value = null + // } + if (animationId) { + window.cancelAnimationFrame(animationId) } // 更新轨迹播放状态的时间范围 @@ -123,10 +167,13 @@ export const useTrajectoryControls = () => { * 清理轨迹控制器 */ const cleanup = () => { - if (trajectoryPlayTimer.value) { - window.clearInterval(trajectoryPlayTimer.value) + // if (trajectoryPlayTimer.value) { + // window.clearInterval(trajectoryPlayTimer.value) + // } + // trajectoryPlayTimer.value = null + if (animationId) { + window.cancelAnimationFrame(animationId) } - trajectoryPlayTimer.value = null } return { diff --git a/web/src/views/HandDevice/Home/components/services/popup.service.ts b/web/src/views/HandDevice/Home/components/services/popup.service.ts index df587fc..3efa8a1 100644 --- a/web/src/views/HandDevice/Home/components/services/popup.service.ts +++ b/web/src/views/HandDevice/Home/components/services/popup.service.ts @@ -39,7 +39,7 @@ export class PopupService { * 处理单个标记弹窗 */ handleSingleMarkerPopup(markerData: MarkerData): string { - const statusStr = getHighestPriorityStatus(markerData) + const statusStr = markerData.statusStr || 'normal' return `
${markerData.name}
diff --git a/web/src/views/HandDevice/Home/components/types/map.types.ts b/web/src/views/HandDevice/Home/components/types/map.types.ts index 343bfc5..a26ecd3 100644 --- a/web/src/views/HandDevice/Home/components/types/map.types.ts +++ b/web/src/views/HandDevice/Home/components/types/map.types.ts @@ -167,7 +167,7 @@ export interface TrajectoryPlayState { /** 播放速度倍数 */ speed: number /** 播放开始时间 */ - startTime?: number + startTime: number /** 播放结束时间 */ - endTime?: number + endTime: number } diff --git a/web/src/views/HandDevice/Home/components/utils/map.utils.ts b/web/src/views/HandDevice/Home/components/utils/map.utils.ts index 171c78a..b1c201f 100644 --- a/web/src/views/HandDevice/Home/components/utils/map.utils.ts +++ b/web/src/views/HandDevice/Home/components/utils/map.utils.ts @@ -55,7 +55,7 @@ export const getHighestPriorityStatus = (markerData: { if (onlineStatus) { statuses.push(onlineStatus) } - console.log('statuses', statuses) + // console.log('statuses', statuses) // 如果没有报警状态，则为正常 if (statuses.length === 0) return 'normal' @@ -69,7 +69,7 @@ export const getHighestPriorityStatus = (markerData: { /** * 根据字典数据获取状态颜色 */ -export const getStatusColor = (status: keyof typeof STATUS_PRIORITY): string => { +export const getStatusColor = (status: string|keyof typeof STATUS_PRIORITY): string => { if (status === 'normal') return '#67c23a' if (status === 'offline') return STATUS_DICT.onlineStatus[0].cssClass