Skip to content

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

feat: 视图过滤重新设计，支持单维度指标展示

上级 e803a2cb
显示空白字符变更
内嵌 并排
正在显示 包含 404 行增加 和 202 行删除
backend/src/main/java/io/dataease/dto/chart/ChartCustomFilterItemDTO.java 0 → 100644
浏览文件 @ 7411ba40
package io.dataease.dto.chart;
import lombok.Getter;
import lombok.Setter;
import java.io.Serializable;
/**
* @Author gin
* @Date 2021/7/20 11:34 上午
*/
@Getter
@Setter
public class ChartCustomFilterItemDTO implements Serializable {
private String fieldId;
private String term;
private String value;
}
backend/src/main/java/io/dataease/dto/chart/ChartFieldCustomFilterDTO.java 0 → 100644
浏览文件 @ 7411ba40
package io.dataease.dto.chart;
import io.dataease.base.domain.DatasetTableField;
import lombok.Getter;
import lombok.Setter;
import java.io.Serializable;
import java.util.List;
/**
* @Author gin
* @Date 2021/7/20 11:43 上午
*/
@Getter
@Setter
public class ChartFieldCustomFilterDTO implements Serializable {
private List<ChartCustomFilterItemDTO> filter;
}
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
浏览文件 @ 7411ba40
...@@ -134,24 +134,31 @@ public class ChartViewService { ...@@ -134,24 +134,31 @@ public class ChartViewService {
}.getType()); }.getType());
List<ChartViewFieldDTO> yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() { List<ChartViewFieldDTO> yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType()); }.getType());
List<ChartCustomFilterDTO> customFilter = new Gson().fromJson(view.getCustomFilter(), new TypeToken<List<ChartCustomFilterDTO>>() { List<ChartFieldCustomFilterDTO> fieldCustomFilter = new Gson().fromJson(view.getCustomFilter(), new TypeToken<List<ChartFieldCustomFilterDTO>>() {
}.getType()); }.getType());
customFilter.forEach(ele -> ele.setField(dataSetTableFieldsService.get(ele.getFieldId()))); List<ChartCustomFilterDTO> customFilter = fieldCustomFilter.stream().map(ele -> {
ChartCustomFilterDTO dto = new ChartCustomFilterDTO();
if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) { ele.getFilter().forEach(f -> {
xAxis = new ArrayList<>(); BeanUtils.copyBean(dto, f);
if (CollectionUtils.isEmpty(yAxis)) { dto.setField(dataSetTableFieldsService.get(f.getFieldId()));
ChartViewDTO dto = new ChartViewDTO(); });
BeanUtils.copyBean(dto, view);
return dto;
}
} else {
if (CollectionUtils.isEmpty(xAxis) || CollectionUtils.isEmpty(yAxis)) {
ChartViewDTO dto = new ChartViewDTO();
BeanUtils.copyBean(dto, view);
return dto; return dto;
} }).collect(Collectors.toList());
}
// if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
// xAxis = new ArrayList<>();
// if (CollectionUtils.isEmpty(yAxis)) {
// ChartViewDTO dto = new ChartViewDTO();
// BeanUtils.copyBean(dto, view);
// return dto;
// }
// } else {
// if (CollectionUtils.isEmpty(xAxis) || CollectionUtils.isEmpty(yAxis)) {
// ChartViewDTO dto = new ChartViewDTO();
// BeanUtils.copyBean(dto, view);
// return dto;
// }
// }
// 过滤来自仪表板的条件 // 过滤来自仪表板的条件
List<ChartExtFilterRequest> extFilterList = new ArrayList<>(); List<ChartExtFilterRequest> extFilterList = new ArrayList<>();
......
frontend/src/lang/en.js
浏览文件 @ 7411ba40
...@@ -598,7 +598,7 @@ export default { ...@@ -598,7 +598,7 @@ export default {
chart_type: 'Chart Type', chart_type: 'Chart Type',
shape_attr: 'Attribute', shape_attr: 'Attribute',
module_style: 'Style', module_style: 'Style',
result_filter: 'Results Filter', result_filter: 'Filters',
x_axis: 'Horizontal axis', x_axis: 'Horizontal axis',
y_axis: 'Longitudinal axis', y_axis: 'Longitudinal axis',
chart: 'Chart', chart: 'Chart',
......
frontend/src/lang/tw.js
浏览文件 @ 7411ba40
...@@ -598,7 +598,7 @@ export default { ...@@ -598,7 +598,7 @@ export default {
chart_type: '圖表類型', chart_type: '圖表類型',
shape_attr: '圖形屬性', shape_attr: '圖形屬性',
module_style: '組件樣式', module_style: '組件樣式',
result_filter: '結果過濾器', result_filter: '過濾器',
x_axis: '橫軸', x_axis: '橫軸',
y_axis: '縱軸', y_axis: '縱軸',
chart: '視圖', chart: '視圖',
......
frontend/src/lang/zh.js
浏览文件 @ 7411ba40
...@@ -598,7 +598,7 @@ export default { ...@@ -598,7 +598,7 @@ export default {
chart_type: '图表类型', chart_type: '图表类型',
shape_attr: '图形属性', shape_attr: '图形属性',
module_style: '组件样式', module_style: '组件样式',
result_filter: '结果过滤器', result_filter: '过滤器',
x_axis: '横轴', x_axis: '横轴',
y_axis: '纵轴', y_axis: '纵轴',
chart: '视图', chart: '视图',
......
frontend/src/views/chart/components/drag-item/DimensionItem.vue
浏览文件 @ 7411ba40
...@@ -39,9 +39,9 @@ ...@@ -39,9 +39,9 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')"> <!-- <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 v-show="item.deType === 1" divided> <el-dropdown-item v-show="item.deType === 1" divided>
<el-dropdown placement="right-start" size="mini" style="width: 100%" @command="dateStyle"> <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="dateStyle">
......
frontend/src/views/chart/components/drag-item/FilterItem.vue
浏览文件 @ 7411ba40
<template> <template>
<div> <span>
<el-dropdown trigger="click" size="mini" @command="clickItem"> <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis">
<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" />
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
</span>
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
</el-tag>
<el-dropdown v-else trigger="click" size="mini" @command="clickItem">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<el-tag size="small" class="item-axis"> <el-tag size="small" class="item-axis">
{{ item.name }}<i class="el-icon-arrow-down el-icon--right" /> <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" />
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
</span>
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
<i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
</el-tag> </el-tag>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickItem('rename')"> <el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
<span>{{ $t('chart.show_name_set') }}</span> <span>{{ $t('chart.filter') }}...</span>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')"> <el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
<span>{{ $t('chart.delete') }}</span> <span>{{ $t('chart.delete') }}</span>
...@@ -15,25 +31,17 @@ ...@@ -15,25 +31,17 @@
</el-dropdown-menu> </el-dropdown-menu>
</span> </span>
</el-dropdown> </el-dropdown>
</span>
<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>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'FilterItem', name: 'FilterItem',
props: { props: {
param: {
type: Object,
required: true
},
item: { item: {
type: Object, type: Object,
required: true required: true
...@@ -45,15 +53,6 @@ export default { ...@@ -45,15 +53,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() {
...@@ -64,12 +63,12 @@ export default { ...@@ -64,12 +63,12 @@ export default {
return return
} }
switch (param.type) { switch (param.type) {
case 'rename':
this.showRename()
break
case 'remove': case 'remove':
this.removeItem() this.removeItem()
break break
case 'filter':
this.editFilter()
break
default: default:
break break
} }
...@@ -79,23 +78,9 @@ export default { ...@@ -79,23 +78,9 @@ export default {
type: type type: type
} }
}, },
showRename() { editFilter() {
this.itemForm.name = this.item.name this.item.index = this.index
this.renameItem = true this.$emit('editItemFilter', this.item)
},
closeRename() {
this.renameItem = false
this.resetRename()
},
saveRename(param) {
this.item.name = param.name
this.$emit('onFilterItemChange', this.item)
this.closeRename()
},
resetRename() {
this.itemForm = {
name: ''
}
}, },
removeItem() { removeItem() {
this.item.index = this.index this.item.index = this.index
...@@ -112,10 +97,11 @@ export default { ...@@ -112,10 +97,11 @@ export default {
text-align: left; text-align: left;
height: 24px; height: 24px;
line-height: 22px; line-height: 22px;
display: inline-block; display: flex;
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
white-space: nowrap; white-space: nowrap;
width: 159px;
} }
.item-axis:hover { .item-axis:hover {
...@@ -126,4 +112,24 @@ export default { ...@@ -126,4 +112,24 @@ export default {
span { span {
font-size: 12px; font-size: 12px;
} }
.summary-span{
margin-left: 4px;
color: #878d9f;;
}
.inner-dropdown-menu{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%
}
.item-span-style{
display: inline-block;
width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style> </style>
frontend/src/views/chart/components/filter/ResultFilterEditor.vue
浏览文件 @ 7411ba40
...@@ -2,26 +2,11 @@ ...@@ -2,26 +2,11 @@
<el-col> <el-col>
<el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addFilter" /> <el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addFilter" />
<div style="max-height: 50vh;overflow-y: auto;"> <div style="max-height: 50vh;overflow-y: auto;">
<el-row v-for="(f,index) in chart.customFilter" :key="index" class="filter-item"> <el-row v-for="(f,index) in item.filter" :key="index" class="filter-item">
<el-col :span="6"> <el-col :span="4">
<el-select v-model="f.fieldId" size="mini" filterable> <span>{{ item.name }}</span>
<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" />
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
</span>
<span style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
</el-option>
</el-select>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="8">
<el-select v-model="f.term" size="mini"> <el-select v-model="f.term" size="mini">
<el-option-group <el-option-group
v-for="(group,idx) in options" v-for="(group,idx) in options"
...@@ -49,7 +34,7 @@ ...@@ -49,7 +34,7 @@
</template> </template>
<script> <script>
import { fieldList } from '../../../../api/dataset/dataset' // import { fieldList } from '../../../../api/dataset/dataset'
export default { export default {
name: 'ResultFilterEditor', name: 'ResultFilterEditor',
...@@ -57,11 +42,16 @@ export default { ...@@ -57,11 +42,16 @@ export default {
chart: { chart: {
type: Object, type: Object,
required: true required: true
},
item: {
type: Object,
required: true
} }
}, },
data() { data() {
return { return {
options: [{ textOptions: [
{
label: '', label: '',
options: [{ options: [{
value: 'eq', value: 'eq',
...@@ -81,6 +71,28 @@ export default { ...@@ -81,6 +71,28 @@ export default {
label: this.$t('chart.filter_not_like') label: this.$t('chart.filter_not_like')
}] }]
}, },
{
label: '',
options: [{
value: 'null',
label: this.$t('chart.filter_null')
}, {
value: 'not_null',
label: this.$t('chart.filter_not_null')
}]
}
],
dateOptions: [
{
label: '',
options: [{
value: 'eq',
label: this.$t('chart.filter_eq')
}, {
value: 'not_eq',
label: this.$t('chart.filter_not_eq')
}]
},
{ {
label: '', label: '',
options: [{ options: [{
...@@ -110,25 +122,82 @@ export default { ...@@ -110,25 +122,82 @@ export default {
value: 'not_null', value: 'not_null',
label: this.$t('chart.filter_not_null') label: this.$t('chart.filter_not_null')
}] }]
}], }
fields: [] ],
valueOptions: [
{
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')
}]
}
],
options: []
}
},
watch: {
'item': function() {
this.initOptions()
} }
}, },
mounted() { mounted() {
fieldList(this.chart.tableId).then(response => { this.initOptions()
this.fields = response.data
})
}, },
methods: { methods: {
initOptions() {
if (this.item) {
if (this.item.deType === 0 || this.item.deType === 5) {
this.options = JSON.parse(JSON.stringify(this.textOptions))
} else if (this.item.deType === 1) {
this.options = JSON.parse(JSON.stringify(this.dateOptions))
} else {
this.options = JSON.parse(JSON.stringify(this.valueOptions))
}
}
},
addFilter() { addFilter() {
this.chart.customFilter.push({ this.item.filter.push({
fieldId: '', fieldId: this.item.id,
term: 'eq', term: 'eq',
value: '' value: ''
}) })
}, },
removeFilter(index) { removeFilter(index) {
this.chart.customFilter.splice(index, 1) this.item.filter.splice(index, 1)
} }
} }
} }
...@@ -157,8 +226,4 @@ export default { ...@@ -157,8 +226,4 @@ export default {
display: inline-block; display: inline-block;
width: 80px!important; width: 80px!important;
} }
.el-select-dropdown__item{
padding: 0 20px;
font-size: 12px;
}
</style> </style>
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ 7411ba40
...@@ -47,13 +47,12 @@ ...@@ -47,13 +47,12 @@
<span>{{ $t('chart.dimension') }}</span> <span>{{ $t('chart.dimension') }}</span>
<draggable <draggable
v-model="dimensionData" v-model="dimensionData"
:options="{group:{name: 'dimension',pull:'clone'},sort: true}" :options="{group:{name: 'drag',pull:'clone'},sort: true}"
animation="300" animation="300"
:move="onMove" :move="onMove"
class="drag-list" class="drag-list"
:disabled="!hasDataPermission('manage',param.privileges)" :disabled="!hasDataPermission('manage',param.privileges)"
@end="end1" @add="moveToDimension"
@start="start1"
> >
<transition-group> <transition-group>
<span v-for="item in dimensionData" :key="item.id" class="item" :title="item.name"> <span v-for="item in dimensionData" :key="item.id" class="item" :title="item.name">
...@@ -70,13 +69,12 @@ ...@@ -70,13 +69,12 @@
<span>{{ $t('chart.quota') }}</span> <span>{{ $t('chart.quota') }}</span>
<draggable <draggable
v-model="quotaData" v-model="quotaData"
:options="{group:{name: 'quota',pull:'clone'},sort: true}" :options="{group:{name: 'drag',pull:'clone'},sort: true}"
animation="300" animation="300"
:move="onMove" :move="onMove"
class="drag-list" class="drag-list"
:disabled="!hasDataPermission('manage',param.privileges)" :disabled="!hasDataPermission('manage',param.privileges)"
@end="end1" @add="moveToQuota"
@start="start1"
> >
<transition-group> <transition-group>
<span v-for="item in quotaData" :key="item.id" class="item" :title="item.name"> <span v-for="item in quotaData" :key="item.id" class="item" :title="item.name">
...@@ -219,11 +217,11 @@ ...@@ -219,11 +217,11 @@
<draggable <draggable
v-model="view.xaxis" v-model="view.xaxis"
:disabled="!hasDataPermission('manage',param.privileges)" :disabled="!hasDataPermission('manage',param.privileges)"
group="dimension" group="drag"
animation="300" animation="300"
:move="onMove" :move="onMove"
style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;" style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
@end="end2" @add="addXaxis"
> >
<transition-group class="draggable-group"> <transition-group class="draggable-group">
<dimension-item v-for="(item,index) in view.xaxis" :key="item.id" :param="param" :index="index" :item="item" @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove" @editItemFilter="showDimensionEditFilter" @onNameEdit="showRename" /> <dimension-item v-for="(item,index) in view.xaxis" :key="item.id" :param="param" :index="index" :item="item" @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove" @editItemFilter="showDimensionEditFilter" @onNameEdit="showRename" />
...@@ -235,11 +233,11 @@ ...@@ -235,11 +233,11 @@
<draggable <draggable
v-model="view.yaxis" v-model="view.yaxis"
:disabled="!hasDataPermission('manage',param.privileges)" :disabled="!hasDataPermission('manage',param.privileges)"
group="quota" group="drag"
animation="300" animation="300"
:move="onMove" :move="onMove"
style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;" style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
@end="end2" @add="addYaxis"
> >
<transition-group class="draggable-group"> <transition-group class="draggable-group">
<quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename" /> <quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename" />
...@@ -248,9 +246,22 @@ ...@@ -248,9 +246,22 @@
</el-row> </el-row>
<div class="padding-lr filter-class" style="margin-top: 6px;"> <div class="padding-lr filter-class" style="margin-top: 6px;">
<span>{{ $t('chart.result_filter') }}</span> <span>{{ $t('chart.result_filter') }}</span>
<el-button :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="filter-btn-class" @click="showResultFilter"> <!-- <el-button :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="filter-btn-class" @click="showResultFilter">-->
{{ $t('chart.filter_condition') }}<i class="el-icon-setting el-icon--right" /> <!-- {{ $t('chart.filter_condition') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
</el-button> <!-- </el-button>-->
<draggable
v-model="view.customFilter"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
@add="addCustomFilter"
>
<transition-group class="draggable-group">
<filter-item v-for="(item,index) in view.customFilter" :key="item.id" :param="param" :index="index" :item="item" @onFilterItemRemove="filterItemRemove" @editItemFilter="showEditFilter" />
</transition-group>
</draggable>
</div> </div>
</el-row> </el-row>
</div> </div>
...@@ -360,7 +371,7 @@ ...@@ -360,7 +371,7 @@
width="800px" width="800px"
class="dialog-css" class="dialog-css"
> >
<result-filter-editor :chart="chartForFilter" /> <result-filter-editor :chart="chartForFilter" :item="filterItem" />
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeResultFilter">{{ $t('chart.cancel') }}</el-button> <el-button size="mini" @click="closeResultFilter">{{ $t('chart.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveResultFilter">{{ $t('chart.confirm') }}</el-button> <el-button type="primary" size="mini" @click="saveResultFilter">{{ $t('chart.confirm') }}</el-button>
...@@ -404,6 +415,7 @@ import { ajaxGetData, post } from '@/api/chart/chart' ...@@ -404,6 +415,7 @@ import { ajaxGetData, post } from '@/api/chart/chart'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import DimensionItem from '../components/drag-item/DimensionItem' import DimensionItem from '../components/drag-item/DimensionItem'
import QuotaItem from '../components/drag-item/QuotaItem' import QuotaItem from '../components/drag-item/QuotaItem'
import FilterItem from '../components/drag-item/FilterItem'
import ResultFilterEditor from '../components/filter/ResultFilterEditor' import ResultFilterEditor from '../components/filter/ResultFilterEditor'
import ChartComponent from '../components/ChartComponent' import ChartComponent from '../components/ChartComponent'
import bus from '@/utils/bus' import bus from '@/utils/bus'
...@@ -441,7 +453,31 @@ import FieldEdit from '../../dataset/data/FieldEdit' ...@@ -441,7 +453,31 @@ import FieldEdit from '../../dataset/data/FieldEdit'
export default { export default {
name: 'ChartEdit', name: 'ChartEdit',
components: { FieldEdit, SplitSelector, TableSelector, ResultFilterEditor, LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable }, components: {
FilterItem,
FieldEdit,
SplitSelector,
TableSelector,
ResultFilterEditor,
LabelNormal,
DimensionFilterEditor,
TableNormal,
DatasetChartDetail,
QuotaFilterEditor,
BackgroundColorSelector,
XAxisSelector,
YAxisSelector,
TooltipSelector,
LabelSelector,
LegendSelector,
TitleSelector,
SizeSelector,
ColorSelector,
ChartComponent,
QuotaItem,
DimensionItem,
draggable
},
props: { props: {
param: { param: {
type: Object, type: Object,
...@@ -508,7 +544,8 @@ export default { ...@@ -508,7 +544,8 @@ export default {
changeTable: {}, changeTable: {},
searchField: '', searchField: '',
editDsField: false, editDsField: false,
changeDsTitle: '' changeDsTitle: '',
filterItem: {}
} }
}, },
computed: { computed: {
...@@ -623,6 +660,11 @@ export default { ...@@ -623,6 +660,11 @@ export default {
if (view.type === 'line-stack' && trigger === 'chart') { if (view.type === 'line-stack' && trigger === 'chart') {
view.customAttr.size.lineArea = true view.customAttr.size.lineArea = true
} }
view.customFilter.forEach(function(ele) {
if (ele && !ele.filter) {
ele.filter = []
}
})
view.xaxis = JSON.stringify(view.xaxis) view.xaxis = JSON.stringify(view.xaxis)
view.yaxis = JSON.stringify(view.yaxis) view.yaxis = JSON.stringify(view.yaxis)
view.customAttr = JSON.stringify(view.customAttr) view.customAttr = JSON.stringify(view.customAttr)
...@@ -775,82 +817,77 @@ export default { ...@@ -775,82 +817,77 @@ export default {
}, },
// 左边往右边拖动时的事件 // 左边往右边拖动时的事件
start1(e) { // start1(e) {
// console.log(e) // // console.log(e)
e.clone.className = 'item' // e.clone.className = 'item'
e.item.className = 'item' // e.item.className = 'item'
}, // },
end1(e) { // end1(e) {
// console.log(e) // // console.log(e)
e.clone.className = 'item' // e.clone.className = 'item'
e.item.className = 'item' // e.item.className = 'item'
this.refuseMove(e) // this.refuseMove(e)
this.removeCheckedKey(e) // this.removeCheckedKey(e)
this.save(true) // this.save(true)
}, // },
// 右边往左边拖动时的事件 // 右边往左边拖动时的事件
start2(e) { // start2(e) {
// console.log(e) // console.log(e)
}, // },
end2(e) { // end2(e) {
// console.log(e) // // console.log(e)
this.removeDuplicateKey(e) // this.removeDuplicateKey(e)
this.save(true) // this.save(true)
}, // },
removeCheckedKey(e) { // removeCheckedKey(e) {
const that = this // const that = this
const xItems = this.view.xaxis.filter(function(m) { // const xItems = this.view.xaxis.filter(function(m) {
return m.id === that.moveId // return m.id === that.moveId
}) // })
const yItems = this.view.yaxis.filter(function(m) { // const yItems = this.view.yaxis.filter(function(m) {
return m.id === that.moveId // return m.id === that.moveId
}) // })
if (xItems && xItems.length > 1) { // if (xItems && xItems.length > 1) {
this.view.xaxis.splice(e.newDraggableIndex, 1) // this.view.xaxis.splice(e.newDraggableIndex, 1)
} // }
if (yItems && yItems.length > 1) { // if (yItems && yItems.length > 1) {
this.view.yaxis.splice(e.newDraggableIndex, 1) // this.view.yaxis.splice(e.newDraggableIndex, 1)
} // }
}, // },
refuseMove(e) { // refuseMove(e) {
const that = this // const that = this
const xItems = this.dimension.filter(function(m) { // const xItems = this.dimension.filter(function(m) {
return m.id === that.moveId // return m.id === that.moveId
}) // })
const yItems = this.quota.filter(function(m) { // const yItems = this.quota.filter(function(m) {
return m.id === that.moveId // return m.id === that.moveId
}) // })
if (xItems && xItems.length > 1) { // if (xItems && xItems.length > 1) {
this.dimension.splice(e.newDraggableIndex, 1) // this.dimension.splice(e.newDraggableIndex, 1)
} // }
if (yItems && yItems.length > 1) { // if (yItems && yItems.length > 1) {
this.quota.splice(e.newDraggableIndex, 1) // this.quota.splice(e.newDraggableIndex, 1)
} // }
}, // },
removeDuplicateKey(e) { // removeDuplicateKey(e) {
const that = this // const that = this
const xItems = this.dimension.filter(function(m) { // const xItems = this.dimension.filter(function(m) {
return m.id === that.moveId // return m.id === that.moveId
}) // })
const yItems = this.quota.filter(function(m) { // const yItems = this.quota.filter(function(m) {
return m.id === that.moveId // return m.id === that.moveId
}) // })
if (xItems && xItems.length > 1) { // if (xItems && xItems.length > 1) {
this.dimension.splice(e.newDraggableIndex, 1) // this.dimension.splice(e.newDraggableIndex, 1)
} // }
if (yItems && yItems.length > 1) { // if (yItems && yItems.length > 1) {
this.quota.splice(e.newDraggableIndex, 1) // this.quota.splice(e.newDraggableIndex, 1)
} // }
}, // },
// move回调方法 // move回调方法
onMove(e, originalEvent) { onMove(e, originalEvent) {
// console.log(e) // console.log(e)
this.moveId = e.draggedContext.element.id this.moveId = e.draggedContext.element.id
// //不允许停靠
// if (e.relatedContext.element.id == 1) return false;
// //不允许拖拽
// if (e.draggedContext.element.id == 4) return false;
// if (e.draggedContext.element.id == 11) return false;
return true return true
}, },
...@@ -977,7 +1014,12 @@ export default { ...@@ -977,7 +1014,12 @@ export default {
this.closeQuotaFilter() this.closeQuotaFilter()
}, },
showResultFilter() { filterItemRemove(item) {
this.view.customFilter.splice(item.index, 1)
this.save(true)
},
showEditFilter(item) {
this.filterItem = JSON.parse(JSON.stringify(item))
this.chartForFilter = JSON.parse(JSON.stringify(this.view)) this.chartForFilter = JSON.parse(JSON.stringify(this.view))
this.resultFilterEdit = true this.resultFilterEdit = true
}, },
...@@ -985,16 +1027,8 @@ export default { ...@@ -985,16 +1027,8 @@ export default {
this.resultFilterEdit = false this.resultFilterEdit = false
}, },
saveResultFilter() { saveResultFilter() {
for (let i = 0; i < this.chartForFilter.customFilter.length; i++) { for (let i = 0; i < this.filterItem.filter.length; i++) {
const f = this.chartForFilter.customFilter[i] const f = this.filterItem.filter[i]
if (!f.fieldId || f.fieldId === '') {
this.$message({
message: this.$t('chart.filter_field_can_null'),
type: 'error',
showClose: true
})
return
}
if (!f.term.includes('null') && (!f.value || f.value === '')) { if (!f.term.includes('null') && (!f.value || f.value === '')) {
this.$message({ this.$message({
message: this.$t('chart.filter_value_can_null'), message: this.$t('chart.filter_value_can_null'),
...@@ -1004,7 +1038,7 @@ export default { ...@@ -1004,7 +1038,7 @@ export default {
return return
} }
} }
this.view.customFilter = this.chartForFilter.customFilter this.view.customFilter[this.filterItem.index].filter = this.filterItem.filter
this.save(true) this.save(true)
this.closeResultFilter() this.closeResultFilter()
}, },
...@@ -1044,7 +1078,9 @@ export default { ...@@ -1044,7 +1078,9 @@ export default {
}, },
resetView() { resetView() {
this.dimension = [] this.dimension = []
this.dimensionData = []
this.quota = [] this.quota = []
this.quotaData = []
this.view = { this.view = {
xAxis: [], xAxis: [],
yAxis: [], yAxis: [],
...@@ -1095,6 +1131,58 @@ export default { ...@@ -1095,6 +1131,58 @@ export default {
closeEditDsField() { closeEditDsField() {
this.editDsField = false this.editDsField = false
this.initTableField() this.initTableField()
},
// drag
dragCheckType(list, type) {
if (list && list.length > 0) {
for (let i = 0; i < list.length; i++) {
if (list[i].groupType !== type) {
list.splice(i, 1)
}
}
}
},
dragMoveDuplicate(list, e) {
const that = this
const dup = list.filter(function(m) {
return m.id === that.moveId
})
if (dup && dup.length > 1) {
list.splice(e.newDraggableIndex, 1)
}
},
addXaxis(e) {
this.dragCheckType(this.view.xaxis, 'd')
this.dragMoveDuplicate(this.view.xaxis, e)
this.save(true)
},
addYaxis(e) {
this.dragCheckType(this.view.yaxis, 'q')
this.dragMoveDuplicate(this.view.yaxis, e)
this.save(true)
},
moveToDimension(e) {
this.dragCheckType(this.dimensionData, 'd')
this.dragMoveDuplicate(this.dimensionData, e)
this.save(true)
},
moveToQuota(e) {
this.dragCheckType(this.quotaData, 'q')
this.dragMoveDuplicate(this.quotaData, e)
this.save(true)
},
addCustomFilter(e) {
// 记录数等自动生成字段不做为过滤条件
if (this.view.customFilter && this.view.customFilter.length > 0) {
for (let i = 0; i < this.view.customFilter.length; i++) {
if (this.view.customFilter[i].id === 'count') {
this.view.customFilter.splice(i, 1)
}
}
}
this.dragMoveDuplicate(this.view.customFilter, e)
this.save(true)
} }
} }
} }
...@@ -1288,7 +1376,7 @@ export default { ...@@ -1288,7 +1376,7 @@ export default {
} }
.chart-error-class{ .chart-error-class{
text-align: center; text-align: center;
height: calc(100% - 84px); height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论