From 01088e3c9d4befa3a96a5b3a864c7c46225b1a90 Mon Sep 17 00:00:00 2001
From: renna <576157508@qq.com>
Date: Wed, 16 Jul 2025 11:30:24 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B0=8F=E8=BD=A6?=
 =?UTF-8?q?=E5=B9=B3=E6=BB=91=E8=A1=8C=E9=A9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vehicle-smooth-movement/requirements.md   |  67 +++
 src/api/monitor/carRunInfo.js                 |  45 ++
 src/components/car/detail/TrackPlayback.vue   |   2 +-
 .../map/controls/VehicleAnimationSystem.vue   | 457 +++++-------------
 4 files changed, 235 insertions(+), 336 deletions(-)
 create mode 100644 .kiro/specs/vehicle-smooth-movement/requirements.md

diff --git a/.kiro/specs/vehicle-smooth-movement/requirements.md b/.kiro/specs/vehicle-smooth-movement/requirements.md
new file mode 100644
index 0000000..72b571b
--- /dev/null
+++ b/.kiro/specs/vehicle-smooth-movement/requirements.md
@@ -0,0 +1,67 @@
+# 车辆平滑移动优化需求文档
+
+## 介绍
+
+当前地图上的车辆移动存在"平滑行驶一小段然后停顿再平滑行驶"的问题，需要优化为完全平滑的连续行驶效果。系统每秒接收一次车辆位置数据，但当前的动画实现在数据间隔期间会出现停顿现象，影响用户体验。
+
+## 需求
+
+### 需求 1
+
+**用户故事：** 作为系统操作员，我希望地图上的车辆能够完全平滑地移动，这样我可以更直观地监控车辆的实时状态。
+
+#### 验收标准
+
+1. WHEN 系统接收到车辆位置更新数据 THEN 车辆应该平滑地从当前位置移动到新位置
+2. WHEN 两次位置数据之间存在时间间隔 THEN 车辆应该继续保持平滑移动而不是停顿
+3. WHEN 车辆速度发生变化 THEN 移动速度应该平滑过渡而不是突然改变
+
+### 需求 2
+
+**用户故事：** 作为系统操作员，我希望车辆的移动轨迹能够预测性地延续，这样即使在数据传输延迟时也能保持视觉连续性。
+
+#### 验收标准
+
+1. WHEN 超过预设时间没有接收到新的位置数据 THEN 系统应该基于历史轨迹预测车辆移动方向
+2. WHEN 接收到新的位置数据 THEN 预测轨迹应该平滑地调整到实际位置
+3. WHEN 车辆停止移动 THEN 预测移动应该逐渐减速直至停止
+
+### 需求 3
+
+**用户故事：** 作为系统操作员，我希望车辆的旋转角度变化也能平滑过渡，这样车辆转向时看起来更自然。
+
+#### 验收标准
+
+1. WHEN 车辆heading角度发生变化 THEN 车辆图标应该平滑旋转到新角度
+2. WHEN 角度变化较大时 THEN 应该选择最短旋转路径进行过渡
+3. WHEN 车辆移动方向与heading不一致时 THEN 应该优先使用实际移动方向进行旋转
+
+### 需求 4
+
+**用户故事：** 作为系统操作员，我希望动画系统能够自适应不同的数据接收频率，这样无论网络状况如何都能保持平滑效果。
+
+#### 验收标准
+
+1. WHEN 数据接收频率为每秒1次 THEN 动画应该在1秒内平滑完成位置过渡
+2. WHEN 数据接收出现延迟 THEN 动画应该自动调整插值时间以保持平滑
+3. WHEN 数据接收频率变化 THEN 动画参数应该动态调整以适应新频率
+
+### 需求 5
+
+**用户故事：** 作为系统操作员，我希望车辆标签能够始终跟随车辆图标移动，这样我可以持续看到车辆的实时信息。
+
+#### 验收标准
+
+1. WHEN 车辆图标移动时 THEN 车辆标签应该同步移动
+2. WHEN 车辆处于动画移动状态 THEN 标签位置应该实时更新
+3. WHEN 地图缩放或平移时 THEN 标签应该保持正确的相对位置
+
+### 需求 6
+
+**用户故事：** 作为系统操作员，我希望动画系统具有良好的性能表现，这样即使有多辆车同时移动也不会影响系统响应速度。
+
+#### 验收标准
+
+1. WHEN 同时有多辆车进行动画移动 THEN 系统帧率应该保持在30fps以上
+2. WHEN 动画运行时 THEN CPU使用率不应该显著增加
+3. WHEN 车辆数量增加时 THEN 动画性能应该保持稳定
\ No newline at end of file
diff --git a/src/api/monitor/carRunInfo.js b/src/api/monitor/carRunInfo.js
index 7418311..1a94920 100644
--- a/src/api/monitor/carRunInfo.js
+++ b/src/api/monitor/carRunInfo.js
@@ -19,6 +19,15 @@ export function exportCarRunInfo(query) {
   })
 }
 
