fea:修复问题

main
liu.tao3
parent 316585b45c
commit 11da896fd1

@ -66,7 +66,7 @@ export default {
if (config.customize.columnConfig.length === 0) {
const key = []
for (const i in data.columnData) {
header.push(data.columnData[i].remark)
header.push(data.columnData[i].remark||data.columnData[i].alias)
key.push(i)
}
data.data.forEach((item) => {

@ -75,6 +75,7 @@
<el-form-item
:label-width="labelWidth"
label="是否显示标题"
v-if="config.type!='GcBorder16'"
>
<el-switch
v-model="config.isTitle"
@ -146,6 +147,22 @@
:placeholder="`请输入${setting.label}`"
clearable
/>
<el-input
v-model="config[setting.field]"
v-else-if="setting.type === 'background'"
clearable
placeholder="请选择图片"
>
<template slot="append">
<el-button
size="small"
type="primary"
@click="initCard"
>
选择
</el-button>
</template>
</el-input>
<el-select
v-else-if="setting.type === 'select'"
v-model="config[setting.field]"
@ -249,6 +266,7 @@
/>
</el-form-item>
</div>
<SourceDialog ref="SourceDialog" @getImg='changeImg' />
</div>
</div>
</template>
@ -258,12 +276,14 @@ 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'
import SourceDialog from '../SourceDialog/index.vue'
export default {
name: '',
components: {
BorderSelect,
ColorSelect,
BorderColorSetting
BorderColorSetting,
SourceDialog
},
props: {
bigTitle:{
@ -361,9 +381,17 @@ export default {
// }
},
methods: {
changeImg(val){
console.log(val)
this.$set(this.config,'imgUrl',val.url)
},
init(){
this.$refs.BorderSelect.init()
},
initCard(){
this.$refs.SourceDialog.init()
}
}
}
</script>

@ -792,6 +792,8 @@ export default {
},
//
getDataSetDetailsById (id, type) {
this.clearVerify()
this.config.customize.columnConfig=[]
if (id) {
this.config.dataSource.businessKey = id
getDataSetDetails(id).then(res => {

@ -153,7 +153,16 @@ import { getFileUrl } from 'data-room-ui/js/utils/file'
export default {
name: 'SourceDialog',
mixins: [pageMixins],
props: {},
props: {
imgUrl: {
type: String,
default: ''
}
},
model: {
prop: 'imgUrl',
event: 'change'
},
data () {
return {
dialogVisible: false,
@ -193,6 +202,7 @@ export default {
confirm () {
this.dialogVisible = false
if (this.focus !== -1) {
this.$emit('change', this.focus)
this.$emit('getImg', this.focus)
}
},

@ -4,8 +4,8 @@
class="bs-design-wrap"
:id="'border'+ config.code"
:style="{
borderImageSlice:'100 100 100 100 fill',
borderImageWidth:'100px 100px 100px 100px',
borderImageSlice:`${borderArray[0]} ${borderArray[1]} ${borderArray[2]} ${borderArray[3]} fill`,
borderImageWidth:`${borderArray[0]}px ${borderArray[1]}px ${borderArray[2]}px ${borderArray[3]}px`,
}"
>
</div>
@ -33,12 +33,26 @@ export default {
}
},
computed: {
borderArray(){
return this.config.border.borderArray ? this.config.border.borderArray
: [100,100,100,100]
}
},
watch: {
'config.border.imgUrl': {
handler (val) {
if(val){
const a =document.getElementById('border'+ this.config.code)
a.style['border-image-source']=`url(${val})`
}
}
}
},
mounted () {
const a =document.getElementById('border'+ this.config.code)
// a.style['border-image-source']=`url(http://127.0.0.1:8081//bigScreenServer/static/1704043211902484481.png)`
if(this.config.border.imgUrl){
const a =document.getElementById('border'+ this.config.code)
a.style['border-image-source']=`url(${this.config.border.imgUrl})`
}
},
methods: {
}

@ -3,134 +3,14 @@ const type = 'GcBorder16'
const name = '边框16'
const isTitle = true
const isTitle = false
const padding =[0,0,0,0]
// 右侧配置项
const setting = [
{
label:'标题区域背景色',
// 设置组件类型, select / input / colorPicker
type: 'gradual',
// 字段
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
type: 'colorPicker',
// 字段
field: 'fontLeftColor',
optionField: 'fontLeftColor', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: '#007aff',
},
{
label:'标题左侧宽度',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
// 字段
field: 'fontLeftWidth',
optionField: 'fontLeftWidth', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 4,
},
{
label:'标题底部分割线颜色',
// 设置组件类型, select / input / colorPicker
type: 'colorPicker',
// 字段
field: 'fontBottomColor',
optionField: 'fontBottomColor', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: '',
},
{
label:'外边框线颜色',
// 设置组件类型, select / input / colorPicker
type: 'colorPicker',
// 字段
field: 'borderColor',
optionField: 'borderColor', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: '',
},
{
label:'外边框线宽度',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
// 字段
field: 'borderWidth',
optionField: 'borderWidth', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 0,
},
{
label:'背景色',
// 设置组件类型, select / input / colorPicker
type: 'gradual',
// 字段
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',
@ -143,104 +23,29 @@ const setting = [
// value: '',
// },
{
label: '渐变色方向',
// 设置组件类型
type: 'select',
// 字段
field: 'gradientDirection',
// 对应options中的字段
optionField: 'gradientDirection',
// 是否多选
multiple: false,
value: 'to right',
options: [
{
label: '从左到右',
value: 'to right'
},
{
label: '从右到左',
value: 'to left'
},
{
label: '从上到下',
value: 'to bottom'
},
{
label: '从下到上',
value: 'to top'
},
{
label: '从左上到右下',
value: 'to bottom right'
},
{
label: '从右上到左下',
value: 'to bottom left'
},
{
label: '从左下到右上',
value: 'to top right'
},
{
label: '从右下到左上',
value: 'to top left'
}
]
},
{
label:'左上圆角值',
label:'选择背景图',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
type: 'background',
// 字段
field: 'radiusLeftTop',
optionField: 'radiusLeftTop', // 对应options中的字段
field: 'imgUrl',
optionField: 'imgUrl', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 2,
},
{
label:'左下圆角值',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
// 字段
field: 'radiusLeftBottom',
optionField: 'radiusLeftBottom', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 2,
},
{
label:'右上圆角值',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
// 字段
field: 'radiusRightTop',
optionField: 'radiusRightTop', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 2,
value: '',
},
{
label:'右下圆角值',
label:'点九图背景切割',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
type: 'move',
// 字段
field: 'radiusRightBottom',
optionField: 'radiusRightBottom', // 对应options中的字段
field: 'borderArray',
optionField: 'borderArray', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 2,
value: [100,100,100,100],
},
]

@ -29,6 +29,7 @@
@click="chooseComponent(component)"
>
<div
v-if="component.title!='GcBorder16'"
:class="component.title == focus.title ? 'focus' : ''"
class="big-screen-card-inner"
>

@ -32,7 +32,7 @@
</div>
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="装饰颜色">
<el-form-item label="装饰颜色">
<ColorPicker
v-model="config.customize.decorationColor1"
:predefine="predefineThemeColors"

Loading…
Cancel
Save