修改平台概览UI

2025-07-15 11:49:27 +08:00 · 2025-07-15 11:49:27 +08:00 · ca53570ff8
commit ca53570ff8
parent b8640adfc8
16 changed files with 1495 additions and 1213 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@ -0,0 +1,132 @@
+# 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
--- a/README.md
+++ b/README.md
@ -26,87 +26,6 @@ yarn dev
 超图地图开发使用基础
 1、前期准备工作熟悉超图地图服务以及基本的操作。
 2、熟悉Openlayers以及Leaflet相关操作
-具体代码操作：
-1、定义一个地图渲染承载框<div id="replay_map" />
-2、定义一个地图实例 map: null,  定义一个渲染位置图层 layer: null
-3、初始化地图
-// 初始化地图
-initMap() {
-    ol.proj.setProj4(proj4);
-    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");
-    var projection = new ol.proj.Projection({
-        code: 'EPSG:4528',// 地图坐标系
-    });
-    this.map = new ol.Map({
-        target: 'replay_map',//第一步设置的地图承载框
-        controls: ol.control.defaults({
-            attribution: false,
-            rotate: false
-        }),
-        view: new ol.View({
-            center: [40507885.133754 , 4025694.476392],//地图中心点
-            zoom: 12,//初始时的缩放比例
-            projection: projection,//坐标系等的设置
-            rotation: 0.3
-        }),
-//图层，这个是后期所有自定义的展示层
-        layers: [
-            new ol.layer.Tile({
-                source: new ol.source.TileSuperMapRest({
-                    crossOrigin: 'anonymous',
-                    url: this.$map_url,
-                    extent: [40347872.25,2703739.74,40599933.05,5912395.20]
-                }),
-                projection: projection,
-            })
-        ]
-    });
-    // 添加位置图层
-    this.layer = new ol.layer.Vector({
-        source: new ol.source.Vector(),
-        zIndex: 2,
-    });
-//把自定义展示的图层放到地图中
-    this.map.addLayer(this.layer);
-},
-3、图层自定义内容
-//创建一个Feature
-const feature = new ol.Feature({
-//以一个点作为示例，可以是点、线、面
-   geometry: new ol.geom.Point([item.longitude, item.latitude]),
-});
-//定义样式
-feature.setStyle(() => {
-	//自定义样式
-	const style = [];
-	style.push(this.getStyle(type, item));
-	return style;
-}
-//这个layer就是已开始定义的渲染图层
-this.layer.getSource().addFeature(feature);
-
-// 得到style实例
-getStyle(type, item, status) {
-    return new ol.style.Style({
-        image: new ol.style.Icon({
-            src: getImage(type, item, status),
-            rotateWithView: true,
-            scale: this.getScale(type),
-            rotation:  0,
-        }),
-        zIndex: 3,
-        text: new ol.style.Text({
-            font: '12px 微软雅黑',
-            text: this.getText(type, item),
-            offsetY: -15,
-            fill: new ol.style.Fill({
-                color: '#515a71',
-            }),
-        }),
-    });
-},
-
-



@ -114,17 +33,6 @@ getStyle(type, item, status) {



-/** 获取用户列表 */
-function getUserOptions() {
- 
-  getRoleUsers(3).then(res => {
-    userOptions.value = res.rows;
- 
-  });
-}
-
-使用SockJS + STOMP协议
-滑出蓝色 滑入黄色

 20250711关键改进说明
 1. 平滑动画核心系统
@ -162,3 +70,12 @@ resetVehicleAnimations()：重置所有动画数据
 调用startVehicleSmoothing()启动平滑效果
 处理WebSocket消息时继续调用updateVehiclePosition()
 当组件隐藏时调用stopVehicleSmoothing()节省资源
+
+### 运行方向分析：
+                地图上方(heading=72)
+                      |
+                      |
+地图左侧(heading=342) --+-- 地图右侧(heading=162)
+                      |
+                      |
+                地图下方(heading=252)
--- a/public/quyu.json
+++ b/public/quyu.json
@ -0,0 +1,65 @@
+{
+    "type": "FeatureCollection",
+    "features": [
+      {
+        "type": "Feature",
+        "geometry": {
+          "type": "Polygon",
+          "coordinates": [
+            [
+              [120.082584, 36.370196],
+              [120.085137, 36.370196],
+              [120.085137, 36.365117],
+              [120.082584, 36.365117],
+              [120.082584, 36.370196]
+            ]
+          ]
+        },
+        "properties": {
+          "name": "无人车A测试区域",
+          "type": "polygon",
+          "color": "#FF5733"
+        }
+      },
+      {
+        "type": "Feature",
+        "geometry": {
+          "type": "Polygon",
+          "coordinates": [
+            [
+              [120.085765, 36.371484],
+              [120.087465, 36.371484],
+              [120.087465, 36.368099],
+              [120.085765, 36.368099],
+              [120.085765, 36.371484]
+            ]
+          ]
+        },
+        "properties": {
+          "name": "无人车B测试区域",
+          "type": "polygon",
+          "color": "#3374FF"
+        }
+      },
+      {
+        "type": "Feature",
+        "geometry": {
+          "type": "Polygon",
+          "coordinates": [
+            [
+              [120.083, 36.371],
+              [120.087, 36.371],
+              [120.087, 36.365],
+              [120.083, 36.365],
+              [120.083, 36.371]
+            ]
+          ]
+        },
+        "properties": {
+          "name": "无人车交汇测试区域",
+          "type": "polygon",
+          "color": "#33FF57"
+        }
+      }
+    ]
+  }
--- a/public/quyu1.json
+++ b/public/quyu1.json
@ -0,0 +1,49 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              120.08646134220226,
+              36.36997466676866
+            ],
+            [
+              120.086830266589,
+              36.37063980458865
+            ],
+            [
+              120.08515882034526,
+              36.37156622537344
+            ],
+            [
+              120.08543839423878,
+              36.37073891647525
+            ],
+            [
+              120.0851419887492,
+              36.370416189872486
+            ],
+            [
+              120.0858980160674,
+              36.36986114517269
+            ],
+            [
+              120.08646134220226,
+              36.36997466676866
+            ]
+          ]
+        ]
+      },
+      "properties": {
+        "type": "polygon",
+        "area": 10388.360616276083,
+        "perimeter": 452.43662412430064,
+        "vertices": 6
+      }
+    }
+  ]
+}
--- a/public/quyu2.json
+++ b/public/quyu2.json
@ -0,0 +1,77 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              120.08483597765024,
+              36.36489863472901
+            ],
+            [
+              120.08549104408633,
+              36.36594996564427
+            ],
+            [
+              120.08416649728491,
+              36.36673180599232
+            ],
+            [
+              120.08378219088705,
+              36.36561378252756
+            ],
+            [
+              120.08483597765024,
+              36.36489863472901
+            ]
+          ]
+        ]
+      },
+      "properties": {
+        "type": "polygon",
+        "area": 11470.775100380806,
+        "perimeter": 439.0229879087821,
+        "vertices": 4
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              120.08483597765024,
+              36.36489863472901
+            ],
+            [
+              120.08549104408633,
+              36.36594996564427
+            ],
+            [
+              120.08416649728491,
+              36.36673180599232
+            ],
+            [
+              120.08378219088705,
+              36.36561378252756
+            ],
+            [
+              120.08483597765024,
+              36.36489863472901
+            ]
+          ]
+        ]
+      },
+      "properties": {
+        "type": "polygon",
+        "area": 11470.775100380806,
+        "perimeter": 439.0229879087821,
+        "vertices": 4
+      }
+    }
+  ]
+}
--- a/src/components/map/controls/LayerSwitcher.vue
+++ b/src/components/map/controls/LayerSwitcher.vue
@ -83,6 +83,22 @@
                <!-- <svg class="layer-icon-preview" width="24" height="24" viewBox="0 0 1024 1024"><path d="M356.246145 681.56286c-68.156286-41.949414-107.246583-103.84102-107.246583-169.805384 0-65.966411 39.090297-127.860063 107.246583-169.809477 12.046361-7.414877 15.800871-23.190165 8.385994-35.236526-7.413853-12.046361-23.191188-15.801894-35.236526-8.387018-39.640836 24.399713-72.539106 56.044434-95.137801 91.515297-23.86657 37.461193-36.481889 79.620385-36.481889 121.917724 0 42.297338 12.615319 84.454484 36.481889 121.914654 22.598694 35.469839 55.496965 67.11456 95.137801 91.51325 4.185322 2.576685 8.821923 3.804652 13.400195 3.804652 8.598842 0 16.998139-4.329609 21.836331-12.190647C372.047016 704.752002 368.291482 688.976714 356.246145 681.56286z" fill="#FF5722"/></svg> -->
              </label>
            </div>
+            <!-- 添加区域1图层选项 -->
+            <div class="layer-item">
+              <label class="checkbox-container">
+                <input type="checkbox" v-model="showArea1Layer" />
+                <span class="checkmark"></span>
+                <span class="layer-name">测试区域1</span>
+              </label>
+            </div>
+            <!-- 添加区域2图层选项 -->
+            <div class="layer-item">
+              <label class="checkbox-container">
+                <input type="checkbox" v-model="showArea2Layer" />
+                <span class="checkmark"></span>
+                <span class="layer-name">测试区域2</span>
+              </label>
+            </div>
          </div>
        </div>
      </div>
@ -129,6 +145,14 @@ let roadVectorLayer = null;
 const showCustomRoadLayer = ref(true); // 默认显示
 let customRoadVectorLayer = null;

+// 新增：区域1图层状态
+const showArea1Layer = ref(true); // 默认显示
+let area1VectorLayer = null;
+
+// 新增：区域2图层状态
+const showArea2Layer = ref(true); // 默认显示
+let area2VectorLayer = null;
+
 // 向父组件发出事件
 const emit = defineEmits(['layerChange', 'setCategoryVisibility']);

@ -159,6 +183,12 @@ onMounted(() => {
    if (showRoadLayer.value) {
      addRoadLayer();
    }
+    
+    // 初始化区域1图层
+    loadArea1Layer();
+    
+    // 初始化区域2图层
+    loadArea2Layer();
  }
 });

@ -172,6 +202,12 @@ watch(() => props.map, (newMap) => {
    if (showRoadLayer.value) {
      addRoadLayer();
    }
+    
+    // 初始化区域1图层
+    loadArea1Layer();
+    
+    // 初始化区域2图层
+    loadArea2Layer();
  }
 });

@ -349,9 +385,145 @@ watch(showRoadLayer, (val) => {
  else removeRoadLayer();
 });

+// 加载区域1图层
+async function loadArea1Layer() {
+  // 先移除已存在的区域1图层，避免重复
+  removeArea1Layer();
+  if (!props.map) return;
+  try {
+    // 使用相对路径加载区域1文件
+    const res = await fetch('./quyu1.json');
+    const geojson = await res.json();
+    const source = new VectorSource({
+      features: new GeoJSON().readFeatures(geojson, {
+        dataProjection: 'EPSG:4326',
+        featureProjection: props.map.getView().getProjection()
+      })
+    });
+    
+    area1VectorLayer = new VectorLayer({
+      source,
+      style: new Style({
+        stroke: new Stroke({ color: '#FF5733', width: 2 }),
+        fill: new Fill({ color: 'rgba(255, 87, 51, 0.3)' })
+      }),
+      zIndex: 3, // 确保在其他图层之上
+      visible: showArea1Layer.value
+    });
+    
+    props.map.addLayer(area1VectorLayer);
+    console.log('loadArea1Layer: 已添加区域1图层', area1VectorLayer);
+  } catch (e) {
+    console.error('loadArea1Layer: 加载或添加区域1图层失败', e);
+  }
+}
+
+// 移除区域1图层
+function removeArea1Layer() {
+  if (!props.map) return;
+  let removed = false;
+  // 获取所有图层，查找类型为 VectorLayer 且 zIndex 为 3 的（即区域1图层）
+  const layers = props.map.getLayers().getArray();
+  for (let i = layers.length - 1; i >= 0; i--) {
+    const lyr = layers[i];
+    if (lyr instanceof VectorLayer && lyr.getZIndex && lyr.getZIndex() === 3) {
+      props.map.removeLayer(lyr);
+      removed = true;
+      console.log('removeArea1Layer: 已移除区域1图层', lyr);
+    }
+  }
+  area1VectorLayer = null;
+  if (!removed) {
+    console.log('removeArea1Layer: 没有找到可移除的区域1图层');
+  }
+}
+
+// 加载区域2图层
+async function loadArea2Layer() {
+  // 先移除已存在的区域2图层，避免重复
+  removeArea2Layer();
+  if (!props.map) return;
+  try {
+    // 使用相对路径加载区域2文件
+    const res = await fetch('./quyu2.json');
+    const geojson = await res.json();
+    const source = new VectorSource({
+      features: new GeoJSON().readFeatures(geojson, {
+        dataProjection: 'EPSG:4326',
+        featureProjection: props.map.getView().getProjection()
+      })
+    });
+    
+    area2VectorLayer = new VectorLayer({
+      source,
+      style: new Style({
+        stroke: new Stroke({ color: '#3374FF', width: 2 }),
+        fill: new Fill({ color: 'rgba(51, 116, 255, 0.3)' })
+      }),
+      zIndex: 4, // 确保在区域1图层之上
+      visible: showArea2Layer.value
+    });
+    
+    props.map.addLayer(area2VectorLayer);
+    console.log('loadArea2Layer: 已添加区域2图层', area2VectorLayer);
+  } catch (e) {
+    console.error('loadArea2Layer: 加载或添加区域2图层失败', e);
+  }
+}
+
+// 移除区域2图层
+function removeArea2Layer() {
+  if (!props.map) return;
+  let removed = false;
+  // 获取所有图层，查找类型为 VectorLayer 且 zIndex 为 4 的（即区域2图层）
+  const layers = props.map.getLayers().getArray();
+  for (let i = layers.length - 1; i >= 0; i--) {
+    const lyr = layers[i];
+    if (lyr instanceof VectorLayer && lyr.getZIndex && lyr.getZIndex() === 4) {
+      props.map.removeLayer(lyr);
+      removed = true;
+      console.log('removeArea2Layer: 已移除区域2图层', lyr);
+    }
+  }
+  area2VectorLayer = null;
+  if (!removed) {
+    console.log('removeArea2Layer: 没有找到可移除的区域2图层');
+  }
+}
+
+// 监听区域1显示状态变化
+watch(showArea1Layer, (val) => {
+  console.log('showArea1Layer变化:', val);
+  if (val) {
+    if (area1VectorLayer) {
+      area1VectorLayer.setVisible(true);
+    } else {
+      loadArea1Layer();
+    }
+  } else if (area1VectorLayer) {
+    area1VectorLayer.setVisible(false);
+  }
+});
+
+// 监听区域2显示状态变化
+watch(showArea2Layer, (val) => {
+  console.log('showArea2Layer变化:', val);
+  if (val) {
+    if (area2VectorLayer) {
+      area2VectorLayer.setVisible(true);
+    } else {
+      loadArea2Layer();
+    }
+  } else if (area2VectorLayer) {
+    area2VectorLayer.setVisible(false);
+  }
+});
+
 onUnmounted(() => {
  removeRoadLayer();
  removeCustomRoadLayer();
+  removeArea1Layer();
+  removeArea2Layer();
  stopFenceFlashing();
 });

