feat:新增边框选择配置

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: {

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 () {

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 {

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 {

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: {},

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,

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: {

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 {

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: {

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 {

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: {},

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,

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 {

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 {

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 {

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 {

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>

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 {

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 {

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 {

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 {

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: {

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: {

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>

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],

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 {

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>

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:

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,

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;

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