已增加整轮播图和地图连线

2023-10-07 11:30:13 +08:00
parent 39a344b054
commit 50541832cc
12 changed files with 451 additions and 153 deletions
--- a/components/AiDvRender.vue
+++ b/components/AiDvRender.vue
@@ -1,24 +1,24 @@
 <template>
  <div class="AiDvRender" style="width: 100%; height: 100%;">
-    <ai-dv-display v-if="data.type === 'display'" :title="data.title" :list="values"></ai-dv-display>
+    <ai-dv-display v-if="currentType === 'display'" :title="data.title" :list="values"/>
    <ai-dv-panel
        style="height: 100%; width: 100%;"
-        v-if="data.type !== 'display'"
+        v-if="currentType !== 'display'"
        :title="data.title"
        :theme="theme"
        :border="data.border || ''">
-      <AiDvSummary v-if="data.type === 'summary'" :theme="theme" :summaryTitle="data.summaryTitle"
+      <AiDvSummary v-if="currentType === 'summary'" :theme="theme" :summaryTitle="data.summaryTitle"
                   :key="`summary${index}`" :type="data.display"
                   :data="values"/>
-      <AiSwiper v-else-if="data.type === 'swiper'" :heigth="'100%'" :data="values"/>
+      <AiSwiper v-else-if="currentType === 'swiper'" :heigth="'100%'" :data="values" :dotIndicator="data.dotIndicator"/>
      <dv-scroll-board
-          v-if="data.type === 'table'"
+          v-if="currentType === '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-v2 v-else-if="/Chart/.test(data.type)"
+      <ai-echart-v2 v-else-if="/Chart/.test(currentType)"
                    style="height: 100%; width: 100%;"
                    :ref="'chart' + index"
                    :key="`chart-${index}`"
@@ -26,7 +26,7 @@
                    :data="values"
                    :ops="chartList[data.config]"/>
      <!-- <ai-q-map
-        v-else-if="data.type=='map'"
+        v-else-if="currentType=='map'"
        :area-id="data.areaId"
        :markers="markers"
        :is3d="data.is3D === '1'"
@@ -34,7 +34,7 @@
        :is3dAround="data.is3dAround === '1'">
      </ai-q-map> -->
      <AiDvTable
-          v-else-if="data.type === 'AiDvTable'"
+          v-else-if="currentType === 'AiDvTable'"
          :heigth="'100%'"
          :stripe="data.stripe"
          :theme="theme"
@@ -43,15 +43,15 @@
          :data="values">
      </AiDvTable>
      <AiRanking
-          v-else-if="data.type === 'AiRanking'"
+          v-else-if="currentType === 'AiRanking'"
          :theme="theme"
          :heigth="'100%'"
          :subType="data.subType"
          :data="values">
      </AiRanking>
-      <AiDvMap v-else-if="data.type === 'AiDvMap'" style="width: 100%; height: 100%" :ref="'chart' + index"
+      <AiDvMap v-else-if="currentType === 'AiDvMap'" style="width: 100%; height: 100%" :ref="'chart' + index"
               :key="`AiDvMap${index}`" :theme="theme"></AiDvMap>
-      <ai-map v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId" :is3d="data.is3d==1"
+      <ai-map v-else-if="currentType=='map'" :mask="data.mask === '1'" :areaId="data.areaId" :is3d="data.is3d==1"
              :is3dAround="data.is3dAround === '1'"
              :map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map"
              :lib.sync="lib"
@@ -61,11 +61,11 @@
          <div ref="mapInfoWin"/>
        </div>
      </ai-map>
-      <ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"/>
+      <ai-monitor :src="data.src" v-else-if="currentType === 'monitor'" :type="data.monitorType"/>
      <video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay
-             v-else-if="data.type === 'video'"/>
-      <AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="data.type === 'partyOrg'" :instance="instance"/>
-      <!-- <ai-sprite v-else-if="/building/.test(data.type)" v-bind="data" is3D @init="mods[data.type]"/> -->
+             v-else-if="currentType === 'video'"/>
+      <AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="currentType === 'partyOrg'" :instance="instance"/>
+      <!-- <ai-sprite v-else-if="/building/.test(currentType)" v-bind="data" is3D @init="mods[currentType]"/> -->
    </ai-dv-panel>
  </div>
 </template>
