|
|
|
|
@ -6,6 +6,10 @@
|
|
|
|
|
<div slot="content"></div>
|
|
|
|
|
|
|
|
|
|
<slot>
|
|
|
|
|
<el-select v-model="selectArea" size="small" placeholder="请选择区域" @change="areaClick">
|
|
|
|
|
<el-option v-for="item in areas" :key="item.id" value-key="id" :value="item" :label="item.value">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
<!-- <Input placeholder="关键字搜索" v-model="selector.keyword" style="width: 200px; margin-right: 10px" />-->
|
|
|
|
|
|
|
|
|
|
<!-- <Button style="margin-left: 10px" type="primary" @click="selector.page = 1,getCustomers()">查询</Button>-->
|
|
|
|
|
@ -34,7 +38,10 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<i class="el-icon-location" style="padding-right: 10px;"></i>
|
|
|
|
|
{{ select.address }}
|
|
|
|
|
{{ select.info.city_detail ? select.info.city_detail.value : '' }} {{ select.info.area_detail ? select.info.area_detail.value : '' }} {{ select.info.street_detail ? select.info.street_detail.value : '' }}
|
|
|
|
|
<div>
|
|
|
|
|
{{ select.address }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
@ -42,6 +49,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { getparameter } from '@/api/system/dictionary'
|
|
|
|
|
import { AMapManager,lazyAMapApiLoaderInstance } from 'vue-amap'
|
|
|
|
|
import { getList } from '@/api/customer'
|
|
|
|
|
|
|
|
|
|
@ -49,14 +57,20 @@ const amapManager = new AMapManager()
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
selectArea:{},
|
|
|
|
|
selector: {
|
|
|
|
|
page: 1,
|
|
|
|
|
page_size: 9999,
|
|
|
|
|
keyword: ''
|
|
|
|
|
keyword: '',
|
|
|
|
|
area_id:''
|
|
|
|
|
},
|
|
|
|
|
height:0,
|
|
|
|
|
amapManager,
|
|
|
|
|
district:'',
|
|
|
|
|
customers:[],
|
|
|
|
|
markers:[],
|
|
|
|
|
polygons:[],
|
|
|
|
|
areas:[],
|
|
|
|
|
|
|
|
|
|
isShowCard:false,
|
|
|
|
|
select:'',
|
|
|
|
|
@ -64,6 +78,50 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
async getAreas(){
|
|
|
|
|
let res = await getparameter({number:'serveArea'})
|
|
|
|
|
this.areas = res.detail
|
|
|
|
|
console.log(this.areas)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async areaClick(e){
|
|
|
|
|
this.selector.area_id = e.id
|
|
|
|
|
await this.getCustomers()
|
|
|
|
|
this.draw()
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
initDistrict(){
|
|
|
|
|
if(!this.district){
|
|
|
|
|
let opts = {
|
|
|
|
|
subdistrict: 0, //获取边界不需要返回下级行政区
|
|
|
|
|
extensions: "all", //返回行政区边界坐标组等具体信息
|
|
|
|
|
level: "district", //查询行政级别为 市
|
|
|
|
|
}
|
|
|
|
|
this.district = new AMap.DistrictSearch(opts)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
drawPolygon(district = '常州市'){
|
|
|
|
|
this.district.search(district,(status,res) => {
|
|
|
|
|
console.log(res,status)
|
|
|
|
|
if(res.districtList){
|
|
|
|
|
this.polygons = []
|
|
|
|
|
let bounds = res.districtList[0].boundaries
|
|
|
|
|
for(let i = 0,l = bounds.length; i < l; i++){
|
|
|
|
|
let polygon = new AMap.Polygon({
|
|
|
|
|
strokeWeight: 1,
|
|
|
|
|
path: bounds[i],
|
|
|
|
|
fillOpacity: 0.4,
|
|
|
|
|
fillColor: "rgba(225,121,110,0.92)",
|
|
|
|
|
strokeColor: "#a53227",
|
|
|
|
|
})
|
|
|
|
|
this.polygons.push(polygon)
|
|
|
|
|
}
|
|
|
|
|
this.map.add(this.polygons)
|
|
|
|
|
this.map.setFitView(this.polygons)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
initLoad() {
|
|
|
|
|
let clientHeight = document.documentElement.clientHeight
|
|
|
|
|
let lxHeader_height = 96.5; //查询 头部
|
|
|
|
|
@ -88,14 +146,15 @@ export default {
|
|
|
|
|
console.log(this.customers)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
markers(){
|
|
|
|
|
drawMarkers(){
|
|
|
|
|
this.markers = []
|
|
|
|
|
for(let i of this.customers){
|
|
|
|
|
let marker = new AMap.Marker({
|
|
|
|
|
draggable:false,
|
|
|
|
|
cursor:'pointer',
|
|
|
|
|
position:[i.lng,i.lat],
|
|
|
|
|
icon:require('../../assets/customer.png'),
|
|
|
|
|
label: {content:i.name,offset:new AMap.Pixel(0,34)},
|
|
|
|
|
icon:i.info.sex === '女' ? require('../../assets/female.png') : require('../../assets/male.png'),
|
|
|
|
|
label: {content:i.name,offset:new AMap.Pixel(0,30)},
|
|
|
|
|
clickable:true,
|
|
|
|
|
})
|
|
|
|
|
marker.on('mouseover',(e) => {
|
|
|
|
|
@ -107,26 +166,40 @@ export default {
|
|
|
|
|
marker.on('mouseout',e => {
|
|
|
|
|
this.isShowCard = false
|
|
|
|
|
})
|
|
|
|
|
this.markers.push(marker)
|
|
|
|
|
marker.setMap(this.map)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
draw(){
|
|
|
|
|
this.map.remove(this.polygons)
|
|
|
|
|
this.map.remove(this.markers)
|
|
|
|
|
this.drawMarkers()
|
|
|
|
|
this.drawPolygon(this.selectArea.remark || '常州市')
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async mounted() {
|
|
|
|
|
await this.getCustomers()
|
|
|
|
|
lazyAMapApiLoaderInstance.load().then(() => {
|
|
|
|
|
this.map = new AMap.Map('amapContainer',{
|
|
|
|
|
center:[Number(this.customers[0]?.lng || 119.58),Number(this.customers[0]?.lat || 31.47)]
|
|
|
|
|
})
|
|
|
|
|
this.markers()
|
|
|
|
|
this.initDistrict()
|
|
|
|
|
this.draw()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.initLoad()
|
|
|
|
|
this.getAreas()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
::v-deep .amap-icon img{
|
|
|
|
|
height: 24px;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-card__body{
|
|
|
|
|
padding: 10px !important;
|
|
|
|
|
}
|
|
|
|
|
|
