整体界面完成

project/fengdu/AppBIBoard/AppBIBoard.vue

@@ -53,7 +53,7 @@
           </fd-card>
         </div>
         <div class="center fill relative">
-          <div ref="map" class="w100 h100"/>
+          <fd-map class="w100 h100"/>
           <fd-card class="centerBottom pad-b8" label="实时动态">
             <dv-scroll-board class="mar-t14" :config="realtimeEvents" style="height: 228px"/>
           </fd-card>
@@ -113,11 +113,12 @@ import AiInfoItem from "dui/packages/basic/AiInfoItem.vue";
 import AiWrapper from "dui/packages/basic/AiWrapper.vue";
 import Vue from "vue";
 import {scrollBoard} from "@jiaminghi/data-view"
+import FdMap from "./components/fdMap.vue";
 
 export default {
   name: "AppBIBoard",
   label: "丰都指挥舱",
-  components: {AiWrapper, AiInfoItem, AiHighlight, AiEchart, FdCard, FengduHead, AiFitView},
+  components: {FdMap, AiWrapper, AiInfoItem, AiHighlight, AiEchart, FdCard, FengduHead, AiFitView},
   props: {
     instance: Function,
     dict: Object

project/fengdu/AppBIBoard/components/fdMap.vue

@@ -0,0 +1,68 @@
+<template>
+  <section class="fdMap"/>
+</template>
+<script>
+import * as echarts from 'echarts'
+import geoJSON from "../assets/fengduGeo.json"
+import fdEdge from "../assets/fdEdge.json"
+
+export default {
+  name: "fdMap",
+  data() {
+    return {
+      map: null
+    }
+  },
+  methods: {
+    init(c = 0) {
+      if (this.$el) {
+        echarts.registerMap('fengdu', {geoJSON})
+        echarts.registerMap('fd', {geoJSON: fdEdge})
+        this.map = echarts.init(this.$el)
+        this.map.setOption({
+          geo: [
+            {
+              show: true,
+              map: 'fengdu',
+              itemStyle: {
+                areaColor: '#02bcff29',
+                borderColor: '#02FEFF21',
+                borderWidth: 1,
+              },
+              label: {
+                show: true,
+                color: '#02FEFF'
+              },
+              emphasis: {
+                disabled: true
+              },
+              zoom: 1.2
+            },
+            {
+              show: true,
+              map: 'fd', itemStyle: {
+                areaColor: 'transparent',
+                borderWidth: 2,
+                borderColor: '#02FEFF',
+                // shadowOffsetY: 2,
+                // shadowColor: '#02FEFF'
+              },
+              emphasis: {
+                disabled: true
+              },
+              zoom: 1.2
+            },
+          ]
+        })
+      } else if (c < 5) setTimeout(() => this.init(++c), 500)
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+<style scoped lang="scss">
+.fdMap {
+}
+</style>