bonus
/
devicesmgt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页面优化

This commit is contained in:
BianLzhaoMin 2024-08-13 18:11:07 +08:00
parent 1a1ad07c53
commit 31e9acfbbf
2 changed files with 155 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
sgzb-ui/src/views/base/project/index.vue
View File

@ -172,10 +172,24 @@
<el-dialog
:title="title"
:visible.sync="open"
width="600px"
width="40%"
append-to-body
: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
ref="form"
:model="form"
@ -262,6 +276,20 @@
}"
/>
</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>
<div slot="footer" class="dialog-footer">
<el-button
@ -336,6 +364,9 @@ export default {
form: {
startDate: '',
completionDate: '',
lng: '',
lat: '',
projectAddress: '',
},
chosenData: {},
// 表单校验
@ -376,6 +407,8 @@ export default {
},
],
},
innerVisible: false,
map: null,
}
},
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>

88
sgzb-ui/src/views/base/section/index.vue
View File

@ -180,6 +180,20 @@
append-to-body
: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
ref="form"
:model="form"
@ -281,6 +295,20 @@
}"
/>
</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>
<div slot="footer" class="dialog-footer">
<el-button
@ -349,7 +377,11 @@ export default {
status: undefined,
},
// 表单参数
form: {},
form: {
longitude: '',
latitude: '',
address: '',
},
// 表单校验
rules: {
lotName: [
@ -390,7 +422,30 @@ export default {
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() {
@ -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>