fix(报表统计): 修复已保存过的报表点击会报错的缺陷

修复已保存过的报表点击会报错的缺陷

backend/src/main/java/io/metersphere/reportstatistics/service/ReportStatisticsService.java

@@ -78,6 +78,9 @@ public class ReportStatisticsService {
         return blob;
     }
     private TestCaseCountTableDataDTO countShowTable(String groupName, List<String> yaxis, List<TestCaseCountTableDTO> dtos) {
+        if(yaxis == null){
+            yaxis = new ArrayList<>();
+        }
         TestCaseCountTableDataDTO returnDTO = new TestCaseCountTableDataDTO();
         String [] headers = new String[]{groupName,"总计","testCase","apiCase","scenarioCase","loadCaseCount"};
 
@@ -86,6 +89,7 @@ public class ReportStatisticsService {
         boolean showApi = true;
         boolean showScenario = true;
         boolean showLoad = true;
+
         for (String head : headers) {
             if(StringUtils.equalsAnyIgnoreCase(head,groupName,"总计") || yaxis.contains(head)){
                 TestCaseCountTableItemDataDTO headData = new TestCaseCountTableItemDataDTO();

frontend/src/business/components/reportstatistics/projectstatistics/casecount/TestCaseCountContainer.vue

@@ -9,11 +9,13 @@
       </el-aside>
       <el-main class="ms-main" style="padding: 0px 5px 0px">
         <div>
-            <test-case-count-chart @hidePage="hidePage" @orderCharts="orderCharts" ref="analysisChart"
+          <test-case-count-chart @hidePage="hidePage" @orderCharts="orderCharts"
+                                 ref="analysisChart" @updateChartType="updateChartType"
                                  :chart-width="chartWidth" :load-option="loadOption" :pie-option="pieOption"/>
         </div>
         <div class="ms-row" v-if="!isHide">
-            <test-case-count-table :group-name="getGroupNameStr(options.xaxis)" :show-coloums="options.yaxis" :tableData="tableData"/>
+          <test-case-count-table :group-name="getGroupNameStr(options.xaxis)" :show-coloums="options.yaxis"
+                                 :tableData="tableData"/>
         </div>
       </el-main>
       <el-aside v-if="!isHide" style="height: 100%" :width="!isHide ?'485px':'0px'">
@@ -25,7 +27,8 @@
 
 <script>
 import TestCaseCountChart from "./chart/TestCaseCountChart";
-import TestCaseCountTable from "@/business/components/reportstatistics/projectstatistics/casecount/table/TestCaseCountTable";
+import TestCaseCountTable
+  from "@/business/components/reportstatistics/projectstatistics/casecount/table/TestCaseCountTable";
 import TestCaseCountFilter from "./filter/TestCaseCountFilter";
 import {exportPdf, getCurrentProjectID} from "@/common/js/utils";
 import html2canvas from 'html2canvas';
@@ -41,6 +44,7 @@ export default {
       options: {},
       chartWidth: 0,
       tableHeight: 300,
+      chartType: "bar",
       loadOption: {
         legend: {},
         xAxis: {},
@@ -62,6 +66,9 @@ export default {
     };
   },
   methods: {
+    updateChartType(value) {
+      this.chartType = value;
+    },
     handleExport() {
       let name = this.$t('commons.report_statistics.test_case_analysis');
       this.$nextTick(function () {
@@ -88,7 +95,6 @@ export default {
         let pieData = response.data.pieChartDTO;
         let selectTableData = response.data.tableDTOs;
         this.initPic(data, pieData, selectTableData);
-
       }, error => {
         this.loading = false;
       });
@@ -126,7 +132,7 @@ export default {
         this.tableData = selectTableData;
       }
       this.loading = false;
-      this.$refs.analysisChart.reload();
+      this.$refs.analysisChart.generateOption(this.chartType);
     },
     filterCharts(opt) {
       this.init(opt);
@@ -144,6 +150,7 @@ export default {
         loadOption: this.loadOption,
         pieOption: this.pieOption,
         tableData: this.tableData,
+        chartType: this.chartType,
       };
       obj.dataOption = JSON.stringify(dataOptionObj);
       obj.reportType = 'TEST_CASE_COUNT';
@@ -163,13 +170,17 @@ export default {
           if (reportData) {
             if (reportData.dataOption) {
               let dataOptionObj = JSON.parse(reportData.dataOption);
+              if (dataOptionObj.chartType) {
+                this.chartType = dataOptionObj.chartType;
+              }else {
+                this.chartType = "bar";
+              }
               this.initPic(dataOptionObj.loadOption, dataOptionObj.pieOption, dataOptionObj.tableData);
             }
             if (reportData.selectOption) {
               let selectOptionObj = JSON.parse(reportData.selectOption);
               this.$refs.countFilter.initSelectOption(selectOptionObj);
             }
-
             this.loading = false;
           }
         }, (error) => {

frontend/src/business/components/reportstatistics/projectstatistics/casecount/chart/TestCaseCountChart.vue

@@ -22,12 +22,16 @@
             <el-option :key="t.id" :value="t.id" :label="t.name" v-for="t in orders"/>
           </el-select>
           <span style="margin: 0px 10px 10px">|</span>
-          <font-awesome-icon v-if="!isFullScreen && showFullScreen" class="report-alt-ico" :icon="['fa', 'expand-alt']" size="lg" @click="fullScreen"/>
-          <font-awesome-icon v-if="isFullScreen && showFullScreen" class="report-alt-ico" :icon="['fa', 'compress-alt']" size="lg" @click="unFullScreen"/>
+          <font-awesome-icon v-if="!isFullScreen && showFullScreen" class="report-alt-ico" :icon="['fa', 'expand-alt']"
+                             size="lg" @click="fullScreen"/>
+          <font-awesome-icon v-if="isFullScreen && showFullScreen" class="report-alt-ico" :icon="['fa', 'compress-alt']"
+                             size="lg" @click="unFullScreen"/>
         </div>
       </el-row>
       <el-row style="overflow: auto">
-        <ms-chart ref="chart1" v-if="!loading" :options="dataOption" :style="{width: chartWidthNumber+'px', height: (h-50) + 'px'}" class="chart-config" :autoresize="true" id="picChart"/>
+        <ms-chart ref="chart1" v-if="!loading" :options="dataOption"
+                  :style="{width: chartWidthNumber+'px', height: (h-50) + 'px'}" class="chart-config" :autoresize="true"
+                  id="picChart"/>
       </el-row>
     </el-card>
   </div>
@@ -64,89 +68,22 @@
           return true;
         }
       },
-        // 头部部分
-        chartType: "bar",
       charts: [
         {id: 'bar', name: this.$t('commons.report_statistics.bar')},
         {id: 'pie', name: this.$t('commons.report_statistics.pie')}
       ],
       order: "",
-        orders: [{id: '', name: '默认排序'},{id: 'desc', name: this.$t('commons.report_statistics.desc')}, {id: 'asc', name: this.$t('commons.report_statistics.asc')}],
+      orders: [{id: '', name: '默认排序'}, {id: 'desc', name: this.$t('commons.report_statistics.desc')}, {
+        id: 'asc',
+        name: this.$t('commons.report_statistics.asc')
+      }],
       loading: false,
       options: {},
-        pieItemOption:{
-          dataset: [{
-            source: [
-              ['Product', 'Sales', 'Price', 'Year'],
-              ['Cake', 123, 32, 2011],
-              ['Cereal', 231, 14, 2011],
-              ['Tofu', 235, 5, 2011],
-              ['Dumpling', 341, 25, 2011],
-              ['Biscuit', 122, 29, 2011],
-              ['Cake', 143, 30, 2012],
-              ['Cereal', 201, 19, 2012],
-              ['Tofu', 255, 7, 2012],
-              ['Dumpling', 241, 27, 2012],
-              ['Biscuit', 102, 34, 2012],
-              ['Cake', 153, 28, 2013],
-              ['Cereal', 181, 21, 2013],
-              ['Tofu', 395, 4, 2013],
-              ['Dumpling', 281, 31, 2013],
-              ['Biscuit', 92, 39, 2013],
-              ['Cake', 223, 29, 2014],
-              ['Cereal', 211, 17, 2014],
-              ['Tofu', 345, 3, 2014],
-              ['Dumpling', 211, 35, 2014],
-              ['Biscuit', 72, 24, 2014],
-            ],
-          }, {
-            transform: {
-              type: 'filter',
-              config: { dimension: 'Year', value: 2011 }
-            },
-          }, {
-            transform: {
-              type: 'filter',
-              config: { dimension: 'Year', value: 2012 }
-            }
-          }, {
-            transform: {
-              type: 'filter',
-              config: { dimension: 'Year', value: 2013 }
-            }
-          }],
-          series: [{
-            type: 'pie', radius: 50, center: ['50%', '25%'],
-            datasetIndex: 1
-          }, {
-            type: 'pie', radius: 50, center: ['50%', '50%'],
-            datasetIndex: 2
-          }, {
-            type: 'pie', radius: 50, center: ['50%', '75%'],
-            datasetIndex: 3
-          }],
-          media: [{
-            query: { minAspectRatio: 1 },
-            option: {
-              series: [
-                { center: ['25%', '50%'] },
-                { center: ['50%', '50%'] },
-                { center: ['75%', '50%'] }
-              ]
-            }
-          }, {
-            option: {
-              series: [
-                { center: ['50%', '25%'] },
-                { center: ['50%', '50%'] },
-                { center: ['50%', '75%'] }
-              ]
-            }
-          }]
-        },
+      chartType: "bar",
     }
   },
   created() {
+    this.selectedPicType = this.chartType;
     this.dataOption = this.loadOption;
     if (this.needFullScreen) {
       this.w = document.documentElement.clientWidth;
@@ -158,6 +95,7 @@
       this.countChartWidth();
     },
     chartType() {
+      this.$emit("updateChartType",this.chartType);
       this.countChartWidth();
     },
   },
@@ -172,7 +110,10 @@
     orderCharts() {
       this.$emit('orderCharts', this.order);
     },
-      generateOption() {
+    generateOption(chartTypeParam) {
+      if(chartTypeParam){
+        this.chartType = chartTypeParam;
+      }
       if (this.chartType === 'pie') {
         this.dataOption = this.pieOption;
       } else {