github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-25 12:03:05 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: 组件背景统一到仪表板层面设置

Browse Source 
Co-authored-by: wangjiahao <1522128093@qq.com>
This commit is contained in:
fit2cloudrd 2022-03-28 21:18:56 +08:00 committed by GitHub
parent b0fc9ac436
commit d3e8fd2da7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 181 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,19 +20,20 @@
@mouseenter="enter"
@mouseleave="leave"
>
<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
:class="[
{
['de-drag-active-inner']:enabled,
[classNameMouseOn]: mouseOn || active
},
className
className,
'main-background'
]"
: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" />
<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
v-for="(handlei, indexi) in actualHandles"
:key="indexi"
@ -59,6 +60,7 @@ import eventBus from '@/components/canvas/utils/eventBus'
import { mapState } from 'vuex'
import EditBar from '@/components/canvas/components/Editor/EditBar'
import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
import { hexColorToRGBA } from '@/views/chart/chart/util'
export default {
replace: true,
@ -531,13 +533,18 @@ export default {
width: this.computedMainSlotWidth,
height: this.computedMainSlotHeight
}
if (this.element.commonBackground && this.element.commonBackground.enable) {
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`
if (this.element.commonBackground) {
style['padding'] = (this.element.commonBackground.innerPadding || 0) + 'px'
style['border-radius'] = (this.element.commonBackground.borderRadius || 0) + 'px'
if (this.element.commonBackground.enable) {
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`
} else if (this.element.commonBackground.backgroundType === 'color') {
style['background-color'] = hexColorToRGBA(this.element.commonBackground.color, this.element.commonBackground.alpha)
}
}
style['background-size'] = `100% 100%`
}
return style
},
@ -1857,4 +1864,7 @@ export default {
.de-drag-active-inner{
outline: 1px solid #70c0ff;
}
.main-background{
background-size: 100% 100% !important;
}
</style>

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

@ -49,6 +49,7 @@ import DeOutWidget from '@/components/dataease/DeOutWidget'
import EditBar from '@/components/canvas/components/Editor/EditBar'
import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
import CloseBar from '@/components/canvas/components/Editor/CloseBar'
import { hexColorToRGBA } from '@/views/chart/chart/util'
export default {
components: { CloseBar, MobileCheckBar, DeOutWidget, EditBar },
@ -94,13 +95,20 @@ export default {
width: '100%',
height: '100%'
}
if (this.config.commonBackground && this.config.commonBackground.enable) {
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`
if (this.config.commonBackground) {
style['padding'] = (this.config.commonBackground.innerPadding || 0) + 'px'
style['border-radius'] = (this.config.commonBackground.borderRadius || 0) + 'px'
if (this.config.commonBackground.enable) {
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`
} else if (this.config.commonBackground.backgroundType === 'color') {
style['background-color'] = hexColorToRGBA(this.config.commonBackground.color, this.config.commonBackground.alpha)
}
}
style['background-size'] = `100% 100%`
style['overflow'] = 'hidden'
}
return style
},

2
frontend/src/components/canvas/components/Editor/SettingMenu.vue
View File

