页面优化
This commit is contained in:
BianLzhaoMin
parent
1a1ad07c53
commit
31e9acfbbf
|
|
@ -172,10 +172,24 @@
|
||||||
<el-dialog
|
<el-dialog
|
||||||
:title="title"
|
:title="title"
|
||||||
:visible.sync="open"
|
:visible.sync="open"
|
||||||
width="600px"
|
width="40%"
|
||||||
append-to-body
|
append-to-body
|
||||||
:close-on-click-modal="false"
|
:close-on-click-modal="false"
|
||||||
>
|
>
|
||||||
|
<!-- 内层对话框 选择地图 -->
|
||||||
|
<el-dialog
|
||||||
|
width="70%"
|
||||||
|
title="选择地图"
|
||||||
|
:visible.sync="innerVisible"
|
||||||
|
v-if="innerVisible"
|
||||||
|
append-to-body
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
id="map-container"
|
||||||
|
style="height: 550px; background-color: #bfc"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
<el-form
|
<el-form
|
||||||
ref="form"
|
ref="form"
|
||||||
:model="form"
|
:model="form"
|
||||||
|
|
@ -262,6 +276,20 @@
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<!-- <el-form-item>
|
||||||
|
<el-button type="primary" @click="handleProjectAddress"
|
||||||
|
>选择工程地址</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="经度" prop="lng">
|
||||||
|
<el-input v-model="form.lng" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="纬度" prop="lat">
|
||||||
|
<el-input v-model="form.lat" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="工程地址" prop="projectAddress">
|
||||||
|
<el-input v-model="form.projectAddress" />
|
||||||
|
</el-form-item> -->
|
||||||
</el-form>
|
</el-form>
|
||||||
<div slot="footer" class="dialog-footer">
|
<div slot="footer" class="dialog-footer">
|
||||||
<el-button
|
<el-button
|
||||||
|
|
@ -336,6 +364,9 @@ export default {
|
||||||
form: {
|
form: {
|
||||||
startDate: '',
|
startDate: '',
|
||||||
completionDate: '',
|
completionDate: '',
|
||||||
|
lng: '',
|
||||||
|
lat: '',
|
||||||
|
projectAddress: '',
|
||||||
},
|
},
|
||||||
chosenData: {},
|
chosenData: {},
|
||||||
// 表单校验
|
// 表单校验
|
||||||
|
|
@ -376,6 +407,8 @@ export default {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
innerVisible: false,
|
||||||
|
map: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -550,6 +583,40 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/** 选择工程地址 */
|
||||||
|
handleProjectAddress() {
|
||||||
|
console.log('选择工程地址---')
|
||||||
|
const this_ = this
|
||||||
|
this_.innerVisible = true
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this_.map = new BMapGL.Map('map-container') // 创建地图实例
|
||||||
|
let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标
|
||||||
|
// let point = new BMapGL.Point(116.404, 39.915) // 创建点坐标
|
||||||
|
this_.map.centerAndZoom(point, 12) // 初始化地图，设置中心点坐标和地图级别
|
||||||
|
this_.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||||||
|
this_.map.setHeading(64.5) //设置地图旋转角度
|
||||||
|
this_.map.setTilt(73) //设置地图的倾斜角度
|
||||||
|
|
||||||
|
var geoc = new BMapGL.Geocoder()
|
||||||
|
|
||||||
|
this_.map.addEventListener('click', function (e) {
|
||||||
|
var pt = e.latlng
|
||||||
|
geoc.getLocation(pt, function (res) {
|
||||||
|
console.log(res, '地址--')
|
||||||
|
var addComp = res.addressComponents
|
||||||
|
this_.form.projectAddress = `${addComp.province}${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`
|
||||||
|
this_.form.lng = e.latlng.lng
|
||||||
|
this_.form.lat = e.latlng.lat
|
||||||
|
})
|
||||||
|
this_.map.clearOverlays()
|
||||||
|
point = new BMapGL.Point(e.latlng.lng, e.latlng.lat)
|
||||||
|
let marker = new BMapGL.Marker(point) // 创建标点
|
||||||
|
this_.map.addOverlay(marker)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -180,6 +180,20 @@
|
||||||
append-to-body
|
append-to-body
|
||||||
:close-on-click-modal="false"
|
:close-on-click-modal="false"
|
||||||
>
|
>
|
||||||
|
<!-- 内层对话框 选择地图 -->
|
||||||
|
<el-dialog
|
||||||
|
width="70%"
|
||||||
|
title="选择地图"
|
||||||
|
:visible.sync="innerVisible"
|
||||||
|
v-if="innerVisible"
|
||||||
|
append-to-body
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
id="map-container"
|
||||||
|
style="height: 550px; background-color: #bfc"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
<el-form
|
<el-form
|
||||||
ref="form"
|
ref="form"
|
||||||
:model="form"
|
:model="form"
|
||||||
|
|
@ -281,6 +295,20 @@
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleProjectAddress"
|
||||||
|
>选择工程地址</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="经度" prop="longitude">
|
||||||
|
<el-input disabled v-model="form.longitude" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="纬度" prop="latitude">
|
||||||
|
<el-input disabled v-model="form.latitude" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="工程地址" prop="address">
|
||||||
|
<el-input v-model="form.address" />
|
||||||
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div slot="footer" class="dialog-footer">
|
<div slot="footer" class="dialog-footer">
|
||||||
<el-button
|
<el-button
|
||||||
|
|
@ -349,7 +377,11 @@ export default {
|
||||||
status: undefined,
|
status: undefined,
|
||||||
},
|
},
|
||||||
// 表单参数
|
// 表单参数
|
||||||
form: {},
|
form: {
|
||||||
|
longitude: '',
|
||||||
|
latitude: '',
|
||||||
|
address: '',
|
||||||
|
},
|
||||||
// 表单校验
|
// 表单校验
|
||||||
rules: {
|
rules: {
|
||||||
lotName: [
|
lotName: [
|
||||||
|
|
@ -390,7 +422,30 @@ export default {
|
||||||
trigger: 'change',
|
trigger: 'change',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
longitude: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
trigger: 'blur',
|
||||||
|
message: '经度不能为空',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
latitude: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
trigger: 'blur',
|
||||||
|
message: '纬度不能为空',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
address: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入工程地址',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
|
innerVisible: false,
|
||||||
|
map: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -571,6 +626,37 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
/** 选择工程地址 */
|
||||||
|
handleProjectAddress() {
|
||||||
|
const this_ = this
|
||||||
|
this.innerVisible = true
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this_.map = new BMapGL.Map('map-container') // 创建地图实例
|
||||||
|
let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标
|
||||||
|
// let point = new BMapGL.Point(116.404, 39.915) // 创建点坐标
|
||||||
|
this_.map.centerAndZoom(point, 12) // 初始化地图，设置中心点坐标和地图级别
|
||||||
|
this_.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||||||
|
this_.map.setHeading(64.5) //设置地图旋转角度
|
||||||
|
this_.map.setTilt(73) //设置地图的倾斜角度
|
||||||
|
|
||||||
|
var geoc = new BMapGL.Geocoder()
|
||||||
|
|
||||||
|
this_.map.addEventListener('click', function (e) {
|
||||||
|
var pt = e.latlng
|
||||||
|
geoc.getLocation(pt, function (res) {
|
||||||
|
var addComp = res.addressComponents
|
||||||
|
this_.form.address = `${addComp.province}${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`
|
||||||
|
this_.form.longitude = e.latlng.lng
|
||||||
|
this_.form.latitude = e.latlng.lat
|
||||||
|
})
|
||||||
|
this_.map.clearOverlays()
|
||||||
|
point = new BMapGL.Point(e.latlng.lng, e.latlng.lat)
|
||||||
|
let marker = new BMapGL.Marker(point) // 创建标点
|
||||||
|
this_.map.addOverlay(marker)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue