无等级网格版合并

packages/grid/AppHouseMap/AppHouseMap.vue

@@ -20,7 +20,7 @@
         </div>
         <div class="search-result" v-if="isShowSearch && searchList.length">
           <div class="search-result__item" v-for="(item, index) in searchList" :key="index"
-              @click="chooseCommunity(item)">
+               @click="chooseCommunity(item)">
             <i class="search-icon iconfont iconLocation"></i>
             <h2 v-if="type != 1">{{ item.residentName }}</h2>
             <span v-if="type != 1">{{ item.createAddress }}</span>
@@ -42,23 +42,23 @@
           <h2>户主信息</h2>
           <div class="community-info__item">
             <label>所属村</label>
-            <span>{{info.areaName}}</span>
+            <span>{{ info.areaName }}</span>
           </div>
           <div class="community-info__item">
             <label>姓名</label>
-            <span style="color:#2266FF;">{{info.name}}</span>
+            <span style="color:#2266FF;">{{ info.name }}</span>
           </div>
           <div class="community-info__item">
             <label>联系电话</label>
-            <span style="color:#2266FF;">{{info.phone}}</span>
+            <span style="color:#2266FF;">{{ info.phone }}</span>
           </div>
           <div class="community-info__item">
             <label>性别</label>
-            <span>{{info.sex == 1 ? '男' : '女'}}</span>
+            <span>{{ info.sex == 1 ? '男' : '女' }}</span>
           </div>
           <div class="community-info__item">
             <label>年龄</label>
-            <span>{{info.age}}</span>
+            <span>{{ info.age }}</span>
           </div>
           <div class="community-info__item bg-fff"></div>
         </div>
@@ -66,22 +66,22 @@
           <h2>宅基地信息</h2>
           <div class="community-info__item">
             <label>住宅建筑面积</label>
-            <span>{{info.liveBuildingArea}}m²</span>
+            <span>{{ info.liveBuildingArea }}m²</span>
           </div>
           <div class="community-info__item">
             <label>建筑层数</label>
-            <span>{{info.buildingFloorNumber}}层</span>
+            <span>{{ info.buildingFloorNumber }}层</span>
           </div>
           <div class="community-info__item">
             <label>建筑高度</label>
-            <span>{{info.buildingHeight}}m</span>
+            <span>{{ info.buildingHeight }}m</span>
           </div>
         </div>
         <div class="community-info__wrapper" v-if="!info.name">
           <h2>房屋信息</h2>
           <div class="community-info__item">
             <label>所属社区</label>
-            <span>{{ info.areaName}}</span>
+            <span>{{ info.areaName }}</span>
           </div>
           <div class="community-info__item">
             <label>所属小区</label>
@@ -89,7 +89,7 @@
           </div>
           <div class="community-info__item">
             <label>房屋类型</label>
-            <span>{{ dict.getLabel("communityBuildingType",info.buildingType) }}</span>
+            <span>{{ dict.getLabel("communityBuildingType", info.buildingType) }}</span>
           </div>
           <div class="community-info__item">
             <label>楼长姓名</label>
@@ -97,27 +97,28 @@
           </div>
           <div class="community-info__item">
             <label>楼长电话</label>
-            <span>{{ info.managerPhone}}</span>
+            <span>{{ info.managerPhone }}</span>
           </div>
         </div>
         <div class="community-btn" v-if="!info.name">
           <el-button icon="iconfont iconloudongmoxing" size="small"
-                    @click="showStatistics=true; $router.push({query: {communityId: info.communityId, buildingId: info.id,unitNum:house ? house.unitNumber : 1,buildingNumber:info.buildingNumber}})">楼栋模型
+                     @click="showStatistics=true; $router.push({query: {communityId: info.communityId, buildingId: info.id,unitNum:house ? house.unitNumber : 1,buildingNumber:info.buildingNumber}})">
+            楼栋模型
           </el-button>
         </div>
       </div>
-      
+
       <div class="map-menu">
         <div class="map-menu__item">
           <div class="map-layers__wrapper">
             <div class="map-layers">
               <div class="map-layers__item" @click="switchLayer(false)"
-                  :class="[!isImageMap ? 'map-layers__item-active' : '']">
+                   :class="[!isImageMap ? 'map-layers__item-active' : '']">
                 <img src="https://cdn.cunwuyun.cn/AppCommunityMap/dz.png" alt="">
                 <div class="map-layers__item--tag" :class="[!isImageMap ? 'map-layers__item--tag-active' : '']">地图</div>
               </div>
               <div class="map-layers__item" @click="switchLayer(true)"
-                  :class="[isImageMap ? 'map-layers__item-active' : '']">
+                   :class="[isImageMap ? 'map-layers__item-active' : '']">
                 <img src="https://cdn.cunwuyun.cn/AppCommunityMap/yx.png" alt="">
                 <div class="map-layers__item--tag" :class="[isImageMap ? 'map-layers__item--tag-active' : '']">卫星</div>
               </div>
