center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat: 仪表板组件背景支持上传图片

Browse Source
This commit is contained in:
wangjiahao 2022-02-23 15:15:56 +08:00
parent 69006a221e
commit a4e55c3fb6
9 changed files with 177 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/DeDrag/index.vue
View File

@ -30,7 +30,7 @@
]"
:style="mainSlotStyle"
>
<edit-bar v-if="editBarShow" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem" @resizeView="resizeView" @linkJumpSet="linkJumpSet" @boardSet="boardSet" />
<edit-bar v-if="editBarShow" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem" @resizeView="resizeView" @linkJumpSet="linkJumpSet" @boardSet="boardSet" />
<mobile-check-bar v-if="mobileCheckBarShow" :element="element" @amRemoveItem="amRemoveItem" />
<div v-if="resizing" style="transform: translateZ(11px);position: absolute; z-index: 3" :style="resizeShadowStyle" />
<div
@ -532,7 +532,11 @@ export default {
height: this.computedMainSlotHeight
}
if (this.element.commonBackground.enable) {
style['background'] = `url(${this.element.commonBackground.innerImage}) no-repeat`
if (this.element.commonBackground.backgroundType === 'innerImage') {
style['background'] = `url(${this.element.commonBackground.innerImage}) no-repeat`
} else if (this.element.commonBackground.backgroundType === 'outerImage') {
style['background'] = `url(${this.element.commonBackground.outerImage}) no-repeat`
}
style['background-size'] = `100% 100%`
}
return style

6
frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
View File

