地图聚合
This commit is contained in:
@@ -32,7 +32,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</fd-card>
|
||||
<fd-card class="mar-t14" label="志愿者" v-loading="fraternityLoading">
|
||||
<fd-card class="mar-t14" label="志愿者">
|
||||
<div class="jumpBtn" slot="right" @click="handleJump">前往志愿者平台
|
||||
<div class="el-icon-position"/>
|
||||
</div>
|
||||
@@ -172,6 +172,31 @@ const tableConfigs = {
|
||||
const genderDict = {
|
||||
1: '男', 2: '女', 3: '未知', 0: '未知'
|
||||
}
|
||||
const getCluster = (points, options = {big: {}, normal: {}}, num = 10) => {
|
||||
const big = [], {distance = 0.05} = options
|
||||
const pointInsideCircle = (point, circle, r) => {
|
||||
if (r === 0) return false
|
||||
const dx = circle[0] - point[0]
|
||||
const dy = circle[1] - point[1]
|
||||
return dx * dx + dy * dy <= r * r
|
||||
}
|
||||
return points.map(e => {
|
||||
e.coord = e.coord.map(c => Number(c))
|
||||
if (big.length == 0 ||
|
||||
!big.find(b => pointInsideCircle(e.coord, b, distance)) && big.length < num) {
|
||||
big.push(e.coord)
|
||||
return {
|
||||
...e,
|
||||
...options.big,
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
...e,
|
||||
...options.normal
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "AppBIBoard",
|
||||
@@ -308,7 +333,6 @@ export default {
|
||||
detail: {},
|
||||
areaStaType: 'grid',
|
||||
fraternities: [],
|
||||
fraternityLoading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -388,16 +412,18 @@ export default {
|
||||
getData(c = 0) {
|
||||
const {areaId} = this.$data
|
||||
if (areaId) {
|
||||
this.getMiniAppInfo()
|
||||
this.getRealTimeDynamic(areaId)
|
||||
this.getWxGroupOverview(areaId)
|
||||
this.getGdyh(areaId)
|
||||
this.getMapData(areaId)
|
||||
this.fraternityLoading = true
|
||||
const loading = this.$loading({
|
||||
text: "正在加载数据...",
|
||||
background: 'rgba(0,0,0,.91)',
|
||||
})
|
||||
Promise.all([
|
||||
this.getFraternitySta(areaId),
|
||||
this.getFraternities(areaId)
|
||||
]).finally(() => this.fraternityLoading = false)
|
||||
this.getMiniAppInfo(),
|
||||
this.getRealTimeDynamic(areaId),
|
||||
this.getWxGroupOverview(areaId),
|
||||
this.getGdyh(areaId),
|
||||
this.getFraternitySta(this.transferAreaCode(areaId)),
|
||||
this.getFraternities(this.transferAreaCode(areaId)).then(() => this.getMapData(areaId))
|
||||
]).finally(() => loading.close())
|
||||
} else if (c < 10) setTimeout(() => this.getData(++c), 500)
|
||||
else console.error(`尝试${c}次加载数据,无法过去数据`)
|
||||
},
|
||||
@@ -484,11 +510,14 @@ export default {
|
||||
initMap.then(() => {
|
||||
this.map.clear()
|
||||
this.$refs.map.init()
|
||||
const {records} = res.data
|
||||
const {records} = res.data,
|
||||
fraternities = this.fraternities.filter(e => !!e.longtitude)
|
||||
this.map.on('click', e => {
|
||||
console.log(e)
|
||||
if (e.data?.marker == 'store') {//点击店铺
|
||||
this.getMapStore(e.data)
|
||||
} else if (e.data?.marker == 'fraternity') {//点击互助会
|
||||
this.getMapFraternityData(e.data)
|
||||
} else if (e.data?.unique_id) {//点击地区
|
||||
this.getMapArea(e.data)
|
||||
}
|
||||
@@ -501,16 +530,40 @@ export default {
|
||||
show: true,
|
||||
position: 'right',
|
||||
formatter: '{b}',
|
||||
distance: 2
|
||||
distance: 2,
|
||||
},
|
||||
data: records.map(e => ({
|
||||
...e,
|
||||
marker: 'store',
|
||||
coord: [e.lng, e.lat],
|
||||
name: e.title,
|
||||
label: {color: "#FECA86"},
|
||||
symbol: "image://https://cdn.cunwuyun.cn/fengdu/fdStoreIcon.png",
|
||||
}))
|
||||
data: [
|
||||
...getCluster(records.filter(e => !!e.lng).map(e => ({
|
||||
...e,
|
||||
marker: 'store',
|
||||
coord: [e.lng, e.lat],
|
||||
name: e.title,
|
||||
label: {color: "#FECA86"},
|
||||
})), {
|
||||
big: {symbol: "image://https://cdn.cunwuyun.cn/fengdu/fdStoreIcon.png"},
|
||||
normal: {
|
||||
itemStyle: {color: "#FECA86"},
|
||||
label: {show: false, emphasis: {show: true, color: "#FECA86"}},
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
}
|
||||
}),
|
||||
...getCluster(fraternities.map(e => ({
|
||||
...e,
|
||||
marker: 'fraternity',
|
||||
coord: [e.longtitude, e.latitude],
|
||||
name: e.fraternity_name,
|
||||
label: {color: "#70FF8A"},
|
||||
})), {
|
||||
big: {symbol: "image://https://cdn.cunwuyun.cn/fengdu/fdFraternitIcon.png"},
|
||||
normal: {
|
||||
itemStyle: {color: "#70FF8A"},
|
||||
label: {show: false, emphasis: {show: true, color: "#70FF8A"}},
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
}
|
||||
})
|
||||
],
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -539,6 +592,13 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
getMapFraternityData(area) {
|
||||
console.log(area)
|
||||
this.instance.get("/hzh/find-fraternity-detail", {params: {page_size: 999, area_code: undefined}}).then(res => {
|
||||
if (res?.data) {
|
||||
}
|
||||
})
|
||||
},
|
||||
handleRealtimeEventDialog({rowIndex}) {
|
||||
const row = this.realtimeEvents.meta[rowIndex]
|
||||
if (row.bizId) {
|
||||
@@ -619,8 +679,8 @@ export default {
|
||||
window.open("http://datas.fdxjtjyhzzyfw.cn/")
|
||||
},
|
||||
getVolunteerData(area_code) {
|
||||
area_code = area_code.substring(0, 8)
|
||||
this.instance.get("/hzh/find-volunteer-list-detail", {
|
||||
area_code = this.transferAreaCode(area_code)
|
||||
return this.instance.get("/hzh/find-volunteer-list-detail", {
|
||||
params: {
|
||||
page_size: 40,
|
||||
area_code,
|
||||
@@ -636,17 +696,16 @@ export default {
|
||||
})
|
||||
},
|
||||
getFraternities(area_code) {
|
||||
area_code = area_code.substring(0, 8)
|
||||
this.instance.get("/hzh/find-fraternity-detail", {params: {page_size: 999, area_code}}).then(res => {
|
||||
return this.instance.get("/hzh/find-fraternity-detail", {params: {page_size: 999, area_code}}).then(res => {
|
||||
if (res?.data) {
|
||||
this.fraternity = res.data[0]?.fraternity_name
|
||||
this.fraternities = res.data
|
||||
return this.fraternities = res.data || []
|
||||
}
|
||||
})
|
||||
},
|
||||
getFraternitySta(area_code) {
|
||||
area_code = area_code.substring(0, 8)
|
||||
this.instance.get("/hzh/count-vol-team", {params: {page_size: 999, area_code}}).then(res => {
|
||||
return this.instance.get("/hzh/count-vol-team", {params: {page_size: 999, area_code}}).then(res => {
|
||||
if (res?.data) {
|
||||
let 团队数量 = 0, 志愿者数量 = 0, 服务学员数量 = 0
|
||||
res.data.forEach(e => {
|
||||
@@ -657,6 +716,10 @@ export default {
|
||||
this.volunteers = {团队数量, 志愿者数量, 服务学员数量}
|
||||
}
|
||||
})
|
||||
},
|
||||
transferAreaCode(code) {//与互助会地区编码互通
|
||||
const format = str => Number(str).toString().padStart(2, '0')
|
||||
return code.substring(0, 6) + format(code.substring(6, 9))
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
Reference in New Issue
Block a user