完善告警事件列表展示

src/components/map/controls/VehicleMovementControlRefactored.vue

@@ -14,12 +14,11 @@
   />
 
   <!-- 告警/预警提示框 -->
-  <!-- <AlertNotificationSystem 
+  <AlarmNotification 
-    :alert-message="alertMessage"
+    ref="alarmNotification"
-    :alert-type="alertType"
+    @close="handleAlarmClose"
-    @show="handleAlertShow"
   />
-   -->
+  
   <!-- 车辆动画系统 -->
   <VehicleAnimationSystem 
     ref="animationSystem"
@@ -59,7 +58,7 @@ import VehicleAnimationSystem from './VehicleAnimationSystem.vue';
 import VehicleLabelSystem from './VehicleLabelSystem.vue';
 import VehicleDetailPopup from './VehicleDetailPopup.vue';
 import WeatherStationPopup from './WeatherStationPopup.vue';
-// import AlertNotificationSystem from './AlertNotificationSystem.vue';
+import AlarmNotification from '../info/AlarmNotification.vue'; // 导入告警通知组件
 import VehicleStyleManager from './VehicleStyleManager.vue';
 
 // 导入默认图标
@@ -94,6 +93,7 @@ const props = defineProps({
 const animationSystem = ref(null);
 const labelSystem = ref(null);
 const styleManager = ref(null);
+const alarmNotification = ref(null); // 告警通知组件引用
 
 // 气象监测站数据
 const weatherStationVisible = ref(true);
@@ -161,6 +161,118 @@ let alertTimer = null;
 // 违规状态计时器
 const violationStatusTimers = ref({});
 
+// 告警列表管理
+const alarmList = ref([]); // 存储所有告警信息
+const maxAlarmCount = 100; // 最大告警数量，防止列表过长
+const alarmVisible = ref(true); // 控制告警面板显示状态
+
+// 添加告警到列表
+function addAlarm(alarm) {
+  // 确保alarm对象包含所有必要字段
+  const completeAlarm = {
+    id: `alarm-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, // 生成唯一ID
+    carId: alarm.carId || alarm.vehicleId || alarm.objectId || '未知车辆',
+    carType: alarm.carType || alarm.vehicleType || alarm.objectType || '未知类型',
+    time: alarm.time || formatTimeRange(new Date()),
+    description: alarm.description || '未知告警',
+    date: alarm.date || formatDateTime(new Date()),
+    level: alarm.level || 'medium', // high, medium, low
+    type: alarm.type || 'other', // car(冲突), report(越界), speed(超速), other
+    ...alarm // 保留原始字段
+  };
+  
+  // 添加到列表开头
+  alarmList.value.unshift(completeAlarm);
+  
+  // 限制列表长度
+  if (alarmList.value.length > maxAlarmCount) {
+    alarmList.value = alarmList.value.slice(0, maxAlarmCount);
+  }
+  
+  // 如果告警面板已打开，更新告警面板
+  updateAlarmNotification();
+  
+  return completeAlarm.id; // 返回告警ID，便于后续引用
+}
+
+// 更新告警
+function updateAlarm(alarmId, updates) {
+  const index = alarmList.value.findIndex(alarm => alarm.id === alarmId);
+  if (index !== -1) {
+    alarmList.value[index] = { ...alarmList.value[index], ...updates };
+    updateAlarmNotification();
+    return true;
+  }
+  return false;
+}
+
+// 删除告警
+function removeAlarm(alarmId) {
+  const index = alarmList.value.findIndex(alarm => alarm.id === alarmId);
+  if (index !== -1) {
+    alarmList.value.splice(index, 1);
+    updateAlarmNotification();
+    return true;
+  }
+  return false;
+}
+
+// 清空告警列表
+function clearAlarms() {
+  alarmList.value = [];
+  updateAlarmNotification();
+}
+
+// 更新告警面板
+function updateAlarmNotification() {
+  if (alarmNotification.value) {
+    alarmNotification.value.updateAlarmList(alarmList.value);
+  }
+}
+
+// 切换告警面板显示状态
+function toggleAlarmNotification() {
+  alarmVisible.value = !alarmVisible.value;
+  if (alarmNotification.value) {
+    if (alarmVisible.value) {
+      alarmNotification.value.show();
+    } else {
+      alarmNotification.value.hide();
+    }
+  }
+}
+
+// 处理告警面板关闭事件
+function handleAlarmClose() {
+  alarmVisible.value = false;
+  console.log('告警面板已关闭');
+}
+
+// 格式化时间范围，例如：T10:20-10:25
+function formatTimeRange(date, durationMinutes = 5) {
+  const startTime = new Date(date);
+  const endTime = new Date(date);
+  endTime.setMinutes(endTime.getMinutes() + durationMinutes);
+  
+  const startHour = startTime.getHours().toString().padStart(2, '0');
+  const startMinute = startTime.getMinutes().toString().padStart(2, '0');
+  const endHour = endTime.getHours().toString().padStart(2, '0');
+  const endMinute = endTime.getMinutes().toString().padStart(2, '0');
+  
+  return `T${startHour}:${startMinute}-${endHour}:${endMinute}`;
+}
+
+// 格式化日期时间，例如：2025-03-19 10:30
+function formatDateTime(date) {
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+  const hour = date.getHours().toString().padStart(2, '0');
+  const minute = date.getMinutes().toString().padStart(2, '0');
+  
+  return `${year}-${month}-${day} ${hour}:${minute}`;
+}
+
 // 处理告警显示
 function handleAlertShow({ message, type, duration = 5000 }) {
   if (alertTimer) {
@@ -814,6 +926,17 @@ function handlePathConflictAlert(payload) {
     const warningMessage = `预警：${message}`;
     showAlert(warningMessage, 'warning', 8000);
     
+    // 添加到告警列表
+    addAlarm({
+      carId: vehicleId,
+      carType: vehicles.value[vehicleId]?.type || '未知类型',
+      time: `${formatTimeRange(new Date())}与${otherVehicleId}发生冲`,
+      description: '突预警',
+      level: 'medium',
+      type: 'car',
+      rawData: payload
+    });
+    
     // 在地图上标记该车辆的预警状态
     if (vehicles.value[vehicleId]) {
       vehicles.value[vehicleId].warning = true;
@@ -834,6 +957,17 @@ function handlePathConflictAlert(payload) {
     const alertMessage = `⚠️ 告警：${message}`;
     showAlert(alertMessage, 'alarm', 10000);
     
+    // 添加到告警列表
+    addAlarm({
+      carId: vehicleId,
+      carType: vehicles.value[vehicleId]?.type || '未知类型',
+      time: `${formatTimeRange(new Date())}与${otherVehicleId}发生冲`,
+      description: '突告警',
+      level: 'high',
+      type: 'car',
+      rawData: payload
+    });
+    
     // 在地图上标记该车辆的告警状态
     if (vehicles.value[vehicleId]) {
       vehicles.value[vehicleId].alarm = true;
@@ -906,6 +1040,20 @@ function handleSpeedViolation(vehicleId, payload) {
   // 显示超速告警提示
   showAlert(`⚠️ 超速告警：${vehicleId} ${description}`, 'warning', 8000);
   
+  // 添加到告警列表，提供更详细的信息
+  addAlarm({
+    carId: vehicleId,
+    carType: vehicles.value[vehicleId]?.type || '未知类型',
+    time: `${formatTimeRange(new Date())}超速行驶`,
+    description: `，速度达到${actualValue}km/h`,
+    level: actualValue > limitValue * 1.5 ? 'high' : 'medium', // 超速50%以上为高级别告警
+    type: 'speed',
+    limitValue: limitValue,
+    actualValue: actualValue,
+    ruleName: ruleName,
+    rawData: payload
+  });
+  
   // 在地图上标记该车辆的超速状态
   if (vehicles.value[vehicleId]) {
     // 避免重复设置超速状态导致闪烁
@@ -1018,6 +1166,17 @@ function handleUnauthorizedEntry(vehicleId, payload) {
   // 显示越界告警提示
   showAlert(`⚠️ 越界告警：${vehicleId} ${description}`, 'critical', 10000);
   
+  // 添加到告警列表
+  addAlarm({
+    carId: vehicleId,
+    carType: vehicles.value[vehicleId]?.type || '未知类型',
+    time: `${formatTimeRange(new Date())}越界`,
+    description: '越界告警',
+    level: 'high',
+    type: 'access',
+    rawData: payload
+  });
+  
   // 在地图上标记该车辆的越界状态
   if (vehicles.value[vehicleId]) {
     vehicles.value[vehicleId].critical = true;
@@ -1496,6 +1655,40 @@ defineExpose({
 
   removeAircraftRoute(flightNo) {
     return removeAircraftRoute(flightNo);
+  },
+
+  // 告警通知相关方法
+  showAlarmNotification(message, type, duration) {
+    if (alarmNotification.value) {
+      alarmNotification.value.showNotification(message, type, duration);
+    }
+  },
+  hideAlarmNotification() {
+    if (alarmNotification.value) {
+      alarmNotification.value.hideNotification();
+    }
+  },
+  handleAlarmClose() {
+    // 告警通知组件关闭时，可以在这里执行一些清理或状态重置
+    console.log('告警通知组件已关闭');
+  },
+  addAlarm(alarm) {
+    return addAlarm(alarm);
+  },
+  updateAlarm(alarmId, updates) {
+    return updateAlarm(alarmId, updates);
+  },
+  removeAlarm(alarmId) {
+    return removeAlarm(alarmId);
+  },
+  clearAlarms() {
+    return clearAlarms();
+  },
+  updateAlarmNotification() {
+    return updateAlarmNotification();
+  },
+  toggleAlarmNotification() {
+    return toggleAlarmNotification();
   }
 });
 

src/components/map/info/AlarmNotification.vue

@@ -72,62 +72,7 @@ import { ref, computed } from 'vue';
 const activeTab = ref('all');
 
 // 模拟报警数据
-const alarmList = ref([
+const alarmList = ref([]);
-  {
-    carId: 'QN001',
-    carType: '驱鸟车',
-    time: 'T10:20—10: 25与JD5949发生冲',
-    description: '突告警',
-    date: '2025-03-19 10:30',
-    level: 'high',
-    type: 'car'
-  },
-  {
-    carId: 'QN001',
-    carType: '驱鸟车',
-    time: 'T10:20—10: 25与JD5949发生冲',
-    description: '突告警',
-    date: '2025-03-19 10:30',
-    level: 'high',
-    type: 'car'
-  },
-  {
-    carId: 'QN001',
-    carType: '驱鸟车',
-    time: 'T10:20—10: 25闯入电子围',
-    description: '栏监控区域，发生告警',
-    date: '2025-03-19 10:30',
-    level: 'medium',
-    type: 'report'
-  },
-  {
-    carId: 'QN001',
-    carType: '驱鸟车',
-    time: 'T10:20—10: 25闯入电子围',
-    description: '栏监控区域，发生告警',
-    date: '2025-03-19 10:30',
-    level: 'medium',
-    type: 'report'
-  },
-  {
-    carId: 'QN002',
-    carType: '牵引车',
-    time: 'T10:15—10: 18超速行驶',
-    description: '，速度达到85km/h',
-    date: '2025-03-19 10:18',
-    level: 'high',
-    type: 'speed'
-  },
-  {
-    carId: 'QN003',
-    carType: '摆渡车',
-    time: 'T10:22—10: 25超速行驶',
-    description: '，速度达到78km/h',
-    date: '2025-03-19 10:25',
-    level: 'medium',
-    type: 'speed'
-  }
-]);
 
 // 根据当前选中的标签页过滤告警数据
 const filteredAlarms = computed(() => {