feat:边框组件配置开发

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

@@ -4,12 +4,14 @@
     <el-color-picker
       v-model="startColor"
       class="bs-el-color-picker"
+      show-alpha
       popper-class="bs-el-color-picker"
     />
     <div class="el-icon-right" />
     <el-color-picker
       v-model="endColor"
       class="bs-el-color-picker"
+      show-alpha
       popper-class="bs-el-color-picker"
     />
   </div>
@@ -32,11 +34,14 @@ export default {
     return {
       startColor: '', // 初始颜色
       endColor: '', // 终止颜色
-    }
+          }
   },
   computed: {
   },
   watch: {
+    colors(){
+      this.init()
+    },
     startColor () {
       this.colorChange()
     },
@@ -53,8 +58,8 @@ export default {
       this.endColor = this.colors[1]
     },
     colorChange (val) {
-      this.colorsValue = [this.startColor,this.endColor]
-      this.$emit('change', this.colorsValue)
+      const colorsValue = [this.startColor,this.endColor]
+      this.$emit('change', colorsValue)
     }
   }
 }

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

@@ -290,7 +290,7 @@ export default {
           })
         }
       }
-      },immediate: true
+      }
     },
   },
   computed:{

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

@@ -91,18 +91,6 @@ const setting = [
       }
     ]
   },
-  {
-    label:'不透明度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'opacity',
-    optionField: 'opacity', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 100,
-  },
 
 
 ]

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

@@ -90,18 +90,6 @@ const setting = [
       }
     ]
   },
-  {
-    label:'不透明度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'opacity',
-    optionField: 'opacity', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 100,
-  },
 
 
 ]

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

@@ -101,18 +101,6 @@ const setting = [
       }
     ]
   },
-  {
-    label:'不透明度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'opacity',
-    optionField: 'opacity', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 100,
-  },
 
 
 ]

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

@@ -91,18 +91,6 @@ const setting = [
       }
     ]
   },
-  {
-    label:'不透明度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'opacity',
-    optionField: 'opacity', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 100,
-  },
 
 
 ]

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

@@ -90,18 +90,6 @@ const setting = [
       }
     ]
   },
-  {
-    label:'不透明度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'opacity',
-    optionField: 'opacity', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 100,
-  },
 
 
 ]

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

@@ -61,6 +61,7 @@ export default {
       return this.config.border.borderWidth || 2
     },
     gradientColor0 () {
+      console.log(this.config.border.gradientColor)
       if(this.config.border.gradientColor){
         return this.config.border.gradientColor[0] ||this.config.border.gradientColor[1]
       }else{
@@ -68,6 +69,7 @@ export default {
       }
     },
     gradientColor1 () {
+      console.log(this.config.border.gradientColor)
       if(this.config.border.gradientColor){
         return this.config.border.gradientColor[1] ||this.config.border.gradientColor[0]
       }else{

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

@@ -90,18 +90,6 @@ const setting = [
       }
     ]
   },
-  {
-    label:'不透明度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'opacity',
-    optionField: 'opacity', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 100,
-  },
   {
     label:'左上圆角值',
     // 设置组件类型， select / input / colorPicker

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

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

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

@@ -89,18 +89,6 @@ const setting = [
       }
     ]
   },
-  {
-    label:'不透明度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'opacity',
-    optionField: 'opacity', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 100,
-  },
 
 
 ]

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

@@ -90,18 +90,6 @@ const setting = [
       }
     ]
   },
-  {
-    label:'不透明度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'opacity',
-    optionField: 'opacity', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 100,
-  },
 
 
 ]

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

@@ -90,18 +90,6 @@ const setting = [
       }
     ]
   },
-  {
-    label:'不透明度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'opacity',
-    optionField: 'opacity', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 100,
-  },
   {
     label:'翻转形态',
     // 设置组件类型， select / input / colorPicker

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

@@ -90,18 +90,6 @@ const setting = [
       }
     ]
   },
-  {
-    label:'不透明度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'opacity',
-    optionField: 'opacity', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 100,
-  },
   {
     label:'翻转形态',
     // 设置组件类型， select / input / colorPicker

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

@@ -90,18 +90,6 @@ const setting = [
       }
     ]
   },
-  {
-    label:'不透明度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'opacity',
-    optionField: 'opacity', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 100,
-  },
 
 
 ]

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

@@ -90,18 +90,6 @@ const setting = [
       }
     ]
   },
-  {
-    label:'不透明度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'opacity',
-    optionField: 'opacity', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 100,
-  },
 
 
 ]

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

@@ -90,18 +90,6 @@ const setting = [
       }
     ]
   },
-  {
-    label:'不透明度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'opacity',
-    optionField: 'opacity', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 100,
-  },
   {
     label:'翻转形态',
     // 设置组件类型， select / input / colorPicker

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

@@ -90,18 +90,6 @@ const setting = [
       }
     ]
   },
-  {
-    label:'不透明度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'opacity',
-    optionField: 'opacity', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 100,
-  },
 
 
 ]

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: 100, fontSize: 30, isTitle: true, padding: [16, 16, 16, 16] },
+      border:{ type: '', titleHeight: 60, fontSize: 30, isTitle: true, padding: [16, 16, 16, 16] },
       icon: null,
       img: require(`../G2Plots/images/componentLogo/${config.title}.png`),
       className:
@@ -66,7 +66,7 @@ export function getCustomPlots () {
       category: config.category,
       name: config.name,
       title: config.title,
-      border: { type: '', titleHeight: 100, fontSize: 30, isTitle: true, padding: [16, 16, 16, 16] },
+      border:{ type: '', titleHeight: 60, fontSize: 30, isTitle: true, padding: [16, 16, 16, 16] },
       icon: null,
       img: config.img,
       className: