yjdp-web/src/views/routineCommandMap/MiddleSection.vue

<template>
  <div class="middle-section">
    <div class="search-button">
      <el-button type="primary" @click="handleQuery1">备战防御</el-button>
      <el-button type="primary" @click="handleQuery2">指挥调度</el-button>
    </div>
    <!--    <Dialog id="selectMap" v-model="mapDialogVisible" title="气象图" width="700px" height="600px" @close="dialogClose">-->
    <company-map v-model:visible="mapDialogVisible" :address="form.address" style="height: 1500px" @confirm="handleMapChange"></company-map>
    <!--    </Dialog>-->

    <GlobalMap is-component width="3894" height="2140" />
  </div>
</template>

<script lang="ts" setup>
import GlobalMap from '../globalMap/index.vue';
import { ref } from 'vue';
// import Dialog from "@/components/Dialog/index2.vue";
import CompanyMap from '@/components/Map/company-map.vue';

const form = ref({
  address: '',
  lon: '',
  lat: ''
});
const mapDialogVisible = ref(false);
const handleQuery1 = () => {
  console.log('备战防御被点击');
};

const handleQuery2 = () => {
  mapDialogVisible.value = true;
};
const handleMapChange = (data) => {
  form.value.drillAddress = data.address;
  form.value.lon = data.lnglat[0];
  form.value.lat = data.lnglat[1];
  mapDialogVisible.value = false;
};
</script>

<style lang="scss" scoped>
.middle-section {
  margin: 0 91px;
  flex: 1;
  height: 2140px;
  animation: slideAndFade 1.5s;
  position: relative;
}
.search-button {
  position: absolute;
  top: 60px;
  left: 900px;
  z-index: 10;
}
.el-button {
  width: 360px;
  height: 100px;
  padding: 20px 40px;
  font-size: 48px;
}

@keyframes slideAndFade {
  0% {
    transform: translateY(218px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
</style>