feat:边框配置完善，新增内置边框

data-room-ui/packages/BasicComponents/FlyMap/settingConfig.js

@@ -106,7 +106,7 @@ export const FlyMapData = {
   name: '飞线图',
   title: '飞线图',
   icon: Icon.getNameList()[18],
-  border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
+  border:{type:'',titleHeight:60,fontSize:30},
   className:
     'com.gccloud.dataroom.core.module.chart.components.ScreenFlyMapChart',
   w: 800,

data-room-ui/packages/BasicComponents/Map/settingConfig.js

@@ -95,7 +95,7 @@ export const mapData = {
   name: '地图',
   title: '地图',
   icon: Icon.getNameList()[5],
-  border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
+  border:{type:'',titleHeight:60,fontSize:30},
   className:
     'com.gccloud.dataroom.core.module.chart.components.ScreenMapChart',
   w: 800,

data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue

@@ -7,7 +7,6 @@
     >
     <el-input
       v-model="config.type"
-      v-support
       clearable
       read-only
       placeholder="请选择边框"
@@ -50,13 +49,41 @@
         :step="1"
       />
     </el-form-item>
+    <div
+      v-for="(setting, settingIndex) in list"
+      :key="settingIndex+1"
+    >
       <el-form-item
-      :label-width="labelWidth"
+        :label="setting.type=== 'padding' ? '' : setting.label"
-      label="颜色"
+        :label-width="setting.type=== 'padding' ? '0px' :'120px'"
+      >
+        <el-input
+          v-if="setting.type === 'input'"
+          v-model="config[setting.field]"
+          :placeholder="`请输入${setting.label}`"
+          clearable
+        />
+        <el-select
+          v-else-if="setting.type === 'select'"
+          v-model="config[setting.field]"
+          popper-class="bs-el-select"
+          class="bs-el-select"
+          :placeholder="`请选择${setting.label}`"
+          :multiple="setting.multiple"
+          clearable
         >
-     <!-- <color-select
+          <el-option
-      v-model="config.color"
+            v-for="(opt, optIndex) in setting.options"
-    /> -->
+            :key="optIndex"
+            :label="opt.label"
+            :value="opt.value"
+          />
+        </el-select>
+        <template v-else-if="setting.type === 'colorSelect'">
+          <color-select
+            v-model="colorScheme"
+            @update="updateColorScheme"
+          />
           <div
             style="
             display: flex;
@@ -66,18 +93,83 @@
             class="color-picker-box"
           >
             <el-color-picker
-          v-for="(colorItem, colorItemIndex) in config.color"
+              v-for="(colorItem, colorItemIndex) in colors"
               :key="colorItemIndex"
-          v-model="config.color[colorItemIndex]"
+              v-model="setting.value[colorItemIndex]"
               popper-class="bs-el-color-picker"
               show-alpha
               class="start-color"
             />
+            <span
+              class="el-icon-circle-plus-outline"
+              style="color: #007aff; font-size: 20px"
+              @click="addColor"
+            />
+            <span
+              v-if="colors.length"
+              class="el-icon-remove-outline"
+              style="color: #ea0b30; font-size: 20px"
+              @click="delColor()"
+            />
           </div>
+        </template>
+        <el-color-picker
+          v-else-if="setting.type === 'colorPicker'"
+          v-model="config[setting.field]"
+          popper-class="bs-el-color-picker"
+          class="bs-el-color-picker"
+          show-alpha
+        />
+        <GradualSetting
+          v-else-if="setting.type === 'gradual'"
+          v-model="config[setting.field]"
+        />
+        <el-input-number
+          v-else-if="setting.type === 'inputNumber'"
+          v-model="config[setting.field]"
+          class="bs-el-input-number"
+          :step="setting.step || 1"
+          :min="setting.min || 0"
+          :max="setting.max || 100000"
+        />
+        <el-radio-group
+          v-else-if="setting.type === 'radio'"
+          v-model="config[setting.field]"
+          class="bs-el-radio-group"
+        >
+          <template v-for="(opt, optIndex) in setting.options">
+            <el-radio-button
+              :key="optIndex"
+              :label="opt.value"
+            >
+              {{ opt.label }}
+            </el-radio-button>
+          </template>
+        </el-radio-group>
+        <el-switch
+          v-else-if="setting.type === 'switch'"
+          v-model="config[setting.field]"
+          class="bs-el-switch"
+          :active-value="setting.active"
+          :inactive-value="setting.inactive"
+        />
+        <el-slider
+          v-else-if="setting.type === 'slider'"
+          v-model="config[setting.field]"
+          :min="0"
+          :max="1"
+          :step="0.01"
+        />
+        <PaddingSetting
+          v-else-if="setting.type === 'padding'"
+          v-model="config[setting.field]"
+        />
       </el-form-item>
     </div>
+  </div>
 </template>
 <script>
+import plotList from 'data-room-ui/BorderComponents/settingList.js'
 import ColorSelect from 'data-room-ui/ColorMultipleSelect/index.vue'
 import BorderSelect from 'data-room-ui/BorderSelect/index.vue'
 export default {
@@ -94,7 +186,6 @@ export default {
         titleHeight: 0,
         fontSize: 0,
         h: 0,
-        color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']
       })
     },
     labelWidth: {
@@ -102,12 +193,31 @@ export default {
       default: '100px'
     }
   },
+  computed:{
+    list(){
+      console.log(plotList)
+      plotList[Symbol.iterator]=function*(){
+        let keys=Object.keys(plotList)
+        for(let k of keys){
+          yield [k,plotList[k]]
+        }
+      }
+      let arr=[]
+      for(let [key,value] of plotList){
+        if(value.type==this.config.type){
+          arr=value.setting
+        }
+      }
+      return arr
+    }
+  },
   data () {
     return {
 
     }
   },
-  mounted () {},
+  mounted () {
+  },
   methods: {
     init(){
       this.$refs.BorderSelect.init()
@@ -120,6 +230,9 @@ export default {
 ::v-deep .el-color-picker__trigger {
   border-color: var(--bs-el-border);
 }
+::v-deep .el-input--suffix .el-input__inner{
+  padding-right: 10px !important;
+}
 .color-picker-box{
   ::v-deep .el-color-picker__trigger {
     width: 27px!important;

data-room-ui/packages/BorderComponents/GcBorder1/index.vue

@@ -5,12 +5,23 @@
   >
      <dv-border-box-1
       :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
     >
-    <div class="element"  :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>
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
     </dv-border-box-1>
   </div>
 </template>
 <script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import DvBorderBox1 from '@jiaminghi/data-view/lib/components/borderBox1/src/main.vue'
 import '@jiaminghi/data-view/lib/components/borderBox1/src/main.css'
 export default {
@@ -18,6 +29,7 @@ export default {
   components: {
     DvBorderBox1
   },
+  mixins: [refreshComponentMixin],
   props: {
     // 卡片的属性
     config: {
@@ -25,7 +37,26 @@ export default {
       default: () => ({})
     }
   },
-  watch: {},
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
   mounted () {},
   methods: {}
 }
@@ -41,45 +72,6 @@ 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 {
-  height: 40px;
-  padding: 10px 10px 0 0;
-  box-sizing: border-box;
-
-  .title {
-    font-size: 14px;
-    color: #333;
-    font-weight: bold;
-    border-left: 3px solid #007aff;
-    padding-left: 16px;
-  }
-
-  .target-value {
-    overflow-y: auto;
-    height: 60px;
-    font-weight: bold;
-    width: 100%;
-    font-size: 20px;
-    color: #333;
-    padding: 16px 0 0 22px;
-    box-sizing: border-box;
-  }
-}
-
-.el-icon-warning {
-  color: #ffd600;
-}
-
-.title-hover {
-  &:hover {
-    cursor: move;
-  }
 }
 
 /*滚动条样式*/

data-room-ui/packages/BorderComponents/GcBorder1/setting.js

@@ -0,0 +1,45 @@
+
+const type = 'GcBorder1'
+
+const name = '边框一'
+
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}

data-room-ui/packages/BorderComponents/GcBorder10/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-10
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-10>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox10 from '@jiaminghi/data-view/lib/components/borderBox10/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox10/src/main.css'
+export default {
+  name: 'Border10',
+  components: {
+    DvBorderBox10
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

data-room-ui/packages/BorderComponents/GcBorder10/setting.js

@@ -0,0 +1,44 @@
+
+const type = 'GcBorder10'
+
+const name='边框十'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}

data-room-ui/packages/BorderComponents/GcBorder11/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-11
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-11>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox11 from '@jiaminghi/data-view/lib/components/borderBox11/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox11/src/main.css'
+export default {
+  name: 'Border11',
+  components: {
+    DvBorderBox11
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

data-room-ui/packages/BorderComponents/GcBorder11/setting.js

@@ -0,0 +1,44 @@
+
+const type = 'GcBorder11'
+
+const name='边框十一'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}

data-room-ui/packages/BorderComponents/GcBorder12/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-12
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-12>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox12 from '@jiaminghi/data-view/lib/components/borderBox12/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox12/src/main.css'
+export default {
+  name: 'Border12',
+  components: {
+    DvBorderBox12
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

data-room-ui/packages/BorderComponents/GcBorder12/setting.js

@@ -0,0 +1,45 @@
+
+const type = 'GcBorder12'
+
+const name = '边框十二'
+
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}

data-room-ui/packages/BorderComponents/GcBorder13/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-13
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-13>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox13 from '@jiaminghi/data-view/lib/components/borderBox13/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox13/src/main.css'
+export default {
+  name: 'Border13',
+  components: {
+    DvBorderBox13
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

data-room-ui/packages/BorderComponents/GcBorder13/setting.js

@@ -0,0 +1,44 @@
+
+const type = 'GcBorder8'
+
+const name='边框十三'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}

data-room-ui/packages/BorderComponents/GcBorder2/index.vue

@@ -5,13 +5,23 @@
   >
      <dv-border-box-2
       :id="'dataV' + config.code"
+      :background-color="backgroundColor"
       :key="updateKey"
     >
-    <div class="element" style="box-sizing: content-box;font-size:40px;color:#fff;height:50px;margin:0 0 0 20px">{{config.title}}</div>
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
     </dv-border-box-2>
   </div>
 </template>
 <script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import DvBorderBox2 from '@jiaminghi/data-view/lib/components/borderBox2/src/main.vue'
 import '@jiaminghi/data-view/lib/components/borderBox2/src/main.css'
 export default {
@@ -19,6 +29,7 @@ export default {
   components: {
     DvBorderBox2
   },
+  mixins: [refreshComponentMixin],
   props: {
     // 卡片的属性
     config: {
@@ -28,25 +39,23 @@ export default {
   },
   data () {
     return {
-      updateKey: 0
     }
   },
   computed: {
-    Data () {
+    color () {
-      return JSON.parse(JSON.stringify(this.config))
+      return this.config.border.fontColor ? this.config.border.fontColor
-    }
+        : '#fff'
     },
-  watch: {
+    backgroundColor () {
-    Data: {
+      return this.config.border.backgroundColor
-      handler (newVal, oldVal) {
+        ? this.config.border.backgroundColor
-        this.$nextTick(() => {
+        : 'transparent'
-          if ((newVal.w !== oldVal.w) || (newVal.h !== oldVal.h)) {
-            this.updateKey = new Date().getTime()
-          }
-        })
     },
-      deep: true
+    // colorType () {
-    }
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
   },
   mounted () {},
   methods: {}

data-room-ui/packages/BorderComponents/GcBorder2/setting.js

@@ -0,0 +1,44 @@
+
+const type = 'GcBorder2'
+
+const name = '边框二'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}

data-room-ui/packages/BorderComponents/GcBorder3/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-3
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-3>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox3 from '@jiaminghi/data-view/lib/components/borderBox3/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox3/src/main.css'
+export default {
+  name: 'Border2',
+  components: {
+    DvBorderBox3
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

data-room-ui/packages/BorderComponents/GcBorder3/setting.js

@@ -0,0 +1,44 @@
+
+const type = 'GcBorder3'
+
+const name='边框三'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}

data-room-ui/packages/BorderComponents/GcBorder4/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-4
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-4>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox4 from '@jiaminghi/data-view/lib/components/borderBox4/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox4/src/main.css'
+export default {
+  name: 'Border4',
+  components: {
+    DvBorderBox4
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

data-room-ui/packages/BorderComponents/GcBorder4/setting.js

@@ -0,0 +1,44 @@
+
+const type = 'GcBorder4'
+
+const name='边框四'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}

data-room-ui/packages/BorderComponents/GcBorder5/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-5
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-5>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox5 from '@jiaminghi/data-view/lib/components/borderBox5/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox5/src/main.css'
+export default {
+  name: 'Border5',
+  components: {
+    DvBorderBox5
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

data-room-ui/packages/BorderComponents/GcBorder5/setting.js

@@ -0,0 +1,44 @@
+
+const type = 'GcBorder5'
+
+const name='边框五'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}

data-room-ui/packages/BorderComponents/GcBorder6/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-6
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-6>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox6 from '@jiaminghi/data-view/lib/components/borderBox6/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox6/src/main.css'
+export default {
+  name: 'Border6',
+  components: {
+    DvBorderBox6
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

data-room-ui/packages/BorderComponents/GcBorder6/setting.js

@@ -0,0 +1,44 @@
+
+const type = 'GcBorder6'
+
+const name = '边框六'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}

data-room-ui/packages/BorderComponents/GcBorder7/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-7
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-7>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox7 from '@jiaminghi/data-view/lib/components/borderBox7/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox7/src/main.css'
+export default {
+  name: 'Border7',
+  components: {
+    DvBorderBox7
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

data-room-ui/packages/BorderComponents/GcBorder7/setting.js

@@ -0,0 +1,44 @@
+
+const type = 'GcBorder7'
+
+const name= '边框七'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}

data-room-ui/packages/BorderComponents/GcBorder8/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-8
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-8>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox8 from '@jiaminghi/data-view/lib/components/borderBox8/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox8/src/main.css'
+export default {
+  name: 'Border8',
+  components: {
+    DvBorderBox8
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

data-room-ui/packages/BorderComponents/GcBorder8/setting.js

@@ -0,0 +1,44 @@
+
+const type = 'GcBorder8'
+
+const name='边框八'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}

data-room-ui/packages/BorderComponents/GcBorder9/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-9
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-9>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox9 from '@jiaminghi/data-view/lib/components/borderBox9/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox9/src/main.css'
+export default {
+  name: 'Border9',
+  components: {
+    DvBorderBox9
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

data-room-ui/packages/BorderComponents/GcBorder9/setting.js

@@ -0,0 +1,44 @@
+
+const type = 'GcBorder9'
+
+const name='边框九'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}

data-room-ui/packages/BorderComponents/bordersList.js

@@ -9,7 +9,7 @@ files.keys().forEach(key => {
   const img = require(`../BorderComponents/${title}/component.png`)
   borderComponents.push({
     title:title,
-    img
+    img,
   })
 })
 // 抛出内置系统组件

data-room-ui/packages/BorderComponents/settingList.js

@@ -0,0 +1,16 @@
+const files = require.context('../BorderComponents/', true, /setting.js$/)
+const plotList = []
+// 获取plot配置
+  files.keys().forEach((key) => {
+    // ./折线图/基础折线图.js
+    // 取到 "基础折线图"
+    const config = files(key).default
+    plotList.push({
+      type: config.type,
+      setting: config.setting,
+      name:config.name
+    })
+  })
+export default plotList
+
+

data-room-ui/packages/BorderSelect/index.vue

@@ -17,7 +17,6 @@
           :style="{
             display: remoteComponentsGridComputed ? 'grid' : 'flex',
             justifyContent: remoteComponentsGridComputed ? 'space-around' : 'flex-start',
-            height: 'calc(100vh - 430px)'
           }"
         >
           <div
@@ -126,7 +125,6 @@ export default {
   },
   mounted () {
     this.remoteComponentlist = [...borderComponents]
-    console.log(this.remoteComponentlist)
   },
   methods: {
     chooseComponent (component) {
@@ -144,7 +142,6 @@ export default {
     confirm () {
       this.dialogVisible = false
       if (isEmpty(this.focus)) return
-      console.log(this.focus.title)
       this.$emit('select', this.focus.title)
     },
 

data-room-ui/packages/G2Plots/plotList.js

@@ -32,7 +32,7 @@ function getPlotList (files) {
       category: configMapKey,
       name: config.name,
       title: config.title,
-      border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
+      border:{type:'',titleHeight:60,fontSize:30},
       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:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
+      border:{type:'',titleHeight:60,fontSize:30},
       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:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
+      border:{type:'',titleHeight:60,fontSize:30},
       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:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
+    border:{type:'',titleHeight:60,fontSize:30},
     className:
       'com.gccloud.dataroom.core.module.chart.components.RemoteComponentChart',
     w: 450,

data-room-ui/packages/js/config/basicComponentsConfig.js

@@ -44,7 +44,7 @@ basicConfigList = basicConfigList.map((item) => {
 export function basicComponentsConfig (item) {
   return {
     ...item,
-    border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
+    border:{type:'',titleHeight:60,fontSize:30},
     option: cloneDeep(setModules[item.type]),
     ...cloneDeep(dataModules[item.type])
   }