接入地图了

project/biaopin/dv/weiyang/AppDvWeiyang.vue

@@ -8,6 +8,7 @@ import ChargingPercent from "./comps/chargingPercent.vue";
 import AiEchart from "dui/packages/tools/AiEchart.vue";
 import NavTabs from "./comps/navTabs.vue";
 import AiEchartMap from "dui/packages/tools/AiEchartMap.vue";
+import weiyang from "./weiyang.json";
 
 const handlePercent = v => parseFloat(isNaN(v) ? 0 : v.toFixed(2))
 const calcComparePercent = (v = 1, target = 1) => {
@@ -157,6 +158,7 @@ export default {
   },
   data() {
     return {
+      weiyang,
       areaId: "",
       integralOrderType: "",
       sta: {},
@@ -217,6 +219,36 @@ export default {
     workorderFinishedPercent: v => handlePercent(v.sta.workOrderCountFinish / v.sta.workOrderCount * 100),
     spDistributionTotal: v => v.chartData.spDistribution?.reduce((a, b) => a + b.c, 0) || 0,
     wotDistributionTotal: v => v.chartData.wotDistribution?.reduce((a, b) => a + b.c, 0) || 0,
+    mapData: v => {
+      const scatters = v.weiyang.features.map(e => {
+        const {name, unique_id, geo_wkt = ""} = e.properties
+        return {name, areaId: unique_id + "000", value: [...geo_wkt.match(/[.\d]+/g)]}
+      })
+      return {
+        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 = v.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">${v.getLabel(prop)}</span> ${item[prop] || 0}</div>`).join("")}</div>`
+          }
+        }
+      }
+    }
   },
   watch: {
     integralOrderType() {
@@ -286,6 +318,11 @@ export default {
             if (res?.data) {
               this.$set(this.chartData, "wotDistribution", res.data)
             }
+          }),
+          http.post("/app/wyDiy/mapInfo", null, {params: {areaId}}).then(res => {
+            if (res?.data) {
+              this.$set(this.chartData, "mapInfo", res.data)
+            }
           })
         ])
       }
@@ -417,7 +454,7 @@ export default {
       <sub-header class="e" title="五条工作链">
         <ai-echart :ops="chart.workChain" :data="chartData.workChain"/>
       </sub-header>
-      <ai-echart-map class="f"/>
+      <ai-echart-map :geo-json="weiyang" class="f" :ops="mapData"/>
       <sub-header class="g" title="工单分类">
         <div class="flex column normal" style="height: 100%">
           <ai-echart class="wotDistribution" :ops="chart.wotDistribution" :data="chartData.wotDistribution">

ui/packages/tools/AiEchartMap.vue

@@ -12,7 +12,7 @@ import "../../lib/cdn/turf.min.js";
 export default {
   name: 'AiEchartMap',
   props: {
-    geoJson: String,
+    geoJson: {type: [String, Object]},
     data: Array,
     ops: Object
   },
@@ -60,9 +60,13 @@ export default {
       })
     },
     loadLibs() {
-      return Promise.all([
-        this.getData(this.geoJson).then(res => this.geo = res?.data)
-      ])
+      let getGeo
+      if (typeof this.geoJson === 'string') {
+        getGeo = this.getData(this.geoJson).then(res => this.geo = res?.data)
+      } else if (typeof this.geoJson === 'object') {
+        getGeo = Promise.resolve(this.geo = this.$copy(this.geoJson))
+      }
+      return Promise.all([getGeo])
     },
     initChart() {
       const {echarts, turf} = window
@@ -77,7 +81,6 @@ export default {
         boundary.properties = {...boundary.properties}
         boundary.properties.name = "boundary"
         geoJson.features.unshift(boundary)
-        console.log(geoJson)
         echarts.registerMap('customMap', geoJson)
         const option = {
           geo: {
@@ -94,14 +97,26 @@ export default {
               }
             ],
           },
-          series: [
-            {type: 'scatter', coordinateSystem: 'geo', itemStyle: {color: '#66FFFF'}},
-            {type: 'effectScatter', coordinateSystem: 'geo', itemStyle: {color: '#FFD15C'}}
-          ],
-          ...this.ops
         }
+        const assign = (target, source) => {
+          Object.entries(source).forEach(([key, value]) => {
+            if (typeof value === 'object') {
+              if (target[key] && typeof target[key] === 'object') {
+                assign(target[key], value)
+              } else {
+                target[key] = value
+              }
+            } else {
+              target[key] = value
+            }
+          })
+        }
+        assign(option, this.ops)
         this.chart.setOption(option)
-      }).finally(() => this.chart.hideLoading())
+      }).finally(() => {
+        this.$emit('map', this.chart)
+        this.chart.hideLoading()
+      })
     },
     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)}`)