--- a/src/components/map/controls/README.md
+++ b/src/components/map/controls/README.md
@ -1,167 +0,0 @@
-# 车辆移动控制系统组件重构20250711
-
-## 概述
-
-原有的 `VehicleMovementControl.vue` 文件过于庞大（1647行），不利于维护和查阅。本次重构将其拆分为多个专注的组件，提高代码的可维护性和可读性。
-
-## 组件结构
-
-### 主组件
- **VehicleMovementControlRefactored.vue** - 重构后的主组件，整合所有子组件
-
-### 子组件
-
-#### 1. VehicleAnimationSystem.vue
-**功能**: 车辆平滑动画系统
- 平滑动画逻辑
- 运动预测算法
- 缓动函数
- 动画循环管理
-
-**主要方法**:
- `startAnimationLoop()` - 启动动画循环
- `stopAnimationLoop()` - 停止动画循环
- `resetAnimations()` - 重置动画数据
- `initVehicleAnimation()` - 初始化车辆动画
- `updateVehicleAnimationTarget()` - 更新动画目标
-
-#### 2. VehicleLabelSystem.vue
-**功能**: 车辆标签系统
- 标签创建和更新
- 标签样式管理
- 标签位置计算
-
-**主要方法**:
- `updateVehicleLabel()` - 更新车辆标签
- `removeVehicleLabel()` - 移除车辆标签
- `updateAllLabels()` - 更新所有标签位置
- `setLabelVisibility()` - 设置标签可见性
-
-#### 3. VehicleDetailPopup.vue
-**功能**: 车辆详情弹窗
- 车辆详情显示
- 弹窗位置管理
- 详情数据展示
-
-**Props**:
- `visible` - 是否显示弹窗
- `detail` - 车辆详情数据
- `popupStyle` - 弹窗样式
-
-#### 4. WeatherStationPopup.vue
-**功能**: 气象监测弹窗
- 气象数据显示
- 气象数据更新
- 气象弹窗样式
-
-**Props**:
- `visible` - 是否显示弹窗
-
-#### 5. AlertNotificationSystem.vue
-**功能**: 告警提示系统
- 告警消息显示
- 告警类型管理
- 告警动画效果
-
-**Props**:
- `alertMessage` - 告警消息
- `alertType` - 告警类型
-
-#### 6. VehicleStyleManager.vue
-**功能**: 车辆样式管理
- 车辆图标选择
- 样式创建
- 状态样式管理
-
-**主要方法**:
- `getVehicleStyle()` - 获取车辆样式
- `getVehicleIcon()` - 获取车辆图标
- `createVehicleStyle()` - 创建车辆样式
- `updateVehicleStyle()` - 更新车辆样式
-
-## 重构优势
-
-### 1. 代码组织
- **单一职责**: 每个组件只负责一个特定功能
- **模块化**: 功能独立，便于单独测试和维护
- **可复用**: 子组件可以在其他地方复用
-
-### 2. 维护性
- **易于定位**: 问题可以快速定位到具体组件
- **易于修改**: 修改某个功能不会影响其他功能
- **易于扩展**: 新增功能可以创建新的子组件
-
-### 3. 性能优化
- **按需加载**: 可以按需加载子组件
- **独立更新**: 子组件可以独立更新，减少不必要的重渲染
-
-### 4. 团队协作
- **并行开发**: 不同开发者可以同时开发不同组件
- **代码审查**: 小文件更容易进行代码审查
- **知识传递**: 新团队成员更容易理解代码结构
-
-## 使用方式
-
-### 替换原有组件
-```vue
-<!-- 在父组件中使用重构后的组件 -->
-<VehicleMovementControlRefactored :map="map" />
-```
-
-### 单独使用子组件
-```vue
-<!-- 单独使用动画系统 -->
-<VehicleAnimationSystem 
-  :map="map"
-  :vehicle-source="vehicleSource"
-  :vehicles="vehicles"
-  :get-vehicle-style="getVehicleStyle"
-/>
-
-<!-- 单独使用标签系统 -->
-<VehicleLabelSystem 
-  :map="map"
-  :vehicles="vehicles"
-/>
-```
-
-## 迁移指南
-
-### 1. 备份原文件
-```bash
-cp VehicleMovementControl.vue VehicleMovementControl.vue.backup
-```
-
-### 2. 替换组件引用
-在父组件中，将：
-```vue
-<VehicleMovementControl :map="map" />
-```
-替换为：
-```vue
-<VehicleMovementControlRefactored :map="map" />
-```
-
-### 3. 测试功能
-确保所有原有功能正常工作：
- 车辆位置更新
- 车辆动画
- 标签显示
- 详情弹窗
- 气象弹窗
- 告警提示
-
-## 注意事项
-
-1. **依赖关系**: 主组件依赖所有子组件，确保所有子组件都已创建
-2. **Props传递**: 子组件通过props接收数据，确保数据流正确
-3. **事件通信**: 子组件通过emit向父组件发送事件
-4. **样式隔离**: 每个组件都有自己的样式，避免样式冲突
-
-## 后续优化建议
-
-1. **状态管理**: 考虑使用Pinia进行全局状态管理
-2. **类型安全**: 添加TypeScript类型定义
-3. **单元测试**: 为每个子组件编写单元测试
-4. **文档完善**: 为每个组件添加详细的API文档
-5. **性能监控**: 添加性能监控和优化 
--- a/src/components/map/controls/VehicleAnimationSystem.vue
+++ b/src/components/map/controls/VehicleAnimationSystem.vue
@ -25,19 +25,18 @@ const MAX_PREDICTION_TIME = 15000; // 从10000ms增加到15000ms，延长预测
 // 物理模拟参数
 const ACCELERATION = 0.15; // 加速度系数
 const DECELERATION = 0.25; // 减速度系数
