秀山金融大屏完成

2022-05-23 21:04:48 +08:00
parent e46dc98f58
commit cf6610153f
4 changed files with 696 additions and 604 deletions
--- a/packages/bigscreen/designer/components/Layout.vue
+++ b/packages/bigscreen/designer/components/Layout.vue
@@ -156,15 +156,6 @@
                  </el-select>
                </div>
              </div>
-              <div class="layout-config__item" v-if="currLayout.type === 'map'">
-                <label>遮罩层</label>
-                <div class="layout-config__item--right">
-                  <el-select size="mini" v-model="currLayout.mask" placeholder="请选择" clearable>
-                    <el-option label="是" value="1"></el-option>
-                    <el-option label="否" value="2"></el-option>
-                  </el-select>
-                </div>
-              </div>
              <div class="layout-config__item layout-config__item--input" v-if="currLayout.type === 'video'">
                <label>视频地址</label>
                <div class="layout-config__item--right">
@@ -201,12 +192,35 @@
                  <el-input-number size="mini" style="width: 232px" :min="0" v-model="currLayout.rowNum" controls-position="right"></el-input-number>
                </div>
              </div>
-              <div class="layout-config__item" v-if="currLayout.type === 'map'">
+              <template v-if="currLayout.type === 'map'">
+                <div class="layout-config__item">
+                  <label>遮罩层</label>
+                  <div class="layout-config__item--right">
+                    <el-select size="mini" v-model="currLayout.mask" placeholder="请选择" clearable>
+                      <el-option label="是" value="1"></el-option>
+                      <el-option label="否" value="2"></el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="layout-config__item">
                  <label>选择地区</label>
                  <div class="layout-config__item--right">
                    <AiAreaGet :instance="instance" :valueLevel="3" v-model="currLayout.areaId" placeholder="请选择地区"></AiAreaGet>
                  </div>
                </div>
+                <div class="layout-config__item">
+                  <label>展示光轨</label>
+                  <div class="layout-config__item--right">
+                    <ai-select v-model="currLayout.pulseLines" :selectList="dict.getDict('yesOrNo')"/>
+                  </div>
+                </div>
+                <div class="layout-config__item layout-config__item--input">
+                  <label>地图样式</label>
+                  <div class="layout-config__item--right">
+                    <el-input size="mini" v-model="currLayout.mapStyle" clearable placeholder="请输入地图样式ID,从UI处获取.."/>
+                  </div>
+                </div>
+              </template>
              <div class="layout-config__item" v-if="currLayout.type === 'summary'">
                <label>数据汇总</label>
                <div class="layout-config__item--right">
@@ -341,14 +355,14 @@
 </template>

 <script>
-  import { components } from '../config'
-  import VueRulerTool from 'vue-ruler-tool'
-  import VueDraggableResizable from 'vue-draggable-resizable'
-  import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
-  import DataConfig from './form/DataConfig.vue'
-  import RenderElement from './RenderElement'
+import {components} from '../config'
+import VueRulerTool from 'vue-ruler-tool'
+import VueDraggableResizable from 'vue-draggable-resizable'
+import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
+import DataConfig from './form/DataConfig.vue'
+import RenderElement from './RenderElement'

