From f3570acc616497327aca407b2f8c7c8a603c3ea4 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Fri, 10 Mar 2023 17:15:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=9A=E5=BB=BA=E4=B8=BB=E9=A2=98=E9=80=82?=
 =?UTF-8?q?=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AiDvRender.vue                     |  37 ++++++-----
 components/layout/AiDvPanel/AiDvPanel.vue     |   8 ++-
 .../layout/AiDvPanel/asset/ic-badge.png       | Bin 0 -> 2304 bytes
 .../layout/AiDvPanel/asset/title-6-dj.png     | Bin 0 -> 1131 bytes
 .../layout/AiDvPanel/borders/border6.vue      |  44 ++++++++++---
 components/layout/AiDvSummary/AiDvSummary.vue |   7 +-
 .../AiDvSummary/components/Summary12.vue      |  13 +++-
 .../AiDvSummary/components/Summary13.vue      |  11 +++-
 components/layout/AiDvTable/AiDvTable.vue     |  61 +++++++++++++++++-
 .../layout/AiDvTable/asset/rankbg-dj.png      | Bin 0 -> 285 bytes
 components/layout/AiRanking/AiRanking.vue     |  48 +++++++++++++-
 .../layout/AiRanking/asset/ranking1-dj.png    | Bin 0 -> 3330 bytes
 .../layout/AiRanking/asset/ranking2-dj.png    | Bin 0 -> 3655 bytes
 .../layout/AiRanking/asset/ranking3-dj.png    | Bin 0 -> 3758 bytes
 .../layout/AiRanking/asset/ranking4-dj.png    | Bin 0 -> 3751 bytes
 .../bigscreen/designer/components/Layout.vue  |  43 ++++++------
 .../bigscreen/designer/components/preview.vue |  18 ------
 ui/packages/tools/AiEchartV2.vue              |   4 +-
 18 files changed, 215 insertions(+), 79 deletions(-)
 create mode 100644 components/layout/AiDvPanel/asset/ic-badge.png
 create mode 100644 components/layout/AiDvPanel/asset/title-6-dj.png
 create mode 100644 components/layout/AiDvTable/asset/rankbg-dj.png
 create mode 100644 components/layout/AiRanking/asset/ranking1-dj.png
 create mode 100644 components/layout/AiRanking/asset/ranking2-dj.png
 create mode 100644 components/layout/AiRanking/asset/ranking3-dj.png
 create mode 100644 components/layout/AiRanking/asset/ranking4-dj.png

diff --git a/components/AiDvRender.vue b/components/AiDvRender.vue
index fb6ee9fe..399d4e9c 100644
--- a/components/AiDvRender.vue
+++ b/components/AiDvRender.vue
@@ -2,26 +2,27 @@
   <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-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="values"/>
+      style="height: 100%; width: 100%;"
+      v-if="data.type !== 'display'"
+      :title="data.title"
+      :theme="theme"
+      :border="data.border || ''">
+      <AiDvSummary v-if="data.type === '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"/>
       <dv-scroll-board
-          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%'}"/>
+        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-v2 v-else-if="/Chart/.test(data.type)"
-                 style="height: 100%; width: 100%;"
-                 :ref="'chart' + index"
-                 :key="`chart${index}`"
-                 :theme="theme"
-                 :data="values"
-                 :ops="chartList[data.config]"/>
+        style="height: 100%; width: 100%;"
+        :ref="'chart' + index"
+        :key="`chart${index}`"
+        :theme="theme"
+        :data="values"
+        :ops="chartList[data.config]"/>
       <!-- <ai-q-map
         v-else-if="data.type=='map'"
         :area-id="data.areaId"
@@ -34,11 +35,13 @@
         v-else-if="data.type === 'AiDvTable'"
         :heigth="'100%'"
         :stripe="data.stripe"
