From d8cb636342d39649da370cb94711108802d48ff7 Mon Sep 17 00:00:00 2001
From: "hong.yang" <hong.yang@ustcinfo.com>
Date: Wed, 13 Sep 2023 16:05:06 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E7=BB=84=E4=BB=B6=E5=9F=BA?=
 =?UTF-8?q?=E7=A1=80=E9=85=8D=E7=BD=AE=E6=96=B0=E5=A2=9E=E8=BE=B9=E6=A1=86?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

组件基础配置新增边框配置属性
---
 .../dataroom/core/module/chart/bean/Chart.java       | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/bean/Chart.java b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/bean/Chart.java
index c0d536e3..bb80ffef 100644
--- a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/bean/Chart.java
+++ b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/bean/Chart.java
@@ -76,4 +76,16 @@ public class Chart {
     @ApiModelProperty(notes = "主题配置")
     private Map<String, Object> theme;
 
+
+    /**
+     * 边框配置,格式如下
+     * {
+     *    type: '',
+     *    titleHeight: 60,
+     *    fontSize: 30,
+     *    color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']
+     */
+    @ApiModelProperty(notes = "边框配置")
+    private Map<String, Object> border;
+
 }

From 2b023a13b1156ff39b943d72008dc26e3513e6af Mon Sep 17 00:00:00 2001
From: "liu.tao3" <liu.tao3@ustcinfo.com>
Date: Wed, 13 Sep 2023 16:24:24 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E8=BE=B9=E6=A1=86?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BasicComponents/Button/setting.vue        |  12 +-
 .../BasicComponents/ChartTab/setting.vue      |  12 +-
 .../BasicComponents/CurrentTime/setting.vue   |  12 +-
 .../BasicComponents/DigitalFlop/setting.vue   |  12 +-
 .../BasicComponents/FlyMap/setting.vue        |  12 +-
 .../BasicComponents/FlyMap/settingConfig.js   |   2 +-
 .../HorizontalLine/setting.vue                |  12 +-
 .../BasicComponents/IframeChart/setting.vue   |  12 +-
 .../BasicComponents/Input/setting.vue         |  12 +-
 .../BasicComponents/LinkChart/setting.vue     |  12 +-
 .../packages/BasicComponents/Map/setting.vue  |  12 +-
 .../BasicComponents/Map/settingConfig.js      |   2 +-
 .../BasicComponents/Marquee/setting.vue       |  12 +-
 .../BasicComponents/Picture/setting.vue       |  12 +-
 .../ScreenScrollBoard/setting.vue             |  12 +-
 .../ScreenScrollRanking/setting.vue           |  12 +-
 .../BasicComponents/Tables/setting.vue        |  49 +++-----
 .../BasicComponents/Texts/setting.vue         |  12 +-
 .../BasicComponents/ThemeSelect/setting.vue   |  12 +-
 .../BasicComponents/ThemeSwitcher/setting.vue |  12 +-
 .../BasicComponents/TimeCountDown/setting.vue |  12 +-
 .../BasicComponents/VerticalLine/setting.vue  |  12 +-
 .../BasicComponents/Video/setting.vue         |  12 +-
 .../RightSetting/BorderSetting.vue            | 117 ++++++++++++++++++
 .../RightSetting/G2CustomSetting.vue          |   9 ++
 .../BorderComponent1/index.vue                |   9 +-
 .../BorderComponent2/index.vue                |   1 +
 data-room-ui/packages/G2Plots/plotList.js     |   4 +-
 .../RemoteComponents/remoteComponentsList.js  |   4 +-
 data-room-ui/packages/Render/RenderCard.vue   |  19 ++-
 .../js/config/basicComponentsConfig.js        |   2 +-
 31 files changed, 392 insertions(+), 66 deletions(-)
 create mode 100644 data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue

diff --git a/data-room-ui/packages/BasicComponents/Button/setting.vue b/data-room-ui/packages/BasicComponents/Button/setting.vue
index bf70ef18..a9e1c99a 100644
--- a/data-room-ui/packages/BasicComponents/Button/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Button/setting.vue
@@ -19,6 +19,14 @@
           <div class="lc-field-body">
             <PosWhSetting :config="config" />
           </div>
