diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index f6345a8a34..5d313a4a01 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -29,10 +29,20 @@ -
+
+ + +
+
{{ $t('chart.dimension') }} - + @@ -50,10 +60,10 @@
-
+
{{ $t('chart.quota') }} - + @@ -352,6 +362,18 @@ {{ $t('chart.confirm') }}
+ + + + + @@ -393,10 +415,11 @@ import TableNormal from '../components/table/TableNormal' import LabelNormal from '../components/normal/LabelNormal' import html2canvas from 'html2canvas' import TableSelector from './TableSelector' +import FieldEdit from '../../dataset/data/FieldEdit' export default { name: 'ChartEdit', - components: { SplitSelector, TableSelector, ResultFilterEditor, LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable }, + components: { FieldEdit, SplitSelector, TableSelector, ResultFilterEditor, LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable }, props: { param: { type: Object, @@ -409,6 +432,8 @@ export default { table: {}, dimension: [], quota: [], + dimensionData: [], + quotaData: [], view: { xaxis: [], yaxis: [], @@ -458,7 +483,9 @@ export default { msg: '' }, selectTableFlag: false, - changeTable: {} + changeTable: {}, + searchField: '', + editDsField: false } }, computed: { @@ -467,11 +494,13 @@ export default { // this.getData(this.$store.state.chart.viewId) // return this.$store.state.chart.viewId // } - }, watch: { 'param': function() { this.getData(this.param.id) + }, + searchField(val) { + this.fieldFilter(val) } }, created() { @@ -503,6 +532,9 @@ export default { post('/dataset/table/getFieldsFromDE', this.table).then(response => { this.dimension = response.data.dimension this.quota = response.data.quota + this.dimensionData = JSON.parse(JSON.stringify(this.dimension)) + this.quotaData = JSON.parse(JSON.stringify(this.quota)) + this.fieldFilter(this.searchField) }).catch(err => { this.resetView() this.httpRequest.status = err.response.data.success @@ -1015,6 +1047,25 @@ export default { this.view.yaxis = [] this.view.customFilter = [] this.save(true, 'chart', false) + }, + + fieldFilter(val) { + if (val && val !== '') { + this.dimensionData = JSON.parse(JSON.stringify(this.dimension.filter(ele => { return ele.name.includes(val) }))) + this.quotaData = JSON.parse(JSON.stringify(this.quota.filter(ele => { return ele.name.includes(val) }))) + } else { + this.dimensionData = JSON.parse(JSON.stringify(this.dimension)) + this.quotaData = JSON.parse(JSON.stringify(this.quota)) + } + }, + + editField() { + this.editDsField = true + }, + + closeEditDsField() { + this.editDsField = false + this.initTableField() } } } @@ -1208,4 +1259,7 @@ export default { justify-content: center; background-color: #ece7e7; } + .field-height{ + height: calc(50% - 20px); + }