联动地图完成

packages/bigscreen/designer/components/componentConfig.vue

@@ -39,11 +39,17 @@
             </el-option>
           </el-select>
         </config-item>
-        <template v-if="/AiDvMap/.test(config.type)">
+        <template v-if="/(AiDvMap|linkageMap)/.test(config.type)">
           <config-item label="地图数据(geoJSON)">
             <el-input v-model="config.geoJson" size="mini" clearable placeholder="请输入geoJson的URL地址"/>
           </config-item>
         </template>
+        <template v-if="/linkageMap/.test(config.type)">
+          <config-item v-for="(item,i) in config.summaryConfigs" :key="i" :label="`统计${i+1}`">
+            <ai-select placeholder="请选择位置" v-model="item.pos" :select-list="positionList" size="mini"/>
+            <ai-select placeholder="请选择类型" v-model="item.display" :select-list="summaryOps" size="mini"/>
+          </config-item>
+        </template>
         <template v-if="/Chart/.test(config.type)">
           <config-item label="图表模板">
             <chart-picker v-model="config.config" @input="v=>config.echartOps=$echartTpls[v]"/>
@@ -185,14 +191,7 @@
           </div>
         </template>
         <config-item label="数据汇总" v-if="config.type === 'summary'">
-          <el-select size="mini" v-model="config.display" placeholder="请选择类型" clearable>
+          <ai-select size="mini" v-model="config.display" placeholder="请选择类型" :select-list="summaryOps"/>
-            <el-option
-                v-for="(item, index) in summaryList"
-                :key="index"
-                :label="item"
-                :value="item">
-            </el-option>
-          </el-select>
         </config-item>
       </div>
     </div>
@@ -202,7 +201,7 @@
         <config-item label="标题">
           <el-input size="mini" clearable placeholder="请输入弹窗标题" v-model="config.dialogTitle"/>
         </config-item>
-        <config-item label="内容" v-if="!['table','AiDvTable','AiDvMap'].includes(config.type)">
+        <config-item label="内容" v-if="!['table','AiDvTable','AiDvMap','linkageMap'].includes(config.type)">
           <ai-dialog-btn dialog-title="弹窗内容" text="打开编辑器" :modal="false">
             <ai-editor clearable placeholder="请输入弹窗内容" v-model="config.dialogContent" :instance="instance"/>
           </ai-dialog-btn>
@@ -219,7 +218,6 @@ import {monitorTypes} from "../config";
 import JsonEditor from "./jsonEditor.vue";
 import ChartPicker from "./chartPicker.vue";
 import AiDvSummary from "@dui/dv/layout/AiDvSummary/AiDvSummary";
-import Vue from "vue";
 
 export default {
   name: 'componentConfig',
@@ -239,14 +237,17 @@ export default {
         {label: '否', value: '0'}
       ],
       dialog: {},
-      monitorTypes
+      monitorTypes,
+      positionList: [
+        {label: "左上", id: "lt"},
+        {label: "右上", id: "rt"},
+        {label: "左下", id: "lb"},
+        {label: "右下", id: "rb"}
+      ]
     }
   },
   computed: {
-    summaryList: () => Object.keys(AiDvSummary.components)
+    summaryOps: () => Object.keys(AiDvSummary.components).map(e => ({label: e, id: e})),
-  },
-  created() {
-    console.log(Vue.component("AiDvSummary"))
   }
 }
 </script>

packages/bigscreen/designer/components/datasourcePicker.vue

@@ -102,7 +102,7 @@ export default {
   methods: {
     changeData(sdata) {
       this.source.dataType == 'staticData' ? this.source.staticData = sdata :
-          new DvCompData(this.source.dataType, this.source, this.instance).getData().then(data => {
+          new DvCompData(this.source, this.instance).getData().then(data => {
             this.source[this.source.dataType] = data
           })
     }

packages/bigscreen/designer/config.js

@@ -437,7 +437,7 @@ const maps = [{
   layers: 'vector'
 }, {
   type: 'AiDvMap',
-  label: '地图',
+  label: 'echart地图',
   display: 'map',
   width: 840,
   height: 534,
@@ -458,7 +458,7 @@ const maps = [{
   thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
   is3dAround: '0',
   limitArea: '0',
-}, {type: "linkageMap", label: "联动地图", width: 800, height: 964, top: 0, left: 560, thumb: "https://cdn.cunwuyun.cn/dvcp/dv/tpl/linkageMap.png"}]
+}, {type: "linkageMap", label: "联动地图", width: 800, height: 964, top: 0, left: 560, thumb: "https://cdn.cunwuyun.cn/dvcp/dv/tpl/linkageMap.png", dataType: 'staticData'}]
 const customHtml = {
   label: "HTML块", type: "html", list: [{
     type: 'html',

packages/bigscreen/designer/viewport.vue

@@ -504,7 +504,6 @@ export default {
       window.open(origin + pathname + '?id=' + this.$route.query.did + "#preview")
     },
     setCurLayer(v) {
-      console.log(v)
       this.componentList.splice(this.activeIndex, 1, v)
     }
   },

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 == 'dynamicData' ? this.getDynamicData(params) :
-          this.type == 'apiData' ? this.getApiData() : []
+          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) {
+  getAsyncData(api, params) {
-    return this.instance.post(api).then(res => {
+    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) {