From 8b6c616a153d1d4727543fb06e5b645ea1cbf00d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sun, 26 Feb 2023 23:34:40 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E5=A4=84=E7=90=86=E6=B8=90=E5=8F=98?= =?UTF-8?q?=E8=89=B2=E5=92=8C=E8=87=AA=E5=AE=9A=E4=B9=89=E8=89=B2=E7=9A=84?= =?UTF-8?q?=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Charts/Lines/LineGradientSingle/index.vue | 6 ++- .../Charts/Lines/LineGradients/index.vue | 6 ++- .../Charts/Lines/LineLinearSingle/index.vue | 6 ++- .../Charts/Mores/WaterPolo/index.vue | 6 ++- src/utils/style.ts | 36 +++++++++++--- .../components/CreateColor/index.vue | 49 +++++++++++++------ .../components/PreviewRenderList/index.vue | 9 ++-- 7 files changed, 84 insertions(+), 34 deletions(-) diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue index e0d9fb7e..0bd33cfe 100644 --- a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue +++ b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue @@ -15,7 +15,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' import { useChartDataFetch } from '@/hooks' -import { isPreview } from '@/utils' +import { isPreview, colorGradientCustomMerge} from '@/utils' const props = defineProps({ themeSetting: { @@ -45,7 +45,9 @@ watch( (newColor: keyof typeof chartColorsSearch) => { try { if (!isPreview()) { - const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme] + const themeColor = + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] || + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme] props.chartConfig.option.series.forEach((value: any, index: number) => { value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [ { diff --git a/src/packages/components/Charts/Lines/LineGradients/index.vue b/src/packages/components/Charts/Lines/LineGradients/index.vue index 8643426f..67ed6437 100644 --- a/src/packages/components/Charts/Lines/LineGradients/index.vue +++ b/src/packages/components/Charts/Lines/LineGradients/index.vue @@ -14,7 +14,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' import { useChartDataFetch } from '@/hooks' -import { isPreview } from '@/utils' +import { isPreview, colorGradientCustomMerge} from '@/utils' const props = defineProps({ themeSetting: { @@ -44,7 +44,9 @@ watch( (newColor: keyof typeof chartColorsSearch) => { try { if (!isPreview()) { - const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme] + const themeColor = + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] || + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme] props.chartConfig.option.series.forEach((value: any, index: number) => { value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [ { diff --git a/src/packages/components/Charts/Lines/LineLinearSingle/index.vue b/src/packages/components/Charts/Lines/LineLinearSingle/index.vue index 19f4ef70..b2863a23 100644 --- a/src/packages/components/Charts/Lines/LineLinearSingle/index.vue +++ b/src/packages/components/Charts/Lines/LineLinearSingle/index.vue @@ -15,7 +15,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' import { useChartDataFetch } from '@/hooks' -import { isPreview } from '@/utils' +import { isPreview, colorGradientCustomMerge } from '@/utils' const props = defineProps({ themeSetting: { @@ -45,7 +45,9 @@ watch( (newColor: keyof typeof chartColorsSearch) => { try { if (!isPreview()) { - const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme] + const themeColor = + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] || + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme] props.chartConfig.option.series.forEach((value: any) => { value.lineStyle.shadowColor = themeColor[2] value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => { diff --git a/src/packages/components/Charts/Mores/WaterPolo/index.vue b/src/packages/components/Charts/Mores/WaterPolo/index.vue index f5aa4f74..e1fefed9 100644 --- a/src/packages/components/Charts/Mores/WaterPolo/index.vue +++ b/src/packages/components/Charts/Mores/WaterPolo/index.vue @@ -10,7 +10,7 @@ import 'echarts-liquidfill/src/liquidFill.js' import { CanvasRenderer } from 'echarts/renderers' import { GridComponent } from 'echarts/components' import config from './config' -import { isPreview, isString, isNumber } from '@/utils' +import { isPreview, isString, isNumber, colorGradientCustomMerge } from '@/utils' import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartDataFetch } from '@/hooks' @@ -44,7 +44,9 @@ watch( (newColor: keyof typeof chartColorsSearch) => { try { if (!isPreview()) { - const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme] + const themeColor = + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] || + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme] // 背景颜色 props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2] // 水球颜色 diff --git a/src/utils/style.ts b/src/utils/style.ts index d4a9d30d..34dce3fe 100644 --- a/src/utils/style.ts +++ b/src/utils/style.ts @@ -2,7 +2,7 @@ import Color from 'color' import { useDesignStore } from '@/store/modules/designStore/designStore' import { PickCreateComponentType } from '@/packages/index.d' import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' -import { chartColors, CustomColorsType } from '@/settings/chartThemes/index' +import { chartColors, chartColorsSearch, CustomColorsType } from '@/settings/chartThemes/index' type AttrType = PickCreateComponentType<'attr'> type StylesType = PickCreateComponentType<'styles'> @@ -93,12 +93,12 @@ export function darken(color: string, concentration: number) { * @returns */ export function hslToHexa(hslString: string): string { - const color = Color(hslString); + const color = Color(hslString) return color.hexa() } export function hslToHex(hslString: string): string { - const color = Color(hslString); + const color = Color(hslString) return color.hex() } @@ -119,9 +119,9 @@ export const setHtmlTheme = (themeName?: string) => { /** * * 合并基础颜色和自定义颜色 - * @param chartDefaultColors - * @param customColor - * @returns + * @param chartDefaultColors + * @param customColor + * @returns */ export const colorCustomMerge = (customColor?: CustomColorsType[]) => { type FormateCustomColorType = { @@ -138,4 +138,26 @@ export const colorCustomMerge = (customColor?: CustomColorsType[]) => { } }) return { ...formateCustomColor, ...chartColors } -} \ No newline at end of file +} + +/** + * * 合并基础渐变颜色和自定义渐变颜色 + * @param customColor + */ +export const colorGradientCustomMerge = (customColor?: CustomColorsType[]) => { + type FormateGradientCustomColorType = { + [T: string]: string[] + } + const formateGradientCustomColor: FormateGradientCustomColorType = {} + customColor?.forEach(item => { + formateGradientCustomColor[item.id] = [ + item.color[0], + item.color[1], + fade(item.color[0], 0.3), + fade(item.color[0], 0.5), + fade(item.color[1], 0.5) + ] + }) + + return { ...formateGradientCustomColor, ...chartColorsSearch } +} diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue index 35964b5e..1c8c3271 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue @@ -199,21 +199,34 @@ const createColor = () => { // 删除 const deleteHandle = (index: number) => { - goDialog({ - message: `是否删除此颜色？`, - onPositiveCallback: () => { - colorList.splice(index, 1) - chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList)) - nextTick(() => { - if (index) { - selectHandle(colorList[index - 1]) - } else { - // 已清空 - selectColor.selectInfo = undefined - } - }) - } - }) + const positiveHandle = () => { + colorList.splice(index, 1) + chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList)) + nextTick(() => { + if (index) { + selectHandle(colorList[index - 1]) + } else { + // 已清空 + selectColor.selectInfo = undefined + } + }) + } + if (updateColor.value !== undefined) { + goDialog({ + message: '当前有变动未保存，是否直接放弃修改？', + onPositiveCallback: () => { + updateColor.value = undefined + positiveHandle() + } + }) + } else { + goDialog({ + message: `是否删除此颜色？`, + onPositiveCallback: () => { + positiveHandle() + } + }) + } } // 存储更新数据的值 @@ -226,13 +239,17 @@ const saveHandle = () => { if (!updateColor.value) return const index = colorList.findIndex(item => item.id === updateColor.value?.id) if (index !== -1) { + window.$message.success('颜色应用成功！') const updateColorPrefix = cloneDeep({ ...updateColor.value, name: updateColor.value.name || '未定义' }) colorList.splice(index, 1, updateColorPrefix) - window.$message.success('颜色应用成功！') updateColor.value = undefined + const selectTheme = chartEditStore.getEditCanvasConfig.chartThemeColor + // 变换主题强制渐变色更新 + chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, 'dark') // 存储到全局数据中 nextTick(() => { chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList)) + chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, selectTheme) }) } else { window.$message.error('颜色应用失败！') diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue index eca587aa..800214cf 100644 --- a/src/views/preview/components/PreviewRenderList/index.vue +++ b/src/views/preview/components/PreviewRenderList/index.vue @@ -43,12 +43,14 @@ import { ChartEditStorageType } from '../../index.d' import { PreviewRenderGroup } from '../PreviewRenderGroup/index' import { CreateComponentGroupType } from '@/packages/index.d' import { chartColors } from '@/settings/chartThemes/index' -import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' +import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils' import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from '../../utils' import { useLifeHandler } from '@/hooks' // 初始化数据池 const { initDataPond, clearMittDataPondMap } = useChartDataPondFetch() +const chartEditStore = useChartEditStore() const props = defineProps({ localStorageInfo: { @@ -63,10 +65,11 @@ const themeSetting = computed(() => { return chartThemeSetting }) + // 配置项 const themeColor = computed(() => { - const chartThemeColor = props.localStorageInfo.editCanvasConfig.chartThemeColor - return chartColors[chartThemeColor] + const colorCustomMergeData = colorCustomMerge(props.localStorageInfo.editCanvasConfig.chartCustomThemeColorInfo) + return colorCustomMergeData[props.localStorageInfo.editCanvasConfig.chartThemeColor] }) // 组件渲染结束初始化数据池