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

feat(仪表板): 仪表板背景支持颜色透明度设置 #5600

Browse Source
This commit is contained in:
wangjiahao 2023-07-31 22:11:22 +08:00
parent 717c3ab7e9
commit 682e7dfc93
13 changed files with 140 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/canvas/components/editor/DeEditor.vue
View File

@ -176,6 +176,7 @@ import _ from 'lodash'
import _jq from 'jquery'
import Background from '@/views/background/index'
import PointShadow from '@/components/deDrag/PointShadow'
import {hexColorToRGBA} from "@/views/chart/chart/util";
// let positionBox = []
// let coordinates = [] // 坐标点集合
@ -984,8 +985,9 @@ export default {
...style
}
} else if (this.canvasStyleData.panel.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(this.canvasStyleData.panel.color, this.canvasStyleData.panel.alpha||100)
style = {
background: this.canvasStyleData.panel.color,
background: colorRGBA,
...style
}
}

4
frontend/src/components/canvas/components/editor/Preview.vue
View File

@ -164,6 +164,7 @@ import { queryAll } from '@/api/panel/pdfTemplate'
import PDFPreExport from '@/views/panel/export/PDFPreExport'
import { listenGlobalKeyDownPreview } from '@/components/canvas/utils/shortcutKey'
import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
import {hexColorToRGBA} from "@/views/chart/chart/util";
const erd = elementResizeDetectorMaker()
export default {
@ -343,8 +344,9 @@ export default {
background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat`
}
} else if (styleInfo.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(styleInfo.color, styleInfo.alpha||100)
style = {
background: styleInfo.color
background: colorRGBA
}
} else {
style = {

3
frontend/src/components/canvas/customComponent/UserViewDialog.vue
View File

@ -144,8 +144,9 @@ export default {
...style
}
} else if (this.canvasStyleData.panel.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(this.canvasStyleData.panel.color, this.canvasStyleData.panel.alpha||100)
style = {
background: this.canvasStyleData.panel.color,
background: colorRGBA,
...style
}
}

3
frontend/src/components/canvas/customComponent/UserViewMobileDialog.vue
View File

@ -102,8 +102,9 @@ export default {
...style
}
} else if (this.canvasStyleData.panel.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(this.canvasStyleData.panel.color, this.canvasStyleData.panel.alpha||100)
style = {
background: this.canvasStyleData.panel.color,
background: colorRGBA,
...style
}
}

2
frontend/src/components/canvas/utils/utils.js
View File

@ -97,6 +97,8 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
componentStyle.themeId = (componentStyle.themeId || 'NO_THEME')
componentStyle.panel.themeColor = (componentStyle.panel.themeColor || 'light')
componentStyle.panel.mobileSetting = (componentStyle.panel.mobileSetting || deepCopy(MOBILE_SETTING))
componentStyle.panel.mobileSetting.alpha = (componentStyle.panel.mobileSetting.alpha === undefined ? 100 : componentStyle.panel.mobileSetting.alpha)
componentStyle.panel.alpha = (componentStyle.panel.alpha === undefined ? 100 : componentStyle.panel.alpha)
// 主题增加组件背景设置
if (componentStyle.chartCommonStyle) {

3
frontend/src/views/background/BackgroundOverall.vue
View File

@ -228,8 +228,9 @@ export default {
...style
}
} else if (this.canvasStyleData.panel.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(this.canvasStyleData.panel.color, this.canvasStyleData.panel.alpha||100)
style = {
background: this.canvasStyleData.panel.color,
background: colorRGBA,
...style
}
}

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

@ -263,6 +263,7 @@ import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
import { COLOR_PANEL } from '@/views/chart/chart/chart'
import { uploadFileResult } from '@/api/staticResource/staticResource'
import { COMMON_BACKGROUND_NONE } from '@/components/canvas/customComponent/component-list'
import {hexColorToRGBA} from "@/views/chart/chart/util";
export default {
name: 'Background',
@ -290,8 +291,9 @@ export default {
...style
}
} else if (this.canvasStyleData.panel.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(this.canvasStyleData.panel.color, this.canvasStyleData.panel.alpha||100)
style = {
background: this.canvasStyleData.panel.color,
background: colorRGBA,
...style
}
}

4
frontend/src/views/chart/components/componentStyle/dialog/RemarkEditor.vue
View File

@ -16,6 +16,7 @@ import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入不显
import Editor from '@tinymce/tinymce-vue'
import { imgUrlTrans } from '@/components/canvas/utils/utils'
import { mapState } from 'vuex'
import {hexColorToRGBA} from "@/views/chart/chart/util";
// 编辑器引入
export default {
name: 'RemarkEditor',
@ -82,8 +83,9 @@ export default {
...style
}
} else if (this.canvasStyleData.panel.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(this.canvasStyleData.panel.color, this.canvasStyleData.panel.alpha||100)
style = {
background: this.canvasStyleData.panel.color,
background: colorRGBA,
...style
}
}

4
frontend/src/views/panel/edit/ComponentWait.vue
View File

@ -47,6 +47,7 @@ import { mapState } from 'vuex'
import ComponentWaitItem from '@/views/panel/edit/ComponentWaitItem'
import MobileBackgroundSelector from '@/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector'
import { imgUrlTrans } from '@/components/canvas/utils/utils'
import {hexColorToRGBA} from "@/views/chart/chart/util";
export default {
name: 'ComponentWait',
@ -81,8 +82,9 @@ export default {
background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat`
}
} else if (styleInfo.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(styleInfo.color, styleInfo.alpha||100)
style = {
background: styleInfo.color
background: colorRGBA
}
} else {
style = {

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

@ -200,21 +200,23 @@
<el-row class="this_mobile_canvas_inner_top">
{{ panelInfo.name }}
</el-row>
<el-row
id="canvasInfoMobile"
class="this_mobile_canvas_main"
:style="mobileCanvasStyle"
>
<canvas-opt-bar v-if="!previewVisible&&mobileLayoutStatus"/>
<de-canvas
v-if="!previewVisible&&mobileLayoutStatus"
ref="canvasMainRef"
:canvas-style-data="canvasStyleData"
:component-data="mainCanvasComponentData"
:canvas-id="canvasId"
:canvas-pid="'0'"
:mobile-layout-status="true"
/>
<el-row class="this_mobile_canvas_main_outer">
<el-row
id="canvasInfoMobile"
class="this_mobile_canvas_main"
:style="mobileCanvasStyle"
>
<canvas-opt-bar v-if="!previewVisible&&mobileLayoutStatus"/>
<de-canvas
v-if="!previewVisible&&mobileLayoutStatus"
ref="canvasMainRef"
:canvas-style-data="canvasStyleData"
:component-data="mainCanvasComponentData"
:canvas-id="canvasId"
:canvas-pid="'0'"
:mobile-layout-status="true"
/>
</el-row>
</el-row>
<el-row class="this_mobile_canvas_inner_bottom">
<el-col :span="12">
@ -536,6 +538,7 @@ import TextAttr from '@/components/canvas/components/TextAttr'
import { userLoginInfo } from '@/api/systemInfo/userLogin'
import { activeWatermark } from '@/components/canvas/tools/watermark'
import PositionAdjust from '@/views/chart/view/PositionAdjust'
import {hexColorToRGBA} from "@/views/chart/chart/util";
export default {
name: 'PanelEdit',
components: {
@ -699,8 +702,9 @@ export default {
background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat`
}
} else if (styleInfo.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(styleInfo.color, styleInfo.alpha||100)
style = {
background: styleInfo.color
background: colorRGBA
}
} else {
style = {
@ -722,8 +726,9 @@ export default {
...style
}
} else if (this.canvasStyleData.panel.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(this.canvasStyleData.panel.color, this.canvasStyleData.panel.alpha||100)
style = {
background: this.canvasStyleData.panel.color,
background: colorRGBA,
...style
}
}
@ -1567,11 +1572,16 @@ export default {
width: 100%;
}
.this_mobile_canvas_main_outer {
height: calc(100% - 120px);;
width: 100%;
background-color: #d7d9e3;
}
.this_mobile_canvas_main {
overflow-x: hidden;
overflow-y: auto;
height: calc(100% - 120px);;
background-color: #d7d9e3;
height: 100%;
background-size: 100% 100% !important;
}

2
frontend/src/views/panel/panel.js
View File

@ -32,6 +32,7 @@ export const FILTER_COMMON_STYLE_DARK = {
export const MOBILE_SETTING = {
customSetting: false,
color: '#ffffff',
alpha: 100, // 新增透明度设置
imageUrl: null,
backgroundType: 'image'
}
@ -40,6 +41,7 @@ export const DEFAULT_PANEL_STYLE = {
mobileSetting: MOBILE_SETTING,
themeColor: 'light',
color: '#ffffff',
alpha: 100, // 新增透明度设置
imageUrl: null,
backgroundType: 'image',
gap: 'yes',

51
frontend/src/views/panel/subjectSetting/panelStyle/BackgroundSelector.vue
View File

@ -20,15 +20,29 @@
</el-col>
<el-col
v-show="panel.backgroundType==='color'"
:span="10"
:span="24"
>
<el-color-picker
v-model="panel.color"
:predefine="predefineColors"
size="mini"
class="color-picker-custom"
@change="onChangeType"
/>
<el-col :span="4">
<el-color-picker
v-model="panel.color"
:predefine="predefineColors"
size="mini"
class="color-picker-custom"
@change="onChangeType"
/>
</el-col>
<el-col :span="5">
<span class="params-title-small">{{ $t('chart.not_alpha') }}</span>
</el-col>
<el-col :span="15">
<el-slider
v-model="panel.alpha"
show-input
:show-input-controls="false"
input-size="mini"
@change="onChangeType"
/>
</el-col>
</el-col>
<el-col
v-show="panel.backgroundType==='image'"
@ -262,4 +276,25 @@ span {
color: var(--TextPrimary, #1F2329) !important;
line-height: 22px;
}
::v-deep .el-slider__input {
width: 40px;
padding-left: 0px;
padding-right: 0px;
}
::v-deep .el-input__inner {
padding: 0px !important;
}
::v-deep .el-slider__runway {
margin-right: 60px !important;
}
.params-title-small {
font-size: 12px !important;
color: var(--TextPrimary, #1F2329) !important;
line-height: 40px;
}
</style>

51
frontend/src/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector.vue
View File

@ -22,14 +22,28 @@
v-show="mobileSetting.backgroundType==='color'"
:span="10"
>
<el-color-picker
v-model="mobileSetting.color"
:predefine="predefineColors"
size="mini"
class="color-picker-custom"
:disabled="!mobileSetting.customSetting"
@change="onChangeType"
/>
<el-col :span="4">
<el-color-picker
v-model="mobileSetting.color"
:predefine="predefineColors"
size="mini"
class="color-picker-custom"
:disabled="!mobileSetting.customSetting"
@change="onChangeType"
/>
</el-col>
<el-col :span="5">
<span class="params-title-small">{{ $t('chart.not_alpha') }}</span>
</el-col>
<el-col :span="15">
<el-slider
v-model="mobileSetting.alpha"
show-input
:show-input-controls="false"
input-size="mini"
@change="onChangeType"
/>
</el-col>
</el-col>
<el-col
v-show="mobileSetting.backgroundType==='image'"
@ -265,4 +279,25 @@ span {
color: var(--TextPrimary, #1F2329) !important;
line-height: 22px;
}
::v-deep .el-slider__input {
width: 40px;
padding-left: 0px;
padding-right: 0px;
}
::v-deep .el-input__inner {
padding: 0px !important;
}
::v-deep .el-slider__runway {
margin-right: 60px !important;
}
.params-title-small {
font-size: 12px !important;
color: var(--TextPrimary, #1F2329) !important;
line-height: 40px;
}
</style>