dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(视图): UI调整，汇总结果增加升、降序

Browse Source
This commit is contained in:
junjie 2021-03-23 18:08:56 +08:00
parent 1e21d68157
commit 7e2da332e4
9 changed files with 114 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/main/java/io/dataease/dto/chart/ChartViewFieldDTO.java
View File

@ -27,4 +27,6 @@ public class ChartViewFieldDTO {
private Integer deType;
private String summary;
private String sort;
}

16
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
View File

@ -160,6 +160,20 @@ public class ChartViewService {
// TODO 字段汇总 排序等
String[] field = yAxis.stream().map(y -> "CAST(" + y.getSummary() + "(" + y.getOriginName() + ") AS DECIMAL(20,2)) AS _" + y.getSummary() + "_" + y.getOriginName()).toArray(String[]::new);
String[] group = xAxis.stream().map(ChartViewFieldDTO::getOriginName).toArray(String[]::new);
return MessageFormat.format("SELECT {0},{1} FROM {2} GROUP BY {3}", StringUtils.join(group, ","), StringUtils.join(field, ","), table, StringUtils.join(group, ","));
String[] order = yAxis.stream().filter(y -> StringUtils.isNotEmpty(y.getSort()) && !StringUtils.equalsIgnoreCase(y.getSort(), "none"))
.map(y -> "_" + y.getSummary() + "_" + y.getOriginName() + " " + y.getSort()).toArray(String[]::new);
String sql = MessageFormat.format("SELECT {0},{1} FROM {2} WHERE 1=1 {3} GROUP BY {4} ORDER BY null,{5}",
StringUtils.join(group, ","),
StringUtils.join(field, ","),
table,
"",
StringUtils.join(group, ","),
StringUtils.join(order, ","));
if (sql.endsWith(",")) {
sql = sql.substring(0, sql.length() - 1);
}
// 如果是对结果字段过滤，则再包裹一层sql
return sql;
}
}

8
frontend/src/lang/zh.js
View File

