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

feat(视图): 堆叠项支持自定义排序
2025-02-25 03:52:59 +08:00 · 2022-09-19 17:05:55 +08:00 · 2022-09-19 17:05:55 +08:00 · 433a879bb5
commit 433a879bb5
parent 633f04e604 f885bcd4e2
5 changed files with 89 additions and 27 deletions
--- a/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java
+++ b/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java
@ -166,17 +166,17 @@ 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
    @ApiOperation("更新视图属性")
    @PostMapping("/viewPropsSave/{panelId}")
-    public void  viewPropsSave(@PathVariable String panelId, @RequestBody ChartViewWithBLOBs chartViewWithBLOBs) {
-         chartViewService.viewPropsSave(chartViewWithBLOBs);
+    public void viewPropsSave(@PathVariable String panelId, @RequestBody ChartViewWithBLOBs chartViewWithBLOBs) {
+        chartViewService.viewPropsSave(chartViewWithBLOBs);
    }

    @ApiOperation("查询仪表板下视图选项")
--- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
@ -966,7 +966,14 @@ public class ChartViewService {
            }
        }
        // 自定义排序
-        data = resultCustomSort(xAxis, data);
+        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>>() {
-        }.getType());
+        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);
--- a/frontend/src/views/chart/components/compare/CustomSortEdit.vue
+++ b/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
      })
    },
--- a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
+++ b/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) {
-      this.item.sort = param.type
-      this.$emit('onItemChange', this.item)
+      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 {
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/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':