diff --git a/src/components/Pages/ChartItemSetting/StylesSetting.vue b/src/components/Pages/ChartItemSetting/StylesSetting.vue index f14076b8..bf63eab8 100644 --- a/src/components/Pages/ChartItemSetting/StylesSetting.vue +++ b/src/components/Pages/ChartItemSetting/StylesSetting.vue @@ -5,6 +5,9 @@ + @@ -121,6 +124,9 @@ > + + + 若预览时大屏模糊,可以尝试关闭滤镜进行修复 diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 4333373a..04931c06 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -38,6 +38,9 @@ interface EchartsDataType { // 滤镜/变换枚举 export enum FilterEnum { + // 是否启用 + FILTERS_SHOW = 'filterShow', + // 透明度 OPACITY = 'opacity', // 饱和度 @@ -65,6 +68,7 @@ export interface PublicConfigType { isGroup: boolean attr: { x: number; y: number; w: number; h: number; zIndex: number; offsetX: number; offsetY: number; } styles: { + [FilterEnum.FILTERS_SHOW]: boolean [FilterEnum.OPACITY]: number [FilterEnum.SATURATE]: number [FilterEnum.CONTRAST]: number diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index 30122bed..ddcc2056 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -43,6 +43,8 @@ export class PublicConfigClass implements PublicConfigType { public attr = { ...chartInitConfig, zIndex: -1 } // 基本样式 public styles = { + // 使用滤镜 + filterShow: true, // 色相 hueRotate: 0, // 饱和度 diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index 8df3bcce..160532fe 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -93,6 +93,8 @@ export type EditCanvasConfigType = { [EditCanvasConfigEnum.PROJECT_NAME]: string, // 项目描述 [EditCanvasConfigEnum.REMARKS]: string, + // 滤镜-启用 + [FilterEnum.FILTERS_SHOW]: boolean // 滤镜-色相 [FilterEnum.HUE_ROTATE]: number // 滤镜-饱和度 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index c12278c1..928bdd4c 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -97,6 +97,8 @@ export const useChartEditStore = defineStore({ width: 1920, // 默认高度 height: 1080, + // 启用滤镜 + filterShow: false, // 色相 hueRotate: 0, // 饱和度 diff --git a/src/utils/style.ts b/src/utils/style.ts index c692fdc4..d8bc200c 100644 --- a/src/utils/style.ts +++ b/src/utils/style.ts @@ -15,7 +15,8 @@ export const animationsClass = (animations: string[]) => { } // * 滤镜 -export const getFilterStyle = (styles: StylesType | EditCanvasConfigType) => { +export const getFilterStyle = (styles?: StylesType | EditCanvasConfigType) => { + if(!styles) return {} const { opacity, saturate, contrast, hueRotate, brightness } = styles return { opacity: opacity, diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index 6adfc838..3ead9b9d 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -19,7 +19,7 @@
@@ -54,7 +54,7 @@ :themeColor="themeColor" :style="{ ...useSizeStyle(item.attr), - ...getFilterStyle(item.styles), + ...getFilterStyle(filterShow ? item.styles : undefined), ...getTransformStyle(item.styles) }" > @@ -148,6 +148,11 @@ const themeColor = computed(() => { return chartColors[chartThemeColor] }) +// 是否展示渲染 +const filterShow = computed(() => { + return chartEditStore.getEditCanvasConfig.filterShow +}) + // 背景 const rangeStyle = computed(() => { // 设置背景色和图片背景 diff --git a/src/views/preview/suspenseIndex.vue b/src/views/preview/suspenseIndex.vue index 7036df6e..2a51dad7 100644 --- a/src/views/preview/suspenseIndex.vue +++ b/src/views/preview/suspenseIndex.vue @@ -59,7 +59,7 @@ if(localStorageInfo.isRelease === false) { const previewRefStyle = computed(() => { return { ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig), - ...getFilterStyle(localStorageInfo.editCanvasConfig), + ...getFilterStyle(localStorageInfo.editCanvasConfig.filterShow ? localStorageInfo.editCanvasConfig : undefined), } })