西城
This commit is contained in:
liuye
321
src/project/xicheng/AppMerchantMap/AppMerchantMap.vue
Normal file
321
src/project/xicheng/AppMerchantMap/AppMerchantMap.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<div class="AppMerchantMap">
|
||||
<div class="grid-select">
|
||||
<AiPagePicker type="gird" class="fill" @select="handleSelectGird">
|
||||
<div class="gird-content">
|
||||
<div class="label">网格选择</div>
|
||||
<div class="grid-select__right">
|
||||
<span>{{ form.girdName || '请选择' }}</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="26" style="margin-left:4px;"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</AiPagePicker>
|
||||
</div>
|
||||
<div class="map-content">
|
||||
<AiTMap ref="AiTMap" :map.sync="map" :lib.sync="lib" :libraries="['geometry','service', 'tools']"/>
|
||||
</div>
|
||||
<u-popup v-model="show" mode="bottom" border-radius="14">
|
||||
<div class="popup">
|
||||
<div class="bg"></div>
|
||||
<div class="title">{{ form.girdName }}</div>
|
||||
<scroll-view scroll-y="true" class="grid-info">
|
||||
<div class="info-flex" v-for="(item) in form.girdMemberManageList" :key="item.id" flex>
|
||||
<div class="label">网格长</div>
|
||||
<div class="value fill" v-text='[item.name, item.phone].join(" ")'/>
|
||||
<AiPhone :phone="item.phone"/>
|
||||
</div>
|
||||
<div class="info-flex" v-for="(item) in form.girdMemberList" :key="item.id" flex>
|
||||
<div class="label">网格员</div>
|
||||
<div class="value fill" v-text='[item.name, item.phone].join(" ")'/>
|
||||
<AiPhone :phone="item.phone"/>
|
||||
</div>
|
||||
</scroll-view>
|
||||
</div>
|
||||
</u-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'AppMerchantMap',
|
||||
appName: '商户地图',
|
||||
data() {
|
||||
return {
|
||||
areaId: '',
|
||||
lib: null,
|
||||
map: null,
|
||||
show: false,
|
||||
form: {girdName: '', id: ''},
|
||||
treeList: [],
|
||||
showSelect: false,
|
||||
editor: null,
|
||||
polygons: [],
|
||||
labels: []
|
||||
}
|
||||
},
|
||||
computed: {...mapState(['user', 'config'])},
|
||||
created() {
|
||||
this.$dict.load('girdType')
|
||||
this.areaId = this.user.areaId
|
||||
},
|
||||
onShow() {
|
||||
document.title = "网格管理"
|
||||
},
|
||||
methods: {
|
||||
getGridList(id) {
|
||||
this.$loading()
|
||||
this.$http.post(`/app/appgirdinfo/queryChildGirdInfoByGirdId?girdId=${id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
const arr = res.data.map(v => {
|
||||
return {
|
||||
id: v.id,
|
||||
girdName: v.girdName,
|
||||
points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
|
||||
}
|
||||
})
|
||||
this.renderGridMap(arr)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.$hideLoading()
|
||||
})
|
||||
},
|
||||
getGridInfo(id, flag) {
|
||||
this.$loading()
|
||||
this.$http.post(`/app/appgirdinfo/queryDetailById?id=${id}`).then((res) => {
|
||||
this.$hideLoading()
|
||||
if (res?.data) {
|
||||
this.form = res.data
|
||||
|
||||
if (res.data.points && flag) {
|
||||
const arr = [{
|
||||
id: res.data.id,
|
||||
girdName: res.data.girdName,
|
||||
points: res.data.points.map(p => [p.lng, p.lat])
|
||||
}]
|
||||
|
||||
this.renderGridMap(arr)
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
!flag && (this.show = true)
|
||||
})
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$hideLoading()
|
||||
})
|
||||
},
|
||||
renderGridMap(paths, count = 0) {
|
||||
let {map, lib: TMap, $refs: {AiTMap: {fitBounds}}} = this
|
||||
if (TMap) {
|
||||
const colors = ["#A194F4", "#7CBDF3", "#F3A57D", "#62D063", "#58DBDA", "#F7D151"]
|
||||
if (this.polygons.length > 0) {
|
||||
this.polygons.forEach(e => e.destroy())
|
||||
this.labels.forEach(e => {
|
||||
e.destroy(e.id)
|
||||
})
|
||||
this.polygons = []
|
||||
this.labels = []
|
||||
}
|
||||
if (paths?.length > 0) {
|
||||
let bounds = []
|
||||
paths.forEach((path, i) => {
|
||||
if (path.points?.length > 0) {
|
||||
let polygon = new TMap.MultiPolygon({
|
||||
map, styles: {
|
||||
default: new TMap.PolygonStyle({
|
||||
showBorder: true,
|
||||
borderColor: '#5088FF',
|
||||
borderWidth: 2,
|
||||
color: this.$colorUtils.Hex2RGBA('#5088FF', 0.1)
|
||||
})
|
||||
},
|
||||
id: path.id,
|
||||
geometries: [{paths: path.points.map(e => new TMap.LatLng(e[1], e[0]))}]
|
||||
})
|
||||
this.polygons.push(polygon)
|
||||
bounds.push(fitBounds(path.points.map(e => new TMap.LatLng(e[1], e[0]))))
|
||||
polygon.on('click', e => {
|
||||
const id = e.target.id
|
||||
this.getGridInfo(id)
|
||||
})
|
||||
const points = path.points.map(e => new TMap.LatLng(e[1], e[0]))
|
||||
const position = TMap.geometry.computeCentroid(points)
|
||||
let label = new TMap.MultiLabel({
|
||||
id: `label~${path.id}`,
|
||||
data: path.id,
|
||||
map: map,
|
||||
styles: {
|
||||
building: new TMap.LabelStyle({
|
||||
color: '#3777FF',
|
||||
size: 20,
|
||||
alignment: 'center',
|
||||
verticalAlignment: 'middle'
|
||||
})
|
||||
},
|
||||
geometries: [
|
||||
{
|
||||
id: `label-class-${i}`,
|
||||
styleId: 'building',
|
||||
position,
|
||||
content: path.girdName,
|
||||
}
|
||||
]
|
||||
})
|
||||
this.labels.push(label)
|
||||
label.on('click', e => {
|
||||
this.getGridInfo(e.target.id.split('~')[1])
|
||||
});
|
||||
}
|
||||
})
|
||||
bounds = bounds.reduce((a, b) => {
|
||||
return fitBounds([
|
||||
a.getNorthEast(),
|
||||
a.getSouthWest(),
|
||||
b.getNorthEast(),
|
||||
b.getSouthWest(),
|
||||
]);
|
||||
});
|
||||
map.fitBounds(bounds, {padding: 100})
|
||||
} else {
|
||||
map.setCenter(this.config.latlng)
|
||||
}
|
||||
|
||||
} else {
|
||||
if (count < 5) {
|
||||
setTimeout(() => {
|
||||
this.renderGridMap(paths, ++count)
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
},
|
||||
callPhone(phone) {
|
||||
uni.makePhoneCall({phoneNumber: phone})
|
||||
},
|
||||
handleSelectGird(v) {
|
||||
this.form = v || {}
|
||||
this.getGridList(v?.id, true)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
uni-page-body{
|
||||
height: 100%;
|
||||
}
|
||||
.AppMerchantMap {
|
||||
height: 100%;
|
||||
|
||||
.grid-select {
|
||||
width: 100%;
|
||||
padding: 34px 32px;
|
||||
box-sizing: border-box;
|
||||
background: #FFF;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 44px;
|
||||
color: #333;
|
||||
|
||||
.grid-select__right {
|
||||
width: calc(100% - 140px);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.gird-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex-shrink: 0;
|
||||
width: 140px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 28px;
|
||||
|
||||
.u-icon {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.map-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 210px);
|
||||
}
|
||||
|
||||
.popup {
|
||||
padding: 0 32px 16px;
|
||||
|
||||
.bg {
|
||||
width: 64px;
|
||||
height: 10px;
|
||||
background: #CCC;
|
||||
border-radius: 6px;
|
||||
margin: 32px auto 32px auto;
|
||||
}
|
||||
|
||||
.grid-info {
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36px;
|
||||
font-family: PingFang-SC-Heavy, PingFang-SC;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
line-height: 50px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.info-flex {
|
||||
padding: 26px 0 30px 0;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #D8DDE6;
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
width: 160px;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #666;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99999;
|
||||
display: flex;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
text-align: center;
|
||||
|
||||
.btn {
|
||||
flex: 2;
|
||||
background: #1365DD;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user