联动地图完成

ui/dv/AiLinkageMap.vue

@@ -0,0 +1,78 @@
+<script>
+import AiDvMap from "./AiDvMap.vue";
+import AiDvSummary from "./layout/AiDvSummary/AiDvSummary.vue";
+import {DvCompData} from "./index";
+
+export default {
+  name: "AiLinkageMap",
+  components: {AiDvSummary, AiDvMap},
+  props: {
+    instance: Function,
+    config: {default: () => ({})},
+  },
+  data() {
+    return {
+      mapData: [],
+      areaId: "530300000000"
+    }
+  },
+  computed: {
+    sta: v => v.config.summaryConfigs || []
+  },
+  methods: {
+    getData() {
+      new DvCompData(this.config, this.instance).getData({type: this.areaId}).then(res => {
+        const json = JSON.parse(res.param)
+        this.mapData = json.map
+        this.config.summaryConfigs = json.sta?.map(e => ({...e, pos: "rt", display: "summary20"})) || []
+      })
+    }
+  },
+  created() {
+    this.getData()
+  }
+}
+</script>
+
+<template>
+  <section class="AiLinkageMap">
+    <ai-dv-map :geo-json="config.geoJson" :data="mapData" :area.sync="areaId"/>
+    <ai-dv-summary class="abs" v-for="(item,i) in sta" :key="i"
+                   :class="item.pos" :type="item.display" :data="item.data"/>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.AiLinkageMap {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .abs {
+    position: absolute;
+    width: auto;
+    height: auto;
+
+    &.lt {
+      left: 0;
+      top: 0;
+    }
+
+    &.rt {
+      right: 0;
+      top: 0;
+    }
+
+    &.lb {
+      left: 0;
+      bottom: 0;
+    }
+
+    &.rb {
+      right: 0;
+      bottom: 0;
+    }
+  }
+
+}
+</style>