Merge pull request #590 from dataease/pr@dev@feat_视图上卷

feat: 视图上卷

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

@@ -1,9 +1,11 @@
 package io.dataease.dto.chart;
 
 import io.dataease.base.domain.ChartViewWithBLOBs;
+import io.dataease.controller.request.chart.ChartExtFilterRequest;
 import lombok.Getter;
 import lombok.Setter;
 
+import java.util.List;
 import java.util.Map;
 
 /**
@@ -22,4 +24,6 @@ public class ChartViewDTO extends ChartViewWithBLOBs {
     private String sql;
 
     private boolean drill;
+
+    private List<ChartExtFilterRequest> drillFilters;
 }

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

@@ -256,6 +256,7 @@ public class ChartViewService {
         }
 
         // 下钻
+        List<ChartExtFilterRequest> drillFilters = new ArrayList<>();
         boolean isDrill = false;
         List<ChartDrillRequest> drillRequest = requestList.getDrill();
         if (CollectionUtils.isNotEmpty(drillRequest) && (drill.size() > drillRequest.size())) {
@@ -279,6 +280,8 @@ public class ChartViewService {
                         drillFilter.setDatasetTableField(datasetTableField);
                         extFilterList.add(drillFilter);
 
+                        drillFilters.add(drillFilter);
+
                         if (!checkDrillExist(xAxis, extStack, d, view)) {
                             xAxis.add(d);
                         }
@@ -439,6 +442,7 @@ public class ChartViewService {
         dto.setSql(datasourceRequest.getQuery());
 
         dto.setDrill(isDrill);
+        dto.setDrillFilters(drillFilters);
         return dto;
     }
 

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

@@ -494,6 +494,9 @@
               </div>
             </div>
           </div>
+          <div style="position: absolute;left: 20px;bottom:14px;">
+            <drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
+          </div>
         </el-row>
       </el-col>
     </el-row>
@@ -603,6 +606,7 @@ import ChartDragItem from '../components/drag-item/ChartDragItem'
 import DrillItem from '../components/drag-item/DrillItem'
 import ResultFilterEditor from '../components/filter/ResultFilterEditor'
 import ChartComponent from '../components/ChartComponent'
+import DrillPath from '@/views/chart/view/DrillPath'
 import bus from '@/utils/bus'
 import DatasetChartDetail from '../../dataset/common/DatasetChartDetail'
 // shape attr,component style
@@ -663,7 +667,8 @@ export default {
     DimensionItem,
     draggable,
     ChartDragItem,
-    DrillItem
+    DrillItem,
+    DrillPath
   },
   props: {
     param: {
@@ -739,7 +744,8 @@ export default {
       places: [],
       attrActiveNames: [],
       styleActiveNames: [],
-      drillClickDimensionList: []
+      drillClickDimensionList: [],
+      drillFilters: []
     }
   },
   computed: {
@@ -1017,6 +1023,7 @@ export default {
           if (!response.data.drill) {
             this.drillClickDimensionList.splice(this.drillClickDimensionList.length - 1, 1)
           }
+          this.drillFilters = JSON.parse(JSON.stringify(response.data.drillFilters))
         }).catch(err => {
           this.resetView()
           this.resetDrill()
@@ -1513,6 +1520,10 @@ export default {
 
     resetDrill() {
       this.drillClickDimensionList = []
+    },
+    drillJump(index) {
+      this.drillClickDimensionList = this.drillClickDimensionList.slice(0, index)
+      this.getData(this.param.id)
     }
   }
 }

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

@@ -0,0 +1,47 @@
+<template>
+  <div v-if="drillFilters && drillFilters.length > 0">
+    <el-breadcrumb separator-class="el-icon-arrow-right" class="drill-style">
+      <el-breadcrumb-item class="drill-item" @click.native="drillJump(0)">{{ $t('commons.all') }}</el-breadcrumb-item>
+      <el-breadcrumb-item v-for="(filter,index) in drillFilters" :key="index" class="drill-item" @click.native="drillJump(index + 1)">{{ filter.value[0] }}</el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DrillPath',
+  props: {
+    drillFilters: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  watch: {
+  },
+  mounted() {
+  },
+  methods: {
+    drillJump(index) {
+      if (index < this.drillFilters.length) {
+        this.$emit('onDrillJump', index)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drill-style {
+  font-size: 12px;
+}
+.drill-style >>> .el-breadcrumb__separator{
+  margin: 0!important;
+}
+.drill-item{
+  cursor: pointer;
+}
+</style>