网格管理

src/apps/AppGridManagement/components/detail.vue

@@ -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">
+          <AiTreePicker :ops="treeList" v-model="form.id" @select="handerSelect">
-            <div :style="{ color: form.postFunction ? '' : '#c0c4cc' }" v-text="form.postFunction || '请选择社区居委会'" />
+            <div class="grid-name" :style="{ color: form.gridName ? '' : '#c0c4cc' }">{{form.gridName || '请选择社区居委会'}} <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon></div>
-          </ai-tree-picker>
+          </AiTreePicker>
-        <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
       </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: {},
+      form: {gridName: '', id: ''},
-      treeList: []
+      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 center = new TMap.LatLng(points[0].lat, points[0].lng)
-        var marker = null;
-        var points = []
         map.setCenter(center)
-        map.setZoom(18)
+        map.setZoom(15)
 
-        marker = new TMap.MultiMarker({
+        console.log(points)
-          id: 'marker-layer', // 图层id
+        var simplePath = []
-          map: map,
+
+        points.map((item) => {
+          var info = new TMap.LatLng(item.lat, item.lng)
+          simplePath.push(info)
+        })
+			
+        // 初始化几何图形及编辑器
+        this.editor = new TMap.tools.GeometryEditor({
+          map, // 编辑器绑定的地图对象
+          overlayList: [ // 可编辑图层
+            {
+              overlay: new TMap.MultiPolygon({
+                map,
                 styles: {
-            // 点标注的相关样式
+                  highlight: new TMap.PolygonStyle({
-            marker: new TMap.MarkerStyle({
+                    color: 'rgba(255, 255, 0, 0.6)'
-              width: 25,
+                  })
-              height: 35,
-              anchor: { x: 16, y: 32 },
-              src:'',
-            }),
                 },
                 geometries: [
                   {
-              // 点标注数据数组
+                    paths: simplePath
-              id: 'demo',
-              styleId: 'marker',
-              position: new TMap.LatLng(40.040422, 116.273521),
                   },
+                ]
+              }),
+              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>

src/components/AiTreePicker.vue

@@ -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) {
+        if (p.girdList?.length > 0) {
-          meta.push(p.children.map((c) => ({ ...c, parent: p.id })))
+          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) {
+    getgirdList(id) {
-      if (id) this.list = this.origin?.find((e) => e.id == id)?.children || []
+      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() {