+          <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
+          </div>
           <SettingTitle>基础</SettingTitle>
           <div class="lc-field-body">
             <el-form-item label="按钮名称">
@@ -115,6 +123,7 @@
 </template>
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import IconPicker from 'data-room-ui/IconPicker/index.vue'
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
@@ -124,7 +133,8 @@ export default {
     IconPicker,
     ColorPicker,
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   props: {
     config: {
diff --git a/data-room-ui/packages/BasicComponents/ChartTab/setting.vue b/data-room-ui/packages/BasicComponents/ChartTab/setting.vue
index adfc1712..557b47d8 100644
--- a/data-room-ui/packages/BasicComponents/ChartTab/setting.vue
+++ b/data-room-ui/packages/BasicComponents/ChartTab/setting.vue
@@ -17,6 +17,14 @@
           clearable
         />
       </el-form-item>
+       <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="120px"
+              :config="config.border"
+            />
+          </div>
       <SettingTitle>位置</SettingTitle>
       <div class="lc-field-body">
         <PosWhSetting
@@ -178,6 +186,7 @@ import draggable from 'vuedraggable'
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import { chartSettingMixins } from 'data-room-ui/js/mixins/chartSettingMixins'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import CloneDeep from 'lodash-es/cloneDeep'
 import plotList from 'data-room-ui/G2Plots/plotList'
 import { randomString } from 'data-room-ui/js/utils'
@@ -186,7 +195,8 @@ export default {
   components: {
     PosWhSetting,
     SettingTitle,
-    draggable
+    draggable,
+    BorderSetting
   },
   mixins: [chartSettingMixins],
   data () {
diff --git a/data-room-ui/packages/BasicComponents/CurrentTime/setting.vue b/data-room-ui/packages/BasicComponents/CurrentTime/setting.vue
index 375d74f1..a7fb211b 100644
--- a/data-room-ui/packages/BasicComponents/CurrentTime/setting.vue
+++ b/data-room-ui/packages/BasicComponents/CurrentTime/setting.vue
@@ -28,6 +28,14 @@
       <div class="setting-wrap">
         <PosWhSetting :config="config" />
       </div>
+       <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
+          </div>
       <SettingTitle>基础</SettingTitle>
       <div class="setting-wrap">
         <el-form-item
@@ -85,11 +93,13 @@
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 export default {
   name: 'CurrentTimeSetting',
   components: {
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   data () {
     return {
diff --git a/data-room-ui/packages/BasicComponents/DigitalFlop/setting.vue b/data-room-ui/packages/BasicComponents/DigitalFlop/setting.vue
index d3883424..b19ec83f 100644
--- a/data-room-ui/packages/BasicComponents/DigitalFlop/setting.vue
+++ b/data-room-ui/packages/BasicComponents/DigitalFlop/setting.vue
@@ -26,6 +26,14 @@
           <SettingTitle>位置</SettingTitle>
           <div class="lc-field-body">
             <PosWhSetting :config="config" />
+          </div>
+           <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
           </div>
           <SettingTitle>基础</SettingTitle>
           <div class="lc-field-body">
@@ -147,13 +155,15 @@
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 export default {
   name: 'BarSetting',
   components: {
     ColorPicker,
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   data () {
     return {
diff --git a/data-room-ui/packages/BasicComponents/FlyMap/setting.vue b/data-room-ui/packages/BasicComponents/FlyMap/setting.vue
index 28bc82c9..cd1113a8 100644
--- a/data-room-ui/packages/BasicComponents/FlyMap/setting.vue
+++ b/data-room-ui/packages/BasicComponents/FlyMap/setting.vue
@@ -24,6 +24,14 @@
       <div class="lc-field-body">
         <PosWhSetting :config="config" />
       </div>
+       <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
+          </div>
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item
@@ -299,6 +307,7 @@
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import { chartSettingMixins } from 'data-room-ui/js/mixins/chartSettingMixins'
 import ColorSelect from 'data-room-ui/ColorMultipleSelect/index.vue'
+ import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 export default {
@@ -307,7 +316,8 @@ export default {
     ColorSelect,
     ColorPicker,
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   mixins: [chartSettingMixins],
   props: {},
diff --git a/data-room-ui/packages/BasicComponents/FlyMap/settingConfig.js b/data-room-ui/packages/BasicComponents/FlyMap/settingConfig.js
index bd908caf..acd975b1 100644
--- a/data-room-ui/packages/BasicComponents/FlyMap/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/FlyMap/settingConfig.js
@@ -106,7 +106,7 @@ export const FlyMapData = {
   name: '飞线图',
   title: '飞线图',
   icon: Icon.getNameList()[18],
-  border:{type:'',color:''},
+  border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
   className:
     'com.gccloud.dataroom.core.module.chart.components.ScreenFlyMapChart',
   w: 800,
diff --git a/data-room-ui/packages/BasicComponents/HorizontalLine/setting.vue b/data-room-ui/packages/BasicComponents/HorizontalLine/setting.vue
index b678a05e..e9521bac 100644
--- a/data-room-ui/packages/BasicComponents/HorizontalLine/setting.vue
+++ b/data-room-ui/packages/BasicComponents/HorizontalLine/setting.vue
@@ -27,6 +27,14 @@
           <SettingTitle>位置</SettingTitle>
           <div class="lc-field-body">
             <PosWhSetting :config="config" />
+          </div>
+           <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
           </div>
           <SettingTitle>基础</SettingTitle>
           <div class="lc-field-body">
@@ -77,12 +85,14 @@
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 export default {
   name: 'Border14Setting',
   components: {
     ColorPicker,
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   props: {
     config: {
diff --git a/data-room-ui/packages/BasicComponents/IframeChart/setting.vue b/data-room-ui/packages/BasicComponents/IframeChart/setting.vue
index 151ef58d..82c25118 100644
--- a/data-room-ui/packages/BasicComponents/IframeChart/setting.vue
+++ b/data-room-ui/packages/BasicComponents/IframeChart/setting.vue
@@ -29,6 +29,14 @@
       <div class="setting-wrap">
         <PosWhSetting :config="config" />
       </div>
+       <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
+          </div>
       <SettingTitle>基础</SettingTitle>
       <div class="setting-wrap">
         <el-form-item
@@ -49,11 +57,13 @@
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 export default {
   name: 'IframeChartSetting',
   components: {
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   data () {
     return {
diff --git a/data-room-ui/packages/BasicComponents/Input/setting.vue b/data-room-ui/packages/BasicComponents/Input/setting.vue
index 1d3f0e2a..d59a82a6 100644
--- a/data-room-ui/packages/BasicComponents/Input/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Input/setting.vue
@@ -71,6 +71,14 @@
           <SettingTitle>位置</SettingTitle>
           <div class="lc-field-body">
             <PosWhSetting :config="config" />
+          </div>
+           <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
           </div>
           <SettingTitle>基础</SettingTitle>
           <div class="lc-field-body">
@@ -183,6 +191,7 @@
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import IconPicker from 'data-room-ui/IconPicker/index.vue'
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 export default {
   name: 'InputSetting',
@@ -190,7 +199,8 @@ export default {
     ColorPicker,
     IconPicker,
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   props: {
     config: {
diff --git a/data-room-ui/packages/BasicComponents/LinkChart/setting.vue b/data-room-ui/packages/BasicComponents/LinkChart/setting.vue
index 7a61253f..a63b7e76 100644
--- a/data-room-ui/packages/BasicComponents/LinkChart/setting.vue
+++ b/data-room-ui/packages/BasicComponents/LinkChart/setting.vue
@@ -31,6 +31,14 @@
       <div class="bs-setting-wrap">
         <PosWhSetting :config="config" />
       </div>
+       <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
+          </div>
       <SettingTitle>基础</SettingTitle>
       <div class="bs-setting-wrap">
         <el-form-item
@@ -117,13 +125,15 @@
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import TextGradient from 'data-room-ui/BigScreenDesign/RightSetting/TextGradient/index'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 export default {
   name: 'LinkChartSetting',
   components: {
     TextGradient,
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   data () {
     return {
diff --git a/data-room-ui/packages/BasicComponents/Map/setting.vue b/data-room-ui/packages/BasicComponents/Map/setting.vue
index 42f4afd0..07e39504 100644
--- a/data-room-ui/packages/BasicComponents/Map/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Map/setting.vue
@@ -24,6 +24,14 @@
       <div class="lc-field-body">
         <PosWhSetting :config="config" />
       </div>
+       <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
+          </div>
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item
@@ -261,6 +269,7 @@ import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import { chartSettingMixins } from 'data-room-ui/js/mixins/chartSettingMixins'
 import ColorSelect from 'data-room-ui/ColorMultipleSelect/index.vue'
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 export default {
   name: 'BarSetting',
@@ -268,7 +277,8 @@ export default {
     ColorSelect,
     ColorPicker,
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   mixins: [chartSettingMixins],
   props: {},
diff --git a/data-room-ui/packages/BasicComponents/Map/settingConfig.js b/data-room-ui/packages/BasicComponents/Map/settingConfig.js
index ad3564f4..501feec9 100644
--- a/data-room-ui/packages/BasicComponents/Map/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/Map/settingConfig.js
@@ -95,7 +95,7 @@ export const mapData = {
   name: '地图',
   title: '地图',
   icon: Icon.getNameList()[5],
-  border:{type:''},
+  border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
   className:
     'com.gccloud.dataroom.core.module.chart.components.ScreenMapChart',
   w: 800,
diff --git a/data-room-ui/packages/BasicComponents/Marquee/setting.vue b/data-room-ui/packages/BasicComponents/Marquee/setting.vue
index f16d62b1..e52557b7 100644
--- a/data-room-ui/packages/BasicComponents/Marquee/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Marquee/setting.vue
@@ -31,6 +31,14 @@
       <div class="lc-field-body">
         <PosWhSetting :config="config" />
       </div>
+       <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
+          </div>
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item
@@ -311,6 +319,7 @@
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 import IconSvg from 'data-room-ui/SvgIcon'
 export default {
@@ -319,7 +328,8 @@ export default {
     PosWhSetting,
     ColorPicker,
     SettingTitle,
-    IconSvg
+    IconSvg,
+    BorderSetting
   },
   data () {
     return {
diff --git a/data-room-ui/packages/BasicComponents/Picture/setting.vue b/data-room-ui/packages/BasicComponents/Picture/setting.vue
index ee9b8a74..48bbc62d 100644
--- a/data-room-ui/packages/BasicComponents/Picture/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Picture/setting.vue
@@ -31,6 +31,14 @@
       <div class="lc-field-body">
         <PosWhSetting :config="config" />
       </div>
+       <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
+          </div>
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item
@@ -105,12 +113,14 @@
 </template>
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+ import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 export default {
   name: 'PicSetting',
   components: {
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   data () {
     return {
diff --git a/data-room-ui/packages/BasicComponents/ScreenScrollBoard/setting.vue b/data-room-ui/packages/BasicComponents/ScreenScrollBoard/setting.vue
index 6dfa58a2..e6ece80d 100644
--- a/data-room-ui/packages/BasicComponents/ScreenScrollBoard/setting.vue
+++ b/data-room-ui/packages/BasicComponents/ScreenScrollBoard/setting.vue
@@ -27,6 +27,14 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
+         <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
+          </div>
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="表头背景色">
@@ -111,13 +119,15 @@
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 export default {
   name: 'BarSetting',
   components: {
     ColorPicker,
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   data () {
     return {
diff --git a/data-room-ui/packages/BasicComponents/ScreenScrollRanking/setting.vue b/data-room-ui/packages/BasicComponents/ScreenScrollRanking/setting.vue
index 4a1305bc..7e1ff104 100644
--- a/data-room-ui/packages/BasicComponents/ScreenScrollRanking/setting.vue
+++ b/data-room-ui/packages/BasicComponents/ScreenScrollRanking/setting.vue
@@ -26,6 +26,14 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
+         <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
+          </div>
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item
@@ -71,11 +79,13 @@
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 export default {
   name: 'BarSetting',
   components: {
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   data () {
     return {
diff --git a/data-room-ui/packages/BasicComponents/Tables/setting.vue b/data-room-ui/packages/BasicComponents/Tables/setting.vue
index a54fb816..441f5e39 100644
--- a/data-room-ui/packages/BasicComponents/Tables/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Tables/setting.vue
@@ -9,32 +9,24 @@
       class="setting-body bs-el-form"
     >
       <SettingTitle>基础</SettingTitle>
-      <el-form-item
-        class="lc-field-body"
-        label="名称"
-      >
-        <el-input
-          v-model="config.title"
-          clearable
-        />
-      </el-form-item>
-      <el-form-item
-        class="lc-field-body"
-        label="边框"
-        v-if="config.border"
-      >
-        <el-button
-          size="small"
-          type="primary"
-          @click="init"
+      <div class="lc-field-body">
+        <el-form-item
+          label="名称"
         >
-          选择边框
-        </el-button>
-        <BorderSelect
-          v-model="config.border.type"
-          ref="BorderSelect"
-         />
-      </el-form-item>
+          <el-input
+            v-model="config.title"
+            clearable
+          />
+        </el-form-item>
+      </div>
+       <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="120px"
+              :config="config.border"
+            />
+          </div>
       <SettingTitle>位置</SettingTitle>
       <div class="lc-field-body">
         <PosWhSetting
@@ -110,7 +102,7 @@
   </div>
 </template>
 <script>
-import BorderSelect from 'data-room-ui/BorderSelect/index.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
 import { chartSettingMixins } from 'data-room-ui/js/mixins/chartSettingMixins'
@@ -120,7 +112,7 @@ export default {
     ColorPicker,
     PosWhSetting,
     SettingTitle,
-    BorderSelect
+    BorderSetting
   },
   mixins: [chartSettingMixins],
   data () {
@@ -154,9 +146,6 @@ export default {
   watch: {},
   mounted () { },
   methods: {
-    init(){
-      this.$refs.BorderSelect.init()
-    }
   }
 }
 </script>
diff --git a/data-room-ui/packages/BasicComponents/Texts/setting.vue b/data-room-ui/packages/BasicComponents/Texts/setting.vue
index b31aa1ef..ad80faca 100644
--- a/data-room-ui/packages/BasicComponents/Texts/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Texts/setting.vue
@@ -31,6 +31,14 @@
       <div class="lc-field-body">
         <PosWhSetting :config="config" />
       </div>
+       <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
+          </div>
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item
@@ -64,6 +72,7 @@
 </template>
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import TextGradient from 'data-room-ui/BigScreenDesign/RightSetting/TextGradient/index'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 export default {
@@ -71,7 +80,8 @@ export default {
   components: {
     TextGradient,
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   data () {
     return {
diff --git a/data-room-ui/packages/BasicComponents/ThemeSelect/setting.vue b/data-room-ui/packages/BasicComponents/ThemeSelect/setting.vue
index 1a5721be..2ff28ad1 100644
--- a/data-room-ui/packages/BasicComponents/ThemeSelect/setting.vue
+++ b/data-room-ui/packages/BasicComponents/ThemeSelect/setting.vue
@@ -27,6 +27,14 @@
       <div class="lc-field-body">
         <PosWhSetting :config="config" />
       </div>
+       <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
+          </div>
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item
@@ -60,6 +68,7 @@
 </template>
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import TextGradient from 'data-room-ui/BigScreenDesign/RightSetting/TextGradient/index'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 export default {
@@ -67,7 +76,8 @@ export default {
   components: {
     TextGradient,
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   data () {
     return {
diff --git a/data-room-ui/packages/BasicComponents/ThemeSwitcher/setting.vue b/data-room-ui/packages/BasicComponents/ThemeSwitcher/setting.vue
index 57594d8b..02ffba9a 100644
--- a/data-room-ui/packages/BasicComponents/ThemeSwitcher/setting.vue
+++ b/data-room-ui/packages/BasicComponents/ThemeSwitcher/setting.vue
@@ -17,6 +17,14 @@
       <div class="lc-field-body">
         <PosWhSetting :config="config" />
       </div>
+       <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
+          </div>
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item
@@ -46,11 +54,13 @@
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 export default {
   name: 'ThemeSwitcherSetting',
   components: {
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   data () {
     return {
diff --git a/data-room-ui/packages/BasicComponents/TimeCountDown/setting.vue b/data-room-ui/packages/BasicComponents/TimeCountDown/setting.vue
index 8199efec..4ce3769e 100644
--- a/data-room-ui/packages/BasicComponents/TimeCountDown/setting.vue
+++ b/data-room-ui/packages/BasicComponents/TimeCountDown/setting.vue
@@ -27,6 +27,14 @@
       <div class="lc-field-body">
         <PosWhSetting :config="config" />
       </div>
+       <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
+          </div>
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item
@@ -84,11 +92,13 @@
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 export default {
   name: 'TimeCountDownSetting',
   components: {
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   data () {
     return {
diff --git a/data-room-ui/packages/BasicComponents/VerticalLine/setting.vue b/data-room-ui/packages/BasicComponents/VerticalLine/setting.vue
index ba69f24c..0cda6b66 100644
--- a/data-room-ui/packages/BasicComponents/VerticalLine/setting.vue
+++ b/data-room-ui/packages/BasicComponents/VerticalLine/setting.vue
@@ -28,6 +28,14 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
+         <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
+          </div>
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="背景色一">
@@ -75,13 +83,15 @@
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 export default {
   name: 'Border14Setting',
   components: {
     ColorPicker,
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   props: {
     config: {
diff --git a/data-room-ui/packages/BasicComponents/Video/setting.vue b/data-room-ui/packages/BasicComponents/Video/setting.vue
index 98e842ca..2cc624d3 100644
--- a/data-room-ui/packages/BasicComponents/Video/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Video/setting.vue
@@ -28,6 +28,14 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
+         <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+            />
+          </div>
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="视频链接">
@@ -63,12 +71,14 @@
 </template>
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 export default {
   name: 'Border14Setting',
   components: {
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSetting
   },
   props: {
     config: {
diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue
new file mode 100644
index 00000000..1528386a
--- /dev/null
+++ b/data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue
@@ -0,0 +1,117 @@
+
+<template>
+  <div>
+    <el-form-item
+      :label-width="labelWidth"
+      label="边框"
+    >
+      <el-button
+        size="small"
+        type="primary"
+        @click="init"
+      >
+        选择边框
+      </el-button>
+      <BorderSelect
+        v-model="config.type"
+        ref="BorderSelect"
+        />
+    </el-form-item>
+    <el-form-item
+      :label-width="labelWidth"
+      label="标题高度"
+    >
+      <el-input-number
+        v-model="config.titleHeight"
+        class="bs-el-input-number"
+        :min="0"
+        :step="1"
+      />
+    </el-form-item>
+    <el-form-item
+      :label-width="labelWidth"
+      label="标题字体大小"
+    >
+      <el-input-number
+        v-model="config.fontSize"
+        class="bs-el-input-number"
+        :min="0"
+        :step="1"
+      />
+    </el-form-item>
+    <el-form-item
+      :label-width="labelWidth"
+      label="颜色"
+    >
+     <!-- <color-select
+      v-model="config.color"
+    /> -->
+    <div
+        style="
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+      "
+        class="color-picker-box"
+      >
+        <el-color-picker
+          v-for="(colorItem, colorItemIndex) in config.color"
+          :key="colorItemIndex"
+          v-model="config.color[colorItemIndex]"
+          popper-class="bs-el-color-picker"
+          show-alpha
+          class="start-color"
+        />
+      </div>
+    </el-form-item>
+  </div>
+</template>
+<script>
+import ColorSelect from 'data-room-ui/ColorMultipleSelect/index.vue'
+import BorderSelect from 'data-room-ui/BorderSelect/index.vue'
+export default {
+  name: '',
+  components: {
+    BorderSelect,
+    ColorSelect
+  },
+  props: {
+    config: {
+      type: Object,
+      default: () => ({
+        type: '',
+        titleHeight: 0,
+        fontSize: 0,
+        h: 0,
+        color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']
+      })
+    },
+    labelWidth: {
+      type: String,
+      default: '100px'
+    }
+  },
+  data () {
+    return {
+
+    }
+  },
+  mounted () {},
+  methods: {
+    init(){
+      this.$refs.BorderSelect.init()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-color-picker__trigger {
+  border-color: var(--bs-el-border);
+}
+.color-picker-box{
+  ::v-deep .el-color-picker__trigger {
+    width: 27px!important;
+  }
+}
+</style>
diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/G2CustomSetting.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/G2CustomSetting.vue
index 043ad596..852248e6 100644
--- a/data-room-ui/packages/BigScreenDesign/RightSetting/G2CustomSetting.vue
+++ b/data-room-ui/packages/BigScreenDesign/RightSetting/G2CustomSetting.vue
@@ -21,6 +21,13 @@
           />
         </el-form-item>
       </div>
+      <div class="lc-field-body">
+        <BorderSetting
+          v-if="config.border"
+          label-width="120px"
+          :config="config.border"
+        />
+      </div>
       <SettingTitle>位置</SettingTitle>
       <div class="lc-field-body">
         <PosWhSetting
@@ -158,6 +165,7 @@
   </div>
 </template>
 <script>
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import { chartSettingMixins } from 'data-room-ui/js/mixins/chartSettingMixins'
 import ColorSelect from 'data-room-ui/ColorMultipleSelect/index.vue'
@@ -173,6 +181,7 @@ export default {
     PaddingSetting,
     GradualSetting,
     PosWhSetting,
+    BorderSetting,
     SettingTitle
   },
   mixins: [chartSettingMixins],
diff --git a/data-room-ui/packages/BorderComponents/BorderComponent1/index.vue b/data-room-ui/packages/BorderComponents/BorderComponent1/index.vue
index ed4aea03..01b7a66f 100644
--- a/data-room-ui/packages/BorderComponents/BorderComponent1/index.vue
+++ b/data-room-ui/packages/BorderComponents/BorderComponent1/index.vue
@@ -6,10 +6,7 @@
     <dv-border-box-1
       :id="'dataV' + config.code"
     >
-      <!-- <span style="font-size:20px;color:#fff;height:20px">测试标题</span>
-      <div style="height:calc(100% - 40px)">
-        <slot/>
-      </div> -->
+    <div class="element" v-if="config.border&&config.border.type" :style="`font-size:${config.border.fontSize}px;line-height:${config.border.titleHeight}px;color:${config.border.color[0]};height:${config.border.titleHeight};margin:0 0 0 20px`">{{config.title}}</div>
     </dv-border-box-1>
   </div>
 </template>
@@ -44,6 +41,10 @@ export default {
   border-radius: 4px;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
+  .element{
+    display: flex;
+    align-items: center;
+  }
 }
 
 .title-box {
diff --git a/data-room-ui/packages/BorderComponents/BorderComponent2/index.vue b/data-room-ui/packages/BorderComponents/BorderComponent2/index.vue
index 5e38587b..742ae2c5 100644
--- a/data-room-ui/packages/BorderComponents/BorderComponent2/index.vue
+++ b/data-room-ui/packages/BorderComponents/BorderComponent2/index.vue
@@ -7,6 +7,7 @@
       :id="'dataV' + config.code"
       :key="updateKey"
     >
+    <div class="element" v-if="config.border&&config.border.type" style="box-sizing: content-box;font-size:40px;color:#fff;height:50px;margin:20px 0 0 20px">{{config.title}}</div>
     </dv-border-box-2>
   </div>
 </template>
diff --git a/data-room-ui/packages/G2Plots/plotList.js b/data-room-ui/packages/G2Plots/plotList.js
index 82c1172b..c12125e5 100644
--- a/data-room-ui/packages/G2Plots/plotList.js
+++ b/data-room-ui/packages/G2Plots/plotList.js
@@ -32,7 +32,7 @@ function getPlotList (files) {
       category: configMapKey,
       name: config.name,
       title: config.title,
-      border:{type:''},
+      border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
       icon: null,
       img: require(`../G2Plots/images/componentLogo/${config.title}.png`),
       className:
@@ -64,7 +64,7 @@ export function getCustomPlots () {
       category: config.category,
       name: config.name,
       title: config.title,
-      border:{type:''},
+      border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
       icon: null,
       img: config.img,
       className:
diff --git a/data-room-ui/packages/RemoteComponents/remoteComponentsList.js b/data-room-ui/packages/RemoteComponents/remoteComponentsList.js
index 1de2e1bd..5846a60b 100644
--- a/data-room-ui/packages/RemoteComponents/remoteComponentsList.js
+++ b/data-room-ui/packages/RemoteComponents/remoteComponentsList.js
@@ -32,7 +32,7 @@ export function getRemoteComponents (comList) {
       title: config.title,
       icon: null,
       img: config.img,
-      border:{type:''},
+      border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
       className:
         'com.gccloud.dataroom.core.module.chart.components.RemoteComponentChart',
       w: 450,
@@ -64,7 +64,7 @@ export function getRemoteComponentConfig (code, name) {
     title: name,
     icon: null,
     img: null,
-    border:{type:''},
+    border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
     className:
       'com.gccloud.dataroom.core.module.chart.components.RemoteComponentChart',
     w: 450,
diff --git a/data-room-ui/packages/Render/RenderCard.vue b/data-room-ui/packages/Render/RenderCard.vue
index 1a89699c..8168468d 100644
--- a/data-room-ui/packages/Render/RenderCard.vue
+++ b/data-room-ui/packages/Render/RenderCard.vue
@@ -5,7 +5,7 @@
 -->
 
 <template>
-  <div class="render-item-wrap">
+  <div class="content">
     <component
       v-if="config.border&&config.border.type"
       :is="resolveComponentType(config.border.type)"
@@ -14,7 +14,7 @@
       :key="`border${config.key}`"
       :config="config"
     />
-    <div class="element" v-if="config.border&&config.border.type" style="box-sizing:content-box;font-size:20px;color:#fff;margin:20px 0 0 20px">{{config.title}}</div>
+    <div class="render-item-wrap" :style="`height:calc(100% - ${(config.border&&config.border.type)?config.border.titleHeight:0}px)`">
        <component
         :is="resolveComponentType(config.type)"
         :id="`${config.code}`"
@@ -23,7 +23,9 @@
         :config="config"
         @styleHandler="styleHandler"
       />
+    </div>
   </div>
+
 </template>
 <script>
 // import commonMixins from 'data-room-ui/js/mixins/commonMixins'
@@ -62,7 +64,9 @@ export default {
     }
   },
   data () {
-    return {}
+    return {
+      height:0
+    }
   },
   computed: {
   },
@@ -91,12 +95,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.content{
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+}
 .render-item-wrap {
   width: 100%;
   height: 100%;
   display: flex;
-  flex-direction: column;
-  align-content: center;
   position: relative;
   overflow: hidden;
   box-sizing: border-box;
diff --git a/data-room-ui/packages/js/config/basicComponentsConfig.js b/data-room-ui/packages/js/config/basicComponentsConfig.js
index 34141f6e..6bb249e8 100644
--- a/data-room-ui/packages/js/config/basicComponentsConfig.js
+++ b/data-room-ui/packages/js/config/basicComponentsConfig.js
@@ -43,7 +43,7 @@ basicConfigList = basicConfigList.map((item) => {
 export function basicComponentsConfig(item) {
   return {
     ...item,
-    border:{type:''},
+    border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
     option: cloneDeep(setModules[item.type]),
     ...cloneDeep(dataModules[item.type])
   }