feat:边框组件开发

data-room-ui/packages/BigScreenDesign/ComponentDialog/index.vue

@@ -17,15 +17,6 @@
         >
           <div class="big-screen-list-wrap">
             <div class="top-search-wrap">
-              <el-input
-                v-model="searchKey"
-                class="bs-el-input"
-                placeholder="请输入组件名称"
-                prefix-icon="el-icon-search"
-                clearable
-                @clear="reSearch"
-                @keyup.enter.native="reSearch"
-              />
               <el-select
                 v-model="code"
                 class="bs-el-select"
@@ -41,6 +32,15 @@
                   :value="item.code"
                 />
               </el-select>
+              <el-input
+                v-model="searchKey"
+                class="bs-el-input"
+                placeholder="请输入组件名称"
+                prefix-icon="el-icon-search"
+                clearable
+                @clear="reSearch"
+                @keyup.enter.native="reSearch"
+              />
               <el-button
                 size="small"
                 type="primary"

data-room-ui/packages/BigScreenDesign/RightSetting/BorderColorSetting/index.vue

@@ -0,0 +1,75 @@
+/** * @Description: 渐变色配置 * @author liu.shiyi * @date 2023/4/13 16:01 */
+<template>
+  <div class="bs-gradual-wrap">
+    <el-color-picker
+      v-model="startColor"
+      class="bs-el-color-picker"
+      popper-class="bs-el-color-picker"
+    />
+    <div class="el-icon-right" />
+    <el-color-picker
+      v-model="endColor"
+      class="bs-el-color-picker"
+      popper-class="bs-el-color-picker"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GradualSetting',
+  model: {
+    prop: 'colors',
+    event: 'change'
+  },
+  props: {
+    colors: {
+      type: Array,
+      default: ()=>([])
+    }
+  },
+  data () {
+    return {
+      startColor: '', // 初始颜色
+      endColor: '', // 终止颜色
+    }
+  },
+  computed: {
+  },
+  watch: {
+    startColor () {
+      this.colorChange()
+    },
+    endColor () {
+      this.colorChange()
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  methods: {
+    init () {
+      this.startColor = this.colors[0]
+      this.endColor = this.colors[1]
+    },
+    colorChange (val) {
+      this.colorsValue = [this.startColor,this.endColor]
+      this.$emit('change', this.colorsValue)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .bs-gradual-wrap{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .el-icon-right{
+      width: 40px;
+      text-align: center;
+    }
+  }
+
+</style>

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

@@ -190,7 +190,7 @@
           class="bs-el-color-picker"
           show-alpha
         />
-        <GradualSetting
+        <BorderColorSetting
           v-else-if="setting.type === 'gradual'"
           v-model="config[setting.field]"
         />
@@ -240,14 +240,17 @@
   </div>
 </template>
 <script>
+import _ from 'lodash'
 import plotList from 'data-room-ui/BorderComponents/settingList.js'
+import BorderColorSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderColorSetting/index.vue'
 import ColorSelect from 'data-room-ui/ColorMultipleSelect/index.vue'
 import BorderSelect from 'data-room-ui/BorderSelect/index.vue'
 export default {
   name: '',
   components: {
     BorderSelect,
-    ColorSelect
+    ColorSelect,
+    BorderColorSetting
   },
   props: {
     bigTitle:{

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

@@ -5,7 +5,7 @@
   >
      <dv-border-box-1
       :id="'dataV' + config.code"
-      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
       :color='borderColor'
       :key="updateKey"
     >
@@ -68,12 +68,7 @@ export default {
       },
       deep: true
     },
-    'config.border.gradientColor0':{
-         handler (val) {
-          this.changeColor()
-      },immediate: true
-    },
-    'config.border.gradientColor1':{
+    'config.border.gradientColor':{
          handler (val) {
           this.changeColor()
       },immediate: true
@@ -97,7 +92,7 @@ export default {
       if(!this.config.border.opacity){
               this.config.border.opacity=100
             }
-      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if(!this.config.border.gradientColor) return
       if (document.querySelector(`#dataV${this.config.code}`)) {
           const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
           if (borderElement) {
@@ -137,8 +132,8 @@ export default {
                 'afterbegin',
                 `<defs>
                       <linearGradient id="${this.borderBgId}" ${gradientDirection}>
-                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
-                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
                       </linearGradient>
                 </defs>`
               )

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

@@ -34,24 +34,12 @@ const setting = [
     value: '',
   },
   {
-    label:'渐变背景色一',
+    label:'背景色',
     // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'gradientColor0',
-    optionField: 'gradientColor0', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-  {
-    label:'渐变背景色二',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
-    field: 'gradientColor1',
-    optionField: 'gradientColor1', // 对应options中的字段
+    field: 'gradientColor',
+    optionField: 'gradientColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值

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

@@ -5,7 +5,7 @@
   >
      <dv-border-box-10
       :id="'dataV' + config.code"
-      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
       :color='borderColor'
       :key="updateKey"
     >
@@ -68,12 +68,7 @@ export default {
       },
       deep: true
     },
-    'config.border.gradientColor0':{
-         handler (val) {
-          this.changeColor()
-      },immediate: true
-    },
-    'config.border.gradientColor1':{
+    'config.border.gradientColor':{
          handler (val) {
           this.changeColor()
       },immediate: true
@@ -97,7 +92,7 @@ export default {
       if(!this.config.border.opacity){
               this.config.border.opacity=100
             }
-      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if(!this.config.border.gradientColor) return
       if (document.querySelector(`#dataV${this.config.code}`)) {
           const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
           if (borderElement) {
@@ -137,8 +132,8 @@ export default {
                 'afterbegin',
                 `<defs>
                       <linearGradient id="${this.borderBgId}" ${gradientDirection}>
-                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
-                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
                       </linearGradient>
                 </defs>`
               )

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

@@ -33,24 +33,12 @@ const setting = [
     value: '',
   },
   {
-    label:'渐变背景色一',
+    label:'背景色',
     // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'gradientColor0',
-    optionField: 'gradientColor0', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-  {
-    label:'渐变背景色二',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
-    field: 'gradientColor1',
-    optionField: 'gradientColor1', // 对应options中的字段
+    field: 'gradientColor',
+    optionField: 'gradientColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值

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

@@ -5,7 +5,7 @@
   >
      <dv-border-box-11
       :id="'dataV' + config.code"
-      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
       :color='borderColor'
       :key="updateKey"
       :title="config.border.isTitle?config.title:''"
@@ -70,12 +70,7 @@ export default {
       },
       deep: true
     },
-    'config.border.gradientColor0':{
-         handler (val) {
-          this.changeColor()
-      },immediate: true
-    },
-    'config.border.gradientColor1':{
+    'config.border.gradientColor':{
          handler (val) {
           this.changeColor()
       },immediate: true
@@ -99,7 +94,7 @@ export default {
       if(!this.config.border.opacity){
               this.config.border.opacity=100
             }
-      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if(!this.config.border.gradientColor) return
       if (document.querySelector(`#dataV${this.config.code}`)) {
           const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
           if (borderElement) {
@@ -139,8 +134,8 @@ export default {
                 'afterbegin',
                 `<defs>
                       <linearGradient id="${this.borderBgId}" ${gradientDirection}>
-                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
-                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
                       </linearGradient>
                 </defs>`
               )

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

@@ -44,24 +44,12 @@ const setting = [
     value: '',
   },
   {
-    label:'渐变背景色一',
+    label:'背景色',
     // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'gradientColor0',
-    optionField: 'gradientColor0', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-  {
-    label:'渐变背景色二',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
-    field: 'gradientColor1',
-    optionField: 'gradientColor1', // 对应options中的字段
+    field: 'gradientColor',
+    optionField: 'gradientColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值

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

@@ -5,7 +5,7 @@
   >
      <dv-border-box-12
       :id="'dataV' + config.code"
-      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
       :color='borderColor'
       :key="updateKey"
     >
@@ -68,12 +68,7 @@ export default {
       },
       deep: true
     },
-    'config.border.gradientColor0':{
-         handler (val) {
-          this.changeColor()
-      },immediate: true
-    },
-    'config.border.gradientColor1':{
+    'config.border.gradientColor':{
          handler (val) {
           this.changeColor()
       },immediate: true
@@ -93,11 +88,11 @@ export default {
     this.changeColor()
   },
   methods: {
-    changeColor(){
+   changeColor(){
       if(!this.config.border.opacity){
               this.config.border.opacity=100
             }
-      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if(!this.config.border.gradientColor) return
       if (document.querySelector(`#dataV${this.config.code}`)) {
           const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
           if (borderElement) {
@@ -137,8 +132,8 @@ export default {
                 'afterbegin',
                 `<defs>
                       <linearGradient id="${this.borderBgId}" ${gradientDirection}>
-                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
-                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
                       </linearGradient>
                 </defs>`
               )

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

@@ -34,24 +34,12 @@ const setting = [
     value: '',
   },
   {
-    label:'渐变背景色一',
+    label:'背景色',
     // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'gradientColor0',
-    optionField: 'gradientColor0', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-  {
-    label:'渐变背景色二',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
-    field: 'gradientColor1',
-    optionField: 'gradientColor1', // 对应options中的字段
+    field: 'gradientColor',
+    optionField: 'gradientColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值

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

@@ -5,7 +5,7 @@
   >
      <dv-border-box-13
       :id="'dataV' + config.code"
-      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
       :color='borderColor'
       :key="updateKey"
     >
@@ -68,12 +68,7 @@ export default {
       },
       deep: true
     },
-    'config.border.gradientColor0':{
-         handler (val) {
-          this.changeColor()
-      },immediate: true
-    },
-    'config.border.gradientColor1':{
+    'config.border.gradientColor':{
          handler (val) {
           this.changeColor()
       },immediate: true
@@ -97,7 +92,7 @@ export default {
       if(!this.config.border.opacity){
               this.config.border.opacity=100
             }
-      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if(!this.config.border.gradientColor) return
       if (document.querySelector(`#dataV${this.config.code}`)) {
           const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
           if (borderElement) {
@@ -137,8 +132,8 @@ export default {
                 'afterbegin',
                 `<defs>
                       <linearGradient id="${this.borderBgId}" ${gradientDirection}>
-                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
-                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
                       </linearGradient>
                 </defs>`
               )

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

@@ -33,24 +33,12 @@ const setting = [
     value: '',
   },
   {
-    label:'渐变背景色一',
+    label:'背景色',
     // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'gradientColor0',
-    optionField: 'gradientColor0', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-  {
-    label:'渐变背景色二',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
-    field: 'gradientColor1',
-    optionField: 'gradientColor1', // 对应options中的字段
+    field: 'gradientColor',
+    optionField: 'gradientColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值

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

@@ -61,10 +61,19 @@ export default {
       return this.config.border.borderWidth || 2
     },
     gradientColor0 () {
-      return this.config.border.gradientColor0 ||this.config.border.gradientColor1|| 'transparent'
+      if(this.config.border.gradientColor){
+        return this.config.border.gradientColor[0] ||this.config.border.gradientColor[1]
+      }else{
+        return 'transparent'
+      }
     },
     gradientColor1 () {
-      return this.config.border.gradientColor1 ||this.config.border.gradientColor0|| 'transparent'
+      if(this.config.border.gradientColor){
+        return this.config.border.gradientColor[1] ||this.config.border.gradientColor[0]
+      }else{
+        return 'transparent'
+      }
+
     },
     radiusLeftTop () {
       return this.config.border.radiusLeftTop || 2

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

@@ -33,28 +33,16 @@ const setting = [
     value: 2,
   },
   {
-    label:'背景色一',
+    label:'背景色',
     // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'gradientColor0',
-    optionField: 'gradientColor0', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '#83bff6',
-  },
-  {
-    label:'背景色二',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
-    field: 'gradientColor1',
-    optionField: 'gradientColor1', // 对应options中的字段
+    field: 'gradientColor',
+    optionField: 'gradientColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
-    value: '#188df0',
+    value: '',
   },
   {
     label: '渐变色方向',

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

@@ -73,16 +73,32 @@ export default {
       return this.config.border.borderWidth!=null?this.config.border.borderWidth : 2
     },
     gradientColor0 () {
-      return this.config.border.gradientColor0 ||this.config.border.gradientColor1|| 'transparent'
+      if(this.config.border.gradientColor){
+        return this.config.border.gradientColor[0] ||this.config.border.gradientColor[1]
+      }else{
+        return 'transparent'
+      }
     },
     gradientColor1 () {
-      return this.config.border.gradientColor1 ||this.config.border.gradientColor0|| 'transparent'
+      if(this.config.border.gradientColor){
+       return this.config.border.gradientColor[1] ||this.config.border.gradientColor[0]
+      }else{
+        return 'transparent'
+      }
     },
     fontGradientColor0 () {
-      return this.config.border.fontGradientColor0 ||this.config.border.fontGradientColor1|| 'transparent'
+      if(this.config.border.fontGradientColor){
+       return this.config.border.fontGradientColor[0] ||this.config.border.fontGradientColor[1]
+      }else{
+        return 'transparent'
+      }
     },
     fontGradientColor1 () {
-      return this.config.border.fontGradientColor1 ||this.config.border.fontGradientColor0|| 'transparent'
+      if(this.config.border.fontGradientColor){
+        return this.config.border.fontGradientColor[1]||this.config.border.fontGradientColor[0]
+      }else{
+        return 'transparent'
+      }
     },
     fontLeftColor(){
       return this.config.border.fontLeftColor || ''

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

@@ -6,31 +6,44 @@ const name = '边框十五'
 const isTitle=true
 // 右侧配置项
 const setting = [
-  // 背景色
-  {
-    label:'标题区域背景色一',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'fontGradientColor0',
-    optionField: 'fontGradientColor0', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
+
   {
-    label:'标题区域背景色二',
+    label:'标题区域背景色',
     // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
-    field: 'fontGradientColor1',
-    optionField: 'fontGradientColor1', // 对应options中的字段
+    field: 'fontGradientColor',
+    optionField: 'fontGradientColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
     value: '',
   },
+  // 背景色
+  // {
+  //   label:'标题区域背景色一',
+  //   // 设置组件类型， select / input / colorPicker
+  //   type: 'colorPicker',
+  //   // 字段
+  //   field: 'fontGradientColor0',
+  //   optionField: 'fontGradientColor0', // 对应options中的字段
+  //   // 是否多选
+  //   multiple: false,
+  //   // 绑定的值
+  //   value: '',
+  // },
+  // {
+  //   label:'标题区域背景色二',
+  //   // 设置组件类型， select / input / colorPicker
+  //   type: 'colorPicker',
+  //   // 字段
+  //   field: 'fontGradientColor1',
+  //   optionField: 'fontGradientColor1', // 对应options中的字段
+  //   // 是否多选
+  //   multiple: false,
+  //   // 绑定的值
+  //   value: '',
+  // },
   {
     label:'标题左侧颜色',
     // 设置组件类型， select / input / colorPicker
@@ -92,29 +105,41 @@ const setting = [
     value: 1,
   },
   {
-    label:'背景色一',
+    label:'背景色',
     // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'gradientColor0',
-    optionField: 'gradientColor0', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-  {
-    label:'背景色二',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
-    field: 'gradientColor1',
-    optionField: 'gradientColor1', // 对应options中的字段
+    field: 'gradientColor',
+    optionField: 'gradientColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
     value: '',
   },
+  // {
+  //   label:'背景色一',
+  //   // 设置组件类型， select / input / colorPicker
+  //   type: 'colorPicker',
+  //   // 字段
+  //   field: 'gradientColor0',
+  //   optionField: 'gradientColor0', // 对应options中的字段
+  //   // 是否多选
+  //   multiple: false,
+  //   // 绑定的值
+  //   value: '',
+  // },
+  // {
+  //   label:'背景色二',
+  //   // 设置组件类型， select / input / colorPicker
+  //   type: 'colorPicker',
+  //   // 字段
+  //   field: 'gradientColor1',
+  //   optionField: 'gradientColor1', // 对应options中的字段
+  //   // 是否多选
+  //   multiple: false,
+  //   // 绑定的值
+  //   value: '',
+  // },
   {
     label: '渐变色方向',
     // 设置组件类型

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

@@ -5,7 +5,7 @@
   >
      <dv-border-box-2
       :id="'dataV' + config.code"
-      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
       :color='borderColor'
       :key="updateKey"
     >
@@ -68,12 +68,7 @@ export default {
       },
       deep: true
     },
-    'config.border.gradientColor0':{
-         handler (val) {
-          this.changeColor()
-      },immediate: true
-    },
-    'config.border.gradientColor1':{
+     'config.border.gradientColor':{
          handler (val) {
           this.changeColor()
       },immediate: true
@@ -97,7 +92,7 @@ export default {
       if(!this.config.border.opacity){
               this.config.border.opacity=100
             }
-      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if(!this.config.border.gradientColor) return
       if (document.querySelector(`#dataV${this.config.code}`)) {
           const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
           if (borderElement) {
@@ -137,8 +132,8 @@ export default {
                 'afterbegin',
                 `<defs>
                       <linearGradient id="${this.borderBgId}" ${gradientDirection}>
-                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
-                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
                       </linearGradient>
                 </defs>`
               )

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

@@ -32,24 +32,12 @@ const setting = [
     value: '',
   },
   {
-    label:'渐变背景色一',
+    label:'背景色',
     // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'gradientColor0',
-    optionField: 'gradientColor0', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-  {
-    label:'渐变背景色二',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
-    field: 'gradientColor1',
-    optionField: 'gradientColor1', // 对应options中的字段
+    field: 'gradientColor',
+    optionField: 'gradientColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值

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

@@ -5,7 +5,7 @@
   >
      <dv-border-box-3
       :id="'dataV' + config.code"
-      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
       :color='borderColor'
       :key="updateKey"
     >
@@ -68,12 +68,7 @@ export default {
       },
       deep: true
     },
-    'config.border.gradientColor0':{
-         handler (val) {
-          this.changeColor()
-      },immediate: true
-    },
-    'config.border.gradientColor1':{
+    'config.border.gradientColor':{
          handler (val) {
           this.changeColor()
       },immediate: true
@@ -93,11 +88,11 @@ export default {
     this.changeColor()
   },
   methods: {
-    changeColor(){
+     changeColor(){
       if(!this.config.border.opacity){
               this.config.border.opacity=100
             }
-      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if(!this.config.border.gradientColor) return
       if (document.querySelector(`#dataV${this.config.code}`)) {
           const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
           if (borderElement) {
@@ -137,8 +132,8 @@ export default {
                 'afterbegin',
                 `<defs>
                       <linearGradient id="${this.borderBgId}" ${gradientDirection}>
-                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
-                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
                       </linearGradient>
                 </defs>`
               )

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

@@ -33,24 +33,12 @@ const setting = [
     value: '',
   },
   {
-    label:'渐变背景色一',
+    label:'背景色',
     // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'gradientColor0',
-    optionField: 'gradientColor0', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-  {
-    label:'渐变背景色二',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
-    field: 'gradientColor1',
-    optionField: 'gradientColor1', // 对应options中的字段
+    field: 'gradientColor',
+    optionField: 'gradientColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值

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

@@ -5,7 +5,7 @@
   >
      <dv-border-box-4
       :id="'dataV' + config.code"
-      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
       :color='borderColor'
       :key="updateKey"
       :reverse='config.border.reverse'
@@ -69,12 +69,7 @@ export default {
       },
       deep: true
     },
-    'config.border.gradientColor0':{
-         handler (val) {
-          this.changeColor()
-      },immediate: true
-    },
-    'config.border.gradientColor1':{
+    'config.border.gradientColor':{
          handler (val) {
           this.changeColor()
       },immediate: true
@@ -94,11 +89,11 @@ export default {
     this.changeColor()
   },
   methods: {
-    changeColor(){
+   changeColor(){
       if(!this.config.border.opacity){
               this.config.border.opacity=100
             }
-      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if(!this.config.border.gradientColor) return
       if (document.querySelector(`#dataV${this.config.code}`)) {
           const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
           if (borderElement) {
@@ -138,8 +133,8 @@ export default {
                 'afterbegin',
                 `<defs>
                       <linearGradient id="${this.borderBgId}" ${gradientDirection}>
-                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
-                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
                       </linearGradient>
                 </defs>`
               )

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

@@ -33,24 +33,12 @@ const setting = [
     value: '',
   },
   {
-    label:'渐变背景色一',
+    label:'背景色',
     // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'gradientColor0',
-    optionField: 'gradientColor0', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-  {
-    label:'渐变背景色二',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
-    field: 'gradientColor1',
-    optionField: 'gradientColor1', // 对应options中的字段
+    field: 'gradientColor',
+    optionField: 'gradientColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值

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

@@ -5,7 +5,7 @@
   >
      <dv-border-box-5
       :id="'dataV' + config.code"
-      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
       :color='borderColor'
       :key="updateKey"
       :reverse='config.border.reverse'
@@ -69,12 +69,7 @@ export default {
       },
       deep: true
     },
-    'config.border.gradientColor0':{
-         handler (val) {
-          this.changeColor()
-      },immediate: true
-    },
-    'config.border.gradientColor1':{
+    'config.border.gradientColor':{
          handler (val) {
           this.changeColor()
       },immediate: true
@@ -98,7 +93,7 @@ export default {
       if(!this.config.border.opacity){
               this.config.border.opacity=100
             }
-      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if(!this.config.border.gradientColor) return
       if (document.querySelector(`#dataV${this.config.code}`)) {
           const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
           if (borderElement) {
@@ -138,8 +133,8 @@ export default {
                 'afterbegin',
                 `<defs>
                       <linearGradient id="${this.borderBgId}" ${gradientDirection}>
-                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
-                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
                       </linearGradient>
                 </defs>`
               )

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

@@ -33,24 +33,12 @@ const setting = [
     value: '',
   },
   {
-    label:'渐变背景色一',
+    label:'背景色',
     // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'gradientColor0',
-    optionField: 'gradientColor0', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-  {
-    label:'渐变背景色二',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
-    field: 'gradientColor1',
-    optionField: 'gradientColor1', // 对应options中的字段
+    field: 'gradientColor',
+    optionField: 'gradientColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值

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

@@ -5,7 +5,7 @@
   >
      <dv-border-box-6
       :id="'dataV' + config.code"
-      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
       :color='borderColor'
       :key="updateKey"
     >
@@ -68,12 +68,7 @@ export default {
       },
       deep: true
     },
-    'config.border.gradientColor0':{
-         handler (val) {
-          this.changeColor()
-      },immediate: true
-    },
-    'config.border.gradientColor1':{
+    'config.border.gradientColor':{
          handler (val) {
           this.changeColor()
       },immediate: true
@@ -97,7 +92,7 @@ export default {
       if(!this.config.border.opacity){
               this.config.border.opacity=100
             }
-      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if(!this.config.border.gradientColor) return
       if (document.querySelector(`#dataV${this.config.code}`)) {
           const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
           if (borderElement) {
@@ -137,8 +132,8 @@ export default {
                 'afterbegin',
                 `<defs>
                       <linearGradient id="${this.borderBgId}" ${gradientDirection}>
-                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
-                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
                       </linearGradient>
                 </defs>`
               )

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

@@ -33,24 +33,12 @@ const setting = [
     value: '',
   },
   {
-    label:'渐变背景色一',
+    label:'背景色',
     // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'gradientColor0',
-    optionField: 'gradientColor0', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-  {
-    label:'渐变背景色二',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
-    field: 'gradientColor1',
-    optionField: 'gradientColor1', // 对应options中的字段
+    field: 'gradientColor',
+    optionField: 'gradientColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值

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

@@ -5,7 +5,7 @@
   >
      <dv-border-box-7
       :id="'dataV' + config.code"
-      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
       :color='borderColor'
       :key="updateKey"
     >
@@ -68,12 +68,7 @@ export default {
       },
       deep: true
     },
-    'config.border.gradientColor0':{
-         handler (val) {
-          this.changeColor()
-      },immediate: true
-    },
-    'config.border.gradientColor1':{
+    'config.border.gradientColor':{
          handler (val) {
           this.changeColor()
       },immediate: true
@@ -93,55 +88,17 @@ export default {
     this.changeColor()
   },
   methods: {
-    changeColor(){
+     changeColor(){
       if(!this.config.border.opacity){
               this.config.border.opacity=100
-            }
-      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+        }
+        console.log(this.config.border.gradientColor)
+      if(!this.config.border.gradientColor) return
       if (document.querySelector(`#dataV${this.config.code}`)) {
           const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
           if (borderElement) {
               borderElement.style.opacity = (this.config.border.opacity / 100)
-              let gradientDirection = ''
-              switch (this.config.border.gradientDirection) {
-                case 'to right':
-                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
-                  break
-                case 'to left':
-                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
-                  break
-                case 'to bottom':
-                  gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
-                  break
-                case 'to top':
-                  gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
-                  break
-                case 'to bottom right':
-                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
-                  break
-                case 'to bottom left':
-                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
-                  break
-                case 'to top right':
-                  gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
-                  break
-                case 'to top left':
-                  gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
-                  break
-                default:
-                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
-                  break
-              }
-              // 在目标元素内的第一个位置插入 <defs> 和其中的内容
-              borderElement.insertAdjacentHTML(
-                'afterbegin',
-                `<defs>
-                      <linearGradient id="${this.borderBgId}" ${gradientDirection}>
-                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
-                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
-                      </linearGradient>
-                </defs>`
-              )
+              borderElement.style.background = `linear-gradient(${this.config.border.gradientDirection},${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}, ${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]})`
           }
         }
     }

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

@@ -33,24 +33,12 @@ const setting = [
     value: '',
   },
   {
-    label:'渐变背景色一',
+    label:'背景色',
     // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'gradientColor0',
-    optionField: 'gradientColor0', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-  {
-    label:'渐变背景色二',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
-    field: 'gradientColor1',
-    optionField: 'gradientColor1', // 对应options中的字段
+    field: 'gradientColor',
+    optionField: 'gradientColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值

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

@@ -5,7 +5,7 @@
   >
      <dv-border-box-8
       :id="'dataV' + config.code"
-      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
       :color='borderColor'
       :key="updateKey"
       :reverse='config.border.reverse'
@@ -70,12 +70,7 @@ export default {
       },
       deep: true
     },
-    'config.border.gradientColor0':{
-         handler (val) {
-          this.changeColor()
-      },immediate: true
-    },
-    'config.border.gradientColor1':{
+    'config.border.gradientColor':{
          handler (val) {
           this.changeColor()
       },immediate: true
@@ -99,7 +94,7 @@ export default {
       if(!this.config.border.opacity){
               this.config.border.opacity=100
             }
-      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if(!this.config.border.gradientColor) return
       if (document.querySelector(`#dataV${this.config.code}`)) {
           const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
           if (borderElement) {
@@ -139,8 +134,8 @@ export default {
                 'afterbegin',
                 `<defs>
                       <linearGradient id="${this.borderBgId}" ${gradientDirection}>
-                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
-                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
                       </linearGradient>
                 </defs>`
               )

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

@@ -33,24 +33,12 @@ const setting = [
     value: '',
   },
   {
-    label:'渐变背景色一',
+    label:'背景色',
     // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'gradientColor0',
-    optionField: 'gradientColor0', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-  {
-    label:'渐变背景色二',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
-    field: 'gradientColor1',
-    optionField: 'gradientColor1', // 对应options中的字段
+    field: 'gradientColor',
+    optionField: 'gradientColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值

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

@@ -5,7 +5,7 @@
   >
      <dv-border-box-9
       :id="'dataV' + config.code"
-      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
       :color='borderColor'
       :key="updateKey"
     >
@@ -68,12 +68,7 @@ export default {
       },
       deep: true
     },
-    'config.border.gradientColor0':{
-         handler (val) {
-          this.changeColor()
-      },immediate: true
-    },
-    'config.border.gradientColor1':{
+    'config.border.gradientColor':{
          handler (val) {
           this.changeColor()
       },immediate: true
@@ -93,11 +88,11 @@ export default {
     this.changeColor()
   },
   methods: {
-    changeColor(){
+     changeColor(){
       if(!this.config.border.opacity){
               this.config.border.opacity=100
             }
-      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if(!this.config.border.gradientColor) return
       if (document.querySelector(`#dataV${this.config.code}`)) {
           const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
           if (borderElement) {
@@ -137,8 +132,8 @@ export default {
                 'afterbegin',
                 `<defs>
                       <linearGradient id="${this.borderBgId}" ${gradientDirection}>
-                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
-                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
                       </linearGradient>
                 </defs>`
               )

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

@@ -33,24 +33,12 @@ const setting = [
     value: '',
   },
   {
-    label:'渐变背景色一',
+    label:'背景色',
     // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'gradientColor0',
-    optionField: 'gradientColor0', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-  {
-    label:'渐变背景色二',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
-    field: 'gradientColor1',
-    optionField: 'gradientColor1', // 对应options中的字段
+    field: 'gradientColor',
+    optionField: 'gradientColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值

data-room-ui/packages/js/api/bigScreenApi.js

@@ -8,7 +8,6 @@ export function getScreenInfo (code) {
 export function saveScreen(data) {
   data.chartList.forEach((item) => {
     if (item.type == 'customComponent') {
-      console.log(item)
       item.setting=item.setting.map((x) => {
         const {field,value,...obj}=x
 	        return {field,value}