From 4710fb18a4cffcf8f622b31c8708d49beb9989c6 Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Thu, 18 Apr 2024 17:11:42 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E6=8C=87=E6=A0=87?= =?UTF-8?q?=E5=8D=A1=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE=E5=90=8D=E7=A7=B0?= =?UTF-8?q?=E5=92=8C=E5=80=BC=E9=97=B4=E8=B7=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../indicator/DeIndicator.vue | 96 ++++++------- core/core-frontend/src/locales/zh-CN.ts | 1 + .../src/models/chart/chart-attr.d.ts | 132 ++++++++++++++++++ .../src/models/chart/chart-style.d.ts | 33 ----- core/core-frontend/src/utils/canvasStyle.ts | 2 +- .../components/IndicatorNameSelector.vue | 29 +++- .../chart/components/editor/util/chart.ts | 17 +-- .../views/chart/components/views/index.vue | 4 +- 8 files changed, 219 insertions(+), 95 deletions(-) diff --git a/core/core-frontend/src/custom-component/indicator/DeIndicator.vue b/core/core-frontend/src/custom-component/indicator/DeIndicator.vue index 4425a295d1..1398fde750 100644 --- a/core/core-frontend/src/custom-component/indicator/DeIndicator.vue +++ b/core/core-frontend/src/custom-component/indicator/DeIndicator.vue @@ -7,7 +7,7 @@ import { deepCopy } from '@/utils/utils' import { cloneDeep, defaultsDeep, defaultTo } from 'lodash-es' import { BASE_VIEW_CONFIG, - CHART_CONT_FAMILY_MAP, + CHART_FONT_FAMILY_MAP, DEFAULT_INDICATOR_NAME_STYLE, DEFAULT_INDICATOR_STYLE } from '@/views/chart/components/editor/util/chart' @@ -170,7 +170,7 @@ const formattedResult = computed(() => { const emit = defineEmits(['onChartClick', 'onDrillFilters', 'onJumpClick']) -const contentStyle = ref({ +const contentStyle = ref({ display: 'flex', 'flex-direction': 'column', 'align-items': 'center', @@ -182,7 +182,7 @@ const indicatorClass = ref({ color: thresholdColor.value, 'font-size': DEFAULT_INDICATOR_STYLE.fontSize + 'px', 'font-family': defaultTo( - CHART_CONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.fontFamily], + CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.fontFamily], DEFAULT_INDICATOR_STYLE.fontFamily ), 'font-weight': DEFAULT_INDICATOR_STYLE.isBolder ? 'bold' : 'normal', @@ -196,7 +196,7 @@ const indicatorSuffixClass = ref({ color: DEFAULT_INDICATOR_STYLE.suffixColor, 'font-size': DEFAULT_INDICATOR_STYLE.suffixFontSize + 'px', 'font-family': defaultTo( - CHART_CONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.suffixFontFamily], + CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.suffixFontFamily], DEFAULT_INDICATOR_STYLE.suffixFontFamily ), 'font-weight': DEFAULT_INDICATOR_STYLE.suffixIsBolder ? 'bold' : 'normal', @@ -212,11 +212,15 @@ const suffixContent = ref('') const indicatorNameShow = ref(false) +const indicatorNameWrapperStyle = reactive({ + 'margin-top': DEFAULT_INDICATOR_NAME_STYLE.nameValueSpacing + 'px' +}) + const indicatorNameClass = ref({ color: DEFAULT_INDICATOR_NAME_STYLE.color, 'font-size': DEFAULT_INDICATOR_NAME_STYLE.fontSize + 'px', 'font-family': defaultTo( - CHART_CONT_FAMILY_MAP[DEFAULT_INDICATOR_NAME_STYLE.fontFamily], + CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_NAME_STYLE.fontFamily], DEFAULT_INDICATOR_NAME_STYLE.fontFamily ), 'font-weight': DEFAULT_INDICATOR_NAME_STYLE.isBolder ? 'bold' : 'normal', @@ -237,16 +241,16 @@ const renderChart = async view => { const chart = deepCopy({ ...defaultsDeep(view, TEMP_DEFAULT_CHART), data: chartData.value - }) + }) as ChartObj recursionTransObj(customAttrTrans, chart.customAttr, scale.value, terminal.value) recursionTransObj(customStyleTrans, chart.customStyle, scale.value, terminal.value) if (chart.customAttr) { - const customAttr = chart.customAttr + const { indicator, indicatorName, basicStyle } = chart.customAttr - if (customAttr.indicator) { - switch (customAttr.indicator.hPosition) { + if (indicator) { + switch (indicator.hPosition) { case 'left': contentStyle.value['align-items'] = 'flex-start' break @@ -256,7 +260,7 @@ const renderChart = async view => { default: contentStyle.value['align-items'] = 'center' } - switch (customAttr.indicator.vPosition) { + switch (indicator.vPosition) { case 'top': contentStyle.value['justify-content'] = 'flex-start' break @@ -267,73 +271,68 @@ const renderChart = async view => { contentStyle.value['justify-content'] = 'center' } - indicatorColor.value = customAttr.indicator.color - let suffixColor = customAttr.indicator.suffixColor + indicatorColor.value = indicator.color + let suffixColor = indicator.suffixColor - if ( - customAttr.basicStyle && - customAttr.basicStyle.alpha !== undefined && - !batchOptStatus.value - ) { - indicatorColor.value = hexColorToRGBA( - customAttr.basicStyle.colors[0], - customAttr.basicStyle.alpha - ) - suffixColor = hexColorToRGBA(customAttr.basicStyle.colors[1], customAttr.basicStyle.alpha) + if (basicStyle?.alpha !== undefined && !batchOptStatus.value) { + indicatorColor.value = hexColorToRGBA(basicStyle.colors[0], basicStyle.alpha) + suffixColor = hexColorToRGBA(basicStyle.colors[1], basicStyle.alpha) } indicatorClass.value = { color: thresholdColor.value, - 'font-size': customAttr.indicator.fontSize + 'px', + 'font-size': indicator.fontSize + 'px', 'font-family': defaultTo( - CHART_CONT_FAMILY_MAP[customAttr.indicator.fontFamily], + CHART_FONT_FAMILY_MAP[indicator.fontFamily], DEFAULT_INDICATOR_STYLE.fontFamily ), - 'font-weight': customAttr.indicator.isBolder ? 'bold' : 'normal', - 'font-style': customAttr.indicator.isItalic ? 'italic' : 'normal', - 'letter-spacing': customAttr.indicator.letterSpace + 'px', - 'text-shadow': customAttr.indicator.fontShadow ? '2px 2px 4px' : 'none', + 'font-weight': indicator.isBolder ? 'bold' : 'normal', + 'font-style': indicator.isItalic ? 'italic' : 'normal', + 'letter-spacing': indicator.letterSpace + 'px', + 'text-shadow': indicator.fontShadow ? '2px 2px 4px' : 'none', 'font-synthesis': 'weight style' } indicatorSuffixClass.value = { color: suffixColor, - 'font-size': customAttr.indicator.suffixFontSize + 'px', + 'font-size': indicator.suffixFontSize + 'px', 'font-family': defaultTo( - CHART_CONT_FAMILY_MAP[customAttr.indicator.suffixFontFamily], + CHART_FONT_FAMILY_MAP[indicator.suffixFontFamily], DEFAULT_INDICATOR_STYLE.suffixFontFamily ), - 'font-weight': customAttr.indicator.suffixIsBolder ? 'bold' : 'normal', - 'font-style': customAttr.indicator.suffixIsItalic ? 'italic' : 'normal', - 'letter-spacing': customAttr.indicator.suffixLetterSpace + 'px', - 'text-shadow': customAttr.indicator.suffixFontShadow ? '2px 2px 4px' : 'none', + 'font-weight': indicator.suffixIsBolder ? 'bold' : 'normal', + 'font-style': indicator.suffixIsItalic ? 'italic' : 'normal', + 'letter-spacing': indicator.suffixLetterSpace + 'px', + 'text-shadow': indicator.suffixFontShadow ? '2px 2px 4px' : 'none', 'font-synthesis': 'weight style' } - showSuffix.value = customAttr.indicator.suffixEnable - suffixContent.value = defaultTo(customAttr.indicator.suffix, '') + showSuffix.value = indicator.suffixEnable + suffixContent.value = defaultTo(indicator.suffix, '') } - if (customAttr.indicatorName && customAttr.indicatorName.show) { - let nameColor = customAttr.indicatorName.color + if (indicatorName?.show) { + let nameColor = indicatorName.color - if (customAttr.basicStyle && customAttr.basicStyle.alpha !== undefined) { - nameColor = hexColorToRGBA(customAttr.basicStyle.colors[2], customAttr.basicStyle.alpha) + if (basicStyle?.alpha !== undefined) { + nameColor = hexColorToRGBA(basicStyle.colors[2], basicStyle.alpha) } indicatorNameShow.value = true indicatorNameClass.value = { color: nameColor, - 'font-size': customAttr.indicatorName.fontSize + 'px', + 'font-size': indicatorName.fontSize + 'px', 'font-family': defaultTo( - CHART_CONT_FAMILY_MAP[customAttr.indicatorName.fontFamily], + CHART_FONT_FAMILY_MAP[indicatorName.fontFamily], DEFAULT_INDICATOR_NAME_STYLE.fontFamily ), - 'font-weight': customAttr.indicatorName.isBolder ? 'bold' : 'normal', - 'font-style': customAttr.indicatorName.isItalic ? 'italic' : 'normal', - 'letter-spacing': customAttr.indicatorName.letterSpace + 'px', - 'text-shadow': customAttr.indicatorName.fontShadow ? '2px 2px 4px' : 'none', + 'font-weight': indicatorName.isBolder ? 'bold' : 'normal', + 'font-style': indicatorName.isItalic ? 'italic' : 'normal', + 'letter-spacing': indicatorName.letterSpace + 'px', + 'text-shadow': indicatorName.fontShadow ? '2px 2px 4px' : 'none', 'font-synthesis': 'weight style' } + indicatorNameWrapperStyle['margin-top'] = + (indicatorName.nameValueSpacing ?? DEFAULT_INDICATOR_NAME_STYLE.nameValueSpacing) + 'px' } else { indicatorNameShow.value = false } @@ -363,9 +362,6 @@ const calcData = (view, callback) => { callback?.() }) } else { - if (view.type === 'map') { - renderChart(view) - } callback?.() } } @@ -382,7 +378,7 @@ defineExpose({ {{ formattedResult }} {{ suffixContent }} -
+
{{ resultName }}
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index 440564faae..5dd7536340 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/core/core-frontend/src/locales/zh-CN.ts @@ -982,6 +982,7 @@ export default { dimension_font_family: '名称字体', dimension_text_style: '名称样式', dimension_letter_space: '名称字间距', + name_value_spacing: '名称/值间距', font_family: '字体', letter_space: '字间距', font_shadow: '字体阴影', diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts index 681f8776fa..369a4ba001 100644 --- a/core/core-frontend/src/models/chart/chart-attr.d.ts +++ b/core/core-frontend/src/models/chart/chart-attr.d.ts @@ -38,6 +38,14 @@ declare interface ChartAttr { * 象限设置 */ quadrant: QuadrantAttr + /** + * 指标值 + */ + indicator: ChartIndicatorStyle + /** + * 指标名称 + */ + indicatorName: ChartIndicatorNameStyle } /** * 基础样式设置 @@ -735,3 +743,127 @@ declare interface QuadrantLineStyle { */ opacity: number } + +/** + * 指标卡值样式 + */ +declare interface ChartIndicatorStyle { + /** + * 是否显示 + */ + show: boolean + /** + * 字体大小 + */ + fontSize: number + /** + * 字体颜色 + */ + color: string + /** + * 水平位置 + */ + hPosition: 'left' | 'center' | 'right' + /** + * 垂直位置 + */ + vPosition: 'top' | 'center' | 'bottom' + /** + * 是否斜体 + */ + isItalic: boolean + /** + * 是否加粗 + */ + isBolder: boolean + /** + * 字体类型 + */ + fontFamily: string + /** + * 字间距 + */ + letterSpace: number + /** + * 是否显示字体阴影 + */ + fontShadow: boolean + /** + * 是否显示后缀 + */ + suffixEnable: boolean + /** + * 后缀内容 + */ + suffix: string + /** + * 后缀字体大小 + */ + suffixFontSize: number + /** + * 后缀字体颜色 + */ + suffixColor: string + /** + * 后缀是否斜体 + */ + suffixIsItalic: boolean + /** + * 后缀是否加粗 + */ + suffixIsBolder: boolean + /** + * 后缀字体类型 + */ + suffixFontFamily: string + /** + * 后缀字间距 + */ + suffixLetterSpace: number + /** + * 后置是否显示阴影 + */ + suffixFontShadow: boolean +} + +/** + * 指标卡名称样式 + */ +declare interface ChartIndicatorNameStyle { + /** + * 是否显示 + */ + show: boolean + /** + * 字体大小 + */ + fontSize: number + /** + * 字体颜色 + */ + color: string + /** + * 是否斜体 + */ + isItalic: boolean + /** + * 是否加粗 + */ + isBolder: boolean + /** + * 字体类型 + */ + fontFamily: string + /** + * 字间距 + */ + letterSpace: number + /** + * 是否显示字体阴影 + */ + fontShadow: boolean + /** + * 指标/名称间距 + */ + nameValueSpacing: number +} diff --git a/core/core-frontend/src/models/chart/chart-style.d.ts b/core/core-frontend/src/models/chart/chart-style.d.ts index 8e0913f97c..46bdef3ab5 100644 --- a/core/core-frontend/src/models/chart/chart-style.d.ts +++ b/core/core-frontend/src/models/chart/chart-style.d.ts @@ -32,39 +32,6 @@ declare interface ChartStyle { } } -declare interface ChartIndicatorStyle { - show: boolean - fontSize: string - color: string - hPosition: 'left' | 'center' | 'right' - vPosition: 'top' | 'center' | 'bottom' - isItalic: boolean - isBolder: boolean - fontFamily: string - letterSpace: string - fontShadow: boolean - - suffixEnable: boolean - suffix: string - suffixFontSize: string - suffixColor: string - suffixIsItalic: boolean - suffixIsBolder: boolean - suffixFontFamily: string - suffixLetterSpace: string - suffixFontShadow: boolean -} -declare interface ChartIndicatorNameStyle { - show: boolean - fontSize: string - color: string - isItalic: boolean - isBolder: boolean - fontFamily: string - letterSpace: string - fontShadow: boolean -} - /** * 标题样式设置 */ diff --git a/core/core-frontend/src/utils/canvasStyle.ts b/core/core-frontend/src/utils/canvasStyle.ts index 59020c9cc2..7b5b7b0896 100644 --- a/core/core-frontend/src/utils/canvasStyle.ts +++ b/core/core-frontend/src/utils/canvasStyle.ts @@ -128,7 +128,7 @@ export const customAttrTrans = { label: ['fontSize'], tooltip: ['fontSize'], indicator: ['fontSize', 'suffixFontSize'], - indicatorName: ['fontSize'] + indicatorName: ['fontSize', 'nameValueSpacing'] } export const customStyleTrans = { text: ['fontSize'], diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue index 6ed34677a4..7cbd6abf5a 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue @@ -9,7 +9,6 @@ import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart' import { cloneDeep, defaultsDeep } from 'lodash-es' -import { ElIcon } from 'element-plus-secondary' import Icon from '@/components/icon-custom/src/Icon.vue' import { hexColorToRGBA } from '@/views/chart/components/js/util' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' @@ -251,6 +250,24 @@ defineExpose({ getFormData }) {{ t('chart.font_shadow') }} + + + @@ -366,4 +383,14 @@ defineExpose({ getFormData }) color: var(--N600-Dark, #a6a6a6); } } +.name-value-spacing-input { + display: flex !important; + :deep(label) { + line-height: 28px !important; + margin-bottom: 0 !important; + } + :deep(.ed-input__inner) { + text-align: center !important; + } +} diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts index 19950b3521..d6719b9bd9 100644 --- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts +++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts @@ -367,35 +367,36 @@ export const DEFAULT_TITLE_STYLE: ChartTextStyle = { export const DEFAULT_INDICATOR_STYLE: ChartIndicatorStyle = { show: true, - fontSize: '20', + fontSize: 20, color: '#5470C6ff', hPosition: 'center', vPosition: 'center', isItalic: false, isBolder: true, fontFamily: 'Microsoft YaHei', - letterSpace: '0', + letterSpace: 0, fontShadow: false, suffixEnable: true, suffix: '', - suffixFontSize: '14', + suffixFontSize: 14, suffixColor: '#5470C6ff', suffixIsItalic: false, suffixIsBolder: true, suffixFontFamily: 'Microsoft YaHei', - suffixLetterSpace: '0', + suffixLetterSpace: 0, suffixFontShadow: false } export const DEFAULT_INDICATOR_NAME_STYLE: ChartIndicatorNameStyle = { show: true, - fontSize: '18', + fontSize: 18, color: '#ffffffff', isItalic: false, isBolder: true, fontFamily: 'Microsoft YaHei', - letterSpace: '0', - fontShadow: false + letterSpace: 0, + fontShadow: false, + nameValueSpacing: 0 } export const DEFAULT_TITLE_STYLE_BASE: ChartTextStyle = { @@ -1002,7 +1003,7 @@ export const CHART_FONT_FAMILY = [ { name: '楷体', value: 'KaiTi' } ] -export const CHART_CONT_FAMILY_MAP = { +export const CHART_FONT_FAMILY_MAP = { 'Microsoft YaHei': 'Microsoft YaHei', SimSun: 'SimSun, "Songti SC", STSong', SimHei: 'SimHei, Helvetica', diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue index ac54c39112..949b078ba1 100644 --- a/core/core-frontend/src/views/chart/components/views/index.vue +++ b/core/core-frontend/src/views/chart/components/views/index.vue @@ -19,7 +19,7 @@ import { import { useEmitt } from '@/hooks/web/useEmitt' import { hexColorToRGBA } from '@/views/chart/components/js/util.js' import { - CHART_CONT_FAMILY_MAP, + CHART_FONT_FAMILY_MAP, DEFAULT_TITLE_STYLE } from '@/views/chart/components/editor/util/chart' import DrillPath from '@/views/chart/components/views/components/DrillPath.vue' @@ -250,7 +250,7 @@ const initTitle = () => { state.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal' state.title_class.fontFamily = customStyle.text.fontFamily - ? CHART_CONT_FAMILY_MAP[customStyle.text.fontFamily] + ? CHART_FONT_FAMILY_MAP[customStyle.text.fontFamily] : DEFAULT_TITLE_STYLE.fontFamily state.title_class.letterSpacing = (customStyle.text.letterSpace