@@ -109,14 +109,7 @@ export default {
  },
  computed: {
    ...mapState(['user']),
-    values() {
-      if (!this.data) {
-        return []
-      }
-      return this.data.type === 'map' ? this.data[this.data.dataType]?.map(e => {
-        return {lng: e['经度'], lat: e['纬度'], label: e['地区名称'], ...e}
-      }) || [] : this.data[this.data.dataType]
-    },
+    values: v => v.data?.[v.data?.dataType] || [],
    currentType: v => v.data.type
  },
  watch: {
@@ -186,7 +179,9 @@ export default {
          map.setPitch(0)
          this.mapDialog = false
        })
-        this.values.filter(e => e.lng).map((e) => {
+        const markers = Array.isArray(this.values) ? this.values : this.values.markers
+        const polylines = Array.isArray(this.values) ? [] : this.values.polylines || []
+        markers.map(e => ({lng: e['经度'], lat: e['纬度'], label: e['地区名称'], ...e})).filter(e => e.lng).map((e) => {
          const {icon = "https://cdn.cunwuyun.cn/dvcp/h5/Location2.png"} = e
          return new AMap.Marker({
            map,
@@ -204,6 +199,9 @@ export default {
            })
          })
        })
+        polylines.filter(e => e.path?.length > 0)?.map(e => new AMap.Polyline({
+          map, strokeColor: "#00FFAE", ...e, path: e.path.map(p => new AMap.LngLat(p[1], p[0]))
+        }))
        this.data.is3d > 0 && map.setPitch(65)
        if (this.data.is3dAround == 1) {
          this.timer = setInterval(() => map?.setRotation(360, false, 16000))
@@ -215,7 +213,7 @@ export default {
    }
  },
  mounted() {
-    if (this.data.type == 'table') {
+    if (this.currentType == 'table') {
      this.$injectLib("https://cdn.cunwuyun.cn/datav.map.vue.js")
    }
  }
--- a/components/AiSwiper.vue
+++ b/components/AiSwiper.vue
@@ -1,93 +1,107 @@
 <template>
-  <div class="swiper">
-    <el-carousel height="100%" indicator-position="none">
+  <div class="swiper" :class="{dotIndicator}">
+    <el-carousel height="100%" :indicator-position="indicator" :arrow="arrow">
      <el-carousel-item v-for="(item, index) in data" :key="index">
-        <img :src="item.img">
+        <img v-if="item.img" :src="item.img">
        <div class="swiper-content" v-if="item.title">
          <h2>{{ item.title }}</h2>
          <p>{{ item.content }}</p>
        </div>
+        <div class="pad-h20" v-else-if="item.content" v-html="item.content"/>
      </el-carousel-item>
    </el-carousel>
  </div>
 </template>

 <script>
-  export default {
-    name: 'AiSwiper',
+export default {
+  name: 'AiSwiper',

-    props: {
-      data: {
-        type: Array,
-        default: () => []
-      },
-
-      width: {
-        type: String,
-        default: '100%'
-      },
-      heigth: {
-        type: String,
-        default: '100%'
-      }
+  props: {
+    data: {
+      type: Array,
+      default: () => []
    },

-    data () {
-      return {
-
-      }
+    width: {
+      type: String,
+      default: '100%'
    },
+    dotIndicator: Boolean//点指示器
+  },
+  computed: {
+    arrow: v => v.dotIndicator ? 'never' : 'hover',
+    indicator: v => v.dotIndicator ? undefined : 'none'
+  },
+  data() {
+    return {}
+  },

-    mounted () {
+  mounted() {

-    },
+  },

-    methods: {
-
-    }
-  }
+  methods: {}
+}
 </script>

 <style lang="scss" scoped>
-  .swiper {
-    width: 100%;
-    height: 100%;
-    padding: 20px 0 0;
+.swiper {
+  width: 100%;
+  height: 100%;
+  padding: 20px 0 0;

-    :deep( .el-carousel ){
-      height: 100%;
-    }
+  &.dotIndicator {
+    :deep(.el-carousel ) {

-    img {
-      width: 100%;
-      height: 100%;
-    }
-
-    .swiper-content {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      z-index: 1;
-      width: 100%;
-      padding: 10px;
-      text-align: center;
-      background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, #000000 100%);
-
-      h2 {
-        margin-bottom: 4px;
-        color: #fff;
-        text-align: center;
-        font-size: 18px;
+      .el-carousel__button {
+        height: 8px;
+        width: 8px;
+        border-radius: 50%;
+        background-color: rgba(103, 123, 154, 0.5);
      }
-
-      p {
-        line-height: 22px;
-        white-space: pre-line;
-        color: #B6DFFF;
-        font-size: 14px;
-        text-align: left;
-        text-indent: 28px;
+      .is-active{
+        .el-carousel__button{
+          background-color: #02FEFF;
+        }
      }
    }
  }
+
+  :deep( .el-carousel ) {
+    height: 100%;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .swiper-content {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    padding: 10px;
+    text-align: center;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, #000000 100%);
+
+    h2 {
+      margin-bottom: 4px;
+      color: #fff;
+      text-align: center;
+      font-size: 18px;
+    }
+
+    p {
+      line-height: 22px;
+      white-space: pre-line;
+      color: #B6DFFF;
+      font-size: 14px;
+      text-align: left;
+      text-indent: 28px;
+    }
+  }
+}
 </style>
--- a/components/layout/AiDvPanel/AiDvPanel.vue
+++ b/components/layout/AiDvPanel/AiDvPanel.vue
@@ -25,10 +25,27 @@ import border10 from "./borders/border10";
 import border11 from "./borders/border11";
 import border12 from "./borders/border12";
 import border13 from "./borders/border13";
+import Border14 from "./borders/border14.vue";

 export default {
  name: "AiDvPanel",
-  components: { Border0, Border1, Border2, Border3, Border4, Border5, border6, border7, border8, border9, border10, border11, border12, border13 },
+  components: {
+    Border14,
+    Border0,
+    Border1,
+    Border2,
+    Border3,
+    Border4,
+    Border5,
+    border6,
+    border7,
+    border8,
+    border9,
+    border10,
+    border11,
+    border12,
+    border13
+  },
  props: {
    title: {default: "请传入标题"},
    border: {default: "border0"},
--- a/components/layout/AiDvPanel/asset/border14-icon.svg
+++ b/components/layout/AiDvPanel/asset/border14-icon.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="35px" height="22px" viewBox="0 0 35 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>形状结合</title>
+    <defs>
+        <path d="M1072,220 L1072,228 L1068,224 L1072,220 Z M1064,220 L1064,228 L1060,224 L1064,220 Z M1056,220 L1056,228 L1052,224 L1056,220 Z" id="path-1"></path>
+        <filter x="-60.0%" y="-150.0%" width="220.0%" height="400.0%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.760001846   0 0 0 0 0.291006098  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <filter x="-50.0%" y="-125.0%" width="200.0%" height="350.0%" filterUnits="objectBoundingBox" id="filter-3">
+            <feGaussianBlur stdDeviation="2" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.97961238   0 0 0 0 0.9078125  0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="钟祥大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="形状结合" transform="translate(-1045.000000, -213.000000)">
+            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+            <use fill="#FFC143" fill-rule="evenodd" xlink:href="#path-1"></use>
+            <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>
--- a/components/layout/AiDvPanel/asset/border14.svg
+++ b/components/layout/AiDvPanel/asset/border14.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1478px" height="142px" viewBox="0 0 1478 142" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 2</title>
+    <defs>
+        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#5A86FF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#5AACFF" offset="36.7624563%"></stop>
+            <stop stop-color="#7EEFFF" offset="50.0376124%"></stop>
+            <stop stop-color="#5AACFF" offset="62.9709649%"></stop>
+            <stop stop-color="#5A86FF" offset="100%"></stop>
+        </linearGradient>
+        <path d="M547,0.25 C556.749607,0.25 565.858022,4.76380868 571.818048,12.456132 L572.118303,12.85 C577.460114,19.9724141 585.628339,24.4148226 594.493503,25.038944 L594.977736,25.069194 L800,39.9977736 L594.814342,27.814741 C585.045723,27.2819072 576.001062,22.5266807 570.024678,14.8021845 L569.718303,14.4 C564.430381,7.34943641 556.184331,3.14910303 547.389942,3.00389299 L547,3 C483.876874,3 434.876874,3 400,3 C365.099096,3 316.099096,3 253,3 C244.186796,3 235.797203,7.07663928 230.404401,14.0250247 L230.118303,14.4 C224.248419,22.2265123 215.269839,27.1053605 205.52688,27.7834215 L205.022264,27.814741 L0,39.9977736 L204.858871,25.069194 C213.748674,24.5842957 221.980256,20.260414 227.424142,13.235831 L227.718303,12.85 C233.568068,5.05031402 242.693181,0.406510872 252.423056,0.253884 L253,0.25 C316.068383,0.0833333333 365.068383,3.55271368e-15 400,3.55271368e-15 C434.846161,3.55271368e-15 483.846161,0.0833333333 547,0.25 Z" id="path-2"></path>
+        <filter x="-45.4%" y="-147.5%" width="190.9%" height="479.4%" filterUnits="objectBoundingBox" id="filter-3">
+            <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="8" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="20" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.254665854   0 0 0 0 0.715268342  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="0%" y1="49.1111111%" x2="100%" y2="50%" id="linearGradient-4">
+            <stop stop-color="#0085FF" stop-opacity="0.502840909" offset="0%"></stop>
+            <stop stop-color="#0085FF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="钟祥大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="公共招聘" transform="translate(-221.000000, -146.000000)">
+            <g id="编组-2" transform="translate(560.000000, 180.000000)">
+                <g id="路径-3备份" fill-rule="nonzero">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                    <use fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                </g>
+                <path d="M190.442478,46.7350415 L194.690265,47.0710935 L200,54 L195.752212,53.663948 L190.442478,46.7350415 Z M181.946903,46.0629376 L186.19469,46.3989895 L191.504425,53.3278961 L187.256637,52.9918441 L181.946903,46.0629376 Z M173.451327,45.3919885 L177.699115,45.7280404 L183.00885,52.656947 L178.761062,52.320895 L173.451327,45.3919885 Z M164.955752,44.7198845 L169.20354,45.0559365 L174.513274,51.984843 L170.265487,51.6487911 L164.955752,44.7198845 Z M156.460177,44.0489354 L160.707965,44.3849874 L166.017699,51.3138939 L161.769912,50.9778419 L156.460177,44.0489354 Z M147.964602,43.3768315 L152.212389,43.7128834 L157.522124,50.64179 L153.274336,50.305738 L147.964602,43.3768315 Z M139.469027,42.7047275 L143.716814,43.0407795 L149.026549,49.969686 L144.778761,49.6336341 L139.469027,42.7047275 Z M130.973451,42.0326236 L135.221239,42.3686756 L140.530973,49.2975821 L136.283186,48.9615301 L130.973451,42.0326236 Z M122.477876,41.3605197 L126.725664,41.6965716 L132.035398,48.6254782 L127.787611,48.2894262 L122.477876,41.3605197 Z M113.982301,40.6884157 L118.230088,41.0244677 L123.539823,47.9533742 L119.292035,47.6173223 L113.982301,40.6884157 Z M105.486726,40.0163118 L109.734513,40.3523638 L115.044248,47.2812703 L110.79646,46.9452183 L105.486726,40.0163118 Z M96.9911504,39.3442079 L101.238938,39.6802598 L106.548673,46.6091664 L102.300885,46.2731144 L96.9911504,39.3442079 Z M88.4955752,38.6721039 L92.7433628,39.0081559 L98.0530973,45.9370624 L93.8053097,45.6010105 L88.4955752,38.6721039 Z M80,38 L84.2477876,38.336052 L89.5575221,45.2649585 L85.3097345,44.9289065 L80,38 Z" id="形状" fill="url(#linearGradient-4)" transform="translate(140.000000, 46.000000) scale(-1, 1) translate(-140.000000, -46.000000) "></path>
+                <path d="M710.442478,46.7350415 L714.690265,47.0710935 L720,54 L715.752212,53.663948 L710.442478,46.7350415 Z M701.946903,46.0629376 L706.19469,46.3989895 L711.504425,53.3278961 L707.256637,52.9918441 L701.946903,46.0629376 Z M693.451327,45.3919885 L697.699115,45.7280404 L703.00885,52.656947 L698.761062,52.320895 L693.451327,45.3919885 Z M684.955752,44.7198845 L689.20354,45.0559365 L694.513274,51.984843 L690.265487,51.6487911 L684.955752,44.7198845 Z M676.460177,44.0489354 L680.707965,44.3849874 L686.017699,51.3138939 L681.769912,50.9778419 L676.460177,44.0489354 Z M667.964602,43.3768315 L672.212389,43.7128834 L677.522124,50.64179 L673.274336,50.305738 L667.964602,43.3768315 Z M659.469027,42.7047275 L663.716814,43.0407795 L669.026549,49.969686 L664.778761,49.6336341 L659.469027,42.7047275 Z M650.973451,42.0326236 L655.221239,42.3686756 L660.530973,49.2975821 L656.283186,48.9615301 L650.973451,42.0326236 Z M642.477876,41.3605197 L646.725664,41.6965716 L652.035398,48.6254782 L647.787611,48.2894262 L642.477876,41.3605197 Z M633.982301,40.6884157 L638.230088,41.0244677 L643.539823,47.9533742 L639.292035,47.6173223 L633.982301,40.6884157 Z M625.486726,40.0163118 L629.734513,40.3523638 L635.044248,47.2812703 L630.79646,46.9452183 L625.486726,40.0163118 Z M616.99115,39.3442079 L621.238938,39.6802598 L626.548673,46.6091664 L622.300885,46.2731144 L616.99115,39.3442079 Z M608.495575,38.6721039 L612.743363,39.0081559 L618.053097,45.9370624 L613.80531,45.6010105 L608.495575,38.6721039 Z M600,38 L604.247788,38.336052 L609.557522,45.2649585 L605.309735,44.9289065 L600,38 Z" id="形状" fill="url(#linearGradient-4)"></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/components/layout/AiDvPanel/borders/border14.vue
+++ b/components/layout/AiDvPanel/borders/border14.vue
@@ -0,0 +1,64 @@
+<template>
+  <section class="border14">
+    <div class="border14-title">
+      <div class="icon left"/>
+      <h2>{{ title }}</h2>
+      <div class="icon"/>
+    </div>
+    <div class="slot">
+      <slot/>
+    </div>
+  </section>
+</template>
+<script>
+export default {
+  name: 'border14',
+  props: ['title', 'theme']
+}
+</script>
+
+<style lang="scss" scoped>
+.border14 {
+  height: 100%;
+  background-image: linear-gradient(180deg, rgba(61, 88, 161, 0) 0%, rgba(13, 36, 119, 0.9) 99%);
+  background-size: 100% 100%;
+  background-color: rgba(#0D2477, .3);
+
+  .border14-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 68px;
+    box-sizing: border-box;
+    background-image: url(../asset/border14.svg);
+    background-size: 1478px 142px;
+    background-repeat: no-repeat;
+    padding-top: 30px;
+    background-position: center -20px;
+
+    h2 {
+      font-size: 26px;
+      color: #09F0FE;
+      margin: 0 20px;
+    }
+
+    .icon {
+      width: 20px;
+      height: 8px;
+      background-image: url("../asset/border14-icon.svg");
+      background-size: 35px 22px;
+      background-repeat: no-repeat;
+      background-position: center;
+
+      &.left {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+
+  .slot {
+    height: calc(100% - 68px);
+  }
+}
+</style>
--- a/packages/bigscreen/designer/components/Layout.vue
+++ b/packages/bigscreen/designer/components/Layout.vue
@@ -109,13 +109,7 @@
            <component-config v-show="configIndex === 0" :config="currLayout" v-bind="$props"/>
            <div class="layout-right__content--wrapper" v-show="configIndex === 1"
                 v-if="currLayout.type !== 'title' && currLayout.type !== 'video'">
-              <data-config
-                  ref="dataConfig"
-                  :instance="instance"
-                  :dict="dict"
-                  :options="currLayout"
-                  @change="onChange('barChart')">
-              </data-config>
+              <data-config v-model="currLayout" :instance="instance" :dict="dict" @change="onChange('barChart')"/>
            </div>
          </div>
        </template>
@@ -214,7 +208,8 @@
        </el-table-column>
      </ai-table>
    </ai-dialog>
-    <ai-dialog :visible.sync="isShowAddImg" width="580px" append-to-body title="添加素材" @closed="form.images = []" @onConfirm="onImageConfirm">
+    <ai-dialog :visible.sync="isShowAddImg" width="580px" append-to-body title="添加素材" @closed="form.images = []"
+               @onConfirm="onImageConfirm">
      <ai-uploader
          :instance="instance"
          v-model="form.images"
@@ -297,12 +292,14 @@ export default {
    workbenchTransform() {
      return `scale(${this.heightScale})`
    },
-
-    currLayout() {
-      if (this.activeIndex === -1) return {}
-      return this.componentList[this.activeIndex]
+    currLayout: {
+      set(v) {
+        this.componentList.splice(this.activeIndex, 1, v)
+      },
+      get() {
+        return this.activeIndex > -1 ? this.componentList[this.activeIndex] : {}
+      }
    },
-
    widget() {
      if (this.components.length && this.components[this.parentIndex].list.length) {
        return this.components[this.parentIndex].list[this.subIndex].list
@@ -410,13 +407,9 @@ export default {
    clone(e) {
      this.componentList.push(this.deepClone(e))
    },
-
-    onChange(e) {
-      if (e.indexOf('Chart') > -1) {
-        this.$refs[`chart${this.activeIndex}`]?.[0]?.refresh()
-      }
+    onChange() {
+      this.$refs[`chart${this.activeIndex}`]?.[0]?.refresh()
    },
-
    deepClone(obj) {
      if (obj instanceof Object) {
        let newObj = {}
@@ -993,8 +986,8 @@ export default {
    }

    :deep(.layout-right__content ) {
-      height: calc(100% - 40px);
-      overflow-y: overlay;
+      height: calc(100% - 50px);
+      overflow-y: auto;
      overflow-x: hidden;

      .layout-config__group {
--- a/packages/bigscreen/designer/components/form/DataConfig.vue
+++ b/packages/bigscreen/designer/components/form/DataConfig.vue
@@ -1,19 +1,32 @@
 <template>
  <div class="layout-config__group--wrapper">
-    <div class="layout-config__group" v-if="options.type=='map'">
-      <div flex>
-        <span class="layoutTitle fill">标记点设置</span>
-        <el-button type="text" icon="iconfont iconAdd" @click="handleMapMarker()">添加</el-button>
-      </div>
-      <div class="layout-config__item" v-for="(item,i) in options.staticData" :key="i">
-        <label v-text="item.label"/>
-        <div class="layout-config__item--right">
-          <el-input :value="[item.lat,item.lng].join(',')" readonly size="small"/>
-          <el-button type="text" icon="el-icon-edit" @click="handleMapMarker(item,i)"/>
+    <template v-if="options.type=='map'">
+      <ai-fold>
+        <div slot="title" class="flex w100">
+          <span class="layoutTitle fill">标记点设置</span>
+          <el-button type="text" icon="iconfont iconAdd" @click="handleMapMarker()">添加</el-button>
        </div>
-      </div>
-    </div>
-    <div class="layout-config__group" v-else-if="options.monitorType !== 'hik' && options.monitorType !== 'dahua'">
+        <div class="layout-config__item" v-for="(item,i) in markers" :key="i">
+          <label v-text="item.label"/>
+          <div class="layout-config__item--right">
+            <el-input :value="[item.lat,item.lng].join(',')" readonly size="small"/>
+            <el-button type="text" icon="el-icon-edit" @click="handleMapMarker(item,i)"/>
+          </div>
+        </div>
+      </ai-fold>
+      <ai-fold title="标记点连线">
+        <ai-dialog-btn :modal="false" dialog-title="设置标记点连线" :customFooter="false" @onConfirm="savePolylines"
+                       @open="handleMapPolylines">
+          <code-editor slot="btn" readonly :value="JSON.stringify(options.staticData.polylines, null, 2)" lang="json"
+                       theme="github" width="100%" height="250" placeholder="测试默认值"/>
+          <el-button class="m-center" type="text" @click="handleMapPolylineDoc" :closable="false">
+            点击查看连线设置参考文档
+          </el-button>
+          <code-editor v-model="json" lang="json" theme="github" width="100%" height="440"/>
+        </ai-dialog-btn>
+      </ai-fold>
+    </template>
+    <div class="layout-config__group" v-else-if="!['hik','dahua'].includes(options.monitorType)">
      <h2>基础设置</h2>
      <div class="layout-config__item">
        <label>数据类型</label>
@@ -29,8 +42,10 @@
        </div>
      </div>
      <div class="layout-config__code" v-if="options.dataType === 'staticData'">
-        <el-button @click="showEditor" class="layout-config__code--btn" title="编辑" type="text" icon="iconfont iconjdq_led_edit"></el-button>
-        <code-editor readonly :value="JSON.stringify(options.staticData, null, 2)" lang="json" theme="github" width="100%" height="250"></code-editor>
+        <el-button @click="showEditor" class="layout-config__code--btn" title="编辑" type="text"
+                   icon="iconfont iconjdq_led_edit"></el-button>
+        <code-editor readonly :value="JSON.stringify(options.staticData, null, 2)" lang="json" theme="github"
+                     width="100%" height="250"></code-editor>
      </div>
      <template v-else-if="options.dataType === 'dynamicData'">
        <div class="layout-config__item">
@@ -38,10 +53,10 @@
          <div class="layout-config__item--right">
            <el-select size="mini" v-model="options.sourceDataId" placeholder="请选择数据源" @change="onDataChange">
              <el-option
-                v-for="item in sourceData"
-                :key="item.id"
-                :label="item.description"
-                :value="item.id">
+                  v-for="item in sourceData"
+                  :key="item.id"
+                  :label="item.description"
+                  :value="item.id">
              </el-option>
            </el-select>
          </div>
@@ -65,7 +80,8 @@
        </div>
      </div>
    </div>
-    <div class="layout-config__group" v-if="options.dataType !== 'staticData' && options.type === 'monitor' &&['cmcc','slw'].includes(options.monitorType)">
+    <div class="layout-config__group"
+         v-if="options.dataType !== 'staticData' && options.type === 'monitor' &&['cmcc','slw'].includes(options.monitorType)">
      <h2>字段设置</h2>
      <div class="layout-config__item">
        <label>监控视频</label>
@@ -81,7 +97,8 @@
        </div>
      </div>
    </div>
-    <div class="layout-config__group" v-if="options.dataType !== 'staticData' && options.type !== 'monitor' && keys.length && options.type !== 'table'">
+    <div class="layout-config__group"
+         v-if="options.dataType !== 'staticData' && options.type !== 'monitor' && keys.length && options.type !== 'table'">
      <h2>字段设置</h2>
      <div class="layout-config__item">
        <label>X轴设置</label>
@@ -99,7 +116,8 @@
      <div class="layout-config__item">
        <label>Y轴设置</label>
        <div class="layout-config__item--right">
-          <el-select size="mini" multiple :multiple-limit="options.type.indexOf('pie') > -1 ? 1 : 100" v-model="options.dataY" collapse-tags placeholder="请选择Y轴"
+          <el-select size="mini" multiple :multiple-limit="options.type.indexOf('pie') > -1 ? 1 : 100"
+                     v-model="options.dataY" collapse-tags placeholder="请选择Y轴"
                     @change="onChooseChange">
            <el-option
                v-for="(item, index) in keys"
@@ -122,7 +140,8 @@
        <code-editor v-model="json" lang="json" theme="github" width="100%" height="440"></code-editor>
      </div>
    </ai-dialog>
-    <ai-dialog class="layout-config__edit" v-model="showMapEditor" title="设置地图标记点" append-to-body @close="form={}" @confirm="saveMarker">
+    <ai-dialog class="layout-config__edit" v-model="showMapEditor" title="设置地图标记点" append-to-body
+               @close="form={}" @confirm="saveMarker">
      <el-form :model="form" size="small" ref="mapMarker" label-width="120px">
        <el-form-item label="标记点名称" :rules="{required:true,message:'请填写标记点名称'}">
          <el-input placeholder="用于地图上展示对标记点的文字标签" v-model="form.label" clearable/>
@@ -149,17 +168,19 @@ import 'brace/mode/json'
 import 'brace/snippets/json';
 import 'brace/theme/github';
 import 'brace/theme/monokai';
+import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";

 export default {
  name: 'dataConfig',
-
+  model: {
+    prop: "options",
+    event: "change"
+  },
  props: {
    options: Object,
    instance: Function,
    dict: Object,
-    params: Object,
  },
-
  data() {
    return {
      dataTypes: [
@@ -177,25 +198,32 @@ export default {
        }
      ],
      isShowEditor: false,
-      json: {},
+      json: "",
      sourceDataId: '',
      sourceData: [],
      keys: [],
      monitorList: [],
      list: [],
-      jsonData: `{"title":"测试json数据","children":[{"name":"子项名称", "desc":"子项说明" },{"name":"子项名称1", "desc":"子项说明1" }]}`,
      showMapEditor: false,
      form: {}
    }
  },
-
-  components: {
-    CodeEditor
+  computed: {
+    markers: v => v.options.staticData?.markers || []
+  },
+  components: {
+    AiDialogBtn,
+    CodeEditor,
+  },
+  created() {
+    if (this.options.type == "map" && Array.isArray(this.options.staticData)) {//处理历史数据,并更新最新数据结构
+      const values = this.$copy(this.options)
+      values.staticData = {markers: this.$copy(this.options.staticData)}
+      this.$emit("change", values)
+    }
  },
-
  mounted() {
    this.getDataList()
-
    if ((this.options.dataY && this.options.dataY.length && this.options.dataX) || this.options.type === 'monitor') {
      const api = this.options.dataType === 'apiData' ? this.options.api : `/app/appdiylargescreen/statisticsByLsid?id=${this.options.sourceDataId}`
      this.instance.post(api).then(res => {
@@ -364,10 +392,19 @@ export default {
        const i = this.$copy(this.form.index)
        delete this.form.index
        if (i > -1) {
-          this.options.staticData.splice(i, 1, this.form)
-        } else this.options.staticData.push(this.form)
+          this.options.staticData.markers.splice(i, 1, this.form)
+        } else this.options.staticData.markers.push(this.form)
        this.showMapEditor = false
      })
+    },
+    savePolylines() {
+      this.$set(this.options.staticData, 'polylines', JSON.parse(this.json))
+    },
+    handleMapPolylines() {
+      this.json = JSON.stringify(this.options.staticData.polylines || [{path: [[31.547706, 107.224325], [31.552456, 107.201185]]}])
+    },
+    handleMapPolylineDoc() {
+      window.open('https://lbs.amap.com/api/javascript-api-v2/documentation#polyline')
    }
  }
 }
@@ -384,11 +421,15 @@ export default {
  }
 }

+.ai-dialog__wrapper {
+  color: #333;
+}
+
 .layout-config__group--wrapper {
  .layout-config__code .bin-ace-editor {
  }

-  .layout-config__group {
+  :deep(.layout-config__group) {
    padding: 10px 10px 20px;
    border-bottom: 1px solid #000000;

@@ -491,6 +532,10 @@ export default {
        color: #fff;
      }
    }
+
+    :deep(.el-collapse) {
+      height: 18px;
+    }
  }
 }
 </style>
--- a/packages/bigscreen/designer/config.js
+++ b/packages/bigscreen/designer/config.js
@@ -552,9 +552,9 @@ const components = [
            dataType: 'staticData',
            dynamicData: [],
            staticData: [
-              { name: '列1', value: 23 },
-              { name: '列2', value: 12 },
-              { name: '列2', value: 12 }
+              {name: '列1', value: 23},
+              {name: '列2', value: 12},
+              {name: '列2', value: 12}
            ]
          }
        ]
@@ -610,7 +610,7 @@ const components = [
            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
            is3dAround: '0',
            limitArea: '0',
-            layers:'vector'
+            layers: 'vector'
          },
          {
            type: 'AiDvMap',
@@ -743,6 +743,29 @@ const components = [
              }
            ],
            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
+          },
+          {
+            type: 'swiper',
+            label: '轮播图(点指示器)',
+            width: 800,
+            height: 358,
+            zIndex: 1,
+            border: 'border14',
+            dataType: 'staticData',
+            staticData: [
+              {
+                content: `歙县众城湖羊养殖专业合作社
+							徐晓红 - 18273645627
+							歙县郑村镇唐跃村碉墅`
+              },
+              {
+                content: `歙县众城湖羊养殖专业合作社
+							徐晓红 - 18273645627
+							歙县郑村镇唐跃村碉墅`
+              },
+            ],
+            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png',
+            dotIndicator: true
          }
        ]
      },
--- a/ui/lib/js/utils.js
+++ b/ui/lib/js/utils.js
@@ -220,5 +220,17 @@ export default {
  $load,
  $reg,
  Area,
-  ID
+  ID,
+  $arrDepth: (arr) => {
+    if (Array.isArray(arr)) {
+      let max = 1
+      for (let i = 0; i < arr.length; i++) {
+        const depth = this.$arrDepth(arr[i])
+        if (depth > max) {
+          max = depth
+        }
+      }
+      return max
+    } else return 0
+  }
 }
--- a/ui/lib/styles/common.scss
+++ b/ui/lib/styles/common.scss
@@ -295,7 +295,7 @@ input::-ms-input-placeholder {
 /**
 自定义弹性盒子快速用
 */
-div[flex] {
+div[flex], .flex {
  display: flex;
  align-items: center;

@@ -717,3 +717,8 @@ h1, h2, h3, p {
    pointer-events: all;
  }
 }
+
+.m-center {
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
--- a/ui/packages/layout/AiFold.vue
+++ b/ui/packages/layout/AiFold.vue
@@ -0,0 +1,66 @@
+<template>
+  <section class="AiFold">
+    <div class="flex">
+      <div class="expand mar-r8" :class="arrow" @click="collapse=!collapse"/>
+      <div class="flex title fill">
+        <div v-if="!$slots.title" v-text="title"/>
+        <slot name="title" v-else/>
+      </div>
+    </div>
+    <div class="content" :class="{collapse}">
+      <slot/>
+    </div>
+  </section>
+</template>
+<script>
+export default {
+  name: "AiFold",
+  props: {
+    title: String,
+    expand: Boolean
+  },
+  data() {
+    return {
+      collapse: true
+    }
+  },
+  computed: {
+    arrow: v => v.collapse ? 'el-icon-arrow-right' : 'el-icon-arrow-down'
+  },
+  methods: {},
+  created() {
+    if (this.expand) this.collapse = false
+  }
+}
+</script>
+<style scoped lang="scss">
+.AiFold {
+  padding: 10px;
+  border-bottom: 1px solid #000;
+
+  .title {
+    width: 100%;
+  }
+
+  .content {
+    box-sizing: border-box;
+    height: initial;
+    overflow: hidden;
+    padding-top: 8px;
+
+    &.collapse {
+      height: 0;
+      padding-top: 0;
+    }
+  }
+
+  .expand {
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+      opacity: .8;
+    }
+  }
+}
+</style>