无等级网格版合并

2022-06-13 09:57:52 +08:00
parent 3afde14618
commit c75a2b7fd3
130 changed files with 841 additions and 13020 deletions
--- a/src/apps/AppGridManagement/Map.vue
+++ b/src/apps/AppGridManagement/Map.vue
@@ -1,11 +1,16 @@
 <template>
-  <div class="map">
+  <div class="detail">
    <div class="grid-select">
-      <span class="label">网格选择</span>
-      <div class="grid-select__right" @click="toChoose">
-        <span>{{ form.girdName || '请选择' }}</span>
-        <u-icon name="arrow-right" color="#cccccc" size="30" style="margin-left:8px;"></u-icon>
-      </div>
+      <AiPagePicker type="custom" class="fill" @select="handleSelectGird"
+                    :ops="{url:'./SelectGird',label: 'girdName'}">
+        <div class="gird-content">
+          <div class="label">网格选择</div>
+          <div class="grid-select__right">
+            <span>{{ form.girdName || '请选择' }}</span>
+            <u-icon name="arrow-right" color="#cccccc" size="26" style="margin-left:4px;"></u-icon>
+          </div>
+        </div>
+      </AiPagePicker>
    </div>
    <div class="map-content">
      <AiTMap ref="AiTMap" :map.sync="map" :lib.sync="lib" :libraries="['geometry','service', 'tools']"/>
@@ -14,34 +19,18 @@
      <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>
+        <scroll-view scroll-y="true" class="grid-info">
+          <div class="info-flex" v-for="(item) in  form.girdMemberManageList" :key="item.id" flex>
+            <div class="label">网格长</div>
+            <div class="value fill" v-text='[item.name, item.phone].join("  ")'/>
+            <AiPhone :phone="item.phone"/>
          </div>
-          <div class="info-flex">
-            <span class="label">网格层级</span>
-            <span class="value">{{ $dict.getLabel('girdLevel', form.girdLevel) }}</span>
+          <div class="info-flex" v-for="(item) in  form.girdMemberList" :key="item.id" flex>
+            <div class="label">网格员</div>
+            <div class="value fill" v-text='[item.name, item.phone].join("  ")'/>
+            <AiPhone :phone="item.phone"/>
          </div>
-          <div v-if="form.girdMemberManageList && form.girdMemberManageList.length">
-            <div class="info-flex" v-for="(item, index) in  form.girdMemberManageList" :key="index">
-              <span class="label">网格长</span>
-              <span class="value">{{ 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>
-          <div v-if="form.girdMemberList && form.girdMemberList.length">
-            <div class="info-flex" v-for="(item, index) in  form.girdMemberList" :key="index">
-              <span class="label">网格管理员</span>
-              <span class="value">{{ 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>
-				</scroll-view>
+        </scroll-view>
      </div>
    </u-popup>
  </div>
@@ -68,51 +57,16 @@ export default {
  },
  computed: {...mapState(['user', 'config'])},
  created() {
-    this.$dict.load('girdType', 'girdLevel')
+    this.$dict.load('girdType')
    this.areaId = this.user.areaId
-    // this.getLeafNodes()
-    uni.$on('goback', e => {
-      if (e.girdLevel == '0') {
-        setTimeout(() => {
-          this.$u.toast('请选择二级或者三级网格')
-        }, 400)
-        return false
-      }
-      this.getGridList(e.id, true)
-    })
  },
  onShow() {
    document.title = "网格管理"
  },
-
  methods: {
-    toChoose () {
-      uni.navigateTo({
-        url: './SelectGird?isFormMap=1'
-      })
-    },
-    getLeafNodes() {
-      this.$http.post(`/app/appgirdinfo/queryGirdMemberGirdsById`).then((res) => {
-        if (res?.data) {
-          this.treeList = res.data.filter(v => v.girdLevel === '2')
-
-          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) {
+    getGridList(id) {
      this.$loading()
      this.$http.post(`/app/appgirdinfo/queryChildGirdInfoByGirdId?girdId=${id}`).then((res) => {
-        this.$hideLoading()
        if (res?.data) {
          const arr = res.data.map(v => {
            return {
@@ -121,15 +75,13 @@ export default {
              points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
            }
          })
-
          this.renderGridMap(arr)
        }
-      }).catch(() => {
+      }).finally(() => {
        this.$hideLoading()
      })
    },
-
-    getGridInfo (id, flag) {
+    getGridInfo(id, flag) {
      this.$loading()
      this.$http.post(`/app/appgirdinfo/queryDetailById?id=${id}`).then((res) => {
        this.$hideLoading()
@@ -142,7 +94,7 @@ export default {
              girdName: res.data.girdName,
              points: res.data.points.map(p => [p.lng, p.lat])
            }]
-            
+
            this.renderGridMap(arr)
          }

@@ -154,7 +106,6 @@ export default {
        this.$hideLoading()
      })
    },
-
    renderGridMap(paths, count = 0) {
      let {map, lib: TMap, $refs: {AiTMap: {fitBounds}}} = this
      if (TMap) {
@@ -169,58 +120,54 @@ export default {
        }
        if (paths?.length > 0) {
          let bounds = []
-
          paths.forEach((path, i) => {
-            let color = colors[i % colors.length]
-            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])
-            });
+            if (path.points?.length > 0) {
+              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]))
+              const 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,
+                    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([
@@ -246,33 +193,18 @@ export default {
    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("所选网格没有标绘!")
-      }
+    handleSelectGird(v) {
+      this.form = v || {}
+      this.getGridList(v?.id, true)
    },
  }
 }
 </script>

 <style lang="scss" scoped>
-::v-deep uni-page-body {
+.detail {
  height: 100%;
-}

-ai-tree-picker {
-  display: inline-block;
-}
-
-.map {
-  height: 100%;
-  height: calc(100% - 98px);
  .grid-select {
    width: 100%;
    padding: 34px 32px;
@@ -282,18 +214,19 @@ ai-tree-picker {
    justify-content: space-between;
    line-height: 44px;
    color: #333;
-    // position: fixed;
-    // top: 0;
-    // left: 0;
-    // z-index: 999;

    .grid-select__right {
+      width: calc(100% - 140px);
+      text-align: right;
+    }
+
+    .gird-content {
      display: flex;
-      align-items: center;
+      justify-content: space-between;
    }

    .label {
-      display: inline-block;
+      flex-shrink: 0;
      width: 140px;
      font-size: 32px;
    }
@@ -309,7 +242,7 @@ ai-tree-picker {

  .map-content {
    width: 100%;
-    height: calc(100% - 115px);
+    height: calc(100% - 210px);
  }

  .popup {
@@ -343,8 +276,8 @@ ai-tree-picker {
      line-height: 40px;
      font-size: 28px;

-      &:last-child {
-        border: none;
+      &:last-of-type {
+        border-bottom: none;
      }

      .label {
@@ -357,22 +290,11 @@ ai-tree-picker {
      .value {
        color: #666;
        font-size: 26px;
-
-        .phone-icon {
-          width: 40px;
-          height: 40px;
-          vertical-align: sub;
-          margin-left: 16px;
-        }
      }
    }
  }
 }

-.grid-name {
-  display: inline-block;
-}
-
 .footer {
  width: 100%;
  position: fixed;