From 3e0f51a7e665625a91762ad5f6aef47eb652dd9d Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Thu, 22 Feb 2024 19:22:38 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E6=98=8E=E7=BB=86?= =?UTF-8?q?=E8=A1=A8/=E6=B1=87=E6=80=BB=E8=A1=A8=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E6=8C=89=E5=88=97=E8=AE=BE=E7=BD=AE=E5=AE=BD=E5=BA=A6=EF=BC=8C?= =?UTF-8?q?=E6=8B=96=E6=8B=BD=E8=B0=83=E6=95=B4=E5=AE=BD=E5=BA=A6=E3=80=82?= =?UTF-8?q?#7707?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvas/customComponent/UserView.vue | 1 + core/frontend/src/lang/en.js | 3 +- core/frontend/src/lang/tw.js | 3 +- core/frontend/src/lang/zh.js | 3 +- core/frontend/src/views/chart/chart/chart.js | 1 + .../views/chart/chart/common/common_table.js | 33 ++++- .../src/views/chart/chart/table/table-info.js | 12 +- .../chart/components/ChartComponentS2.vue | 24 +++- .../components/shapeAttr/SizeSelectorAntV.vue | 136 +++++++++++++++++- .../src/views/chart/view/ChartEdit.vue | 10 +- 10 files changed, 211 insertions(+), 15 deletions(-) diff --git a/core/frontend/src/components/canvas/customComponent/UserView.vue b/core/frontend/src/components/canvas/customComponent/UserView.vue index c522a3565e..d02def0477 100644 --- a/core/frontend/src/components/canvas/customComponent/UserView.vue +++ b/core/frontend/src/components/canvas/customComponent/UserView.vue @@ -101,6 +101,7 @@ :terminal-type="scaleCoefficientType" :track-menu="trackMenu" :search-count="searchCount" + :in-screen="inScreen" @onChartClick="chartClick" @onJumpClick="jumpClick" @onPageChange="pageClick" diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js index dd87df6c1a..cd4e8439f4 100644 --- a/core/frontend/src/lang/en.js +++ b/core/frontend/src/lang/en.js @@ -1398,6 +1398,7 @@ export default { table_column_width_config: 'Column Width', table_column_adapt: 'Adapt', table_column_custom: 'Custom', + table_column_fixed: 'Fixed', chart_table_pivot: 'Pivot Table', table_pivot_row: 'Data Row', field_error_tips: 'This field is changed(Include dimension、quota，field type，deleted),please edit again.', @@ -1539,7 +1540,7 @@ export default { drill_dimension_tip: 'Only fields in the dataset can be drilled', table_scroll_tip: 'The detail table is only effective when the pagination mode is "Drop-down".', table_threshold_tip: 'Tip: Do not select fields repeatedly. If the same field is configured repeatedly, only the last field will take effect.', - table_column_width_tip: `Column width do not always work.
+ table_column_width_tip: `Fixed Column width do not always work.
The priority of the container width is higher than the column width,
which means if the result of dividing the width of the table container by the number of columns is greater than specified column width,
the former will take effect.`, diff --git a/core/frontend/src/lang/tw.js b/core/frontend/src/lang/tw.js index fbaaec0083..ead1122ef7 100644 --- a/core/frontend/src/lang/tw.js +++ b/core/frontend/src/lang/tw.js @@ -1396,6 +1396,7 @@ export default { table_freeze: '表格凍結', table_column_adapt: '自適應', table_column_custom: '自定義', + table_column_fixed: '固定列寬', chart_table_pivot: '透視表', table_pivot_row: '數據行', field_error_tips: '該字段所對應的數據集原始字段發生變更（包括維度、指標，字段類型，字段被刪除等），建議重新編輯', @@ -1536,7 +1537,7 @@ export default { drill_dimension_tip: '鑽取字段僅支持數據集中的字段', table_scroll_tip: '明細表僅在分頁模式為"下拉"時生效。', table_threshold_tip: '提示：請勿重複選擇字段，若同一字段重複配置，則只有最後的字段配置生效。', - table_column_width_tip: '列寬並非任何時候都能生效。
容器寬度優先級高於列寬。即(表格容器寬度 / 列數 > 指定列寬)，則列寬優先取(容器寬度 / 列數)', + table_column_width_tip: '固定列寬並非任何時候都能生效。
容器寬度優先級高於列寬。即(表格容器寬度 / 列數 > 指定列寬)，則列寬優先取(容器寬度 / 列數)', reference_field_tip: '引用字段以 "[" 開始，"]" 結束。請
勿修改引用內容，否則將引用失敗。
若輸入與引用字段相同格式的內容，將被當做引用字段處理。', scatter_tip: '該指標生效時，樣式大小中的氣泡大小屬性將失效', scatter_group_tip: '僅當橫軸內為指標時生效', diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js index c77d4b89b8..b426b87466 100644 --- a/core/frontend/src/lang/zh.js +++ b/core/frontend/src/lang/zh.js @@ -1396,6 +1396,7 @@ export default { table_column_width_config: '列宽调整', table_column_adapt: '自适应', table_column_custom: '自定义', + table_column_fixed: '固定列宽', chart_table_pivot: '透视表', table_pivot_row: '数据行', field_error_tips: '该字段所对应的数据集原始字段发生变更（包括维度、指标，字段类型，字段被删除等），建议重新编辑', @@ -1536,7 +1537,7 @@ export default { drill_dimension_tip: '钻取字段仅支持数据集中的字段', table_scroll_tip: '明细表仅在分页模式为"下拉"时生效。', table_threshold_tip: '提示：请勿重复选择字段，若同一字段重复配置，则只有最后的字段配置生效', - table_column_width_tip: '列宽并非任何时候都能生效。
容器宽度优先级高于列宽，即(表格容器宽度 / 列数 > 指定列宽)，则列宽优先取(容器宽度 / 列数)。', + table_column_width_tip: '固定列宽并非任何时候都能生效。
容器宽度优先级高于列宽，即(表格容器宽度 / 列数 > 指定列宽)，则列宽优先取(容器宽度 / 列数)。', reference_field_tip: '引用字段以 "[" 开始， "]" 结束。
请勿修改引用内容，否则将引用失败。
若输入与引用字段相同格式的内容，将被当作引用字段处理。', scatter_tip: '该指标生效时，样式大小中的气泡大小属性将失效', scatter_group_tip: '仅当横轴内为指标时生效', diff --git a/core/frontend/src/views/chart/chart/chart.js b/core/frontend/src/views/chart/chart/chart.js index 11b299fa27..ea570cd586 100644 --- a/core/frontend/src/views/chart/chart/chart.js +++ b/core/frontend/src/views/chart/chart/chart.js @@ -103,6 +103,7 @@ export const DEFAULT_SIZE = { tableCellTooltip: { show: false }, + tableFieldWidth: [], gaugeMinType: 'fix', // fix or dynamic gaugeMinField: { id: '', diff --git a/core/frontend/src/views/chart/chart/common/common_table.js b/core/frontend/src/views/chart/chart/common/common_table.js index 2ac834cc2b..f97a47989e 100644 --- a/core/frontend/src/views/chart/chart/common/common_table.js +++ b/core/frontend/src/views/chart/chart/common/common_table.js @@ -249,12 +249,33 @@ export function getSize(chart) { size.cellCfg = { height: s.tableItemHeight } - if (s.tableColumnMode && s.tableColumnMode === 'adapt') { - delete size.cellCfg.width - size.layoutWidthType = 'compact' - } else { - delete size.layoutWidthType - size.cellCfg.width = s.tableColumnWidth + switch (s.tableColumnMode) { + case 'adapt': { + delete size.cellCfg.width + size.layoutWidthType = 'compact' + break + } + case 'field': { + delete size.layoutWidthType + const fieldMap = s.tableFieldWidth?.reduce((p, n) => { + p[n.fieldId] = n + return p + }, {}) || {} + size.colCfg.width = node => { + const width = node.spreadsheet.container.cfg.el.offsetWidth + if (!s.tableFieldWidth?.length) { + let columnCount = s.showIndex ? chart.data.fields.length + 1 : chart.data.fields.length + return width / columnCount + } + const baseWidth = width / 100 + return fieldMap[node.field] ? fieldMap[node.field].width * baseWidth : baseWidth * 10 + } + break + } + default: { + delete size.layoutWidthType + size.cellCfg.width = s.tableColumnWidth + } } } } diff --git a/core/frontend/src/views/chart/chart/table/table-info.js b/core/frontend/src/views/chart/chart/table/table-info.js index 21486d11eb..1286b42d8d 100644 --- a/core/frontend/src/views/chart/chart/table/table-info.js +++ b/core/frontend/src/views/chart/chart/table/table-info.js @@ -75,7 +75,7 @@ class SortTooltip extends BaseTooltip { }) } } -export function baseTableInfo(s2, container, chart, action, tableData, pageInfo, vueCom) { +export function baseTableInfo(s2, container, chart, action, tableData, pageInfo, vueCom, resizeFunc) { const containerDom = document.getElementById(container) // fields @@ -256,6 +256,10 @@ export function baseTableInfo(s2, container, chart, action, tableData, pageInfo, if (size.tableCellTooltip?.show) { s2.on(S2Event.DATA_CELL_HOVER, event => showTooltipValue(s2, event, meta)) } + // column resize + if (size.tableColumnMode === 'field') { + s2.on(S2Event.LAYOUT_RESIZE_COL_WIDTH, event => resizeFunc(event)) + } // theme const customTheme = getCustomTheme(chart) s2.setThemeCfg({ theme: customTheme }) @@ -263,7 +267,7 @@ export function baseTableInfo(s2, container, chart, action, tableData, pageInfo, return s2 } -export function baseTableNormal(s2, container, chart, action, tableData, vueCom) { +export function baseTableNormal(s2, container, chart, action, tableData, vueCom, resizeFunc) { const containerDom = document.getElementById(container) if (!containerDom) return @@ -490,6 +494,10 @@ export function baseTableNormal(s2, container, chart, action, tableData, vueCom) if (size.tableCellTooltip?.show) { s2.on(S2Event.DATA_CELL_HOVER, event => showTooltipValue(s2, event, meta)) } + // column resize + if (size.tableColumnMode === 'field') { + s2.on(S2Event.LAYOUT_RESIZE_COL_WIDTH, event => resizeFunc(event)) + } // theme const customTheme = getCustomTheme(chart) s2.setThemeCfg({ theme: customTheme }) diff --git a/core/frontend/src/views/chart/components/ChartComponentS2.vue b/core/frontend/src/views/chart/components/ChartComponentS2.vue index 5b55a277fb..ea85af835c 100644 --- a/core/frontend/src/views/chart/components/ChartComponentS2.vue +++ b/core/frontend/src/views/chart/components/ChartComponentS2.vue @@ -102,6 +102,7 @@ import { CHART_CONT_FAMILY_MAP, DEFAULT_TITLE_STYLE, NOT_SUPPORT_PAGE_DATASET } import ChartTitleUpdate from './ChartTitleUpdate.vue' import { mapState } from 'vuex' import DePagination from '@/components/deCustomCm/pagination.js' +import bus from '@/utils/bus' export default { name: 'ChartComponentS2', @@ -133,6 +134,10 @@ export default { type: Number, required: false, default: 0 + }, + inScreen: { + type: Boolean, + default: false } }, data() { @@ -296,9 +301,9 @@ export default { } } if (chart.type === 'table-info') { - this.myChart = baseTableInfo(this.myChart, this.chartId, chart, this.antVAction, this.tableData, this.currentPage, this) + this.myChart = baseTableInfo(this.myChart, this.chartId, chart, this.antVAction, this.tableData, this.currentPage, this, this.columnResize) } else if (chart.type === 'table-normal') { - this.myChart = baseTableNormal(this.myChart, this.chartId, chart, this.antVAction, this.tableData, this) + this.myChart = baseTableNormal(this.myChart, this.chartId, chart, this.antVAction, this.tableData, this, this.columnResize) } else if (chart.type === 'table-pivot') { this.myChart = baseTablePivot(this.myChart, this.chartId, chart, this.antVAction, this.tableHeaderClick, this.tableData) } else { @@ -554,6 +559,21 @@ export default { }, initRemark() { this.remarkCfg = getRemark(this.chart) + }, + columnResize(resizeColumn) { + if (!this.inScreen) { + // 预览/全屏预览不保存 + return + } + const fieldId = resizeColumn.info.meta.field + const size = JSON.parse(this.chart.customAttr).size + size.tableFieldWidth?.forEach(item => { + if (item.fieldId === fieldId) { + const containerWidth = document.getElementById(this.chartId).offsetWidth + item.width = (resizeColumn.info.resizedWidth / containerWidth * 100).toFixed(2) + } + }) + bus.$emit('set-table-column-width', size.tableFieldWidth) } } } diff --git a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue b/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue index f2b0fd0252..6638a249b9 100644 --- a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue +++ b/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue @@ -258,10 +258,15 @@ > {{ $t('chart.table_column_adapt') }} + + {{ $t('chart.table_column_fixed') }} + + {{ $t('chart.table_column_custom') }} @@ -295,6 +300,43 @@ @change="changeBarSizeCase('tableColumnWidth')" /> + + + + + + + + + + + + + + { + this.sizeForm.tableFieldWidth.push({ + fieldId: item.dataeaseName, + name: item.name, + width: defaultWidth + }) + }) + } else { + const fieldMap = this.sizeForm.tableFieldWidth.reduce((p, n) => { + p[n.fieldId] = n + return p + },{}) + this.sizeForm.tableFieldWidth.splice(0) + allAxis.forEach(item => { + let width = 10 + if (fieldMap[item.dataeaseName]) { + width = fieldMap[item.dataeaseName].width + } + this.sizeForm.tableFieldWidth.push({ + fieldId: item.dataeaseName, + name: item.name, + width + }) + }) + } + let selectedField = this.sizeForm.tableFieldWidth[0] + const curFieldIndex = this.sizeForm.tableFieldWidth.findIndex(i => i.fieldId === this.fieldColumnWidth.fieldId) + if (curFieldIndex !== -1) { + selectedField = this.sizeForm.tableFieldWidth[curFieldIndex] + } + this.fieldColumnWidth.fieldId = selectedField.fieldId + this.fieldColumnWidth.width = selectedField.width + } + } } } }, @@ -1905,6 +2013,19 @@ export default { } } return false + }, + changeFieldColumn() { + const fieldWidth = this.sizeForm.tableFieldWidth?.find(i => i.fieldId === this.fieldColumnWidth.fieldId) + if (fieldWidth) { + this.fieldColumnWidth.width = fieldWidth.width + } + }, + changeFieldColumnWidth() { + const fieldWidth = this.sizeForm.tableFieldWidth?.find(i => i.fieldId === this.fieldColumnWidth.fieldId) + if (fieldWidth) { + fieldWidth.width = this.fieldColumnWidth.width + this.changeBarSizeCase('tableFieldWidth') + } } } } @@ -1965,4 +2086,17 @@ export default { .form-flex >>> .el-form-item__content { display: flex; } + ::v-deep input::-webkit-outer-spin-button, + ::v-deep input::-webkit-inner-spin-button { + -webkit-appearance: none !important; + } + + ::v-deep input[type="number"] { + -moz-appearance: textfield !important; + } + .column-radio { + label { + margin-right: 10px; + } + } diff --git a/core/frontend/src/views/chart/view/ChartEdit.vue b/core/frontend/src/views/chart/view/ChartEdit.vue index 0132a01a69..4839ee1ae3 100644 --- a/core/frontend/src/views/chart/view/ChartEdit.vue +++ b/core/frontend/src/views/chart/view/ChartEdit.vue @@ -2323,6 +2323,7 @@ export default { bus.$off('plugins-calc-style', this.calcStyle) bus.$off('plugin-chart-click', this.chartClick) bus.$off('set-dynamic-area-code', this.setDynamicAreaCode) + bus.$off('set-table-column-width', this.onTableFieldWidthChange) }, activated() { }, @@ -2413,6 +2414,7 @@ export default { bus.$on('plugins-calc-style', this.calcStyle) bus.$on('plugin-chart-click', this.chartClick) bus.$on('set-dynamic-area-code', this.setDynamicAreaCode) + bus.$on('set-table-column-width', this.onTableFieldWidthChange) }, initTableData(id, optType) { if (id != null) { @@ -2962,7 +2964,10 @@ export default { this.view.customAttr.size = val this.calcData() }, - + onTableFieldWidthChange(val) { + this.view.customAttr.size.tableFieldWidth = val + this.calcData() + }, onTextChange(val) { this.view.customStyle.text = val this.view.title = val.title @@ -3651,6 +3656,9 @@ export default { } else if (type === 'label-normal') { this.view.senior.functionCfg.emptyDataStrategy = 'breakLine' } + if (type === 'table-pivot') { + this.view.customAttr.size.tableColumnMode = 'custom' + } // reset custom colors this.view.customAttr.color.seriesColors = [] },