秀山金融大屏完成

packages/bigscreen/designer/components/Layout.vue

@@ -45,13 +45,13 @@
       <div class="layout-middle">
         <div class="canvas-wrapper">
           <vue-ruler-tool
-            v-model="dashboard.presetLine"
-            class="vueRuler"
-            :step-length="50"
-            :parent="true"
-            :position="'relative'"
-            :is-scale-revise="true"
-            :visible.sync="dashboard.presetLineVisible">
+              v-model="dashboard.presetLine"
+              class="vueRuler"
+              :step-length="50"
+              :parent="true"
+              :position="'relative'"
+              :is-scale-revise="true"
+              :visible.sync="dashboard.presetLineVisible">
             <div
                 id="workbench"
                 class="workbench"
@@ -63,29 +63,29 @@
               <ai-dv-wrapper style="height: 100%" :title="params.name" :theme="dashboard.theme">
                 <div style="width: 100%; height: 100%">
                   <AiDvBackground
-                    :theme="dashboard.theme"
-                    v-if="dashboard.backgroundImage.length || dashboard.theme === '1'"
-                    :src="dashboard.theme === '1' ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj-bg.png' : dashboard.backgroundImage[0].url">
+                      :theme="dashboard.theme"
+                      v-if="dashboard.backgroundImage.length || dashboard.theme === '1'"
+                      :src="dashboard.theme === '1' ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj-bg.png' : dashboard.backgroundImage[0].url">
                   </AiDvBackground>
                   <vue-draggable-resizable
-                    :w="item.width"
-                    :h="item.height"
-                    :x="item.left"
-                    :y="item.top"
-                    :scale="heightScale"
-                    :z="item.zIndex || 0"
-                    :parent="true"
-                    :resizable="item.type !== 'display' || item.display === 'summary2' || item.display === 'summary3'"
-                    class-name-active="drag-active"
-                    :class="[activeIndex === index ? 'drag-active' : '']"
-                    class="draggable"
-                    @contextmenu.native.stop="e => onContextmenu(e, index)"
-                    @dragging="(x, y) => onDrag(x, y, index)"
-                    @resizing="(x, y, w, h) => onResizing(x, y, w, h, index, item.type)"
-                    @activated="onActivated(index)"
-                    @click.native.stop="activeIndex = index"
-                    v-for="(item, index) in componentList"
-                    :key="index">
+                      :w="item.width"
+                      :h="item.height"
+                      :x="item.left"
+                      :y="item.top"
+                      :scale="heightScale"
+                      :z="item.zIndex || 0"
+                      :parent="true"
+                      :resizable="item.type !== 'display' || item.display === 'summary2' || item.display === 'summary3'"
+                      class-name-active="drag-active"
+                      :class="[activeIndex === index ? 'drag-active' : '']"
+                      class="draggable"
+                      @contextmenu.native.stop="e => onContextmenu(e, index)"
+                      @dragging="(x, y) => onDrag(x, y, index)"
+                      @resizing="(x, y, w, h) => onResizing(x, y, w, h, index, item.type)"
+                      @activated="onActivated(index)"
+                      @click.native.stop="activeIndex = index"
+                      v-for="(item, index) in componentList"
+                      :key="index">
                     <div class="coordinate" v-show="activeIndex === index">
                       <div class="coordinate-left"></div>
                       <div class="coordinate-top"></div>
@@ -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,21 +192,44 @@
                   <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'">
-                <label>选择地区</label>
-                <div class="layout-config__item--right">
-                  <AiAreaGet :instance="instance" :valueLevel="3" v-model="currLayout.areaId" placeholder="请选择地区"></AiAreaGet>
+              <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>
+                <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">
                   <el-select size="mini" v-model="currLayout.display" placeholder="请选择类型" clearable>
                     <el-option
-                      v-for="(item, index) in summaryList"
-                      :key="index"
-                      :label="item"
-                      :value="item">
+                        v-for="(item, index) in summaryList"
+                        :key="index"
+                        :label="item"
+                        :value="item">
                     </el-option>
                   </el-select>
                 </div>
@@ -284,9 +298,9 @@
       </div>
     </div>
     <div
