联动地图完成

2024-04-12 18:19:49 +08:00
parent 5d2a66b861
commit 372f52e655
8 changed files with 115 additions and 33 deletions
--- a/packages/bigscreen/designer/components/componentConfig.vue
+++ b/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>
-            <el-option
-                v-for="(item, index) in summaryList"
-                :key="index"
-                :label="item"
-                :value="item">
-            </el-option>
-          </el-select>
+          <ai-select size="mini" v-model="config.display" placeholder="请选择类型" :select-list="summaryOps"/>
        </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)
-  },
-  created() {
-    console.log(Vue.component("AiDvSummary"))
+    summaryOps: () => Object.keys(AiDvSummary.components).map(e => ({label: e, id: e})),
  }
 }
 </script>
--- a/packages/bigscreen/designer/components/datasourcePicker.vue
+++ b/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
          })
    }
--- a/packages/bigscreen/designer/config.js
+++ b/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',
--- a/packages/bigscreen/designer/viewport.vue
+++ b/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)
    }
  },
--- a/ui/dv/AiDvRender.vue
+++ b/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: {
--- a/ui/dv/AiLinkageMap.vue
+++ b/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>
--- a/ui/dv/index.js
+++ b/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] || {},
--- a/ui/dv/layout/AiDvPlot/AiDvPlot.vue
+++ b/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) {