tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:边框组件开发

Browse Source
main
liu.tao3 2 years ago
parent 7ec9fe32fd
commit 1a4fbb9245
34 changed files with 306 additions and 450 deletions
Show Stats Download Patch File Download Diff File

18
data-room-ui/packages/BigScreenDesign/ComponentDialog/index.vue
Unescape Escape View File

@ -17,15 +17,6 @@
> >
<div class="big-screen-list-wrap"> <div class="big-screen-list-wrap">
<div class="top-search-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 <el-select
v-model="code" v-model="code"
class="bs-el-select" class="bs-el-select"
@ -41,6 +32,15 @@
:value="item.code" :value="item.code"
/> />
</el-select> </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 <el-button
size="small" size="small"
type="primary" type="primary"

75
data-room-ui/packages/BigScreenDesign/RightSetting/BorderColorSetting/index.vue
Unescape Escape View File

@ -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>

7
data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue
Unescape Escape View File

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

15
data-room-ui/packages/BorderComponents/GcBorder1/index.vue
Unescape Escape View File

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

20
data-room-ui/packages/BorderComponents/GcBorder1/setting.js
Unescape Escape View File

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

15
data-room-ui/packages/BorderComponents/GcBorder10/index.vue
Unescape Escape View File

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

20
data-room-ui/packages/BorderComponents/GcBorder10/setting.js
Unescape Escape View File

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

15
data-room-ui/packages/BorderComponents/GcBorder11/index.vue
Unescape Escape View File

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

20
data-room-ui/packages/BorderComponents/GcBorder11/setting.js
Unescape Escape View File

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

17
data-room-ui/packages/BorderComponents/GcBorder12/index.vue
Unescape Escape View File

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

20
data-room-ui/packages/BorderComponents/GcBorder12/setting.js
Unescape Escape View File

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

15
data-room-ui/packages/BorderComponents/GcBorder13/index.vue
Unescape Escape View File

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

20
data-room-ui/packages/BorderComponents/GcBorder13/setting.js
Unescape Escape View File

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

13
data-room-ui/packages/BorderComponents/GcBorder14/index.vue
Unescape Escape View File

@ -61,10 +61,19 @@ export default {
return this.config.border.borderWidth || 2 return this.config.border.borderWidth || 2
}, },
gradientColor0 () { 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 () { 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 () { radiusLeftTop () {
return this.config.border.radiusLeftTop || 2 return this.config.border.radiusLeftTop || 2

22
data-room-ui/packages/BorderComponents/GcBorder14/setting.js
Unescape Escape View File

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

24
data-room-ui/packages/BorderComponents/GcBorder15/index.vue
Unescape Escape View File

@ -73,16 +73,32 @@ export default {
return this.config.border.borderWidth!=null?this.config.border.borderWidth : 2 return this.config.border.borderWidth!=null?this.config.border.borderWidth : 2
}, },
gradientColor0 () { 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 () { 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 () { 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 () { 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(){ fontLeftColor(){
return this.config.border.fontLeftColor || '' return this.config.border.fontLeftColor || ''

91
data-room-ui/packages/BorderComponents/GcBorder15/setting.js
Unescape Escape View File

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

15
data-room-ui/packages/BorderComponents/GcBorder2/index.vue
Unescape Escape View File

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

20
data-room-ui/packages/BorderComponents/GcBorder2/setting.js
Unescape Escape View File

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

17
data-room-ui/packages/BorderComponents/GcBorder3/index.vue
Unescape Escape View File

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

20
data-room-ui/packages/BorderComponents/GcBorder3/setting.js
Unescape Escape View File

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

17
data-room-ui/packages/BorderComponents/GcBorder4/index.vue
Unescape Escape View File

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

20
data-room-ui/packages/BorderComponents/GcBorder4/setting.js
Unescape Escape View File

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

15
data-room-ui/packages/BorderComponents/GcBorder5/index.vue
Unescape Escape View File

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

20
data-room-ui/packages/BorderComponents/GcBorder5/setting.js
Unescape Escape View File

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

15
data-room-ui/packages/BorderComponents/GcBorder6/index.vue
Unescape Escape View File

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

20
data-room-ui/packages/BorderComponents/GcBorder6/setting.js
Unescape Escape View File

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

57
data-room-ui/packages/BorderComponents/GcBorder7/index.vue
Unescape Escape View File

@ -5,7 +5,7 @@
> >
<dv-border-box-7 <dv-border-box-7
:id="'dataV' + config.code" :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' :color='borderColor'
:key="updateKey" :key="updateKey"
> >
@ -68,12 +68,7 @@ export default {
}, },
deep: true deep: true
}, },
'config.border.gradientColor0':{ 'config.border.gradientColor':{
handler (val) {
this.changeColor()
},immediate: true
},
'config.border.gradientColor1':{
handler (val) { handler (val) {
this.changeColor() this.changeColor()
},immediate: true },immediate: true
@ -93,55 +88,17 @@ export default {
this.changeColor() this.changeColor()
}, },
methods: { methods: {
changeColor(){ changeColor(){
if(!this.config.border.opacity){ if(!this.config.border.opacity){
this.config.border.opacity=100 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}`)) { 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') const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
if (borderElement) { if (borderElement) {
borderElement.style.opacity = (this.config.border.opacity / 100) borderElement.style.opacity = (this.config.border.opacity / 100)
let gradientDirection = '' 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]})`
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>`
)
} }
} }
} }

20
data-room-ui/packages/BorderComponents/GcBorder7/setting.js
Unescape Escape View File

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

15
data-room-ui/packages/BorderComponents/GcBorder8/index.vue
Unescape Escape View File

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

20
data-room-ui/packages/BorderComponents/GcBorder8/setting.js
Unescape Escape View File

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

17
data-room-ui/packages/BorderComponents/GcBorder9/index.vue
Unescape Escape View File

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

20
data-room-ui/packages/BorderComponents/GcBorder9/setting.js
Unescape Escape View File

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

1
data-room-ui/packages/js/api/bigScreenApi.js
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save