diff --git a/frontend/src/components/canvas/components/editor/DeEditor.vue b/frontend/src/components/canvas/components/editor/DeEditor.vue index 55935a47a6..9b93983894 100644 --- a/frontend/src/components/canvas/components/editor/DeEditor.vue +++ b/frontend/src/components/canvas/components/editor/DeEditor.vue @@ -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 } } diff --git a/frontend/src/components/canvas/components/editor/Preview.vue b/frontend/src/components/canvas/components/editor/Preview.vue index 870bdb5fc8..5b0082e35a 100644 --- a/frontend/src/components/canvas/components/editor/Preview.vue +++ b/frontend/src/components/canvas/components/editor/Preview.vue @@ -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 = { diff --git a/frontend/src/components/canvas/customComponent/UserViewDialog.vue b/frontend/src/components/canvas/customComponent/UserViewDialog.vue index abfeacff8b..58ea21f700 100644 --- a/frontend/src/components/canvas/customComponent/UserViewDialog.vue +++ b/frontend/src/components/canvas/customComponent/UserViewDialog.vue @@ -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 } } diff --git a/frontend/src/components/canvas/customComponent/UserViewMobileDialog.vue b/frontend/src/components/canvas/customComponent/UserViewMobileDialog.vue index 8feabb5299..be0d4e4af8 100644 --- a/frontend/src/components/canvas/customComponent/UserViewMobileDialog.vue +++ b/frontend/src/components/canvas/customComponent/UserViewMobileDialog.vue @@ -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 } } diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js index 853bc73376..d27463c4e6 100644 --- a/frontend/src/components/canvas/utils/utils.js +++ b/frontend/src/components/canvas/utils/utils.js @@ -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) { diff --git a/frontend/src/views/background/BackgroundOverall.vue b/frontend/src/views/background/BackgroundOverall.vue index 0aa5fc5553..5a9a6a9af7 100644 --- a/frontend/src/views/background/BackgroundOverall.vue +++ b/frontend/src/views/background/BackgroundOverall.vue @@ -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 } } diff --git a/frontend/src/views/background/index.vue b/frontend/src/views/background/index.vue index 92e721d2be..505cc1517e 100644 --- a/frontend/src/views/background/index.vue +++ b/frontend/src/views/background/index.vue @@ -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 } } diff --git a/frontend/src/views/chart/components/componentStyle/dialog/RemarkEditor.vue b/frontend/src/views/chart/components/componentStyle/dialog/RemarkEditor.vue index 5504f61927..3b988016f1 100644 --- a/frontend/src/views/chart/components/componentStyle/dialog/RemarkEditor.vue +++ b/frontend/src/views/chart/components/componentStyle/dialog/RemarkEditor.vue @@ -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 } } diff --git a/frontend/src/views/panel/edit/ComponentWait.vue b/frontend/src/views/panel/edit/ComponentWait.vue index e2be9e8339..fc31b760e3 100644 --- a/frontend/src/views/panel/edit/ComponentWait.vue +++ b/frontend/src/views/panel/edit/ComponentWait.vue @@ -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 = { diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index 42a85c27f2..85d11600e7 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -200,21 +200,23 @@ {{ panelInfo.name }} - - - + + + + + @@ -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; } diff --git a/frontend/src/views/panel/panel.js b/frontend/src/views/panel/panel.js index 6e8fdcfe0b..531f04b9c8 100644 --- a/frontend/src/views/panel/panel.js +++ b/frontend/src/views/panel/panel.js @@ -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', diff --git a/frontend/src/views/panel/subjectSetting/panelStyle/BackgroundSelector.vue b/frontend/src/views/panel/subjectSetting/panelStyle/BackgroundSelector.vue index 2e60b5b8ed..c7639f20aa 100644 --- a/frontend/src/views/panel/subjectSetting/panelStyle/BackgroundSelector.vue +++ b/frontend/src/views/panel/subjectSetting/panelStyle/BackgroundSelector.vue @@ -20,15 +20,29 @@ - + + + + + {{ $t('chart.not_alpha') }} + + + + diff --git a/frontend/src/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector.vue b/frontend/src/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector.vue index 1c32a570f9..048e652d3e 100644 --- a/frontend/src/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector.vue +++ b/frontend/src/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector.vue @@ -22,14 +22,28 @@ v-show="mobileSetting.backgroundType==='color'" :span="10" > - + + + + + {{ $t('chart.not_alpha') }} + + + +