@ -95,7 +95,11 @@ export default {
height: '100%'
}
if (this.config.commonBackground.enable) {
style['background'] = `url(${this.config.commonBackground.innerImage}) no-repeat`
if (this.config.commonBackground.backgroundType === 'innerImage') {
style['background'] = `url(${this.config.commonBackground.innerImage}) no-repeat`
} else if (this.config.commonBackground.backgroundType === 'outerImage') {
style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat`
}
style['background-size'] = `100% 100%`
}
return style

1
frontend/src/components/canvas/components/Editor/index.vue
View File

@ -172,7 +172,6 @@
<el-dialog
:visible.sync="boardSetVisible"
width="750px"
:title="$t('panel.choose_border')"
class="dialog-css"
:show-close="false"
:destroy-on-close="true"

6
frontend/src/components/canvas/custom-component/component-list.js
View File

@ -19,10 +19,12 @@ export const BASE_MOBILE_STYLE = {
// 公共背景
export const COMMON_BACKGROUND = {
enable: false,
backgroundType: 'color',
backgroundType: 'innerImage',
color: '#FFFFFF',
innerImage: null,
outerImage: null
outerImage: null,
alpha: 100,
borderRadius: 5
}
// 公共样式

3
frontend/src/lang/en.js
View File

@ -1556,7 +1556,8 @@ export default {
input_title: 'Input Title',
show_title: 'Show Title',
default_settings: 'Default Settings',
choose_border: 'Choose Border'
choose_background: 'Choose Component Background',
choose_background_tips: 'The component`s own background settings will overwrite the current settings'
},
plugin: {
local_install: 'Local installation',

3
frontend/src/lang/tw.js
View File

@ -1557,7 +1557,8 @@ export default {
input_title: '請輸入標題',
show_title: '顯示標題',
default_settings: '默認值設置',
choose_border: '选择边框'
choose_background: '选择组件背景',
choose_background_tips: '组件自有的背景设置会覆盖当前设置'
},
plugin: {
local_install: '本地安裝',

3
frontend/src/lang/zh.js
View File

@ -1566,7 +1566,8 @@ export default {
input_title: '请输入标题',
show_title: '显示标题',
default_settings: '默认值设置',
choose_border: '选择边框'
choose_background: '选择组件背景',
choose_background_tips: '组件自有的背景设置会覆盖当前设置'
},
plugin: {
local_install: '本地安装',

14
frontend/src/views/background/BackgroundItem.vue
View File

@ -10,9 +10,7 @@
:style="classBackground"
@click.stop="setBoard"
/>
<el-tooltip class="item" effect="light" :content="template.name" placement="bottom">
<span class="demonstration">{{ template.name }}</span>
</el-tooltip>
</div>
</template>
@ -59,25 +57,25 @@ export default {
.testcase-template {
display: inline-block;
margin: 10px 30px;
width: 150px;
margin: 10px 0px;
width: 90px;
}
.demonstration {
display: block;
font-size: 14px;
font-size: 8px;
color: gray;
text-align: center;
margin: 10px auto;
width: 150px;
width: 130px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.template-img {
height: 112px;
width: 200px;
height: 80px;
width: 130px;
margin: 0 auto;
box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
border: solid 2px #fff;

168
frontend/src/views/background/index.vue
View File

@ -1,24 +1,75 @@
<template>
<el-row>
<el-row class="main-row">
<el-row v-for="(value, key) in BackgroundShowMap" :key="key">
<el-col :span="24"><span>{{ key }}</span> </el-col>
<el-col
v-for="item in value"
:key="item.id"
:span="8"
>
<background-item
:template="item"
/>
<el-row>
<el-col :span="24">
<span style="font-weight:600;margin-right: 20px;font-size: 14px">{{ $t('panel.choose_background') }}</span>
<el-checkbox v-model="curComponent.commonBackground.enable">{{ $t('commons.enable') }}</el-checkbox>
<span style="color: #909399; font-size: 8px;margin-left: 3px">
Tips:{{ $t('panel.choose_background_tips') }}
</span>
</el-col>
</el-row>
<el-row class="main-content" disabled="!curComponent.commonBackground.enable">
<!-- <el-row style="height: 80px;margin-top:10px;margin-bottom:20px;overflow: hidden">-->
<!-- <el-col :span="3" style="padding-left: 10px">-->
<!-- <el-radio v-model="curComponent.commonBackground.backgroundType" label="color" @change="onChangeType">颜色</el-radio>-->
<!-- </el-col>-->
<!-- <el-col :span="3">-->
<!-- <el-color-picker v-model="curComponent.commonBackground.color" class="color-picker-style" :predefine="predefineColors" />-->
<!-- </el-col>-->
<!-- <el-col :span="3" style="text-align: right;margin-top: 8px">-->
<!-- <span>不透明度：</span>-->
<!-- </el-col>-->
<!-- <el-col :span="9">-->
<!-- <el-slider v-model="curComponent.commonBackground.alpha" show-input :show-input-controls="false" input-size="mini" />-->
<!-- </el-col>-->
<!-- </el-row>-->
<el-row style="height: 80px;margin-top:10px;margin-bottom:20px;overflow: hidden">
<el-col :span="3" style="padding-left: 10px">
<el-radio v-model="curComponent.commonBackground.backgroundType" label="outerImage" @change="onChangeType">{{ $t('panel.photo') }}</el-radio>
</el-col>
<el-col style="width: 130px!important;">
<el-upload
action=""
accept=".jpeg,.jpg,.png,.gif,.svg"
class="avatar-uploader"
list-type="picture-card"
:class="{disabled:uploadDisabled}"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:http-request="upload"
:file-list="fileList"
:on-change="onChange"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog top="25vh" width="600px" :modal-append-to-body="false" :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-col>
</el-row>
<el-row>
<el-col :span="3" style="padding-left: 10px">
<el-radio v-model="curComponent.commonBackground.backgroundType" label="innerImage" @change="onChangeType">边框</el-radio>
</el-col>
<el-col :span="21" class="main-row">
<el-row v-for="(value, key) in BackgroundShowMap" :key="key">
<el-col :span="24"><span>{{ key }}</span> </el-col>
<el-col
v-for="item in value"
:key="item.id"
:span="6"
>
<background-item
:template="item"
/>
</el-col>
</el-row>
</el-col>
</el-row>
</el-row>
<el-row class="root-class">
<el-col :span="9" style="text-align: right;vertical-align: middle">
<el-checkbox v-model="curComponent.commonBackground.enable">{{ $t('commons.enable') }}</el-checkbox>
</el-col>
<el-col :span="6">
<el-col :span="24">
<el-button size="mini" @click="cancel()">{{ $t('commons.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="save()">{{ $t('commons.confirm') }}</el-button>
</el-col>
@ -32,6 +83,7 @@ import BackgroundItem from '@/views/background/BackgroundItem'
import { mapState } from 'vuex'
import eventBus from '@/components/canvas/utils/eventBus'
import { deepCopy } from '@/components/canvas/utils/utils'
import { COLOR_PANEL } from '@/views/chart/chart/chart'
export default {
name: 'Background',
@ -40,11 +92,19 @@ export default {
return {
BackgroundShowMap: {},
checked: false,
backgroundOrigin: {}
backgroundOrigin: {},
fileList: [],
dialogImageUrl: '',
dialogVisible: false,
uploadDisabled: false,
panel: null,
predefineColors: COLOR_PANEL
}
},
mounted() {
if (this.curComponent.commonBackground.outerImage && typeof (this.curComponent.commonBackground.outerImage) === 'string') {
this.fileList.push({ url: this.curComponent.commonBackground.outerImage })
}
this.backgroundOrigin = deepCopy(this.curComponent.commonBackground)
this.queryBackground()
},
@ -65,11 +125,44 @@ export default {
this.curComponent.commonBackground.color = this.backgroundOrigin.color
this.curComponent.commonBackground.innerImage = this.backgroundOrigin.innerImage
this.curComponent.commonBackground.outerImage = this.backgroundOrigin.outerImage
this.curComponent.commonBackground.alpha = this.backgroundOrigin.alpha
this.curComponent.commonBackground.borderRadius = this.backgroundOrigin.borderRadius
eventBus.$emit('backgroundSetClose')
},
save() {
this.$store.commit('recordSnapshot')
eventBus.$emit('backgroundSetClose')
},
commitStyle() {
const canvasStyleData = deepCopy(this.canvasStyleData)
canvasStyleData.panel = this.panel
this.$store.commit('setCanvasStyle', canvasStyleData)
this.$store.commit('recordSnapshot', 'commitStyle')
},
onChangeType() {
this.commitStyle()
},
handleRemove(file, fileList) {
this.uploadDisabled = false
this.panel.imageUrl = null
this.fileList = []
this.commitStyle()
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
onChange(file, fileList) {
var _this = this
_this.uploadDisabled = true
const reader = new FileReader()
reader.onload = function() {
_this.curComponent.commonBackground.outerImage = reader.result
}
reader.readAsDataURL(file.raw)
},
upload(file) {
// console.log('this is upload')
}
}
@ -85,7 +178,7 @@ export default {
}
.main-row{
height: 60vh;
height: 40vh;
overflow-y: auto;
}
@ -93,5 +186,44 @@ export default {
margin: 15px 0px 5px;
text-align: center;
}
.avatar-uploader>>>.el-upload {
width: 120px;
height: 80px;
line-height: 90px;
}
.avatar-uploader>>>.el-upload-list li{
width: 120px !important;
height: 80px !important;
}
.disabled>>>.el-upload--picture-card {
display: none;
}
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
.main-content{
border:1px solid #E6E6E6;
}
</style>