<template>
|
<div
|
v-drag="true"
|
class="coordBox"
|
>
|
<div class="coordTitle">
|
<label>坐标定位</label>
|
<el-icon
|
@click="setCoordClose"
|
:size="20"
|
>
|
<Close />
|
</el-icon>
|
</div>
|
<div class="coordContent">
|
<el-form
|
ref="ruleFormRef"
|
:model="ruleForm"
|
:rules="rules"
|
>
|
<el-form-item
|
label="经度："
|
prop="lon"
|
>
|
<el-input
|
v-model="ruleForm.lon"
|
placeholder="请输入经度..."
|
/>
|
</el-form-item>
|
|
<el-form-item
|
label="纬度："
|
prop="lat"
|
>
|
<el-input
|
v-model="ruleForm.lat"
|
placeholder="请输入纬度..."
|
/>
|
</el-form-item>
|
<el-form-item label="高度：">
|
<el-input
|
v-model="ruleForm.alt"
|
placeholder="请输入高度..."
|
/>
|
</el-form-item>
|
<el-form-item>
|
<div style=" width: 100%; display: flex;
|
justify-content: flex-end !important;">
|
<el-button
|
size="smal"
|
@click="resetForm(ruleFormRef)"
|
>清除</el-button>
|
<el-button
|
size="smal"
|
type="primary"
|
@click="submitForm(ruleFormRef)"
|
>定位</el-button>
|
</div>
|
|
</el-form-item>
|
</el-form>
|
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
nextTick,
|
} from "vue";
|
|
import { ElMessage, FormInstance, FormRules } from "element-plus";
|
import menuTool from "@/assets/js/Map/menuTool.js";
|
const ruleFormRef = ref<FormInstance>();
|
const emits = defineEmits(["SETcoordClose"]);
|
|
const setCoordClose = () => {
|
emits("SETcoordClose", false);
|
};
|
|
const validateLon = (rule: any, value: any, callback: any) => {
|
if (!value) {
|
return callback(new Error("请输入经度"));
|
} else {
|
var reg = /^[0-9]+.?[0-9]*$/;
|
if (!reg.test(value)) {
|
callback(new Error("请输入整数或小数.."));
|
} else {
|
callback();
|
}
|
}
|
};
|
const validateLat = (rule: any, value: any, callback: any) => {
|
if (!value) {
|
return callback(new Error("请输入纬度"));
|
} else {
|
var reg = /^[0-9]+.?[0-9]*$/;
|
if (!reg.test(value)) {
|
callback(new Error("请输入整数或小数.."));
|
} else {
|
callback();
|
}
|
}
|
};
|
const validateAlt = (rule: any, value: any, callback: any) => {
|
if (!value) {
|
return callback(new Error("请输入高度"));
|
} else {
|
var reg = /^[0-9]+.?[0-9]*$/;
|
if (!reg.test(value)) {
|
callback(new Error("请输入整数或小数.."));
|
} else {
|
callback();
|
}
|
}
|
};
|
const ruleForm = reactive({
|
lon: "",
|
lat: "",
|
alt: "",
|
});
|
const rules = reactive<FormRules<typeof ruleForm>>({
|
lon: [{ validator: validateLon, trigger: "blur" }],
|
lat: [{ validator: validateLat, trigger: "blur" }],
|
alt: [{ validator: validateAlt, trigger: "blur" }],
|
});
|
const submitForm = (formEl: FormInstance | undefined) => {
|
if (!formEl) return;
|
formEl.validate((valid) => {
|
if (valid) {
|
menuTool.setLocalPosition(ruleForm);
|
} else {
|
ElMessage("请检查参数是否输入正确");
|
return false;
|
}
|
});
|
};
|
const resetForm = (formEl: FormInstance | undefined) => {
|
if (!formEl) return;
|
formEl.resetFields();
|
menuTool.setLocalPositionClose();
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.coordBox {
|
width: 400px;
|
height: 280px;
|
position: absolute;
|
z-index: 30;
|
bottom: 5%;
|
right: 5%;
|
background: rgba(7, 8, 14, 0.8);
|
border: 1px solid #d6e4ff;
|
z-index: 10;
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
border-radius: 5px;
|
.coordTitle {
|
padding: 10px;
|
width: calc(100% - 20px);
|
height: 66px;
|
color: #d6e4ff;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 30px;
|
label {
|
font-size: 16px;
|
}
|
}
|
.coordContent {
|
height: calc(100% - 70px);
|
width: calc(100% - 40px);
|
padding: 10px 20px;
|
/deep/.el-form-item__label {
|
color: #d6e4ff;
|
}
|
}
|
}
|
</style>
|
