lcw

src/views/home/dialog/components/home_yj.vue

@@ -1,29 +1,25 @@
 <template>
-
   <DialogDragger title="预警详情" top="150px" v-model="props.show" @close="close">
-
     <ul class="warningList" ref="gjyjList">
       <li v-for="item in props.data" :key="item.id">
         <YjItem :item="item" />
       </li>
       <MOSTY.Empty :show="props.data.length <= 0" :imgSize="150"></MOSTY.Empty>
     </ul>
-    <!-- :style="{height: `calc(100vh - ${handleHs}px)`}" -->
-
     <div style="position:relative;width: 100%;" :style="{ height: `calc(100vh - ${handleHs}px)` }">
-      <GdMap v-if="showMap"></GdMap>
+      <GdMap v-if="showMap" :mapKey="'home_yj_map'" :mapid="'homeYjMap'" />
     </div>
   </DialogDragger>
 </template>
 <script setup>
 import * as MOSTY from "@/components/MyComponents/index";
 import GdMap from "@/components/GdMap/index.vue";
-
 import DialogDragger from "@/views/home/layout/dialogDragger.vue";
 import YjItem from "@/views/home/components/yjItem.vue";
-import { ref, defineProps, onMounted, watch } from "vue";
+import { ref, defineProps, onMounted, watch, getCurrentInstance } from "vue";
 import emitter from "@/utils/eventBus.js";
 const gjyjList = ref(null); //预警列表数据
+const { proxy } = getCurrentInstance();
 //参数传递
 const props = defineProps({
   //某条预警详情
@@ -36,7 +32,6 @@ const props = defineProps({
     default: false
   },
 });
-console.log(props.show);
 
 //关闭
 function close() {
@@ -48,23 +43,51 @@ onMounted(() => {
   setTimeout(() => {
     showMap.value = true
     setTimeout(() => {
+      // 只删除一次home_yj_map区域的点，避免影响其他地图
+      emitter.emit('deletePointArea', 'home_yj_map');
+
+      // 收集所有有效坐标的数据点
+      const validPoints = [];
       for (let i = 0; i < props.data.length; i++) {
         const item = props.data[i];
-        console.log(item);
+        // 修复重复的坐标判断条件
+        if (!item.jd || !item.wd) {
+          // 使用警告而不是return，避免中断循环
+          console.warn("该预警没有坐标：", item);
+          continue;
+        }
+        validPoints.push(item);
+      }
 
-        emitter.emit('showHomeYJ', [item]);
-        emitter.emit('deletePointArea', 'home_yj_map');
-        if (!item.jd || !item.jd) return proxy.$message({ type: "warning", message: "该预警没有坐标！" });
-        let icon = require('@/assets/point/yj.png');
-        if (item.yjjb == '20') icon = require('@/assets/point/yj1.png');
-        if (item.yjjb == '30') icon = require('@/assets/point/yj2.png');
-        if (item.yjjb == '40') icon = require('@/assets/point/yj3.png');
-        emitter.emit('addPointArea', { flag: 'home_yj_map', icon, coords: [item] });
-        emitter.emit('setMapCenter', { location: [item.jd, item.wd], zoomLevel: 10 });
+      // 如果有有效点，显示第一条并添加所有点
+      if (validPoints.length > 0) {
+        // 只显示第一条数据的详情
+        emitter.emit('showHomeYJ', [validPoints[0]]);
+
+        // 为每个有效点添加标记
+        validPoints.forEach((item, index) => {
+          let icon = require('@/assets/point/yj.png');
+          if (item.yjjb == '20') icon = require('@/assets/point/yj1.png');
+          if (item.yjjb == '30') icon = require('@/assets/point/yj2.png');
+          if (item.yjjb == '40') icon = require('@/assets/point/yj3.png');
+
+          // 为每个点添加唯一标识，避免与其他地图冲突
+          emitter.emit('addPointArea', {
+            flag: `home_yj_map_${index}`,
+            baseFlag: 'home_yj_map',
+            icon,
+            coords: [item]
+          });
+        });
+
+        // 只设置一次地图中心（使用第一个有效点）
+        emitter.emit('setMapCenter', {
+          location: [validPoints[0].jd, validPoints[0].wd],
+          zoomLevel: 10,
+          flag: 'home_yj_map' // 添加标识，确保只影响当前地图
+        });
       }
     }, 500);
-
-
   }, 200);
 })
 const handleHs = ref(0)