-      class="layout-menu"
-      v-if="activeIndex > -1 && isShowMenu"
-      :style="{top: menuY + 'px', left: menuX + 'px'}">
+        class="layout-menu"
+        v-if="activeIndex > -1 && isShowMenu"
+        :style="{top: menuY + 'px', left: menuX + 'px'}">
       <div class="layout-menu__item" @click="removeLayer">
         <span>删除图层</span>
       </div>
@@ -303,17 +317,17 @@
     <ai-dialog :visible.sync="isShowImg" append-to-body title="图片素材" @onConfirm="isShowImg = false">
       <el-button type="primary" style="margin-bottom: 20px" @click="isShowAddImg = true">添加图片</el-button>
       <ai-table
-        :tableData="images"
-        :total="images.length"
-        :colConfigs="colConfigs"
-        @getList="() => {}">
+          :tableData="images"
+          :total="images.length"
+          :colConfigs="colConfigs"
+          @getList="() => {}">
         <el-table-column slot="img" label="图片" align="center">
           <template slot-scope="{ row }">
             <ai-uploader
-              :instance="instance"
-              :value="[{url: row.url}]"
-              disabled
-              :limit="1">
+                :instance="instance"
+                :value="[{url: row.url}]"
+                disabled
+                :limit="1">
             </ai-uploader>
           </template>
         </el-table-column>
@@ -329,9 +343,9 @@
     </ai-dialog>
     <ai-dialog :visible.sync="isShowAddImg" width="580px" append-to-body title="添加图片" @closed="form.images = []" @onConfirm="onImageConfirm">
       <ai-uploader
-        :instance="instance"
-        v-model="form.images"
-        :limit="9">
+          :instance="instance"
+          v-model="form.images"
+          :limit="9">
         <template slot="tips">
           <p>最多上传9张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
         </template>
