{{ group.groupName | filterGroupName }}
diff --git a/data-room-ui/packages/BigScreenDesign/SourceDialog/index.vue b/data-room-ui/packages/BigScreenDesign/SourceDialog/index.vue
index acb8882d..01f06416 100644
--- a/data-room-ui/packages/BigScreenDesign/SourceDialog/index.vue
+++ b/data-room-ui/packages/BigScreenDesign/SourceDialog/index.vue
@@ -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)
}
},
diff --git a/data-room-ui/packages/BizComponent/index.vue b/data-room-ui/packages/BizComponent/index.vue
index c01c6036..dc1c9471 100644
--- a/data-room-ui/packages/BizComponent/index.vue
+++ b/data-room-ui/packages/BizComponent/index.vue
@@ -156,10 +156,11 @@ import 'codemirror/mode/vue/vue.js'
import {
showSize,
- dataURLtoBlob,
- translateBlobToBase64
+ compressImage
+ // dataURLtoBlob,
+ // translateBlobToBase64
} from 'data-room-ui/js/utils/compressImg'
-import * as imageConversion from 'image-conversion'
+// import * as imageConversion from 'image-conversion'
export default {
name: 'BizComponentDesign',
@@ -354,20 +355,22 @@ export default {
}
if (dataUrl) {
if (showSize(dataUrl) > 200) {
- const url = dataURLtoBlob(dataUrl)
+ // const url = dataURLtoBlob(dataUrl)
// 压缩到500KB,这里的500就是要压缩的大小,可自定义
- imageConversion.compressAccurately(
- url,
- {
- size: 200, // 图片大小压缩到100kb
- width: 1280, // 宽度压缩到1280
- height: 720 // 高度压缩到720
- }
- ).then((res) => {
- translateBlobToBase64(res, (e) => {
- this.form.coverPicture = e.result
- })
- })
+ // imageConversion.compressAccurately(
+ // url,
+ // {
+ // size: 200, // 图片大小压缩到100kb
+ // width: 1280, // 宽度压缩到1280
+ // height: 720 // 高度压缩到720
+ // }
+ // ).then((res) => {
+ // translateBlobToBase64(res, (e) => {
+ // this.form.coverPicture = e.result
+ // })
+ // })
+ this.$message.info('由于封面图片过大，进行压缩中')
+ this.form.coverPicture = await compressImage(dataUrl, { width: 1280, height: 720, size: 400, quality: 1 })
} else {
this.form.coverPicture = dataUrl
}
diff --git a/data-room-ui/packages/BorderComponents/GcBorder16/index.vue b/data-room-ui/packages/BorderComponents/GcBorder16/index.vue
index ba83dba4..ac4205e0 100644
--- a/data-room-ui/packages/BorderComponents/GcBorder16/index.vue
+++ b/data-room-ui/packages/BorderComponents/GcBorder16/index.vue
@@ -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`,
}"
>
@@ -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: {
}
diff --git a/data-room-ui/packages/BorderComponents/GcBorder16/setting.js b/data-room-ui/packages/BorderComponents/GcBorder16/setting.js
index 4ae565d1..05445c23 100644
--- a/data-room-ui/packages/BorderComponents/GcBorder16/setting.js
+++ b/data-room-ui/packages/BorderComponents/GcBorder16/setting.js
@@ -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],
},
-
-
-
-
-
]
diff --git a/data-room-ui/packages/BorderSelect/index.vue b/data-room-ui/packages/BorderSelect/index.vue
index e3b30f6d..4c6ea9d1 100644
--- a/data-room-ui/packages/BorderSelect/index.vue
+++ b/data-room-ui/packages/BorderSelect/index.vue
@@ -29,6 +29,7 @@
@click="chooseComponent(component)"
>
diff --git a/data-room-ui/packages/Borders/Border1/setting.vue b/data-room-ui/packages/Borders/Border1/setting.vue
index 85bc92f6..d3b46ebf 100644
--- a/data-room-ui/packages/Borders/Border1/setting.vue
+++ b/data-room-ui/packages/Borders/Border1/setting.vue
@@ -5,9 +5,9 @@
:config="config"
:predefine-theme-colors="predefineThemeColors"
/>
-
+ /> -->