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 _jq from 'jquery'
import Background from '@/views/background/index' import Background from '@/views/background/index'
import PointShadow from '@/components/deDrag/PointShadow' import PointShadow from '@/components/deDrag/PointShadow'
import {hexColorToRGBA} from "@/views/chart/chart/util";
// let positionBox = [] // let positionBox = []
// let coordinates = [] // 坐标点集合 // let coordinates = [] // 坐标点集合
@ -984,8 +985,9 @@ export default {
...style ...style
} }
} else if (this.canvasStyleData.panel.backgroundType === 'color') { } else if (this.canvasStyleData.panel.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(this.canvasStyleData.panel.color, this.canvasStyleData.panel.alpha||100)
style = { style = {
background: this.canvasStyleData.panel.color, background: colorRGBA,
...style ...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 PDFPreExport from '@/views/panel/export/PDFPreExport'
import { listenGlobalKeyDownPreview } from '@/components/canvas/utils/shortcutKey' import { listenGlobalKeyDownPreview } from '@/components/canvas/utils/shortcutKey'
import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog' import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
import {hexColorToRGBA} from "@/views/chart/chart/util";
const erd = elementResizeDetectorMaker() const erd = elementResizeDetectorMaker()
export default { export default {
@ -343,8 +344,9 @@ export default {
background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat` background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat`
} }
} else if (styleInfo.backgroundType === 'color') { } else if (styleInfo.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(styleInfo.color, styleInfo.alpha||100)
style = { style = {
background: styleInfo.color background: colorRGBA
} }
} else { } else {
style = { style = {

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

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

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

@ -102,8 +102,9 @@ export default {
...style ...style
} }
} else if (this.canvasStyleData.panel.backgroundType === 'color') { } else if (this.canvasStyleData.panel.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(this.canvasStyleData.panel.color, this.canvasStyleData.panel.alpha||100)
style = { style = {
background: this.canvasStyleData.panel.color, background: colorRGBA,
...style ...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.themeId = (componentStyle.themeId || 'NO_THEME')
componentStyle.panel.themeColor = (componentStyle.panel.themeColor || 'light') componentStyle.panel.themeColor = (componentStyle.panel.themeColor || 'light')
componentStyle.panel.mobileSetting = (componentStyle.panel.mobileSetting || deepCopy(MOBILE_SETTING)) 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) { if (componentStyle.chartCommonStyle) {

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

@ -228,8 +228,9 @@ export default {
...style ...style
} }
} else if (this.canvasStyleData.panel.backgroundType === 'color') { } else if (this.canvasStyleData.panel.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(this.canvasStyleData.panel.color, this.canvasStyleData.panel.alpha||100)
style = { style = {
background: this.canvasStyleData.panel.color, background: colorRGBA,
...style ...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 { COLOR_PANEL } from '@/views/chart/chart/chart'
import { uploadFileResult } from '@/api/staticResource/staticResource' import { uploadFileResult } from '@/api/staticResource/staticResource'
import { COMMON_BACKGROUND_NONE } from '@/components/canvas/customComponent/component-list' import { COMMON_BACKGROUND_NONE } from '@/components/canvas/customComponent/component-list'
import {hexColorToRGBA} from "@/views/chart/chart/util";
export default { export default {
name: 'Background', name: 'Background',
@ -290,8 +291,9 @@ export default {
...style ...style
} }
} else if (this.canvasStyleData.panel.backgroundType === 'color') { } else if (this.canvasStyleData.panel.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(this.canvasStyleData.panel.color, this.canvasStyleData.panel.alpha||100)
style = { style = {
background: this.canvasStyleData.panel.color, background: colorRGBA,
...style ...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 Editor from '@tinymce/tinymce-vue'
import { imgUrlTrans } from '@/components/canvas/utils/utils' import { imgUrlTrans } from '@/components/canvas/utils/utils'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import {hexColorToRGBA} from "@/views/chart/chart/util";
// 编辑器引入 // 编辑器引入
export default { export default {
name: 'RemarkEditor', name: 'RemarkEditor',
@ -82,8 +83,9 @@ export default {
...style ...style
} }
} else if (this.canvasStyleData.panel.backgroundType === 'color') { } else if (this.canvasStyleData.panel.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(this.canvasStyleData.panel.color, this.canvasStyleData.panel.alpha||100)
style = { style = {
background: this.canvasStyleData.panel.color, background: colorRGBA,
...style ...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 ComponentWaitItem from '@/views/panel/edit/ComponentWaitItem'
import MobileBackgroundSelector from '@/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector' import MobileBackgroundSelector from '@/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector'
import { imgUrlTrans } from '@/components/canvas/utils/utils' import { imgUrlTrans } from '@/components/canvas/utils/utils'
import {hexColorToRGBA} from "@/views/chart/chart/util";
export default { export default {
name: 'ComponentWait', name: 'ComponentWait',
@ -81,8 +82,9 @@ export default {
background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat` background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat`
} }
} else if (styleInfo.backgroundType === 'color') { } else if (styleInfo.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(styleInfo.color, styleInfo.alpha||100)
style = { style = {
background: styleInfo.color background: colorRGBA
} }
} else { } else {
style = { style = {

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

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

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

@ -20,15 +20,29 @@
</el-col> </el-col>
<el-col <el-col
v-show="panel.backgroundType==='color'" v-show="panel.backgroundType==='color'"
:span="10" :span="24"
> >
<el-color-picker <el-col :span="4">
v-model="panel.color" <el-color-picker
:predefine="predefineColors" v-model="panel.color"
size="mini" :predefine="predefineColors"
class="color-picker-custom" size="mini"
@change="onChangeType" 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>
<el-col <el-col
v-show="panel.backgroundType==='image'" v-show="panel.backgroundType==='image'"
@ -262,4 +276,25 @@ span {
color: var(--TextPrimary, #1F2329) !important; color: var(--TextPrimary, #1F2329) !important;
line-height: 22px; 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> </style>

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

@ -22,14 +22,28 @@
v-show="mobileSetting.backgroundType==='color'" v-show="mobileSetting.backgroundType==='color'"
:span="10" :span="10"
> >
<el-color-picker <el-col :span="4">
v-model="mobileSetting.color" <el-color-picker
:predefine="predefineColors" v-model="mobileSetting.color"
size="mini" :predefine="predefineColors"
class="color-picker-custom" size="mini"
:disabled="!mobileSetting.customSetting" class="color-picker-custom"
@change="onChangeType" :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>
<el-col <el-col
v-show="mobileSetting.backgroundType==='image'" v-show="mobileSetting.backgroundType==='image'"
@ -265,4 +279,25 @@ span {
color: var(--TextPrimary, #1F2329) !important; color: var(--TextPrimary, #1F2329) !important;
line-height: 22px; 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> </style>