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

<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>
    <div style="position:relative;width: 100%;" :style="{ height: `calc(100vh - ${handleHs}px)` }">
      <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, getCurrentInstance } from "vue";
import emitter from "@/utils/eventBus.js";
const gjyjList = ref(null); //预警列表数据
const { proxy } = getCurrentInstance();
//参数传递
const props = defineProps({
  //某条预警详情
  data: {
    type: Array,
    default: []
  },
  show: {
    type: Boolean,
    default: false
  },
});

//关闭
function close() {
  emitter.emit('deletePointArea', 'home_yj_map');
  emitter.emit("showHomeYJ", false);
}
const showMap = ref(false)
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];
        // 修复重复的坐标判断条件
        if (!item.jd || !item.wd) {
          // 使用警告而不是return，避免中断循环
          console.warn("该预警没有坐标：", item);
          continue;
        }
        validPoints.push(item);
      }

      // 如果有有效点，显示第一条并添加所有点
      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)
watch(() => gjyjList.value, (val) => {
  console.log(val.clientHeight);
  handleHs.value = val.clientHeight + 198 + 150 + 20
}, { deep: true })
</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";

.dialogBox {
  z-index: 999;

  ul.warningList {
    height: calc(100vh - 198px);
    overflow: hidden;
    overflow-y: auto;
    padding: 7px 10px;
    box-sizing: border-box;

    .photo {
      width: 60px;
      height: 80px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

//加载时 取消背景
::v-deep .el-loading-mask {
  background-color: transparent !important;
}
</style>