-  export default {
+export default {
  props: {
    instance: Function,
    dict: Object,
@@ -360,7 +374,7 @@
    return {
      colConfigs: [
        // { prop: 'url', label: '图片链接', showOverflowTooltip: false },
-          { slot: 'img', label: '图片' }
+        {slot: 'img', label: '图片'}
      ],
      form: {
        images: []
@@ -422,7 +436,6 @@

    currLayout() {
      if (this.activeIndex === -1) return {}
-
      return this.componentList[this.activeIndex]
    },

@@ -456,7 +469,7 @@
      })
    },

-      copy (link) {
+    copy(link) {
      let oInput = document.createElement('input')
      oInput.value = link
      document.body.appendChild(oInput)
@@ -469,11 +482,11 @@
      oInput.remove()
    },

-      removeImg (index) {
+    removeImg(index) {
      this.images.splice(index, 1)
    },

-      onImageConfirm () {
+    onImageConfirm() {
      if (!this.form.images.length) {
        return this.$message.error('请上传图片')
      }
@@ -618,7 +631,7 @@
      this.heightScale = Math.min(widthScale, heightScale)
    }
  }
-  }
+}
 </script>

 <style lang="scss" scoped>
--- a/packages/bigscreen/designer/components/RenderElement.vue
+++ b/packages/bigscreen/designer/components/RenderElement.vue
@@ -1,27 +1,27 @@
 <template>
  <div class="render-element" style="width: 100%; height: 100%;">
-    <ai-dv-display v-if="data.type === 'display'" :title="data.title" :list="data[data.dataType]"></ai-dv-display>
+    <ai-dv-display v-if="data.type === 'display'" :title="data.title" :list="values"></ai-dv-display>
    <ai-dv-panel
        style="height: 100%; width: 100%;"
        v-if="data.type !== 'display'"
        :title="data.title"
        :border="data.border || ''">
-      <AiDvSummary v-if="data.type === 'summary'" :summaryTitle="data.summaryTitle" :key="`summary${index}`" :type="data.display" :data="data[data.dataType]"/>
-      <AiSwiper v-else-if="data.type === 'swiper'" :heigth="'100%'" :data="data[data.dataType]"/>
+      <AiDvSummary v-if="data.type === 'summary'" :summaryTitle="data.summaryTitle" :key="`summary${index}`" :type="data.display" :data="values"/>
+      <AiSwiper v-else-if="data.type === 'swiper'" :heigth="'100%'" :data="values"/>
      <dv-scroll-board
          v-if="data.type === 'table'"
          :class="'dvScrollBoard' + theme"
-        :config="formatTable(data[data.dataType], data.isShowIndex, data.rowNum)"
+          :config="formatTable(values, data.isShowIndex, data.rowNum)"
          :key="data.height"
          :theme="theme"
-        :style="{height: data.height + 'px', width: '100%'}" />
+          :style="{height: data.height + 'px', width: '100%'}"/>
      <ai-echart
          v-else-if="data.type === 'barChart1'"
          style="height: 100%; width: 100%;"
          :ref="'chart' + index"
          :key="`chart${index}`"
          :theme="theme"
-        :data="data[data.dataType]"
+          :data="values"
          :ops="data.config"/>
      <ai-echart
          v-else-if="data.type === 'barChart2'"
@@ -29,7 +29,7 @@
          :ref="'chart' + index"
          :theme="theme"
          :key="`chart${index}`"
-        :data="data[data.dataType]"
+          :data="values"
          :ops="data.config"/>
      <ai-echart
          v-else-if="data.type === 'barChart3'"
@@ -37,7 +37,7 @@
          :ref="'chart' + index"
          :key="`chart${index}`"
          :theme="theme"
-        :data="data[data.dataType]"
+          :data="values"
          :ops="data.config"/>
      <ai-echart
          v-else-if="data.type === 'barChart5'"
@@ -45,7 +45,7 @@
          :ref="'chart' + index"
          :key="`chart${index}`"
          :theme="theme"
-        :data="data[data.dataType]"
+          :data="values"
          :ops="data.config"/>
      <ai-echart
          v-else-if="data.type === 'barChart7'"
@@ -53,7 +53,7 @@
          :ref="'chart' + index"
          :key="`chart${index}`"
          :theme="theme"
-        :data="data[data.dataType]"
+          :data="values"
          :ops="data.config"/>
      <ai-echart
          v-else-if="data.type === 'barChart8'"
@@ -61,7 +61,7 @@
          :ref="'chart' + index"
          :key="`chart${index}`"
          :theme="theme"
-        :data="data[data.dataType]"
+          :data="values"
          :ops="data.config"/>
      <ai-echart
          v-else-if="data.type === 'barChart9'"
@@ -69,7 +69,7 @@
          :ref="'chart' + index"
          :key="`chart${index}`"
          :theme="theme"
-        :data="data[data.dataType]"
+          :data="values"
          :ops="data.config"/>
      <ai-echart
          v-else-if="data.type === 'lineChart1'"
@@ -77,7 +77,7 @@
          :ref="'chart' + index"
          :key="`chart${index}`"
          :theme="theme"
-        :data="data[data.dataType]"
+          :data="values"
          :ops="lineChart1"/>
      <ai-echart
          v-else-if="data.type === 'lineChart2'"
@@ -85,7 +85,7 @@
          :ref="'chart' + index"
          :key="`chart${index}`"
          :theme="theme"
-        :data="data[data.dataType]"
+          :data="values"
          :ops="lineChart2"/>
      <ai-echart
          v-else-if="data.type === 'lineChart3'"
@@ -93,7 +93,7 @@
          :ref="'chart' + index"
          :key="`chart${index}`"
          :theme="theme"
-        :data="data[data.dataType]"
+          :data="values"
          :ops="data.config"/>
      <ai-echart
          v-else-if="data.type === 'lineChart4'"
@@ -101,7 +101,7 @@
          :ref="'chart' + index"
          :key="`chart${index}`"
          :theme="theme"
-        :data="data[data.dataType]"
+          :data="values"
          :ops="data.config"/>
      <ai-echart
          v-else-if="data.type === 'lineChart5'"
@@ -109,7 +109,7 @@
          :ref="'chart' + index"
          :key="`chart${index}`"
          :theme="theme"
-        :data="data[data.dataType]"
+          :data="values"
          :ops="lineChart5"/>
      <ai-echart
          v-else-if="data.type === 'pieChart'"
@@ -117,7 +117,7 @@
          :ref="'chart' + index"
          :key="`chart${index}`"
          :theme="theme"
-        :data="data[data.dataType]"
+          :data="values"
          :ops="pieChart"/>
      <ai-echart
          v-else-if="data.type === 'pieChart1'"
@@ -125,7 +125,7 @@
          :ref="'chart' + index"
          :key="`chart${index}`"
          :theme="theme"
-        :data="data[data.dataType]"
+          :data="values"
          :ops="pieChart1"/>
      <ai-echart
          v-else-if="data.type === 'pieChart3'"
@@ -133,9 +133,10 @@
          :ref="'chart' + index"
          :key="`chart${index}`"
          :theme="theme"
-        :data="data[data.dataType]"
+          :data="values"
          :ops="pieChart3"/>
-      <ai-map :markers="data[data.dataType]" v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId" map-style="amap://styles/e51987628aee5206d4c9ca8c6e98b4f7"/>
+      <ai-map :markers="values" v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId"
+              :map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map" :lib.sync="lib"/>
      <ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"></ai-monitor>
      <video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"></video>
      <AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="data.type === 'partyOrg'" :instance="instance"></AiDvPartyOrg>
@@ -144,16 +145,16 @@
 </template>

 <script>
-  import { mapState } from 'vuex'
-  import AiSwiper from './AiSwiper.vue'
-  import pieChart from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart2'
-  import pieChart1 from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart1'
-  import pieChart3 from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart3'
-  import lineChart1 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart1'
-  import lineChart2 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart2'
-  import lineChart5 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart5'
+import {mapState} from 'vuex'
+import AiSwiper from './AiSwiper.vue'
+import pieChart from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart2'
+import pieChart1 from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart1'
+import pieChart3 from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart3'
+import lineChart1 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart1'
+import lineChart2 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart2'
+import lineChart5 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart5'

-  export default {
+export default {
  name: 'RenderElement',

  props: ['data', 'index', 'theme', 'instance'],
@@ -162,21 +163,27 @@
    AiSwiper
  },

-    data () {
+  data() {
    return {
      lineChart1,
      lineChart2,
      lineChart5,
      pieChart,
      pieChart1,
-        pieChart3
+      pieChart3,
+      map: null,
+      lib: null
    }
  },

  computed: {
-      ...mapState(['user'])
+    ...mapState(['user']),
+    values() {
+      return this.data?.[this.data.dataType]?.map(e => {
+        return {...e, lng: e['经度'], lat: e['纬度'], label: e['地区名称']}
+      }) || []
+    }
  },
-
  methods: {
    formatTable(data, isShowIndex, rowNum) {
      if (!data.length) {
@@ -185,18 +192,15 @@
          data: []
        }
      }
-
      let rows = []
      const header = data.map(v => {
        return v[Object.keys(v)[0]]
      })
-
      Object.keys(data[0]).forEach((item, index) => {
        if (index !== 0) {
          rows.push(item)
        }
      })
-
      return {
        header: header,
        data: rows.map(item => {
@@ -216,20 +220,57 @@
        align: ['center', 'center', 'center', 'center', 'center']
      }
    },
+    handleMapClick(count = 0) {
+      let {lib: AMap, map} = this
+      if (AMap) {
+        let infoWin = new AMap.InfoWindow({content: ""})
+        map.clearMap()
+        let markers = this.values.filter(e=>e.lng).map(e => {
+          return new AMap.Marker({
+            map,
+            label: e.label,
+            icon: e.icon,
+            position: [e.lng, e.lat]
+          }).on('click', ({target}) => {
+            map.clearInfoWindow()
+            markers?.map(m => m.getIcon() == e.selectedIcon && m.setIcon(e.icon))
+            target.setIcon(e.selectedIcon)
+            infoWin.setContent([
+              `<div class="infoWin">`,
+              `<b>${e.label}</b>`,
+              `<div>累计成交金额：${e['累计成交金额(万)']}万元</div>`,
+              `<div>金融产品：${e['金融产品(万)']}万元</div>`,
+              `<div>融资需求：${e['融资需求(万)']}万元</div>`,
+              '</div>'
+            ].join(''))
+            infoWin.open(map, [e.lng, e.lat])
+          })
+        })
+        map.setFitView(markers)
+      } else if (count < 10) {
+        console.log("正在加载...%s", count)
+        setTimeout(() => this.handleMapClick(++count), 1000)
      }
    }
+  },
+  mounted() {
+    if (this.data.type == 'map') {
+      this.handleMapClick()
+    }
+  }
+}
 </script>

 <style lang="scss" scoped>
-  .render-element {
+.render-element {
  ::v-deep .dvScrollBoard1 {

    .header {
-        background: rgba(0, 0, 0, 0.1)!important;
+      background: rgba(0, 0, 0, 0.1) !important;

      .header-item {
-          color: #FFBB73!important;
-          font-size: 16px!important;
+        color: #FFBB73 !important;
+        font-size: 16px !important;
        font-weight: 600;
      }
    }
@@ -246,22 +287,59 @@
      -webkit-text-fill-color: transparent;

      & > div:nth-of-type(2n - 1) {
-          background-color: transparent!important;
+        background-color: transparent !important;
      }

      & > div:nth-of-type(2n) {
-          background-color: rgba(0, 0, 0, 0.1)!important;
+        background-color: rgba(0, 0, 0, 0.1) !important;
      }

      .index {
        color: #fff;
        text-shadow: none;
-          background: transparent;
-          background-color: #BD4921!important;
+        background: #BD4921 !important;
        -webkit-background-clip: inherit;
        -webkit-text-fill-color: #fff;
      }
    }
  }
+
+  ::v-deep.amap-info-contentContainer {
+    .amap-info-content {
+      background: #0A3257;
+      border: 1px solid #7BE5FF;
+      padding: 16px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+
+      .infoWin {
+        & > b {
+          display: block;
+          font-size: 18px;
+          font-weight: 600;
+          color: #FFFFFF;
+          margin-bottom: 13px;
        }
+
+        & > div {
+          font-size: 16px;
+          font-weight: 400;
+          color: #7BE5FF;
+
+          & + div {
+            margin-top: 8px;
+          }
+        }
+      }
+    }
+
+    .amap-info-sharp {
+      border-top-color: #0A3257;
+
+      &:after {
+        border-top-color: #7BE5FF;
+        filter: none;
+      }
+    }
+  }
+}
 </style>
--- a/packages/bigscreen/designer/config.js
+++ b/packages/bigscreen/designer/config.js
@@ -44,10 +44,10 @@ const components = [
            apiData: [],
            dataType: 'staticData',
            staticData: [
-              { name: '阿斯达', v1: 23 },
-              { name: '水电费', v1: 12 },
-              { name: '凡哥', v1: 67 },
-              { name: '党费', v1: 98 }
+              {name: '阿斯达', v1: 23},
+              {name: '水电费', v1: 12},
+              {name: '凡哥', v1: 67},
+              {name: '党费', v1: 98}
            ],
            config: barChart1,
            dynamicData: []
@@ -73,10 +73,10 @@ const components = [
            api: '',
            apiData: [],
            staticData: [
-              { name: '阿斯达', v1: 23 },
-              { name: '水电费', v1: 12 },
-              { name: '凡哥', v1: 67 },
-              { name: '党费', v1: 98 }
+              {name: '阿斯达', v1: 23},
+              {name: '水电费', v1: 12},
+              {name: '凡哥', v1: 67},
+              {name: '党费', v1: 98}
            ],
            config: barChart2,
            dynamicData: []
@@ -102,10 +102,10 @@ const components = [
            api: '',
            apiData: [],
            staticData: [
-              { name: '阿斯达', v1: 23 },
-              { name: '水电费', v1: 12 },
-              { name: '凡哥', v1: 67 },
-              { name: '党费', v1: 98 }
+              {name: '阿斯达', v1: 23},
+              {name: '水电费', v1: 12},
+              {name: '凡哥', v1: 67},
+              {name: '党费', v1: 98}
            ],
            config: barChart3,
            dynamicData: []
@@ -131,10 +131,10 @@ const components = [
            apiData: [],
            dataType: 'staticData',
            staticData: [
-              { name: '阿斯达', v1: 23 },
-              { name: '水电费', v1: 12 },
-              { name: '凡哥', v1: 67 },
-              { name: '党费', v1: 98 }
+              {name: '阿斯达', v1: 23},
+              {name: '水电费', v1: 12},
+              {name: '凡哥', v1: 67},
+              {name: '党费', v1: 98}
            ],
            config: barChart5,
            dynamicData: []
@@ -159,10 +159,10 @@ const components = [
            apiData: [],
            dataType: 'staticData',
            staticData: [
-              { name: '阿斯达', v1: 23 },
-              { name: '水电费', v1: 12 },
-              { name: '凡哥', v1: 67 },
-              { name: '党费', v1: 98 }
+              {name: '阿斯达', v1: 23},
+              {name: '水电费', v1: 12},
+              {name: '凡哥', v1: 67},
+              {name: '党费', v1: 98}
            ],
            config: barChart7,
            dynamicData: []
@@ -188,10 +188,10 @@ const components = [
            apiData: [],
            dataType: 'staticData',
            staticData: [
-              { name: '阿斯达', v1: 23 },
-              { name: '水电费', v1: 12 },
-              { name: '凡哥', v1: 67 },
-              { name: '党费', v1: 98 }
+              {name: '阿斯达', v1: 23},
+              {name: '水电费', v1: 12},
+              {name: '凡哥', v1: 67},
+              {name: '党费', v1: 98}
            ],
            config: barChart8,
            dynamicData: []
@@ -217,10 +217,10 @@ const components = [
            apiData: [],
            dataType: 'staticData',
            staticData: [
-              { name: '阿斯达', v1: 23 },
-              { name: '水电费', v1: 12 },
-              { name: '凡哥', v1: 67 },
-              { name: '党费', v1: 98 }
+              {name: '阿斯达', v1: 23},
+              {name: '水电费', v1: 12},
+              {name: '凡哥', v1: 67},
+              {name: '党费', v1: 98}
            ],
            config: barChart9,
            dynamicData: []
@@ -251,10 +251,10 @@ const components = [
            dataY: [],
            dataType: 'staticData',
            staticData: [
-              { name: '阿斯达', v1: 23, v2: 33 },
-              { name: '水电费', v1: 12, v2: 34 },
-              { name: '凡哥', v1: 67, v2: 25 },
-              { name: '党费', v1: 98, v2: 85 }
+              {name: '阿斯达', v1: 23, v2: 33},
+              {name: '水电费', v1: 12, v2: 34},
+              {name: '凡哥', v1: 67, v2: 25},
+              {name: '党费', v1: 98, v2: 85}
            ],
            config: lineChart1,
            sourceDataId: '',
@@ -280,10 +280,10 @@ const components = [
            apiData: [],
            dataType: 'staticData',
            staticData: [
-              { name: '阿斯达', v1: 23, v2: 33 },
-              { name: '水电费', v1: 12, v2: 34 },
-              { name: '凡哥', v1: 67, v2: 25 },
-              { name: '党费', v1: 98, v2: 85 }
+              {name: '阿斯达', v1: 23, v2: 33},
+              {name: '水电费', v1: 12, v2: 34},
+              {name: '凡哥', v1: 67, v2: 25},
+              {name: '党费', v1: 98, v2: 85}
            ],
            config: lineChart2,
            sourceDataId: '',
@@ -309,10 +309,10 @@ const components = [
            apiData: [],
            dataType: 'staticData',
            staticData: [
-              { name: '阿斯达', v1: 23, v2: 33 },
-              { name: '水电费', v1: 12, v2: 34 },
-              { name: '凡哥', v1: 67, v2: 25 },
-              { name: '党费', v1: 98, v2: 85 }
+              {name: '阿斯达', v1: 23, v2: 33},
+              {name: '水电费', v1: 12, v2: 34},
+              {name: '凡哥', v1: 67, v2: 25},
+              {name: '党费', v1: 98, v2: 85}
            ],
            config: lineChart3,
            sourceDataId: '',
@@ -338,10 +338,10 @@ const components = [
            apiData: [],
            dataType: 'staticData',
            staticData: [
-              { name: '阿斯达', v1: 23, v2: 33 },
-              { name: '水电费', v1: 12, v2: 34 },
-              { name: '凡哥', v1: 67, v2: 25 },
-              { name: '党费', v1: 98, v2: 85 }
+              {name: '阿斯达', v1: 23, v2: 33},
+              {name: '水电费', v1: 12, v2: 34},
+              {name: '凡哥', v1: 67, v2: 25},
+              {name: '党费', v1: 98, v2: 85}
            ],
            config: lineChart4,
            sourceDataId: '',
@@ -367,10 +367,10 @@ const components = [
            apiData: [],
            dataType: 'staticData',
            staticData: [
-              { name: '阿斯达', v1: 23, v2: 33 },
-              { name: '水电费', v1: 12, v2: 34 },
-              { name: '凡哥', v1: 67, v2: 25 },
-              { name: '党费', v1: 98, v2: 85 }
+              {name: '阿斯达', v1: 23, v2: 33},
+              {name: '水电费', v1: 12, v2: 34},
+              {name: '凡哥', v1: 67, v2: 25},
+              {name: '党费', v1: 98, v2: 85}
            ],
            config: lineChart5,
            sourceDataId: '',
@@ -402,10 +402,10 @@ const components = [
            apiData: [],
            dataType: 'staticData',
            staticData: [
-              { name: '阿斯达', v1: 23, v2: 33 },
-              { name: '水电费', v1: 12, v2: 34 },
-              { name: '凡哥', v1: 67, v2: 25 },
-              { name: '党费', v1: 98, v2: 85 }
+              {name: '阿斯达', v1: 23, v2: 33},
+              {name: '水电费', v1: 12, v2: 34},
+              {name: '凡哥', v1: 67, v2: 25},
+              {name: '党费', v1: 98, v2: 85}
            ],
            config: pieChart,
            sourceDataId: '',
@@ -431,10 +431,10 @@ const components = [
            apiData: [],
            dataType: 'staticData',
            staticData: [
-              { name: '阿斯达', v1: 23, v2: 33 },
-              { name: '水电费', v1: 12, v2: 34 },
-              { name: '凡哥', v1: 67, v2: 25 },
-              { name: '党费', v1: 98, v2: 85 }
+              {name: '阿斯达', v1: 23, v2: 33},
+              {name: '水电费', v1: 12, v2: 34},
+              {name: '凡哥', v1: 67, v2: 25},
+              {name: '党费', v1: 98, v2: 85}
            ],
            config: pieChart1,
            sourceDataId: '',
@@ -460,10 +460,10 @@ const components = [
            apiData: [],
            dataType: 'staticData',
            staticData: [
-              { name: '阿斯达', v1: 23, v2: 33 },
-              { name: '水电费', v1: 12, v2: 34 },
-              { name: '凡哥', v1: 67, v2: 25 },
-              { name: '党费', v1: 98, v2: 85 }
+              {name: '阿斯达', v1: 23, v2: 33},
+              {name: '水电费', v1: 12, v2: 34},
+              {name: '凡哥', v1: 67, v2: 25},
+              {name: '党费', v1: 98, v2: 85}
            ],
            config: pieChart1,
            sourceDataId: '',
@@ -500,9 +500,9 @@ const components = [
            dataType: 'staticData',
            dynamicData: [],
            staticData: [
-              { name: '列1', v: 23, v2: 3 },
-              { name: '列2', v: 12, v2: 4 },
-              { name: '列2', v: 12, v2: 4 }
+              {name: '列1', v: 23, v2: 3},
+              {name: '列2', v: 12, v2: 4},
+              {name: '列2', v: 12, v2: 4}
            ]
          }
        ]
@@ -526,6 +526,8 @@ const components = [
            left: 0,
            top: 0,
            mask: '2',
+            pulseLines: 1,
+            mapStyle:"e51987628aee5206d4c9ca8c6e98b4f7",
            areaId: '',
            zIndex: 1,
            apiData: [],
@@ -728,4 +730,4 @@ const components = [
  }
 ]

-export { components }
+export {components}
--- a/packages/bigscreen/viewer/AppGigscreenViewer.vue
+++ b/packages/bigscreen/viewer/AppGigscreenViewer.vue
@@ -101,7 +101,7 @@ export default {
            this.dashboard = JSON.parse(res.data.config).dashboard

            this.componentList.forEach((item, index) => {
-              if (item.dataType !== 'staticData' && ((item.type.indexOf('Chart') > -1) || item.type === 'display' || item.type === 'table' || item.type === 'summary')) {
+              if (item.dataType !== 'staticData' && ((item.type.indexOf('Chart') > -1) || ['display', 'table', 'map', 'summary'].includes(item.type))) {
                this.getSourceData(item, index)
              }
              if (item.type === 'monitor' && item.monitorType === 'cmcc') {
@@ -174,9 +174,8 @@ export default {
                    ...obj
                  })
                })
+              } else dynamicData = res.data
            }
-            }
-
            this.$set(this.componentList[index], item.dataType, dynamicData)
          }
        }