@@ -341,284 +355,283 @@
 </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 {
-    props: {
-      instance: Function,
-      dict: Object,
-      params: Object,
-      urlPrefix: String
-    },
+export default {
+  props: {
+    instance: Function,
+    dict: Object,
+    params: Object,
+    urlPrefix: String
+  },
 
-    data() {
-      return {
-        colConfigs: [
-          // { prop: 'url', label: '图片链接', showOverflowTooltip: false },
-          { slot: 'img', label: '图片' }
-        ],
-        form: {
-          images: []
-        },
-        isShowAddImg: false,
-        isShowImg: false,
-        parentIndex: 0,
-        subIndex: 0,
-        sonIndex: 0,
-        leftIndex: 0,
-        rightIndex: 1,
-        configIndex: 0,
-        components,
-        bigscreenWidth: 1920,
-        bigscreenHeight: 1080,
-        widthPaddingTools: 18,
-        componentList: [],
-        dashboard: {
-          title: '大屏',
-          width: 1920,
-          height: 1080,
-          theme: '0',
-          backgroundColor: '',
-          backgroundImage: []
-        },
-        menuX: 0,
-        menuY: 0,
-        isShowMenu: false,
-        activeIndex: -1,
-        middleWidth: 0,
-        middleHeight: 0,
-        widthScale: 0,
-        heightScale: 0,
-        bigscreenScaleInWorkbench: 0,
-        tableStatus: [{
-          label: '是',
-          value: '1'
-        }, {
-          label: '否',
-          value: '0'
-        }],
-        images: [],
-        summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5', 'summary7', 'summary8', 'summary9', 'summary10', 'summary11'],
-        borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5']
-      }
-    },
-
-    components: {
-      RenderElement,
-      DataConfig,
-      VueRulerTool,
-      VueDraggableResizable,
-    },
-
-    computed: {
-      workbenchTransform() {
-        return `scale(${this.heightScale})`
+  data() {
+    return {
+      colConfigs: [
+        // { prop: 'url', label: '图片链接', showOverflowTooltip: false },
+        {slot: 'img', label: '图片'}
+      ],
+      form: {
+        images: []
       },
-
-      currLayout() {
-        if (this.activeIndex === -1) return {}
-
-        return this.componentList[this.activeIndex]
+      isShowAddImg: false,
+      isShowImg: false,
+      parentIndex: 0,
+      subIndex: 0,
+      sonIndex: 0,
+      leftIndex: 0,
+      rightIndex: 1,
+      configIndex: 0,
+      components,
+      bigscreenWidth: 1920,
+      bigscreenHeight: 1080,
+      widthPaddingTools: 18,
+      componentList: [],
+      dashboard: {
+        title: '大屏',
+        width: 1920,
+        height: 1080,
+        theme: '0',
+        backgroundColor: '',
+        backgroundImage: []
       },
+      menuX: 0,
+      menuY: 0,
+      isShowMenu: false,
+      activeIndex: -1,
+      middleWidth: 0,
+      middleHeight: 0,
+      widthScale: 0,
+      heightScale: 0,
+      bigscreenScaleInWorkbench: 0,
+      tableStatus: [{
+        label: '是',
+        value: '1'
+      }, {
+        label: '否',
+        value: '0'
+      }],
+      images: [],
+      summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5', 'summary7', 'summary8', 'summary9', 'summary10', 'summary11'],
+      borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5']
+    }
+  },
 
-      widget() {
-        if (this.components.length && this.components[this.parentIndex].list.length) {
-          return this.components[this.parentIndex].list[this.subIndex].list
-        }
+  components: {
+    RenderElement,
+    DataConfig,
+    VueRulerTool,
+    VueDraggableResizable,
+  },
 
-        return []
-      }
+  computed: {
+    workbenchTransform() {
+      return `scale(${this.heightScale})`
     },
 
-    mounted() {
-      if (this.params && this.params.id) {
-        this.getInfo(this.params.id)
+    currLayout() {
+      if (this.activeIndex === -1) return {}
+      return this.componentList[this.activeIndex]
+    },
+
+    widget() {
+      if (this.components.length && this.components[this.parentIndex].list.length) {
+        return this.components[this.parentIndex].list[this.subIndex].list
       }
+
+      return []
+    }
+  },
+
+  mounted() {
+    if (this.params && this.params.id) {
+      this.getInfo(this.params.id)
+    }
+    this.$nextTick(() => {
+      this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
+      this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
+      this.initCanvas()
+    })
+  },
+
+  methods: {
+    bindEvent() {
+      this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
+      this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
+
       this.$nextTick(() => {
-        this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
-        this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
         this.initCanvas()
       })
     },
 
-    methods: {
-      bindEvent() {
-        this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
-        this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
+    copy(link) {
+      let oInput = document.createElement('input')
+      oInput.value = link
+      document.body.appendChild(oInput)
+      oInput.select()
+      document.execCommand('Copy')
+      this.$message({
+        message: '已复制',
+        type: 'success'
+      })
+      oInput.remove()
+    },
 
-        this.$nextTick(() => {
-          this.initCanvas()
-        })
-      },
+    removeImg(index) {
+      this.images.splice(index, 1)
+    },
 
-      copy (link) {
-        let oInput = document.createElement('input')
-        oInput.value = link
-        document.body.appendChild(oInput)
-        oInput.select()
-        document.execCommand('Copy')
-        this.$message({
-          message: '已复制',
-          type: 'success'
-        })
-        oInput.remove()
-      },
-
-      removeImg (index) {
-        this.images.splice(index, 1)
-      },
-
-      onImageConfirm () {
-        if (!this.form.images.length) {
-          return this.$message.error('请上传图片')
-        }
-
-        this.images = [
-          ...this.images,
-          ...this.form.images
-        ]
-
-        this.form.images = []
-        this.isShowAddImg = false
-      },
-
-      setTop() {
-        const maxZindex = Math.max.apply(Math, this.componentList.map(item => {
-          return item.zIndex
-        }))
-
-        this.$set(this.componentList[this.activeIndex], 'zIndex', maxZindex + 1)
-      },
-
-      setBottom() {
-        const item = this.componentList[this.activeIndex]
-        this.componentList.splice(this.activeIndex, 1)
-        this.componentList.unshift(item)
-      },
-
-      getInfo(id) {
-        this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
-          if (res.code === 0) {
-            const data = JSON.parse(res.data.config)
-            this.componentList = data.config
-            this.dashboard = data.dashboard
-            this.images = data.images || []
-          }
-        })
-      },
-
-      back() {
-        this.$emit('close')
-      },
-
-      save() {
-        this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreen`, {
-          config: JSON.stringify({
-            config: this.componentList,
-            dashboard: this.dashboard,
-            images: this.images
-          }),
-          status: 1,
-          title: this.dashboard.title,
-          id: this.params.id || ''
-        }).then(res => {
-          if (res.code == 0) {
-            this.$message.success('保存成功')
-            this.$emit('change', res.data)
-            this.back()
-          }
-        })
-      },
-
-      clone(e) {
-        this.componentList.push(this.deepClone(e))
-      },
-
-      onChange(e) {
-        if (e.indexOf('Chart') > -1) {
-          this.$refs[`chart${this.activeIndex}`][0].refresh()
-        }
-      },
-
-      deepClone(data, hash = new WeakMap()) {
-        if (typeof data !== 'object' || data === null) {
-          throw new TypeError('传入参数不是对象')
-        }
-        if (hash.has(data)) {
-          return hash.get(data)
-        }
-        let newData = {}
-        const dataKeys = Object.keys(data)
-        dataKeys.forEach(value => {
-          const currentDataValue = data[value]
-          if (typeof currentDataValue !== "object" || currentDataValue === null) {
-            newData[value] = currentDataValue
-          } else if (Array.isArray(currentDataValue)) {
-            newData[value] = [...currentDataValue]
-          } else if (currentDataValue instanceof Set) {
-            newData[value] = new Set([...currentDataValue])
-          } else if (currentDataValue instanceof Map) {
-            newData[value] = new Map([...currentDataValue])
-          } else {
-            hash.set(data, data)
-            newData[value] = this.deepClone(currentDataValue, hash)
-          }
-        })
-        return newData
-      },
-
-      onContextmenu(e, index) {
-        this.menuX = e.clientX + 10
-        this.menuY = e.clientY + 10
-        this.activeIndex = index
-        this.isShowMenu = true
-
-        e.preventDefault()
-      },
-
-      copyLayer() {
-        const layer = this.deepClone(this.componentList[this.activeIndex])
-        this.componentList.push(layer)
-      },
-
-      removeLayer() {
-        this.componentList.splice(this.activeIndex, 1)
-        this.activeIndex = -1
-      },
-
-      onActivated(index) {
-        this.activeIndex = index
-      },
-
-
-      onDrag(x, y, index) {
-        this.$set(this.componentList[index], 'left', x)
-        this.$set(this.componentList[index], 'top', y)
-      },
-
-      onResizing(x, y, w, h, index, type) {
-        this.$set(this.componentList[index], 'left', x)
-        this.$set(this.componentList[index], 'top', y)
-        this.$set(this.componentList[index], 'width', w)
-        this.$set(this.componentList[index], 'height', h)
-
-        if (type.indexOf('Chart') > -1) {
-          // this.$refs[`chart${index}`][0].watchResize()
-        }
-      },
-
-      initCanvas() {
-        var widthScale = (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth
-        var heightScale = (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight
-        this.heightScale = Math.min(widthScale, heightScale)
+    onImageConfirm() {
+      if (!this.form.images.length) {
+        return this.$message.error('请上传图片')
       }
+
+      this.images = [
+        ...this.images,
+        ...this.form.images
+      ]
+
+      this.form.images = []
+      this.isShowAddImg = false
+    },
+
+    setTop() {
+      const maxZindex = Math.max.apply(Math, this.componentList.map(item => {
+        return item.zIndex
+      }))
+
+      this.$set(this.componentList[this.activeIndex], 'zIndex', maxZindex + 1)
+    },
+
+    setBottom() {
+      const item = this.componentList[this.activeIndex]
+      this.componentList.splice(this.activeIndex, 1)
+      this.componentList.unshift(item)
+    },
+
+    getInfo(id) {
+      this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
+        if (res.code === 0) {
+          const data = JSON.parse(res.data.config)
+          this.componentList = data.config
+          this.dashboard = data.dashboard
+          this.images = data.images || []
+        }
+      })
+    },
+
+    back() {
+      this.$emit('close')
+    },
+
+    save() {
+      this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreen`, {
+        config: JSON.stringify({
+          config: this.componentList,
+          dashboard: this.dashboard,
+          images: this.images
+        }),
+        status: 1,
+        title: this.dashboard.title,
+        id: this.params.id || ''
+      }).then(res => {
+        if (res.code == 0) {
+          this.$message.success('保存成功')
+          this.$emit('change', res.data)
+          this.back()
+        }
+      })
+    },
+
+    clone(e) {
+      this.componentList.push(this.deepClone(e))
+    },
+
+    onChange(e) {
+      if (e.indexOf('Chart') > -1) {
+        this.$refs[`chart${this.activeIndex}`][0].refresh()
+      }
+    },
+
+    deepClone(data, hash = new WeakMap()) {
+      if (typeof data !== 'object' || data === null) {
+        throw new TypeError('传入参数不是对象')
+      }
+      if (hash.has(data)) {
+        return hash.get(data)
+      }
+      let newData = {}
+      const dataKeys = Object.keys(data)
+      dataKeys.forEach(value => {
+        const currentDataValue = data[value]
+        if (typeof currentDataValue !== "object" || currentDataValue === null) {
+          newData[value] = currentDataValue
+        } else if (Array.isArray(currentDataValue)) {
+          newData[value] = [...currentDataValue]
+        } else if (currentDataValue instanceof Set) {
+          newData[value] = new Set([...currentDataValue])
+        } else if (currentDataValue instanceof Map) {
+          newData[value] = new Map([...currentDataValue])
+        } else {
+          hash.set(data, data)
+          newData[value] = this.deepClone(currentDataValue, hash)
+        }
+      })
+      return newData
+    },
+
+    onContextmenu(e, index) {
+      this.menuX = e.clientX + 10
+      this.menuY = e.clientY + 10
+      this.activeIndex = index
+      this.isShowMenu = true
+
+      e.preventDefault()
+    },
+
+    copyLayer() {
+      const layer = this.deepClone(this.componentList[this.activeIndex])
+      this.componentList.push(layer)
+    },
+
+    removeLayer() {
+      this.componentList.splice(this.activeIndex, 1)
+      this.activeIndex = -1
+    },
+
+    onActivated(index) {
+      this.activeIndex = index
+    },
+
+
+    onDrag(x, y, index) {
+      this.$set(this.componentList[index], 'left', x)
+      this.$set(this.componentList[index], 'top', y)
+    },
+
+    onResizing(x, y, w, h, index, type) {
+      this.$set(this.componentList[index], 'left', x)
+      this.$set(this.componentList[index], 'top', y)
+      this.$set(this.componentList[index], 'width', w)
+      this.$set(this.componentList[index], 'height', h)
+
+      if (type.indexOf('Chart') > -1) {
+        // this.$refs[`chart${index}`][0].watchResize()
+      }
+    },
+
+    initCanvas() {
+      var widthScale = (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth
+      var heightScale = (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight
+      this.heightScale = Math.min(widthScale, heightScale)
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>

packages/bigscreen/designer/components/RenderElement.vue

@@ -1,141 +1,142 @@
 <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]"/>
+        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="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)"
-        :key="data.height"
-        :theme="theme"
-        :style="{height: data.height + 'px', width: '100%'}" />
+          v-if="data.type === 'table'"
+          :class="'dvScrollBoard' + theme"
+          :config="formatTable(values, data.isShowIndex, data.rowNum)"
+          :key="data.height"
+          :theme="theme"
+          :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]"
-        :ops="data.config"/>
+          v-else-if="data.type === 'barChart1'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="data.config"/>
       <ai-echart
-        v-else-if="data.type === 'barChart2'"
-        style="height: 100%; width: 100%;"
-        :ref="'chart' + index"
-        :theme="theme"
-        :key="`chart${index}`"
-        :data="data[data.dataType]"
-        :ops="data.config"/>
+          v-else-if="data.type === 'barChart2'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :theme="theme"
+          :key="`chart${index}`"
+          :data="values"
+          :ops="data.config"/>
       <ai-echart
-        v-else-if="data.type === 'barChart3'"
-        style="height: 100%; width: 100%;"
-        :ref="'chart' + index"
-        :key="`chart${index}`"
-        :theme="theme"
-        :data="data[data.dataType]"
-        :ops="data.config"/>
+          v-else-if="data.type === 'barChart3'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="data.config"/>
       <ai-echart
-        v-else-if="data.type === 'barChart5'"
-        style="height: 100%; width: 100%;"
-        :ref="'chart' + index"
-        :key="`chart${index}`"
-        :theme="theme"
-        :data="data[data.dataType]"
-        :ops="data.config"/>
+          v-else-if="data.type === 'barChart5'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="data.config"/>
       <ai-echart
-        v-else-if="data.type === 'barChart7'"
-        style="height: 100%; width: 100%;"
-        :ref="'chart' + index"
-        :key="`chart${index}`"
-        :theme="theme"
-        :data="data[data.dataType]"
-        :ops="data.config"/>
+          v-else-if="data.type === 'barChart7'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="data.config"/>
       <ai-echart
-        v-else-if="data.type === 'barChart8'"
-        style="height: 100%; width: 100%;"
-        :ref="'chart' + index"
-        :key="`chart${index}`"
-        :theme="theme"
-        :data="data[data.dataType]"
-        :ops="data.config"/>
+          v-else-if="data.type === 'barChart8'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="data.config"/>
       <ai-echart
-        v-else-if="data.type === 'barChart9'"
-        style="height: 100%; width: 100%;"
-        :ref="'chart' + index"
-        :key="`chart${index}`"
-        :theme="theme"
-        :data="data[data.dataType]"
-        :ops="data.config"/>
+          v-else-if="data.type === 'barChart9'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="data.config"/>
       <ai-echart
-        v-else-if="data.type === 'lineChart1'"
-        style="height: 100%; width: 100%;"
-        :ref="'chart' + index"
-        :key="`chart${index}`"
-        :theme="theme"
-        :data="data[data.dataType]"
-        :ops="lineChart1"/>
+          v-else-if="data.type === 'lineChart1'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="lineChart1"/>
       <ai-echart
-        v-else-if="data.type === 'lineChart2'"
-        style="height: 100%; width: 100%;"
-        :ref="'chart' + index"
-        :key="`chart${index}`"
-        :theme="theme"
-        :data="data[data.dataType]"
-        :ops="lineChart2"/>
+          v-else-if="data.type === 'lineChart2'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="lineChart2"/>
       <ai-echart
-        v-else-if="data.type === 'lineChart3'"
-        style="height: 100%; width: 100%;"
-        :ref="'chart' + index"
-        :key="`chart${index}`"
-        :theme="theme"
-        :data="data[data.dataType]"
-        :ops="data.config"/>
+          v-else-if="data.type === 'lineChart3'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="data.config"/>
       <ai-echart
-        v-else-if="data.type === 'lineChart4'"
-        style="height: 100%; width: 100%;"
-        :ref="'chart' + index"
-        :key="`chart${index}`"
-        :theme="theme"
-        :data="data[data.dataType]"
-        :ops="data.config"/>
+          v-else-if="data.type === 'lineChart4'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="data.config"/>
       <ai-echart
-        v-else-if="data.type === 'lineChart5'"
-        style="height: 100%; width: 100%;"
-        :ref="'chart' + index"
-        :key="`chart${index}`"
-        :theme="theme"
-        :data="data[data.dataType]"
-        :ops="lineChart5"/>
+          v-else-if="data.type === 'lineChart5'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="lineChart5"/>
       <ai-echart
-        v-else-if="data.type === 'pieChart'"
-        style="height: 100%; width: 100%;"
-        :ref="'chart' + index"
-        :key="`chart${index}`"
-        :theme="theme"
-        :data="data[data.dataType]"
-        :ops="pieChart"/>
+          v-else-if="data.type === 'pieChart'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="pieChart"/>
       <ai-echart
-        v-else-if="data.type === 'pieChart1'"
-        style="height: 100%; width: 100%;"
-        :ref="'chart' + index"
-        :key="`chart${index}`"
-        :theme="theme"
-        :data="data[data.dataType]"
-        :ops="pieChart1"/>
+          v-else-if="data.type === 'pieChart1'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="pieChart1"/>
       <ai-echart
-        v-else-if="data.type === 'pieChart3'"
-        style="height: 100%; width: 100%;"
-        :ref="'chart' + index"
-        :key="`chart${index}`"
-        :theme="theme"
-        :data="data[data.dataType]"
-        :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"/>
+          v-else-if="data.type === 'pieChart3'"
+          style="height: 100%; width: 100%;"
+          :ref="'chart' + index"
+          :key="`chart${index}`"
+          :theme="theme"
+          :data="values"
+          :ops="pieChart3"/>
+      <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,124 +145,201 @@
 </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 {
-    name: 'RenderElement',
+export default {
+  name: 'RenderElement',
 
-    props: ['data', 'index', 'theme', 'instance'],
+  props: ['data', 'index', 'theme', 'instance'],
 
-    components: {
-      AiSwiper
-    },
+  components: {
+    AiSwiper
+  },
 
-    data () {
+  data() {
+    return {
+      lineChart1,
+      lineChart2,
+      lineChart5,
+      pieChart,
+      pieChart1,
+      pieChart3,
+      map: null,
+      lib: null
+    }
+  },
+
+  computed: {
+    ...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) {
+        return {
+          header: [],
+          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 {
-        lineChart1,
-        lineChart2,
-        lineChart5,
-        pieChart,
-        pieChart1,
-        pieChart3
+        header: header,
+        data: rows.map(item => {
+          return data.map(v => {
+            return v[item]
+          })
+        }),
+        headerBGC: 'transparent',
+        evenRowBGC: 'transparent',
+        oddRowBGC: 'rgba(0, 133, 255, 0.2)',
+        headerHeight: 42,
+        rowNum: rowNum || 7,
+        index: isShowIndex === '1',
+        waitTime: 8000,
+        carousel: 'page',
+        indexHeader: '排名',
+        align: ['center', 'center', 'center', 'center', 'center']
       }
     },
-
-    computed: {
-      ...mapState(['user'])
-    },
-
-    methods: {
-      formatTable(data, isShowIndex, rowNum) {
-        if (!data.length) {
-          return {
-            header: [],
-            data: []
-          }
-        }
-
-        let rows = []
-        const header = data.map(v => {
-          return v[Object.keys(v)[0]]
+    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])
+          })
         })
-
-        Object.keys(data[0]).forEach((item, index) => {
-          if (index !== 0) {
-            rows.push(item)
-          }
-        })
-
-        return {
-          header: header,
-          data: rows.map(item => {
-            return data.map(v => {
-              return v[item]
-            })
-          }),
-          headerBGC: 'transparent',
-          evenRowBGC: 'transparent',
-          oddRowBGC: 'rgba(0, 133, 255, 0.2)',
-          headerHeight: 42,
-          rowNum: rowNum || 7,
-          index: isShowIndex === '1',
-          waitTime: 8000,
-          carousel: 'page',
-          indexHeader: '排名',
-          align: ['center', 'center', 'center', 'center', 'center']
-        }
-      },
+        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 {
-    ::v-deep .dvScrollBoard1 {
+.render-element {
+  ::v-deep .dvScrollBoard1 {
 
-      .header {
-        background: rgba(0, 0, 0, 0.1)!important;
+    .header {
+      background: rgba(0, 0, 0, 0.1) !important;
 
-        .header-item {
-          color: #FFBB73!important;
-          font-size: 16px!important;
-          font-weight: 600;
-        }
+      .header-item {
+        color: #FFBB73 !important;
+        font-size: 16px !important;
+        font-weight: 600;
+      }
+    }
+
+
+    .rows {
+      font-size: 16px;
+      font-weight: 600;
+      color: #FFFFFF;
+      line-height: 21px;
+      text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.5);
+      background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+
+      & > div:nth-of-type(2n - 1) {
+        background-color: transparent !important;
       }
 
+      & > div:nth-of-type(2n) {
+        background-color: rgba(0, 0, 0, 0.1) !important;
+      }
 
-      .rows {
-        font-size: 16px;
-        font-weight: 600;
-        color: #FFFFFF;
-        line-height: 21px;
-        text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.5);
-        background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-
-        & > div:nth-of-type(2n - 1) {
-          background-color: transparent!important;
-        }
-
-        & > div:nth-of-type(2n) {
-          background-color: rgba(0, 0, 0, 0.1)!important;
-        }
-
-        .index {
-          color: #fff;
-          text-shadow: none;
-          background: transparent;
-          background-color: #BD4921!important;
-          -webkit-background-clip: inherit;
-          -webkit-text-fill-color: #fff;
-        }
+      .index {
+        color: #fff;
+        text-shadow: none;
+        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>

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}

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)
           }
         }