-const MAX_TURN_RATE = 100; // 最大转向速率(度/秒)
-const MIN_TURN_RATE = 20; // 最小转向速率(度/秒)
-const INERTIA_FACTOR = 0.97; // 从0.95增加到0.97，增强惯性效果
-const PREDICTION_STRENGTH = 6; // 从8降低到6，减少预测激进性
-const SPEED_SMOOTHING = 0.94; // 从0.92增加到0.94，增强速度平滑效果
-const POSITION_SMOOTHING = 0.12; // 从0.15降低到0.12，增强位置平滑效果
-const MIN_MOVE_THRESHOLD = 0.00005; // 从0.0001降低到0.00005，确保更持续的移动
-const CONTINUOUS_MOVEMENT = true; // 启用连续移动模式
-const MIN_SPEED = 2.0; // 从1.5增加到2.0，提高最低保持速度
-const PREDICTION_DECAY_RATE = 0.998; // 从0.995进一步增加到0.998，减缓预测衰减
-const PATH_PREDICTION_ENABLED = true; // 启用路径预测
-const PATH_PREDICTION_POINTS = 16; // 从12增加到16，使用更多历史点
-const CONTINUOUS_MOVEMENT_THRESHOLD = 500; // 从1000ms降低到500ms，更快触发连续移动
+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，进一步减少位置更新阈值

 // 缓动函数 - 平滑的加减速
 function easeInOutQuad(t) {
@ -99,14 +98,13 @@ function updateVehicleAnimations(deltaTime) {
    
    // 1. 计算目标位置（基于预测）
    let targetPosition = [...animData.targetPosition];
-    let targetHeading = animData.targetHeading;
    
    // 平滑速度过渡 - 当前速度逐渐接近目标速度
    if (animData.currentSpeed === undefined) {
      animData.currentSpeed = animData.speed;
    } else {
      // 使用更平滑的速度过渡
-      const speedSmoothingFactor = vehicle.speedViolation ? 0.96 : SPEED_SMOOTHING;
+      const speedSmoothingFactor = vehicle.speedViolation ? 0.98 : SPEED_SMOOTHING;
      animData.currentSpeed = animData.currentSpeed * speedSmoothingFactor + 
                             animData.speed * (1 - speedSmoothingFactor);
    }
@ -117,10 +115,10 @@ function updateVehicleAnimations(deltaTime) {
    if (timeSinceLastUpdate > PREDICTION_THRESHOLD && animData.predictionVector) {
      // 计算预测因子，随时间增长但有上限
      const predictTime = Math.min(timeSinceLastUpdate, MAX_PREDICTION_TIME);
-      const predictFactor = (predictTime - PREDICTION_THRESHOLD) / 1000 * 0.8;
+      const predictFactor = (predictTime - PREDICTION_THRESHOLD) / 1000 * 0.6; // 从0.8降低到0.6，减少预测激进性
      
      // 应用预测向量，考虑当前速度
-      const speedFactor = Math.min(1.2, currentSpeed / 25); // 速度越高预测越远
+      const speedFactor = Math.min(1.0, currentSpeed / 30); // 从1.2/25降低到1.0/30，减少高速预测
      
      // 计算预测位置
      const predictedPosition = [
@ -134,7 +132,7 @@ function updateVehicleAnimations(deltaTime) {
      // 预测时逐渐降低速度，但不要完全停止
      if (predictTime > 2000) {
        // 长时间无更新，缓慢降低速度，但保持最低速度
-        const slowdownFactor = Math.max(0.5, 1 - (predictTime - 2000) / 10000);
+        const slowdownFactor = Math.max(0.6, 1 - (predictTime - 2000) / 15000); // 从0.5/10000调整为0.6/15000，减缓减速率
        currentSpeed = Math.max(currentSpeed * slowdownFactor, MIN_SPEED); // 确保最低速度不为0
      }
    }
@ -144,6 +142,11 @@ function updateVehicleAnimations(deltaTime) {
    const dy = targetPosition[1] - animData.position[1];
    const distance = Math.sqrt(dx * dx + dy * dy);
    
+    // 忽略过小的位置更新，减少抖动
+    if (distance < MIN_MOVE_THRESHOLD && !CONTINUOUS_MOVEMENT) {
+      return;
+    }
+    
    // 3. 如果距离足够远或启用了连续移动，应用平滑移动
    if (distance > MIN_MOVE_THRESHOLD || CONTINUOUS_MOVEMENT) {
      // 计算理想移动距离（基于速度和时间）
@ -153,11 +156,11 @@ function updateVehicleAnimations(deltaTime) {
      let moveRatio;
      
      // 超速车辆使用更平滑的移动
-      const positionSmoothingFactor = vehicle.speedViolation ? POSITION_SMOOTHING * 0.8 : POSITION_SMOOTHING;
+      const positionSmoothingFactor = vehicle.speedViolation ? POSITION_SMOOTHING * 0.7 : POSITION_SMOOTHING;
      
-      if (distance < idealDistance * 1.5) {
+      if (distance < idealDistance * 1.2) { // 从1.5降低到1.2，更早开始减速
        // 接近目标时减速（使用更强的缓动）
-        moveRatio = Math.min(positionSmoothingFactor * 1.5, idealDistance / distance);
+        moveRatio = Math.min(positionSmoothingFactor * 1.2, idealDistance / distance); // 从1.5降低到1.2
        moveRatio = easeOutQuint(moveRatio);
      } else {
        // 正常行驶时使用标准缓动
@ -169,7 +172,7 @@ function updateVehicleAnimations(deltaTime) {
      // 如果距离很小且有预测向量，使用预测向量进行微小移动
      if (distance < MIN_MOVE_THRESHOLD && animData.predictionVector) {
        // 使用预测向量作为移动方向，但使用很小的移动量
-        const minMoveAmount = (currentSpeed * 1000 / 3600) * (deltaTime / 1000) * 0.1;
+        const minMoveAmount = (currentSpeed * 1000 / 3600) * (deltaTime / 1000) * 0.05; // 从0.1降低到0.05，减小微小移动幅度
        
        // 归一化预测向量
        const predLen = Math.sqrt(
@ -194,7 +197,7 @@ function updateVehicleAnimations(deltaTime) {
      else {
        if (animData.lastDx !== undefined && animData.lastDy !== undefined) {
          // 超速车辆使用更强的惯性
-          const inertiaFactor = vehicle.speedViolation ? INERTIA_FACTOR * 1.1 : INERTIA_FACTOR;
+          const inertiaFactor = vehicle.speedViolation ? INERTIA_FACTOR * 1.05 : INERTIA_FACTOR; // 从1.1降低到1.05，减少超速车辆惯性过强
          
          const inertiaX = animData.lastDx * inertiaFactor;
          const inertiaY = animData.lastDy * inertiaFactor;
@ -204,8 +207,8 @@ function updateVehicleAnimations(deltaTime) {
          const newDy = dy * moveRatio;
          
          // 根据速度和距离调整惯性影响
-          const inertiaWeight = Math.min(0.85, currentSpeed / 70) * 
-                              Math.min(1.0, distance / 8); // 调整惯性权重计算
+          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;
@ -238,69 +241,18 @@ function updateVehicleAnimations(deltaTime) {
        if (props.vehicles[id]) {
          props.vehicles[id].position = animData.position;
        }
-      }
        
-      // 计算实际移动方向（用于更自然的转向）
-      if (Math.abs(animData.lastDx) > 0.001 || Math.abs(animData.lastDy) > 0.001) {
-        const movementHeading = (Math.atan2(animData.lastDy, animData.lastDx) * 180 / Math.PI + 90) % 360;
-        
-        // 平滑过渡到新的移动方向
-        if (animData.movementHeading === undefined) {
-          animData.movementHeading = movementHeading;
-        } else {
-          // 计算角度差，确保走最短路径
-          const headingDiff = ((movementHeading - animData.movementHeading + 540) % 360) - 180;
-          animData.movementHeading = (animData.movementHeading + headingDiff * 0.2 + 360) % 360;
-        }
-      }
-    }
-    
-    // 4. 平滑转向逻辑 - 考虑移动方向和目标方向
-    // 首先确定最佳目标方向（结合目标朝向和实际移动方向）
-    let bestTargetHeading = targetHeading;
-    
-    // 如果有移动方向且速度足够高，部分考虑移动方向
-    if (animData.movementHeading !== undefined && currentSpeed > 5) {
-      // 速度越高，移动方向的权重越大
-      const movementWeight = Math.min(0.6, currentSpeed / 70);
-      
-      // 计算角度差，确保选择最短路径
-      const headingDiff = ((animData.movementHeading - targetHeading + 540) % 360) - 180;
-      
-      // 如果移动方向和目标方向相差不大，部分采用移动方向
-      if (Math.abs(headingDiff) < 100) {
-        bestTargetHeading = targetHeading + headingDiff * movementWeight;
-      }
-    }
-    
-    // 应用平滑转向
-    const headingDiff = bestTargetHeading - animData.heading;
-    if (Math.abs(headingDiff) > 0.1) {
-      // 归一化角度差值（确保走最短路径）
-      const normalizedDiff = ((headingDiff + 180) % 360) - 180;
-      
-      // 基于速度动态调整转向速率
-      // 低速时转向快，高速时转向慢
-      const turnRate = MAX_TURN_RATE - (MAX_TURN_RATE - MIN_TURN_RATE) * Math.min(1, currentSpeed / 60);
-      
-      // 超速车辆转向更平滑
-      const actualTurnRate = vehicle.speedViolation ? turnRate * 0.8 : turnRate;
-      
-      // 计算本帧转向量
-      const turnAmount = Math.sign(normalizedDiff) * 
-                        Math.min(Math.abs(normalizedDiff), actualTurnRate * deltaTime / 1000);
-      
-      // 应用转向
-      animData.heading += turnAmount;
-      animData.heading = (animData.heading + 360) % 360;
-      
-      // 更新车辆样式（朝向）
-      const feature = props.vehicleSource.getFeatureById(id);
+        // 更新车辆样式，传递正确的heading值
        if (feature && props.getVehicleStyle) {
-        // 减少样式更新频率，避免闪烁
-        if (!animData.lastStyleUpdateTime || currentTime - animData.lastStyleUpdateTime > 500) {
-          feature.setStyle(props.getVehicleStyle(id, currentSpeed, animData.heading));
-          animData.lastStyleUpdateTime = currentTime;
+          // 获取车辆的当前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;
+          }
        }
      }
    }
@ -368,22 +320,45 @@ function ensureContinuousMovement(animData, vehicle, currentTime, deltaTime) {
        ];
      }
    } 
-    // 如果没有预测向量或预测向量太小，创建一个基于当前朝向的预测向量
+    // 如果没有预测向量或预测向量太小，创建一个基于历史数据的预测向量
    else if (!animData.predictionVector || 
        (Math.abs(animData.predictionVector[0]) < 0.001 && Math.abs(animData.predictionVector[1]) < 0.001)) {
      
-      // 根据车辆朝向创建预测向量
-      const headingRad = (animData.heading - 90) * Math.PI / 180;
-      const predX = Math.cos(headingRad) * animData.currentSpeed * 0.18; // 从0.15增加到0.18
-      const predY = Math.sin(headingRad) * animData.currentSpeed * 0.18;
+      // 使用最近两个历史点计算预测向量
+      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);
        
+        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, // 从12增加到15
+            animData.position[0] + predX * 15,
            animData.position[1] + predY * 15
          ];
+        } else {
+          // 如果历史点距离太近，使用默认的前进向量
+          animData.predictionVector = [0, animData.currentSpeed * 0.18];
+          animData.targetPosition = [
+            animData.position[0],
+            animData.position[1] + animData.currentSpeed * 0.18 * 15
+          ];
+        }
+      } else {
+        // 没有足够的历史数据，使用默认的前进向量
+        animData.predictionVector = [0, animData.currentSpeed * 0.18];
+        animData.targetPosition = [
+          animData.position[0],
+          animData.position[1] + animData.currentSpeed * 0.18 * 15
+        ];
+      }
    } else {
      // 预测向量存在但需要缓慢衰减，避免突然停止
      // 使用更高的衰减率
@ -488,15 +463,15 @@ function initVehicleAnimation(id, coordinates, heading, speed) {
  vehicleAnimations.value[id] = {
    position: [...coordinates],
    targetPosition: [...coordinates],
-    heading: heading,
-    targetHeading: heading,
+    heading: heading, // 保存heading值
+    targetHeading: heading, // 保存目标heading值
    speed: speed,
    currentSpeed: speed,
    lastUpdated: Date.now(),
    predictionVector: null,
    lastDx: 0,
    lastDy: 0,
-    movementHeading: heading,
+    lastHeading: heading, // 添加lastHeading字段用于跟踪heading变化
    // 添加速度历史记录用于平滑过渡
    speedHistory: [speed, speed, speed],
    pathHistory: [], // 初始化路径历史
@ -516,7 +491,7 @@ function updateVehicleAnimationTarget(id, coordinates, heading, speed) {
  vehicleMotionHistory.value[id].push({
    time: now,
    position: coordinates,
-    heading: heading,
+    heading: heading, // 保存正确的heading值
    speed: speed
  });
  
@ -620,7 +595,8 @@ function updateVehicleAnimationTarget(id, coordinates, heading, speed) {
  vehicleAnimations.value[id] = {
    ...animData,
    targetPosition: coordinates,
-    targetHeading: heading,
+    targetHeading: heading, // 保存目标heading值
+    heading: animData.heading || heading, // 保留当前heading，如果不存在则使用新的heading
    position: animData.position || coordinates,
    speed: smoothedSpeed, // 使用平滑后的速度
    lastUpdated: now,
@ -648,15 +624,15 @@ function resetAnimations() {
      vehicleAnimations.value[id] = {
        position: [...vehicle.position],
        targetPosition: [...vehicle.position],
-        heading: vehicle.heading,
-        targetHeading: vehicle.heading,
+        heading: vehicle.heading || 0, // 使用车辆的heading值
+        targetHeading: vehicle.heading || 0, // 使用车辆的heading值
        speed: vehicle.speed,
        currentSpeed: vehicle.speed,
        lastUpdated: Date.now(),
        predictionVector: null,
        lastDx: 0,
        lastDy: 0,
-        movementHeading: vehicle.heading,
+        lastHeading: vehicle.heading || 0, // 使用车辆的heading值
        speedHistory: [vehicle.speed, vehicle.speed, vehicle.speed],
        pathHistory: [], // 重置路径历史
        lastPathRecordTime: Date.now() // 重置路径记录时间
--- a/src/components/map/controls/VehicleLabelSystem.vue
+++ b/src/components/map/controls/VehicleLabelSystem.vue
@ -1,10 +1,10 @@
 <template>
-  <!-- 标签系统不需要模板内容 -->
+  <!-- 标签容器，不在模板中渲染任何内容，标签由JS动态创建 -->
 </template>

 <script setup>
-import { ref } from 'vue';
-import Overlay from 'ol/Overlay';
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { Overlay } from 'ol';

 // 定义props
 const props = defineProps({
@ -12,288 +12,462 @@ const props = defineProps({
  vehicles: Object
 });

-// 导入背景图片
-import labelBg from '../../../assets/images/label_bg.png';
-import airportBg from '../../../assets/images/airport_bg.png';
-import airportOutBg from '../../../assets/images/airport_out.png';
-import alarmBg from '../../../assets/images/alarm_bg.png';
-import warningBg from '../../../assets/images/warning_bg.png';
+// 存储标签覆盖物
+const vehicleLabels = ref({});
+// 添加标签更新时间记录
+const labelUpdateTimes = ref({});
+// 定义更新间隔常量(毫秒)
+const UPDATE_INTERVAL = 500; // 每500ms更新一次标签

-// 更新车辆标签
-function updateVehicleLabel(id, position, speed, violationInfo = null) {
-  if (!props.map || !props.vehicles[id]) return;
+// 创建或更新车辆标签
+function updateVehicleLabel(vehicleId, coordinates, speed, alertInfo) {
+  if (!props.map) return;
  
-  // 先移除可能存在的旧标签，确保不会重复显示
-  removeVehicleLabel(id);
+  // 获取当前时间
+  const now = Date.now();
  
-  const vehicle = props.vehicles[id];
-  const isAircraftIn = vehicle.isAircraftIn;
-  const isAircraftOut = vehicle.isAircraftOut;
-  const isUnmannedVehicle = vehicle.isUnmannedVehicle;
-  const isSpecialVehicle = vehicle.isSpecialVehicle;
-  const isShuttleVehicle = vehicle.isShuttleVehicle;
-  const violationType = vehicle.violationType;
-  const hasInfoStatus = vehicle.info;
-  const hasWarningStatus = vehicle.warning;
-  const hasAlarmStatus = vehicle.alarm;
-  const hasCriticalStatus = vehicle.critical;
-  const hasSpeedViolation = vehicle.speedViolation;
+  // 检查是否满足更新频率限制
+  // 如果这是首次更新，或者距离上次更新已经过去了足够的时间
+  if (!labelUpdateTimes.value[vehicleId] || 
+      (now - labelUpdateTimes.value[vehicleId]) > UPDATE_INTERVAL) {
    
-  let typeKey = vehicle.type;
-  if (isAircraftIn) typeKey = 'AIRCRAFT_IN';
-  else if (isAircraftOut) typeKey = 'AIRCRAFT_OUT';
-  else if (isUnmannedVehicle) typeKey = 'UNMANNED_VEHICLE';
-  else if (isSpecialVehicle) typeKey = 'SPECIAL_VEHICLE';
-  else if (isShuttleVehicle) typeKey = 'SHUTTLE_VEHICLE';
+    // 检查标签是否已存在
+    if (vehicleLabels.value[vehicleId]) {
+      // 更新现有标签位置
+      vehicleLabels.value[vehicleId].setPosition(coordinates);
      
-  let backgroundImage;
-  
-  // 首先检查告警状态
-  if (hasSpeedViolation) {
-    // 超速车辆使用warning_bg.png背景
-    backgroundImage = warningBg;
-  } else if (violationType || hasInfoStatus || hasWarningStatus || hasCriticalStatus || hasAlarmStatus) {
-    backgroundImage = warningBg; // 使用告警背景
-  } else if (isAircraftIn) {
-    // 滑入航空器(CA开头)使用airport_out.png文本背景
-    backgroundImage = airportOutBg;
-  } else if (isAircraftOut) {
-    // 滑出航空器(MU开头)使用airport_bg.png文本背景
-    backgroundImage = airportBg;
-  } else if (isUnmannedVehicle) {
-    // 无人车使用label_bg.png文本背景
-    backgroundImage = labelBg;
-  } else if (isSpecialVehicle) {
-    // 特勤车使用label_bg.png文本背景
-    backgroundImage = labelBg;
-  } else if (isShuttleVehicle) {
-    // 摆渡车使用label_bg.png文本背景
-    backgroundImage = labelBg;
+      // 更新标签内容
+      updateLabelContent(vehicleId, speed, alertInfo);
    } else {
-    // 默认背景
-    backgroundImage = labelBg;
+      // 创建新标签
+      createNewLabel(vehicleId, coordinates, speed, alertInfo);
    }
    
-  const labelDiv = document.createElement('div');
-  labelDiv.className = `vehicle-label ${isAircraftIn ? 'vehicle-aircraft-in' : ''} ${isAircraftOut ? 'vehicle-aircraft-out' : ''} ${isUnmannedVehicle ? 'vehicle-unmanned' : ''} ${isSpecialVehicle ? 'vehicle-special' : ''} ${isShuttleVehicle ? 'vehicle-shuttle' : ''}`;
-  
-  // 添加告警状态类
-  if (violationType) labelDiv.className += ' vehicle-violation';
-  if (hasInfoStatus) labelDiv.className += ' vehicle-info';
-  if (hasWarningStatus) labelDiv.className += ' vehicle-warning';
-  if (hasAlarmStatus) labelDiv.className += ' vehicle-alarm';
-  if (hasCriticalStatus) labelDiv.className += ' vehicle-critical';
-  if (hasSpeedViolation) labelDiv.className += ' vehicle-speed-violation';
-  
-  let labelText = '';
-
-  // 超速车辆特殊处理标签内容 - 只显示超速相关信息，避免闪烁和重复显示
-  if (violationInfo && violationInfo.isSpeedViolation && violationInfo.actualValue !== undefined) {
-    // 通过violationInfo传入的超速信息 - 这是主要的超速状态显示方式
-    labelText = `${id} ${violationInfo.actualValue.toFixed(1)} km/h`;
-    if (violationInfo.description) {
-      labelText += `<br>${violationInfo.description}`;
-    }
-    if (violationInfo.limitValue !== undefined) {
-      labelText += `<br>限速: ${violationInfo.limitValue}km/h`;
-    }
-    if (violationInfo.ruleName) {
-      labelText += `<br>根据${violationInfo.ruleName}请减速慢行！`;
-    }
-  } else if (hasSpeedViolation && vehicle.limitValue !== undefined && vehicle.actualValue !== undefined) {
-    // 备用的超速状态显示方式
-    labelText = `${id} ${vehicle.actualValue.toFixed(1)} km/h`;
-    if (vehicle.description) {
-      labelText += `<br>${vehicle.description}`;
-    }
-    labelText += `<br>限速: ${vehicle.limitValue}km/h`;
-    if (vehicle.ruleName) {
-      labelText += `<br>根据${vehicle.ruleName}请减速慢行！`;
-    }
-  } else {
-    // 正常车辆显示 - 避免显示0.00km/h的闪烁
-    if (!hasSpeedViolation && speed > 0.1) {
-      labelText = `${id} ${speed.toFixed(1)} km/h`;
-    } else if (!hasSpeedViolation) {
-      // 如果速度为0或很小，只显示车辆ID，不显示速度避免闪烁
-      labelText = `${id}`;
-    }
-
-    if (violationType && vehicle.description) {
-      labelText += `<br>${vehicle.description}`;
-    }
-
-    if (violationType && vehicle.limitValue !== undefined && vehicle.actualValue !== undefined) {
-      labelText += `<br>限速: ${vehicle.limitValue}km/h 实际: ${vehicle.actualValue}km/h`;
-    }
-
-    // 处理传入的违规信息（非超速情况）
-    if (violationInfo && !violationInfo.isSpeedViolation) {
-      if (violationInfo.description) {
-        labelText += `<br>${violationInfo.description}`;
-      }
-      if (violationInfo.limitValue !== undefined && violationInfo.actualValue !== undefined) {
-        labelText += `<br>限速: ${violationInfo.limitValue}km/h 实际: ${violationInfo.actualValue}km/h`;
-      }
-      if (violationInfo.ruleName) {
-        labelText += `<br>根据${violationInfo.ruleName}请减速慢行！`;
-      }
+    // 更新最后更新时间
+    labelUpdateTimes.value[vehicleId] = now;
  }
 }

-  labelDiv.innerHTML = labelText;
-  labelDiv.style.backgroundImage = `url(${backgroundImage})`;
-  labelDiv.style.backgroundSize = '100% 100%';
-  labelDiv.style.padding = '5px 10px';
-  labelDiv.style.color = '#fff';
+// 创建新标签
+function createNewLabel(vehicleId, coordinates, speed, alertInfo) {
+  // 创建标签DOM元素
+  const labelElement = document.createElement('div');
+  labelElement.className = 'vehicle-label';
+  labelElement.id = `label-${vehicleId}`;
  
+  // 设置标签内容
+  const labelContent = createLabelContent(vehicleId, speed, alertInfo);
+  labelElement.innerHTML = labelContent;
+  
+  // 创建覆盖物
  const overlay = new Overlay({
-    element: labelDiv,
-    position: position,
+    element: labelElement,
+    position: coordinates,
+    offset: [0, -30], // 偏移量，使标签位于图标上方
    positioning: 'bottom-center',
-    offset: [0, -30],
    stopEvent: false,
    insertFirst: true, // 确保在DOM中优先插入
    autoPan: false, // 禁用自动平移
  });
  
-  // 更新引用
-  props.vehicles[id].overlay = overlay;
-  props.vehicles[id].labelDiv = labelDiv;
-  
-  // 添加到地图
+  // 将覆盖物添加到地图
  props.map.addOverlay(overlay);
+  
+  // 存储覆盖物引用
+  vehicleLabels.value[vehicleId] = overlay;
+  
+  // 添加点击事件监听器
+  setupTabClickListeners(vehicleId);
+}
+
+// 更新标签内容
+function updateLabelContent(vehicleId, speed, alertInfo) {
+  const labelElement = document.getElementById(`label-${vehicleId}`);
+  if (!labelElement) return;
+  
+  // 更新标签内容
+  const labelContent = createLabelContent(vehicleId, speed, alertInfo);
+  labelElement.innerHTML = labelContent;
+  
+  // 重新设置点击事件监听器
+  setupTabClickListeners(vehicleId);
+}
+
+// 创建标签内容
+function createLabelContent(vehicleId, speed, alertInfo = {}) {
+  // 获取车辆信息
+  const vehicle = props.vehicles[vehicleId];
+  if (!vehicle) return '';
+  
+  // 格式化速度，保留1位小数
+  const formattedSpeed = speed ? `${speed.toFixed(1)}km/h` : '0.0km/h';
+  
+  // 检查是否存在各类告警
+  const hasWarning = vehicle.warning || (alertInfo && alertInfo.isWarning);
+  const hasAlarm = vehicle.alarm || (alertInfo && alertInfo.isAlarm);
+  const hasSpeedViolation = vehicle.speedViolation || (alertInfo && alertInfo.isSpeedViolation);
+  const hasUnauthorizedEntry = vehicle.critical || (alertInfo && alertInfo.isUnauthorizedEntry);
+  
+  // 检查是否有任何告警
+  const hasAnyAlert = hasWarning || hasAlarm || hasSpeedViolation || hasUnauthorizedEntry;
+  
+  // 如果没有任何告警，只显示车牌号和车速
+  if (!hasAnyAlert) {
+    return `
+      <div class="label-container simple-label">
+        <div class="label-header">
+          <span class="vehicle-id">${vehicleId}</span>
+          <span class="vehicle-speed">${formattedSpeed}</span>
+        </div>
+      </div>
+    `;
+  }
+  
+  // 有告警时，显示完整的Tab栏
+  let html = `
+    <div class="label-container">
+      <div class="label-header">
+        <span class="vehicle-id">${vehicleId}</span>
+        <span class="vehicle-speed">${formattedSpeed}</span>
+      </div>
+      <div class="label-tabs">
+        <div class="tab-buttons">
+          <button class="tab-button ${hasWarning ? 'active' : 'disabled'}" data-tab="warning" data-vehicle="${vehicleId}">
+            <i class="tab-icon warning-icon"></i>
+          </button>
+          <button class="tab-button ${hasAlarm ? 'active' : 'disabled'}" data-tab="alarm" data-vehicle="${vehicleId}">
+            <i class="tab-icon alarm-icon"></i>
+          </button>
+          <button class="tab-button ${hasSpeedViolation ? 'active' : 'disabled'}" data-tab="speed" data-vehicle="${vehicleId}">
+            <i class="tab-icon speed-icon"></i>
+          </button>
+          <button class="tab-button ${hasUnauthorizedEntry ? 'active' : 'disabled'}" data-tab="boundary" data-vehicle="${vehicleId}">
+            <i class="tab-icon boundary-icon"></i>
+          </button>
+        </div>
+        <div class="tab-content">
+  `;
+  
+  // 默认显示第一个有内容的标签页
+  let activeTabContent = '';
+  let activeTabFound = false;
+  
+  // 冲突预警内容
+  if (hasWarning) {
+    const warningMessage = alertInfo?.description || '与其他车辆距离过近，请注意避让！';
+    activeTabContent = `
+      <div class="tab-pane ${!activeTabFound ? 'active' : ''}" data-tab-content="warning" data-vehicle="${vehicleId}">
+        <div class="alert-message">${warningMessage}</div>
+      </div>
+    `;
+    activeTabFound = true;
+  }
+  
+  // 冲突告警内容
+  if (hasAlarm) {
+    const alarmMessage = alertInfo?.description || '与其他车辆存在冲突风险！';
+    activeTabContent += `
+      <div class="tab-pane ${!activeTabFound ? 'active' : ''}" data-tab-content="alarm" data-vehicle="${vehicleId}">
+        <div class="alert-message">${alarmMessage}</div>
+      </div>
+    `;
+    if (!activeTabFound) activeTabFound = true;
+  }
+  
+  // 超速告警内容
+  if (hasSpeedViolation) {
+    const limitValue = alertInfo?.limitValue || vehicle.limitValue || 30;
+    const actualValue = alertInfo?.actualValue || vehicle.actualValue || speed;
+    activeTabContent += `
+      <div class="tab-pane ${!activeTabFound ? 'active' : ''}" data-tab-content="speed" data-vehicle="${vehicleId}">
+        <div class="speed-info">
+          <div>规定速度: <span class="limit-value">${limitValue}km/h</span></div>
+          <div>当前速度: <span class="actual-value">${actualValue.toFixed(1)}km/h</span></div>
+        </div>
+      </div>
+    `;
+    if (!activeTabFound) activeTabFound = true;
+  }
+  
+  // 越界告警内容
+  if (hasUnauthorizedEntry) {
+    const boundaryMessage = alertInfo?.description || '车辆已进入禁行区域！';
+    activeTabContent += `
+      <div class="tab-pane ${!activeTabFound ? 'active' : ''}" data-tab-content="boundary" data-vehicle="${vehicleId}">
+        <div class="alert-message">${boundaryMessage}</div>
+      </div>
+    `;
+    if (!activeTabFound) activeTabFound = true;
+  }
+  
+  html += activeTabContent;
+  html += `
+        </div>
+      </div>
+    </div>
+  `;
+  
+  return html;
+}
+
+// 设置标签页点击事件监听器
+function setupTabClickListeners(vehicleId) {
+  setTimeout(() => {
+    const tabButtons = document.querySelectorAll(`.tab-button[data-vehicle="${vehicleId}"]`);
+    
+    tabButtons.forEach(button => {
+      // 移除现有事件监听器
+      button.removeEventListener('click', handleTabClick);
+      
+      // 添加新的事件监听器
+      button.addEventListener('click', handleTabClick);
+    });
+    
+    // 默认选中第一个非禁用的标签页
+    const firstActiveButton = document.querySelector(`.tab-button.active[data-vehicle="${vehicleId}"]`);
+    if (firstActiveButton && !firstActiveButton.classList.contains('current')) {
+      firstActiveButton.click();
+    }
+  }, 100);
+}
+
+// 处理标签页点击事件
+function handleTabClick(event) {
+  const button = event.currentTarget;
+  const tabName = button.getAttribute('data-tab');
+  const vehicleId = button.getAttribute('data-vehicle');
+  
+  // 如果按钮被禁用，不执行任何操作
+  if (button.classList.contains('disabled')) {
+    return;
+  }
+  
+  // 获取所有相关元素
+  const tabButtons = document.querySelectorAll(`.tab-button[data-vehicle="${vehicleId}"]`);
+  const tabPanes = document.querySelectorAll(`[data-tab-content][data-vehicle="${vehicleId}"]`);
+  
+  // 移除所有活动状态
+  tabButtons.forEach(btn => btn.classList.remove('current'));
+  tabPanes.forEach(pane => pane.classList.remove('active'));
+  
+  // 设置当前活动状态
+  button.classList.add('current');
+  const activePane = document.querySelector(`[data-tab-content="${tabName}"][data-vehicle="${vehicleId}"]`);
+  if (activePane) {
+    activePane.classList.add('active');
+  }
+  
+  // 阻止事件冒泡，避免触发地图点击事件
+  event.stopPropagation();
 }

 // 移除车辆标签
-function removeVehicleLabel(id) {
-  if (!props.map || !props.vehicles[id]) return;
+function removeVehicleLabel(vehicleId) {
+  if (vehicleLabels.value[vehicleId]) {
+    props.map.removeOverlay(vehicleLabels.value[vehicleId]);
+    delete vehicleLabels.value[vehicleId];
+  }
+}

-  if (props.vehicles[id].overlay) {
-    props.map.removeOverlay(props.vehicles[id].overlay);
-    props.vehicles[id].overlay = null;
-    props.vehicles[id].labelDiv = null;
+// 设置标签可见性
+function setLabelVisibility(vehicleId, visible) {
+  if (vehicleLabels.value[vehicleId]) {
+    const labelElement = vehicleLabels.value[vehicleId].getElement();
+    if (labelElement) {
+      labelElement.style.display = visible ? 'block' : 'none';
+    }
  }
 }

 // 更新所有标签位置
 function updateAllLabels() {
-  Object.keys(props.vehicles).forEach(id => {
-    const vehicle = props.vehicles[id];
-    if (vehicle.feature) {
-      const coordinates = vehicle.feature.getGeometry().getCoordinates();
-      // 如果车辆处于超速状态，不在这里更新标签，避免与超速状态标签冲突
-      if (!vehicle.speedViolation) {
-        updateVehicleLabel(id, coordinates, vehicle.speed);
-      }
+  if (!props.map || !props.vehicles) return;
+  
+  Object.keys(vehicleLabels.value).forEach(vehicleId => {
+    if (props.vehicles[vehicleId] && props.vehicles[vehicleId].position) {
+      vehicleLabels.value[vehicleId].setPosition(props.vehicles[vehicleId].position);
    }
  });
 }

-// 设置标签可见性
-function setLabelVisibility(id, visible) {
-  if (!props.map || !props.vehicles[id]) return;
+// 组件卸载时清理资源
+onUnmounted(() => {
+  if (props.map) {
+    Object.values(vehicleLabels.value).forEach(overlay => {
+      props.map.removeOverlay(overlay);
+    });
+  }
+  vehicleLabels.value = {};
+});

-  if (visible) {
-    // 如果车辆处于超速状态，不在这里更新标签，避免与超速状态标签冲突
-    if (props.vehicles[id].position && !props.vehicles[id].speedViolation) {
-      updateVehicleLabel(id, props.vehicles[id].position, props.vehicles[id].speed);
-    }
-  } else {
-    removeVehicleLabel(id);
+// 监听地图变化
+watch(() => props.map, (newMap) => {
+  if (newMap) {
+    // 地图实例变化时，重新创建所有标签
+    Object.keys(vehicleLabels.value).forEach(vehicleId => {
+      if (props.vehicles[vehicleId] && props.vehicles[vehicleId].position) {
+        removeVehicleLabel(vehicleId);
+        updateVehicleLabel(
+          vehicleId, 
+          props.vehicles[vehicleId].position, 
+          props.vehicles[vehicleId].speed
+        );
      }
+    });
  }
+});

-// 暴露方法
+// 向外暴露方法
 defineExpose({
  updateVehicleLabel,
  removeVehicleLabel,
-  updateAllLabels,
-  setLabelVisibility
+  setLabelVisibility,
+  updateAllLabels
 });
 </script>

-<style scoped>
-/* 车辆标签样式 */
-:deep(.vehicle-label) {
+<style>
+/* 标签容器样式 */
+.vehicle-label {
  position: absolute;
-  padding: 4px 8px;
+  transform: translate(-50%, -100%);
+  z-index: 1000;
+  pointer-events: auto;
+}
+
+.label-container {
+  background-color: rgba(37, 37, 37, 0.7);
  border-radius: 4px;
+  color: #fff;
+  padding: 10px;
+  min-width: 170px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* 简化标签样式 */
+.simple-label {
+  padding: 6px 10px;
+}
+
+/* 标签头部样式 */
+.label-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  padding-bottom: 5px;
+}
+
+.simple-label .label-header {
+  margin-bottom: 0;
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.vehicle-id {
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.vehicle-speed {
  font-size: 12px;
-  white-space: nowrap;
-  pointer-events: none;
-  transform: translateX(-50%);
-  text-align: center;
-  background-repeat: no-repeat;
-  background-position: center;
-  min-width: 80px;
-  min-height: 24px;
+  color: #ccc;
+}
+
+/* 标签页按钮样式 */
+.tab-buttons {
+  display: flex;
+  gap: 5px;
+  margin-bottom: 8px;
+}
+
+.tab-button {
+  background-color: rgba(80, 80, 80, 0.5);
+  border: none;
+  border-radius: 4px;
+  width: 24px;
+  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
-  z-index: 30;
-  transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease;
-  will-change: transform, left, top;
-  bottom: 0;
+  cursor: pointer;
+  padding: 0;
 }

-/* 滑入航空器标签样式 */
-:deep(.vehicle-aircraft-in) {
-  color: #fff;
+.tab-button.active {
+  background-color: rgba(52, 152, 219, 0.7);
 }

-/* 滑出航空器标签样式 */
-:deep(.vehicle-aircraft-out) {
-  color: #333;
+.tab-button.current {
+  background-color: rgba(52, 152, 219, 1);
+  box-shadow: 0 0 5px rgba(52, 152, 219, 0.7);
 }

-/* 无人车标签样式 */
-:deep(.vehicle-unmanned) {
-  color: #fff;
+.tab-button.disabled {
+  background-color: rgba(80, 80, 80, 0.3);
+  cursor: not-allowed;
 }

-/* 特勤车标签样式 */
-:deep(.vehicle-special) {
-  color: #fff;
+.tab-button.disabled .tab-icon {
+  opacity: 0.5;
+  filter: grayscale(100%);
 }

-/* 摆渡车标签样式 */
-:deep(.vehicle-shuttle) {
-  color: #fff;
+/* 标签图标样式 */
+.tab-icon {
+  width: 16px;
+  height: 16px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
 }

-/* 告警标签样式 */
-:deep(.vehicle-alarm) {
-  color: #fff;
-  font-weight: bold;
+.warning-icon {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFA500"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>');
 }

-/* 预警标签样式 */
-:deep(.vehicle-warning) {
-  color: #fff;
+.alarm-icon {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF4D4F"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>');
 }

-/* 严重违规标签样式 */
-:deep(.vehicle-critical) {
-  color: #fff;
+.speed-icon {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFD700"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>');
 }

-/* 超速违规标签样式 */
-:deep(.vehicle-speed-violation) {
-  color: #fff;
-  font-weight: bold;
+.boundary-icon {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF6B6B"><path d="M3 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2zm16 14H5V5h14v14z"/></svg>');
+}
+
+.tab-pane {
+  display: none;
+}
+
+.tab-pane.active {
+  display: block;
+}
+
+/* 告警消息样式 */
+.alert-message {
+  font-size: 12px;
  line-height: 1.4;
-  white-space: normal;
-  width: 180px;
-  text-align: center;
+  padding: 5px;
+  border-radius: 3px;
+  /* background-color: rgba(255, 255, 255, 0.1); */
 }

-/* 信息级别(超速等)标签样式 */
-:deep(.vehicle-info) {
-  color: #fff;
+/* 超速信息样式 */
+.speed-info {
+  font-size: 12px;
  line-height: 1.4;
-  white-space: normal;
-  width: 160px;
-  text-align: center;
+}
+
+.limit-value {
+  color: #4CAF50;
+}
+
+.actual-value {
+  color: #FF4D4F;
+  font-weight: bold;
 }
 </style> 
--- a/src/components/map/controls/VehicleMovementControlRefactored.vue
+++ b/src/components/map/controls/VehicleMovementControlRefactored.vue
@ -63,8 +63,21 @@ import VehicleStyleManager from './VehicleStyleManager.vue';

 // 导入默认图标
 import carIcon from '../../../assets/images/noPeopleCar.png';
-import aircraftInIcon from '../../../assets/images/Aircraft1.png'; // 滑入航空器使用黄色图标
-import aircraftOutIcon from '../../../assets/images/Aircraft.png'; // 滑出航空器使用蓝色图标
+import aircraftIcon from '../../../assets/images/Aircraft.png'; // 航空器使用Aircraft.png图标
+// 不再使用不同状态的航空器图标
+// import aircraftInIcon from '../../../assets/images/Aircraft1.png'; // 滑入航空器使用黄色图标
+// import aircraftOutIcon from '../../../assets/images/Aircraft.png'; // 滑出航空器使用蓝色图标
+
+// 预加载图标资源，确保图标立即可用
+const carIconImg = new Image();
+carIconImg.src = carIcon;
+const aircraftIconImg = new Image();
+aircraftIconImg.src = aircraftIcon;
+// 不再预加载不同状态的航空器图标
+// const aircraftInIconImg = new Image();
+// aircraftInIconImg.src = aircraftInIcon;
+// const aircraftOutIconImg = new Image();
+// aircraftOutIconImg.src = aircraftOutIcon;

 // 为SockJS提供polyfill
 if (typeof window !== 'undefined' && !window.global) {
@ -235,6 +248,10 @@ function updateVehiclePosition(vehicleData) {
  
  const { object_id, object_type, position, heading, speed } = vehicleData;
  
+  // 计算正确的旋转角度，不再减去72度
+  const rotationRad = (heading * Math.PI) / 180;
+  console.log(`车辆${object_id}的heading值: ${heading}, 计算的旋转角度: ${rotationRad} 弧度, ${rotationRad * 180 / Math.PI} 度`);
+  
  let coordinates;

  coordinates = transform(
@ -248,56 +265,67 @@ function updateVehiclePosition(vehicleData) {
  // 根据object_type正确分类车辆
  let vehicleType = object_type.toUpperCase();
  
-  // 判断航空器类型
-  // CA开头的航班是滑入航空器，使用黄色Aircraft1.png图标和airport_out.png文本背景
-  // MU开头的航班是滑出航空器，使用蓝色Aircraft.png图标和airport_bg.png文本背景
-  const isAircraftOut = vehicleType === 'AIRCRAFT' && object_id.toLowerCase().includes('ca');
-  const isAircraftIn = vehicleType === 'AIRCRAFT' && object_id.toLowerCase().includes('mu');
-  const isAircraft = vehicleType === 'AIRCRAFT';
+  // 判断车辆类型
+  const isAircraft = vehicleType === 'AIRCRAFT'; // 航空器使用aircraft.png
+  const isUnmannedVehicle = vehicleType === 'UNMANNED_VEHICLE'; // 无人车
+  const isSpecialVehicle = vehicleType === 'SPECIAL_VEHICLE'; // 特种车辆
  
-  // 判断地面车辆类型
-  const isUnmannedVehicle = vehicleType === 'UNMANNED_VEHICLE'; // 无人车，使用noPeopleCar.png图标和label_bg.png文本背景
-  const isSpecialVehicle = vehicleType === 'AIRPORT_VEHICLE'; // 特勤车
-  const isShuttleVehicle = vehicleType === 'SHUTTLE_VEHICLE'; // 摆渡车
+  // 确保heading是有效的数值
+  const validHeading = heading !== undefined ? Number(heading) : 0;
  
  if (!feature) {
+    // 先创建车辆数据对象，确保在创建feature前就有类型信息
+    vehicles.value[object_id] = {
+      id: object_id,
+      type: object_type,
+      position: coordinates,
+      heading: validHeading,
+      speed: speed,
+      isAircraft: isAircraft,
+      isUnmannedVehicle: isUnmannedVehicle,
+      isSpecialVehicle: isSpecialVehicle,
+      lastHeading: validHeading // 初始化lastHeading
+    };
+
    feature = new Feature({
      geometry: new Point(coordinates),
      name: `${object_type} ${object_id}`,
      type: object_type,
      speed: speed,
-      isAircraftIn: isAircraftIn,
-      isAircraftOut: isAircraftOut,
      isAircraft: isAircraft,
      isUnmannedVehicle: isUnmannedVehicle,
-      isSpecialVehicle: isSpecialVehicle,
-      isShuttleVehicle: isShuttleVehicle
+      isSpecialVehicle: isSpecialVehicle
    });
    
    feature.setId(object_id);
-    // 使用默认样式，确保styleManager.value存在时才使用它的方法
-    if (styleManager.value) {
-      feature.setStyle(styleManager.value.getVehicleStyle(object_id, speed, heading));
+    
+    // 直接根据车辆类型选择正确的图标，不使用默认图标
+    let iconStyle;
+    if (isAircraft) {
+      iconStyle = new Style({
+        image: new Icon({
+          src: aircraftIcon,
+          scale: 1.5,
+          anchor: [0.5, 0.5],
+          rotation: rotationRad, // 使用计算好的旋转角度
+        })
+      });
    } else {
-      // 提供一个默认样式，根据车辆类型选择图标
-      feature.setStyle(defaultGetVehicleStyle(object_id, speed, heading));
+      iconStyle = new Style({
+        image: new Icon({
+          src: carIcon,
+          scale: 1.5,
+          anchor: [0.5, 0.5],
+          rotation: rotationRad, // 使用计算好的旋转角度
+        })
+      });
    }
+    
+    feature.setStyle(iconStyle);
    vehicleSource.addFeature(feature);
    
-    vehicles.value[object_id] = {
-      id: object_id,
-      type: object_type,
-      position: coordinates,
-      heading: heading,
-      speed: speed,
-      feature: feature,
-      isAircraftIn: isAircraftIn,
-      isAircraftOut: isAircraftOut,
-      isAircraft: isAircraft,
-      isUnmannedVehicle: isUnmannedVehicle,
-      isSpecialVehicle: isSpecialVehicle,
-      isShuttleVehicle: isShuttleVehicle
-    };
+    // 保存feature引用到车辆数据对象
+    vehicles.value[object_id].feature = feature;
    
    // 初始化动画数据
    if (animationSystem.value) {
@ -317,7 +345,7 @@ function updateVehiclePosition(vehicleData) {
    vehicles.value[object_id] = {
      ...vehicles.value[object_id],
      position: coordinates,
-      heading: heading,
+      heading: validHeading,
      speed: speed
    };
    
@ -326,6 +354,24 @@ function updateVehiclePosition(vehicleData) {
    if (labelSystem.value && !vehicles.value[object_id].speedViolation) {
      labelSystem.value.updateVehicleLabel(object_id, coordinates, speed);
    }
+    
+    // 更新车辆图标样式，确保旋转角度正确应用
+    if (feature) {
+      let iconSrc = isAircraft ? aircraftIcon : carIcon;
+      
+      // 移除角度变化阈值，确保每次角度变化都更新图标旋转
+      feature.setStyle(new Style({
+        image: new Icon({
+          src: iconSrc,
+          scale: 1.5,
+          anchor: [0.5, 0.5],
+          rotation: rotationRad, // 使用计算好的旋转角度
+        })
+      }));
+      
+      // 更新lastHeading
+      vehicles.value[object_id].lastHeading = validHeading;
+    }
  }
 }

@ -383,68 +429,178 @@ function connectWebSocket() {
 function handleWsMessage(message) {
  try {
    const data = JSON.parse(message);
+    console.log('收到消息:', data);
    
    // 根据消息类型处理
    switch (data.type) {
      case 'connection':
        console.log(`连接确认: ${data.message}`);
        break;
-      case 'position_update':
-        // 确保payload存在
-        if (data.payload && data.payload.object_id) {
-          // 检查是否需要清除车辆的告警状态
-          clearVehicleAlertStatus(data.payload);
      
-          // 更新车辆位置
-          updateVehiclePosition(data.payload);
-        } else {
-          console.error('位置更新消息格式错误:', data);
-        }
+      case 'position_update':
+        // 处理车辆位置更新
+        console.log(`位置更新: ${data.payload?.object_id} (${data.payload?.object_type})`);
+        handlePositionUpdate(data.payload);
        break;
+      
+      case 'path_conflict_alert':
+        // 处理冲突告警和预警
+        console.log(`冲突告警/预警: ${data.payload?.object1?.objectName || data.payload?.messageType}`);
+        handlePathConflictAlert(data.payload);
+        break;
+      
+      case 'rule_violation':
+        // 处理规则违规（超速和越界）
+        console.log(`规则违规: ${data.payload?.ruleName || data.payload?.violationType}`);
+        handleRuleViolation(data.payload);
+        break;
+      
      case 'pong':
        console.log('收到心跳响应');
        break;
-      case 'collision_warning':
-        console.log('收到碰撞预警:', data.payload);
-        // 显示预警信息
-        if (data.payload) {
-          // 获取车辆ID和预警信息
-          const vehicleId = data.payload.object_id || '未知车辆';
-          const distance = data.payload.distance || 0;
-          const message = `预警：${vehicleId} 与其他车辆距离${distance.toFixed(1)}米，请注意避让！`;
-          showAlert(message, 'warning', 8000);
      
-          // 如果需要在地图上标记该车辆的告警状态
+      case 'vehicle_command':
+        console.log('收到车辆控制指令:', data.payload);
+        break;
+      
+      default:
+        // 其他类型的消息可以根据需要处理
+        console.log(`未知消息类型: ${data.type}`, data);
+        break;
+    }
+  } catch (e) {
+    console.error('处理WebSocket消息出错:', e, message);
+  }
+}
+
+// 处理位置更新消息
+function handlePositionUpdate(payload) {
+  if (!payload || !payload.object_id) {
+    console.error('位置更新消息格式错误:', payload);
+    return;
+  }
+  
+  // 清除车辆的告警状态（如果需要）
+  clearVehicleAlertStatus(payload);
+  
+  // 更新车辆位置
+  updateVehiclePosition(payload);
+}
+
+// 处理冲突告警和预警
+function handlePathConflictAlert(payload) {
+  if (!payload) {
+    console.error('冲突告警消息格式错误:', payload);
+    return;
+  }
+  
+  console.log('收到冲突告警/预警:', payload);
+  
+  const object1 = payload.object1 || {};
+  const object2 = payload.object2 || {};
+  const vehicleId = object1.objectName || '未知车辆';
+  const otherVehicleId = object2.objectName || '未知车辆';
+  const distance = payload.object2Distance || 0;
+  const message = payload.message || `与${otherVehicleId}可能发生冲突`;
+  
+  // 根据messageType区分冲突告警和冲突预警
+  if (payload.messageType === 'PATH_CONFLICT_ALERT' || payload.alertType === 'CONFLICT_WARNING') {
+    console.log('处理冲突预警:', vehicleId, otherVehicleId);
+    const warningMessage = `预警：${message}`;
+    showAlert(warningMessage, 'warning', 8000);
+    
+    // 在地图上标记该车辆的预警状态
    if (vehicles.value[vehicleId]) {
      vehicles.value[vehicleId].warning = true;
+      vehicles.value[vehicleId].alarm = false;
+      vehicles.value[vehicleId].critical = false;
+      vehicles.value[vehicleId].info = false;
+      
      // 如果车辆已有位置信息，更新标签显示
      if (vehicles.value[vehicleId].position) {
-              labelSystem.value.updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed);
+        labelSystem.value.updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed, {
+          description: message,
+          isWarning: true
+        });
      }
    }
+  } else if (payload.alertType === 'CONFLICT_ALERT') {
+    console.log('处理冲突告警:', vehicleId, otherVehicleId);
+    const alertMessage = `⚠️ 告警：${message}`;
+    showAlert(alertMessage, 'alarm', 10000);
+    
+    // 在地图上标记该车辆的告警状态
+    if (vehicles.value[vehicleId]) {
+      vehicles.value[vehicleId].alarm = true;
+      vehicles.value[vehicleId].warning = false;
+      vehicles.value[vehicleId].critical = false;
+      vehicles.value[vehicleId].info = false;
+      
+      // 更新车辆图标为告警图标
+      if (vehicles.value[vehicleId].feature && styleManager.value) {
+        vehicles.value[vehicleId].feature.setStyle(styleManager.value.getVehicleStyle(vehicleId, vehicles.value[vehicleId].speed, vehicles.value[vehicleId].heading));
      }
+      
+      // 更新标签显示
+      if (vehicles.value[vehicleId].position && labelSystem.value) {
+        labelSystem.value.updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed, {
+          description: message,
+          isAlarm: true
+        });
+      }
+    }
+  } else {
+    console.log(`未知的冲突消息类型: ${payload.messageType || payload.alertType}`);
+  }
+}
+
+// 处理规则违规（超速和越界）
+function handleRuleViolation(payload) {
+  if (!payload) {
+    console.error('规则违规消息格式错误:', payload);
+    return;
+  }
+  
+  console.log('收到规则违规:', payload);
+  
+  const vehicleId = payload.object_id || payload.vehicleId || payload.vehicleLicense || '未知车辆';
+  const description = payload.description || '';
+  const limitValue = payload.limitValue;
+  const actualValue = payload.actualValue;
+  const ruleName = payload.ruleName || '交通规则';
+  const violationType = payload.violationType || '';
+  
+  // 根据violationType区分超速和越界
+  switch (violationType.toUpperCase()) {
+ 
+    case 'SPEED':
+      // 超速违规
+      handleSpeedViolation(vehicleId, payload);
+      break;
+    case 'ACCESS':
+      // 越界处理
+      handleUnauthorizedEntry(vehicleId, payload);
      break;
-      case 'rule_violation':
-        console.log('收到规则违规:', data.payload);
-        if (data.payload) {
-          // 获取车辆ID和告警信息
-          const vehicleId = data.payload.object_id || data.payload.vehicleId || data.payload.vehicleLicense || '未知车辆';
-          const violationType = data.payload.violationType || '未知违规';
-          const alertLevel = data.payload.alertLevel || 'INFO';
-          const description = data.payload.description || '';
-          const limitValue = data.payload.limitValue;
-          const actualValue = data.payload.actualValue;
-          const ruleName = data.payload.ruleName || '交通规则';
      
-          // 检查是否为超速违规
-          const isSpeedViolation = violationType === 'SPEED_VIOLATION';
-          // 检查是否为超速结束
-          const isSpeedViolationEnd = violationType === 'SPEED_VIOLATION_END';
+    default:
+      console.log(`未知的规则违规类型: ${violationType}`);
+      // 默认按越界处理
+      handleUnauthorizedEntry(vehicleId, payload);
+  }
+}
+
+// 处理超速违规
+function handleSpeedViolation(vehicleId, payload) {
+  const actualValue = payload.actualValue;
+  const limitValue = payload.limitValue;
+  const description = payload.description || '超速违规';
+  const ruleName = payload.ruleName || '速度限制';
  
-          // 如果是超速违规，特殊处理
-          if (isSpeedViolation && alertLevel === 'WARNING') {
  console.log(`检测到超速违规: ${vehicleId}, 实际速度: ${actualValue}, 限速: ${limitValue}`);
  
+  // 显示超速告警提示
+  showAlert(`⚠️ 超速告警：${vehicleId} ${description}`, 'warning', 8000);
+  
  // 在地图上标记该车辆的超速状态
  if (vehicles.value[vehicleId]) {
    // 避免重复设置超速状态导致闪烁
@ -483,7 +639,7 @@ function handleWsMessage(message) {
    
    // 更新车辆图标为超速警告图标（只在首次设置或状态改变时更新）
    if (!alreadyInSpeedViolation) {
-                if (vehicles.value[vehicleId].feature) {
+      if (vehicles.value[vehicleId].feature && styleManager.value) {
        vehicles.value[vehicleId].feature.setStyle(styleManager.value.getVehicleStyle(vehicleId, vehicles.value[vehicleId].speed, vehicles.value[vehicleId].heading));
        vehicles.value[vehicleId].lastIconUpdateTime = Date.now();
      }
@ -513,6 +669,12 @@ function handleWsMessage(message) {
    speedViolationTimers[vehicleId] = setTimeout(() => {
      // 确保车辆仍然存在
      if (vehicles.value[vehicleId]) {
+
+
+
+
+
+        
        console.log(`超速状态超时: ${vehicleId}, 自动清除超速状态`);
        
        // 检查是否可以清除状态锁定
@ -538,140 +700,43 @@ function handleWsMessage(message) {
      }
    }, 20000); // 20秒超时，确保状态稳定
  }
-            return; // 已处理超速情况，不再进入下面的alertLevel处理
 }

-          // 如果是超速结束，清除超速状态
-          if (isSpeedViolationEnd) {
-            console.log(`检测到超速结束: ${vehicleId}`);
+// 处理越界告警
+function handleUnauthorizedEntry(vehicleId, payload) {
+  const description = payload.description || '越界告警';
+  const alertLevel = payload.alertLevel || 'CRITICAL';
+  const ruleName = payload.ruleName || '区域控制';
  
-            // 在地图上清除该车辆的超速状态
-            if (vehicles.value[vehicleId]) {
-              // 检查是否可以清除状态锁定
-              if (!vehicles.value[vehicleId].statusLock || 
-                  !vehicles.value[vehicleId].statusLock.active || 
-                  Date.now() > vehicles.value[vehicleId].statusLock.until) {
+  console.log(`检测到越界告警: ${vehicleId}, ${description}, 规则: ${ruleName}`);
  
-                // 清除超速状态，使用专门的函数
-                clearSpeedViolationStatus(vehicleId);
-              } else {
-                // 状态仍然锁定，延迟清除
-                console.log(`车辆${vehicleId}状态仍然锁定，延迟清除超速状态`);
+  // 显示越界告警提示
+  showAlert(`⚠️ 越界告警：${vehicleId} ${description}`, 'critical', 10000);
  
-                // 设置计时器，等待锁定结束
-                if (speedViolationTimers[vehicleId]) {
-                  clearTimeout(speedViolationTimers[vehicleId]);
-                }
-                
-                speedViolationTimers[vehicleId] = setTimeout(() => {
-                  clearSpeedViolationStatus(vehicleId);
-                  delete speedViolationTimers[vehicleId];
-                }, vehicles.value[vehicleId].statusLock.until - Date.now());
-              }
-            }
-            return; // 已处理超速结束情况，不再进入下面的alertLevel处理
-          }
-          
-          // 根据alertLevel处理其他类型的告警
-          switch (alertLevel.toUpperCase()) {
-            case 'Info': // 预警
-              // 显示大的预警提示框
-              showAlert(`预警：${vehicleId} ${description}`, 'warning', 10000);
-              
-              // 在地图上标记该车辆的预警状态
-              if (vehicles.value[vehicleId]) {
-                vehicles.value[vehicleId].warning = true;
-                vehicles.value[vehicleId].alarm = false;
-                vehicles.value[vehicleId].critical = false;
-                vehicles.value[vehicleId].info = false;
-                
-                // 更新车辆图标为警告图标
-                if (vehicles.value[vehicleId].feature) {
-                  vehicles.value[vehicleId].feature.setStyle(styleManager.value.getVehicleStyle(vehicleId, vehicles.value[vehicleId].speed, vehicles.value[vehicleId].heading));
-                }
-                
-                // 更新标签显示
-                if (vehicles.value[vehicleId].position) {
-                  labelSystem.value.updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed, {
-                    description: description,
-                    limitValue: limitValue,
-                    actualValue: actualValue
-                  });
-                }
-              }
-              break;
-              
-            case 'ALERT': // 告警
-              // 显示大的告警提示框
-              showAlert(`⚠️ 告警：${vehicleId} ${description}`, 'alarm', 10000);
-              
-              // 在地图上标记该车辆的告警状态
-              if (vehicles.value[vehicleId]) {
-                vehicles.value[vehicleId].alarm = true;
-                vehicles.value[vehicleId].warning = false;
-                vehicles.value[vehicleId].critical = false;
-                vehicles.value[vehicleId].info = false;
-                
-                // 更新车辆图标为告警图标
-                if (vehicles.value[vehicleId].feature) {
-                  vehicles.value[vehicleId].feature.setStyle(styleManager.value.getVehicleStyle(vehicleId, vehicles.value[vehicleId].speed, vehicles.value[vehicleId].heading));
-                }
-                
-                // 更新标签显示
-                if (vehicles.value[vehicleId].position) {
-                  labelSystem.value.updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed, {
-                    description: description,
-                    limitValue: limitValue,
-                    actualValue: actualValue
-                  });
-                }
-              }
-              break;
-              
-            case 'CRITICAL': // 越界
-              // 不显示大的提示框，仅改变车辆图标颜色和标签背景
+  // 在地图上标记该车辆的越界状态
  if (vehicles.value[vehicleId]) {
    vehicles.value[vehicleId].critical = true;
    vehicles.value[vehicleId].alarm = false;
    vehicles.value[vehicleId].warning = false;
    vehicles.value[vehicleId].info = false;
+    vehicles.value[vehicleId].speedViolation = false;
+    vehicles.value[vehicleId].description = description;
+    vehicles.value[vehicleId].ruleName = ruleName;
    
-                // 更新车辆图标为警告图标
-                if (vehicles.value[vehicleId].feature) {
+    // 更新车辆图标为越界警告图标
+    if (vehicles.value[vehicleId].feature && styleManager.value) {
      vehicles.value[vehicleId].feature.setStyle(styleManager.value.getVehicleStyle(vehicleId, vehicles.value[vehicleId].speed, vehicles.value[vehicleId].heading));
    }
    
    // 更新标签显示
-                if (vehicles.value[vehicleId].position) {
+    if (vehicles.value[vehicleId].position && labelSystem.value) {
      labelSystem.value.updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed, {
        description: description,
-                    limitValue: limitValue,
-                    actualValue: actualValue
+        ruleName: ruleName,
+        isUnauthorizedEntry: true
      });
    }
  }
-              break;
-              
-            case 'WARNING': // 超速 - 这个case已经在上面的SPEED_VIOLATION中处理了，这里不再重复处理
-              console.log(`收到WARNING级别的超速消息，但已在SPEED_VIOLATION中处理: ${vehicleId}`);
-              break;
-              
-            default:
-              console.log(`未处理的告警级别: ${alertLevel}`);
-          }
-        }
-        break;
-      case 'vehicle_command':
-        console.log('收到车辆控制指令:', data.payload);
-        break;
-      default:
-        // 其他类型的消息可以根据需要处理
-        console.log(`收到其他类型消息: ${data.type}`, data);
-        break;
-    }
-  } catch (e) {
-    console.error('处理WebSocket消息出错:', e, message);
-  }
 }

 // 清除车辆超速状态的专门函数
@ -716,6 +781,10 @@ function clearSpeedViolationStatus(vehicleId) {

  // 更新标签显示为正常状态（只显示车辆ID，不显示0.00km/h）
  if (vehicle.position && labelSystem.value) {
+    // 先移除可能存在的旧标签，避免重复显示
+    labelSystem.value.removeVehicleLabel(vehicleId);
+    
+    // 创建新的标准标签
    labelSystem.value.updateVehicleLabel(vehicleId, vehicle.position, vehicle.speed > 0.1 ? vehicle.speed : 0);
  }

@ -770,44 +839,7 @@ function clearVehicleAlertStatus(vehicleData) {
    }
  }
  
-  // 检查是否有任何其他告警状态
-  const hasAlertStatus = existingVehicle.info || existingVehicle.warning || 
-                       existingVehicle.alarm || existingVehicle.critical;

-  // 如果有告警状态，需要检查是否应该清除
-  if (hasAlertStatus) {
-    // 只处理超速状态(info)的自动恢复
-    // 1. 判断是否为超速状态
-    const isSpeedViolation = existingVehicle.info;
-    
-    // 2. 判断当前速度是否已降低到安全值
-    // 这里使用一个默认阈值判断，实际应用中最好使用服务端返回的限速值
-    // 假设超速阈值为50km/h
-    const SPEED_THRESHOLD = 5; // 超速阈值，单位km/h
-    const isBelowThreshold = speed < SPEED_THRESHOLD;
-    
-    // 3. 如果是超速状态且当前速度已降低到阈值以下，清除超速状态
-    if (isSpeedViolation && isBelowThreshold) {
-      console.log(`检测到车辆${object_id}速度降低到${speed.toFixed(1)}km/h，低于阈值${SPEED_THRESHOLD}km/h，自动清除超速状态`);
-      
-      // 清除超速状态
-      existingVehicle.info = false;
-      
-      // 更新车辆图标为默认图标
-      if (existingVehicle.feature) {
-        existingVehicle.feature.setStyle(styleManager.value.getVehicleStyle(object_id, speed, existingVehicle.heading));
-      }
-      
-      // 更新标签显示为正常状态
-      if (existingVehicle.position) {
-        labelSystem.value.updateVehicleLabel(object_id, existingVehicle.position, speed);
-      }
-      
-      console.log(`已清除${object_id}的超速状态，恢复为普通状态`);
-    } else {
-      console.log(`车辆${object_id}有告警状态，但不符合自动清除条件，保持该状态`);
-    }
-  }
 }

 // 发送心跳
@ -1061,36 +1093,28 @@ function defaultGetVehicleStyle(id, _speed, heading) {
  const vehicle = vehicles.value[id];
  if (!vehicle) return createDefaultStyle(carIcon, heading);
  
-  // 根据车辆类型选择图标
-  if (vehicle.isAircraftIn) {
-    // 滑入航空器(CA开头)使用黄色Aircraft1.png图标
-    return createDefaultStyle(aircraftInIcon, heading);
-  } else if (vehicle.isAircraftOut) {
-    // 滑出航空器(MU开头)使用蓝色Aircraft.png图标
-    return createDefaultStyle(aircraftOutIcon, heading);
-  } else if (vehicle.isUnmannedVehicle) {
-    // 无人车使用noPeopleCar.png图标
-    return createDefaultStyle(carIcon, heading);
-  } else if (vehicle.isSpecialVehicle) {
-    // 特勤车
-    return createDefaultStyle(carIcon, heading);
-  } else if (vehicle.isShuttleVehicle) {
-    // 摆渡车
-    return createDefaultStyle(carIcon, heading);
+  // 只根据车辆类型选择图标，不根据事件状态改变
+  if (vehicle.isAircraft) {
+    // 航空器使用Aircraft.png图标
+    return createDefaultStyle(aircraftIcon, heading);
  } else {
-    // 默认车辆图标
+    // 其他所有车辆使用noPeopleCar.png图标
    return createDefaultStyle(carIcon, heading);
  }
 }

 // 创建默认样式的辅助函数
 function createDefaultStyle(iconSrc, heading) {
+  // 确保heading是有效的数值并正确转换为弧度
+  const validHeading = heading !== undefined ? Number(heading) : 0;
+  const rotationRad = (validHeading * Math.PI) / 180;
+  
  return new Style({
    image: new Icon({
-      src: iconSrc,
+      src: iconSrc, // 使用传入的图标源
      scale: 1.5,
      anchor: [0.5, 0.5],
-      rotation: ((heading - 72) * Math.PI) / 180,
+      rotation: rotationRad, // 正确应用旋转角度
    })
  });
 }
--- a/src/components/map/controls/VehicleStyleManager.vue
+++ b/src/components/map/controls/VehicleStyleManager.vue
@ -7,214 +7,62 @@ import { Style, Icon } from 'ol/style';

 // 导入车辆图标
 import carIcon from '../../../assets/images/noPeopleCar.png';
-import aircraftInIcon from '../../../assets/images/Aircraft1.png'; // 滑入航空器使用黄色图标
-import aircraftOutIcon from '../../../assets/images/Aircraft.png'; // 滑出航空器使用蓝色图标
-import warningCarIcon from '../../../assets/images/warning_car.png';
-import unmannedVehicleIcon from '../../../assets/images/noPeopleCar.png'; // 无人车图标
-import specialVehicleIcon from '../../../assets/images/noPeopleCar.png'; // 特勤车图标
-import shuttleVehicleIcon from '../../../assets/images/noPeopleCar.png'; // 摆渡车图标
+import aircraftIcon from '../../../assets/images/aircraft.png'; // 航空器图标
+// 不再使用告警状态图标
+// import warningCarIcon from '../../../assets/images/warning_car.png'; // 预警车辆图标
+// import alarmCarIcon from '../../../assets/images/alarm_car.png'; // 告警车辆图标
+// import criticalCarIcon from '../../../assets/images/warning_car.png'; // 越界车辆图标（使用warning_car.png替代）
+// import speedCarIcon from '../../../assets/images/warning_car.png'; // 超速车辆图标（使用warning_car.png替代）
+
+// 不再使用航空器告警图标
+// import warningAircraftIcon from '../../../assets/images/aircraft.png'; 
+// import alarmAircraftIcon from '../../../assets/images/aircraft.png'; 
+// import criticalAircraftIcon from '../../../assets/images/aircraft.png'; 
+// import speedAircraftIcon from '../../../assets/images/aircraft.png'; 

 // 定义props
 const props = defineProps({
  vehicles: Object
 });

-// 状态锁定时间（毫秒）- 超速状态锁定时间更长，确保图标稳定
-const STATUS_LOCK_TIME = 20000; // 20秒锁定时间，避免图标来回切换
-
 // 获取车辆样式
 function getVehicleStyle(id, speed, heading) {
  const vehicle = props.vehicles[id];
-  if (!vehicle) return new Style({});
+  if (!vehicle) return createDefaultStyle(carIcon, heading);
  
-  // 初始化状态锁定属性（如果不存在）
-  if (vehicle.statusLock === undefined) {
-    vehicle.statusLock = {
-      active: false,
-      type: null,
-      until: 0
-    };
-  }
+  // 只根据车辆类型选择图标，不根据状态变化
+  const isAircraft = vehicle.isAircraft;
  
-  const now = Date.now();
-  const hasViolation = vehicle.violationType;
-  const hasInfoStatus = vehicle.info;
-  const hasWarningStatus = vehicle.warning;
-  const hasAlarmStatus = vehicle.alarm;
-  const hasCriticalStatus = vehicle.critical;
-  const hasSpeedViolation = vehicle.speedViolation;
-  
-  // 检查是否有状态锁定
-  if (vehicle.statusLock.active && now < vehicle.statusLock.until) {
-    // 状态锁定中，直接返回锁定的图标
-    return new Style({
-      image: new Icon({
-        src: vehicle.statusLock.type === 'speedViolation' ? warningCarIcon : vehicle.cachedIconSrc || carIcon,
-        scale: 1.5,
-        anchor: [0.5, 0.5],
-        rotation: ((heading - 72) * Math.PI) / 180,
-      })
-    });
-  } else if (vehicle.statusLock.active) {
-    // 状态锁定已过期，清除锁定
-    vehicle.statusLock.active = false;
-  }
-  
-  // 超速状态特殊处理 - 确保图标稳定，不来回切换
-  if (hasSpeedViolation) {
-    // 如果还没有锁定状态或锁定已过期，重新锁定
-    if (!vehicle.statusLock.active || now > vehicle.statusLock.until) {
-      vehicle.statusLock = {
-        active: true,
-        type: 'speedViolation',
-        until: now + STATUS_LOCK_TIME
-      };
-    }
-
-    // 直接返回警告图标，确保超速状态下图标保持一致
-    return new Style({
-      image: new Icon({
-        src: warningCarIcon,
-        scale: 1.5,
-        anchor: [0.5, 0.5],
-        rotation: ((heading - 72) * Math.PI) / 180,
-      })
-    });
-  }
-  
-  // 非超速状态下的缓存处理
-  if (vehicle.cachedIconSrc && !hasSpeedViolation) {
-    // 如果已有缓存图标且不是超速状态，检查是否需要更新
-    const lastIconTime = vehicle.lastIconUpdateTime || 0;
-    
-    // 如果最后一次更新时间在2秒内，继续使用缓存的图标
-    if (now - lastIconTime < 2000) {
-      return new Style({
-        image: new Icon({
-          src: vehicle.cachedIconSrc,
-          scale: 1.5,
-          anchor: [0.5, 0.5],
-          rotation: ((heading - 72) * Math.PI) / 180,
-        })
-      });
-    }
-  }
-  
-  let iconSrc;
-  
-  // 首先检查告警状态
-  if (hasSpeedViolation) {
-    // 超速车辆使用警告图标
-    iconSrc = warningCarIcon;
-  } else if (hasViolation || hasInfoStatus || hasWarningStatus || hasCriticalStatus || hasAlarmStatus) {
-    // 其他违规车辆使用警告图标
-    iconSrc = warningCarIcon;
-    
-    // 锁定告警状态一段时间（比超速状态短）
-    vehicle.statusLock = {
-      active: true,
-      type: 'alert',
-      until: now + STATUS_LOCK_TIME / 2
-    };
-  } else if (vehicle.isAircraftIn) {
-    // 滑入航空器(MU开头)使用黄色Aircraft1.png图标
-    iconSrc = aircraftInIcon;
-  } else if (vehicle.isAircraftOut) {
-    // 滑出航空器(CA开头)使用蓝色Aircraft.png图标
-    iconSrc = aircraftOutIcon;
-  } else if (vehicle.isUnmannedVehicle) {
-    // 无人车使用noPeopleCar.png图标
-    iconSrc = unmannedVehicleIcon;
-  } else if (vehicle.isSpecialVehicle) {
-    // 特勤车
-    iconSrc = specialVehicleIcon;
-  } else if (vehicle.isShuttleVehicle) {
-    // 摆渡车
-    iconSrc = shuttleVehicleIcon;
-  } else {
-    // 默认车辆图标
-    iconSrc = carIcon;
-  }
-  
-  // 只有在非超速状态下才缓存图标
-  if (!hasSpeedViolation) {
-    vehicle.cachedIconSrc = iconSrc;
-    vehicle.lastIconUpdateTime = now;
-  }
+  // 根据车辆类型选择图标
+  const iconSrc = isAircraft ? aircraftIcon : carIcon;
  
  // 创建样式
-  return new Style({
-    image: new Icon({
-      src: iconSrc,
-      scale: 1.5,
-      anchor: [0.5, 0.5],
-      rotation: ((heading - 72) * Math.PI) / 180,
-    })
-  });
+  return createDefaultStyle(iconSrc, heading);
 }

-// 根据车辆类型和状态选择图标
-function getVehicleIcon(vehicle) {
-  if (!vehicle) return carIcon;
+// 创建默认样式
+function createDefaultStyle(iconSrc, heading) {
+  // 确保heading是有效的数值
+  const validHeading = heading !== undefined ? Number(heading) : 0;
  
-  const hasInfoStatus = vehicle.info;
-  const hasWarningStatus = vehicle.warning;
-  const hasAlarmStatus = vehicle.alarm;
-  const hasCriticalStatus = vehicle.critical;
+  // 统一使用(heading - 72)的偏移量计算旋转角度
+  const rotationRad = ((validHeading - 72) * Math.PI) / 180;
  
-  // 首先检查告警状态
-  if (hasInfoStatus || hasWarningStatus || hasCriticalStatus || hasAlarmStatus) {
-    return warningCarIcon;
-  }
-  
-  // 然后根据车辆类型选择图标
-  if (vehicle.isAircraftIn) {
-    // 滑入航空器(CA开头)使用黄色Aircraft1.png图标
-    return aircraftInIcon;
-  } else if (vehicle.isAircraftOut) {
-    // 滑出航空器(MU开头)使用蓝色Aircraft.png图标
-    return aircraftOutIcon;
-  } else if (vehicle.isUnmannedVehicle) {
-    // 无人车使用noPeopleCar.png图标
-    return unmannedVehicleIcon;
-  } else if (vehicle.isSpecialVehicle) {
-    // 特勤车
-    return specialVehicleIcon;
-  } else if (vehicle.isShuttleVehicle) {
-    // 摆渡车
-    return shuttleVehicleIcon;
-  } else {
-    return carIcon;
-  }
-}
-
-// 创建车辆样式
-function createVehicleStyle(vehicle, heading) {
-  const iconSrc = getVehicleIcon(vehicle);
+  // 添加调试信息
+  console.log(`VehicleStyleManager: heading=${validHeading}, rotation=${rotationRad}弧度, ${rotationRad * 180 / Math.PI}度`);
  
  return new Style({
    image: new Icon({
      src: iconSrc,
      scale: 1.5,
      anchor: [0.5, 0.5],
-      rotation: ((heading - 72) * Math.PI) / 180,
+      rotation: rotationRad, // 使用统一的旋转角度计算
    })
  });
 }

-// 更新车辆样式
-function updateVehicleStyle(id, heading) {
-  const vehicle = props.vehicles[id];
-  if (!vehicle) return null;
-  
-  return createVehicleStyle(vehicle, heading);
-}
-
 // 暴露方法
 defineExpose({
-  getVehicleStyle,
-  getVehicleIcon,
-  createVehicleStyle,
-  updateVehicleStyle
+  getVehicleStyle
 });
 </script> 
--- a/src/components/map/info/eventlist.vue
+++ b/src/components/map/info/eventlist.vue
@ -221,6 +221,7 @@ function updateCarList(newList) {

 const selectedCar = ref(null);
 function showDetail(car) {
+  // 移除对不存在的moveToTarget函数的调用
  selectedCar.value = car;
 }

--- a/src/utils/test_websocket.html
+++ b/src/utils/test_websocket.html
@ -11,31 +11,20 @@
            background-color: #f5f5f5;
        }
        .container {
-            max-width: 800px;
+            max-width: 1920px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-            padding: 20px;
-        }
-        h1 {
-            color: #333;
-            text-align: center;
-            margin-bottom: 30px;
+            padding: 2px;
        }
        .test-section {
            border: 1px solid #ddd;
            border-radius: 8px;
-            margin: 20px 0;
-            padding: 20px;
+            margin: 2px 0;
+            padding: 10px;
            background: #fafafa;
        }
-        .test-section h2 {
-            color: #555;
-            margin-top: 0;
-            border-bottom: 2px solid #007bff;
-            padding-bottom: 10px;
-        }
        .control-group {
            margin: 15px 0;
            display: flex;
@ -86,7 +75,7 @@
        .log-container {
            border: 1px solid #ddd;
            border-radius: 4px;
-            height: 300px;
+            height: 960px;
            overflow-y: auto;
            padding: 10px;
            background: white;
@ -106,16 +95,15 @@
 </head>
 <body>
    <div class="container">
-        <h1>冲突检测WebSocket测试工具</h1>
        
        <!-- 冲突检测WebSocket测试 -->
        <div class="test-section">
-            <h2>🚗 冲突检测WebSocket (原生协议)</h2>
+            <h3>🚗 冲突检测WebSocket</h3>
            
            <div class="control-group">
                <label>服务器地址：</label>
                <select id="collisionServerSelect">
-                    <option value="ws://10.0.0.126:8080/collision">冲突检测WebSocket</option>
+                    <option value="ws://10.0.0.126:8080/collision">10.0.0.126:8080/collision</option>
                </select>
            </div>
            
@ -136,7 +124,7 @@
        
        <!-- 控制面板 -->
        <div class="test-section">
-            <h2>🎛️ 控制面板</h2>
+            <h3>🎛️ 控制面板</h3>
            <div class="control-group">
                <button onclick="clearLogs()">清空日志</button>
                <button onclick="showConnectionStatus()">显示连接状态</button>
--- a/src/views/car/park/index.vue
+++ b/src/views/car/park/index.vue
@ -62,7 +62,7 @@
        <el-table-column label="车牌号" prop="licensePlate" align="left" />
        <el-table-column label="车辆类型" align="left">
          <template #default="scope">
-            {{ getVehicleTypeName(scope.row.typeId) }}
+            {{ scope.row.typeDisplayName || '未知类型' }}
          </template>
        </el-table-column>
        <el-table-column label="品牌" prop="brand" align="left" />
@ -544,6 +544,7 @@ function handleRemoveImage() {

 /** 获取车辆类型名称 */
 function getVehicleTypeName(typeId) {
+  // 保留此函数以兼容旧代码，但在表格中直接使用typeDisplayName
  return vehicleTypeMap.value[typeId] || '';
 }

--- a/src/views/car/type/index.vue
+++ b/src/views/car/type/index.vue
@ -115,7 +115,11 @@
          </template>
        </el-table-column>

-        <el-table-column label="二级类型" prop="typeName" />
+        <el-table-column label="二级类型" prop="typeName">
+          <template #default="scope">
+            {{ scope.row.typeName }}
+          </template>
+        </el-table-column>
        <el-table-column label="创建人" prop="createBy" />
        <el-table-column label="创建时间" prop="createTime" />
      </el-table>
@ -170,11 +174,7 @@ const { proxy } = getCurrentInstance();

 // Tab相关
 const editableTabsValue = ref("");
-const editableTabs = ref([
-  { label: "无人车", name: "无人车", content: "" },
-  { label: "特勤车", name: "特勤车", content: "" },
-  { label: "普通车", name: "普通车", content: "" },
-]);
+const editableTabs = ref([]);

 const showAddTabDialog = ref(false);
 const newTabName = ref("");
@ -197,9 +197,15 @@ const addTab = () => {

  // 构造一级类型数据
  const submitData = {
-    typeName: name,
+    displayNameCn: name,
+    displayNameEn: name, // 英文名称默认与中文相同
+    typeCode: generateTypeCode(name), // 生成唯一的typeCode
+    typeName: name.toUpperCase().replace(/\s+/g, "_"), // 生成typeName
    level: 1,
-    parentId: null,
+    isLeaf: false,
+    enabled: true,
+    parentCode: null,
+    topLevelCode: null
  };

  // 调用接口添加一级类型
@ -211,7 +217,9 @@ const addTab = () => {
      getFirstTypeList();

      // 切换到新添加的标签
-      editableTabsValue.value = name;
+      setTimeout(() => {
+        editableTabsValue.value = submitData.typeCode;
+      }, 100);

      // 清空输入框并关闭弹窗
      newTabName.value = "";
@ -220,41 +228,65 @@ const addTab = () => {
      // 获取新标签下的数据
      setTimeout(() => {
        getList();
-      }, 100);
+      }, 200);
    })
    .catch(() => {
      // 添加失败时不关闭弹窗，让用户可以修改后重试
    });
 };

+// 生成typeCode的辅助函数
+function generateTypeCode(name) {
+  // 生成基于名称的简短代码，例如"无人车" -> "WRC"
+  const pinyin = name.split('').map(char => {
+    // 这里简化处理，实际可能需要更复杂的拼音转换
+    const pinyinMap = {
+      '无': 'W', '人': 'R', '车': 'C',
+      '特': 'T', '勤': 'Q', '普': 'P',
+      '通': 'T', '航': 'H', '空': 'K',
+      '接': 'J', '驳': 'B', '清': 'Q',
+      '洁': 'J', '消': 'X', '防': 'F',
+      '警': 'J', '巡': 'X', '逻': 'L',
+      '配': 'P', '送': 'S', '运': 'Y',
+      '输': 'S', '餐': 'C', '行': 'X',
+      '李': 'L'
+    };
+    return pinyinMap[char] || char.charAt(0).toUpperCase();
+  });
+  
+  // 取前2-3个字母作为代码
+  let code = pinyin.slice(0, Math.min(3, pinyin.length)).join('');
+  
+  // 确保唯一性，添加随机数
+  const randomNum = Math.floor(Math.random() * 100);
+  return code + randomNum;
+}
+
 const deleteCustomTab = (tabName) => {
  // 查找要删除的标签对应的typeId
  const firstType = firstTypeList.value.find((item) => item.value === tabName);
  if (!firstType || !firstType.typeId) return;

  // 先检查该一级类型下是否有二级类型
-  listVehicle_type({ firstType: tabName }).then((res) => {
-    if (res.data && Array.isArray(res.data)) {
+  listVehicle_type({ topLevelCode: tabName }).then((res) => {
+    if (res.rows && Array.isArray(res.rows)) {
      // 过滤出当前选中tab对应的二级类型数据
-      const currentTabData = res.data.filter(
+      const currentTabData = res.rows.filter(
        (item) =>
          item.level === 2 &&
-          item.parentId &&
-          res.data.some(
-            (parent) =>
-              parent.typeId === item.parentId && parent.typeName === tabName
-          )
+          item.topLevelCode === tabName &&
+          item.parentCode === tabName
      );

      if (currentTabData.length > 0) {
        // 如果有二级类型，提示不能删除
-        proxy.$modal.msgError("该二级类型已绑定车辆，不可删除");
+        proxy.$modal.msgError("该类型下有二级类型，不可删除");
        return;
      }

      // 如果没有二级类型，则可以删除
      proxy.$modal
-        .confirm(`确定删除 ${tabName} 类型吗?`, "删除")
+        .confirm(`确定删除 ${firstType.label} 类型吗?`, "删除")
        .then(function () {
          return delVehicle_type(firstType.typeId);
        })
@ -310,11 +342,8 @@ const rules = ref({
  typeName: [{ required: true, message: "二级类型不能为空", trigger: "blur" }],
 });

-const firstTypeList = ref([
-  { label: "无人车", value: "无人车" },
-  { label: "特勤车", value: "特勤车" },
-  { label: "普通车", value: "普通车" },
-]);
+// 车辆类型选项
+const firstTypeList = ref([]);

 /** 查询车辆类型列表 */
 function getList() {
@ -324,25 +353,21 @@ function getList() {
    .then((res) => {
      loading.value = false;
      // 根据接口返回的数据结构进行过滤，只显示当前选中tab对应的二级类型数据
-      if (res.data && Array.isArray(res.data)) {
+      if (res.rows && Array.isArray(res.rows)) {
        // 过滤出当前选中tab对应的二级类型数据
-        const currentTabData = res.data.filter(
+        const currentTabData = res.rows.filter(
          (item) =>
            item.level === 2 &&
-            item.parentId &&
-            res.data.some(
-              (parent) =>
-                parent.typeId === item.parentId &&
-                parent.typeName === editableTabsValue.value
-            )
+            item.topLevelCode === editableTabsValue.value &&
+            item.parentCode === editableTabsValue.value
        );

        // 转换数据结构以适应表格显示
        vehicleTypeList.value = currentTabData.map((item) => ({
          typeId: item.typeId,
          firstType: editableTabsValue.value,
-          typeName: item.typeName,
-          createBy: item.createBy || "系统管理员",
+          typeName: item.displayNameCn,
+          createBy: item.createBy,
          createTime: item.createTime,
        }));

@ -392,7 +417,16 @@ function handleUpdate(row) {
  reset();
  const typeId = row.typeId || ids.value[0];
  getVehicle_type(typeId).then((response) => {
-    form.value = response.data || {};
+    // 确保使用displayNameCn作为typeName显示
+    if (response.data) {
+      form.value = {
+        typeId: response.data.typeId,
+        firstType: response.data.parentCode || editableTabsValue.value,
+        typeName: response.data.displayNameCn || response.data.typeName
+      };
+    } else {
+      form.value = {};
+    }
    open.value = true;
    title.value = "修改车辆类型";
  });
@ -405,21 +439,12 @@ function submitForm() {
      // 根据接口要求调整提交的数据结构
      const submitData = {
        typeId: form.value.typeId,
-        typeName: form.value.typeName,
-        parentId: null,
+        displayNameCn: form.value.typeName,
        level: 2,
+        parentCode: form.value.firstType,
+        topLevelCode: form.value.firstType
      };

-      // 查找一级类型对应的typeId
-      if (form.value.firstType) {
-        const firstType = firstTypeList.value.find(
-          (item) => item.value === form.value.firstType
-        );
-        if (firstType && firstType.typeId) {
-          submitData.parentId = firstType.typeId;
-        }
-      }
-
      if (form.value.typeId != undefined) {
        updateVehicle_type(submitData).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
@ -489,21 +514,21 @@ function cancel() {
 // 初始化时获取一级类型数据
 function getFirstTypeList() {
  listVehicle_type({ level: 1 }).then((res) => {
-    if (res.data && Array.isArray(res.data)) {
+    if (res.rows && Array.isArray(res.rows)) {
      // 过滤出一级类型数据
-      const firstTypes = res.data.filter((item) => item.level === 1);
+      const firstTypes = res.rows.filter((item) => item.level === 1);

      // 更新firstTypeList，保留typeId信息
      firstTypeList.value = firstTypes.map((item) => ({
-        label: item.typeName,
-        value: item.typeName,
+        label: item.displayNameCn,
+        value: item.typeCode,
        typeId: item.typeId,
      }));

      // 更新可编辑的tab列表
      editableTabs.value = firstTypes.map((item) => ({
-        label: item.typeName,
-        name: item.typeName,
+        label: item.displayNameCn,
+        name: item.typeCode,
        content: "",
      }));

--- a/src/views/platform/index.vue
+++ b/src/views/platform/index.vue
@ -70,7 +70,7 @@
 
    <!-- 车辆移动控制组件 -->
    <VehicleMovementControlRefactored :map="map" ref="vehicleMovementRef" v-if="map" />
-    
+    <!-- <VehicleDisplayControl :map="map" ref="vehicleMovementRef" v-if="map" /> -->


    <!-- 绘制工具栏 -->
@ -78,7 +78,7 @@
      <div class="toolbar-title">绘制工具</div>
      <div class="toolbar-buttons">
        <button @click="startDrawLine" class="toolbar-button">绘制路线</button>
-        <button @click="startDrawPolygon" class="toolbar-button">绘制点线面</button>
+        <button @click="startDrawPolygon" class="toolbar-button">绘制区域</button>
        <button @click="clearDraw" class="toolbar-button clear">清除</button>
        <button @click="exportRouteData" class="toolbar-button export">导出数据</button>
        <button @click="importRouteData" class="toolbar-button import">导入数据</button>
@ -486,8 +486,8 @@ watch(() => mapRef.value?.map, (newMap) => {
  top: 50%;
  right: 0;
  z-index: 2001;
-  width: 40px;
-  height: 80px;
+  width: 30px;
+  height: 58px;
  transform: translateY(-50%);
  cursor: pointer;
  transition: right 0.3s ease;