157 lines
3.8 KiB
Vue
157 lines
3.8 KiB
Vue
<template>
|
|
<el-dialog
|
|
title="请设置住宿范围"
|
|
append-to-body
|
|
:close-on-click-modal="false"
|
|
v-model="visible"
|
|
width="90%">
|
|
<div style="height: 100%;width:100%">
|
|
<el-form :model="form" :rules="rules" ref="formRef" label-width="120px"
|
|
class="demo-ruleForm">
|
|
|
|
<el-form-item label="住宿半径(米)" prop="raidus">
|
|
<el-input-number v-model="form.raidus" :min="0" style="width: 100%"></el-input-number>
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
<div id="container"></div>
|
|
</div>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button type="primary" @click="dataFormSubmit">确定</el-button>
|
|
<el-button @click="visible = false">取消</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, watch, nextTick } from 'vue'
|
|
import { useMessage, useMessageBox } from '/@/hooks/message'
|
|
import { BMPGL } from "@/api/recruit/recruitstudentsignup"
|
|
import { putItemObj } from "@/api/admin/dict"
|
|
import { getTypeValue } from "@/api/admin/dict"
|
|
|
|
// 消息提示 hooks
|
|
const message = useMessage()
|
|
const messageBox = useMessageBox()
|
|
|
|
// 表单引用
|
|
const formRef = ref()
|
|
|
|
// 响应式数据
|
|
const ak = "V0ooaf2RZyEGOkD8UzZB3gvw7pCb0Kx7" // 百度的地图密钥
|
|
const visible = ref(false)
|
|
const canSubmit = ref(false)
|
|
const circleShow = ref(false)
|
|
const circle = ref<any>(null)
|
|
|
|
// 地址信息
|
|
const address = ref(null)
|
|
const center = reactive({ lng: 0, lat: 0 })
|
|
const dictId = ref("")
|
|
const circleArr = ref<any[]>([])
|
|
|
|
const form = reactive({
|
|
raidus: 0,
|
|
})
|
|
|
|
const rules = {
|
|
raidus: [
|
|
{ required: true, message: '住宿半径不能为空', trigger: ["blur", "change"] }
|
|
],
|
|
}
|
|
|
|
// 监听半径变化
|
|
watch(() => form.raidus, (newVal) => {
|
|
if (newVal != '' && newVal != undefined && circle.value) {
|
|
circle.value.setRadius(newVal) // 设置圆形覆盖物的半径
|
|
}
|
|
})
|
|
|
|
// 初始化
|
|
const init = () => {
|
|
visible.value = true
|
|
canSubmit.value = true
|
|
circleShow.value = true
|
|
nextTick(() => {
|
|
getTypeValue("dorm_jw").then((data: any) => {
|
|
const arr = data.data
|
|
arr.forEach((e: any) => {
|
|
if (e.label == 'bj') {
|
|
form.raidus = e.value
|
|
dictId.value = e.id
|
|
} else if (e.label == 'lng') {
|
|
center.lng = e.value
|
|
} else if (e.label == 'lat') {
|
|
center.lat = e.value
|
|
}
|
|
})
|
|
BMPGL(ak).then((BMapGL: any) => {
|
|
// 创建地图实例
|
|
const map = new BMapGL.Map("container")
|
|
// 创建点坐标
|
|
const point = new BMapGL.Point(center.lng, center.lat)
|
|
// 初始化地图，设置中心点坐标和地图级别
|
|
map.centerAndZoom(point, 13)
|
|
// 开启鼠标滚轮缩放
|
|
map.enableScrollWheelZoom(true)
|
|
|
|
// 绘制圆
|
|
circle.value = new BMapGL.Circle(new BMapGL.Point(center.lng, center.lat), form.raidus, {
|
|
strokeColor: 'blue',
|
|
strokeWeight: 2,
|
|
strokeOpacity: 0.5,
|
|
enableEditing: false
|
|
})
|
|
map.addOverlay(circle.value)
|
|
})
|
|
})
|
|
})
|
|
}
|
|
|
|
// 表单提交
|
|
const dataFormSubmit = async () => {
|
|
try {
|
|
await messageBox.confirm('是否确认保存住宿半径')
|
|
formRef.value?.validate((valid: boolean) => {
|
|
if (valid) {
|
|
canSubmit.value = false
|
|
putItemObj({ id: dictId.value, value: form.raidus }).then(() => {
|
|
message.success('修改成功')
|
|
visible.value = false
|
|
canSubmit.value = true
|
|
}).catch(() => {
|
|
canSubmit.value = true
|
|
})
|
|
}
|
|
})
|
|
} catch {
|
|
// 用户取消
|
|
}
|
|
}
|
|
|
|
// 暴露方法给父组件
|
|
defineExpose({
|
|
init
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
#container {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 700px;
|
|
margin: 0;
|
|
font-family: "微软雅黑";
|
|
}
|
|
|
|
ul li {
|
|
list-style: none;
|
|
}
|
|
|
|
.dialog-footer {
|
|
text-align: right;
|
|
}
|
|
</style>
|