You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
269 lines
7.9 KiB
269 lines
7.9 KiB
<template>
|
|
<div>
|
|
<div>
|
|
<div ref="lxHeader">
|
|
<lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="客户地图">
|
|
<div slot="content"></div>
|
|
|
|
<slot>
|
|
<div class="xy-table-item-content">
|
|
<el-cascader
|
|
:value="selector.area_id"
|
|
style="width: 200px;"
|
|
placeholder="区域选择"
|
|
:options="areas"
|
|
:props="{
|
|
label:'value',
|
|
value:'id',
|
|
emitPath:false
|
|
}"
|
|
@change="areaClick"
|
|
>
|
|
</el-cascader>
|
|
</div>
|
|
<!-- <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>-->
|
|
</slot>
|
|
</lx-header>
|
|
</div>
|
|
</div>
|
|
|
|
<el-amap vid="amapContainer" :amap-manager="amapManager"
|
|
class="amap" :style="{'height':height+'px'}">
|
|
</el-amap>
|
|
|
|
<el-card v-show="isShowCard" :style="{'position':'fixed','left':cardDom.x+'px','top':cardDom.y+'px','z-index':99999}">
|
|
<div v-if="select.info">
|
|
<div>
|
|
<span style="font-weight: 600;padding-right: 20px">{{ select.info.name }}</span>
|
|
<span>{{ select.info.sex }}</span>
|
|
</div>
|
|
<div>
|
|
<span v-if="select.info.level_type_detail" style="padding-right: 20px">{{ select.info.level_type_detail.value }}</span>
|
|
<span v-if="select.info.level_detail">{{ select.info.level_detail.value }}</span>
|
|
</div>
|
|
<div>
|
|
<i class="el-icon-phone" style="padding-right: 10px;"></i>
|
|
{{ select.info.phone }}
|
|
</div>
|
|
<div>
|
|
<i class="el-icon-location" style="padding-right: 10px;"></i>
|
|
{{ 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>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getparameter } from '@/api/system/dictionary'
|
|
import { AMapManager,lazyAMapApiLoaderInstance } from 'vue-amap'
|
|
import { getList } from '@/api/customer'
|
|
|
|
const amapManager = new AMapManager()
|
|
export default {
|
|
data() {
|
|
return {
|
|
areaMap:new Map(),
|
|
selector: {
|
|
page: 1,
|
|
page_size: 9999,
|
|
keyword: '',
|
|
area_id:''
|
|
},
|
|
height:0,
|
|
amapManager,
|
|
district:'',
|
|
customers:[],
|
|
markers:[],
|
|
polygons:[],
|
|
areas:[],
|
|
|
|
isShowCard:false,
|
|
select:'',
|
|
cardDom:{x:0,y:0}
|
|
}
|
|
},
|
|
methods: {
|
|
async getAreas(){
|
|
let city = await getparameter({
|
|
number: 'city'
|
|
}, false)
|
|
for (let i = 0; i < city.detail.length; i++) {
|
|
let area = await getparameter({
|
|
pid: city.detail[i].id
|
|
}, false)
|
|
city.detail[i].children = area.detail
|
|
}
|
|
|
|
this.areas = city.detail
|
|
|
|
this.areas.forEach(item1 => {
|
|
this.areaMap.set(item1.id,item1.remark)
|
|
|
|
if(item1.children && item1.children.length > 0){
|
|
item1.children.forEach(item2 => {
|
|
this.areaMap.set(item2.id,item2.remark)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
async areaClick(e){
|
|
this.selector.area_id = e
|
|
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 = '常州市'){
|
|
let cityArr = district.split(',')
|
|
cityArr.forEach(item => {
|
|
this.district.search(item,(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)
|
|
}
|
|
})
|
|
})
|
|
// 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; //查询 头部
|
|
let paginationHeight = 37; //分页的高度
|
|
let topHeight = 50; //页面 头部
|
|
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20 - 25;
|
|
this.height = tableHeight ?? 600
|
|
},
|
|
|
|
async getCustomers(){
|
|
let res = await getList(this.selector)
|
|
this.customers = res.data.data.map(item => {
|
|
let address = item.customer_address.filter(item => item.default === 1)[0] ? item.customer_address.filter(item => item.default === 1)[0] : item.customer_address[0]
|
|
return {
|
|
name:item.name,
|
|
address:address?.address,
|
|
lng:Number(address?.lng || 0),
|
|
lat:Number(address?.lat || 0),
|
|
info:item
|
|
}
|
|
})
|
|
console.log(this.customers)
|
|
},
|
|
|
|
drawMarkers(){
|
|
this.markers = []
|
|
for(let i of this.customers){
|
|
let marker = new AMap.Marker({
|
|
draggable:false,
|
|
cursor:'pointer',
|
|
position:[i.lng,i.lat],
|
|
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) => {
|
|
this.cardDom.x = e.originEvent.clientX
|
|
this.cardDom.y = e.originEvent.clientY
|
|
this.select = i
|
|
this.isShowCard = true
|
|
})
|
|
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.areaMap.get(this.selector.area_id) || '常州市')
|
|
},
|
|
},
|
|
|
|
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.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;
|
|
}
|
|
::v-deep .ivu-modal-footer{
|
|
border: none !important;
|
|
}
|
|
.amap{
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
<style>
|
|
.amap-marker-label{
|
|
border-color: #B3241D !important;
|
|
}
|
|
</style>
|