center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat(视图):视图增加 过滤器，直接对数据集字段进行过滤

Browse Source
This commit is contained in:
junjie 2021-05-21 16:45:21 +08:00
parent 27109824f2
commit 1833ca5399
13 changed files with 400 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
backend/src/main/java/io/dataease/dto/chart/ChartCustomFilterDTO.java Normal file
View File

@ -0,0 +1,21 @@
package io.dataease.dto.chart;
import io.dataease.base.domain.DatasetTableField;
import lombok.Getter;
import lombok.Setter;
import java.io.Serializable;
/**
* @Author gin
* @Date 2021/5/21 4:24 下午
*/
@Getter
@Setter
public class ChartCustomFilterDTO implements Serializable {
private String fieldId;
private String term;
private String value;
private DatasetTableField field;
}

5
backend/src/main/java/io/dataease/provider/QueryProvider.java
View File

@ -2,6 +2,7 @@ package io.dataease.provider;
import io.dataease.base.domain.DatasetTableField;
import io.dataease.controller.request.chart.ChartExtFilterRequest;
import io.dataease.dto.chart.ChartCustomFilterDTO;
import io.dataease.dto.chart.ChartViewFieldDTO;
import java.util.List;
@ -27,9 +28,9 @@ public abstract class QueryProvider {
public abstract String createQuerySQLAsTmpWithPage(String sql, List<DatasetTableField> fields, Integer page, Integer pageSize, Integer realSize);
public abstract String getSQL(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartExtFilterRequest> extFilterRequestList);
public abstract String getSQL(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList);
public abstract String getSQLAsTmp(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartExtFilterRequest> extFilterRequestList);
public abstract String getSQLAsTmp(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList);
public abstract String searchTable(String table);
}

40
backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java
View File

