Merge branch 'main' of http://10.0.0.99:4000/Ren/airport-qingdao-vue3

src/components/map/controls/LayerSwitcher.vue

@@ -529,6 +529,11 @@ onUnmounted(() => {
 
 // 发送分类可见性设置到父组件
 function emitSet(type) {
+  console.log(`LayerSwitcher: 设置分类 ${type} 可见性`, {
+    visible: props.categories[type].visible,
+    showLabel: props.categories[type].showLabel
+  });
+  
   emit('setCategoryVisibility', type, {
     visible: props.categories[type].visible,
     showLabel: props.categories[type].showLabel

src/components/map/controls/VehicleMovementControlRefactored.vue

@@ -148,6 +148,11 @@ const vehicleCategories = ref({
   'SHUTTLE_VEHICLE': { visible: true, showLabel: true, name: '摆渡车' }
 });
 
+// 监听vehicleCategories变化，用于调试
+watch(vehicleCategories, (newCategories) => {
+  console.log('VehicleMovementControl: vehicleCategories 发生变化:', newCategories);
+}, { deep: true });
+
 // 告警/预警状态
 const alertMessage = ref('');
 const alertType = ref('');
@@ -365,6 +370,9 @@ function updateVehiclePosition(vehicleData) {
     if (labelSystem.value) {
       labelSystem.value.updateVehicleLabel(object_id, coordinates, speed);
     }
+    
+    // 应用当前分类设置到新创建的车辆
+    applyCurrentCategorySettings(object_id);
   } else {
     // 更新动画目标
     if (animationSystem.value) {
@@ -1088,6 +1096,58 @@ function clearSpeedViolationStatus(vehicleId) {
   console.log(`已成功清除车辆${vehicleId}的超速状态`);
 }
 
+// 获取车辆类型键值
+function getVehicleTypeKey(vehicle) {
+  if (!vehicle || !vehicle.type) return 'UNMANNED_VEHICLE';
+  
+  const vehicleType = vehicle.type.toUpperCase();
+  
+  // 根据车辆类型和特征确定分类键值
+  if (vehicleType === 'AIRCRAFT') {
+    return 'AIRCRAFT';
+  } else if (vehicle.isAircraft) {
+    return 'AIRCRAFT';
+  } else if (vehicleType === 'UNMANNED_VEHICLE' || vehicle.isUnmannedVehicle) {
+    return 'UNMANNED_VEHICLE';
+  } else if (vehicleType === 'SPECIAL_VEHICLE' || vehicle.isSpecialVehicle) {
+    return 'AIRPORT_VEHICLE';
+  } else if (vehicleType === 'SHUTTLE_VEHICLE' || vehicle.isShuttleVehicle) {
+    return 'SHUTTLE_VEHICLE';
+  }
+  
+  // 默认返回无人车类型
+  return 'UNMANNED_VEHICLE';
+}
+
+// 获取默认车辆样式
+function getDefaultVehicleStyle(vehicle) {
+  if (!vehicle) return new Style({});
+  
+  const isAircraft = vehicle.isAircraft || vehicle.type?.toUpperCase() === 'AIRCRAFT';
+  const iconSrc = isAircraft ? aircraftIcon : carIcon;
+  const heading = vehicle.heading || 0;
+  
+  // 计算旋转角度
+  const rotationRad = ((heading - 72) * Math.PI) / 180;
+  
+  return new Style({
+    image: new Icon({
+      src: iconSrc,
+      scale: 1.5,
+      anchor: [0.5, 0.5],
+      rotation: rotationRad,
+    })
+  });
+}
+
+// 默认获取车辆样式函数（用于动画系统）
+// function defaultGetVehicleStyle(vehicleId, speed, heading) {
+//   const vehicle = vehicles.value[vehicleId];
+//   if (!vehicle) return new Style({});
+  
+//   return getDefaultVehicleStyle(vehicle);
+// }
+
 // 清除车辆告警状态（如果需要）
 function clearVehicleAlertStatus(vehicleData) {
   const { object_id, speed } = vehicleData;
@@ -1328,43 +1388,51 @@ defineExpose({
     }
   },
   setCategoryVisibility(type, { visible, showLabel }) {
+    console.log(`VehicleMovementControl: 设置分类 ${type} 可见性`, { visible, showLabel });
+    
     if (vehicleCategories.value[type]) {
       // 更新分类设置
       vehicleCategories.value[type].visible = visible;
       vehicleCategories.value[type].showLabel = showLabel;
       
+      console.log(`更新分类设置完成: ${type}`, vehicleCategories.value[type]);
+      
       // 立即应用更改 - 更新所有属于此类别的车辆
       Object.values(vehicles.value).forEach(vehicle => {
-        let vehicleTypeKey = vehicle.type;
-        
-        // 根据车辆特征确定类别
-        if (vehicle.isAircraftIn) vehicleTypeKey = 'AIRCRAFT_IN';
-        else if (vehicle.isAircraftOut) vehicleTypeKey = 'AIRCRAFT_OUT';
-        else if (vehicle.isUnmannedVehicle) vehicleTypeKey = 'UNMANNED_VEHICLE';
-        else if (vehicle.isSpecialVehicle) vehicleTypeKey = 'AIRPORT_VEHICLE';
-        else if (vehicle.isShuttleVehicle) vehicleTypeKey = 'SHUTTLE_VEHICLE';
+        let vehicleTypeKey = getVehicleTypeKey(vehicle);
         
         // 如果车辆属于当前修改的类别
         if (vehicleTypeKey === type) {
-          // 更新图标可见性 - 如果不可见，则完全移除图标样式
+          console.log(`更新车辆 ${vehicle.id} (${vehicleTypeKey}) 的显示状态:`, { visible, showLabel });
+          
+          // 更新图标可见性
           if (vehicle.feature) {
             if (visible) {
-              // 显示图标 - 确保styleManager.value存在
+              // 显示图标
               if (styleManager.value) {
                 vehicle.feature.setStyle(styleManager.value.getVehicleStyle(vehicle.id, vehicle.speed, vehicle.heading));
               } else {
-                // 提供一个默认样式，根据车辆类型选择图标
-                vehicle.feature.setStyle(defaultGetVehicleStyle(vehicle.id, vehicle.speed, vehicle.heading));
+                // 使用默认样式
+                vehicle.feature.setStyle(getDefaultVehicleStyle(vehicle));
               }
             } else {
-              // 完全隐藏图标，使用空样式而非null
+              // 隐藏图标
               vehicle.feature.setStyle(new Style({}));
             }
           }
           
-          // 单独控制文本标签可见性，与图标显示状态无关
+          // 控制文本标签可见性
           if (labelSystem.value) {
-            labelSystem.value.setLabelVisibility(vehicle.id, showLabel);
+            if (labelSystem.value.setLabelVisibility) {
+              labelSystem.value.setLabelVisibility(vehicle.id, showLabel);
+            } else if (labelSystem.value.updateVehicleLabel) {
+              // 如果没有setLabelVisibility方法，使用updateVehicleLabel
+              if (showLabel && vehicle.position) {
+                labelSystem.value.updateVehicleLabel(vehicle.id, vehicle.position, vehicle.speed);
+              } else {
+                labelSystem.value.removeVehicleLabel(vehicle.id);
+              }
+            }
           }
         }
       });

src/components/map/info/AlarmNotification.vue

@@ -147,7 +147,7 @@ defineExpose({
 });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .alarm-notification-container {
   position: absolute;
   left:70px;
@@ -283,13 +283,13 @@ defineExpose({
   object-fit: contain;
 }
 
-.alarm-icon.high {
+/* .alarm-icon.high {
   background-color: rgba(255, 77, 79, 0.2);
 }
 
 .alarm-icon.medium {
   background-color: rgba(255, 153, 0, 0.2);
-}
+} */
 
 .alarm-dot {
   width: 10px;