@@ -158,6 +159,7 @@ export default {
   data() {
     return {
       map: null,
+      mapLib: null,
       community: '',
       isShowLayer: false,
       isShowSearch: false,
@@ -171,13 +173,13 @@ export default {
       list: [],
       areaList: [],
       info: {},
-      resident:null,
+      resident: null,
       satellite: null,
       zoom: 11,
       chooseBuildId: '',
       buildList: [],
       searchList: [],
-      house:null,
+      house: null,
       center: [],
       type: '',
       typeList: [
@@ -222,7 +224,7 @@ export default {
   },
 
   created() {
-    this.dict.load('householdRelation','communityBuildingType')
+    this.dict.load('householdRelation', 'communityBuildingType')
   },
 
   mounted() {
@@ -232,12 +234,12 @@ export default {
   },
 
   methods: {
-    getCorpLocation(){
-      if(this.showStatistics) { //楼栋模型返回重新查询
+    getCorpLocation() {
+      if (this.showStatistics) { //楼栋模型返回重新查询
         return
       }
-      this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
-        if(res.code==0){
+      this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
+        if (res.code == 0) {
           this.initMap(res.data);
         }
       })
@@ -255,14 +257,14 @@ export default {
     },
 
     search() {
-      if(this.type === '') {
+      if (this.type === '') {
         this.searchList = []
         this.$message.error('请先选择房屋类型')
         return
       }
       this.isShowArea = false
       var url = '/app/appcommunityhouseinfo/queryHouseByName'
-      if(this.type == 1) {
+      if (this.type == 1) {
         url = '/app/apphomesteadinfo/list'
       }
       this.instance.post(url, null, {
@@ -275,9 +277,9 @@ export default {
       }).then(res => {
         if (res.code === 0) {
           var data = []
-          if(this.type == 1) {
+          if (this.type == 1) {
             data = res.data.records
-          }else {
+          } else {
             data = res.data
           }
 
@@ -293,14 +295,14 @@ export default {
 
     getBuildInfo(id, type) {
       var url = `/app/apphomesteadinfo/queryDetailById?id=${id}`
-      if(type == 0) {
-        url= `/app/appcommunityhouseinfo/queryDetailByIdWithBuilding?buildId=${id}`
+      if (type == 0) {
+        url = `/app/appcommunityhouseinfo/queryDetailByIdWithBuilding?buildId=${id}`
       }
       this.instance.post(url).then(res => {
         if (res.code === 0) {
-          if(type == 1) {
+          if (type == 1) {
             this.info = res.data
-          }else {
+          } else {
             this.info = res.data.build
             this.resident = null;
           }
@@ -312,10 +314,10 @@ export default {
     },
 
     chooseCommunity(item) {
-      if(item.name) { //宅基地
-        if(!item.lng || !item.lat) {
+      if (item.name) { //宅基地
+        if (!item.lng || !item.lat) {
           return this.$message.error('未获取到该房屋坐标信息')
-        }else {
+        } else {
           this.map.setZoomAndCenter(18, [item.lng, item.lat], false, 600)
           this.info = item
           this.$nextTick(() => {
@@ -323,35 +325,35 @@ export default {
             this.isShowInfo = true
           })
         }
-        
-      }else { //楼栋
-        this.instance.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding`,null,{
-        params:{
-          buildId:item.buildingId,
-          houseId:item.id,
-          residentId:item.residentId
-        }
-      }).then(res => {
-        if (res.code === 0) {
-          if (!res.data.build?.lng || !res.data.build?.lat) {
-            this.isShowInfo = true
-            this.isShowSearch = false
-            this.info = res.data.build;
-            return this.$message.error('未获取到该房屋坐标信息')
-          } else {
-            this.chooseBuildId = res.data.build.id
-            this.house = res.data.house
-            this.resident = res.data.resident;
-          }
 
-          this.map.setZoomAndCenter(18, [res.data.build?.lng, res.data.build?.lat], false, 600)
-          this.info = res.data.build
-          this.$nextTick(() => {
-            this.isShowSearch = false
-            this.isShowInfo = true
-          })
-        }
-      })
+      } else { //楼栋
+        this.instance.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding`, null, {
+          params: {
+            buildId: item.buildingId,
+            houseId: item.id,
+            residentId: item.residentId
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            if (!res.data.build?.lng || !res.data.build?.lat) {
+              this.isShowInfo = true
+              this.isShowSearch = false
+              this.info = res.data.build;
+              return this.$message.error('未获取到该房屋坐标信息')
+            } else {
+              this.chooseBuildId = res.data.build.id
+              this.house = res.data.house
+              this.resident = res.data.resident;
+            }
+
+            this.map.setZoomAndCenter(18, [res.data.build?.lng, res.data.build?.lat], false, 600)
+            this.info = res.data.build
+            this.$nextTick(() => {
+              this.isShowSearch = false
+              this.isShowInfo = true
+            })
+          }
+        })
       }
     },
 
@@ -365,7 +367,7 @@ export default {
           <p>${context.count}</p>
         </div>
       </div>`
-
+      let {mapLib: AMap} = this
       let offset = new AMap.Pixel(-9, -9)
       context.marker.setContent(el)
       context.marker.setOffset(offset)
@@ -380,23 +382,23 @@ export default {
       const buildId = context.data[0].id
       let el = ''
       var urlType = ''
-      if(context.data[0].communityName == context.data[0].buildingNumber) { //宅基地
+      if (context.data[0].communityName == context.data[0].buildingNumber) { //宅基地
         urlType = 1
-        el = `<div class="mark" id="buildId-${buildId}" style="${buildId === this.chooseBuildId?'background-color:#2266FF':'background-color:#FF701A'}">
+        el = `<div class="mark" id="buildId-${buildId}" style="${buildId === this.chooseBuildId ? 'background-color:#2266FF' : 'background-color:#FF701A'}">
          <div class="mark-contaienr">
             <span>${context.data[0].areaName}</span>&nbsp;&nbsp;
             <span>${context.data[0].communityName}</span>
           </div>
-        <div class="arrow" style="${buildId === this.chooseBuildId?'border-top-color: #2266FF':'border-top-color:#FF701A'}"></div>
+        <div class="arrow" style="${buildId === this.chooseBuildId ? 'border-top-color: #2266FF' : 'border-top-color:#FF701A'}"></div>
       </div>`
-      }else {
+      } else {
         urlType = 0
-        el = `<div class="mark" id="buildId-${buildId}" style="${buildId === this.chooseBuildId?'background-color:#2266FF':''}">
+        el = `<div class="mark" id="buildId-${buildId}" style="${buildId === this.chooseBuildId ? 'background-color:#2266FF' : ''}">
          <div class="mark-contaienr">
             <span>${context.data[0].communityName}</span>&nbsp;&nbsp;
             <span>${context.data[0].buildingNumber}栋</span>
           </div>
-        <div class="arrow" style="${buildId === this.chooseBuildId?'border-top-color: #2266FF':''}"></div>
+        <div class="arrow" style="${buildId === this.chooseBuildId ? 'border-top-color: #2266FF' : ''}"></div>
       </div>`
       }
 
@@ -421,6 +423,7 @@ export default {
     },
 
     addMakert(points) {
+      let {mapLib: AMap} = this
       new AMap.MarkerClusterer(this.map, points, {
         gridSize: 60,
         maxZoom: 15,
@@ -444,9 +447,9 @@ export default {
               lnglat: [item.lng, item.lat],
               id: item.id,
               corpId: item.corpId,
-              areaName:item.areaName,
+              areaName: item.areaName,
               buildingNumber: item.name || item.buildingNumber,
-              communityName:item.name || item.communityName,
+              communityName: item.name || item.communityName,
             }
           })
 
@@ -470,8 +473,8 @@ export default {
       this.isImageMap = flag
     },
 
-    initMap({lng,lat}) {
-      this.center = [lng,lat];
+    initMap({lng, lat}) {
+      this.center = [lng, lat];
       AMapLoader.load({
         key: 'b553334ba34f7ac3cd09df9bc8b539dc',
         version: '2.0',
@@ -481,6 +484,7 @@ export default {
           plugins: []
         }
       }).then((AMap) => {
+        this.mapLib = AMap
         this.map = new AMap.Map('map', {
           resizeEnable: true,
           zooms: [6, 20],
@@ -507,7 +511,7 @@ export default {
   width: 100%;
 }
 
-::v-deep .ai-list__content--right-wrapper{
+::v-deep .ai-list__content--right-wrapper {
   height: 100%;
   margin: 0px !important;
   background-color: transparent !important;
@@ -889,7 +893,7 @@ export default {
       white-space: nowrap;
     }
 
-    p:first-child{
+    p:first-child {
       font-size: 14px;
     }
 
@@ -901,7 +905,7 @@ export default {
   }
 }
 
-::v-deep .mark{
+::v-deep .mark {
   user-select: none;
   cursor: pointer;
   height: 32px;
@@ -914,7 +918,7 @@ export default {
   box-sizing: border-box;
   padding: 0 12px;
 
-  .mark-contaienr{
+  .mark-contaienr {
     color: white;
     font-size: 14px;
     position: relative;
@@ -926,7 +930,7 @@ export default {
     justify-content: center;
   }
 
-  .arrow{
+  .arrow {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
@@ -1124,8 +1128,8 @@ export default {
       }
     }
 
-    .bg-fff{
-      background-color: #fff!important;
+    .bg-fff {
+      background-color: #fff !important;
     }
   }
 }
@@ -1336,7 +1340,8 @@ export default {
         color: #89B;
       }
     }
-    .map-area__right{
+
+    .map-area__right {
       margin-left: 16px;
     }
   }