@ -14,7 +14,7 @@
<el-dropdown-item v-if="'view'===curComponent.type" icon="el-icon-link" @click.native="linkageSetting">{{ $t('panel.linkage_setting') }}</el-dropdown-item>
<el-dropdown-item v-if="'de-tabs'===curComponent.type" icon="el-icon-link" @click.native="addTab">{{ $t('panel.add_tab') }}</el-dropdown-item>
<el-dropdown-item v-if="'view'===curComponent.type" icon="el-icon-connection" @click.native="linkJumpSet">{{ $t('panel.setting_jump') }}</el-dropdown-item>
<el-dropdown-item icon="el-icon-full-screen" @click.native="boardSet">{{ $t('panel.setting_background') }}</el-dropdown-item>
<el-dropdown-item icon="el-icon-magic-stick" @click.native="boardSet">{{ $t('panel.component_style') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>

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

@ -1033,6 +1033,7 @@ export default {
},
methods: {
boardSet(item) {
this.$emit('boardSet', item)
this.boardSetVisible = true
},
changeStyleWithScale,

8
frontend/src/components/canvas/custom-component/DeFrame.vue
View File

@ -57,16 +57,8 @@ export default {
created() {
},
mounted() {
this.init()
},
methods: {
init() {
const iframe = document.getElementById('iframe')
NProgress.start()
iframe.onload = function() {
NProgress.done()
}
}
}
}

35
frontend/src/components/canvas/custom-component/UserView.vue
View File

@ -263,6 +263,9 @@ export default {
resultCount() {
return this.canvasStyleData.panel.resultCount
},
innerPadding() {
return this.element.commonBackground.innerPadding || 0
},
...mapState([
'canvasStyleData',
'nowPanelTrackInfo',
@ -276,7 +279,12 @@ export default {
},
watch: {
'innerPadding': {
handler: function(val1, val2) {
this.resizeChart()
},
deep: true
},
'cfilters': {
handler: function(val1, val2) {
if (isChange(val1, val2) && !this.isFirstLoad) {
@ -303,9 +311,7 @@ export default {
}
// 如果gap有变化刷新
if (this.preCanvasPanel && this.preCanvasPanel.gap !== newVal.panel.gap) {
this.chart.isPlugin
? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
: this.$refs[this.element.propValue.id].chartResize()
this.resizeChart()
}
this.preCanvasPanel = deepCopy(newVal.panel)
},
@ -315,15 +321,7 @@ export default {
'hw': {
handler(newVal, oldVla) {
if (newVal !== oldVla && this.$refs[this.element.propValue.id]) {
if (this.chart.type === 'map') {
this.destroyTimeMachine()
this.changeIndex++
this.chartResize(this.changeIndex)
} else {
this.chart.isPlugin
? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
: this.$refs[this.element.propValue.id].chartResize()
}
this.resizeChart()
}
},
deep: true
@ -369,6 +367,17 @@ export default {
}
},
methods: {
resizeChart() {
if (this.chart.type === 'map') {
this.destroyTimeMachine()
this.changeIndex++
this.chartResize(this.changeIndex)
} else {
this.chart.isPlugin
? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
: this.$refs[this.element.propValue.id].chartResize()
}
},
bindPluginEvent() {
bus.$on('plugin-chart-click', param => {
param.viewId && param.viewId === this.element.propValue.viewId && this.chartClick(param)

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

@ -16,7 +16,7 @@ export const BASE_MOBILE_STYLE = {
auxiliaryMatrix: true
}
// 公共背景
// 组件仪表板样式
export const COMMON_BACKGROUND = {
enable: false,
backgroundType: 'innerImage',
@ -24,7 +24,8 @@ export const COMMON_BACKGROUND = {
innerImage: null,
outerImage: null,
alpha: 100,
borderRadius: 5
borderRadius: 5,
innerPadding: 0
}
// 公共样式

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

@ -1390,6 +1390,10 @@ export default {
sure_bt: 'Confirm'
},
panel: {
inner_padding: 'Inner Padding',
board_radio: 'Board Radio',
background: 'Background',
component_style: 'component Style',
web_set_tips: 'Some Websites Cannot Be Displayed Because Of Cross Domain Problems ',
repeat_params: 'Repeat Params Exist',
enable_outer_param_set: 'Enable Outer Param Set',

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

@ -1391,6 +1391,10 @@ export default {
sure_bt: '確定'
},
panel: {
inner_padding: '内边距',
board_radio: '边框半径',
background: '背景',
component_style: '组件样式',
web_set_tips: '部分网站可能存在跨域问题无法显示',
repeat_params: '存在名称重复的参数',
enable_outer_param_set: '启用外部参数设置',

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

@ -1399,6 +1399,10 @@ export default {
sure_bt: '确定'
},
panel: {
inner_padding: '内边距',
board_radio: '边框半径',
background: '背景',
component_style: '组件样式',
web_set_tips: '部分网站可能存在跨域问题无法显示',
repeat_params: '存在名称重复的参数',
enable_outer_param_set: '启用外部参数设置',

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

@ -2,71 +2,98 @@
<el-row>
<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>
<span style="font-weight:600;margin-right: 20px;font-size: 14px">{{ $t('panel.component_style') }}</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-row style="height: 50px;overflow: hidden">
<el-col :span="3">
<span class="params-title">{{ $t('panel.inner_padding') }}</span>
</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 :span="15">
<el-slider v-model="curComponent.commonBackground.innerPadding" show-input :show-input-controls="false" input-size="mini" />
</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-row style="height: 50px;overflow: hidden">
<el-col :span="3">
<span class="params-title">{{ $t('panel.board_radio') }}</span>
</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"
<el-col :span="15">
<el-slider v-model="curComponent.commonBackground.borderRadius" show-input :show-input-controls="false" input-size="mini" />
</el-col>
</el-row>
<el-row style="height: 50px">
<el-col :span="3" style="padding-left: 10px;padding-top: 5px">
<el-checkbox v-model="curComponent.commonBackground.enable">{{ $t('panel.background') }}</el-checkbox>
</el-col>
<el-col :span="21">
<span style="color: #909399; font-size: 8px;margin-left: 3px;line-height: 30px">
Tips:{{ $t('panel.choose_background_tips') }}
</span>
</el-col>
</el-row>
<el-row v-if="curComponent.commonBackground.enable">
<el-row style="height: 40px;overflow: hidden">
<el-col :span="3" style="padding-left: 10px;padding-top: 5px">
<el-radio v-model="curComponent.commonBackground.backgroundType" label="color" @change="onChangeType">颜色</el-radio>
</el-col>
<el-col :span="1" style="padding-top: 5px">
<el-color-picker v-model="curComponent.commonBackground.color" size="mini" class="color-picker-style" :predefine="predefineColors" />
</el-col>
<el-col :span="3">
<span class="params-title-small">不透明度：</span>
</el-col>
<el-col :span="11">
<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"
>
<background-item
:template="item"
/>
</el-col>
</el-row>
</el-col>
<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>
<el-row class="root-class">
<el-col :span="24">
@ -178,7 +205,7 @@ export default {
}
.main-row{
height: 40vh;
height: 140px;
overflow-y: auto;
}
@ -226,4 +253,17 @@ export default {
border:1px solid #E6E6E6;
}
.params-title{
font-weight: bold;
line-height: 40px;
margin-left: 10px;
font-size: 14px;
}
.params-title-small{
font-weight: bold;
line-height: 40px;
margin-left: 10px;
font-size: 12px;
}
</style>

16
frontend/src/views/panel/edit/index.vue
View File

@ -393,6 +393,7 @@ export default {
},
data() {
return {
asideToolType: 'none',
outerParamsSetVisible: false,
autoMoveOffSet: 15,
mobileEditorShow: true,
@ -460,14 +461,21 @@ export default {
showAside() {
return !this.linkageSettingStatus && !this.mobileLayoutStatus
},
// 显示仪表板工具栏
showPanelToolsAside() {
return !this.curComponent
},
// 显示视图工具栏
showViewToolsAside() {
return this.curComponent && this.curComponent.type === 'view'
},
showViewToolAsideType() {
if (this.curComponent) {
if (this.curComponent.type === 'view') {
return 'view'
} else {
return 'publicSet'
}
} else {
return 'none'
}
},
showAttr() {
if (this.mobileLayoutStatus) {
return false