Merge pull request #569 from dataease/pr@dev@feat_视图下钻

backend/src/main/java/io/dataease/controller/request/chart/ChartDrillRequest.java

+package io.dataease.controller.request.chart;
+
+import io.dataease.dto.chart.ChartDimensionDTO;
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * @Author gin
+ * @Date 2021/8/10 12:25 下午
+ */
+@Data
+public class ChartDrillRequest {
+    private List<ChartDimensionDTO> dimensionList;
+}

backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java

@@ -16,4 +16,5 @@ public class ChartExtRequest {
 
     //联动过滤条件
     private List<ChartExtFilterRequest> linkageFilters;
+    private List<ChartDrillRequest> drill;
 }

backend/src/main/java/io/dataease/dto/chart/ChartViewDTO.java

 package io.dataease.dto.chart;
 
 import io.dataease.base.domain.ChartViewWithBLOBs;
+import io.dataease.controller.request.chart.ChartDrillRequest;
 import lombok.Getter;
 import lombok.Setter;
 
+import java.util.List;
 import java.util.Map;
 
 /**
@@ -20,4 +22,6 @@ public class ChartViewDTO extends ChartViewWithBLOBs {
     private Boolean isLeaf;
     private String pid;
     private String sql;
+
+    private boolean drill;
 }

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -11,19 +11,12 @@ import io.dataease.commons.utils.AuthUtils;
 import io.dataease.commons.utils.BeanUtils;
 import io.dataease.commons.utils.CommonBeanFactory;
 import io.dataease.commons.utils.LogUtil;
-import io.dataease.controller.request.chart.ChartExtFilterRequest;
-import io.dataease.controller.request.chart.ChartExtRequest;
-import io.dataease.controller.request.chart.ChartGroupRequest;
-import io.dataease.controller.request.chart.ChartViewRequest;
-import io.dataease.controller.request.dataset.DataSetGroupRequest;
-import io.dataease.controller.request.dataset.DataSetTableRequest;
+import io.dataease.controller.request.chart.*;
 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.*;
-import io.dataease.dto.dataset.DataSetGroupDTO;
-import io.dataease.dto.dataset.DataSetTableDTO;
 import io.dataease.dto.dataset.DataSetTableUnionDTO;
 import io.dataease.dto.dataset.DataTableInfoDTO;
 import io.dataease.i18n.Translator;
@@ -197,6 +190,8 @@ public class ChartViewService {
         }.getType());
         List<ChartFieldCustomFilterDTO> fieldCustomFilter = new Gson().fromJson(view.getCustomFilter(), new TypeToken<List<ChartFieldCustomFilterDTO>>() {
         }.getType());
+        List<ChartViewFieldDTO> drill = new Gson().fromJson(view.getDrillFields(), new TypeToken<List<ChartViewFieldDTO>>() {
+        }.getType());
         List<ChartCustomFilterDTO> customFilter = new ArrayList<>();
         for (ChartFieldCustomFilterDTO ele : fieldCustomFilter) {
             List<ChartCustomFilterDTO> collect = ele.getFilter().stream().map(f -> {
@@ -260,6 +255,38 @@ public class ChartViewService {
             }
         }
 
+        // 下钻
+        boolean isDrill = false;
+        List<ChartDrillRequest> drillRequest = requestList.getDrill();
+        if (CollectionUtils.isNotEmpty(drillRequest) && (drill.size() >= drillRequest.size())) {
+            for (int i = 0; i < drillRequest.size(); i++) {
+                ChartDrillRequest request = drillRequest.get(i);
+                for (ChartDimensionDTO dto : request.getDimensionList()) {
+                    ChartViewFieldDTO chartViewFieldDTO = drill.get(i);
+                    // 将钻取值作为条件传递，将所有钻取字段作为xAxis并加上下一个钻取字段
+                    if (StringUtils.equalsIgnoreCase(dto.getId(), chartViewFieldDTO.getId())) {
+                        isDrill = true;
+                        DatasetTableField datasetTableField = dataSetTableFieldsService.get(dto.getId());
+                        ChartViewFieldDTO d = new ChartViewFieldDTO();
+                        BeanUtils.copyBean(d, datasetTableField);
+
+                        ChartExtFilterRequest drillFilter = new ChartExtFilterRequest();
+                        drillFilter.setFieldId(dto.getId());
+                        drillFilter.setValue(new ArrayList<String>() {{
+                            add(dto.getValue());
+                        }});
+                        drillFilter.setOperator("in");
+                        drillFilter.setDatasetTableField(datasetTableField);
+                        extFilterList.add(drillFilter);
+//                        xAxis.add(d);
+//                        if (i == drillRequest.size() - 1) {
+//                            xAxis.add(drill.get(i + 1));
+//                        }
+                    }
+                }
+            }
+        }
+
         // 获取数据集,需校验权限
         DatasetTable table = dataSetTableService.get(view.getTableId());
         if (ObjectUtils.isEmpty(table)) {
@@ -358,7 +385,9 @@ public class ChartViewService {
                 data = (List<String[]>) cache;
             }*/
             // 仪表板有参数不实用缓存
