接入地图了

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">