Merge pull request #3104 from dataease/pr@dev@feat_stack_custom_sort

feat(视图): 堆叠项支持自定义排序

backend/src/main/java/io/dataease/controller/chart/ChartViewController.java

@@ -166,10 +166,10 @@ public class ChartViewController {
 
     @ApiIgnore
     @ApiOperation("获取字段值")
-    @PostMapping("/getFieldData/{id}/{panelId}/{fieldId}")
-    public List<String> getFieldData(@PathVariable String id, @PathVariable String panelId, @PathVariable String fieldId,
+    @PostMapping("/getFieldData/{id}/{panelId}/{fieldId}/{fieldType}")
+    public List<String> getFieldData(@PathVariable String id, @PathVariable String panelId, @PathVariable String fieldId, @PathVariable String fieldType,
                                      @RequestBody ChartExtRequest requestList) throws Exception {
-        return chartViewService.getFieldData(id, requestList, false, fieldId);
+        return chartViewService.getFieldData(id, requestList, false, fieldId, fieldType);
     }
 
     @ApiIgnore

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

@@ -966,7 +966,14 @@ public class ChartViewService {
             }
         }
         // 自定义排序
+        if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
+            List<ChartViewFieldDTO> list = new ArrayList<>();
+            list.addAll(xAxis);
+            list.addAll(extStack);
+            data = resultCustomSort(list, data);
+        } else {
             data = resultCustomSort(xAxis, data);
+        }
         // 同比/环比计算，通过对比类型和数据设置，计算出对应指标的结果，然后替换结果data数组中的对应元素
         // 如果因维度变化（如时间字段缺失，时间字段的展示格式变化）导致无法计算结果的，则结果data数组中的对应元素全置为null
         // 根据不同图表类型，获得需要替换的指标index array
@@ -1485,21 +1492,27 @@ public class ChartViewService {
         extChartViewMapper.initPanelChartViewCache(panelId);
     }
 