@ -673,7 +673,13 @@ export default {
position: '位置',
rotate: '角度',
name: '名称',
icon: '图标'
icon: '图标',
trigger_position: '触发位置',
asc: '升序',
desc: '降序',
sort: '排序',
filter: '过滤',
none: '无'
},
dataset: {
datalist: '数据集',

6
frontend/src/views/chart/chart/chart.js
View File

@ -58,7 +58,8 @@ export const DEFAULT_XAXIS_STYLE = {
position: 'bottom',
name: '',
axisLabel: {
rotate: 0
rotate: 0,
formatter: '{value}'
}
}
export const DEFAULT_YAXIS_STYLE = {
@ -66,7 +67,8 @@ export const DEFAULT_YAXIS_STYLE = {
position: 'left',
name: '',
axisLabel: {
rotate: 0
rotate: 0,
formatter: '{value}'
}
}
// chart config

98
frontend/src/views/chart/components/QuotaItem.vue
View File

@ -6,10 +6,15 @@
{{ item.name }}<span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span><i class="el-icon-arrow-down el-icon--right" />
</el-tag>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-notebook-2">
<el-dropdown placement="right-start" size="mini" @command="summary">
<span class="el-dropdown-link">
{{ $t('chart.summary') }}<span class="summary-span">({{ $t('chart.'+item.summary) }})</span><i class="el-icon-arrow-right el-icon--right" />
<el-dropdown-item>
<el-dropdown placement="right-start" size="mini" style="width: 100%" @command="summary">
<span class="el-dropdown-link" style="display: flex;justify-content: space-between;align-items: center;width: 100%">
<span>
<i class="el-icon-notebook-2" />
<span>{{ $t('chart.summary') }}</span>
<span class="summary-span">({{ $t('chart.'+item.summary) }})</span>
</span>
<i class="el-icon-arrow-right el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeSummary('sum')">{{ $t('chart.sum') }}</el-dropdown-item>
@ -22,16 +27,41 @@
</el-dropdown-menu>
</el-dropdown>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-s-grid">
<el-dropdown placement="right-start" size="mini" @command="quickCalc">
<span class="el-dropdown-link">
{{ $t('chart.quick_calc') }}<span class="summary-span">(无)</span><i class="el-icon-arrow-right el-icon--right" />
<el-dropdown-item>
<el-dropdown placement="right-start" size="mini" style="width: 100%" @command="quickCalc">
<span class="el-dropdown-link" style="display: flex;justify-content: space-between;align-items: center;width: 100%">
<span>
<i class="el-icon-s-grid" />
<span>{{ $t('chart.quick_calc') }}</span>
<span class="summary-span">(无)</span>
</span>
<i class="el-icon-arrow-right el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeQuickCalc('none')">无</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown-item>
<el-dropdown-item divided>
<el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
<span class="el-dropdown-link" style="display: flex;justify-content: space-between;align-items: center;width: 100%">
<span>
<i class="el-icon-sort" />
<span>{{ $t('chart.sort') }}</span>
<span class="summary-span">({{ $t('chart.'+item.sort) }})</span>
</span>
<i class="el-icon-arrow-right el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeSort('none')">{{ $t('chart.none') }}</el-dropdown-item>
<el-dropdown-item :command="beforeSort('asc')">{{ $t('chart.asc') }}</el-dropdown-item>
<el-dropdown-item :command="beforeSort('desc')">{{ $t('chart.desc') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-files">
<span>{{ $t('chart.filter') }}...</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
<span>{{ $t('chart.show_name_set') }}</span>
</el-dropdown-item>
@ -45,7 +75,7 @@
<el-dialog :title="$t('chart.show_name_set')" :visible="renameItem" :show-close="false" width="30%">
<el-form ref="itemForm" :model="itemForm" :rules="itemFormRules">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="itemForm.name" size="mini"/>
<el-input v-model="itemForm.name" size="mini" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -86,24 +116,6 @@ export default {
},
methods: {
summary(param) {
// console.log(param)
this.item.summary = param.type
this.$emit('onQuotaItemChange', this.item)
},
beforeSummary(type) {
return {
type: type
}
},
quickCalc(param) {
},
beforeQuickCalc(type) {
return {
type: type
}
},
clickItem(param) {
if (!param) {
return
@ -124,6 +136,38 @@ export default {
type: type
}
},
summary(param) {
// console.log(param)
this.item.summary = param.type
this.$emit('onQuotaItemChange', this.item)
},
beforeSummary(type) {
return {
type: type
}
},
quickCalc(param) {
},
beforeQuickCalc(type) {
return {
type: type
}
},
sort(param) {
// console.log(param)
this.item.sort = param.type
this.$emit('onQuotaItemChange', this.item)
},
beforeSort(type) {
return {
type: type
}
},
showRename() {
this.itemForm.name = this.item.name
this.renameItem = true

3
frontend/src/views/chart/components/component_style/XAxisSelector.vue
View File

@ -23,6 +23,9 @@
<el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle"/>
</el-form-item>
</el-form>
</el-col>

3
frontend/src/views/chart/components/component_style/YAxisSelector.vue
View File

@ -23,6 +23,9 @@
<el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle"/>
</el-form-item>
</el-form>
</el-col>

2
frontend/src/views/chart/components/shape_attr/TooltipSelector.vue
View File

@ -11,7 +11,7 @@
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.label_position')" class="form-item">
<el-form-item :label="$t('chart.trigger_position')" class="form-item">
<el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr">
<el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>
<el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button>

13
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -281,15 +281,18 @@ export default {
view.sceneId = this.sceneId
view.name = this.table.name
view.tableId = this.$store.state.chart.tableId
view.xaxis.forEach(function(ele) {
if (!ele.summary || ele.summary === '') {
ele.summary = 'sum'
}
})
// view.xaxis.forEach(function(ele) {
// if (!ele.summary || ele.summary === '') {
// ele.summary = 'sum'
// }
// })
view.yaxis.forEach(function(ele) {
if (!ele.summary || ele.summary === '') {
ele.summary = 'sum'
}
if (!ele.sort || ele.sort === '') {
ele.sort = 'none'
}
})
if (view.type.startsWith('pie') || view.type.startsWith('funnel')) {
if (view.yaxis.length > 1) {