修复村返回镇时,地图数据的刷新

project/biaopin/dv/weiyang/AppDvWeiyang.vue

@@ -521,6 +521,7 @@ export default {
       chart: {aiTrend, workChain, residentDistribution, spDistribution, wotDistribution, integralOrder, residentGroupTrend},
       chartData: {},
       tableData: {},
+      mapOps: {}
     }
   },
   computed: {
@@ -685,7 +686,7 @@ export default {
         }
       })
     },
-    renderMap(areaId) {
+    renderMap(areaId, cb) {
       const mapGeo = this.$copy(weiyang)
       let scatters = []
       if (areaId) {
@@ -698,33 +699,32 @@ export default {
         })
       }
       this.$nextTick(() => {
-        this.$load(this.chart.map).then(() => {
-          const options = this.$refs.map.handleMapOps(mapGeo, {
-            geo: {label: {show: false}},
-            series: {
-              type: 'effectScatter', coordinateSystem: 'geo', itemStyle: {color: '#4DF6FF'},
-              select: {itemStyle: {color: '#FFC800'}},
-              data: scatters, label: {
-                position: 'bottom', color: '#fff', fontSize: 12,
-                show: true, formatter: params => {
-                  return params.name
-                }
+        const options = this.$refs.map.handleMapOps(mapGeo, {
+          geo: {label: {show: false}},
+          series: {
+            type: 'effectScatter', coordinateSystem: 'geo', itemStyle: {color: '#4DF6FF'},
+            select: {itemStyle: {color: '#FFC800'}},
+            data: scatters, label: {
+              position: 'bottom', color: '#fff', fontSize: 12,
+              show: true, formatter: params => {
+                return params.name
               }
-            },
-            tooltip: {
-              position: 'top',
-              backgroundColor: "rgba(11,42,64,0.6)", textStyle: {color: '#fff'}, formatter: params => {
-                const {name, areaId} = params.data
-                const item = this.chartData.mapInfo.find(e => e.areaId == areaId) || {}
-                return `<div style="width: 144px;padding: 0 4px">
+            }
+          },
+          tooltip: {
+            position: 'top',
+            backgroundColor: "rgba(11,42,64,0.6)", textStyle: {color: '#fff'}, formatter: params => {
+              const {name, areaId} = params.data
+              const item = this.chartData.mapInfo.find(e => e.areaId == areaId) || {}
+              return `<div style="width: 144px;padding: 0 4px">
 <b class="mar-b8 font-16">${name}</b>
 ${["mapResidentCount", "mapResidentGroupCount", "mapWorkOrderCount"].map(prop => `<div class="flex" style="line-height: 22px;">
 <span class="fill" style="color:#99B5D2">${this.getLabel(prop)}</span> ${item[prop] || 0}</div>`).join("")}</div>`
-              }
             }
-          })
-          this.chart.map.setOption(options)
-        })
+          }
+        }, true)
+        if (cb) cb(mapGeo, options)
+        else this.chart.map.setOption(options)
       })
     },
     handleBack() {
@@ -735,7 +735,10 @@ ${["mapResidentCount", "mapResidentGroupCount", "mapWorkOrderCount"].map(prop =>
         this.renderMap()
       } else if (lv == 4) {
         this.areaId = Area.getAreaCodeByLevel(areaCode, lv - 1)
-        this.renderMap(this.areaId)
+        this.renderMap(this.areaId, (geo, ops) => {
+          this.map = geo
+          this.mapOps = ops
+        })
       }
     }
   },
@@ -843,7 +846,7 @@ ${["mapResidentCount", "mapResidentGroupCount", "mapWorkOrderCount"].map(prop =>
       <sub-header class="e" title="五条工作链">
         <ai-echart :ops="chart.workChain" :data="chartData.workChain"/>
       </sub-header>
-      <ai-echart-map ref="map" :geo-json="map" class="f" @map="mapEvent">
+      <ai-echart-map ref="map" :geo-json="map" class="f" @map="mapEvent" :ops="mapOps">
         <div v-if="!/0{6}$/.test(currentAreaId)" class="back fixed" @click="handleBack">返回上一级</div>
       </ai-echart-map>
       <sub-header class="g" title="工单分类">

ui/packages/tools/AiEchartMap.vue

@@ -33,7 +33,8 @@ export default {
   data() {
     return {
       chart: null,
-      geo: null
+      geo: null,
+      timer: null
     }
   },
   directives: {
@@ -82,7 +83,11 @@ export default {
       }
       return Promise.all([getGeo])
     },
-    handleMapOps(geoJson, ops) {
+    handleMapOps(geoJson, ops, stopInit = false) {
+      if (stopInit) {
+        clearTimeout(this.timer)
+        this.chart?.hideLoading()
+      }
       const {echarts, turf} = window
       const boundary = geoJson.features?.length > 1 ? turf.union(geoJson) : this.$copy(geoJson.features[0])
       boundary.properties = {...boundary.properties}
@@ -115,12 +120,14 @@ export default {
         text: "数据加载中...", textColor: "#fff",
         maskColor: 'rgba(0, 0, 0, 0.2)'
       })
-      this.loadLibs().then(() => {
-        this.chart.setOption(this.handleMapOps(this.geo, this.ops))
-      }).finally(() => {
-        this.$emit('map', this.chart)
-        this.chart.hideLoading()
-      })
+      this.$emit('map', this.chart)
+      this.timer = setTimeout(() => {
+        this.loadLibs().then(() => {
+          this.chart.setOption(this.handleMapOps(this.geo, this.ops))
+        }).finally(() => {
+          this.chart.hideLoading()
+        })
+      }, 1000)
     },
     getData(url = `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${this.user.info.areaId?.substring(0, 6)}`) {
       return http.post(`/app/appdvcpconfig/apiForward?url=${encodeURIComponent(url)}`)