feat(报表统计): #1007217 勾选选择所有数据后翻页，勾选消失；报表优化

#1007217 勾选选择所有数据后翻页，勾选消失；报表优化：柱状图上显示数量和种类，条件搜索的下拉框显示所有下拉选项；保存和另存为时有弹出框来输入名称；动态时间保存的数据再展现时也动态更新结果
2021-10-26 15:22:34 +08:00 · 2021-10-26 15:22:34 +08:00 · 6bfbf5a216
parent 712c0d69c6
commit 6bfbf5a216
9 changed files with 149 additions and 46 deletions
--- a/backend/src/main/java/io/metersphere/reportstatistics/dto/charts/Legend.java
+++ b/backend/src/main/java/io/metersphere/reportstatistics/dto/charts/Legend.java
@ -11,7 +11,7 @@ import java.util.Map;
@Setter
 public class Legend {
    private final String x = "center";
-    private final String y = "bottom";
+    private String y = "bottom";
    private final String type = "scroll";
    private final List<Integer> padding = Arrays.asList(0, 40, 0, 0);
    private Map<String, Boolean> selected;
--- a/backend/src/main/java/io/metersphere/reportstatistics/dto/charts/Series.java
+++ b/backend/src/main/java/io/metersphere/reportstatistics/dto/charts/Series.java
@ -5,6 +5,7 @@ import lombok.Getter;
 import lombok.Setter;

 import java.util.List;
+import java.util.Map;

@Getter
@Setter
@ -18,4 +19,5 @@ public class Series {
    private JSONObject encode;
    private List<String> center;
    private String barWidth = null;
+    private Map<String,Object> label;
 }
--- a/backend/src/main/java/io/metersphere/reportstatistics/service/ReportStatisticsService.java
+++ b/backend/src/main/java/io/metersphere/reportstatistics/service/ReportStatisticsService.java
@ -28,6 +28,7 @@ public class ReportStatisticsService {
    public ReportStatisticsWithBLOBs saveByRequest(ReportStatisticsSaveRequest request) {
        ReportStatisticsWithBLOBs model = new ReportStatisticsWithBLOBs();
        model.setId(UUID.randomUUID().toString());
+
        String name = "用例分析报表";
        if(StringUtils.equalsIgnoreCase(ReportStatisticsType.TEST_CASE_COUNT.name(),request.getReportType())){
            name = "用例统计报表";
@ -35,7 +36,10 @@ public class ReportStatisticsService {
        }else {
            model.setReportType(ReportStatisticsType.TEST_CASE_ANALYSIS.name());
        }
-        model.setName(name);
+        if(StringUtils.isEmpty(request.getName())){
+            request.setName(name);
+        }
+        model.setName(request.getName());
        model.setDataOption(request.getDataOption());
        model.setSelectOption(request.getSelectOption());
        model.setCreateTime(System.currentTimeMillis());
--- a/backend/src/main/java/io/metersphere/reportstatistics/service/TestCaseCountService.java
+++ b/backend/src/main/java/io/metersphere/reportstatistics/service/TestCaseCountService.java
@ -547,7 +547,7 @@ public class TestCaseCountService {
        List<User> userList = userService.getUserList();
        Map<String, String> userIdMap = new HashMap<>();
        for (User model : userList) {
-            userIdMap.put(model.getId(), model.getId() + "\n(" + model.getName() + ")");
+            userIdMap.put(model.getId(), model.getName() + "\n(" + model.getId() + ")");
        }
        return userIdMap;
    }
@ -608,6 +608,11 @@ public class TestCaseCountService {

        Map<String, String> caseDescMap = this.getCaseDescMap();

+        //柱状图上显示数字
+        Map<String,Object> labelMap = new HashMap<>();
+        labelMap.put("show",true);
+        labelMap.put("position","inside");
+
        Series tetcaseSeries = new Series();
        tetcaseSeries.setName(caseDescMap.get("testCaseDesc"));
        tetcaseSeries.setColor("#F38F1F");
@ -616,6 +621,7 @@ public class TestCaseCountService {
        tetcaseSeries.setStack("total");
        tetcaseSeries.setData(testCaseCountList);
        tetcaseSeries.setBarWidth("50");
+        tetcaseSeries.setLabel(labelMap);
        seriesList.add(tetcaseSeries);

        Series apiSeries = new Series();
@ -624,6 +630,7 @@ public class TestCaseCountService {
        apiSeries.setType("bar");
        apiSeries.setStack("total");
        apiSeries.setData(apiCaseCountList);
+        apiSeries.setLabel(labelMap);
        seriesList.add(apiSeries);

        Series scenarioSeries = new Series();
@ -632,6 +639,7 @@ public class TestCaseCountService {
        scenarioSeries.setType("bar");
        scenarioSeries.setStack("total");
        scenarioSeries.setData(scenarioCaseCountList);
+        scenarioSeries.setLabel(labelMap);
        seriesList.add(scenarioSeries);

        Series loadSeries = new Series();
@ -640,11 +648,16 @@ public class TestCaseCountService {
        loadSeries.setType("bar");
        loadSeries.setStack("total");
        loadSeries.setData(loadCaseCountList);
+        loadSeries.setLabel(labelMap);
        seriesList.add(loadSeries);

        dto.setXAxis(xAxis);
        dto.setYAxis(new YAxis());
        dto.setSeries(seriesList);
+
+        Legend legend = new Legend();
+        legend.setY("top");
+        dto.setLegend(legend);
    }

    private void formatLegend(Legend legend, List<String> datas, TestCaseCountRequest yrequest) {
@ -682,7 +695,7 @@ public class TestCaseCountService {
        for (User user : userList) {
            Map<String, String> map = new HashMap<>();
            map.put("id", user.getId());
-            map.put("label", user.getId() + "(" + user.getName() + ")");
+            map.put("label", user.getName() + "(" + user.getId() + ")");
            returnUserList.add(map);
        }

--- a/frontend/src/business/components/common/components/table/MsTable.vue
+++ b/frontend/src/business/components/common/components/table/MsTable.vue
@ -407,8 +407,10 @@ export default {
    clearSelectRows() {
      this.selectRows.clear();
      this.selectIds = [];
-      this.condition.selectAll = false;
-      this.condition.unSelectIds = [];
+      if(!this.condition.selectAll){
+        this.condition.selectAll = false;
+        this.condition.unSelectIds = [];
+      }
      this.selectDataCounts = 0;
      if (this.$refs.table) {
        this.$refs.table.clearSelection();
--- a/frontend/src/business/components/reportstatistics/ReportAnalysis.vue
+++ b/frontend/src/business/components/reportstatistics/ReportAnalysis.vue
@ -18,7 +18,7 @@
    <ms-drawer :visible="testCaseTrendDrawer" :size="100" @close="close" direction="right" :show-full-screen="false" :is-show-close="false" style="overflow: hidden">
      <template v-slot:header>
        <report-header :title="$t('commons.report_statistics.test_case_analysis')" :history-report-id="historyReportId"
-                       @closePage="close" @saveReport="saveReport" @selectAndSaveReport="selectAndSaveReport"/>
+                       @closePage="close" @saveReport="openSaveReportDialog('save')" @selectAndSaveReport="openSaveReportDialog('saveAs')"/>
      </template>
      <test-analysis-container @initHistoryReportId="initHistoryReportId" ref="testAnalysisContainer"/>
    </ms-drawer>
@ -27,10 +27,26 @@
    <ms-drawer :visible="testCaseCountDrawer" :size="100" @close="close" direction="right" :show-full-screen="false" :is-show-close="false" style="overflow: hidden">
      <template v-slot:header>
        <report-header :title="$t('commons.report_statistics.test_case_count')" :history-report-id="historyReportId"
-                       @closePage="close" @saveReport="saveReport" @selectAndSaveReport="selectAndSaveReport"/>
+                       @closePage="close" @saveReport="openSaveReportDialog('save')" @selectAndSaveReport="openSaveReportDialog('saveAs')"/>
      </template>
      <test-case-count-container @initHistoryReportId="initHistoryReportId" ref="testCaseCountContainer"/>
    </ms-drawer>
+
+    <el-dialog
+      :title="$t('commons.save')"
+      :visible.sync="dialogFormVisible"
+      width="30%"
+      :before-close="handleCloseSaveReportDialog">
+
+      <el-form :model="form" :rules="saveReportRules" ref="saveReportRuleForm">
+        <el-form-item :label="$t('commons.input_name')" prop="reportName" label-width="120px">
+          <el-input v-model="form.reportName" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveReport">{{$t('commons.confirm')}}</el-button>
+      </div>
+    </el-dialog>
  </div>
 </template>

@ -51,6 +67,17 @@
        testCaseCountDrawer: false,
        historyReportId:"",
        reportTypes: [{id: 'track', name: this.$t('test_track.test_track')}],
+        dialogFormVisible: false,
+        form: {
+          reportName: "",
+          saveType: "",
+        },
+        saveReportRules: {
+          reportName: [
+            { required: true, message: this.$t('commons.input_name'), trigger: 'blur' },
+            { min: 1, max: 20, message: '长度不大于20个字符', trigger: 'blur' }
+          ],
+        }
      }
    },
    methods: {
@ -65,23 +92,34 @@
        this.testCaseTrendDrawer = false;
        this.testCaseCountDrawer = false;
      },
-      saveReport(){
-        if(this.testCaseTrendDrawer){
-          this.$refs.testAnalysisContainer.saveReport();
-        }else if(this.testCaseCountDrawer){
-          this.$refs.testCaseCountContainer.saveReport();
-        }
+      openSaveReportDialog(saveType){
+        this.form.saveType = saveType;
+        this.dialogFormVisible = true;
      },
-      selectAndSaveReport(){
-        if(this.testCaseTrendDrawer){
-          this.$refs.testAnalysisContainer.selectAndSaveReport();
-        }else if(this.testCaseCountDrawer){
-          this.$refs.testCaseCountContainer.selectAndSaveReport();
-        }
+      saveReport(){
+        this.$refs['saveReportRuleForm'].validate((valid) => {
+          if (valid) {
+            if(this.testCaseTrendDrawer){
+              this.$refs.testAnalysisContainer.saveAndSaveAsReport(this.form.reportName,this.form.saveType);
+            }else if(this.testCaseCountDrawer){
+              this.$refs.testCaseCountContainer.saveAndSaveAsReport(this.form.reportName,this.form.saveType);
+            }
+            this.form.reportName = "";
+            this.form.saveType = "";
+            this.dialogFormVisible = false;
+          } else {
+            return false;
+          }
+        });
      },
      initHistoryReportId(reportId){
        this.historyReportId = reportId;
      },
+      handleCloseSaveReportDialog(){
+        this.form.reportName = "";
+        this.form.saveType = "";
+        this.dialogFormVisible = false;
+      }
    },
  }
 </script>
--- a/frontend/src/business/components/reportstatistics/testCaseCount/TestCaseCountContainer.vue
+++ b/frontend/src/business/components/reportstatistics/testCaseCount/TestCaseCountContainer.vue
@ -1,9 +1,8 @@
 <template>
  <div>

-    <el-container v-loading="loading" id="reportAnalysis" style="overflow: scroll">
-      <el-container class="ms-row">
-        <el-aside  v-if="!isHide" :width="!isHide ?'235px':'0px'" :style="{ 'max-height': h-50 + 'px', 'margin-left': '5px'}" >
+    <el-container v-loading="loading" id="reportAnalysis" :style="{ 'max-height': (h-50) + 'px', 'overflow': 'auto'}" >
+        <el-aside  v-if="!isHide" :width="!isHide ?'235px':'0px'" :style="{  'margin-left': '5px'}" >
          <history-report-data report-type="TEST_CASE_COUNT"
                               @selectReport="selectReport" @removeHistoryReportId="removeHistoryReportId"
                               ref="historyReport"/>
@ -20,7 +19,6 @@
        <el-aside  v-if="!isHide" style="height: 100%" :width="!isHide ?'485px':'0px'">
          <test-case-count-filter @filterCharts="filterCharts" ref="countFilter"/>
        </el-aside>
-      </el-container>
    </el-container>
  </div>
 </template>
@ -137,8 +135,9 @@ export default {
      this.options.order = order;
      this.filterCharts(this.options);
    },
-    saveReport() {
+    saveReport(reportName) {
      let obj = {};
+      obj.name = reportName;
      obj.projectId = getCurrentProjectID();
      obj.selectOption = JSON.stringify(this.options);
      let dataOptionObj = {
@ -197,10 +196,17 @@ export default {
        return "";
      }
    },
-    selectAndSaveReport(){
+    selectAndSaveReport(reportName){
      let opt = this.$refs.countFilter.getOption();
      this.options = opt;
-      this.saveReport();
+      this.saveReport(reportName);
+    },
+    saveAndSaveAsReport(reportName,saveType){
+      if(saveType === 'save'){
+        this.saveReport(reportName);
+      }else if(saveType === 'saveAs'){
+        this.selectAndSaveReport(reportName);
+      }
    }
  },
 };
--- a/frontend/src/business/components/reportstatistics/testCaseCount/filter/TestCaseCountFilter.vue
+++ b/frontend/src/business/components/reportstatistics/testCaseCount/filter/TestCaseCountFilter.vue
@ -1,6 +1,7 @@
 <template>
  <div v-loading="loading">
-    <el-card :style="{height: h + 'px'}" class="ms-card">
+<!--    <el-card :style="{height: h + 'px'}" class="ms-card">-->
+    <el-card class="ms-card">
      <el-row style="padding-top: 10px">
        <p class="tip"><span style="margin-left: 5px"></span> {{ $t('commons.report_statistics.options') }}</p>
      </el-row>
@ -54,26 +55,26 @@
            <el-container>
              <el-aside width="73px" style="overflow: hidden">
                <div v-if="option.filters.length > 1" style="height: 100%" id="moreOptionTypeDiv">
-                  <div class="top-line-box" :style="{ height:lineDivHeight+'px'}">
+                  <div class="top-line-box" :style="{ height:lineDivTopHeight+'px',marginTop:lineDivMarginTopHeight+'px'}">
                  </div>
                  <div>
                    <el-select class="ms-http-select" size="small" v-model="option.filterType" style="width: 70px">
                      <el-option v-for="item in filterTypes" :key="item.id" :label="item.label" :value="item.id"/>
                    </el-select>
                  </div>
-                  <div class="bottom-line-box" :style="{ height:lineDivHeight+'px'}">
+                  <div class="bottom-line-box" :style="{ height:lineDivBottomHeight+'px'}">
                  </div>
                </div>
              </el-aside>
              <el-main  v-if="optionLoad" style="padding: 0px">
                <el-row v-for="filterItem in option.filters" :key="filterItem.id" style="margin-bottom: 5px">
-                  <el-col :span="24">
+                  <el-col :span="24" name="itemOptions">
                    <el-select style="width: 100px" class="ms-http-select" size="small" v-model="filterItem.type">
                      <el-option v-for="item in getFilterOptionKey(filterItem.type)" :key="item.type" :label="item.name" :value="item.type"/>
                    </el-select>
                    <span style="margin-left:10px;margin-right:10px">{{ $t('commons.report_statistics.report_filter.belone') }}</span>

-                    <el-select style="width:173px" :collapse-tags="true" class="ms-http-select" size="small" multiple filterable v-model="filterItem.values" v-if="getFilterOptions(filterItem.type).length > 0">
+                    <el-select style="width:173px" class="ms-http-select" size="small" multiple filterable v-model="filterItem.values" v-if="getFilterOptions(filterItem.type).length > 0">
                      <el-option v-for="itemOption in getFilterOptions(filterItem.type)" :key="itemOption.id" :label="itemOption.label" :value="itemOption.id"/>
                    </el-select>
                    <el-input  style="width:173px" v-model="filterItem.value" size="small" v-else ></el-input>
@ -146,7 +147,9 @@ export default {
        ],
      },
      h: document.documentElement.clientHeight + 80,
-      lineDivHeight: 0,
+      lineDivTopHeight: 0,
+      lineDivMarginTopHeight: 0,
+      lineDivBottomHeight: 0,
      disabled: false,
      loading: false,
      optionLoad: true,
@ -237,13 +240,37 @@ export default {
      handler: function () {
        this.$nextTick(() => {
          this.lineDivHeight = 0;
-          // let elem = document.getElementById("moreOptionTypeDiv");
-          if(this.option.filters.length > 1){
-            let countPageHeight = (this.option.filters.length)* 32 + (this.option.filters.length-1)*5;
-            if(countPageHeight > 32){
-              this.lineDivHeight = (countPageHeight-32)/2-11;
-            }
-          }
+          setTimeout(() => {
+            let itemOptions = document.getElementsByName("itemOptions");
+            // let optionTypeDiv = document.getElementById("moreOptionTypeDiv");
+            // if(optionTypeDiv){
+              if(itemOptions && itemOptions.length > 1){
+                let optionTypeHeight = 0;
+                for(let i = 0; i < itemOptions.length; i ++){
+                  let itemHeight = itemOptions[i].offsetHeight;
+                  if(optionTypeHeight != 0){
+                    optionTypeHeight += 5;
+                  }
+                  optionTypeHeight+= itemHeight;
+                }
+                let firstHeight = itemOptions[0].offsetHeight;
+                let endHeight = itemOptions[itemOptions.length-1].offsetHeight;
+                this.lineDivMarginTopHeight = ((firstHeight-32)/2+16);
+                this.lineDivTopHeight = ((optionTypeHeight/2 - this.lineDivMarginTopHeight-16));
+                let divMarginBottom = ((endHeight-32)/2+16);
+                this.lineDivBottomHeight = ((optionTypeHeight - 32 - this.lineDivTopHeight - this.lineDivMarginTopHeight - divMarginBottom ));
+              }
+            // }
+
+          }, 100);
+          // moreOptionTypeDiv
+          // if(this.option.filters.length > 1){
+          //   let countPageHeight = (this.option.filters.length)* 32 + (this.option.filters.length-1)*5;
+          //   if(countPageHeight > 32){
+          //     this.lineDivHeight = (countPageHeight-32)/2-11;
+          //   }
+          // }
+
        });
      },
      deep: true
@ -254,6 +281,9 @@ export default {
      this.loading = true;
      this.option = opt;
      this.$nextTick(() => {
+        if(this.option.timeType === "dynamicTime"){
+          this.init();
+        }
        this.loading = false;
      });
    },
@ -374,13 +404,13 @@ export default {

 .ms-card {
  width: 480px;
+  overflow: auto;
 }

 .top-line-box{
  border-top: 1px solid;
  border-left: 1px solid;
  margin-left: 32px;
-  margin-top: 10px;
  border-top-left-radius: 10px;
 }

@ -393,9 +423,9 @@ export default {

 /deep/ .el-select__tags-text {
  display: inline-block;
-  max-width: 50px;
+  max-width: 117px;
  overflow: hidden;
  text-overflow:ellipsis;
-  white-space: nowrap;
+  /*white-space: nowrap;*/
 }
 </style>
--- a/frontend/src/business/components/reportstatistics/track/TestAnalysisContainer.vue
+++ b/frontend/src/business/components/reportstatistics/track/TestAnalysisContainer.vue
@ -86,8 +86,9 @@
        this.options.order = order;
        this.filterCharts(this.options);
      },
-      saveReport() {
+      saveReport(reportName) {
        let obj = {};
+        obj.name = reportName;
        obj.projectId = getCurrentProjectID();
        obj.selectOption = JSON.stringify(this.options);
        let dataOptionObj = {
@ -148,10 +149,17 @@
      removeHistoryReportId(){
        this.$emit('initHistoryReportId',"");
      },
-      selectAndSaveReport(){
+      selectAndSaveReport(reportName){
        let opt = this.$refs.analysisFilter.getOption();
        this.options = opt;
-        this.saveReport();
+        this.saveReport(reportName);
+      },
+      saveAndSaveAsReport(reportName,saveType){
+        if(saveType === 'save'){
+          this.saveReport(reportName);
+        }else if(saveType === 'saveAs'){
+          this.selectAndSaveReport(reportName);
+        }
      }
    },
  }