89 lines
2.3 KiB
Vue
89 lines
2.3 KiB
Vue
<template>
|
|
<el-dialog title="选择坐标" width="1400px" :model-value="modelValue" @close="closed">
|
|
<div class="flex align-center ww100">
|
|
<el-input style="width: 48%;" v-model="listQuery.jd" placeholder="请选择经度" />
|
|
<el-input style="width: 48%;" v-model="listQuery.wd" placeholder="请选择纬度" />
|
|
<el-button type="primary" @click="changePoint">选择点位</el-button>
|
|
</div>
|
|
<div class="mapBox relative">
|
|
<GdMap mapid="mapId" v-if="mapShow"></GdMap>
|
|
</div>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="closed">取消</el-button>
|
|
<el-button type="primary" @click="submit">确定</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import emitter from "@/utils/eventBus.js";
|
|
import GdMap from "@/components/GdMap/index.vue";
|
|
import { defineProps, ref, onMounted, getCurrentInstance } from "vue";
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
tabOption: {
|
|
type: Array,
|
|
require: []
|
|
},
|
|
data: {
|
|
type: Array,
|
|
required: []
|
|
},
|
|
myId: {
|
|
type: String,
|
|
require: ""
|
|
},
|
|
title: {
|
|
type: String,
|
|
require: ""
|
|
}
|
|
});
|
|
const mapShow = ref(false)
|
|
const listQuery = ref({})
|
|
const emits = defineEmits(["update:modelValue"]);
|
|
const closed = () => {
|
|
emits("update:modelValue", false);
|
|
};
|
|
// 获取数据
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
mapShow.value = true
|
|
}, 100);
|
|
emitter.on("coordString", (res => {
|
|
if (res.type == 'point') {
|
|
listQuery.value.jd = res.coord[0];
|
|
listQuery.value.wd = res.coord[1];
|
|
let icon = require('@/assets/point/zsd1.png');
|
|
emitter.emit("showPoint", { coords: [{ jd: res.coord[0], wd: res.coord[1] }], icon, flag: 'bxd' });
|
|
}
|
|
}))
|
|
})
|
|
const { proxy } = getCurrentInstance();
|
|
// 选择点位
|
|
const changePoint = () => {
|
|
listQuery.value.jd = ''
|
|
listQuery.value.wd = ''
|
|
emitter.emit("removePlot", 'point');
|
|
emitter.emit("deletePointArea", 'bxd');
|
|
emitter.emit("drawShape", { type: 'point', flag: 'point' });
|
|
}
|
|
function submit() {
|
|
emits("submitFn", listQuery.value)
|
|
closed()
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/css/layout.scss";
|
|
|
|
.mapBox {
|
|
width: 100%;
|
|
height: 500px;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
}
|
|
</style> |