修改接口内容

src/pages/map/index.vue

@@ -120,9 +120,10 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import BottomTabs from "@/components/bottomTabs.vue";
+import { getEventUnfinished } from "@/api/traffic";
 
 const router = useRouter();
 
@@ -148,63 +149,52 @@ const myLocation = ref({
   left: "40%"
 });
 
-// 标记点数据
-const markers = ref([
-  {
-    id: 1,
-    type: "road",
-    title: "中山路拥堵",
-    location: "中山路与发展大道",
-    time: "10:30",
-    color: "marker-blue",
-    position: { top: "15%", left: "15%" }
-  },
-  {
-    id: 2,
-    type: "emergency",
-    title: "交通事故",
-    location: "解放大道光谷广场",
-    time: "09:15",
-    color: "marker-red",
-    position: { top: "15%", left: "25%" }
-  },
-  {
-    id: 3,
-    type: "road",
-    title: "道路施工",
-    location: "上新河桥",
-    time: "11:00",
-    color: "marker-blue",
-    position: { top: "35%", left: "35%" }
-  },
-  {
-    id: 4,
-    type: "violation",
-    title: "违停车辆",
-    location: "武汉大道CBD",
-    time: "08:45",
-    color: "marker-purple",
-    position: { top: "50%", left: "55%" }
-  },
-  {
-    id: 5,
-    type: "road",
-    title: "路面积水",
-    location: "汉口江滩大道",
-    time: "12:20",
-    color: "marker-blue",
-    position: { top: "50%", left: "45%" }
-  },
-  {
-    id: 6,
-    type: "emergency",
-    title: "紧急疏导",
-    location: "光谷转盘",
-    time: "13:30",
-    color: "marker-red",
-    position: { top: "70%", left: "75%" }
+// 标记点数据（从接口获取）
+const markers = ref([]);
+const initLoading = ref(false);
+
+// 获取未完成的预警事件
+async function fetchUnfinishedEvents() {
+  const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
+  const areaCode = userInfo.areaCode;
+  const eventCategory = activeAlertType.value === 'road' ? 1 : 2;
+
+  initLoading.value = true;
+  try {
+    const res = await getEventUnfinished({ eventCategory, areaCode });
+    console.log('未完成预警事件:', res);
+    if (res) {
+      markers.value = (Array.isArray(res) ? res : res.data || []).map(item => ({
+        id: item.id,
+        type: activeAlertType.value,
+        title: item.eventType || item.title || '预警事件',
+        location: item.siteName || item.location || '',
+        time: item.eventTime || item.time || '',
+        color: getMarkerColor(item.eventLevel),
+        position: {
+          top: item.latitude ? `${Math.min(Math.max(item.latitude, 5), 95)}%` : `${Math.random() * 80 + 10}%`,
+          left: item.longitude ? `${Math.min(Math.max(item.longitude, 5), 95)}%` : `${Math.random() * 80 + 10}%`
+        }
+      }));
+    }
+  } catch (error) {
+    console.error('获取预警事件失败:', error);
+    markers.value = [];
+  } finally {
+    initLoading.value = false;
   }
-]);
+}
+
+// 根据事件等级获取标记颜色
+function getMarkerColor(eventLevel) {
+  const colorMap = {
+    1: 'marker-red',
+    2: 'marker-orange',
+    3: 'marker-blue',
+    4: 'marker-purple'
+  };
+  return colorMap[eventLevel] || 'marker-blue';
+}
 
 // 过滤后的标记点
 const filteredMarkers = computed(() => {
@@ -217,6 +207,16 @@ const filteredMarkers = computed(() => {
   });
 });
 
+// 切换预警类型时重新加载数据
+watch(activeAlertType, () => {
+  fetchUnfinishedEvents();
+});
+
+// 页面加载时获取数据
+onMounted(() => {
+  fetchUnfinishedEvents();
+});
+
 // 返回
 function goBack() {
   router.back();
@@ -370,6 +370,10 @@ function goToDetail() {
     background: #ef4444;
   }
 
+  &.marker-orange {
+    background: #f97316;
+  }
+
   &.marker-purple {
     background: #8b5cf6;
   }