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 1defbb77..b0748378 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -59,6 +59,8 @@ export enum EditCanvasConfigEnum { } export interface EditCanvasConfigType { + // 滤镜-启用 + [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 bd2f70ba..d2cd8d8f 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -79,6 +79,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 25e4d173..9043444d 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) }" > @@ -146,6 +146,11 @@ const themeColor = computed(() => { return chartColors[chartThemeColor] }) +// 是否展示渲染 +const filterShow = computed(() => { + return chartEditStore.getEditCanvasConfig.filterShow +}) + // 背景 const rangeStyle = computed(() => { // 设置背景色和图片背景 diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue index fbe74eca..75431eb7 100644 --- a/src/views/preview/index.vue +++ b/src/views/preview/index.vue @@ -42,7 +42,7 @@ const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartE const previewRefStyle = computed(() => { return { ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig), - ...getFilterStyle(localStorageInfo.editCanvasConfig) + ...getFilterStyle(localStorageInfo.editCanvasConfig.filterShow ? localStorageInfo.editCanvasConfig : undefined) } })