@ -2,6 +2,7 @@ package io.dataease.provider.doris;
import io.dataease.base.domain.DatasetTableField;
import io.dataease.controller.request.chart.ChartExtFilterRequest;
import io.dataease.dto.chart.ChartCustomFilterDTO;
import io.dataease.dto.chart.ChartViewFieldDTO;
import io.dataease.provider.QueryProvider;
import org.apache.commons.collections4.CollectionUtils;
@ -110,7 +111,7 @@ public class DorisQueryProvider extends QueryProvider {
}
@Override
public String getSQL(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartExtFilterRequest> extFilterRequestList) {
public String getSQL(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList) {
// 字段汇总 排序等
String[] field = yAxis.stream().map(y -> {
StringBuilder f = new StringBuilder();
@ -180,7 +181,7 @@ public class DorisQueryProvider extends QueryProvider {
StringUtils.join(groupField, ","),
StringUtils.join(field, ","),
table,
xFilter.length > 0 ? StringUtils.join(xFilter, " ") : "" + transMysqlExtFilter(extFilterRequestList),// origin field filter and panel field filter
(xFilter.length > 0 ? StringUtils.join(xFilter, " ") : "") + transCustomFilter(customFilter) + transExtFilter(extFilterRequestList),// origin field filter and panel field filter
StringUtils.join(group, ","),
StringUtils.join(order, ","));
if (sql.endsWith(",")) {
@ -222,8 +223,8 @@ public class DorisQueryProvider extends QueryProvider {
}
@Override
public String getSQLAsTmp(String sql, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartExtFilterRequest> extFilterRequestList) {
return getSQL(" (" + sql + ") AS tmp ", xAxis, yAxis, extFilterRequestList);
public String getSQLAsTmp(String sql, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList) {
return getSQL(" (" + sql + ") AS tmp ", xAxis, yAxis, customFilter, extFilterRequestList);
}
@Override
@ -264,7 +265,36 @@ public class DorisQueryProvider extends QueryProvider {
}
}
public String transMysqlExtFilter(List<ChartExtFilterRequest> requestList) {
public String transCustomFilter(List<ChartCustomFilterDTO> requestList) {
if (CollectionUtils.isEmpty(requestList)) {
return "";
}
StringBuilder filter = new StringBuilder();
for (ChartCustomFilterDTO request : requestList) {
String value = request.getValue();
DatasetTableField field = request.getField();
if (field.getDeType() == 1 && field.getDeExtractType() != 1) {
filter.append(" AND FROM_UNIXTIME(cast(")
.append(field.getDataeaseName())
.append(" AS decimal(20,0))/1000,'%Y-%m-%d %H:%i:%S') ");
} else {
filter.append(" AND ").append(field.getDataeaseName());
}
filter.append(" ")
.append(transMysqlFilterTerm(request.getTerm()))
.append(" ");
if (StringUtils.containsIgnoreCase(request.getTerm(), "in")) {
filter.append("('").append(StringUtils.join(value, "','")).append("')");
} else if (StringUtils.containsIgnoreCase(request.getTerm(), "like")) {
filter.append("'%").append(value).append("%'");
} else {
filter.append("'").append(value).append("'");
}
}
return filter.toString();
}
public String transExtFilter(List<ChartExtFilterRequest> requestList) {
if (CollectionUtils.isEmpty(requestList)) {
return "";
}

40
backend/src/main/java/io/dataease/provider/mysql/MysqlQueryProvider.java
View File

@ -2,6 +2,7 @@ package io.dataease.provider.mysql;
import io.dataease.base.domain.DatasetTableField;
import io.dataease.controller.request.chart.ChartExtFilterRequest;
import io.dataease.dto.chart.ChartCustomFilterDTO;
import io.dataease.dto.chart.ChartViewFieldDTO;
import io.dataease.provider.QueryProvider;
import org.apache.commons.collections4.CollectionUtils;
@ -110,7 +111,7 @@ public class MysqlQueryProvider extends QueryProvider {
}
@Override
public String getSQL(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartExtFilterRequest> extFilterRequestList) {
public String getSQL(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList) {
// 字段汇总 排序等
String[] field = yAxis.stream().map(y -> {
StringBuilder f = new StringBuilder();
@ -186,7 +187,7 @@ public class MysqlQueryProvider extends QueryProvider {
StringUtils.join(groupField, ","),
StringUtils.join(field, ","),
table,
(xFilter.length > 0 ? StringUtils.join(xFilter, " ") : "") + transMysqlExtFilter(extFilterRequestList),// origin field filter and panel field filter
(xFilter.length > 0 ? StringUtils.join(xFilter, " ") : "") + transCustomFilter(customFilter) + transExtFilter(extFilterRequestList),// origin field filter and panel field filter
StringUtils.join(group, ","),
StringUtils.join(order, ","));
if (sql.endsWith(",")) {
@ -229,8 +230,8 @@ public class MysqlQueryProvider extends QueryProvider {
}
@Override
public String getSQLAsTmp(String sql, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartExtFilterRequest> extFilterRequestList) {
return getSQL(" (" + sqlFix(sql) + ") AS tmp ", xAxis, yAxis, extFilterRequestList);
public String getSQLAsTmp(String sql, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList) {
return getSQL(" (" + sqlFix(sql) + ") AS tmp ", xAxis, yAxis, customFilter, extFilterRequestList);
}
@Override
@ -271,7 +272,36 @@ public class MysqlQueryProvider extends QueryProvider {
}
}
public String transMysqlExtFilter(List<ChartExtFilterRequest> requestList) {
public String transCustomFilter(List<ChartCustomFilterDTO> requestList) {
if (CollectionUtils.isEmpty(requestList)) {
return "";
}
StringBuilder filter = new StringBuilder();
for (ChartCustomFilterDTO request : requestList) {
String value = request.getValue();
DatasetTableField field = request.getField();
if (field.getDeType() == 1 && field.getDeExtractType() != 1) {
filter.append(" AND FROM_UNIXTIME(cast(")
.append(field.getDataeaseName())
.append(" AS decimal(20,0))/1000,'%Y-%m-%d %H:%i:%S') ");
} else {
filter.append(" AND ").append(field.getDataeaseName());
}
filter.append(" ")
.append(transMysqlFilterTerm(request.getTerm()))
.append(" ");
if (StringUtils.containsIgnoreCase(request.getTerm(), "in")) {
filter.append("('").append(StringUtils.join(value, "','")).append("')");
} else if (StringUtils.containsIgnoreCase(request.getTerm(), "like")) {
filter.append("'%").append(value).append("%'");
} else {
filter.append("'").append(value).append("'");
}
}
return filter.toString();
}
public String transExtFilter(List<ChartExtFilterRequest> requestList) {
if (CollectionUtils.isEmpty(requestList)) {
return "";
}

40
backend/src/main/java/io/dataease/provider/sqlserver/SqlserverQueryProvider.java
View File

@ -2,6 +2,7 @@ package io.dataease.provider.sqlserver;
import io.dataease.base.domain.DatasetTableField;
import io.dataease.controller.request.chart.ChartExtFilterRequest;
import io.dataease.dto.chart.ChartCustomFilterDTO;
import io.dataease.dto.chart.ChartViewFieldDTO;
import io.dataease.provider.QueryProvider;
import org.apache.commons.collections4.CollectionUtils;
@ -111,7 +112,7 @@ public class SqlserverQueryProvider extends QueryProvider {
}
@Override
public String getSQL(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartExtFilterRequest> extFilterRequestList) {
public String getSQL(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList) {
// 字段汇总 排序等
String[] field = yAxis.stream().map(y -> {
StringBuilder f = new StringBuilder();
@ -187,7 +188,7 @@ public class SqlserverQueryProvider extends QueryProvider {
StringUtils.join(groupField, ","),
StringUtils.join(field, ","),
table,
(xFilter.length > 0 ? StringUtils.join(xFilter, " ") : "") + transMysqlExtFilter(extFilterRequestList),// origin field filter and panel field filter
(xFilter.length > 0 ? StringUtils.join(xFilter, " ") : "") + transCustomFilter(customFilter) + transExtFilter(extFilterRequestList),// origin field filter and panel field filter
StringUtils.join(group, ","),
StringUtils.join(order, ","));
if (sql.endsWith(",")) {
@ -230,8 +231,8 @@ public class SqlserverQueryProvider extends QueryProvider {
}
@Override
public String getSQLAsTmp(String sql, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartExtFilterRequest> extFilterRequestList) {
return getSQL(" (" + sqlFix(sql) + ") AS tmp ", xAxis, yAxis, extFilterRequestList);
public String getSQLAsTmp(String sql, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList) {
return getSQL(" (" + sqlFix(sql) + ") AS tmp ", xAxis, yAxis, customFilter, extFilterRequestList);
}
@Override
@ -270,7 +271,36 @@ public class SqlserverQueryProvider extends QueryProvider {
}
}
public String transMysqlExtFilter(List<ChartExtFilterRequest> requestList) {
public String transCustomFilter(List<ChartCustomFilterDTO> requestList) {
if (CollectionUtils.isEmpty(requestList)) {
return "";
}
StringBuilder filter = new StringBuilder();
for (ChartCustomFilterDTO request : requestList) {
String value = request.getValue();
DatasetTableField field = request.getField();
if (field.getDeType() == 1 && field.getDeExtractType() != 1) {
filter.append(" AND FROM_UNIXTIME(cast(")
.append(field.getDataeaseName())
.append(" AS decimal(20,0))/1000,'%Y-%m-%d %H:%i:%S') ");
} else {
filter.append(" AND ").append(field.getDataeaseName());
}
filter.append(" ")
.append(transMysqlFilterTerm(request.getTerm()))
.append(" ");
if (StringUtils.containsIgnoreCase(request.getTerm(), "in")) {
filter.append("('").append(StringUtils.join(value, "','")).append("')");
} else if (StringUtils.containsIgnoreCase(request.getTerm(), "like")) {
filter.append("'%").append(value).append("%'");
} else {
filter.append("'").append(value).append("'");
}
}
return filter.toString();
}
public String transExtFilter(List<ChartExtFilterRequest> requestList) {
if (CollectionUtils.isEmpty(requestList)) {
return "";
}

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

@ -15,6 +15,7 @@ import io.dataease.datasource.provider.DatasourceProvider;
import io.dataease.datasource.provider.ProviderFactory;
import io.dataease.datasource.request.DatasourceRequest;
import io.dataease.datasource.service.DatasourceService;
import io.dataease.dto.chart.ChartCustomFilterDTO;
import io.dataease.dto.chart.ChartViewDTO;
import io.dataease.dto.chart.ChartViewFieldDTO;
import io.dataease.dto.chart.Series;
@ -31,6 +32,7 @@ import javax.annotation.Resource;
import java.math.BigDecimal;
import java.math.RoundingMode;
import java.util.*;
import java.util.stream.Collectors;
/**
* @Author gin
@ -89,6 +91,9 @@ public class ChartViewService {
}.getType());
List<ChartViewFieldDTO> yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
List<ChartCustomFilterDTO> customFilter = new Gson().fromJson(view.getCustomFilter(), new TypeToken<List<ChartCustomFilterDTO>>() {
}.getType());
customFilter.forEach(ele -> ele.setField(dataSetTableFieldsService.get(ele.getFieldId())));
if (CollectionUtils.isEmpty(xAxis) || CollectionUtils.isEmpty(yAxis)) {
ChartViewDTO dto = new ChartViewDTO();
@ -127,9 +132,9 @@ public class ChartViewService {
QueryProvider qp = ProviderFactory.getQueryProvider(ds.getType());
if (StringUtils.equalsIgnoreCase(table.getType(), "db")) {
datasourceRequest.setTable(dataTableInfoDTO.getTable());
datasourceRequest.setQuery(qp.getSQL(dataTableInfoDTO.getTable(), xAxis, yAxis, extFilterList));
datasourceRequest.setQuery(qp.getSQL(dataTableInfoDTO.getTable(), xAxis, yAxis, customFilter, extFilterList));
} else if (StringUtils.equalsIgnoreCase(table.getType(), "sql")) {
datasourceRequest.setQuery(qp.getSQLAsTmp(dataTableInfoDTO.getSql(), xAxis, yAxis, extFilterList));
datasourceRequest.setQuery(qp.getSQLAsTmp(dataTableInfoDTO.getSql(), xAxis, yAxis, customFilter, extFilterList));
}
data = datasourceProvider.getData(datasourceRequest);
} else if (table.getMode() == 1) {// 抽取
@ -141,7 +146,7 @@ public class ChartViewService {
String tableName = "ds_" + table.getId().replaceAll("-", "_");
datasourceRequest.setTable(tableName);
QueryProvider qp = ProviderFactory.getQueryProvider(ds.getType());
datasourceRequest.setQuery(qp.getSQL(tableName, xAxis, yAxis, extFilterList));
datasourceRequest.setQuery(qp.getSQL(tableName, xAxis, yAxis, customFilter, extFilterList));
data = datasourceProvider.getData(datasourceRequest);
}

3
frontend/src/lang/en.js
View File

@ -672,7 +672,8 @@ export default {
only_one_result: 'Only show first result',
dimension_show: 'Dimension Show',
quota_show: 'Quota Show',
title_limit: 'Title cannot be greater than 50 characters'
title_limit: 'Title cannot be greater than 50 characters',
filter_condition: 'Filter Condition'
},
dataset: {
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

3
frontend/src/lang/tw.js
View File

@ -671,7 +671,8 @@ export default {
only_one_result: '僅顯示第1個計算結果',
dimension_show: '維度顯示',
quota_show: '指標顯示',
title_limit: '標題不能大於50個字符'
title_limit: '標題不能大於50個字符',
filter_condition: '過濾條件'
},
dataset: {
sheet_warn: '有多個sheet頁面，默認抽取第一個',

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

@ -673,7 +673,8 @@ export default {
only_one_result: '仅显示第1个计算结果',
dimension_show: '维度显示',
quota_show: '指标显示',
title_limit: '标题不能大于50个字符'
title_limit: '标题不能大于50个字符',
filter_condition: '过滤条件'
},
dataset: {
sheet_warn: '有多个Sheet页，默认抽取第一个',

56
frontend/src/views/chart/components/filter/DimensionFilterEditor.vue
View File

@ -1,33 +1,35 @@
<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 }}</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>
<div style="max-height: 50vh;overflow-y: auto;">
<el-row v-for="(f,index) in item.filter" :key="index" class="filter-item">
<el-col :span="4">
<span>{{ item.name }}</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>
</div>
</el-col>
</template>

56
frontend/src/views/chart/components/filter/QuotaFilterEditor.vue
View File

@ -1,33 +1,35 @@
<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>
<div style="max-height: 50vh;overflow-y: auto;">
<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>
</div>
</el-col>
</template>

152
frontend/src/views/chart/components/filter/ResultFilterEditor.vue Normal file
View File

@ -0,0 +1,152 @@
<template>
<el-col>
<el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addFilter" />
<div style="max-height: 50vh;overflow-y: auto;">
<el-row v-for="(f,index) in chart.customFilter" :key="index" class="filter-item">
<el-col :span="6">
<el-select v-model="f.fieldId" size="mini" filterable>
<el-option
v-for="item in fields"
:key="item.id"
:label="item.name"
:value="item.id"
>
<span style="float: left">
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
</span>
<span style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
</el-option>
</el-select>
</el-col>
<el-col :span="6">
<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>
</div>
</el-col>
</template>
<script>
import { fieldList } from '../../../../api/dataset/dataset'
export default {
name: 'ResultFilterEditor',
props: {
chart: {
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')
}]
}],
fields: []
}
},
mounted() {
fieldList(this.chart.tableId).then(response => {
this.fields = response.data
})
},
methods: {
addFilter() {
this.chart.customFilter.push({
fieldId: '',
term: 'eq',
value: ''
})
},
removeFilter(index) {
this.chart.customFilter.splice(index, 1)
}
}
}
</script>
<style scoped>
.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>

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

@ -165,22 +165,11 @@
</el-tab-pane>
</el-tabs>
</div>
<div v-if="false" style="overflow:auto;border-top: 1px solid #e6e6e6" class="padding-lr filter-class">
<div style="height:60px;overflow:auto;border-top: 1px solid #e6e6e6" class="padding-lr filter-class">
<span>{{ $t('chart.result_filter') }}</span>
<div style="margin: 8px" class="filter-inner-class">
<draggable
v-model="view.customFilter"
group="drag"
animation="300"
:move="onMove"
style="height:100%;margin:0;overflow-x: auto;background-color: white;"
@end="end2"
>
<transition-group class="draggable-group">
<filter-item v-for="(item,index) in view.customFilter" :key="item.id" :index="index" :item="item" />
</transition-group>
</draggable>
</div>
<el-button size="mini" class="filter-btn-class" @click="showResultFilter">
{{ $t('chart.filter_condition') }}<i class="el-icon-setting el-icon--right" />
</el-button>
</div>
</el-col>
@ -188,7 +177,7 @@
<el-row style="width: 100%;height: 100%;" class="padding-lr">
<el-row style="margin-top: 10px;">
<el-row style="display:flex;height: 32px;">
<span style="line-height: 32px;width: 60px;text-align: right;">{{ $t('chart.dimension') }}</span>
<span style="line-height: 32px;width: 80px;text-align: right;">{{ $t('chart.dimension') }}</span>
<draggable
v-model="view.xaxis"
group="dimension"
@ -203,7 +192,7 @@
</draggable>
</el-row>
<el-row style="display:flex;height: 32px;margin-top: 10px;">
<span style="line-height: 32px;width: 60px;text-align: right;">{{ $t('chart.quota') }}</span>
<span style="line-height: 32px;width: 80px;text-align: right;">{{ $t('chart.quota') }}</span>
<draggable
v-model="view.yaxis"
group="quota"
@ -275,6 +264,20 @@
<el-button type="primary" size="mini" @click="saveDimensionFilter">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
<el-dialog
v-dialogDrag
:title="$t('chart.add_filter')"
:visible="resultFilterEdit"
:show-close="false"
width="800px"
class="dialog-css"
>
<result-filter-editor :chart="chartForFilter" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeResultFilter">{{ $t('chart.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveResultFilter">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
</el-row>
</template>
@ -283,7 +286,7 @@ import { post, ajaxGetData } from '@/api/chart/chart'
import draggable from 'vuedraggable'
import DimensionItem from '../components/drag-item/DimensionItem'
import QuotaItem from '../components/drag-item/QuotaItem'
import FilterItem from '../components/drag-item/FilterItem'
import ResultFilterEditor from '../components/filter/ResultFilterEditor'
import ChartComponent from '../components/ChartComponent'
import bus from '@/utils/bus'
import DatasetChartDetail from '../../dataset/common/DatasetChartDetail'
@ -317,7 +320,7 @@ import html2canvas from 'html2canvas'
export default {
name: 'ChartEdit',
components: { LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
components: { ResultFilterEditor, LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
props: {
param: {
type: Object,
@ -359,6 +362,8 @@ export default {
dimensionItem: {},
quotaFilterEdit: false,
quotaItem: {},
resultFilterEdit: false,
chartForFilter: {},
renameItem: false,
itemForm: {
name: ''
@ -784,6 +789,19 @@ export default {
this.closeQuotaFilter()
},
showResultFilter() {
this.chartForFilter = JSON.parse(JSON.stringify(this.view))
this.resultFilterEdit = true
},
closeResultFilter() {
this.resultFilterEdit = false
},
saveResultFilter() {
this.view.customFilter = this.chartForFilter.customFilter
this.save(true)
this.closeResultFilter()
},
showRename(val) {
this.itemForm = JSON.parse(JSON.stringify(val))
this.renameItem = true
@ -948,7 +966,7 @@ export default {
}
.attr-style{
height: calc(100vh - 56px - 25vh - 40px - 62px - 10px);
height: calc(100vh - 56px - 25vh - 40px - 62px - 10px - 60px);
}
.attr-selector{
@ -992,4 +1010,13 @@ export default {
.dialog-css >>> .el-dialog__body {
padding: 10px 20px 20px;
}
.filter-btn-class{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>