123

src/pages/map/index.vue

@@ -27,28 +27,7 @@
 
     <!-- 地图区域 -->
     <div class="map-container">
-      <!-- 网格背景 -->
-      <div class="map-grid"></div>
-
-      <!-- 地图标记点 -->
-      <div
-        v-for="marker in filteredMarkers"
-        :key="marker.id"
-        class="marker-point"
-        :class="marker.color"
-        :style="{ top: marker.position.top, left: marker.position.left }"
-        @click="handleMarkerClick(marker)"
-      >
-        <van-icon name="location" />
-      </div>
-
-      <!-- 我的定位标记 -->
-      <div class="my-location" :style="{ top: myLocation.top, left: myLocation.left }">
-        <div class="pulse-ring"></div>
-        <div class="location-inner">
-          <div class="location-dot"></div>
-        </div>
-      </div>
+      <GdMap mapid="map-page-map" :is-show="false" />
 
       <!-- 右下角浮动按钮 -->
       <div class="float-buttons">
@@ -120,9 +99,10 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from "vue";
+import { ref, computed, onMounted, watch, nextTick } from "vue";
 import { useRouter } from "vue-router";
 import BottomTabs from "@/components/bottomTabs.vue";
+import GdMap from "@/components/GdMap/index.vue";
 import { getEventUnfinished } from "@/api/traffic";
 
 const router = useRouter();
@@ -163,20 +143,11 @@ async function fetchUnfinishedEvents() {
   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}%`
-        }
-      }));
-    }
+    const list = Array.isArray(res) ? res : (res.data || []);
+    markers.value = list;
+    nextTick(() => {
+      addMapMarkers(list);
+    });
   } catch (error) {
     console.error('获取预警事件失败:', error);
     markers.value = [];
@@ -185,27 +156,60 @@ async function fetchUnfinishedEvents() {
   }
 }
 
-// 根据事件等级获取标记颜色
 function getMarkerColor(eventLevel) {
   const colorMap = {
-    1: 'marker-red',
-    2: 'marker-orange',
-    3: 'marker-blue',
-    4: 'marker-purple'
+    1: '#ef4444',
+    2: '#f97316',
+    3: '#2563eb',
+    4: '#8b5cf6'
   };
-  return colorMap[eventLevel] || 'marker-blue';
+  return colorMap[eventLevel] || '#2563eb';
 }
 
-// 过滤后的标记点
-const filteredMarkers = computed(() => {
-  return markers.value.filter(marker => {
-    if (marker.type !== activeAlertType.value) return false;
-    if (marker.type === "road") return filters.value.alertTypes.includes("road");
-    if (marker.type === "violation") return filters.value.alertTypes.includes("violation");
-    if (marker.type === "emergency") return filters.value.alertTypes.includes("emergency");
-    return true;
+// 向地图添加标记
+function addMapMarkers(list) {
+  if (!window.map || !list || list.length === 0) return;
+
+  const validList = list.filter(item => item.longitude && item.latitude);
+
+  validList.forEach(item => {
+    const color = getMarkerColor(item.eventLevel);
+    const el = document.createElement('div');
+    el.className = 'map-alert-marker';
+    el.style.cssText = `width:32px;height:32px;border-radius:50%;background:${color};display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,0.3);`;
+
+    const icon = document.createElement('span');
+    icon.textContent = '!';
+    icon.style.cssText = 'color:#fff;font-size:18px;font-weight:bold;line-height:1;';
+    el.appendChild(icon);
+
+    const marker = window.map.Marker(el, [item.longitude, item.latitude], { anchor: 'bottom' });
+
+    el.addEventListener('click', () => {
+      selectedMarker.value = {
+        id: item.id,
+        type: activeAlertType.value,
+        title: item.eventType || item.title || '预警事件',
+        location: item.siteName || item.location || '',
+        time: item.eventTime || item.time || '',
+        rawData: item
+      };
     });
   });
+}
+
+// 前往详情
+function goToDetail() {
+  if (selectedMarker.value) {
+    if (selectedMarker.value.type === 'road') {
+      router.push('/traffic-alerts');
+    } else if (selectedMarker.value.type === 'violation') {
+      router.push('/violation-alerts');
+    } else {
+      router.push('/emergency-tasks');
+    }
+  }
+}
 
 // 切换预警类型时重新加载数据
 watch(activeAlertType, () => {
@@ -250,19 +254,6 @@ function resetFilter() {
     statuses: []
   };
 }
-
-// 前往详情
-function goToDetail() {
-  if (selectedMarker.value) {
-    if (selectedMarker.value.type === "road") {
-      router.push("/traffic-alerts");
-    } else if (selectedMarker.value.type === "violation") {
-      router.push("/violation-alerts");
-    } else {
-      router.push("/emergency-tasks");
-    }
-  }
-}
 </script>
 
 <style lang="scss" scoped>