+        :theme="theme"
         :isShowIndex="data.isShowIndex"
         :data="values">
       </AiDvTable>
       <AiRanking
         v-else-if="data.type === 'AiRanking'"
+        :theme="theme"
         :heigth="'100%'"
         :data="values">
       </AiRanking>
diff --git a/components/layout/AiDvPanel/AiDvPanel.vue b/components/layout/AiDvPanel/AiDvPanel.vue
index cf7cc95f..4260362b 100644
--- a/components/layout/AiDvPanel/AiDvPanel.vue
+++ b/components/layout/AiDvPanel/AiDvPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="AiDvPanel">
-    <component :is="border" :title="title" v-if="border">
+    <component :is="border" :title="title" v-if="border" :theme="theme">
       <template v-if="$slots.title" #title>
         <slot name="title"/>
       </template>
@@ -24,7 +24,11 @@ export default {
   components: { Border0, Border1, Border2, Border3, Border4, Border5, border6 },
   props: {
     title: {default: "请传入标题"},
-    border: {default: "border0"}
+    border: {default: "border0"},
+    theme: {
+      type: String,
+      default: '0'
+    }
   },
   mounted() {
   },
diff --git a/components/layout/AiDvPanel/asset/ic-badge.png b/components/layout/AiDvPanel/asset/ic-badge.png
new file mode 100644
index 0000000000000000000000000000000000000000..7972ed818761c01fb85b0362735b5b94d4ff1e86
GIT binary patch
literal 2304
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
a%s&D1W}P}bJjen70000<MNUMnLSTXtSXiL|

literal 0
HcmV?d00001

