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),
}
})