Skip to content

D
dataease
提交 b3a53f9a authored 作者: junjie's avatar junjie
浏览文件
操作

feat(视图): 1.初步增加结果过滤，条件之间暂时只支持'且'逻辑；2.fix设置显示名bug；3.一些样式调整

上级 470f8cdd
隐藏空白字符变更
内嵌 并排
正在显示 包含 303 行增加 和 83 行删除
backend/src/main/java/io/dataease/dto/chart/ChartViewFieldDTO.java
浏览文件 @ b3a53f9a
...@@ -2,6 +2,8 @@ package io.dataease.dto.chart; ...@@ -2,6 +2,8 @@ package io.dataease.dto.chart;
import lombok.Data; import lombok.Data;
import java.util.List;
/** /**
* @Author gin * @Author gin
* @Date 2021/3/11 1:18 下午 * @Date 2021/3/11 1:18 下午
...@@ -29,4 +31,6 @@ public class ChartViewFieldDTO { ...@@ -29,4 +31,6 @@ public class ChartViewFieldDTO {
private String summary; private String summary;
private String sort; private String sort;
private List<ChartViewFieldFilterDTO> filter;
} }
backend/src/main/java/io/dataease/dto/chart/ChartViewFieldFilterDTO.java 0 → 100644
浏览文件 @ b3a53f9a
package io.dataease.dto.chart;
import lombok.Getter;
import lombok.Setter;
/**
* @Author gin
* @Date 2021/3/25 10:31 上午
*/
@Getter
@Setter
public class ChartViewFieldFilterDTO {
private String term;
private String value;
}
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
浏览文件 @ b3a53f9a
...@@ -174,6 +174,41 @@ public class ChartViewService { ...@@ -174,6 +174,41 @@ public class ChartViewService {
sql = sql.substring(0, sql.length() - 1); sql = sql.substring(0, sql.length() - 1);
} }
// 如果是对结果字段过滤，则再包裹一层sql // 如果是对结果字段过滤，则再包裹一层sql
return sql; String[] resultFilter = yAxis.stream().filter(y -> CollectionUtils.isNotEmpty(y.getFilter()) && y.getFilter().size() > 0)
.map(y -> {
String[] s = y.getFilter().stream().map(f -> "AND _" + y.getSummary() + "_" + y.getOriginName() + transMysqlFilterTerm(f.getTerm()) + f.getValue()).toArray(String[]::new);
return StringUtils.join(s, " ");
}).toArray(String[]::new);
if (resultFilter.length == 0) {
return sql;
} else {
String filterSql = MessageFormat.format("SELECT * FROM {0} WHERE 1=1 {1}",
"(" + sql + ") AS tmp",
StringUtils.join(resultFilter, " "));
return filterSql;
}
}
public String transMysqlFilterTerm(String term) {
switch (term) {
case "eq":
return "=";
case "not_eq":
return "<>";
case "lt":
return "<";
case "le":
return "<=";
case "gt":
return ">";
case "ge":
return ">=";
case "null":
return "IS NULL";
case "not_null":
return "IS NOT NULL";
default:
return "";
}
} }
} }
frontend/src/lang/zh.js
浏览文件 @ b3a53f9a
...@@ -681,7 +681,19 @@ export default { ...@@ -681,7 +681,19 @@ export default {
filter: '过滤', filter: '过滤',
none: '无', none: '无',
background: '背景', background: '背景',
alpha: '透明度' alpha: '透明度',
add_filter: '添加过滤',
no_limit: '无限制',
filter_eq: '等于',
filter_not_eq: '不等于',
filter_lt: '小于',
filter_le: '小于等于',
filter_gt: '大于',
filter_ge: '大于等于',
filter_null: '为空',
filter_not_null: '不为空',
filter_include: '包含',
filter_not_include: '不包含'
}, },
dataset: { dataset: {
datalist: '数据集', datalist: '数据集',
......
frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
浏览文件 @ b3a53f9a
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<el-form-item :label="$t('chart.color')" class="form-item"> <el-form-item :label="$t('chart.color')" class="form-item">
<colorPicker v-model="colorForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeBackgroundStyle" /> <colorPicker v-model="colorForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeBackgroundStyle" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.alpha')" class="form-item"> <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" /> <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
</el-form-item> </el-form-item>
</el-form> </el-form>
......
frontend/src/views/chart/components/drag-item/DimensionItem.vue
浏览文件 @ b3a53f9a
...@@ -15,18 +15,6 @@ ...@@ -15,18 +15,6 @@
</el-dropdown-menu> </el-dropdown-menu>
</span> </span>
</el-dropdown> </el-dropdown>
<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-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeRename()">{{ $t('chart.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveRename(itemForm)">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
</span> </span>
</template> </template>
...@@ -45,15 +33,6 @@ export default { ...@@ -45,15 +33,6 @@ export default {
}, },
data() { data() {
return { return {
renameItem: false,
itemForm: {
name: ''
},
itemFormRules: {
name: [
{ required: true, message: this.$t('commons.input_content'), trigger: 'change' }
]
}
} }
}, },
mounted() { mounted() {
...@@ -80,22 +59,9 @@ export default { ...@@ -80,22 +59,9 @@ export default {
} }
}, },
showRename() { showRename() {
this.itemForm.name = this.item.name this.item.index = this.index
this.renameItem = true this.item.renameType = 'dimension'
}, this.$emit('onNameEdit', this.item)
closeRename() {
this.renameItem = false
this.resetRename()
},
saveRename(param) {
this.item.name = param.name
this.$emit('onDimensionItemChange', this.item)
this.closeRename()
},
resetRename() {
this.itemForm = {
name: ''
}
}, },
removeItem() { removeItem() {
this.item.index = this.index this.item.index = this.index
......
frontend/src/views/chart/components/drag-item/QuotaItem.vue
浏览文件 @ b3a53f9a
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item icon="el-icon-files"> <el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
<span>{{ $t('chart.filter') }}...</span> <span>{{ $t('chart.filter') }}...</span>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')"> <el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
...@@ -71,18 +71,6 @@ ...@@ -71,18 +71,6 @@
</el-dropdown-menu> </el-dropdown-menu>
</span> </span>
</el-dropdown> </el-dropdown>
<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-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeRename()">{{ $t('chart.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveRename(itemForm)">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
</span> </span>
</template> </template>
...@@ -101,15 +89,6 @@ export default { ...@@ -101,15 +89,6 @@ export default {
}, },
data() { data() {
return { return {
renameItem: false,
itemForm: {
name: ''
},
itemFormRules: {
name: [
{ required: true, message: this.$t('commons.input_content'), trigger: 'change' }
]
}
} }
}, },
mounted() { mounted() {
...@@ -127,6 +106,9 @@ export default { ...@@ -127,6 +106,9 @@ export default {
case 'remove': case 'remove':
this.removeItem() this.removeItem()
break break
case 'filter':
this.editFilter()
break
default: default:
break break
} }
...@@ -167,28 +149,18 @@ export default { ...@@ -167,28 +149,18 @@ export default {
type: type type: type
} }
}, },
showRename() { showRename() {
this.itemForm.name = this.item.name this.item.index = this.index
this.renameItem = true this.item.renameType = 'quota'
}, this.$emit('onNameEdit', this.item)
closeRename() {
this.renameItem = false
this.resetRename()
},
saveRename(param) {
this.item.name = param.name
this.$emit('onQuotaItemChange', this.item)
this.closeRename()
},
resetRename() {
this.itemForm = {
name: ''
}
}, },
removeItem() { removeItem() {
this.item.index = this.index this.item.index = this.index
this.$emit('onQuotaItemRemove', this.item) this.$emit('onQuotaItemRemove', this.item)
},
editFilter() {
this.item.index = this.index
this.$emit('editItemFilter', this.item)
} }
} }
} }
......
frontend/src/views/chart/components/filter/QuotaFilterEditor.vue 0 → 100644
浏览文件 @ b3a53f9a
<template>
<el-col>
<el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addFilter" />
<el-row v-for="(f,index) in item.filter" :key="index" class="filter-item">
<el-col :span="4">
<span>{{ item.name }} ({{ $t('chart.'+item.summary) }})</span>
</el-col>
<el-col :span="8">
<el-select v-model="f.term" size="mini">
<el-option-group
v-for="(group,idx) in options"
:key="idx"
:label="group.label"
>
<el-option
v-for="opt in group.options"
:key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</el-option-group>
</el-select>
</el-col>
<el-col :span="6">
<el-input v-model="f.value" class="value-item" :placeholder="$t('chart.no_limit')" size="mini" clearable />
</el-col>
<el-col :span="6">
<el-button type="text" icon="el-icon-delete" circle style="float: right" @click="removeFilter(index)" />
</el-col>
</el-row>
</el-col>
</template>
<script>
export default {
name: 'QuotaFilterEditor',
props: {
item: {
type: Object,
required: true
}
},
data() {
return {
options: [{
label: '',
options: [{
value: 'eq',
label: this.$t('chart.filter_eq')
}, {
value: 'not_eq',
label: this.$t('chart.filter_not_eq')
}]
}, {
label: '',
options: [{
value: 'lt',
label: this.$t('chart.filter_lt')
}, {
value: 'gt',
label: this.$t('chart.filter_gt')
}]
},
{
label: '',
options: [{
value: 'le',
label: this.$t('chart.filter_le')
}, {
value: 'ge',
label: this.$t('chart.filter_ge')
}]
},
{
label: '',
options: [{
value: 'null',
label: this.$t('chart.filter_null')
}, {
value: 'not_null',
label: this.$t('chart.filter_not_null')
}]
}]
}
},
mounted() {
},
methods: {
addFilter() {
this.item.filter.push({
term: 'eq',
value: ''
})
},
removeFilter(index) {
this.item.filter.splice(index, 1)
}
}
}
</script>
<style scoped lang="scss">
.filter-item{
width: 100%;
border-radius: 4px;
border: 1px solid #DCDFE6;
padding: 4px 14px;
margin-bottom: 10px;
display: flex;
justify-content: left;
align-items: center;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
span{
font-size: 12px;
}
.value-item>>>.el-input{
position: relative;
display: inline-block;
width: 80px!important;
}
.el-select-dropdown__item{
padding: 0 20px;
font-size: 12px;
}
</style>
frontend/src/views/chart/group/Group.vue
浏览文件 @ b3a53f9a
...@@ -528,7 +528,7 @@ export default { ...@@ -528,7 +528,7 @@ export default {
yAxis: DEFAULT_YAXIS_STYLE, yAxis: DEFAULT_YAXIS_STYLE,
background: DEFAULT_BACKGROUND_COLOR background: DEFAULT_BACKGROUND_COLOR
}) })
view.customFilter = JSON.stringify({}) view.customFilter = JSON.stringify([])
post('/chart/view/save', view).then(response => { post('/chart/view/save', view).then(response => {
this.selectTableFlag = false this.selectTableFlag = false
this.$store.dispatch('chart/setTableId', null) this.$store.dispatch('chart/setTableId', null)
......
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ b3a53f9a
...@@ -151,7 +151,7 @@ ...@@ -151,7 +151,7 @@
@end="end2" @end="end2"
> >
<transition-group class="draggable-group"> <transition-group class="draggable-group">
<dimension-item v-for="(item,index) in view.xaxis" :key="item.id" :index="index" :item="item" @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove" /> <dimension-item v-for="(item,index) in view.xaxis" :key="item.id" :index="index" :item="item" @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove" @onNameEdit="showRename" />
</transition-group> </transition-group>
</draggable> </draggable>
</el-row> </el-row>
...@@ -166,7 +166,7 @@ ...@@ -166,7 +166,7 @@
@end="end2" @end="end2"
> >
<transition-group class="draggable-group"> <transition-group class="draggable-group">
<quota-item v-for="(item,index) in view.yaxis" :key="item.id" :index="index" :item="item" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" /> <quota-item v-for="(item,index) in view.yaxis" :key="item.id" :index="index" :item="item" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showEditFilter" @onNameEdit="showRename" />
</transition-group> </transition-group>
</draggable> </draggable>
</el-row> </el-row>
...@@ -176,6 +176,34 @@ ...@@ -176,6 +176,34 @@
</el-row> </el-row>
</el-col> </el-col>
</el-row> </el-row>
<!--显示名修改-->
<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" clearable />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeRename()">{{ $t('chart.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveRename">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
<!--指标过滤器-->
<el-dialog
:title="$t('chart.add_filter')"
:visible="filterEdit"
:show-close="false"
width="800px"
class="dialog-css"
>
<quota-filter-editor :item="quotaItem" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeQuotaFilter">{{ $t('chart.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveQuotaFilter">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
</el-row> </el-row>
</template> </template>
...@@ -207,10 +235,11 @@ import TooltipSelector from '../components/shape-attr/TooltipSelector' ...@@ -207,10 +235,11 @@ import TooltipSelector from '../components/shape-attr/TooltipSelector'
import XAxisSelector from '../components/component-style/XAxisSelector' import XAxisSelector from '../components/component-style/XAxisSelector'
import YAxisSelector from '../components/component-style/YAxisSelector' import YAxisSelector from '../components/component-style/YAxisSelector'
import BackgroundColorSelector from '../components/component-style/BackgroundColorSelector' import BackgroundColorSelector from '../components/component-style/BackgroundColorSelector'
import QuotaFilterEditor from '../components/filter/QuotaFilterEditor'
export default { export default {
name: 'ChartEdit', name: 'ChartEdit',
components: { BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable }, components: { QuotaFilterEditor, BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
data() { data() {
return { return {
table: {}, table: {},
...@@ -240,6 +269,17 @@ export default { ...@@ -240,6 +269,17 @@ export default {
moveId: -1, moveId: -1,
chart: { chart: {
id: 'echart' id: 'echart'
},
filterEdit: false,
quotaItem: {},
renameItem: false,
itemForm: {
name: ''
},
itemFormRules: {
name: [
{ required: true, message: this.$t('commons.input_content'), trigger: 'change' }
]
} }
} }
}, },
...@@ -305,6 +345,9 @@ export default { ...@@ -305,6 +345,9 @@ export default {
if (!ele.sort || ele.sort === '') { if (!ele.sort || ele.sort === '') {
ele.sort = 'none' ele.sort = 'none'
} }
if (!ele.filter) {
ele.filter = []
}
}) })
if (view.type.startsWith('pie') || view.type.startsWith('funnel')) { if (view.type.startsWith('pie') || view.type.startsWith('funnel')) {
if (view.yaxis.length > 1) { if (view.yaxis.length > 1) {
...@@ -490,6 +533,40 @@ export default { ...@@ -490,6 +533,40 @@ export default {
onChangeBackgroundForm(val) { onChangeBackgroundForm(val) {
this.view.customStyle.background = val this.view.customStyle.background = val
this.save() this.save()
},
showEditFilter(item) {
this.quotaItem = JSON.parse(JSON.stringify(item))
this.filterEdit = true
},
closeQuotaFilter() {
this.filterEdit = false
},
saveQuotaFilter() {
this.view.yaxis[this.quotaItem.index].filter = this.quotaItem.filter
this.save()
this.closeQuotaFilter()
},
showRename(val) {
this.itemForm = JSON.parse(JSON.stringify(val))
this.renameItem = true
},
saveRename() {
if (this.itemForm.renameType === 'quota') {
this.view.yaxis[this.itemForm.index].name = this.itemForm.name
} else if (this.itemForm.renameType === 'dimension') {
this.view.xaxis[this.itemForm.index].name = this.itemForm.name
}
this.save()
this.closeRename()
},
closeRename() {
this.renameItem = false
this.resetRename()
},
resetRename() {
this.itemForm = {}
} }
} }
} }
...@@ -623,4 +700,14 @@ export default { ...@@ -623,4 +700,14 @@ export default {
.chart-class{ .chart-class{
height: calc(100% - 124px); height: calc(100% - 124px);
} }
.dialog-css>>>.el-dialog__title {
font-size: 14px;
}
.dialog-css >>> .el-dialog__header {
padding: 20px 20px 0;
}
.dialog-css >>> .el-dialog__body {
padding: 10px 20px 20px;
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论