-    public List<String> getFieldData(String id, ChartExtRequest requestList, boolean cache, String fieldId) throws Exception {
+    public List<String> getFieldData(String id, ChartExtRequest requestList, boolean cache, String fieldId, String fieldType) throws Exception {
         ChartViewDTO view = getOne(id, requestList.getQueryFrom());
         List<String[]> sqlData = sqlData(view, requestList, cache, fieldId);
-        List<ChartViewFieldDTO> xAxis = gson.fromJson(view.getXAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
+        List<ChartViewFieldDTO> fieldList = new ArrayList<>();
+        if (StringUtils.equalsIgnoreCase(fieldType, "xAxis")) {
+            fieldList = gson.fromJson(view.getXAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
             }.getType());
+        } else if (StringUtils.equalsIgnoreCase(fieldType, "extStack")) {
+            fieldList = gson.fromJson(view.getExtStack(), new TypeToken<List<ChartViewFieldDTO>>() {
+            }.getType());
+        }
         DatasetTableField field = dataSetTableFieldsService.get(fieldId);
 
         List<String> res = new ArrayList<>();
-        if (ObjectUtils.isNotEmpty(field) && xAxis.size() > 0) {
+        if (ObjectUtils.isNotEmpty(field) && fieldList.size() > 0) {
             // 找到对应维度
             ChartViewFieldDTO chartViewFieldDTO = null;
             int index = 0;
             int getIndex = 0;
-            for (int i = 0; i < xAxis.size(); i++) {
-                ChartViewFieldDTO item = xAxis.get(i);
+            for (int i = 0; i < fieldList.size(); i++) {
+                ChartViewFieldDTO item = fieldList.get(i);
                 if (StringUtils.equalsIgnoreCase(item.getSort(), "custom_sort")) {// 此处与已有的自定义字段对比
                     chartViewFieldDTO = item;
                     index = i;
@@ -1508,7 +1521,7 @@ public class ChartViewService {
                     getIndex = i;
                 }
             }
-            List<String[]> sortResult = resultCustomSort(xAxis, sqlData);
+            List<String[]> sortResult = resultCustomSort(fieldList, sqlData);
             if (ObjectUtils.isNotEmpty(chartViewFieldDTO) && (getIndex >= index)) {
                 // 获取自定义值与data对应列的结果
                 List<String[]> strings = customSort(Optional.ofNullable(chartViewFieldDTO.getCustomSort()).orElse(new ArrayList<>()), sortResult, index);

frontend/src/views/chart/components/compare/CustomSortEdit.vue

@@ -33,6 +33,10 @@ export default {
     field: {
       type: Object,
       required: true
+    },
+    fieldType: {
+      type: String,
+      required: true
     }
   },
   data() {
@@ -55,7 +59,7 @@ export default {
   },
   methods: {
     init() {
-      post('/chart/view/getFieldData/' + this.chart.id + '/' + this.panelInfo.id + '/' + this.field.id, {}).then(response => {
+      post('/chart/view/getFieldData/' + this.chart.id + '/' + this.panelInfo.id + '/' + this.field.id + '/' + this.fieldType, {}).then(response => {
         this.sortList = response.data
       })
     },

frontend/src/views/chart/components/drag-item/ChartDragItem.vue

@@ -94,6 +94,7 @@
                 <el-dropdown-item :command="beforeSort('none')">{{ $t('chart.none') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeSort('asc')">{{ $t('chart.asc') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeSort('desc')">{{ $t('chart.desc') }}</el-dropdown-item>
+                <el-dropdown-item v-show="!item.chartId && (item.deType === 0 || item.deType === 5)" :command="beforeSort('custom_sort')">{{ $t('chart.custom_sort') }}...</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
@@ -181,8 +182,18 @@ export default {
       }
     },
     sort(param) {
+      if (param.type === 'custom_sort') {
+        const item = {
+          index: this.index,
+          sort: param.type
+        }
+        this.$emit('onItemCustomSort', item)
+      } else {
+        this.item.index = this.index
         this.item.sort = param.type
+        this.item.customSort = []
         this.$emit('onItemChange', this.item)
+      }
     },
     beforeSort(type) {
       return {

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

@@ -603,6 +603,7 @@
                             :quota-data="quota"
                             @onItemChange="stackItemChange"
                             @onItemRemove="stackItemRemove"
+                            @onItemCustomSort="stackItemCustomSort"
                           />
                         </transition-group>
                       </draggable>
@@ -1074,7 +1075,7 @@
       </div>
     </el-dialog>
 
-    <!--自定义排序-->
+    <!--xAxis自定义排序-->
     <el-dialog
       v-if="showCustomSort"
       v-dialogDrag
@@ -1084,13 +1085,30 @@
       width="500px"
       class="dialog-css"
     >
-      <custom-sort-edit :chart="chart" :field="customSortField" @onSortChange="customSortChange" />
+      <custom-sort-edit :chart="chart" field-type="xAxis" :field="customSortField" @onSortChange="customSortChange" />
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeCustomSort">{{ $t('chart.cancel') }}</el-button>
         <el-button type="primary" size="mini" @click="saveCustomSort">{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
 
+    <!--extStack自定义排序-->
+    <el-dialog
+      v-if="showStackCustomSort"
+      v-dialogDrag
+      :title="$t('chart.custom_sort')"
+      :visible="showStackCustomSort"
+      :show-close="false"
+      width="500px"
+      class="dialog-css"
+    >
+      <custom-sort-edit :chart="chart" field-type="extStack" :field="customSortField" @onSortChange="customSortChange" />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeStackCustomSort">{{ $t('chart.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="saveStackCustomSort">{{ $t('chart.confirm') }}</el-button>
+      </div>
+    </el-dialog>
+
     <!--视图计算字段弹框-->
     <el-dialog
       v-if="editChartCalcField"
@@ -1332,7 +1350,8 @@ export default {
       editChartCalcField: false,
       fieldShow: false,
       tabActive: 'data',
-      currentAreaCode: ''
+      currentAreaCode: '',
+      showStackCustomSort: false
 
     }
   },
@@ -1573,9 +1592,7 @@ export default {
         this.view.resultCount = '1000'
       }
       if (switchType) {
-        this.view.senior.threshold = {
-          tableThreshold: []
-        }
+        this.view.senior.threshold = {}
       }
       if (switchType && (this.view.type === 'table-info' || this.chart.type === 'table-info') && this.view.xaxis.length > 0) {
         this.$message({
@@ -2440,6 +2457,11 @@ export default {
       this.view.extStack.splice(item.index, 1)
       this.calcData(true)
     },
+    stackItemCustomSort(item) {
+      this.customSortField = this.view.extStack[item.index]
+      this.stackCustomSort()
+    },
+
     drillItemChange(item) {
       this.calcData(true)
     },
@@ -2692,11 +2714,6 @@ export default {
     },
     saveCustomSort() {
       this.view.xaxis.forEach(ele => {
-        // 先将所有自定义排序的维度设置为none，再对当前维度赋值
-        // if (ele.sort === 'custom_sort') {
-        //   ele.sort = 'none'
-        //   ele.customSort = []
-        // }
         if (ele.id === this.customSortField.id) {
           ele.sort = 'custom_sort'
           ele.customSort = this.customSortList
@@ -2706,6 +2723,23 @@ export default {
       this.calcData(true)
     },
 
+    stackCustomSort() {
+      this.showStackCustomSort = true
+    },
+    closeStackCustomSort() {
+      this.showStackCustomSort = false
+    },
+    saveStackCustomSort() {
+      this.view.extStack.forEach(ele => {
+        if (ele.id === this.customSortField.id) {
+          ele.sort = 'custom_sort'
+          ele.customSort = this.customSortList
+        }
+      })
+      this.closeStackCustomSort()
+      this.calcData(true)
+    },
+
     fieldEdit(param) {
       switch (param.type) {
         case 'ds':