dvcp_v2_wxcp_app/src/apps/AppGridManagement/components/detail.vue

<template>
  <div class="detail">
    <div class="grid-select">
      <span class="label">网格选择</span>
      <div class="value">
        <!-- <span>新里程社区居委会</span> -->
          <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">
      <AiTMap :areaId="areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"></AiTMap>
    </div>
    <u-popup v-model="show" mode="bottom" border-radius="14">
      <div class="popup">
        <div class="bg"></div>
        <div class="title">恒大城西社区居委会</div>
        <div class="info-flex">
          <span class="label">网格类型</span>
          <span class="value">基础网格</span>
        </div>
        <div class="info-flex">
          <span class="label">网格层级</span>
          <span class="value">村/社区</span>
        </div>
        <div class="info-flex">
          <span class="label">网格管理员</span>
          <span class="value">林珊珊&nbsp;&nbsp;13782951281
            <img :src="$cdn + 'common/phone.png'" alt="" @click="call(item)" class="phone-icon">
          </span>
        </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>

<script>
import { mapState } from 'vuex'
export default {

  data() {
    return {
      areaId: '',
      ops: {},
      lib: '',
      map: null,
      show: false,
      form: {gridName: '', id: ''},
      treeList: [],
      showSelect: false,
      editor: null,
    }
  },
  computed: { ...mapState(['user']) },
  mounted() {
    this.areaId = this.user.areaId
    this.initMap()
    this.getTreeList()
  },

  methods: {
    handerSelect(e) {
      console.log(e)
      this.form.gridName = e.girdName
      this.form.id = e.id
      this.initMap(e.points)
    },
    initMap(points) {
      //初始化地图
      this.$nextTick(() =>{
        let {lib: TMap, map} = this
        var center = new TMap.LatLng(points[0].lat, points[0].lng)
        map.setCenter(center)
        map.setZoom(15)

        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: [ // 可编辑图层
            {
              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 // 开启吸附
        });

      })
      
    },
    getTreeList() {
      this.$http.post(`/app/appgirdinfo/listAll`).then((res) => {
        if (res.code == 0) {
          this.treeList = res.data
        }
      })
    }
    
  }
}
</script>

<style lang="scss" scoped>
::v-deep uni-page-body{
  height: 100%;
}
ai-tree-picker{
  display: inline-block;
}
.detail {
  height: 100%;
  .grid-select{
    width: 100%;
    padding: 34px 32px;
    box-sizing: border-box;
    background: #FFF;
    display: flex;
    justify-content: space-between;
    line-height: 44px;
    color: #333;
    .label{
      display: inline-block;
      width: 140px;
      font-size: 32px;
    }
    .value{
      font-size: 28px;
      .u-icon{
        margin-left: 8px;
      }
    }
  }
  .map-content{
    width: 100%;
    height: calc(100% - 112px);
  }
  .popup{
    padding: 0 32px 16px;
    .bg{
      width: 64px;
      height: 10px;
      background: #CCC;
      border-radius: 6px;
      margin: 32px 0 32px 344px;
    }
    .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;
      .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;
        }
      }
    }
  }
}
.grid-name{
  display: inline-block;
}
</style>