在搞地图了

project/biaopin/dv/weiyang/AppDvWeiyang.vue

@@ -7,6 +7,7 @@ import ValueUnit from "./comps/valueUnit.vue";
 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";
 
 const handlePercent = v => parseFloat(isNaN(v) ? 0 : v.toFixed(2))
 const calcComparePercent = (v = 1, target = 1) => {
@@ -147,7 +148,7 @@ const residentGroupTrend = {
 }
 export default {
   name: "AppDvWeiyang",
-  components: {NavTabs, AiEchart, ChargingPercent, ValueUnit, IconSmallPanel, IconStaPanel, SubHeader},
+  components: {AiEchartMap, NavTabs, AiEchart, ChargingPercent, ValueUnit, IconSmallPanel, IconStaPanel, SubHeader},
   label: "未央最新定制大屏",
   props: {
     instance: Function,
@@ -161,12 +162,12 @@ export default {
       sta: {},
       chart: {aiTrend, workChain, residentDistribution, spDistribution, wotDistribution, integralOrder, residentGroupTrend},
       chartData: {},
-      tableData: {}
+      tableData: {},
     }
   },
   computed: {
     ...mapState(["user"]),
-    currentAreaId: v => "610112010017" || v.areaId || v.user.info.areaId,
+    currentAreaId: v => "" || v.areaId || v.user.info.areaId,
     isLastAreaLevel: v => !/0{3}$/.test(v.currentAreaId),
     areaSta: v => [
       {label: "社区数", icon: "66d80346ec1ea", prop: "communityCount", unit: "个"},
@@ -413,44 +414,37 @@ export default {
           <value-unit :value="e.value" :unit="e.unit" size="mini"/>
         </div>
       </div>
-      <div class="e flex column normal">
-        <sub-header title="五条工作链"/>
+      <sub-header class="e" title="五条工作链">
         <ai-echart :ops="chart.workChain" :data="chartData.workChain"/>
-      </div>
-      <div class="f">
-
-      </div>
-      <div class="g flex column normal">
-        <sub-header title="工单分类"/>
-        <ai-echart class="wotDistribution" :ops="chart.wotDistribution" :data="chartData.wotDistribution">
-          <div class="summary flex column">
-            <span v-text="`总数`"/>
-            <value-unit :value="wotDistributionTotal" size="mini"/>
-          </div>
-        </ai-echart>
-        <dv-scroll-board class="pad-h12 fill" :config="workorderTable"/>
-      </div>
-      <div class="h flex column normal">
-        <sub-header title="全区积分排名(前10)">
-          <nav-tabs class="pad-r8" slot="right" :list="tabs" @click="s=>integralOrderType=s.value"/>
-        </sub-header>
+      </sub-header>
+      <ai-echart-map class="f"/>
+      <sub-header class="g" title="工单分类">
+        <div class="flex column normal" style="height: 100%">
+          <ai-echart class="wotDistribution" :ops="chart.wotDistribution" :data="chartData.wotDistribution">
+            <div class="summary flex column">
+              <span v-text="`总数`"/>
+              <value-unit :value="wotDistributionTotal"/>
+            </div>
+          </ai-echart>
+          <dv-scroll-board class="pad-h12 fill" :config="workorderTable"/>
+        </div>
+      </sub-header>
+      <sub-header class="h" title="全区积分排名(前10)">
+        <nav-tabs class="pad-r8" slot="right" :list="tabs" @click="s=>integralOrderType=s.value"/>
         <ai-echart :ops="chart.integralOrder" :data="chartData.integralOrder"/>
-      </div>
-      <div class="i flex column normal">
-        <sub-header title="居民统计">
-          <div class="info pad-r8" slot="right" v-text="`按街道进行汇总统计`"/>
-        </sub-header>
+      </sub-header>
+      <sub-header class="i" title="居民统计">
+        <div class="info pad-r8" slot="right" v-text="`按街道进行汇总统计`"/>
         <ai-echart :ops="chart.residentDistribution" :data="chartData.residentDistribution"/>
-      </div>
-      <div class="j flex column normal">
-        <sub-header title="特殊人群数量统计"/>
+      </sub-header>
+      <sub-header class="j" title="特殊人群数量统计">
         <ai-echart :ops="chart.spDistribution" :data="chartData.spDistribution">
           <div class="summary flex column">
             <span v-text="`总数`"/>
             <value-unit :value="spDistributionTotal" unit="人" size="mini"/>
           </div>
         </ai-echart>
-      </div>
+      </sub-header>
     </template>
   </section>
 </template>
@@ -464,9 +458,10 @@ export default {
     }
   }
 }
+
 @font-face {
-  font-family: "DINAlternate-Bold";
-  src: url("https://cdn.cunwuyun.cn/fonts/D-DIN-PRO-700-Bold.otf");
+  font-family: "DINAlternate";
+  src: url("https://cdn.cunwuyun.cn/fonts/D-DIN-PRO-500-Medium.otf");
 }
 </style>
 <style scoped lang="scss">

project/biaopin/dv/weiyang/comps/valueUnit.vue

@@ -13,7 +13,7 @@ export default {
 
 <style scoped lang="scss">
 .valueUnit {
-  font-family: DINAlternate-Bold,serif;
+  font-family: DINAlternate,serif;
   font-weight: 700;
   font-size: 22px;
   color: #02FEFF;

ui/packages/tools/AiEchartMap.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="AiEchartMap" v-resize="onDomResize">
+    <div class="chart-map" ref="dvMap"/>
+  </div>
+</template>
+
+<script>
+import http from "dui/lib/js/request";
+import {mapState} from "vuex";
+import "../../lib/cdn/turf.min.js";
+
+export default {
+  name: 'AiEchartMap',
+  props: {
+    geoJson: String,
+    data: Array,
+    ops: Object
+  },
+  data() {
+    return {
+      chart: null,
+      geo: null
+    }
+  },
+  directives: {
+    resize: {
+      bind(el, binding) {
+        let width = ''
+        let height = ''
+
+        function isResize() {
+          const style = document.defaultView.getComputedStyle(el)
+          if (width !== style.width || height !== style.height) {
+            binding.value({
+              width: style.width,
+              height: style.height
+            })
+          }
+          width = style.width
+          height = style.height
+        }
+
+        el.__vueSetInterval__ = setInterval(isResize, 300)
+      },
+      unbind(el) {
+        clearInterval(el.__vueSetInterval__)
+      }
+    }
+  },
+  computed: {
+    ...mapState(['user'])
+  },
+  mounted() {
+    this.$load(this.$refs.dvMap).then(() => this.initChart())
+  },
+  methods: {
+    onDomResize() {
+      this.$nextTick(() => {
+        this.chart.resize()
+      })
+    },
+    loadLibs() {
+      return Promise.all([
+        this.getData(this.geoJson).then(res => this.geo = res?.data)
+      ])
+    },
+    initChart() {
+      const {echarts, turf} = window
+      this.chart = echarts.init(this.$refs.dvMap)
+      this.chart.showLoading({
+        text: "数据加载中...", textColor: "#fff",
+        maskColor: 'rgba(0, 0, 0, 0.2)'
+      })
+      this.loadLibs().then(() => {
+        const geoJson = this.geo
+        const boundary = geoJson.features?.length > 1 ? turf.union(geoJson) : geoJson
+        boundary.properties.name = "boundary"
+        geoJson.features.unshift(boundary)
+        echarts.registerMap('customMap', geoJson)
+        const option = {
+          geo: {
+            map: 'customMap', roam: true, emphasis: {disabled: true},
+            itemStyle: {areaColor: "transparent", borderColor: '#97CAE6'},
+            silent: true,
+            label: {show: true, color: '#fff'},
+            regions: [
+              {
+                name: "boundary", itemStyle: {
+                  areaColor: {
+                    type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [
+                      {offset: 0, color: 'rgba(61,127,255,0.35)'},
+                      {offset: 1, color: '#09E2F8'},
+                    ]
+                  }, shadowColor: "#1A80BF", shadowOffsetY: 2
+                }, label: {show: false}
+              }
+            ],
+          },
+          series: [
+            {type: 'scatter', coordinateSystem: 'geo', itemStyle: {color: '#66FFFF'}},
+            {type: 'effectScatter', coordinateSystem: 'geo', itemStyle: {color: '#FFD15C'}}
+          ],
+          ...this.ops
+        }
+        this.chart.setOption(option)
+      }).finally(() => 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)}`)
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiEchartMap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+
+  .chart-map {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>