529 lines
13 KiB
Vue
529 lines
13 KiB
Vue
<template>
|
|
<div class="detail">
|
|
<div class="top">
|
|
<AiPagePicker class="left" type="custom" @select="handleSelectGird"
|
|
:ops="{url:'./SelectGird',label: 'girdName'}">
|
|
<div class="gird-content">
|
|
<image src="./img/gird--select-icon.png" class="avatras"/>
|
|
<div class="label">{{ form.girdName || '网格选择' }}</div>
|
|
<u-icon name="arrow-right" color="#cccccc" size="26" style="margin-left:4px;"></u-icon>
|
|
</div>
|
|
</AiPagePicker>
|
|
<div class="grid-input">
|
|
<img src="./img/search-icon-w.png" class="search-icon">
|
|
<input class="input" placeholder="请输入网格名称" v-model="girdName" maxlength="20" confirm-type="search" @confirm="search"/>
|
|
<div class="clear-btn">
|
|
<img src="./img/del-icon.png" class="del-icon" v-if="girdName" @click="girdName = ''">
|
|
</div>
|
|
</div>
|
|
</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, index) in form.girdMemberManageList" :key="index">
|
|
<span class="label">网格长</span>
|
|
<span class="value">
|
|
<AiOpenData v-if="item.name" type="userName" :openid="item.name"/>
|
|
<!-- {{ item.phone }}
|
|
<img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(item.phone)" class="phone-icon"
|
|
v-if="item.phone"> -->
|
|
</span>
|
|
</div>
|
|
<div class="info-flex" v-for="(item, index) in form.girdMemberList" :key="index">
|
|
<span class="label">网格员</span>
|
|
<span class="value">
|
|
<AiOpenData v-if="item.name" type="userName" :openid="item.name"/>
|
|
<!-- {{ item.phone }}
|
|
<img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(item.phone)" class="phone-icon"
|
|
v-if="item.phone"> -->
|
|
</span>
|
|
</div>
|
|
<div class="info-flex" v-if="(form.girdMemberManageList && form.girdMemberManageList.length) || (form.girdMemberList && form.girdMemberList.length)">
|
|
<span class="label">管辖家庭</span>
|
|
<span class="value">{{ form.residentNum || 0 }}户</span>
|
|
</div>
|
|
</scroll-view>
|
|
</div>
|
|
</u-popup>
|
|
<u-popup v-model="isShowGrid" mode="bottom" border-radius="14" height="60%">
|
|
<div class="grid-wrapper">
|
|
<div class="title">请选择网格</div>
|
|
<scroll-view scroll-y="true" class="grid-info">
|
|
<div
|
|
class="grid-item"
|
|
v-for="(item, index) in girdList"
|
|
@click="form.girdName = item.girdName, getGridList(item.id)"
|
|
:key="index">
|
|
{{ item.girdName }}
|
|
</div>
|
|
</scroll-view>
|
|
</div>
|
|
</u-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from 'vuex'
|
|
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
areaId: '',
|
|
lib: null,
|
|
map: null,
|
|
show: false,
|
|
form: {girdName: '', id: ''},
|
|
treeList: [],
|
|
girdName: '',
|
|
showSelect: false,
|
|
editor: null,
|
|
polygons: [],
|
|
labels: [],
|
|
latLngCenter: [],
|
|
isShowGrid: false,
|
|
girdList: []
|
|
}
|
|
},
|
|
computed: {...mapState(['user'])},
|
|
created() {
|
|
this.areaId = this.user.areaId
|
|
|
|
uni.$on('goback', e => {
|
|
this.form.girdName = e.girdName
|
|
this.getGridList(e.id, true)
|
|
})
|
|
},
|
|
methods: {
|
|
handleSelectGird(v) {
|
|
this.form = v || {}
|
|
this.getGridList(v?.id, true)
|
|
},
|
|
toChoose() {
|
|
uni.navigateTo({
|
|
url: './SelectGird?isFormMap=1'
|
|
})
|
|
},
|
|
|
|
search () {
|
|
this.$loading()
|
|
this.$http.post(`/app/appgirdinfo/list?size=100&girdName=${this.girdName}`).then((res) => {
|
|
if (res.code === 0) {
|
|
if (res.data.records.length) {
|
|
this.girdList = res.data.records
|
|
this.isShowGrid = true
|
|
} else {
|
|
this.$u.toast('未查询到网格')
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
getLeafNodes() {
|
|
this.$http.post(`/app/appgirdinfo/queryGirdMemberGirdsById`).then((res) => {
|
|
if (res?.data) {
|
|
this.treeList = res.data
|
|
|
|
const arr = res.data.filter(v => v.points).map(e => {
|
|
return {
|
|
id: e.id,
|
|
girdName: e.girdName,
|
|
points: e.points.map(p => [p.lng, p.lat])
|
|
}
|
|
})
|
|
|
|
arr.length > 0 && this.renderGridMap(arr)
|
|
}
|
|
})
|
|
},
|
|
|
|
getGridList(id) {
|
|
this.$loading()
|
|
this.$http.post(`/app/appgirdinfo/queryChildGirdInfoByGirdId?girdId=${id}`).then((res) => {
|
|
if (res?.data) {
|
|
const arr = []
|
|
res.data.map(v => {
|
|
if (v.points) {
|
|
arr.push(
|
|
{
|
|
id: v.id,
|
|
girdName: v.girdName,
|
|
points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
|
|
}
|
|
)
|
|
if (this.latLngCenter.length) {
|
|
|
|
} else {
|
|
this.latLngCenter.push(v.points[0].lat, v.points[0].lng)
|
|
}
|
|
}
|
|
})
|
|
|
|
if (!arr.filter(v => v.points).length) {
|
|
return this.$u.toast('该网格还未标会')
|
|
}
|
|
this.isShowGrid = false
|
|
|
|
this.renderGridMap(arr.filter(v => v.points))
|
|
}
|
|
}).catch(() => {
|
|
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.length > 0 && 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) {
|
|
if (this.latLngCenter.length) {
|
|
map.setCenter(this.latLngCenter)
|
|
this.map.setZoom(14)
|
|
}
|
|
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) => {
|
|
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]))
|
|
|
|
var 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: 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})
|
|
},
|
|
handleSelect(e) {
|
|
if (e?.points?.length > 0) {
|
|
this.form = e
|
|
const points = e.points.map(e => new TMap.LatLng(e.lat, e.lng))
|
|
var position = TMap.geometry.computeCentroid(points)
|
|
this.map.setCenter(position)
|
|
this.map.setZoom(18)
|
|
} else {
|
|
this.$u.toast("所选网格没有标绘!")
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.detail {
|
|
height: 100%;
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.grid-wrapper {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
|
|
.title {
|
|
height: 80px;
|
|
line-height: 80px;
|
|
text-align: center;
|
|
color: #333;
|
|
font-size: 32px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
scroll-view {
|
|
height: calc(100% - 80px);
|
|
}
|
|
|
|
.grid-item {
|
|
height: 80px;
|
|
line-height: 80px;
|
|
padding: 0 24px;
|
|
text-align: center;
|
|
color: #333;
|
|
font-size: 28px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
border-bottom: 1px solid #eee;
|
|
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
|
|
&:active {
|
|
background: #eee;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top {
|
|
display: flex;
|
|
position: fixed;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
top: 96px;
|
|
left: 0;
|
|
z-index: 1111;
|
|
width: 100%;
|
|
height: 112px;
|
|
padding: 0 32px;
|
|
background: #FFF;
|
|
box-sizing: border-box;
|
|
|
|
.gird-content {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 32px;
|
|
height: 34px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.label {
|
|
max-width: 120px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: #666666;
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
|
|
.left {
|
|
flex: 1;
|
|
}
|
|
}
|
|
.grid-input {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 460px;
|
|
height: 64px;
|
|
background: #F5F5F5;
|
|
border-radius: 32px;
|
|
padding: 0 36px;
|
|
.search-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.input {
|
|
flex: 1;
|
|
height: 64px;
|
|
width: 100%;
|
|
font-size: 28px;
|
|
color: #666;
|
|
}
|
|
|
|
.back-icon {
|
|
width: 16px;
|
|
height: 32px;
|
|
margin-right: 24px;
|
|
vertical-align: super;
|
|
}
|
|
|
|
.clear-btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.del-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
|
|
.map-content {
|
|
position: fixed;
|
|
top: 96px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: calc(100vh - 96px);
|
|
}
|
|
|
|
.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;
|
|
|
|
.phone-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
vertical-align: sub;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
div {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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>
|