秀山金融大屏完成

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">
@@ -422,7 +436,6 @@
 
     currLayout() {
       if (this.activeIndex === -1) return {}
-
       return this.componentList[this.activeIndex]
     },
 

packages/bigscreen/designer/components/RenderElement.vue

@@ -1,17 +1,17 @@
 <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%'}"/>
@@ -21,7 +21,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 === '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>
@@ -169,14 +170,20 @@
       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,6 +220,43 @@
         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>
@@ -256,12 +297,49 @@
       .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>

packages/bigscreen/designer/config.js

@@ -526,6 +526,8 @@ const components = [
             left: 0,
             top: 0,
             mask: '2',
+            pulseLines: 1,
+            mapStyle:"e51987628aee5206d4c9ca8c6e98b4f7",
             areaId: '',
             zIndex: 1,
             apiData: [],

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