From d5d7344a6c82384cd389636728ce76f2fef609cc Mon Sep 17 00:00:00 2001 From: junjun Date: Fri, 12 Aug 2022 14:24:11 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E4=BB=AA=E8=A1=A8?= =?UTF-8?q?=E7=9B=98=E6=94=AF=E6=8C=81=E5=8A=A8=E6=80=81=E5=A4=A7=E5=B0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/lang/en.js | 3 +- frontend/src/lang/tw.js | 3 +- frontend/src/lang/zh.js | 3 +- frontend/src/views/chart/chart/chart.js | 10 + .../src/views/chart/chart/gauge/gauge_antv.js | 15 +- .../shape-attr/SizeSelectorAntV.vue | 182 +++++++++++++++++- frontend/src/views/chart/view/ChartEdit.vue | 1 - frontend/src/views/chart/view/ChartStyle.vue | 1 + 8 files changed, 207 insertions(+), 11 deletions(-) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 425f3b3e77..e8127d6449 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1199,7 +1199,8 @@ export default { font_shadow: 'Font Shadow', chart_area: 'Area', fix: 'Fix', - dynamic: 'Dynamic' + dynamic: 'Dynamic', + gauge_size_field_delete: 'Dynamic field changed，please edit again' }, dataset: { parse_filed: 'Parse Field', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 7f2c9e39a5..6d1748bf38 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1198,7 +1198,8 @@ export default { font_shadow: '字體陰影', chart_area: '面積圖', fix: '固定值', - dynamic: '動態值' + dynamic: '動態值', + gauge_size_field_delete: '動態值中字段發生變更，請重新編輯' }, dataset: { parse_filed: '解析字段', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 2da93b2835..455c40f361 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1200,7 +1200,8 @@ export default { font_shadow: '字体阴影', chart_area: '面积图', fix: '固定值', - dynamic: '动态值' + dynamic: '动态值', + gauge_size_field_delete: '动态值中字段发生变更，请重新编辑' }, dataset: { parse_filed: '解析字段', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index 6138eec421..7ad8ffe703 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -65,7 +65,17 @@ export const DEFAULT_SIZE = { tableColumnWidth: 100, tableHeaderAlign: 'left', tableItemAlign: 'right', + gaugeMinType: 'fix', // fix or dynamic + gaugeMinField: { + id: '', + summary: '' + }, gaugeMin: 0, + gaugeMaxType: 'fix', // fix or dynamic + gaugeMaxField: { + id: '', + summary: '' + }, gaugeMax: 100, gaugeStartAngle: 225, gaugeEndAngle: -45, diff --git a/frontend/src/views/chart/chart/gauge/gauge_antv.js b/frontend/src/views/chart/chart/gauge/gauge_antv.js index 3f7f255244..3d67f8f5cb 100644 --- a/frontend/src/views/chart/chart/gauge/gauge_antv.js +++ b/frontend/src/views/chart/chart/gauge/gauge_antv.js @@ -18,8 +18,19 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) { customAttr = JSON.parse(chart.customAttr) if (customAttr.size) { const size = JSON.parse(JSON.stringify(customAttr.size)) - min = size.gaugeMin ? size.gaugeMin : DEFAULT_SIZE.gaugeMin - max = size.gaugeMax ? size.gaugeMax : DEFAULT_SIZE.gaugeMax + if (size.gaugeMinType === 'dynamic' && size.gaugeMaxType === 'dynamic') { + min = chart.data?.series[chart.data?.series.length - 2]?.data[0] + max = chart.data?.series[chart.data?.series.length - 1]?.data[0] + } else if (size.gaugeMinType !== 'dynamic' && size.gaugeMaxType === 'dynamic') { + min = size.gaugeMin ? size.gaugeMin : DEFAULT_SIZE.gaugeMin + max = chart.data?.series[chart.data?.series.length - 1]?.data[0] + } else if (size.gaugeMinType === 'dynamic' && size.gaugeMaxType !== 'dynamic') { + min = chart.data?.series[chart.data?.series.length - 1]?.data[0] + max = size.gaugeMax ? size.gaugeMax : DEFAULT_SIZE.gaugeMax + } else { + min = size.gaugeMin ? size.gaugeMin : DEFAULT_SIZE.gaugeMin + max = size.gaugeMax ? size.gaugeMax : DEFAULT_SIZE.gaugeMax + } tickCount = size.gaugeTickCount ? size.gaugeTickCount : DEFAULT_SIZE.gaugeTickCount startAngel = parseInt(size.gaugeStartAngle) * Math.PI / 180 endAngel = parseInt(size.gaugeEndAngle) * Math.PI / 180 diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue index b7f5aeadfe..005f9906af 100644 --- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue +++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue @@ -278,12 +278,82 @@ - - + + + {{ $t('chart.fix') }} + {{ $t('chart.dynamic') }} + - - + + + + + + + + + + + + {{ item.name }} + + + + + + + + + + + + + + + + + {{ $t('chart.fix') }} + {{ $t('chart.dynamic') }} + + + + + + + + + + + + + + + {{ item.name }} + + + + + + + + + + + + + + !ele.chartId && ele.id !== 'count') + if (this.sizeForm.gaugeMinField.id) { + this.minField = this.getQuotaField(this.sizeForm.gaugeMinField.id) + } + if (this.sizeForm.gaugeMaxField.id) { + this.maxField = this.getQuotaField(this.sizeForm.gaugeMaxField.id) + } + }, initData() { const chart = JSON.parse(JSON.stringify(this.chart)) if (chart.customAttr) { @@ -570,6 +661,19 @@ export default { this.sizeForm.gaugeTickCount = this.sizeForm.gaugeTickCount ? this.sizeForm.gaugeTickCount : DEFAULT_SIZE.gaugeTickCount + this.sizeForm.gaugeMinType = this.sizeForm.gaugeMinType ? this.sizeForm.gaugeMinType : DEFAULT_SIZE.gaugeMinType + if (!this.sizeForm.gaugeMinField) { + this.sizeForm.gaugeMinField = DEFAULT_SIZE.gaugeMinField + this.sizeForm.gaugeMinField.id = this.quotaData[0]?.id + this.sizeForm.gaugeMinField.summary = 'count' + } + this.sizeForm.gaugeMaxType = this.sizeForm.gaugeMaxType ? this.sizeForm.gaugeMaxType : DEFAULT_SIZE.gaugeMaxType + if (!this.sizeForm.gaugeMaxField) { + this.sizeForm.gaugeMaxField = DEFAULT_SIZE.gaugeMaxField + this.sizeForm.gaugeMaxField.id = this.quotaData[0]?.id + this.sizeForm.gaugeMaxField.summary = 'count' + } + this.sizeForm.quotaFontFamily = this.sizeForm.quotaFontFamily ? this.sizeForm.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily this.sizeForm.quotaFontIsBolder = this.sizeForm.quotaFontIsBolder ? this.sizeForm.quotaFontIsBolder : DEFAULT_SIZE.quotaFontIsBolder this.sizeForm.quotaFontIsItalic = this.sizeForm.quotaFontIsItalic ? this.sizeForm.quotaFontIsItalic : DEFAULT_SIZE.quotaFontIsItalic @@ -603,6 +707,71 @@ export default { }, showProperty(property) { return this.propertyInner.includes(property) + }, + + changeQuotaField(type, resetSummary) { + if (type === 'min') { + if (this.sizeForm.gaugeMinType === 'dynamic') { + if (!this.sizeForm.gaugeMinField.id) { + this.sizeForm.gaugeMinField.id = this.quotaData[0]?.id + } + if (!this.sizeForm.gaugeMinField.summary) { + this.sizeForm.gaugeMinField.summary = 'count' + } + if (resetSummary) { + this.sizeForm.gaugeMinField.summary = 'count' + } + if (this.sizeForm.gaugeMinField.id && this.sizeForm.gaugeMinField.summary) { + this.minField = this.getQuotaField(this.sizeForm.gaugeMinField.id) + this.changeBarSizeCase('gaugeMinField') + } + } else { + if (this.sizeForm.gaugeMaxType === 'dynamic') { + if (this.sizeForm.gaugeMaxField.id && this.sizeForm.gaugeMaxField.summary) { + this.changeBarSizeCase('gaugeMinField') + } + } else { + this.changeBarSizeCase('gaugeMinField') + } + } + } else if (type === 'max') { + if (this.sizeForm.gaugeMaxType === 'dynamic') { + if (!this.sizeForm.gaugeMaxField.id) { + this.sizeForm.gaugeMaxField.id = this.quotaData[0]?.id + } + if (!this.sizeForm.gaugeMaxField.summary) { + this.sizeForm.gaugeMaxField.summary = 'count' + } + if (resetSummary) { + this.sizeForm.gaugeMaxField.summary = 'count' + } + if (this.sizeForm.gaugeMaxField.id && this.sizeForm.gaugeMaxField.summary) { + this.maxField = this.getQuotaField(this.sizeForm.gaugeMaxField.id) + this.changeBarSizeCase('gaugeMaxField') + } + } else { + if (this.sizeForm.gaugeMinType === 'dynamic') { + if (this.sizeForm.gaugeMinField.id && this.sizeForm.gaugeMinField.summary) { + this.changeBarSizeCase('gaugeMaxField') + } + } else { + this.changeBarSizeCase('gaugeMaxField') + } + } + } + }, + getQuotaField(id) { + if (!id) { + return {} + } + const fields = this.quotaData.filter(ele => { + return ele.id === id + }) + if (fields.length === 0) { + return {} + } else { + return fields[0] + } } } } @@ -649,4 +818,7 @@ export default { font-weight: 400; padding: 0 10px; } + .form-flex >>> .el-form-item__content { + display: flex; + } diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index 8890334a96..75ed503bcf 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -1919,7 +1919,6 @@ export default { onSizeChange(val) { this.view.customAttr.size = val - this.calcStyle() this.calcData() }, diff --git a/frontend/src/views/chart/view/ChartStyle.vue b/frontend/src/views/chart/view/ChartStyle.vue index 2d240e6556..77894e2236 100644 --- a/frontend/src/views/chart/view/ChartStyle.vue +++ b/frontend/src/views/chart/view/ChartStyle.vue @@ -50,6 +50,7 @@ class="attr-selector" :chart="chart" :property-inner="propertyInnerAll['size-selector-ant-v']" + :quota-fields="quotaData" @onSizeChange="onSizeChange($event,'size-selector-ant-v')" />