告警事件列表修复

src/components/map/controls/VehicleMovementControlRefactored.vue

@@ -1173,10 +1173,10 @@ function handleUnauthorizedEntry(vehicleId, payload) {
     time: `${formatTimeRange(new Date())}越界`,
     description: '越界告警',
     level: 'high',
-    type: 'access',
+    type: 'report', // 修改类型为report，与AlarmNotification.vue中的标签页类型匹配
     rawData: payload
   });
-  
+  console.log('越界告警------------------------------------', vehicles.value[vehicleId].type);
   // 在地图上标记该车辆的越界状态
   if (vehicles.value[vehicleId]) {
     vehicles.value[vehicleId].critical = true;
@@ -1504,6 +1504,7 @@ defineExpose({
   weatherStationVisible,
   vehicleDetailVisible,
   vehicleDetail,
+  alarmList, // 暴露告警列表
   toggleWeatherStationVisibility() {
     weatherStationVisible.value = !weatherStationVisible.value;
   },
@@ -1729,4 +1730,50 @@ function createDefaultStyle(iconSrc, heading) {
     })
   });
 }
-</script> 
+</script> 
+
+<style scoped>
+/* 告警按钮样式 */
+.alarm-btn {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 40px;
+  height: 40px;
+  background-color: rgba(41, 44, 56, 0.8);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 1000;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  transition: all 0.3s;
+}
+
+.alarm-btn:hover {
+  background-color: rgba(41, 44, 56, 1);
+  transform: scale(1.05);
+}
+
+.alarm-btn img {
+  width: 24px;
+  height: 24px;
+}
+
+.alarm-badge {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  background-color: #ff4d4f;
+  color: white;
+  font-size: 12px;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+}
+</style> 

src/components/map/info/AlarmNotification.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="alarm-notification-container">
+  <div class="alarm-notification-container" v-show="visible">
     <!-- 标签页头部 -->
     <div class="detail-tabs">
       <div class="tab-header">
@@ -23,7 +23,7 @@
             :class="{ active: activeTab === 'report' }" 
             @click="activeTab = 'report'"
           >
-            超界告警
+            越界告警
           </div>
           <div 
             class="tab-item" 
@@ -35,7 +35,7 @@
         </div>
         <div class="tab-actions">
         
-          <div class="close-btn" @click="$emit('close')">
+          <div class="close-btn" @click="handleClose">
             <i class="close-icon">×</i>
           </div>
         </div>
@@ -47,7 +47,7 @@
       <div class="alarm-item" v-for="(item, index) in filteredAlarms" :key="index">
         <div class="alarm-icon1" :class="item.level">
           <img v-if="item.type === 'car'" src="@/assets/images/clarm_conflict.png" class="alarm-img" alt="车辆冲突" />
-          <img v-else-if="item.type === 'report'" src="@/assets/images/clarm_over.png" class="alarm-img" alt="超界告警" />
+          <img v-else-if="item.type === 'report'" src="@/assets/images/clarm_over.png" class="alarm-img" alt="越界告警" />
           <img v-else-if="item.type === 'speed'" src="@/assets/images/speed.png" class="alarm-img" alt="超速告警" />
           <i v-else class="alarm-dot"></i>
         </div>
@@ -71,7 +71,10 @@ import { ref, computed } from 'vue';
 // 当前激活的标签页
 const activeTab = ref('all');
 
-// 模拟报警数据
+// 控制组件显示/隐藏
+const visible = ref(true);
+
+// 告警数据列表
 const alarmList = ref([]);
 
 // 根据当前选中的标签页过滤告警数据
@@ -82,12 +85,42 @@ const filteredAlarms = computed(() => {
   return alarmList.value.filter(item => item.type === activeTab.value);
 });
 
-// 暴露方法，允许父组件更新数据
+// 处理关闭按钮点击事件
+function handleClose() {
+  visible.value = false;
+  emit('close');
+}
+
+// 定义emit
+const emit = defineEmits(['close']);
+
+// 暴露方法，允许父组件更新数据和控制显示/隐藏
 defineExpose({
+  // 更新告警列表
   updateAlarmList(newList) {
     if (newList && Array.isArray(newList)) {
       alarmList.value = newList;
     }
+  },
+  
+  // 显示组件
+  show() {
+    visible.value = true;
+  },
+  
+  // 隐藏组件
+  hide() {
+    visible.value = false;
+  },
+  
+  // 切换显示/隐藏状态
+  toggle() {
+    visible.value = !visible.value;
+  },
+  
+  // 获取当前显示状态
+  isVisible() {
+    return visible.value;
   }
 });
 </script>

src/views/platform/index.vue

@@ -51,9 +51,13 @@
     </div>
     
     <!-- 报警通知面板 -->
-    <AlarmNotification v-if="showAlarmPanel" @close="showAlarmPanel = false" />
+    <AlarmNotification 
+      ref="alarmNotificationRef"
+      v-if="showAlarmPanel" 
+      @close="handleAlarmClose" 
+    />
     <!-- 报警通知按钮 -->
-    <div class="alarm-btn" @click="showAlarmPanel = !showAlarmPanel">
+    <div class="alarm-btn" @click="toggleAlarmPanel">
       <i class="alarm-icon"></i>
       <span class="alarm-badge" v-if="alarmCount > 0">{{ alarmCount }}</span>
     </div>
@@ -120,6 +124,20 @@ const hasNewSpeed = ref(false);
 // 当前时间
 const currentTime = ref('');
 
+// 告警通知相关
+const alarmNotificationRef = ref(null);
+
+// 监听vehicleMovementRef中的告警列表变化
+watch(() => vehicleMovementRef.value?.alarmList, (newAlarmList) => {
+  if (newAlarmList && alarmNotificationRef.value) {
+    // 更新告警通知面板中的数据
+    alarmNotificationRef.value.updateAlarmList(newAlarmList);
+    
+    // 更新告警数量
+    alarmCount.value = newAlarmList.length;
+  }
+}, { deep: true });
+
 // 更新时间
 function updateCurrentTime() {
   const now = new Date();
@@ -174,6 +192,12 @@ function handleSetCategoryVisibility(type, settings) {
   }
 }
 
+// 处理告警面板关闭事件
+function handleAlarmClose() {
+  showAlarmPanel.value = false;
+  console.log('告警面板已关闭');
+}
+
 // 判断是否为开发环境
 const isDevelopment = process.env.NODE_ENV === 'development';
 
@@ -181,6 +205,15 @@ function toggleEventList() {
   showEventList.value = !showEventList.value;
 }
 
+function toggleAlarmPanel() {
+  showAlarmPanel.value = !showAlarmPanel.value;
+  
+  // 如果面板显示，确保告警数据是最新的
+  if (showAlarmPanel.value && alarmNotificationRef.value && vehicleMovementRef.value) {
+    alarmNotificationRef.value.updateAlarmList(vehicleMovementRef.value.alarmList);
+  }
+}
+
 function getRouteDrawControlExpose() {
   // 通过OpenLayersMap的ref获取RouteDrawControl的ref
   return mapRef.value?.$refs?.routeDrawControlRef;