dvcp_v2_wxcp_app/library/project/saas/AppBuilding/components/gridMap.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"/>
              <!-- &nbsp;&nbsp;{{ 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"/>
              <!-- &nbsp;&nbsp;{{ 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>