<template>
|
<a-modal
|
title="坐标选择"
|
destroyOnClose
|
:visible="true"
|
@ok="addLonAndLat"
|
@cancel="handleMapCancel"
|
okText="确定"
|
class="modalStyle"
|
>
|
<p style="position: absolute; bottom: -3px; right: 200px">
|
<span>设备名称：</span
|
><span style="font-size: 18px; font-weight: bold">{{
|
mapRecord.name
|
}}</span>
|
</p>
|
|
<div>
|
<p>
|
<span>地址：</span
|
><a-input
|
v-model="keyword"
|
style="display: inline; width: 160px; height: 26px"
|
/>
|
<span style="margin-left: 25px">经度：</span
|
><a-input
|
disabled="disabled"
|
v-model="lonAndLat.lng"
|
style="display: inline; width: 160px; height: 26px"
|
/>
|
<span style="margin-left: 25px">纬度：</span
|
><a-input
|
disabled="disabled"
|
v-model="lonAndLat.lat"
|
style="display: inline; width: 160px; height: 26px"
|
/>
|
</p>
|
<!-- :scroll-wheel-zoom="true"-->
|
<baidu-map
|
:center="center"
|
:zoom="zoom"
|
@ready="handler"
|
@click="mapClick"
|
:scroll-wheel-zoom="true"
|
style="height: 400px; width: 100%"
|
>
|
<bm-control>
|
<bm-local-search
|
:keyword="keyword"
|
:auto-viewport="true"
|
style="display: none"
|
></bm-local-search>
|
<bm-marker
|
:position="{ lng: lonAndLat.lng, lat: lonAndLat.lat }"
|
:dragging="true"
|
animation="BMAP_ANIMATION_BOUNCE"
|
>
|
</bm-marker>
|
</bm-control>
|
</baidu-map>
|
</div>
|
</a-modal>
|
</template>
|
|
<script lang="tsx">
|
import {
|
Component,
|
Prop,
|
Vue,
|
Emit, Watch,
|
} from 'vue-property-decorator';
|
import any = jasmine.any;
|
import { get, post } from "@/util/request";
|
|
|
@Component({
|
})
|
export default class PickCoordinate extends Vue {
|
// 初始定位到星虹国际
|
private center = {
|
lng: ' 120.726838',
|
lat: ' 31.3421'
|
}
|
private keyword: string = ''
|
private zoom = 3
|
|
private created() {
|
|
}
|
@Prop({
|
type: Object,
|
default: () => {}
|
})
|
private mapRecord: any
|
|
|
@Prop({
|
type: String,
|
default: () => {}
|
})
|
private mapUrl:any
|
|
@Watch('mapRecord',{
|
deep:true
|
})
|
private clickPointTurn(newVal: any, oldVal: any) {
|
this.clickPoint.lng = ''
|
this.clickPoint.lat = ''
|
this.center.lng = this.mapRecord.longitude
|
this.center.lat = this.mapRecord.latitude
|
this.clickPoint.lng = this.center.lng
|
this.clickPoint.lat = this.center.lat
|
}
|
|
get lonAndLat() {
|
this.clickPoint.lng = ''
|
this.clickPoint.lat = ''
|
this.clickPoint.lng = this.mapRecord.longitude
|
this.clickPoint.lat = this.mapRecord.latitude
|
return this.clickPoint
|
}
|
|
// 初始化地图
|
private handler({BMap, map}) {
|
this.center.lng = this.mapRecord.longitude
|
this.center.lat = this.mapRecord.latitude
|
this.zoom = 19
|
|
}
|
private clickPoint: any = {
|
lng: '',
|
lat: ''
|
}
|
private mapClick(e: any) {
|
const { lng, lat } = e.point
|
this.clickPoint.lng = lng
|
this.clickPoint.lat = lat
|
}
|
|
private handleMapCancel() {
|
this.keyword = ''
|
this.flagSend(true)
|
}
|
|
private addLonAndLat() {
|
post( ''+ this.mapUrl,
|
{
|
id: this.mapRecord.id,
|
longitude: this.clickPoint.lng,
|
latitude: this.clickPoint.lat
|
}
|
).then((res: any) => {
|
if (res.data.code === 0) {
|
this.$message.success(res.data.log)
|
this.$parent.loadRuleData(1)
|
this.keyword = ''
|
this.flagSend(true)
|
}
|
})
|
}
|
@Emit('mapFlag')
|
private flagSend(flag: boolean) {
|
return flag;
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.modalStyle {
|
.ant-modal {
|
margin-left: 25%;
|
}
|
.ant-modal-content {
|
width: 800px;
|
}
|
}
|
</style>
|
