diff --git a/core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java b/core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java index 0db9a5d4e9..80f2873052 100644 --- a/core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java +++ b/core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java @@ -208,7 +208,7 @@ public class ChartDataManage { return emptyChartViewDTO(view); } break; - case "text": + case "indicator": case "gauge": case "liquid": xAxis = new ArrayList<>(); @@ -496,7 +496,7 @@ public class ChartDataManage { ExtWhere2Str.extWhere2sqlOjb(sqlMeta, extFilterList, transFields(allFields)); WhereTree2Str.transFilterTrees(sqlMeta, rowPermissionsTree, transFields(allFields)); - if (StringUtils.equalsAnyIgnoreCase(view.getType(), "text", "gauge", "liquid")) { + if (StringUtils.equalsAnyIgnoreCase(view.getType(), "indicator", "gauge", "liquid")) { Quota2SQLObj.quota2sqlObj(sqlMeta, yAxis, transFields(allFields)); querySql = SQLProvider.createQuerySQL(sqlMeta, true, needOrder, view); } else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) { @@ -684,7 +684,7 @@ public class ChartDataManage { mapChart = ChartDataBuild.transScatterData(xAxis, yAxis, view, data, extBubble, isDrill); } else if (StringUtils.containsIgnoreCase(view.getType(), "radar")) { mapChart = ChartDataBuild.transRadarChartData(xAxis, yAxis, view, data, isDrill); - } else if (StringUtils.containsIgnoreCase(view.getType(), "text") + } else if (StringUtils.containsIgnoreCase(view.getType(), "indicator") || StringUtils.containsIgnoreCase(view.getType(), "gauge") || StringUtils.equalsIgnoreCase("liquid", view.getType())) { mapChart = ChartDataBuild.transNormalChartData(xAxis, yAxis, view, data, isDrill); @@ -708,7 +708,7 @@ public class ChartDataManage { mapChart = ChartDataBuild.transScatterDataAntV(xAxis, yAxis, view, data, extBubble, isDrill); } else if (StringUtils.containsIgnoreCase(view.getType(), "radar")) { mapChart = ChartDataBuild.transRadarChartDataAntV(xAxis, yAxis, view, data, isDrill); - } else if (StringUtils.containsIgnoreCase(view.getType(), "text") + } else if (StringUtils.containsIgnoreCase(view.getType(), "indicator") || StringUtils.containsIgnoreCase(view.getType(), "gauge") || StringUtils.equalsIgnoreCase("liquid", view.getType())) { mapChart = ChartDataBuild.transNormalChartData(xAxis, yAxis, view, data, isDrill); @@ -719,6 +719,10 @@ public class ChartDataManage { } else { mapChart = ChartDataBuild.transChartDataAntV(xAxis, yAxis, view, data, isDrill); } + } else if (StringUtils.equalsIgnoreCase(view.getRender(), "custom")) { + if (StringUtils.containsIgnoreCase(view.getType(), "indicator")) { + mapChart = ChartDataBuild.transNormalChartData(xAxis, yAxis, view, data, isDrill); + } } // table组件，明细表，也用于导出数据 Map mapTableNormal = null; @@ -1220,7 +1224,7 @@ public class ChartDataManage { return new ArrayList(); } break; - case "text": + case "indicator": case "gauge": case "liquid": xAxis = new ArrayList<>(); @@ -1276,7 +1280,7 @@ public class ChartDataManage { Table2SQLObj.table2sqlobj(sqlMeta, null, "(" + sql + ")"); WhereTree2Str.transFilterTrees(sqlMeta, rowPermissionsTree, transFields(allFields)); - if (StringUtils.equalsAnyIgnoreCase(view.getType(), "text", "gauge", "liquid")) { + if (StringUtils.equalsAnyIgnoreCase(view.getType(), "indicator", "gauge", "liquid")) { Quota2SQLObj.quota2sqlObj(sqlMeta, yAxis, transFields(allFields)); querySql = SQLProvider.createQuerySQL(sqlMeta, true, needOrder, view); } else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) { diff --git a/core/core-frontend/src/assets/svg/indicator-dark.svg b/core/core-frontend/src/assets/svg/indicator-dark.svg new file mode 100644 index 0000000000..71ec539f93 --- /dev/null +++ b/core/core-frontend/src/assets/svg/indicator-dark.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/core/core-frontend/src/assets/svg/indicator.svg b/core/core-frontend/src/assets/svg/indicator.svg new file mode 100644 index 0000000000..71ec539f93 --- /dev/null +++ b/core/core-frontend/src/assets/svg/indicator.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/core/core-frontend/src/components/visualization/SettingMenu.vue b/core/core-frontend/src/components/visualization/SettingMenu.vue index 2ab8d0feb0..39b0afe1cc 100644 --- a/core/core-frontend/src/components/visualization/SettingMenu.vue +++ b/core/core-frontend/src/components/visualization/SettingMenu.vue @@ -171,7 +171,7 @@ const state = reactive({ 'richTextView', 'liquid', 'gauge', - 'text', + 'indicator', 'label', 'word-cloud', 'flow-map', @@ -181,7 +181,7 @@ const state = reactive({ 'richTextView', 'liquid', 'gauge', - 'text', + 'indicator', 'label', 'word-cloud', 'flow-map', diff --git a/core/core-frontend/src/custom-component/indicator/DeIndicator.vue b/core/core-frontend/src/custom-component/indicator/DeIndicator.vue new file mode 100644 index 0000000000..71c400b65c --- /dev/null +++ b/core/core-frontend/src/custom-component/indicator/DeIndicator.vue @@ -0,0 +1,370 @@ + + + + + diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index e39fa744a9..5288234d4c 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/core/core-frontend/src/locales/zh-CN.ts @@ -792,6 +792,7 @@ export default { total: '共', items: '条数据', chart_liquid: '水波图', + chart_indicator: '指标卡', drag_block_progress: '进度指示', liquid_max: '目标值', liquid_outline_border: '边框粗细', @@ -922,6 +923,9 @@ export default { value_formatter_unit: '数量单位', value_formatter_decimal_count: '小数位数', value_formatter_suffix: '单位后缀', + indicator_suffix_placeholder: '请输入1-10个字符', + indicator_suffix: '后缀', + indicator_value: '指标值', value_formatter_thousand_separator: '千分符', value_formatter_example: '示例', unit_none: '无', 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 f48e097cdb..cc7d6690fa 100644 --- a/core/core-frontend/src/models/chart/chart-style.d.ts +++ b/core/core-frontend/src/models/chart/chart-style.d.ts @@ -32,6 +32,38 @@ 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 + + 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/models/chart/editor.d.ts b/core/core-frontend/src/models/chart/editor.d.ts index 74d63c7833..084828ee0c 100644 --- a/core/core-frontend/src/models/chart/editor.d.ts +++ b/core/core-frontend/src/models/chart/editor.d.ts @@ -20,6 +20,8 @@ declare type EditorProperty = | 'map-mapping' | 'jump-set' | 'linkage' + | 'indicator-value-selector' + | 'indicator-name-selector' declare type EditorPropertyInner = { [key in EditorProperty]?: string[] } diff --git a/core/core-frontend/src/utils/canvasStyle.ts b/core/core-frontend/src/utils/canvasStyle.ts index c9d1efe1d9..9fc8318a06 100644 --- a/core/core-frontend/src/utils/canvasStyle.ts +++ b/core/core-frontend/src/utils/canvasStyle.ts @@ -124,7 +124,9 @@ export const customAttrTrans = { 'radarSize' // 雷达占比 ], label: ['fontSize'], - tooltip: ['fontSize'] + tooltip: ['fontSize'], + indicator: ['fontSize', 'suffixFontSize'], + indicatorName: ['fontSize'] } export const customStyleTrans = { text: ['fontSize'], @@ -257,7 +259,8 @@ export const THEME_STYLE_TRANS_SLAVE1 = { export const THEME_ATTR_TRANS_MAIN = { label: ['color'], - tooltip: ['color'] + tooltip: ['color'], + indicatorName: ['color'] } export const THEME_ATTR_TRANS_MAIN_SYMBOL = { diff --git a/core/core-frontend/src/utils/sizeAdaptor.ts b/core/core-frontend/src/utils/sizeAdaptor.ts index f83f0fdfdd..250dc6b7f8 100644 --- a/core/core-frontend/src/utils/sizeAdaptor.ts +++ b/core/core-frontend/src/utils/sizeAdaptor.ts @@ -22,7 +22,9 @@ export const customAttrTrans = { textStyle: ['fontSize'] }, slider: ['fontSize'], - graphic: ['fontSize'] + graphic: ['fontSize'], + indicator: ['fontSize', 'suffixFontSize'], + indicatorName: ['fontSize'] } export const customStyleTrans = { text: ['fontSize'], diff --git a/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue b/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue index 203f6c5cff..e756211e0a 100644 --- a/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue +++ b/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue @@ -85,7 +85,9 @@ watch( const showValueFormatter = computed(() => { return ( - (props.chart.type === 'table-normal' || props.chart.type === 'table-info') && + (props.chart.type === 'table-normal' || + props.chart.type === 'table-info' || + props.chart.type === 'indicator') && (props.item.deType === 2 || props.item.deType === 3) ) }) @@ -118,7 +120,7 @@ const isEnableCompare = () => { // 暂时只支持类别轴/维度的时间类型字段 if ( t1.length > 0 && - chart.value.type !== 'text' && + chart.value.type !== 'indicator' && chart.value.type !== 'label' && chart.value.type !== 'gauge' && chart.value.type !== 'liquid' diff --git a/core/core-frontend/src/views/chart/components/editor/drag-label/QuotaLabel.vue b/core/core-frontend/src/views/chart/components/editor/drag-label/QuotaLabel.vue index 8f7d66abf9..7ae53b8c58 100644 --- a/core/core-frontend/src/views/chart/components/editor/drag-label/QuotaLabel.vue +++ b/core/core-frontend/src/views/chart/components/editor/drag-label/QuotaLabel.vue @@ -36,7 +36,7 @@ const props = defineProps({ {{ t('chart.drag_block_gauge_angel') }} - {{ + {{ t('chart.drag_block_label_value') }} {{ diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/FunctionCfg.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/FunctionCfg.vue index 91961717b0..28c153e383 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/FunctionCfg.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/FunctionCfg.vue @@ -54,7 +54,7 @@ const init = () => { } } const showIgnoreOption = computed(() => { - return !equalsAny(props.chart.type, 'table-pivot', 'table-info') + return !equalsAny(props.chart.type, 'table-pivot', 'table-info', 'indicator') }) const showEmptyDataFieldCtrl = computed(() => { diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue index 6c125d61e2..87acff1bb2 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue @@ -91,6 +91,7 @@ const changeLabelThreshold = () => { // check line config for (let i = 0; i < state.thresholdArr.length; i++) { const ele = state.thresholdArr[i] + console.log(ele) if (!ele.term || ele.term === '') { ElMessage.error(t('chart.exp_can_not_empty')) return @@ -109,7 +110,8 @@ const changeLabelThreshold = () => { return } } else { - if (!ele.value) { + console.log(ele.value === undefined) + if (ele.value === undefined) { ElMessage.error(t('chart.value_can_not_empty')) return } @@ -325,30 +327,54 @@ init() - + - + 阈值设置 + + + 已设置 + + + + + + + +
- - - - + + {{ t('chart.indicator_value') }} + +
+ +
- +
{{ t('chart.filter_eq') }} @@ -370,25 +396,31 @@ init() {{ t('chart.filter_between') }} - - +
+
{{ item.value }} {{ item.min }} ≤{{ t('chart.drag_block_label_value') }}≤ {{ item.max }} - - - - - - +
+
+ +
+ diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue index e4d7effd0e..ae75a0f9a5 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue @@ -2,6 +2,7 @@ import { reactive } from 'vue' import { useI18n } from '@/hooks/web/useI18n' import { COLOR_PANEL } from '../../../util/chart' +import { ElSpace } from 'element-plus-secondary' const { t } = useI18n() @@ -105,62 +106,88 @@ init()
- - - - - + + + + + + + + + + + + + + + + - - + +
+ ≤{{ t('chart.drag_block_label_value') }}≤ +
+ + + + - - - - - ≤{{ t('chart.drag_block_label_value') }}≤ - - - - +
+
{{ t('chart.textColor') }}
- - +
+ +
- +
@@ -233,4 +260,21 @@ span { width: 28px; height: 28px; } + +.color-title { + color: #646a73; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; + padding: 0 8px; +} + +.form-item { + height: 28px !important; + margin-bottom: 0 !important; + :deep(.el-form-item__label) { + font-size: 12px; + } +} diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue index 7a4ea13fe8..05a6a4d7df 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue @@ -19,6 +19,8 @@ import TableHeaderSelector from '@/views/chart/components/editor/editor-style/co import TableCellSelector from '@/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue' import TableTotalSelector from '@/views/chart/components/editor/editor-style/components/table/TableTotalSelector.vue' import MiscStyleSelector from '@/views/chart/components/editor/editor-style/components/MiscStyleSelector.vue' +import IndicatorValueSelector from '@/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue' +import IndicatorNameSelector from '@/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue' const dvMainStore = dvMainStoreWithOut() const { dvInfo } = storeToRefs(dvMainStore) @@ -83,7 +85,9 @@ const emit = defineEmits([ 'onTableCellChange', 'onTableTotalChange', 'onChangeMiscStyleForm', - 'onExtTooltipChange' + 'onExtTooltipChange', + 'onIndicatorChange', + 'onIndicatorNameChange' ]) const showProperties = (property: EditorProperty) => properties.value?.includes(property) @@ -112,6 +116,14 @@ const onTextChange = (val, prop) => { state.initReady && emit('onTextChange', val, prop) } +const onIndicatorChange = (val, prop) => { + state.initReady && emit('onIndicatorChange', val, prop) +} + +const onIndicatorNameChange = (val, prop) => { + state.initReady && emit('onIndicatorNameChange', val, prop) +} + const onLegendChange = (val, prop) => { state.initReady && emit('onLegendChange', val, prop) } @@ -224,6 +236,39 @@ watch( component-position="component" /> + + + + + + +import { PropType, computed, onMounted, reactive, toRefs, watch, nextTick, ref } from 'vue' +import { useI18n } from '@/hooks/web/useI18n' +import { + COLOR_PANEL, + CHART_FONT_FAMILY, + CHART_FONT_LETTER_SPACE, + DEFAULT_INDICATOR_NAME_STYLE +} from '@/views/chart/components/editor/util/chart' +import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' +import { storeToRefs } from 'pinia' +import { cloneDeep, defaultsDeep } from 'lodash-es' +import { ElButton, ElIcon } from 'element-plus-secondary' +import Icon from '@/components/icon-custom/src/Icon.vue' +const dvMainStore = dvMainStoreWithOut() +const { batchOptStatus } = storeToRefs(dvMainStore) + +const { t } = useI18n() + +const props = defineProps({ + chart: { + type: Object, + required: true + }, + themes: { + type: String as PropType, + default: 'dark' + }, + propertyInner: { + type: Array + } +}) + +const emit = defineEmits(['onIndicatorNameChange']) +const toolTip = computed(() => { + return props.themes === 'dark' ? 'ndark' : 'dark' +}) +const predefineColors = COLOR_PANEL +const fontFamily = CHART_FONT_FAMILY +const fontLetterSpace = CHART_FONT_LETTER_SPACE + +const state = reactive({ + indicatorNameForm: JSON.parse(JSON.stringify(DEFAULT_INDICATOR_NAME_STYLE)) +}) + +const { chart } = toRefs(props) + +const fontSizeList = computed(() => { + const arr = [] + for (let i = 10; i <= 60; i = i + 2) { + arr.push({ + name: i + '', + value: i + }) + } + return arr +}) + +const changeTitleStyle = prop => { + emit('onIndicatorNameChange', state.indicatorNameForm, prop) +} + +const init = () => { + const customText = defaultsDeep( + cloneDeep(props.chart?.customAttr?.indicatorName), + cloneDeep(DEFAULT_INDICATOR_NAME_STYLE) + ) + + state.indicatorNameForm = cloneDeep(customText) + + //第一次颜色可能赋值失败，单独赋值一次 + nextTick(() => { + state.indicatorNameForm.color = customText.color + }) +} + +onMounted(() => { + init() +}) + +watch( + () => props.chart?.customAttr?.indicatorName, + () => { + init() + }, + { deep: true } +) + + + + + diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue new file mode 100644 index 0000000000..936cab9e2d --- /dev/null +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue @@ -0,0 +1,632 @@ + + + + + diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue index f06bd01af6..f67134680b 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue @@ -577,7 +577,7 @@ onMounted(() => { -