+// 批量查询车辆轨迹
+export function batchQueryVehicleTrajectory(data) {
+  return request({
+    url: '/system/vehicle_location/trajectory/batch',
+    method: 'post',
+    data: data
+  })
+}
+
 // 根据车辆ID查询车辆运动信息列表
 export function listCarRunInfoByVehicleId(vehicleId, query) {
   return request({
@@ -28,6 +37,42 @@ export function listCarRunInfoByVehicleId(vehicleId, query) {
   })
 }
 
+// 根据车辆ID查询车辆轨迹
+export function getVehicleTrajectory(vehicleId, query) {
+  return request({
+    url: '/system/vehicle_location/trajectory/' + vehicleId,
+    method: 'get',
+    params: query
+  })
+}
+
+// 根据车辆ID查询轨迹统计信息
+export function getTrajectoryStatistics(vehicleId, query) {
+  return request({
+    url: '/system/vehicle_location/trajectory/' + vehicleId + '/statistics',
+    method: 'get',
+    params: query
+  })
+}
+
+// 根据车辆ID查询轨迹回放数据
+export function getTrajectoryPlayback(vehicleId, query) {
+  return request({
+    url: '/system/vehicle_location/trajectory/' + vehicleId + '/playback',
+    method: 'get',
+    params: query
+  })
+}
+
+// 根据车辆ID查询区域内轨迹
+export function getAreaTrajectory(vehicleId, query) {
+  return request({
+    url: '/system/vehicle_location/trajectory/' + vehicleId + '/area',
+    method: 'get',
+    params: query
+  })
+}
+
 // 根据车牌号查询车辆运动信息列表
 export function listCarRunInfoByLicensePlate(licensePlate, query) {
   return request({
diff --git a/src/components/car/detail/TrackPlayback.vue b/src/components/car/detail/TrackPlayback.vue
index 736b7e4..804b791 100644
--- a/src/components/car/detail/TrackPlayback.vue
+++ b/src/components/car/detail/TrackPlayback.vue
@@ -1,4 +1,4 @@
-<!-- TrackPlayback.vue（轨迹回放页面UI还原） -->
+<!-- TrackPlayback.vue（轨迹回放页面） -->
 <template>
   <div class="track-playback-content">
     <!-- 左侧搜索+列表 -->
diff --git a/src/components/map/controls/VehicleAnimationSystem.vue b/src/components/map/controls/VehicleAnimationSystem.vue
index b8be4c2..15f5e08 100644
--- a/src/components/map/controls/VehicleAnimationSystem.vue
+++ b/src/components/map/controls/VehicleAnimationSystem.vue
@@ -22,21 +22,15 @@ const vehicleMotionHistory = ref({}); // 存储车辆移动历史
 const PREDICTION_THRESHOLD = 50; // 从100ms降低到50ms，更早开始预测
 const MAX_PREDICTION_TIME = 15000; // 从10000ms增加到15000ms，延长预测时间
 
-// 物理模拟参数
-const ACCELERATION = 0.15; // 加速度系数
-const DECELERATION = 0.25; // 减速度系数
-const INERTIA_FACTOR = 0.99; // 从0.985增加到0.99，进一步增强惯性效果，减少抖动
-const PREDICTION_STRENGTH = 3; // 从4降低到3，进一步减少预测激进性，避免过度预测造成抖动
-const SPEED_SMOOTHING = 0.98; // 从0.97增加到0.98，进一步增强速度平滑效果
-const POSITION_SMOOTHING = 0.06; // 从0.08降低到0.06，进一步减小单次位置变化幅度，增强平滑度
-const MIN_MOVE_THRESHOLD = 0.000005; // 从0.00001降低到0.000005，确保更平滑的微小移动
-const CONTINUOUS_MOVEMENT = true; // 保持启用连续移动模式
-const MIN_SPEED = 0.5; // 从1.0降低到0.5，进一步降低最低保持速度，减少抖动
-const PREDICTION_DECAY_RATE = 0.9995; // 从0.999增加到0.9995，进一步减缓预测衰减
-const PATH_PREDICTION_ENABLED = true; // 保持启用路径预测
-const PATH_PREDICTION_POINTS = 15; // 从20降低到15，减少计算量
-const CONTINUOUS_MOVEMENT_THRESHOLD = 200; // 从300ms降低到200ms，更快触发连续移动，减少停顿感
-const POSITION_UPDATE_THRESHOLD = 3; // 从5降低到3，进一步减少位置更新阈值
+// 物理模拟参数 - 优化为完全平滑移动
+const SPEED_SMOOTHING = 0.3; // 大幅降低速度平滑系数，让速度快速响应
+const POSITION_SMOOTHING = 1.0; // 设为1.0，每帧直接移动到理想位置，确保完全平滑
+const MIN_MOVE_THRESHOLD = 0.0000001; // 极小的移动阈值
+const CONTINUOUS_MOVEMENT = true; // 启用连续移动模式
+const MIN_SPEED = 1.0; // 适中的最低保持速度
+const PREDICTION_DECAY_RATE = 0.99; // 更快的预测衰减
+const CONTINUOUS_MOVEMENT_THRESHOLD = 50; // 大幅降低阈值，几乎立即触发连续移动
+const INTERPOLATION_STEPS = 60; // 每秒60帧的插值步数
 
 // 缓动函数 - 平滑的加减速
 function easeInOutQuad(t) {
@@ -78,7 +72,7 @@ function startAnimationLoop() {
   animationFrameId.value = requestAnimationFrame(animate);
 }
 
-// 更新车辆动画
+// 更新车辆动画 - 简化版本，专注于平滑移动
 function updateVehicleAnimations(deltaTime) {
   if (!props.vehicleSource || !props.map) return;
   
@@ -91,176 +85,91 @@ function updateVehicleAnimations(deltaTime) {
     const animData = vehicleAnimations.value[id];
     if (!animData) return;
     
-    // 确保车辆总是在移动，即使没有新的位置更新
+    // 确保车辆持续移动
     ensureContinuousMovement(animData, vehicle, currentTime, deltaTime);
     
-    const timeSinceLastUpdate = currentTime - animData.lastUpdated;
-    
-    // 1. 计算目标位置（基于预测）
-    let targetPosition = [...animData.targetPosition];
-    
-    // 平滑速度过渡 - 当前速度逐渐接近目标速度
+    // 平滑速度过渡
     if (animData.currentSpeed === undefined) {
       animData.currentSpeed = animData.speed;
     } else {
-      // 使用更平滑的速度过渡
-      const speedSmoothingFactor = vehicle.speedViolation ? 0.98 : SPEED_SMOOTHING;
-      animData.currentSpeed = animData.currentSpeed * speedSmoothingFactor + 
-                             animData.speed * (1 - speedSmoothingFactor);
+      animData.currentSpeed = animData.currentSpeed * SPEED_SMOOTHING + 
+                             animData.speed * (1 - SPEED_SMOOTHING);
     }
     
-    let currentSpeed = animData.currentSpeed;
+    let currentSpeed = Math.max(animData.currentSpeed, MIN_SPEED);
     
-    // 根据时间应用不同程度的预测
-    if (timeSinceLastUpdate > PREDICTION_THRESHOLD && animData.predictionVector) {
-      // 计算预测因子，随时间增长但有上限
-      const predictTime = Math.min(timeSinceLastUpdate, MAX_PREDICTION_TIME);
-      const predictFactor = (predictTime - PREDICTION_THRESHOLD) / 1000 * 0.6; // 从0.8降低到0.6，减少预测激进性
-      
-      // 应用预测向量，考虑当前速度
-      const speedFactor = Math.min(1.0, currentSpeed / 30); // 从1.2/25降低到1.0/30，减少高速预测
-      
-      // 计算预测位置
-      const predictedPosition = [
-        animData.targetPosition[0] + animData.predictionVector[0] * predictFactor * speedFactor,
-        animData.targetPosition[1] + animData.predictionVector[1] * predictFactor * speedFactor
-      ];
-      
-      // 平滑过渡到预测位置
-      targetPosition = predictedPosition;
-      
-      // 预测时逐渐降低速度，但不要完全停止
-      if (predictTime > 2000) {
-        // 长时间无更新，缓慢降低速度，但保持最低速度
-        const slowdownFactor = Math.max(0.6, 1 - (predictTime - 2000) / 15000); // 从0.5/10000调整为0.6/15000，减缓减速率
-        currentSpeed = Math.max(currentSpeed * slowdownFactor, MIN_SPEED); // 确保最低速度不为0
-      }
-    }
-    
-    // 2. 计算当前位置到目标位置的向量
-    const dx = targetPosition[0] - animData.position[0];
-    const dy = targetPosition[1] - animData.position[1];
+    // 计算到目标位置的向量
+    const dx = animData.targetPosition[0] - animData.position[0];
+    const dy = animData.targetPosition[1] - animData.position[1];
     const distance = Math.sqrt(dx * dx + dy * dy);
     
-    // 忽略过小的位置更新，减少抖动
-    if (distance < MIN_MOVE_THRESHOLD && !CONTINUOUS_MOVEMENT) {
-      return;
-    }
+    // 计算基于速度和时间的理想移动距离
+    const idealDistance = (currentSpeed * 1000 / 3600) * (deltaTime / 1000);
     
-    // 3. 如果距离足够远或启用了连续移动，应用平滑移动
-    if (distance > MIN_MOVE_THRESHOLD || CONTINUOUS_MOVEMENT) {
-      // 计算理想移动距离（基于速度和时间）
-      const idealDistance = (currentSpeed * 1000 / 3600) * (deltaTime / 1000);
-      
-      // 根据距离动态调整移动比例
-      let moveRatio;
-      
-      // 超速车辆使用更平滑的移动
-      const positionSmoothingFactor = vehicle.speedViolation ? POSITION_SMOOTHING * 0.7 : POSITION_SMOOTHING;
-      
-      if (distance < idealDistance * 1.2) { // 从1.5降低到1.2，更早开始减速
-        // 接近目标时减速（使用更强的缓动）
-        moveRatio = Math.min(positionSmoothingFactor * 1.2, idealDistance / distance); // 从1.5降低到1.2
-        moveRatio = easeOutQuint(moveRatio);
+    // 始终移动，确保完全平滑 - 最终优化版本
+    let moveDistance;
+    
+    // 简化移动逻辑，确保始终平滑移动
+    if (distance > 0.0001) {
+      // 有明确目标时，计算合适的移动距离
+      if (distance > idealDistance) {
+        // 距离较远，按理想速度移动
+        moveDistance = idealDistance;
       } else {
-        // 正常行驶时使用标准缓动
-        moveRatio = Math.min(positionSmoothingFactor, idealDistance / distance);
-        moveRatio = easeOutCubic(moveRatio);
+        // 距离较近，使用更激进的移动策略确保快速到达
+        // 在16ms内（约60fps）移动更多距离，避免停顿
+        moveDistance = Math.max(distance * 0.5, idealDistance * 0.3);
+      }
+    } else {
+      // 已到达目标或距离极小，使用预测向量保持移动
+      moveDistance = idealDistance * 0.8;
+    }
+    
+    // 计算移动方向和更新位置
+    if (distance > 0.0001) {
+      const moveRatio = Math.min(moveDistance / distance, 1.0);
+      
+      // 直接更新位置
+      animData.position[0] += dx * moveRatio;
+      animData.position[1] += dy * moveRatio;
+    } else if (animData.predictionVector) {
+      // 使用预测向量继续移动
+      const predLen = Math.sqrt(
+        animData.predictionVector[0] * animData.predictionVector[0] + 
+        animData.predictionVector[1] * animData.predictionVector[1]
+      );
+      
+      if (predLen > 0) {
+        animData.position[0] += (animData.predictionVector[0] / predLen) * moveDistance;
+        animData.position[1] += (animData.predictionVector[1] / predLen) * moveDistance;
+      }
+    }
+    
+    // 更新地图上的要素位置
+    const feature = props.vehicleSource.getFeatureById(id);
+    if (feature) {
+      feature.getGeometry().setCoordinates(animData.position);
+      
+      // 更新车辆对象中的位置信息
+      if (props.vehicles[id]) {
+        props.vehicles[id].position = animData.position;
       }
       
-      // 修复逻辑：确保最小移动和惯性移动是互斥的
-      // 如果距离很小且有预测向量，使用预测向量进行微小移动
-      if (distance < MIN_MOVE_THRESHOLD && animData.predictionVector) {
-        // 使用预测向量作为移动方向，但使用很小的移动量
-        const minMoveAmount = (currentSpeed * 1000 / 3600) * (deltaTime / 1000) * 0.05; // 从0.1降低到0.05，减小微小移动幅度
+      // 更新车辆样式
+      if (props.getVehicleStyle) {
+        const currentHeading = vehicle ? vehicle.heading : 0;
         
-        // 归一化预测向量
-        const predLen = Math.sqrt(
-          animData.predictionVector[0] * animData.predictionVector[0] + 
-          animData.predictionVector[1] * animData.predictionVector[1]
-        );
-        
-        if (predLen > 0) {
-          const normPredX = animData.predictionVector[0] / predLen;
-          const normPredY = animData.predictionVector[1] / predLen;
-          
-          // 应用最小移动量
-          animData.position[0] += normPredX * minMoveAmount;
-          animData.position[1] += normPredY * minMoveAmount;
-          
-          // 保存本次移动向量用于下一帧惯性计算
-          animData.lastDx = normPredX * minMoveAmount;
-          animData.lastDy = normPredY * minMoveAmount;
-        }
-      } 
-      // 距离足够大时，应用惯性移动
-      else {
-        if (animData.lastDx !== undefined && animData.lastDy !== undefined) {
-          // 超速车辆使用更强的惯性
-          const inertiaFactor = vehicle.speedViolation ? INERTIA_FACTOR * 1.05 : INERTIA_FACTOR; // 从1.1降低到1.05，减少超速车辆惯性过强
-          
-          const inertiaX = animData.lastDx * inertiaFactor;
-          const inertiaY = animData.lastDy * inertiaFactor;
-          
-          // 混合新方向和惯性方向
-          const newDx = dx * moveRatio;
-          const newDy = dy * moveRatio;
-          
-          // 根据速度和距离调整惯性影响
-          const inertiaWeight = Math.min(0.75, currentSpeed / 80) * // 从0.85/70降低到0.75/80，减少惯性权重
-                              Math.min(0.9, distance / 10); // 从1.0/8调整为0.9/10，减少短距离惯性
-          
-          // 计算新位置（混合惯性和目标方向）
-          const nextX = animData.position[0] + newDx * (1 - inertiaWeight) + inertiaX * inertiaWeight;
-          const nextY = animData.position[1] + newDy * (1 - inertiaWeight) + inertiaY * inertiaWeight;
-          
-          // 应用位置更新
-          animData.position[0] = nextX;
-          animData.position[1] = nextY;
-          
-          // 保存本次移动向量用于下一帧惯性计算
-          animData.lastDx = nextX - animData.position[0];
-          animData.lastDy = nextY - animData.position[1];
-        } else {
-          // 首次移动，没有惯性
-          animData.position[0] += dx * moveRatio;
-          animData.position[1] += dy * moveRatio;
-          
-          // 初始化移动向量
-          animData.lastDx = dx * moveRatio;
-          animData.lastDy = dy * moveRatio;
-        }
-      }
-      
-      // 更新地图上的要素位置
-      const feature = props.vehicleSource.getFeatureById(id);
-      if (feature) {
-        feature.getGeometry().setCoordinates(animData.position);
-        
-        // 更新车辆对象中的位置信息，确保标签能够正确跟随
-        if (props.vehicles[id]) {
-          props.vehicles[id].position = animData.position;
-        }
-        
-        // 更新车辆样式，传递正确的heading值
-        if (feature && props.getVehicleStyle) {
-          // 获取车辆的当前heading值
-          const vehicle = props.vehicles[id];
-          const currentHeading = vehicle ? vehicle.heading : 0;
-          
-          // 只在heading发生变化时才更新样式，避免频繁更新导致闪烁
-          if (!animData.lastHeading || Math.abs(animData.lastHeading - currentHeading) > 1) {
-            feature.setStyle(props.getVehicleStyle(id, currentSpeed, currentHeading));
-            animData.lastHeading = currentHeading;
-          }
+        if (!animData.lastHeading || Math.abs(animData.lastHeading - currentHeading) > 1) {
+          feature.setStyle(props.getVehicleStyle(id, currentSpeed, currentHeading));
+          animData.lastHeading = currentHeading;
         }
       }
     }
     
-    // 保存当前速度用于下一帧
+    // 保存当前速度
     animData.currentSpeed = currentSpeed;
     
-    // 更新历史轨迹
+    // 简化的历史轨迹更新
     updateVehiclePathHistory(id, animData, currentTime);
   });
 }
@@ -282,8 +191,8 @@ function updateVehiclePathHistory(id, animData, currentTime) {
       speed: animData.currentSpeed
     });
     
-    // 增加历史轨迹长度，提供更多数据点用于预测
-    if (animData.pathHistory.length > PATH_PREDICTION_POINTS + 4) {
+    // 保持最多10个历史点
+    if (animData.pathHistory.length > 10) {
       animData.pathHistory.shift();
     }
     
@@ -291,92 +200,46 @@ function updateVehiclePathHistory(id, animData, currentTime) {
   }
 }
 
-// 确保车辆持续移动，即使没有新的位置更新
+// 确保车辆持续移动，即使没有新的位置更新 - 简化版本
 function ensureContinuousMovement(animData, vehicle, currentTime, deltaTime) {
-  // 检查上次更新时间，使用更低的阈值
   const timeSinceLastUpdate = currentTime - animData.lastUpdated;
   
-  // 如果超过阈值没有位置更新，且车辆当前速度大于0
+  // 如果超过阈值没有位置更新，创建简单的预测移动
   if (timeSinceLastUpdate > CONTINUOUS_MOVEMENT_THRESHOLD && animData.currentSpeed > 0) {
-    // 如果启用了路径预测，使用历史轨迹预测未来路径
-    if (PATH_PREDICTION_ENABLED && animData.pathHistory && animData.pathHistory.length >= 3) {
-      const predictedPath = predictFuturePath(animData);
-      if (predictedPath) {
-        // 平滑过渡到预测向量，而不是直接替换
-        if (!animData.predictionVector) {
-          animData.predictionVector = predictedPath.vector;
-        } else {
-          // 平滑混合当前预测向量和新预测向量，使用更平滑的过渡
-          animData.predictionVector = [
-            animData.predictionVector[0] * 0.8 + predictedPath.vector[0] * 0.2, // 从0.7/0.3调整为0.8/0.2
-            animData.predictionVector[1] * 0.8 + predictedPath.vector[1] * 0.2
-          ];
-        }
-        
-        // 平滑过渡到预测位置，使用更平滑的过渡
-        animData.targetPosition = [
-          animData.targetPosition[0] * 0.8 + predictedPath.position[0] * 0.2, // 从0.7/0.3调整为0.8/0.2
-          animData.targetPosition[1] * 0.8 + predictedPath.position[1] * 0.2
-        ];
-      }
-    } 
-    // 如果没有预测向量或预测向量太小，创建一个基于历史数据的预测向量
-    else if (!animData.predictionVector || 
-        (Math.abs(animData.predictionVector[0]) < 0.001 && Math.abs(animData.predictionVector[1]) < 0.001)) {
-      
-      // 使用最近两个历史点计算预测向量
+    // 简单的预测：基于最后的移动方向继续移动
+    if (!animData.predictionVector) {
+      // 如果没有预测向量，使用历史轨迹的最后方向
       if (animData.pathHistory && animData.pathHistory.length >= 2) {
-        const latestPoints = animData.pathHistory.slice(-2);
-        const dx = latestPoints[1].position[0] - latestPoints[0].position[0];
-        const dy = latestPoints[1].position[1] - latestPoints[0].position[1];
-        const len = Math.sqrt(dx*dx + dy*dy);
+        const latest = animData.pathHistory[animData.pathHistory.length - 1];
+        const previous = animData.pathHistory[animData.pathHistory.length - 2];
         
-        if (len > 0.001) {
-          const normalizedDx = dx / len;
-          const normalizedDy = dy / len;
-          const predX = normalizedDx * animData.currentSpeed * 0.18;
-          const predY = normalizedDy * animData.currentSpeed * 0.18;
-          animData.predictionVector = [predX, predY];
-          
-          // 更新目标位置为当前位置加上预测向量
-          animData.targetPosition = [
-            animData.position[0] + predX * 15,
-            animData.position[1] + predY * 15
-          ];
+        const dx = latest.position[0] - previous.position[0];
+        const dy = latest.position[1] - previous.position[1];
+        const len = Math.sqrt(dx * dx + dy * dy);
+        
+        if (len > 0) {
+          // 创建单位方向向量
+          animData.predictionVector = [dx / len, dy / len];
         } else {
-          // 如果历史点距离太近，使用默认的前进向量
-          animData.predictionVector = [0, animData.currentSpeed * 0.18];
-          animData.targetPosition = [
-            animData.position[0],
-            animData.position[1] + animData.currentSpeed * 0.18 * 15
-          ];
+          // 默认向前移动
+          animData.predictionVector = [0, 1];
         }
       } else {
-        // 没有足够的历史数据，使用默认的前进向量
-        animData.predictionVector = [0, animData.currentSpeed * 0.18];
-        animData.targetPosition = [
-          animData.position[0],
-          animData.position[1] + animData.currentSpeed * 0.18 * 15
-        ];
+        // 默认向前移动
+        animData.predictionVector = [0, 1];
       }
-    } else {
-      // 预测向量存在但需要缓慢衰减，避免突然停止
-      // 使用更高的衰减率
-      animData.predictionVector = [
-        animData.predictionVector[0] * PREDICTION_DECAY_RATE,
-        animData.predictionVector[1] * PREDICTION_DECAY_RATE
-      ];
-      
-      // 更新目标位置
-      animData.targetPosition = [
-        animData.position[0] + animData.predictionVector[0] * 15, // 从12增加到15
-        animData.position[1] + animData.predictionVector[1] * 15
-      ];
     }
     
-    // 缓慢降低速度，但保持更高的最低速度
-    if (!animData.lastSpeedReduction || currentTime - animData.lastSpeedReduction > 1000) {
-      animData.speed = Math.max(animData.speed * 0.98, MIN_SPEED); // 从0.97增加到0.98，进一步减缓速度降低率
+    // 基于预测向量更新目标位置
+    const moveDistance = (animData.currentSpeed * 1000 / 3600) * 1.0; // 1秒的移动距离
+    animData.targetPosition = [
+      animData.position[0] + animData.predictionVector[0] * moveDistance,
+      animData.position[1] + animData.predictionVector[1] * moveDistance
+    ];
+    
+    // 缓慢降低速度，但保持最低速度
+    if (!animData.lastSpeedReduction || currentTime - animData.lastSpeedReduction > 2000) {
+      animData.speed = Math.max(animData.speed * 0.95, MIN_SPEED);
       animData.lastSpeedReduction = currentTime;
     }
   }
@@ -481,124 +344,48 @@ function initVehicleAnimation(id, coordinates, heading, speed) {
   vehicleMotionHistory.value[id] = [];
 }
 
-// 更新车辆动画目标
+// 更新车辆动画目标 - 简化版本，专注于平滑过渡
 function updateVehicleAnimationTarget(id, coordinates, heading, speed) {
   const animData = vehicleAnimations.value[id] || {};
   const now = Date.now();
   
-  // 记录历史轨迹点
-  vehicleMotionHistory.value[id] = vehicleMotionHistory.value[id] || [];
-  vehicleMotionHistory.value[id].push({
-    time: now,
-    position: coordinates,
-    heading: heading, // 保存正确的heading值
-    speed: speed
-  });
-  
-  // 增加历史点数量
-  if (vehicleMotionHistory.value[id].length > 10) { // 从8增加到10
-    vehicleMotionHistory.value[id].shift();
-  }
-  
-  // 计算预测向量 - 使用更复杂的算法
+  // 简化的预测向量计算
   let predictionVector = [0, 0];
   
-  if (vehicleMotionHistory.value[id].length >= 2) {
-    // 基本预测 - 使用最近两点
-    const history = vehicleMotionHistory.value[id];
-    const latest = history[history.length - 1];
-    const previous = history[history.length - 2];
+  // 如果有当前位置，计算移动方向
+  if (animData.position) {
+    const dx = coordinates[0] - animData.position[0];
+    const dy = coordinates[1] - animData.position[1];
+    const distance = Math.sqrt(dx * dx + dy * dy);
     
-    const dt = Math.max(1, latest.time - previous.time);
-    const dx = (latest.position[0] - previous.position[0]);
-    const dy = (latest.position[1] - previous.position[1]);
-    
-    // 基础预测向量 - 考虑时间间隔
-    const baseSpeed = Math.sqrt(dx*dx + dy*dy) * (1000 / dt); // 单位时间内的移动距离
-    const normalizedDx = baseSpeed > 0 ? dx / baseSpeed : 0;
-    const normalizedDy = baseSpeed > 0 ? dy / baseSpeed : 0;
-    
-    // 减小预测强度
-    predictionVector = [
-      normalizedDx * (PREDICTION_STRENGTH * 0.9) * baseSpeed, 
-      normalizedDy * (PREDICTION_STRENGTH * 0.9) * baseSpeed
-    ];
-    
-    // 如果有更多历史点，使用加权平均提高预测准确性
-    if (vehicleMotionHistory.value[id].length >= 3) {
-      // 使用多个历史点计算平均移动趋势
-      let totalWeight = 0;
-      let weightedDx = 0;
-      let weightedDy = 0;
-      
-      // 从最近到最远遍历历史点，使用更多的历史点
-      for (let i = history.length - 2; i >= 0 && i >= history.length - 7; i--) { // 从5增加到7
-        const curr = history[i+1];
-        const prev = history[i];
-        
-        const pointDt = Math.max(1, curr.time - prev.time);
-        const pointDx = curr.position[0] - prev.position[0];
-        const pointDy = curr.position[1] - prev.position[1];
-        
-        // 使用指数衰减权重
-        const weight = Math.pow(0.85, (history.length - i - 1));
-        totalWeight += weight;
-        
-        weightedDx += pointDx * weight;
-        weightedDy += pointDy * weight;
-      }
-      
-      if (totalWeight > 0) {
-        // 归一化加权向量
-        weightedDx /= totalWeight;
-        weightedDy /= totalWeight;
-        
-        // 混合最新向量和加权历史向量，增加历史向量的权重
-        predictionVector = [
-          predictionVector[0] * 0.6 + weightedDx * PREDICTION_STRENGTH * 0.4, // 从0.7/0.3调整为0.6/0.4
-          predictionVector[1] * 0.6 + weightedDy * PREDICTION_STRENGTH * 0.4
-        ];
-      }
-    }
-    
-    // 根据速度调整预测强度，使用更平滑的曲线
-    const speedFactor = Math.min(1.8, Math.pow(speed / 15, 0.8)); // 使用幂函数使曲线更平滑
-    predictionVector = [
-      predictionVector[0] * speedFactor,
-      predictionVector[1] * speedFactor
-    ];
-    
-    // 如果车辆几乎静止，减弱预测但保持最低预测强度
-    if (speed < 2) {
-      predictionVector = [
-        predictionVector[0] * 0.4, // 从0.3增加到0.4
-        predictionVector[1] * 0.4
-      ];
+    if (distance > 0.0001) {
+      // 创建单位方向向量
+      predictionVector = [dx / distance, dy / distance];
     }
   }
   
-  // 保存速度历史用于平滑过渡，增加历史点
+  // 保存速度历史用于平滑过渡
   if (!animData.speedHistory) {
-    animData.speedHistory = [speed, speed, speed, speed]; // 增加一个点
+    animData.speedHistory = [speed, speed, speed];
   } else {
     animData.speedHistory.push(speed);
-    if (animData.speedHistory.length > 4) { // 从3增加到4
+    if (animData.speedHistory.length > 3) {
       animData.speedHistory.shift();
     }
   }
   
-  // 计算平滑速度（避免速度突变）
+  // 计算平滑速度
   const smoothedSpeed = animData.speedHistory.reduce((sum, s) => sum + s, 0) / 
                        animData.speedHistory.length;
   
-  // 更新动画数据 - 保留当前位置，只更新目标位置
+  // 更新动画数据
   vehicleAnimations.value[id] = {
     ...animData,
     targetPosition: coordinates,
-    targetHeading: heading, // 保存目标heading值
-    heading: animData.heading || heading, // 保留当前heading，如果不存在则使用新的heading
+    targetHeading: heading,
+    heading: animData.heading || heading,
     position: animData.position || coordinates,
-    speed: smoothedSpeed, // 使用平滑后的速度
+    speed: smoothedSpeed,
     lastUpdated: now,
     predictionVector,
     speedHistory: animData.speedHistory

From 16d319bb7c1dfb2d50749cc4135b34da34f046ea Mon Sep 17 00:00:00 2001
From: renna <576157508@qq.com>
Date: Wed, 16 Jul 2025 14:19:46 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E8=BD=A8=E8=BF=B9=E5=9B=9E=E6=94=BE?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vehicle-smooth-movement/requirements.md   |  67 --
 CLAUDE.md                                     | 132 ----
 src/components/car/detail/TrackPlayback.vue   | 634 ++++++++++++------
 3 files changed, 446 insertions(+), 387 deletions(-)
 delete mode 100644 .kiro/specs/vehicle-smooth-movement/requirements.md
 delete mode 100644 CLAUDE.md

diff --git a/.kiro/specs/vehicle-smooth-movement/requirements.md b/.kiro/specs/vehicle-smooth-movement/requirements.md
deleted file mode 100644
index 72b571b..0000000
--- a/.kiro/specs/vehicle-smooth-movement/requirements.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# 车辆平滑移动优化需求文档
-
-## 介绍
-
-当前地图上的车辆移动存在"平滑行驶一小段然后停顿再平滑行驶"的问题，需要优化为完全平滑的连续行驶效果。系统每秒接收一次车辆位置数据，但当前的动画实现在数据间隔期间会出现停顿现象，影响用户体验。
-
-## 需求
-
-### 需求 1
-
-**用户故事：** 作为系统操作员，我希望地图上的车辆能够完全平滑地移动，这样我可以更直观地监控车辆的实时状态。
-
-#### 验收标准
-
-1. WHEN 系统接收到车辆位置更新数据 THEN 车辆应该平滑地从当前位置移动到新位置
-2. WHEN 两次位置数据之间存在时间间隔 THEN 车辆应该继续保持平滑移动而不是停顿
-3. WHEN 车辆速度发生变化 THEN 移动速度应该平滑过渡而不是突然改变
-
-### 需求 2
-
-**用户故事：** 作为系统操作员，我希望车辆的移动轨迹能够预测性地延续，这样即使在数据传输延迟时也能保持视觉连续性。
-
-#### 验收标准
-
-1. WHEN 超过预设时间没有接收到新的位置数据 THEN 系统应该基于历史轨迹预测车辆移动方向
-2. WHEN 接收到新的位置数据 THEN 预测轨迹应该平滑地调整到实际位置
-3. WHEN 车辆停止移动 THEN 预测移动应该逐渐减速直至停止
-
-### 需求 3
-
-**用户故事：** 作为系统操作员，我希望车辆的旋转角度变化也能平滑过渡，这样车辆转向时看起来更自然。
-
-#### 验收标准
-
-1. WHEN 车辆heading角度发生变化 THEN 车辆图标应该平滑旋转到新角度
-2. WHEN 角度变化较大时 THEN 应该选择最短旋转路径进行过渡
-3. WHEN 车辆移动方向与heading不一致时 THEN 应该优先使用实际移动方向进行旋转
-
-### 需求 4
-
-**用户故事：** 作为系统操作员，我希望动画系统能够自适应不同的数据接收频率，这样无论网络状况如何都能保持平滑效果。
-
-#### 验收标准
-
-1. WHEN 数据接收频率为每秒1次 THEN 动画应该在1秒内平滑完成位置过渡
-2. WHEN 数据接收出现延迟 THEN 动画应该自动调整插值时间以保持平滑
-3. WHEN 数据接收频率变化 THEN 动画参数应该动态调整以适应新频率
-
-### 需求 5
-
-**用户故事：** 作为系统操作员，我希望车辆标签能够始终跟随车辆图标移动，这样我可以持续看到车辆的实时信息。
-
-#### 验收标准
-
-1. WHEN 车辆图标移动时 THEN 车辆标签应该同步移动
-2. WHEN 车辆处于动画移动状态 THEN 标签位置应该实时更新
-3. WHEN 地图缩放或平移时 THEN 标签应该保持正确的相对位置
-
-### 需求 6
-
-**用户故事：** 作为系统操作员，我希望动画系统具有良好的性能表现，这样即使有多辆车同时移动也不会影响系统响应速度。
-
-#### 验收标准
-
-1. WHEN 同时有多辆车进行动画移动 THEN 系统帧率应该保持在30fps以上
-2. WHEN 动画运行时 THEN CPU使用率不应该显著增加
-3. WHEN 车辆数量增加时 THEN 动画性能应该保持稳定
\ No newline at end of file
diff --git a/CLAUDE.md b/CLAUDE.md
deleted file mode 100644
index 356d355..0000000
--- a/CLAUDE.md
+++ /dev/null
@@ -1,132 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-This is the **青岛机场无人驾驶车辆协同云平台** (Qingdao Airport Autonomous Vehicle Collaborative Cloud Platform), a Vue 3 based web application for managing and monitoring autonomous vehicles at Qingdao Airport. The project uses RuoYi-Vue3 as the base framework.
-
-## Development Commands
-
-```bash
-# Install dependencies
-npm install
-
-# Development server (runs on port 6580)
-npm run dev
-# or
-yarn dev
-
-# Build for production
-npm run build:prod
-
-# Build for staging
-npm run build:stage
-
-# Preview production build
-npm run preview
-```
-
-**Note**: This project does not have configured linting, testing, or type checking scripts. Manual code review and browser testing are the primary quality assurance methods.
-
-## Architecture Overview
-
-### Tech Stack
-- **Frontend Framework**: Vue 3.2.45 with Composition API
-- **UI Library**: Element Plus 2.2.21
-- **State Management**: Pinia 2.0.22
-- **Router**: Vue Router 4.1.4
-- **Build Tool**: Vite 3.2.3
-- **Map Integration**: OpenLayers 6.15.1 with SuperMap iclient-ol
-- **Real-time Communication**: WebSocket + STOMP protocol (@stomp/stompjs, sockjs-client)
-
-### Key Features
-- **Vehicle Management**: Real-time monitoring and control of autonomous vehicles
-- **Map Visualization**: OpenLayers-based mapping with SuperMap integration for airport layouts
-- **Real-time Data**: WebSocket connections for live vehicle tracking and status updates
-- **System Administration**: User management, role-based permissions, operational logs
-
-### Project Structure
-
-#### Core Directories
-- `src/views/platform/` - Main platform dashboard
-- `src/views/car/` - Vehicle management interfaces (monitor, park, type)
-- `src/components/map/` - OpenLayers map components and controls
-- `src/components/car/` - Vehicle-specific UI components
-- `src/api/` - API service definitions organized by domain
-- `src/utils/websocket.js` - WebSocket service for real-time communication
-
-#### Map System Architecture
-The mapping system is built around OpenLayers with these key components:
-
-**Core Map Component**: `src/components/map/OpenLayersMap.vue`
-- Initializes map with EPSG:4528 projection for airport coordinates
-- Integrates SuperMap tile services for base mapping
-
-**Control Systems**:
-- `VehicleAnimationSystem.vue` - Smooth vehicle movement animations with 60FPS engine
-- `VehicleMovementControlRefactored.vue` - Enhanced vehicle tracking with motion prediction
-- `LayerSwitcher.vue` - Dynamic layer management
-- `VehicleStyleManager.vue` - Vehicle appearance and styling
-
-**Real-time Features**:
-- Motion prediction algorithms for smooth vehicle transitions
-- 300ms timeout handling for connection interruptions  
-- Physical engine simulation based on vehicle speed and direction
-
-### WebSocket Integration
-
-The application uses a custom WebSocket service (`src/utils/websocket.js`) for real-time vehicle data:
-- Auto-reconnection with configurable intervals
-- Event-driven message handling
-- Connection state management
-- STOMP protocol support for structured messaging
-
-### Development Server Configuration
-
-The Vite development server is configured to:
-- Run on port 6580 with auto-open
-- Proxy API requests to backend servers:
-  - `/dev-api` → `http://10.0.0.126:8080` (田哥 server)
-  - Alternative: `http://10.0.0.17:8099` (昊天 server)
-
-### Map Coordinate System
-
-The project uses a custom projection `EPSG:4528` for airport mapping:
-```javascript
-proj4.defs("EPSG:4528", "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");
-```
-
-Center coordinates: `[40507885.133754, 4025694.476392]`
-
-### Component Patterns
-
-**Global Components** (auto-registered):
-- `Pagination` - Standardized pagination
-- `RightToolbar` - Table operation toolbar
-- `FileUpload` / `ImageUpload` - File handling
-- `TreeSelect` - Hierarchical selection
-- `DictTag` - Dictionary value display
-
-**Route Structure**:
-- Static routes defined in `src/router/index.js`
-- Dynamic routes based on user permissions
-- Layout-based routing with nested components
-
-### Performance Optimizations
-
-**Vehicle Animation System**:
-- `requestAnimationFrame` for 60FPS smooth animations
-- Distance threshold checks (0.1m) to avoid unnecessary calculations
-- Motion history tracking (3 points) for trajectory prediction
-- Easing functions for natural movement curves
-
-### Known Issues & TODO
-As documented in README.md:
-1. Left sidebar menu state not preserved on refresh
-2. First-level menu missing background color when second-level menu is selected
-
-### API Backend Integration
-- Uses axios for HTTP requests with interceptors
-- JWT token authentication via js-cookie
-- Centralized error handling and response formatting
\ No newline at end of file
diff --git a/src/components/car/detail/TrackPlayback.vue b/src/components/car/detail/TrackPlayback.vue
index 804b791..724c913 100644
--- a/src/components/car/detail/TrackPlayback.vue
+++ b/src/components/car/detail/TrackPlayback.vue
@@ -49,26 +49,52 @@
         <div class="map-img-placeholder"></div>
         <!-- 轨迹详情卡片（左上角） -->
         <div class="track-detail-panel">
-          <!-- 第一行 -->
+          <!-- 第一行：标题和回放按钮两端对齐 -->
           <div class="panel-header">
-            <span class="dot"></span>
-            <span class="panel-title">轨迹详情</span>
+            <div class="header-left">
+              <span class="dot"></span>
+              <span class="panel-title">轨迹详情</span>
+            </div>
             <el-button size="small" type="primary" class="replay-btn" @click="handleReplay">回放</el-button>
           </div>
-          <!-- 第二行 -->
-          <div class="panel-info">
-            <div class="info-row">
-              <span class="carno">{{ activeTask?.licensePlate || activeVehicleId || "未选择车辆" }}</span>
-              <span class="info-item">最大时速 <b>{{ trackDetails.maxSpeed }}km/h</b></span>
-              <span class="info-item">平均时速 <b>{{ trackDetails.averageSpeed }}km/h</b></span>
-              <span class="info-item">总里程 <b>{{ trackDetails.totalDistance }}km</b></span>
-              <span class="info-item">耗时 <b>{{ trackDetails.totalTime }}min</b></span>
-              <span class="info-item warn">冲突告警 <b>{{ trackDetails.warnings }}</b></span>
-              <span class="info-item prewarn">冲突预警 <b>{{ trackDetails.preWarnings }}</b></span>
+          
+          <!-- 第二行：车辆信息一行显示 -->
+          <div class="vehicle-stats-row">
+            <div class="stat-item">
+              <span class="stat-value">{{  licensePlate }}</span>
+              <span class="stat-label">车牌号</span>
             </div>
+            <div class="stat-item">
+              <span class="stat-value">{{ trackDetails.maxSpeed }}km/h</span>
+              <span class="stat-label">最大时速</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-value">{{ trackDetails.averageSpeed }}km/h</span>
+              <span class="stat-label">平均时速</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-value">{{ trackDetails.totalDistance }}km</span>
+              <span class="stat-label">行驶总里程</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-value">{{ trackDetails.totalTime }}min</span>
+              <span class="stat-label">行驶耗时</span>
+            </div>
+            <div class="stat-item warn">
+              <span class="stat-value">{{ trackDetails.warnings }}</span>
+              <span class="stat-label">冲突告警</span>
+            </div>
+            <div class="stat-item prewarn">
+              <span class="stat-value">{{ trackDetails.preWarnings }}</span>
+              <span class="stat-label">冲突预警</span>
+            </div>
+            <!-- <div class="current-time">
+              <span class="time-value">13:46:53</span>
+            </div> -->
           </div>
-          <!-- 第三行：进度条 -->
-          <div class="panel-progress">
+          
+          <!-- 第三行：进度条和倍速 -->
+          <div class="progress-row">
             <div class="progress-bar-wrap"
                  @mousemove="handleProgressHover"
                  @mouseleave="showTooltip = false"
@@ -85,35 +111,34 @@
                 :style="{left: flag.percent+'%'}"
                 :title="flag.label"
               >
-                <svg width="14" height="18" viewBox="0 0 14 18">
-                  <polygon points="2,2 12,5 2,8" fill="#E34D59"/>
-                  <rect x="1" y="2" width="2" height="14" fill="#E34D59"/>
-                </svg>
+                <div class="flag-icon"></div>
               </div>
               <!-- 鼠标悬浮提示 -->
               <div v-if="showTooltip" class="progress-tooltip" :style="{left: tooltipLeft+'px'}">
                 {{ tooltipTime }}
               </div>
             </div>
-            <div class="progress-bottom">
-              <span class="start-time">{{ trackDetails.startTime || "未开始" }}</span>
-              <div class="speed-select">
-                <el-dropdown @command="setSpeed">
-                  <span class="el-dropdown-link">
-                    {{ speed }}x <i class="el-icon-arrow-down"></i>
-                  </span>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item command="1">1x</el-dropdown-item>
-                      <el-dropdown-item command="2">2x</el-dropdown-item>
-                      <el-dropdown-item command="4">4x</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-              </div>
-              <span class="end-time">{{ trackDetails.endTime || "未结束" }}</span>
+            <div class="speed-select">
+              <el-dropdown @command="setSpeed">
+                <span class="el-dropdown-link">
+                  {{ speed }}x <i class="el-icon-arrow-down"></i>
+                </span>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item command="1">1x</el-dropdown-item>
+                    <el-dropdown-item command="2">2x</el-dropdown-item>
+                    <el-dropdown-item command="4">4x</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
             </div>
           </div>
+          
+          <!-- 第四行：开始和结束时间 -->
+          <div class="time-row">
+            <span class="start-time">开始时间 {{ trackDetails.startTime || "2025-05-01 12:09:49" }}</span>
+            <span class="end-time">结束时间 {{ trackDetails.endTime || "2025-05-01 14:09:49" }}</span>
+          </div>
         </div>
       </div>
     </div>
@@ -129,7 +154,8 @@ import {
   listCarRunInfoByVehicleId, 
   listCarRunInfoByLicensePlate, 
   getLatestLocationByVehicleId, 
-  getLatestLocationByLicensePlate 
+  getLatestLocationByLicensePlate,
+  batchQueryVehicleTrajectory 
 } from "@/api/monitor/carRunInfo";
 import { ElMessage } from "element-plus";
 
@@ -174,6 +200,7 @@ const props = defineProps({
 
 // 轨迹详情数据
 const trackDetails = ref({
+  licensePlate: "",
   maxSpeed: "0",
   averageSpeed: "0",
   totalDistance: "0",
@@ -226,16 +253,19 @@ async function getRunInfoList() {
         // 计算平均速度
         const avgSpeed = (vehicleData.reduce((sum, point) => sum + point.speed, 0) / vehicleData.length).toFixed(2);
         
+        // 确保licensePlate字段存在
+        const licensePlate = firstPoint.licensePlate || `车辆${vehicleId}`;
+        
         tasksList.push({
           id: parseInt(vehicleId),
           no: vehicleId,
-          name: `车辆${firstPoint.licensePlate}轨迹`,
+          name: `车辆${licensePlate}轨迹`,
           time: `${firstPoint.timestamp}--${lastPoint.timestamp}`,
           start: `经度${firstPoint.longitude},纬度${firstPoint.latitude}`,
           end: `经度${lastPoint.longitude},纬度${lastPoint.latitude}`,
           status: "已完成",
           speed: `${avgSpeed}km/h`,
-          licensePlate: firstPoint.licensePlate,
+          licensePlate: licensePlate,
           points: vehicleData
         });
       });
@@ -245,6 +275,8 @@ async function getRunInfoList() {
       // 设置默认选中第一项
       if (tasks.value.length > 0) {
         activeId.value = tasks.value[0].id;
+        // 显示第一个任务的轨迹详情
+        selectTask(tasks.value[0]);
       }
     } else {
       ElMessage.error(response.msg || '获取车辆运动信息列表失败');
@@ -257,40 +289,88 @@ async function getRunInfoList() {
   }
 }
 
-// 根据车辆ID获取轨迹详情
-async function getTrackDetailByVehicleId(vehicleId) {
-  if (!vehicleId) return;
-  
-  try {
-    const response = await listCarRunInfoByVehicleId(vehicleId, {});
-    if (response.code === 200) {
-      const trackData = response.data || [];
-      // 处理轨迹数据...
-      console.log('车辆轨迹数据:', trackData);
-      // 这里可以处理轨迹点、告警点等
-      // 假设返回的数据格式与tasks中的points一致
-      processTrackPoints(trackData);
-    } else {
-      ElMessage.error(response.msg || '获取车辆轨迹详情失败');
-    }
-  } catch (error) {
-    console.error('获取车辆轨迹详情异常', error);
-  }
-}
 
-// 根据车牌号获取车辆最新位置
-async function getLatestLocation(licensePlate) {
-  if (!licensePlate) return;
+
+
+
+// 批量查询车辆轨迹回放数据
+async function getBatchTrajectoryPlayback(vehicleIds, timeRange) {
+  if (!vehicleIds || vehicleIds.length === 0) return;
   
+  loading.value = true;
   try {
-    const response = await getLatestLocationByLicensePlate(licensePlate);
+    const requestData = {
+      vehicleIds: vehicleIds,
+      startTime: timeRange?.[0] || '',
+      endTime: timeRange?.[1] || '',
+      pageNum: 1,
+      pageSize: 1000 // 获取更多数据用于回放
+    };
+    
+    const response = await batchQueryVehicleTrajectory(requestData);
+    console.log('批量轨迹查询结果:', response);
+    
     if (response.code === 200) {
-      const locationData = response.data;
-      // 处理位置数据...
-      console.log('车辆最新位置:', locationData);
+      const trajectoryData = response.data || response.rows || [];
+      
+      // 按车辆ID分组处理轨迹数据
+      const groupedTrajectories = {};
+      trajectoryData.forEach(point => {
+        if (!groupedTrajectories[point.vehicleId]) {
+          groupedTrajectories[point.vehicleId] = [];
+        }
+        groupedTrajectories[point.vehicleId].push(point);
+      });
+      
+      // 更新任务列表，添加轨迹回放数据
+      const updatedTasks = [];
+      Object.keys(groupedTrajectories).forEach(vehicleId => {
+        const points = groupedTrajectories[vehicleId];
+        points.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
+        
+        const firstPoint = points[0];
+        const lastPoint = points[points.length - 1];
+        const avgSpeed = (points.reduce((sum, p) => sum + (p.speed || 0), 0) / points.length).toFixed(2);
+        
+        // 确保licensePlate字段存在
+        const licensePlate = firstPoint.licensePlate || `车辆${vehicleId}`;
+        
+        updatedTasks.push({
+          id: parseInt(vehicleId),
+          no: vehicleId,
+          name: `车辆${licensePlate}轨迹回放`,
+          time: `${firstPoint.timestamp}--${lastPoint.timestamp}`,
+          start: `经度${firstPoint.longitude},纬度${firstPoint.latitude}`,
+          end: `经度${lastPoint.longitude},纬度${lastPoint.latitude}`,
+          status: "回放就绪",
+          speed: `${avgSpeed}km/h`,
+          licensePlate: licensePlate,
+          points: points,
+          isPlayback: true // 标记为回放数据
+        });
+      });
+      
+      // 合并或替换任务列表
+      if (updatedTasks.length > 0) {
+        tasks.value = updatedTasks;
+        // 默认选中第一个并显示其轨迹详情
+        if (tasks.value.length > 0) {
+          activeId.value = tasks.value[0].id;
+          selectTask(tasks.value[0]);
+        }
+        ElMessage.success(`成功加载${updatedTasks.length}个车辆的轨迹回放数据`);
+      } else {
+        ElMessage.warning('未找到轨迹回放数据');
+      }
+      
+    } else {
+      ElMessage.error(response.msg || '批量查询车辆轨迹失败');
     }
   } catch (error) {
-    console.error('获取车辆最新位置异常', error);
+    console.error('批量查询车辆轨迹异常', error);
+    ElMessage.error('批量查询车辆轨迹异常');
+  } finally {
+    loading.value = false;
   }
 }
 
@@ -306,12 +386,29 @@ const filteredTasks = computed(() => {
 
 const activeTask = computed(() => tasks.value.find((t) => t.id === activeId.value));
 
+// 计算车牌号
+const licensePlate = computed(() => {
+  if (activeTask.value?.licensePlate) {
+    return activeTask.value.licensePlate;
+  } else if (trackDetails.value.licensePlate) {
+    return trackDetails.value.licensePlate;
+  } else if (props.vehicle?.licensePlate) {
+    return props.vehicle.licensePlate;
+  }
+  return "暂无车牌号";
+});
+
 function selectTask(item) {
   activeId.value = item.id;
   
   // 从任务中提取轨迹数据
   if (item.points && item.points.length > 0) {
     processTrackPoints(item.points);
+    
+    // 更新轨迹详情中的车牌号
+    if (item.licensePlate) {
+      trackDetails.value.licensePlate = item.licensePlate;
+    }
   }
 }
 
@@ -320,6 +417,14 @@ function processTrackPoints(points) {
   // 按时间排序
   points.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
   
+  // 获取第一个点的车牌号（如果存在）
+  const firstPoint = points[0];
+  const currentLicensePlate = trackDetails.value.licensePlate; // 保存当前车牌号
+  
+  if (firstPoint && firstPoint.licensePlate) {
+    trackDetails.value.licensePlate = firstPoint.licensePlate;
+  }
+  
   // 计算最大速度
   const maxSpeed = Math.max(...points.map(p => p.speed)).toFixed(2);
   
@@ -345,8 +450,9 @@ function processTrackPoints(points) {
   const endTime = new Date(points[points.length-1].timestamp);
   const totalMinutes = Math.round((endTime - startTime) / (60 * 1000));
   
-  // 更新轨迹详情
+  // 更新轨迹详情，保留车牌号
   trackDetails.value = {
+    licensePlate: firstPoint?.licensePlate || currentLicensePlate || "暂无车牌号", // 使用新车牌号或保留原有车牌号
     maxSpeed: maxSpeed,
     averageSpeed: avgSpeed,
     totalDistance: distanceKm,
@@ -373,30 +479,50 @@ function processTrackPoints(points) {
 // 回放按钮点击处理函数
 function handleReplay() {
   // 获取当前选中任务
-  const activeTask = tasks.value.find(t => t.id === activeId.value);
+  const currentTask = tasks.value.find(t => t.id === activeId.value);
   
-  if (activeTask) {
-    if (activeTask.points && activeTask.points.length > 0) {
+  if (currentTask) {
+    if (currentTask.points && currentTask.points.length > 0) {
       // 如果任务已包含轨迹点数据，直接处理
-      processTrackPoints(activeTask.points);
+      processTrackPoints(currentTask.points);
       ElMessage.success('开始轨迹回放');
     } else {
-      // 如果没有轨迹点数据，根据车辆ID获取
-      getTrackDetailByVehicleId(activeTask.id);
+      // 使用批量查询获取轨迹回放数据
+      const vehicleIds = [currentTask.id.toString()];
+      getBatchTrajectoryPlayback(vehicleIds, queryParams.value.timeRange);
     }
   } else if (queryParams.value.vehicleId) {
-    // 使用查询参数中的车辆ID
-    getTrackDetailByVehicleId(queryParams.value.vehicleId);
+    // 使用查询参数中的车辆ID进行批量查询
+    const vehicleIds = [queryParams.value.vehicleId];
+    getBatchTrajectoryPlayback(vehicleIds, queryParams.value.timeRange);
   } else if (props.vehicle?.carId) {
-    // 使用传入的车辆ID
-    getTrackDetailByVehicleId(props.vehicle.carId);
+    // 使用传入的车辆ID进行批量查询
+    const vehicleIds = [props.vehicle.carId];
+    getBatchTrajectoryPlayback(vehicleIds, queryParams.value.timeRange);
   } else {
-    // 获取列表数据
-    getRunInfoList();
-    ElMessage.info('请先选择一个车辆任务');
+    // 如果有多个车辆，批量查询所有车辆的轨迹
+    if (tasks.value.length > 0) {
+      const vehicleIds = tasks.value.map(task => task.id.toString());
+      getBatchTrajectoryPlayback(vehicleIds, queryParams.value.timeRange);
+    } else {
+      // 获取列表数据
+      getRunInfoList();
+      ElMessage.info('请先选择一个车辆任务');
+    }
   }
 }
 
+// 批量加载所有车辆轨迹回放数据
+function loadAllTrajectoryPlayback() {
+  if (tasks.value.length === 0) {
+    ElMessage.warning('暂无车辆数据');
+    return;
+  }
+  
+  const vehicleIds = tasks.value.map(task => task.id.toString());
+  getBatchTrajectoryPlayback(vehicleIds, queryParams.value.timeRange);
+}
+
 // 导出车辆运动信息
 async function handleExport() {
   try {
@@ -466,9 +592,28 @@ function setSpeed(val) {
 
 // 页面加载时获取数据
 onMounted(() => {
-  getRunInfoList();
-  // getLatestLocation("鲁B579");
+  // 如果从父组件传入了车辆信息，初始化车牌号和默认数据
+  if (props.vehicle) {
+    if (props.vehicle.licensePlate) {
+      trackDetails.value.licensePlate = props.vehicle.licensePlate;
+    }
+    
+    // 初始化一个默认的轨迹详情数据
+    trackDetails.value = {
+      licensePlate: props.vehicle.licensePlate || "暂无车牌号",
+      maxSpeed: "0",
+      averageSpeed: "0",
+      totalDistance: "0",
+      totalTime: "0",
+      warnings: "0",
+      preWarnings: "0",
+      startTime: "",
+      endTime: ""
+    };
+  }
   
+  getRunInfoList();
+
 });
 </script>
 
@@ -616,126 +761,239 @@ onMounted(() => {
   .panel-header {
     display: flex;
     align-items: center;
-    gap: 10px;
-    margin-bottom: 8px;
-    .dot {
-      width: 10px;
-      height: 10px;
-      background: #347ae2;
-      border-radius: 50%;
-      display: inline-block;
-    }
-    .panel-title {
-      font-size: 16px;
-      font-weight: bold;
-      color: #4ea1ff;
-      margin-right: 12px;
-    }
-    .replay-btn {
-      margin-left: auto;
-    }
-  }
-  .panel-info {
-    margin-bottom: 10px;
-    .info-row {
+    justify-content: space-between;
+    margin-bottom: 12px;
+    
+    .header-left {
       display: flex;
-      flex-wrap: wrap;
-      gap: 18px;
       align-items: center;
-      font-size: 14px;
-      .carno {
-        color: #4ea1ff;
-        font-weight: bold;
-        font-size: 15px;
+      gap: 10px;
+      
+      .dot {
+        width: 10px;
+        height: 10px;
+        background: #347ae2;
+        border-radius: 50%;
+        display: inline-block;
       }
-      .info-item {
-        color: #b0b8c9;
-        b { color: #fff; font-weight: 500; }
-        &.warn b { color: #e34d59; }
-        &.prewarn b { color: #f7b500; }
+      
+      .panel-title {
+        font-size: 16px;
+        font-weight: bold;
+        color: #4ea1ff;
+      }
+    }
+    
+    .replay-btn {
+      // 按钮样式保持默认
+    }
+  }
+  // 第二行：车辆信息一行显示
+  .vehicle-stats-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+    margin-bottom: 12px;
+    
+    .vehicle-info {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      // min-width: 80px;
+      padding:3px 10px;
+  
+      
+      .vehicle-number {
+        font-size: 18px;
+        font-weight: bold;
+        color: #fff;
+        line-height: 1.2;
+        margin-bottom: 2px;
+      }
+      
+      .vehicle-label {
+        font-size: 12px;
+        color: #8a8e99;
+        line-height: 1;
+      }
+    }
+    
+    .stat-item {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      // min-width: 60px;
+      
+      .stat-value {
+        font-size: 16px;
+        font-weight: bold;
+        color: #fff;
+        line-height: 1.2;
+        margin-bottom: 2px;
+      }
+      
+      .stat-label {
+        font-size: 12px;
+        color: #8a8e99;
+        line-height: 1;
+      }
+      
+      &.warn .stat-value {
+        color: #e34d59;
+      }
+      
+      &.prewarn .stat-value {
+        color: #f7b500;
+      }
+    }
+    
+    .current-time {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: rgba(52, 122, 226, 0.15);
+      border-radius: 6px;
+      padding: 8px 12px;
+      min-width: 80px;
+      margin-left: auto;
+      
+      .time-value {
+        font-size: 16px;
+        font-weight: bold;
+        color: #4ea1ff;
+        line-height: 1;
       }
     }
   }
-  .panel-progress {
-    margin-top: 8px;
+  // 第三行：进度条和倍速
+  .progress-row {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 8px;
+    
     .progress-bar-wrap {
       position: relative;
       height: 8px;
       background: transparent;
-      margin-bottom: 8px;
       cursor: pointer;
       user-select: none;
+      flex: 1;
     }
-    .progress-bar-bg {
-      position: absolute;
-      left: 0; top: 0; right: 0; bottom: 0;
-      background: #343744;
-      border-radius: 4px;
-    }
-    .progress-bar-fg {
-      position: absolute;
-      left: 0; top: 0; bottom: 0;
-      background: linear-gradient(90deg, #347ae2, #4ea1ff);
-      border-radius: 4px;
-      height: 8px;
-      z-index: 1;
-    }
-    .progress-thumb {
-      position: absolute;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      width: 16px;
-      height: 16px;
-      background: #fff;
-      border: 3px solid #347ae2;
-      border-radius: 50%;
-      z-index: 2;
-      cursor: pointer;
-      box-shadow: 0 2px 8px rgba(52,122,226,0.12);
-    }
-    .progress-flag {
-      position: absolute;
-      top: -14px;
-      z-index: 3;
-      width: 14px;
-      height: 18px;
-      display: flex;
-      align-items: flex-end;
-      justify-content: center;
-      pointer-events: auto;
-    }
-    .progress-tooltip {
-      position: absolute;
-      top: -32px;
-      background: #23263a;
-      color: #fff;
-      font-size: 12px;
-      padding: 2px 8px;
-      border-radius: 4px;
-      white-space: nowrap;
-      box-shadow: 0 2px 8px rgba(52,122,226,0.10);
-      z-index: 10;
-      pointer-events: none;
-    }
-    .progress-bottom {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 13px;
-      color: #b0b8c9;
-      .speed-select {
-        margin: 0 16px;
-        .el-dropdown-link {
-          color: #4ea1ff;
-          cursor: pointer;
-          font-weight: bold;
-        }
-      }
-      .start-time, .end-time {
-        font-size: 13px;
-        color: #b0b8c9;
+    
+    .speed-select {
+      .el-dropdown-link {
+        color: #4ea1ff;
+        cursor: pointer;
+        font-weight: bold;
+        font-size: 14px;
       }
     }
   }
+  
+  // 第四行：开始和结束时间
+  .time-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 13px;
+    color: #b0b8c9;
+    
+    .start-time, .end-time {
+      font-size: 13px;
+      color: #b0b8c9;
+    }
+  }
+  
+  // 进度条相关样式
+  .progress-bar-bg {
+    position: absolute;
+    left: 0; top: 0; right: 0; bottom: 0;
+    background: #343744;
+    border-radius: 4px;
+  }
+  
+  .progress-bar-fg {
+    position: absolute;
+    left: 0; top: 0; bottom: 0;
+    background: linear-gradient(90deg, #347ae2, #4ea1ff);
+    border-radius: 4px;
+    height: 8px;
+    z-index: 1;
+  }
+  
+  .progress-thumb {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 16px;
+    height: 16px;
+    background: #fff;
+    border: 3px solid #347ae2;
+    border-radius: 50%;
+    z-index: 2;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(52,122,226,0.12);
+  }
+  
+  .progress-flag {
+    position: absolute;
+    top: -16px;
+    z-index: 3;
+    width: 16px;
+    height: 20px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    pointer-events: auto;
+    
+    .flag-icon {
+      position: relative;
+      width: 2px;
+      height: 18px;
+      background: #e34d59;
+      
+      // 旗杆
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 2px;
+        height: 18px;
+        background: #e34d59;
+      }
+      
+      // 小红旗
+      &::after {
+        content: '';
+        position: absolute;
+        left: 2px;
+        top: 2px;
+        width: 0;
+        height: 0;
+        border-left: 10px solid #e34d59;
+        border-top: 3px solid transparent;
+        border-bottom: 3px solid transparent;
+        // 添加小三角形缺口效果
+        clip-path: polygon(0 0, 80% 0, 70% 50%, 80% 100%, 0 100%);
+      }
+    }
+  }
+  
+  .progress-tooltip {
+    position: absolute;
+    top: -32px;
+    background: #23263a;
+    color: #fff;
+    font-size: 12px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    white-space: nowrap;
+    box-shadow: 0 2px 8px rgba(52,122,226,0.10);
+    z-index: 10;
+    pointer-events: none;
+  }
 }
 </style>