网格管理
This commit is contained in:
liuye
@@ -331,7 +331,7 @@ export default {
|
||||
addMakert(points) {
|
||||
this.$nextTick(() =>{
|
||||
let {lib: TMap, map} = this
|
||||
var center = new TMap.LatLng(this.latLngCenter.lat, this.latLngCenter.lng)
|
||||
var center = new TMap.LatLng(this.latLngCenter.lat, this.latLngCenter.lng)
|
||||
map.setCenter(center)
|
||||
var marker = null;
|
||||
map.setZoom(18)
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
<template>
|
||||
<div class="detail">
|
||||
<div class="grid-select" @click="show=true">
|
||||
<div class="grid-select">
|
||||
<span class="label">网格选择</span>
|
||||
<div class="value">
|
||||
<!-- <span>新里程社区居委会</span> -->
|
||||
<ai-tree-picker :ops="treeList" v-model="form.postFunctionId" @select="handerSelect">
|
||||
<div :style="{ color: form.postFunction ? '' : '#c0c4cc' }" v-text="form.postFunction || '请选择社区居委会'" />
|
||||
</ai-tree-picker>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
|
||||
<AiTreePicker :ops="treeList" v-model="form.id" @select="handerSelect">
|
||||
<div class="grid-name" :style="{ color: form.gridName ? '' : '#c0c4cc' }">{{form.gridName || '请选择社区居委会'}} <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon></div>
|
||||
</AiTreePicker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-content">
|
||||
@@ -33,6 +32,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</u-popup>
|
||||
|
||||
<u-select v-model="showSelect" mode="mutil-column-auto" :list="treeList" child-name="girdList" label-name="girdName" value-name="id" @confirm="confirm"></u-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -47,80 +48,80 @@ export default {
|
||||
lib: '',
|
||||
map: null,
|
||||
show: false,
|
||||
form: {},
|
||||
treeList: []
|
||||
form: {gridName: '', id: ''},
|
||||
treeList: [],
|
||||
showSelect: false,
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
computed: { ...mapState(['user']) },
|
||||
mounted() {
|
||||
this.areaId = this.user.areaId
|
||||
this.initMap()
|
||||
this.getTreeList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
handerSelect() {
|
||||
|
||||
handerSelect(e) {
|
||||
console.log(e)
|
||||
this.form.gridName = e.girdName
|
||||
this.form.id = e.id
|
||||
this.initMap(e.points)
|
||||
},
|
||||
initMap() {
|
||||
initMap(points) {
|
||||
//初始化地图
|
||||
|
||||
this.$nextTick(() =>{
|
||||
let {lib: TMap, map} = this
|
||||
var center = new TMap.LatLng(40.040422, 116.273521)
|
||||
var marker = null;
|
||||
var points = []
|
||||
var center = new TMap.LatLng(points[0].lat, points[0].lng)
|
||||
map.setCenter(center)
|
||||
map.setZoom(18)
|
||||
map.setZoom(15)
|
||||
|
||||
marker = new TMap.MultiMarker({
|
||||
id: 'marker-layer', // 图层id
|
||||
map: map,
|
||||
styles: {
|
||||
// 点标注的相关样式
|
||||
marker: new TMap.MarkerStyle({
|
||||
width: 25,
|
||||
height: 35,
|
||||
anchor: { x: 16, y: 32 },
|
||||
src:'',
|
||||
}),
|
||||
},
|
||||
geometries: [
|
||||
console.log(points)
|
||||
var simplePath = []
|
||||
|
||||
points.map((item) => {
|
||||
var info = new TMap.LatLng(item.lat, item.lng)
|
||||
simplePath.push(info)
|
||||
})
|
||||
|
||||
// 初始化几何图形及编辑器
|
||||
this.editor = new TMap.tools.GeometryEditor({
|
||||
map, // 编辑器绑定的地图对象
|
||||
overlayList: [ // 可编辑图层
|
||||
{
|
||||
// 点标注数据数组
|
||||
id: 'demo',
|
||||
styleId: 'marker',
|
||||
position: new TMap.LatLng(40.040422, 116.273521),
|
||||
},
|
||||
overlay: new TMap.MultiPolygon({
|
||||
map,
|
||||
styles: {
|
||||
highlight: new TMap.PolygonStyle({
|
||||
color: 'rgba(255, 255, 0, 0.6)'
|
||||
})
|
||||
},
|
||||
geometries: [
|
||||
{
|
||||
paths: simplePath
|
||||
},
|
||||
]
|
||||
}),
|
||||
id: 'polygon',
|
||||
selectedStyleId: 'highlight'
|
||||
}
|
||||
],
|
||||
actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
|
||||
activeOverlayId: 'polygon', // 激活图层
|
||||
selectable: true, // 开启点选功能
|
||||
snappable: true // 开启吸附
|
||||
});
|
||||
|
||||
var infoWindow = null;
|
||||
var infoWindow2 = null
|
||||
var html = `<div style=" display: inline-block;padding: 6px 10px;line-height: 16px;border-radius: 24px; background: #5088FF;color: #fff;font-size: 12px;position: relative;">`
|
||||
+`腾讯大厦<span style=" width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #5088FF;position: absolute;bottom: -12px;left: 50%;margin-left:-6px;"></span></div>`
|
||||
|
||||
infoWindow = new TMap.InfoWindow(
|
||||
{
|
||||
map: map,
|
||||
enableCustom: true,
|
||||
position: new TMap.LatLng(40.040422, 116.273521),
|
||||
offset: { y: -70, x: -5 },
|
||||
content: html
|
||||
},
|
||||
);
|
||||
|
||||
infoWindow2 = new TMap.InfoWindow(
|
||||
{
|
||||
map: map,
|
||||
enableCustom: true,
|
||||
position: new TMap.LatLng(40.03592, 116.27058),
|
||||
offset: { y: -70, x: -5 },
|
||||
content: html
|
||||
},
|
||||
);
|
||||
})
|
||||
|
||||
},
|
||||
getTreeList() {
|
||||
this.$http.post(`/app/appgirdinfo/listAll`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.treeList = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -202,4 +203,7 @@ ai-tree-picker{
|
||||
}
|
||||
}
|
||||
}
|
||||
.grid-name{
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@@ -4,18 +4,18 @@
|
||||
<div slot="btn" @tap="handleInit">
|
||||
<slot v-if="$slots.default" />
|
||||
<div v-else class="areaSelector">
|
||||
<u-input v-model="currentSelected.name" disabled class="noEvents" />
|
||||
<u-input v-model="currentSelected.girdName" disabled class="noEvents" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="areaSelector">
|
||||
<div class="fixedTop">
|
||||
<span v-text="'全部'" :class="{ current: !index }" @click="selectNode({}, -1)" />
|
||||
<span v-for="(area, i) in fullSelected" :key="area.id" v-text="area.name" :class="{ current: area.id == index }" @click="selectNode(area, i)" />
|
||||
<span v-for="(area, i) in fullSelected" :key="area.id" v-text="area.girdName" :class="{ current: area.id == index }" @click="selectNode(area, i)" />
|
||||
</div>
|
||||
<span class="placeholder" v-text="currentSelected.name" />
|
||||
<span class="placeholder" v-text="currentSelected.girdName" />
|
||||
</div>
|
||||
<div class="pendingItem flexRow" flex v-for="op in list" :key="op.id">
|
||||
<div class="fill" :class="{ self: index == op.id }" v-html="op.name" @tap="handleSelect(op)" />
|
||||
<div class="fill" :class="{ self: index == op.id }" v-html="op.girdName" @tap="handleSelect(op)" />
|
||||
<u-icon v-if="showArrow(op)" name="arrow-right" color="#ddd" @click="getChild(op)" />
|
||||
</div>
|
||||
</AiSearchPopup>
|
||||
@@ -51,8 +51,8 @@ export default {
|
||||
while (meta.length > 0) {
|
||||
let p = meta.shift()
|
||||
origin.push(p)
|
||||
if (p.children?.length > 0) {
|
||||
meta.push(p.children.map((c) => ({ ...c, parent: p.id })))
|
||||
if (p.girdList?.length > 0) {
|
||||
meta.push(p.girdList.map((c) => ({ ...c, parent: p.id })))
|
||||
}
|
||||
}
|
||||
return origin.flat()
|
||||
@@ -82,12 +82,12 @@ export default {
|
||||
this.fullSelected = pend.reverse()
|
||||
}
|
||||
},
|
||||
getChildren(id) {
|
||||
if (id) this.list = this.origin?.find((e) => e.id == id)?.children || []
|
||||
getgirdList(id) {
|
||||
if (id) this.list = this.origin?.find((e) => e.id == id)?.girdList || []
|
||||
else this.list = this.ops
|
||||
},
|
||||
handleSelect(op) {
|
||||
if (op.children?.length > 0) {
|
||||
if (op.girdList?.length > 0) {
|
||||
this.getChild(op)
|
||||
} else {
|
||||
if (op.id != this.index) {
|
||||
@@ -102,21 +102,21 @@ export default {
|
||||
getChild(op) {
|
||||
this.fullSelected.push(op)
|
||||
this.index = op.id
|
||||
this.getChildren(op.id)
|
||||
this.getgirdList(op.id)
|
||||
},
|
||||
selectNode(item, i) {
|
||||
this.fullSelected.splice(i + 1, this.fullSelected.length - i)
|
||||
if (item.children?.length <= 0) {
|
||||
if (item.girdList?.length <= 0) {
|
||||
this.index = item.id
|
||||
}
|
||||
this.getChildren(item.id)
|
||||
this.getgirdList(item.id)
|
||||
},
|
||||
handleInit() {
|
||||
this.index = this.currentSelected.id
|
||||
this.getChildren(this.currentSelected.id)
|
||||
this.getgirdList(this.currentSelected.id)
|
||||
},
|
||||
showArrow(op) {
|
||||
return this.index != op.id && op.children?.length > 0
|
||||
return this.index != op.id && op.girdList?.length > 0
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
||||
Reference in New Issue
Block a user