diff --git a/components/layout/AiDvPanel/asset/title-6-dj.png b/components/layout/AiDvPanel/asset/title-6-dj.png
new file mode 100644
index 0000000000000000000000000000000000000000..de192724054fdee38ed72bdf50ea1649a77f26f3
GIT binary patch
literal 1131
zcmV-x1eE)UP)<h;3K|Lk000e1NJLTq00KP#000IE1^@s6D6=m{000CsNkl<Zc-rk+
zJ!oZB5dP-eyPFW#EU1Y1QweS-2pfM2u}~DW5Nxy(bc+-VyS0Kgilrbf2tq_VK~_XN
z1rZC8wNO|DQAj0<g@q9}fA`GzotY`#0~2l3x8Z!bALq=>cjr5omyqGTC+O(t=;-L^
zn8VJcGe{It$=k?H^4q2Bw(r{cb)|?{1@JWa4*3%KB6*zLBQKIqkoS>alEd=d8x<Y@
zD`fZ5nHzBc%z$x#{P5GUosCaU?%sO+B>PnmFa$h4Am{Nv&Sm^>^-oCezfiA9@8AC>
zj#B@t;Wh95|GvM8n(m!_?Dq-4I1bj<=g3#cb@EMeB&Qr`?jdg{HxW2Ren)=3w6^!a
zg%?&pEbZ>=C@O%Erlg^yuW>K21C$Ek3iXS7*11|Jq^Q6ss)m+gkp1AjMa^Zthay^;
z>#SJBW>PG@5vwp3@mloKDjugoRHGI-5kvG0JKu{aOyhoWP4g5KnCFXYy-%JUt^r6R
z-6uQ+nvLVkN{Z>MhE$0&OD0_#{@HgHBf}qY01T+)vccY)w7y@huBr)h^S>rCzY_Dg
zuAg7AAf8>{_5ZnkK|H&@>krYJ#Q(i7uDSQOZ+5?0odBF9&yha^@^0QSkq_s<^A@=|
z^DfU>1YTV`y^5zEoIpGzC~JUi!*m27!h|7b1)#XKdA7h9x3rkBT-pw3d1{mdD}{N+
z=E6dac`pdzTJ?K!aG+P#EpnQk0`Hw?2@lT`2KNddkrLWGuNc!P?r0WX%DrFl43;$u
z&+HdxMC3}&TJ4G+68>gV!W-OMc!qy*S0m9h&4qPCJ_90$^qRp){(^&{<Ou_|ApSz`
zSma<x<o>W+*Dt1L*LVFQ>#v40cKwmmTdY!X`C25NByS?02W$(#F>;?gkH7^4_Q+ev
zb@KA0_R;-!ssOOmZ<D*^1c(?=q-|h11b}M}H?8IxkDY=TB4W$B=OfM`BjU&xGFNLq
z>6N)0x?q6o4cX7;?jyXf#bF90d)VwbAg;)I+~aFlnxzi;%#uTu_nGzd9tM_Xp2NZ@
z2d(TEIj_ey{Ij>q^O@&|9#h;QhkU$MX?JB$bY)o-g?{Mh=;-L^ING@R2Gu{V7yui`
zQqJeV@-_nd<Z1Fz@<a0LnL+3o@;LdLK=kGHz448U;{@PS8}ZpV8Cn3HAcFx+iV3D_
z7zT!eLTZdjMJx74MKPeN$k^m{fNzAX6{f%d_9Uf{3euoWf*2=`iA$01xOj7;x7$-#
z7_&qgJXv_vtVvsyMXKm4b05VCB-%yf<|Gtqf<XkZEE=Ub)!EQurL@KBSy!q0flG@d
zYfUO)<@d0Tme&eML6!h(mwL>liM_6<m_eUmIyyQ!Iy(O1OUwgV$;ZhL$k)kpGaq4X
xkk68jkRKy(g8ZHo7*0X3)%N@Xv!P=l@F$D?(r9c+W6S^m002ovPDHLkV1go~EO-C_

literal 0
HcmV?d00001

diff --git a/components/layout/AiDvPanel/borders/border6.vue b/components/layout/AiDvPanel/borders/border6.vue
index 567d5bdd..dad0dca2 100644
--- a/components/layout/AiDvPanel/borders/border6.vue
+++ b/components/layout/AiDvPanel/borders/border6.vue
@@ -1,6 +1,9 @@
 <template>
-  <section class="border6">
-    <h2>{{ title }}</h2>
+  <section class="border6" :class="'border6-' + theme">
+    <div class="border6-title">
+      <img src="../asset/ic-badge.png" v-if="theme === '1'" />
+      <h2>{{ title }}</h2>
+    </div>
     <div class="slot">
       <slot/>
     </div>
@@ -10,9 +13,8 @@
 <script>
 export default {
   name: 'border6',
-  props: {
-    title: String
-  }
+
+  props: ['title', 'theme']
 }
 </script>
 
@@ -20,20 +22,33 @@ export default {
 .border6 {
   height: 100%;
 
-  h2 {
+  .border6-title {
+    display: flex;
     position: relative;
     height: 40px;
-    line-height: 26px;
+    // line-height: 26px;
     padding: 4px 0 0 22px;
-    color: #fff;
-    font-size: 22px;
-    font-weight: normal;
+    box-sizing: border-box;
     font-family: PingFangSC-Medium, PingFang SC;
     background-image: url(../asset/title6.png);
     background-position: bottom;
     background-size: 100% 7px;
     background-repeat: no-repeat;
 
+    h2 {
+      line-height: 1;
+      color: #fff;
+      font-size: 20px;
+      font-weight: normal;
+      letter-spacing: 1px;
+    }
+
+    img {
+      width: 28px;
+      height: 28px;
+      margin-right: 8px;
+    }
+
     &:after {
       position: absolute;
       top: 16px;
@@ -47,6 +62,15 @@ export default {
     }
   }
 
+  &.border6-1 .border6-title {
+    background-image: url(../asset/title-6-dj.png);
+    background-position: bottom;
+
+    &:after {
+      background: #FFA086;
+    }
+  }
+
   .slot {
     height: calc(100% - 40px);
     padding-top: 19px;
diff --git a/components/layout/AiDvSummary/AiDvSummary.vue b/components/layout/AiDvSummary/AiDvSummary.vue
index c4a7ff50..0984fed9 100644
--- a/components/layout/AiDvSummary/AiDvSummary.vue
+++ b/components/layout/AiDvSummary/AiDvSummary.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="AiSummary">
-    <component :is="type" :data="data" :keys="keys" :value="value" :summaryTitle="summaryTitle"></component>
+    <component :is="type" :theme="theme" :data="data" :keys="keys" :value="value" :summaryTitle="summaryTitle"></component>
   </div>
 </template>
 
@@ -65,6 +65,11 @@
       value: {
         type: String,
         default: 'value'
+      },
+
+      theme: {
+        type: String,
+        default: '0'
       }
     }
   }
diff --git a/components/layout/AiDvSummary/components/Summary12.vue b/components/layout/AiDvSummary/components/Summary12.vue
index 8bab5aad..ccf2d15e 100644
--- a/components/layout/AiDvSummary/components/Summary12.vue
+++ b/components/layout/AiDvSummary/components/Summary12.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="summary12">
+  <div class="summary12" :class="'summary12-' + theme">
     <div class="summary12-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
       <h2>{{ item[keys] }}</h2>
       <p>{{ item[value] }}</p>
@@ -25,6 +25,11 @@
       value: {
         type: String,
         default: 'value'
+      },
+
+      theme: {
+        type: String,
+        default: '0'
       }
     },
 
@@ -72,5 +77,11 @@
         text-align: left;
       }
     }
+
+    &.summary12-1 .summary12-item {
+      p {
+        color: #FAD88E;
+      }
+    }
   }
 </style>
diff --git a/components/layout/AiDvSummary/components/Summary13.vue b/components/layout/AiDvSummary/components/Summary13.vue
index a074c1d1..b29f64b8 100644
--- a/components/layout/AiDvSummary/components/Summary13.vue
+++ b/components/layout/AiDvSummary/components/Summary13.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="summary13">
+  <div class="summary13" :class="'summary13-' + theme">
     <div class="summary13-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
       <h2>{{ item[keys] }}：</h2>
       <p>{{ item[value] }}</p>
@@ -25,6 +25,11 @@
       value: {
         type: String,
         default: 'value'
+      },
+
+      theme: {
+        type: String,
+        default: '0'
       }
     },
 
@@ -98,5 +103,9 @@
         content: ' ';
       }
     }
+
+    &.summary13-1 {
+
+    }
   }
 </style>
diff --git a/components/layout/AiDvTable/AiDvTable.vue b/components/layout/AiDvTable/AiDvTable.vue
index 0bf8f297..97601058 100644
--- a/components/layout/AiDvTable/AiDvTable.vue
+++ b/components/layout/AiDvTable/AiDvTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="aiDvTable">
+  <div class="aiDvTable" :class="'aiDvTable-' + theme">
     <div class="header">
       <span
         v-for="(item, index) in header"
@@ -49,6 +49,11 @@
       stripe: {
         type: String,
         default: '1'
+      },
+
+      theme: {
+        type: String,
+        default: '0'
       }
     },
 
@@ -114,6 +119,26 @@
   .aiDvTable {
     height: 100%;
     overflow: hidden;
+
+    ::-webkit-scrollbar {
+      width: 5px;
+      height: 14px;
+    }
+
+    ::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      min-height: 20px;
+      background-clip: content-box;
+      box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
+    }
+
+    ::-webkit-scrollbar-track {
+      box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
+    }
+
     .header {
       display: flex;
       align-items: center;
@@ -196,5 +221,39 @@
         }
       }
     }
+
+    &.aiDvTable-1 {
+      ::-webkit-scrollbar {
+        width: 5px;
+        height: 14px;
+      }
+
+      ::-webkit-scrollbar-corner {
+        background: transparent;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        min-height: 20px;
+        background-clip: content-box;
+        box-shadow: 0 0 0 5px rgba(250, 181, 108, 0.5) inset;
+      }
+
+      ::-webkit-scrollbar-track {
+        box-shadow: 1px 1px 5px rgba(50, 181, 108, 0.5) inset;
+      }
+      .header {
+        background: #6e2d2a;
+      }
+
+      .body {
+        div {
+          i {
+            color: #FFA086;
+            background: url(./asset/rankbg-dj.png) no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+      }
+    }
   }
 </style>
diff --git a/components/layout/AiDvTable/asset/rankbg-dj.png b/components/layout/AiDvTable/asset/rankbg-dj.png
new file mode 100644
index 0000000000000000000000000000000000000000..352dc5c20821e20f2978312cd57c1a4ebae8feb4
GIT binary patch
literal 285
zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc3?z4jzqJQaHUT~%uKyQy{$JSfe?c2i07#OA
zQkP#(1Q}Wq<QEL285mjEIeA;!yZa{WIdJ0S>Fa#vZQFsuHJ&bxAr-flPB_bV$bhGL
zuKcNEzxQWnW+oqLO<lyk<f+){PwA07`_*rJpP&+uT`H1!?y!m6(p@h$_x|Xz+S-vU
zv`Dj0xX-UgdCCmN$cs~zQkv@jZ596CJ>8*gk?_txXWJI{T+bBv{A>fK8&mf|$>=$A
jZZBATJJzVB*7k(-iW3$VY~A&@K<@K&^>bP0l+XkKhq!@h

literal 0
HcmV?d00001

diff --git a/components/layout/AiRanking/AiRanking.vue b/components/layout/AiRanking/AiRanking.vue
index 186e6fcd..7a202576 100644
--- a/components/layout/AiRanking/AiRanking.vue
+++ b/components/layout/AiRanking/AiRanking.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="AiRanking">
+  <div class="AiRanking" :class="'AiRanking-' + theme">
     <div class="AiRanking-item" v-for="(item, index) in list" :key="index" :class="'AiRanking-item' + (index + 1)">
       <i>{{ index + 1 }}</i>
       <h2>{{ item.name }}</h2>
@@ -24,6 +24,11 @@
       data: {
         type: Array,
         default: () => []
+      },
+
+      theme: {
+        type: String,
+        default: '0'
       }
     },
 
@@ -162,5 +167,46 @@
         color: #fff;
       }
     }
+
+    &.AiRanking-1 {
+      .AiRanking-item {
+        background: url(./asset/ranking4-dj.png) no-repeat;
+        background-size: 100% 100%;
+
+        &.AiRanking-item1 {
+          background: url(./asset/ranking1-dj.png) no-repeat;
+          background-size: 100% 100%;
+        }
+
+        &.AiRanking-item2 {
+          background: url(./asset/ranking2-dj.png) no-repeat;
+          background-size: 100% 100%;
+        }
+
+        &.AiRanking-item3 {
+          background: url(./asset/ranking3-dj.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .AiRanking-item__rate {
+          position: relative;
+
+          .bar {
+            position: relative;
+            width: calc(100% - 6px);
+            height: 6px;
+            background: linear-gradient(90deg, #ffbb45ff 0%, #ff3e18ff 98%);
+
+            i {
+              border: 1px solid #AA9E93;
+            }
+
+            span {
+              background: #FAB56C;
+              box-shadow: 0 0 10px 0 #fab56c;
+            }
+          }
+        }
+      }
+    }
   }
 </style>
diff --git a/components/layout/AiRanking/asset/ranking1-dj.png b/components/layout/AiRanking/asset/ranking1-dj.png
new file mode 100644
index 0000000000000000000000000000000000000000..d89914e90ef76476ea249e33b5b34998ce54d4fe
GIT binary patch
literal 3330
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
M07*qoM6N<$f=JtJYXATM

literal 0
HcmV?d00001

diff --git a/components/layout/AiRanking/asset/ranking2-dj.png b/components/layout/AiRanking/asset/ranking2-dj.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4bdcec62157f9b74de8c952f6e56ad93434fad0
GIT binary patch
literal 3655
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
UEz|*jK8OG<4Sn@uRh#ht18{p6tpET3

literal 0
HcmV?d00001

diff --git a/components/layout/AiRanking/asset/ranking3-dj.png b/components/layout/AiRanking/asset/ranking3-dj.png
new file mode 100644
index 0000000000000000000000000000000000000000..2aef6add1ec1c2d98e06fc07313b1534e91074c5
GIT binary patch
literal 3758
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
EAK}MRO#lD@

literal 0
HcmV?d00001

diff --git a/components/layout/AiRanking/asset/ranking4-dj.png b/components/layout/AiRanking/asset/ranking4-dj.png
new file mode 100644
index 0000000000000000000000000000000000000000..a14014b00a879d017f7562493ace616ba8cf03b3
GIT binary patch
literal 3751
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
H+lBoPBriLm

literal 0
HcmV?d00001

diff --git a/packages/bigscreen/designer/components/Layout.vue b/packages/bigscreen/designer/components/Layout.vue
index 00a90307..c5c6fd32 100644
--- a/packages/bigscreen/designer/components/Layout.vue
+++ b/packages/bigscreen/designer/components/Layout.vue
@@ -63,32 +63,27 @@
                 style="height: 100%"
                 :title="$route.query.name"
                 :theme="dashboard.theme"
-                :background="dashboard.theme == 1 ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj_bg.png' : (dashboard.backgroundImage[0].url || '')">
+                :background="dashboard.theme == 1 ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj_bg.png' : (dashboard.backgroundImage.length ? dashboard.backgroundImage[0].url : '')">
                 <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">
-                  </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)"
-                      @dragstop="(x, y) => onDrag(x, y,item)"
-                      @resizestop="(x, y, w, h) => onResizing(x, y, w, h, item)"
-                      @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)"
+                    @dragstop="(x, y) => onDrag(x, y,item)"
+                    @resizestop="(x, y, w, h) => onResizing(x, y, w, h, item)"
+                    @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>
diff --git a/packages/bigscreen/designer/components/preview.vue b/packages/bigscreen/designer/components/preview.vue
index 84bb87a5..918404e1 100644
--- a/packages/bigscreen/designer/components/preview.vue
+++ b/packages/bigscreen/designer/components/preview.vue
@@ -54,23 +54,5 @@ export default {
 
 <style lang="scss" scoped>
 .preview {
-  ::-webkit-scrollbar {
-    width: 5px;
-    height: 14px;
-  }
-
-  ::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    min-height: 20px;
-    background-clip: content-box;
-    box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
-  }
-
-  ::-webkit-scrollbar-track {
-    box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
-  }
 }
 </style>
diff --git a/ui/packages/tools/AiEchartV2.vue b/ui/packages/tools/AiEchartV2.vue
index 364720d7..61e696df 100644
--- a/ui/packages/tools/AiEchartV2.vue
+++ b/ui/packages/tools/AiEchartV2.vue
@@ -48,7 +48,7 @@ export default {
         return ['#00F9FF', '#1890FF', '#B13BFF', '#FC3BFF', '#95FF44', '#ea7ccc']
       }
 
-      return ['#D4380D', '#CF1322', '#D55800', '#FA8C16', '#FFC53D', '#FFA940', '#FFC53D', '#780000']
+      return ['#00F9FF', '#1890FF', '#B13BFF', '#FC3BFF', '#95FF44', '#ea7ccc']
     },
 
     chartOptions() {
@@ -200,8 +200,6 @@ export default {
       this.initChart()
       this.getChartData()
     })
-
-    console.log(this.data)
   },
   beforeDestroy() {
     this.timer && clearInterval(this.timer)