网格

src/project/saas/AppBuilding/components/gridMap.vue

@@ -10,12 +10,10 @@
         </div>
       </AiPagePicker>
       <div class="grid-input">
-        <img src="./img/back-icon.png" alt="" class="back-icon" v-if="name && show" @click="show=false">
-        <img src="./img/search-icon-w.png" alt="" class="search-icon" v-else>
-        <input type="text" class="input" placeholder="请输入姓名、房屋信息" v-model="name" maxlength="10" confirm-type="search"
-              @confirm="search"/>
+        <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" alt="" class="del-icon" v-if="name" @click="clear">
+          <img src="./img/del-icon.png" class="del-icon" v-if="girdName" @click="girdName = ''">
         </div>
       </div>
     </div>
@@ -48,6 +46,20 @@
         </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>
 
@@ -64,18 +76,20 @@ export default {
       show: false,
       form: {girdName: '', id: ''},
       treeList: [],
-      name: '',
+      girdName: '',
       showSelect: false,
       editor: null,
       polygons: [],
       labels: [],
-      latLngCenter: [], //中心点
+      latLngCenter: [],
+      isShowGrid: false,
+      girdList: []
     }
   },
   computed: {...mapState(['user'])},
   created() {
     this.areaId = this.user.areaId
-    this.getLeafNodes()
+
     uni.$on('goback', e => {
       this.form.girdName = e.girdName
       this.getGridList(e.id, true)
@@ -91,6 +105,21 @@ export default {
         url: './SelectGird?isFormMap=1'
       })
     },
+
+    search () {
+      this.$loading()
+      this.$http.post(`/app/appgirdinfo/list?size=1000&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) {
@@ -112,7 +141,6 @@ export default {
     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 => {
@@ -135,6 +163,7 @@ export default {
           if (!arr.filter(v => v.points).length) {
             return this.$u.toast('该网格还未标会')
           }
+          this.isShowGrid = false
 
           this.renderGridMap(arr.filter(v => v.points))
         }
@@ -285,6 +314,46 @@ export default {
     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;