jayq_vue_newbigdata/src/views/analyse/analyseMapDialog.vue

<template>
  <div class="container">
    <!-- 遮罩层区域 -->
    <div class="mask" @click="handleClse"></div>
    <!-- 地图区域 -->
    <div class="map">
      <!-- 地图组件 -->
      <div class="map_box">
        <Map :type="type" @clickMarker="clickMarker" />
      </div>

      <!-- 关闭按钮区域 -->
      <div class="map_close" @click="handleClse"></div>

      <!-- 路口弹窗区域 -->
      <Transition name="fade">
        <MapCrossingDialog
          v-if="showDetail"
          :detailObj="detailObj"
          @closeDetail="closeDetail"
        />
      </Transition>

      <!-- 景区弹窗区域 -->
      <Transition name="fade">
        <MapScenicDialog
          v-if="showScenic"
          :detailObj="detailObj"
          @closeDetail="closeDetail"
        />
      </Transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Map from "@/components/map/map.vue";
import MapCrossingDialog from "./left/mapCrossingDialog.vue";
import MapScenicDialog from "./right/mapScenicDialog.vue";

defineProps(["type"]);
const $emit = defineEmits(["closeMap"]);

// 路口弹窗显示隐藏控制
const showDetail = ref<boolean>(false);
// 景区弹窗显示隐藏控制
const showScenic = ref<boolean>(false);

const detailObj = ref({
  name: "",
  num: 0,
});

// 点击关闭按钮图标回调
const handleClse = () => {
  $emit("closeMap", false);
};

// 自定义事件
const clickMarker = (title: any, type: any) => {
  console.log(title);
  console.log(type);
  if (type === "路口") {
    showDetail.value = true;
    detailObj.value.name = title;
  } else if (type === "乡镇") {
    showScenic.value = true;
    detailObj.value.name = title;
  }
};

const closeDetail = (data: boolean) => {
  showDetail.value = data;
  showScenic.value = data;
};
</script>

<style lang="scss" scoped>
.container {
  z-index: 9999;
  position: absolute;
  top: -151px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba($color: #000000, $alpha: 0.6);

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 7072px;
    height: 1872px;
  }
  .map {
    position: relative;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2407px;
    height: 1116px;
    border-radius: 10px;
    background-image: url(@/assets/images/47.png);
    background-size: 100% 100%;

    .map_box {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .map_close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 72px;
      height: 72px;
      cursor: pointer;
      background-image: url(@/assets/images/12.png);
      background-size: 100% 100%;
    }
  }
}
</style>