联动地图完成

ui/dv/AiDvRender.vue

@@ -64,6 +64,7 @@
       <!-- <ai-sprite v-else-if="/building/.test(currentType)" v-bind="data" is3D @init="mods[currentType]"/> -->
       <ai-dv-plot v-else-if="currentType=='plot'" :options="data.charts" :instance="instance"/>
       <ai-assist v-else-if="currentType=='aiAssist'"/>
+      <ai-linkage-map v-else-if="currentType=='linkageMap'" :config="data" :area.sync="areaId"/>
     </ai-dv-panel>
   </div>
 </template>
@@ -81,6 +82,7 @@ import AiDvSummary from "./layout/AiDvSummary/AiDvSummary";
 import AiDvPlot from "./layout/AiDvPlot/AiDvPlot.vue";
 import AiAssist from "./AiAssist.vue";
 import AiMonitorCarousel from "./AiMonitorCarousel.vue";
+import AiLinkageMap from "./AiLinkageMap.vue";
 
 Vue.use(scrollBoard)
 
@@ -88,6 +90,7 @@ export default {
   name: 'AiDvRender',
   props: ['data', 'index', 'theme', 'instance'],
   components: {
+    AiLinkageMap,
     AiMonitorCarousel,
     AiAssist,
     AiDvPlot,
@@ -106,7 +109,8 @@ export default {
       lib: null,
       timer: null,
       dvTableConfig: [],
-      mapDialog: false
+      mapDialog: false,
+      areaId: ""
     }
   },
   computed: {

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>

ui/dv/index.js

@@ -38,22 +38,22 @@ export class DvCompData {
     staticData: "静态数据", dynamicData: "动态数据", apiData: "接口数据", htmlData: "HTML数据"
   }
 
-  constructor(type, dataConfig = {}, instance) {
+  constructor(dataConfig = {dataType: ""}, instance) {
     this.instance = instance
-    this.type = type
+    this.type = dataConfig.dataType
     this.params = dataConfig
   }
 
-  getData() {
+  getData(params) {
     return this.type == 'staticData' ? this.getStaticData() :
       this.type == 'htmlData' ? this.getStaticData() :
-        this.type == 'dynamicData' ? this.getDynamicData() :
-          this.type == 'apiData' ? this.getApiData() : []
+        this.type == 'dynamicData' ? this.getDynamicData(params) :
+          this.type == 'apiData' ? this.getApiData(params) : Promise.resolve([])
   }
 
-  getDynamicData() {
+  getDynamicData(params) {
     const {sourceDataId: id} = this.params
-    return id ? this.getAsyncData(`/app/appdiylargescreen/statisticsByLsid?id=${id}`) : Promise.reject("未获取到数据源id")
+    return id ? this.getAsyncData(`/app/appdiylargescreen/statisticsByLsid?id=${id}`, params) : Promise.reject("未获取到数据源id")
   }
 
   getStaticData() {
@@ -63,13 +63,13 @@ export class DvCompData {
     })
   }
 
-  getApiData() {
+  getApiData(params) {
     const {api} = this.params
-    return api ? this.getAsyncData(api) : Promise.reject("未获取到api")
+    return api ? this.getAsyncData(api, params) : Promise.reject("未获取到api")
   }
 
-  getAsyncData(api) {
-    return this.instance.post(api).then(res => {
+  getAsyncData(api, params) {
+    return this.instance.post(api, null, {params}).then(res => {
       if (res?.data) {
         const list = res.data,
           firstRecord = list?.[0] || {},

ui/dv/layout/AiDvPlot/AiDvPlot.vue

@@ -72,7 +72,7 @@ export default {
       this.getChartData()
     },
     getChartData() {
-      return new DvCompData(this.plot.dataType, this.plot, this.instance).getData().then(source => {
+      return new DvCompData(this.plot, this.instance).getData().then(source => {
         if (this.tpl.series?.type == 'pie') {
           let data
           if (source?.length == 1) {