-            if (CollectionUtils.isNotEmpty(requestList.getFilter()) || CollectionUtils.isNotEmpty(requestList.getLinkageFilters())) {
+            if (CollectionUtils.isNotEmpty(requestList.getFilter())
+                    || CollectionUtils.isNotEmpty(requestList.getLinkageFilters())
+                    || CollectionUtils.isNotEmpty(requestList.getDrill())) {
                 data = datasourceProvider.getData(datasourceRequest);
             } else {
                 try {
@@ -402,6 +431,8 @@ public class ChartViewService {
         BeanUtils.copyBean(dto, view);
         dto.setData(map);
         dto.setSql(datasourceRequest.getQuery());
+
+        dto.setDrill(isDrill);
         return dto;
     }
 

frontend/src/store/index.js

@@ -162,7 +162,6 @@ const data = {
     // 添加联动 下钻 等过滤组件
     addViewTrackFilter(state, data) {
       console.log('联动信息', JSON.stringify(data))
-      debugger
       const viewId = data.viewId
       const trackInfo = state.nowPanelTrackInfo
       for (let index = 0; index < state.componentData.length; index++) {

frontend/src/views/chart/components/ChartComponent.vue

@@ -64,6 +64,7 @@ export default {
       const _store = this.$store
       // 基于准备好的dom，初始化echarts实例
       // 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表板有重复id情况
+      const that = this
       new Promise((resolve) => { resolve() }).then(() => {
         //	此dom为echarts图标展示dom
         this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
@@ -71,8 +72,9 @@ export default {
           this.myChart = this.$echarts.init(document.getElementById(this.chartId))
         }
         this.drawEcharts()
+
+        this.myChart.off('click')
         this.myChart.on('click', function(param) {
-          debugger
           console.log(JSON.stringify(param.data))
           const trackFilter = {
             viewId: viewId,
@@ -80,6 +82,8 @@ export default {
             quotaList: param.data.quotaList
           }
           _store.commit('addViewTrackFilter', trackFilter)
+
+          that.$emit('onChartClick', param)
         })
       })
     },

frontend/src/views/chart/view/ChartEdit.vue

@@ -483,7 +483,7 @@
       <el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
         <el-row style="width: 100%;height: 100%;" class="padding-lr">
           <div ref="imageWrapper" style="height: 100%">
-            <chart-component v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :chart-id="chart.id" :chart="chart" class="chart-class" />
+            <chart-component v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :chart-id="chart.id" :chart="chart" class="chart-class" @onChartClick="chartClick" />
             <table-normal v-if="httpRequest.status && chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
             <label-normal v-if="httpRequest.status && chart.type && chart.type.includes('text')" :chart="chart" class="table-class" />
             <div v-if="!httpRequest.status" class="chart-error-class">
@@ -738,7 +738,8 @@ export default {
       filterItem: {},
       places: [],
       attrActiveNames: [],
-      styleActiveNames: []
+      styleActiveNames: [],
+      drillClickDimensionList: []
     }
   },
   computed: {
@@ -750,6 +751,7 @@ export default {
   },
   watch: {
     'param': function() {
+      this.resetDrill()
       if (this.param.optType === 'new') {
         //
       } else {
@@ -894,6 +896,7 @@ export default {
         // this.get(response.data.id);
         // this.getData(response.data.id)
 
+        this.resetDrill()
         if (getData) {
           this.getData(response.data.id)
         } else {
@@ -983,7 +986,8 @@ export default {
     getData(id) {
       if (id) {
         ajaxGetData(id, {
-          filter: []
+          filter: [],
+          drill: this.drillClickDimensionList
         }).then(response => {
           this.initTableData(response.data.tableId)
           this.view = JSON.parse(JSON.stringify(response.data))
@@ -1003,8 +1007,12 @@ export default {
           if (this.chart.privileges) {
             this.param.privileges = this.chart.privileges
           }
+          if (!response.data.drill) {
+            this.drillClickDimensionList.splice(this.drillClickDimensionList.length - 1, 1)
+          }
         }).catch(err => {
           this.resetView()
+          this.resetDrill()
           this.httpRequest.status = err.response.data.success
           this.httpRequest.msg = err.response.data.message
           this.$nextTick(() => {
@@ -1487,6 +1495,16 @@ export default {
     bubbleItemRemove(item) {
       this.view.extBubble.splice(item.index, 1)
       this.save(true)
+    },
+
+    chartClick(param) {
+      console.log(param)
+      this.drillClickDimensionList.push({ dimensionList: param.data.dimensionList })
+      this.getData(this.param.id)
+    },
+
+    resetDrill() {
+      this.drillClickDimensionList = []
     }
   }
 }