地图

src/apps/AppGridManagement/Map.vue

@@ -17,6 +17,7 @@
       <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">
             <span class="label">网格类型</span>
             <span class="value">{{ $dict.getLabel('girdType', form.girdType) }}</span>
@@ -34,12 +35,9 @@
               </span>
             </div>
           </div>
+				</scroll-view>
       </div>
     </u-popup>
-
-    <div class="footer" @click="show=true" v-if="form.id && !show">
-      <div class="btn">查看网格信息</div>
-    </div>
   </div>
 </template>
 
@@ -74,17 +72,31 @@ export default {
     getLeafNodes() {
       this.$http.post(`/app/appgirdinfo/queryGirdMemberGirdsById`).then((res) => {
         if (res?.data) {
-          let arr = []
           this.treeList = res.data
-          res.data.forEach(e => {
-            if (e.points?.length > 0) {
-              arr.push(e.points.map(p => [p.lng, p.lat]))
+
+          const arr = res.data.map(e => {
+            return {
+              id: e.id,
+              points: e.points.map(p => [p.lng, p.lat])
             }
           })
           arr.length > 0 && this.renderGridMap(arr)
         }
       })
     },
+
+    getGridInfo (id) {
+      this.$http.post(`/app/appgirdinfo/queryDetailById?id=${id}`).then((res) => {
+        if (res?.data) {
+          this.form = res.data
+
+          this.$nextTick(() => {
+            this.show = true
+          })
+        }
+      })
+    },
+
     renderGridMap(paths, count = 0) {
       let {map, lib: TMap, $refs: {AiTMap: {fitBounds}}} = this
       if (TMap) {
@@ -96,21 +108,27 @@ export default {
         if (paths?.length > 0) {
           let bounds = []
           paths.forEach((path, i) => {
+            console.log(path)
             let color = colors[i % colors.length]
             let polygon = new TMap.MultiPolygon({
               map, styles: {
                 default: new TMap.PolygonStyle({
                   showBorder: true,
-                  borderColor: color,
+                  borderColor: '#5088FF',
                   borderWidth: 2,
-                  color: this.$colorUtils.Hex2RGBA(color, 0.1),
-                  borderDashArray: [10, 10]
+                  color: this.$colorUtils.Hex2RGBA('#5088FF', 0.1)
                 })
               },
-              geometries: [{paths: path.map(e => new TMap.LatLng(e[1], e[0]))}]
+              id: path.id,
+              geometries: [{paths: path.points.map(e => new TMap.LatLng(e[1], e[0]))}]
             })
             this.polygons.push(polygon)
-            bounds.push(fitBounds(path.map(e => new TMap.LatLng(e[1], e[0]))))
+            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)
+            })
           })
           bounds = bounds.reduce((a, b) => {
             return fitBounds([
@@ -160,7 +178,6 @@ ai-tree-picker {
 
 .detail {
   height: 100%;
-
   .grid-select {
     width: 100%;
     padding: 34px 32px;
@@ -199,7 +216,11 @@ ai-tree-picker {
       height: 10px;
       background: #CCC;
       border-radius: 6px;
-      margin: 32px 0 32px 344px;
+      margin: 32px auto 32px auto;
+    }
+
+    .grid-info {
+      height: 800px;
     }
 
     .title {
@@ -218,6 +239,10 @@ ai-tree-picker {
       line-height: 40px;
       font-size: 28px;
 
+      &:last-child {
+        border: none;
+      }
+
       .label {
         display: inline-block;
         width: 160px;