优化播放时间

web/src/views/HandDevice/Home/components/composables/useTrajectoryControls.ts

@@ -17,41 +17,82 @@ export const useTrajectoryControls = () => {
   })
 
   // 轨迹播放定时器
-  const trajectoryPlayTimer = ref<number | null>(null)
+  // const trajectoryPlayTimer = ref<number | null>(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 {

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 `
       <div style="font-weight: bold; margin-bottom: 4px;">${markerData.name}</div>
       <div style="color: ${getStatusColor(statusStr)};">

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
 }

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