From 4be52b9908c81d2972d5d763bae8eb6c4550d497 Mon Sep 17 00:00:00 2001 From: junjie <junjie.xia@fit2cloud.com> Date: Sat, 5 Feb 2022 12:47:34 +0800 Subject: [PATCH] feat: S2 Event --- .../service/chart/ChartViewService.java | 84 +++++++++++++------ .../src/views/chart/chart/table/table-info.js | 5 +- .../chart/components/ChartComponentS2.vue | 41 +++++++-- frontend/src/views/chart/view/ChartEdit.vue | 4 +- 4 files changed, 98 insertions(+), 36 deletions(-) diff --git a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java index 83a8946f65..e78ddb6e70 100644 --- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java +++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java @@ -305,10 +305,10 @@ public class ChartViewService { filterRequest.setFieldId(fId); DatasetTableField datasetTableField = dataSetTableFieldsService.get(fId); - if(datasetTableField == null){ + if (datasetTableField == null) { continue; } - if(!desensitizationList.contains(datasetTableField.getDataeaseName()) && dataeaseNames.contains(datasetTableField.getDataeaseName())){ + if (!desensitizationList.contains(datasetTableField.getDataeaseName()) && dataeaseNames.contains(datasetTableField.getDataeaseName())) { filterRequest.setDatasetTableField(datasetTableField); if (StringUtils.equalsIgnoreCase(datasetTableField.getTableId(), view.getTableId())) { if (CollectionUtils.isNotEmpty(filterRequest.getViewIds())) { @@ -329,7 +329,7 @@ public class ChartViewService { if (ObjectUtils.isNotEmpty(requestList.getLinkageFilters())) { for (ChartExtFilterRequest request : requestList.getLinkageFilters()) { DatasetTableField datasetTableField = dataSetTableFieldsService.get(request.getFieldId()); - if(!desensitizationList.contains(datasetTableField.getDataeaseName()) && dataeaseNames.contains(datasetTableField.getDataeaseName())){ + if (!desensitizationList.contains(datasetTableField.getDataeaseName()) && dataeaseNames.contains(datasetTableField.getDataeaseName())) { request.setDatasetTableField(datasetTableField); if (StringUtils.equalsIgnoreCase(datasetTableField.getTableId(), view.getTableId())) { if (CollectionUtils.isNotEmpty(request.getViewIds())) { @@ -814,34 +814,66 @@ public class ChartViewService { } } - for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) { - AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO(); - axisChartDataDTO.setField(a.toString()); - axisChartDataDTO.setName(a.toString()); + if (StringUtils.containsIgnoreCase(view.getType(), "table")) { + for (int i = 0; i < xAxis.size() + yAxis.size(); i++) { + AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO(); + axisChartDataDTO.setField(a.toString()); + axisChartDataDTO.setName(a.toString()); - List<ChartDimensionDTO> dimensionList = new ArrayList<>(); - List<ChartQuotaDTO> quotaList = new ArrayList<>(); + List<ChartDimensionDTO> dimensionList = new ArrayList<>(); + List<ChartQuotaDTO> quotaList = new ArrayList<>(); - for (int j = 0; j < xAxis.size(); j++) { - ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO(); - chartDimensionDTO.setId(xAxis.get(j).getId()); - chartDimensionDTO.setValue(row[j]); - dimensionList.add(chartDimensionDTO); + for (int j = 0; j < xAxis.size(); j++) { + ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO(); + chartDimensionDTO.setId(xAxis.get(j).getId()); + chartDimensionDTO.setValue(row[j]); + dimensionList.add(chartDimensionDTO); + } + axisChartDataDTO.setDimensionList(dimensionList); + + int j = i - xAxis.size(); + if (j > -1) { + ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO(); + chartQuotaDTO.setId(yAxis.get(j).getId()); + quotaList.add(chartQuotaDTO); + axisChartDataDTO.setQuotaList(quotaList); + try { + axisChartDataDTO.setValue(StringUtils.isEmpty(row[i]) ? null : new BigDecimal(row[i])); + } catch (Exception e) { + axisChartDataDTO.setValue(new BigDecimal(0)); + } + } + datas.add(axisChartDataDTO); } - axisChartDataDTO.setDimensionList(dimensionList); + } else { + for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) { + AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO(); + axisChartDataDTO.setField(a.toString()); + axisChartDataDTO.setName(a.toString()); - int j = i - xAxis.size(); - ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO(); - chartQuotaDTO.setId(yAxis.get(j).getId()); - quotaList.add(chartQuotaDTO); - axisChartDataDTO.setQuotaList(quotaList); - try { - axisChartDataDTO.setValue(StringUtils.isEmpty(row[i]) ? null : new BigDecimal(row[i])); - } catch (Exception e) { - axisChartDataDTO.setValue(new BigDecimal(0)); + List<ChartDimensionDTO> dimensionList = new ArrayList<>(); + List<ChartQuotaDTO> quotaList = new ArrayList<>(); + + for (int j = 0; j < xAxis.size(); j++) { + ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO(); + chartDimensionDTO.setId(xAxis.get(j).getId()); + chartDimensionDTO.setValue(row[j]); + dimensionList.add(chartDimensionDTO); + } + axisChartDataDTO.setDimensionList(dimensionList); + + int j = i - xAxis.size(); + ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO(); + chartQuotaDTO.setId(yAxis.get(j).getId()); + quotaList.add(chartQuotaDTO); + axisChartDataDTO.setQuotaList(quotaList); + try { + axisChartDataDTO.setValue(StringUtils.isEmpty(row[i]) ? null : new BigDecimal(row[i])); + } catch (Exception e) { + axisChartDataDTO.setValue(new BigDecimal(0)); + } + datas.add(axisChartDataDTO); } - axisChartDataDTO.setCategory(yAxis.get(j).getName()); - datas.add(axisChartDataDTO); } } map.put("datas", datas); diff --git a/frontend/src/views/chart/chart/table/table-info.js b/frontend/src/views/chart/chart/table/table-info.js index 080a4aaf33..83159b6fb0 100644 --- a/frontend/src/views/chart/chart/table/table-info.js +++ b/frontend/src/views/chart/chart/table/table-info.js @@ -1,4 +1,4 @@ -import { TableSheet } from '@antv/s2' +import { TableSheet, S2Event } from '@antv/s2' import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table' export function baseTableInfo(s2, container, chart, action, tableData) { @@ -47,6 +47,9 @@ export function baseTableInfo(s2, container, chart, action, tableData) { } s2 = new TableSheet(containerDom, s2DataConfig, s2Options) + // click + s2.on(S2Event.DATA_CELL_CLICK, action) + // theme const customTheme = getCustomTheme(chart) s2.setThemeCfg({ theme: customTheme }) diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue index 25e68cee82..cf0970ff7a 100644 --- a/frontend/src/views/chart/components/ChartComponentS2.vue +++ b/frontend/src/views/chart/components/ChartComponentS2.vue @@ -207,17 +207,44 @@ export default { }, antVAction(param) { - console.log(param) - if (this.chart.type === 'treemap') { - this.pointParam = param.data.data - } else { - this.pointParam = param.data + const cell = this.myChart.getCell(param.target) + const meta = cell.getMeta() + console.log(meta) + // if (this.chart.type === 'treemap') { + // this.pointParam = param.data.data + // } else { + // this.pointParam = param.data + // } + // if (this.trackMenu.length < 2) { // 只有一个事件直接调用 + // this.trackClick(this.trackMenu[0]) + // } else { // 视图关联多个事件 + // this.trackBarStyle.left = param.x + 'px' + // this.trackBarStyle.top = (param.y + 10) + 'px' + // this.$refs.viewTrack.trackButtonClick() + // } + + let xAxis = [] + if (this.chart.xaxis) { + xAxis = JSON.parse(this.chart.xaxis) } + let field = {} + if (meta.colIndex < xAxis.length) { + field = xAxis[meta.colIndex] + } + const dimensionList = [] + dimensionList.push({ id: field.id, value: meta.fieldValue }) + this.pointParam = { + data: { + dimensionList: dimensionList + } + } + console.log(this.pointParam) + if (this.trackMenu.length < 2) { // 只有一个事件直接调用 this.trackClick(this.trackMenu[0]) } else { // 视图关联多个事件 - this.trackBarStyle.left = param.x + 'px' - this.trackBarStyle.top = (param.y + 10) + 'px' + this.trackBarStyle.left = 50 + 'px' + this.trackBarStyle.top = (50 + 10) + 'px' this.$refs.viewTrack.trackButtonClick() } }, diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index 73c15a2f72..b5eab9b13f 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -483,7 +483,7 @@ </div> </el-row> <el-row - v-if="view.type && !view.type.includes('table') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud'" + v-if="view.type && !(view.type.includes('table') && view.render === 'echarts') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud'" class="padding-lr" style="margin-top: 6px;" > @@ -1325,7 +1325,7 @@ export default { view.customAttr.label.show = true } if (view.type === 'liquid' || - view.type.includes('table') || + (view.type.includes('table') && view.render === 'echarts') || view.type.includes('text') || view.type.includes('gauge')) { view.drillFields = []