feat(报表统计): 修复报表统计中已创建的图标类型点击保存却另存为的缺陷

--bug=1014761 --user=宋天阳 [ 报表统计]github
#15634报表统计-项目报表，已创建的报表更改图表类型后，点击保存失败，而是变成了另存为
https://www.tapd.cn/55049933/s/1198644

backend/src/main/java/io/metersphere/reportstatistics/controller/HistoryReportController.java

@@ -1,9 +1,7 @@
 package io.metersphere.reportstatistics.controller;
 
-import com.alibaba.fastjson.JSONArray;
 import io.metersphere.base.domain.ReportStatistics;
 import io.metersphere.base.domain.ReportStatisticsWithBLOBs;
-import io.metersphere.commons.utils.LogUtil;
 import io.metersphere.reportstatistics.dto.ReportStatisticsSaveRequest;
 import io.metersphere.reportstatistics.service.ReportStatisticsService;
 import org.springframework.web.bind.annotation.PostMapping;
@@ -32,13 +30,19 @@ public class HistoryReportController {
     }
 
     @PostMapping("/saveReport")
-    public ReportStatisticsWithBLOBs saveReport(@RequestBody ReportStatisticsSaveRequest request){
+    public ReportStatisticsWithBLOBs saveReport(@RequestBody ReportStatisticsSaveRequest request) {
         ReportStatisticsWithBLOBs returnData = reportStatisticsService.saveByRequest(request);
         return returnData;
     }
 
+    @PostMapping("/update")
+    public ReportStatisticsWithBLOBs update(@RequestBody ReportStatisticsSaveRequest request) {
+        ReportStatisticsWithBLOBs returnData = reportStatisticsService.update(request);
+        return returnData;
+    }
+
     @PostMapping("/updateReport")
-    public ReportStatisticsWithBLOBs updateReport(@RequestBody ReportStatisticsSaveRequest request){
+    public ReportStatisticsWithBLOBs updateReport(@RequestBody ReportStatisticsSaveRequest request) {
         ReportStatisticsWithBLOBs returnData = reportStatisticsService.updateByRequest(request);
         return returnData;
     }

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

@@ -65,6 +65,11 @@ public class ReportStatisticsService {
         return model;
     }
 
+    public ReportStatisticsWithBLOBs update(ReportStatisticsSaveRequest request) {
+        reportStatisticsMapper.updateByPrimaryKeySelective(request);
+        return request;
+    }
+
     public int deleteById(String id) {
         return reportStatisticsMapper.deleteByPrimaryKey(id);
     }

frontend/src/business/components/reportstatistics/base/ReportHeader.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="ms-header">
     <el-row>
-      <div class="ms-div">{{title}}</div>
+      <div class="ms-div">{{ title }}</div>
       <div class="ms-header-right">
-        <el-button type="primary" v-if="isSaveAsButtonShow" size="mini" @click="handleSaveAs" :disabled="readOnly">{{ $t('commons.save_as') }}<i class="el-icon-files el-icon--right"></i></el-button>
+        <el-button type="primary" v-if="isSaveAsButtonShow" size="mini" @click="handleSaveAs" :disabled="readOnly">
-        <el-button type="primary" v-if="isSaveButtonShow" size="mini" @click="handleSave" :disabled="readOnly">{{ $t('commons.save') }}<i class="el-icon-files el-icon--right"></i></el-button>
+          {{ $t('commons.save_as') }}<i class="el-icon-files el-icon--right"></i></el-button>
-        <el-button type="" size="mini"  @click="handleExport" :disabled="readOnly">{{ $t('report.export') }}<i class="el-icon-download el-icon--right"></i></el-button>
+        <el-button type="primary" v-if="isSaveButtonShow" size="mini" @click="handleSave" :disabled="readOnly">
+          {{ $t('commons.save') }}<i class="el-icon-files el-icon--right"></i></el-button>
+        <el-button type="" size="mini" @click="handleExport" :disabled="readOnly">{{ $t('report.export') }}<i
+          class="el-icon-download el-icon--right"></i></el-button>
         <span class="ms-span">|</span>
         <i class="el-icon-close report-alt-ico" @click="close"/>
       </div>
@@ -15,101 +18,105 @@
 
 <script>
 import {exportPdf, hasPermission} from "@/common/js/utils";
-  import html2canvas from 'html2canvas';
+import html2canvas from 'html2canvas';
 
-  export default {
+export default {
-    name: "ReportHeader",
+  name: "ReportHeader",
-    components: {},
+  components: {},
-    data() {
+  data() {
-      return {}
+    return {}
+  },
+  props: {
+    title: String,
+    historyReportId: String,
+  },
+  created() {
+  },
+  computed: {
+    readOnly() {
+      return !hasPermission('PROJECT_REPORT_ANALYSIS:READ+EXPORT');
     },
-    props:{
+    isSaveAsButtonShow() {
-      title:String,
+      if (!this.historyReportId || this.historyReportId === null || this.historyReportId === '') {
-      historyReportId:String,
+        return false;
-    },
+      } else {
-    created() {
+        if (hasPermission('PROJECT_REPORT_ANALYSIS:READ+CREATE')) {
-    },
-    computed: {
-      readOnly() {
-        return !hasPermission('PROJECT_REPORT_ANALYSIS:READ+EXPORT');
-      },
-      isSaveAsButtonShow(){
-        if(!this.historyReportId || this.historyReportId === null || this.historyReportId === ''){
-          return false;
-        }else {
-          if(hasPermission('PROJECT_REPORT_ANALYSIS:READ+CREATE')){
-            return true;
-          }else {
-            return false;
-          }
-        }
-      },
-      isSaveButtonShow(){
-        if(hasPermission('PROJECT_REPORT_ANALYSIS:READ+UPDATE')){
           return true;
-        }else {
+        } else {
           return false;
         }
       }
     },
-    methods: {
+    isSaveButtonShow() {
-      handleExport() {
+      if (hasPermission('PROJECT_REPORT_ANALYSIS:READ+UPDATE')) {
-        let name = this.title;
+        return true;
-        this.$nextTick(function () {
+      } else {
-          setTimeout(() => {
+        return false;
-            html2canvas(document.getElementById('reportAnalysis'), {
+      }
-              scale: 2
+    }
-            }).then(function (canvas) {
+  },
-              exportPdf(name, [canvas]);
+  methods: {
-            });
+    handleExport() {
-          }, 1000);
+      let name = this.title;
-        });
+      this.$nextTick(function () {
-      },
+        setTimeout(() => {
-      handleSave(){
+          html2canvas(document.getElementById('reportAnalysis'), {
-        this.$emit("saveReport");
+            scale: 2
-      },
+          }).then(function (canvas) {
-      handleSaveAs(){
+            exportPdf(name, [canvas]);
-        this.$emit("selectAndSaveReport");
+          });
-      },
+        }, 1000);
-      close() {
+      });
-        this.$emit('closePage');
-      },
     },
-  }
+    handleSave() {
+      if (!this.historyReportId || this.historyReportId === null || this.historyReportId === '') {
+        this.$emit("selectAndSaveReport");
+      } else {
+        this.$emit("updateReport");
+      }
+    },
+    handleSaveAs() {
+      this.$emit("selectAndSaveReport");
+    },
+    close() {
+      this.$emit('closePage');
+    },
+  },
+}
 </script>
 
 <style scoped>
-  .ms-header {
+.ms-header {
-    border-bottom: 1px solid #E6E6E6;
+  border-bottom: 1px solid #E6E6E6;
-    background-color: #FFF;
+  background-color: #FFF;
-  }
+}
 
-  .ms-div {
+.ms-div {
-    float: left;
+  float: left;
-    margin-left: 20px;
+  margin-left: 20px;
-    margin-top: 12px;
+  margin-top: 12px;
-  }
+}
 
-  .ms-span {
+.ms-span {
-    margin: 0px 10px 10px;
+  margin: 0px 10px 10px;
-  }
+}
 
-  .ms-header-right {
+.ms-header-right {
-    float: right;
+  float: right;
-    /*width: 320px;*/
+  /*width: 320px;*/
-    margin-bottom: 10px;
+  margin-bottom: 10px;
-    margin-top: 10px;
+  margin-top: 10px;
-    margin-right: 20px;
+  margin-right: 20px;
-  }
+}
 
-  .report-alt-ico {
+.report-alt-ico {
-    font-size: 17px;
+  font-size: 17px;
-    top: auto;
+  top: auto;
-  }
+}
 
-  .report-alt-ico:hover {
+.report-alt-ico:hover {
-    color: black;
+  color: black;
-    cursor: pointer;
+  cursor: pointer;
-    font-size: 18px;
+  font-size: 18px;
-  }
+}
 </style>

frontend/src/business/components/reportstatistics/projectstatistics/ProjectStatistics.vue

@@ -2,7 +2,7 @@
   <div>
     <el-row type="flex">
       <p class="tip">
-        <span class="ms-span">{{$t('commons.report_statistics.name')}}</span>
+        <span class="ms-span">{{ $t('commons.report_statistics.name') }}</span>
         <el-select v-model="reportType" class="ms-col-type" size="mini" style="width: 120px">
           <el-option :key="t.id" :value="t.id" :label="t.name" v-for="t in reportTypes"/>
         </el-select>
@@ -15,19 +15,24 @@
     </transition>
 
     <!-- 测试用例趋势页面 -->
-    <ms-drawer :visible="testCaseTrendDrawer" :size="100" @close="close" direction="right" :show-full-screen="false" :is-show-close="false" style="overflow: hidden">
+    <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="openSaveReportDialog('save')" @selectAndSaveReport="openSaveReportDialog('saveAs')"/>
+                       @closePage="close" @updateReport="updateReport"
+                       @selectAndSaveReport="openSaveReportDialog('saveAs')"/>
       </template>
       <test-analysis-container @initHistoryReportId="initHistoryReportId" ref="testAnalysisContainer"/>
     </ms-drawer>
 
     <!-- 测试用例分析页面 -->
-    <ms-drawer :visible="testCaseCountDrawer" :size="100" @close="close" direction="right" :show-full-screen="false" :is-show-close="false" style="overflow: hidden">
+    <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="openSaveReportDialog('save')" @selectAndSaveReport="openSaveReportDialog('saveAs')"/>
+                       @closePage="close"
+                       @updateReport="updateReport"
+                       @selectAndSaveReport="openSaveReportDialog('saveAs')"/>
       </template>
       <test-case-count-container @initHistoryReportId="initHistoryReportId" ref="testCaseCountContainer"/>
     </ms-drawer>
@@ -44,97 +49,108 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="saveReport">{{$t('commons.confirm')}}</el-button>
+        <el-button type="primary" @click="saveReport">{{ $t('commons.confirm') }}</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-  import ReportCard from "@/business/components/reportstatistics/projectstatistics/ReportCard";
+import ReportCard from "@/business/components/reportstatistics/projectstatistics/ReportCard";
-  import TestAnalysisContainer from "@/business/components/reportstatistics/projectstatistics/track/TestAnalysisContainer";
+import TestAnalysisContainer
-  import MsDrawer from "@/business/components/common/components/MsDrawer";
+  from "@/business/components/reportstatistics/projectstatistics/track/TestAnalysisContainer";
-  import ReportHeader from "@/business/components/reportstatistics/base/ReportHeader";
+import MsDrawer from "@/business/components/common/components/MsDrawer";
-  import TestCaseCountContainer from "@/business/components/reportstatistics/projectstatistics/casecount/TestCaseCountContainer";
+import ReportHeader from "@/business/components/reportstatistics/base/ReportHeader";
+import TestCaseCountContainer
+  from "@/business/components/reportstatistics/projectstatistics/casecount/TestCaseCountContainer";
 
 
-  export default {
+export default {
-    name: "ReportAnalysis",
+  name: "ReportAnalysis",
-    components: {ReportCard, TestAnalysisContainer, MsDrawer, ReportHeader, TestCaseCountContainer},
+  components: {ReportCard, TestAnalysisContainer, MsDrawer, ReportHeader, TestCaseCountContainer},
-    data() {
+  data() {
-      return {
+    return {
-        reportType: "track",
+      reportType: "track",
-        testCaseTrendDrawer: false,
+      testCaseTrendDrawer: false,
-        testCaseCountDrawer: false,
+      testCaseCountDrawer: false,
-        historyReportId:"",
+      historyReportId: "",
-        reportTypes: [{id: 'track', name: this.$t('test_track.test_track')}],
+      reportTypes: [{id: 'track', name: this.$t('test_track.test_track')}],
-        dialogFormVisible: false,
+      dialogFormVisible: false,
-        form: {
+      form: {
-          reportName: "",
+        reportName: "",
-          saveType: "",
+        saveType: "",
-        },
+      },
-        saveReportRules: {
+      saveReportRules: {
-          reportName: [
+        reportName: [
-            { required: true, message: this.$t('commons.input_name'), trigger: 'blur' },
+          {required: true, message: this.$t('commons.input_name'), trigger: 'blur'},
-            { min: 1, max: 20, message: '长度不大于20个字符', trigger: 'blur' }
+          {min: 1, max: 20, message: '长度不大于20个字符', trigger: 'blur'}
-          ],
+        ],
+      }
+    }
+  },
+  methods: {
+    openCard(type) {
+      if (type === 'trackTestCase') {
+        this.testCaseTrendDrawer = true;
+      } else if (type === 'countTestCase') {
+        this.testCaseCountDrawer = true;
+      }
+    },
+    close() {
+      this.testCaseTrendDrawer = false;
+      this.testCaseCountDrawer = false;
+    },
+    openSaveReportDialog(saveType) {
+      this.form.saveType = saveType;
+      this.dialogFormVisible = true;
+    },
+    updateReport() {
+      if (this.historyReportId) {
+        if (this.testCaseTrendDrawer) {
+          this.$refs.testAnalysisContainer.updateReport(this.historyReportId);
+        } else if (this.testCaseCountDrawer) {
+          this.$refs.testCaseCountContainer.updateReport(this.historyReportId);
         }
       }
     },
-    methods: {
+    saveReport() {
-      openCard(type) {
+      this.$refs['saveReportRuleForm'].validate((valid) => {
-        if(type === 'trackTestCase'){
+        if (valid) {
-          this.testCaseTrendDrawer = true;
+          if (this.testCaseTrendDrawer) {
-        }else if(type === 'countTestCase'){
+            this.$refs.testAnalysisContainer.saveAndSaveAsReport(this.form.reportName, this.form.saveType);
-          this.testCaseCountDrawer = true;
+          } else if (this.testCaseCountDrawer) {
-        }
+            this.$refs.testCaseCountContainer.saveAndSaveAsReport(this.form.reportName, this.form.saveType);
-      },
-      close() {
-        this.testCaseTrendDrawer = false;
-        this.testCaseCountDrawer = false;
-      },
-      openSaveReportDialog(saveType){
-        this.form.saveType = saveType;
-        this.dialogFormVisible = true;
-      },
-      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;
           }
-        });
+          this.form.reportName = "";
-      },
+          this.form.saveType = "";
-      initHistoryReportId(reportId){
+          this.dialogFormVisible = false;
-        this.historyReportId = reportId;
+        } else {
-      },
+          return false;
-      handleCloseSaveReportDialog(){
+        }
-        this.form.reportName = "";
+      });
-        this.form.saveType = "";
-        this.dialogFormVisible = false;
-      }
     },
-  }
+    initHistoryReportId(reportId) {
+      this.historyReportId = reportId;
+    },
+    handleCloseSaveReportDialog() {
+      this.form.reportName = "";
+      this.form.saveType = "";
+      this.dialogFormVisible = false;
+    }
+  },
+}
 </script>
 
 <style scoped>
-  .ms-span {
+.ms-span {
-    margin: 10px 10px 0px
+  margin: 10px 10px 0px
-  }
+}
 
-  .tip {
+.tip {
-    float: left;
+  float: left;
-    font-size: 14px;
+  font-size: 14px;
-    border-radius: 2px;
+  border-radius: 2px;
-    border-left: 2px solid #783887;
+  border-left: 2px solid #783887;
-    margin: 10px 20px 0px;
+  margin: 10px 20px 0px;
-  }
+}
 </style>

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

@@ -132,7 +132,7 @@ export default {
       if (selectTableData) {
         this.tableData = selectTableData;
       }
-      this.$refs.analysisChart.setPieOptionAndBarOption(this.loadOption,this.pieOption);
+      this.$refs.analysisChart.setPieOptionAndBarOption(this.loadOption, this.pieOption);
       this.loading = false;
       this.$refs.analysisChart.generateOption(this.chartType);
     },
@@ -143,6 +143,24 @@ export default {
       this.options.order = order;
       this.filterCharts(this.options);
     },
+    updateReport(reportId) {
+      let obj = {};
+      obj.id = reportId;
+      obj.projectId = getCurrentProjectID();
+      obj.selectOption = JSON.stringify(this.options);
+      let dataOptionObj = {
+        loadOption: this.loadOption,
+        pieOption: this.pieOption,
+        tableData: this.tableData,
+        chartType: this.chartType,
+      };
+      obj.dataOption = JSON.stringify(dataOptionObj);
+      obj.reportType = 'TEST_CASE_COUNT';
+      this.$post("/history/report/update", obj, response => {
+        this.$alert(this.$t('commons.save_success'));
+        this.$refs.historyReport.initReportData();
+      });
+    },
     saveReport(reportName) {
       let obj = {};
       obj.name = reportName;

frontend/src/business/components/reportstatistics/projectstatistics/track/TestAnalysisContainer.vue

@@ -9,7 +9,8 @@
         </el-aside>
         <el-main class="ms-main">
           <div>
-            <test-analysis-chart @hidePage="hidePage" @orderCharts="orderCharts" ref="analysisChart" :load-option="loadOption"/>
+            <test-analysis-chart @hidePage="hidePage" @orderCharts="orderCharts" ref="analysisChart"
+                                 :load-option="loadOption"/>
           </div>
           <div class="ms-row" v-if="!isHide">
             <test-analysis-table :tableData="tableData"/>
@@ -24,153 +25,170 @@
 </template>
 
 <script>
-  import TestAnalysisChart from "./chart/TestAnalysisChart";
+import TestAnalysisChart from "./chart/TestAnalysisChart";
-  import TestAnalysisTable from "./table/TestAnalysisTable";
+import TestAnalysisTable from "./table/TestAnalysisTable";
-  import TestAnalysisFilter from "./filter/TestAnalysisFilter";
+import TestAnalysisFilter from "./filter/TestAnalysisFilter";
-  import {exportPdf, getCurrentProjectID} from "@/common/js/utils";
+import {exportPdf, getCurrentProjectID} from "@/common/js/utils";
-  import html2canvas from 'html2canvas';
+import html2canvas from 'html2canvas';
-  import HistoryReportData from "../../base/HistoryReportData";
+import HistoryReportData from "../../base/HistoryReportData";
 
-  export default {
+export default {
-    name: "TestAnalysisContainer",
+  name: "TestAnalysisContainer",
-    components: {TestAnalysisChart, TestAnalysisTable, TestAnalysisFilter, HistoryReportData},
+  components: {TestAnalysisChart, TestAnalysisTable, TestAnalysisFilter, HistoryReportData},
-    data() {
+  data() {
-      return {
+    return {
-        isHide: false,
+      isHide: false,
-        loading: false,
+      loading: false,
-        options: {},
+      options: {},
-        loadOption: {
+      loadOption: {
-          legend: {},
+        legend: {},
-          xAxis: {},
+        xAxis: {},
-          yAxis: {},
+        yAxis: {},
-          label: {},
+        label: {},
-          tooltip: {},
+        tooltip: {},
-          series: []
+        series: []
-        },
-        tableData: [],
-        h: document.documentElement.clientHeight - 40,
-      }
-    },
-    methods: {
-      handleExport() {
-        let name = this.$t('commons.report_statistics.test_case_analysis');
-        this.$nextTick(function () {
-          setTimeout(() => {
-            html2canvas(document.getElementById('reportAnalysis'), {
-              scale: 2
-            }).then(function (canvas) {
-              exportPdf(name, [canvas]);
-            });
-          }, 1000);
-        });
       },
-      hidePage(isHide) {
+      tableData: [],
-        this.isHide = isHide;
+      h: document.documentElement.clientHeight - 40,
-      },
+    }
-      close() {
+  },
-        this.$emit('closePage');
+  methods: {
-      },
+    handleExport() {
-      init(opt) {
+      let name = this.$t('commons.report_statistics.test_case_analysis');
-        this.loading = true;
+      this.$nextTick(function () {
-        this.options = opt;
+        setTimeout(() => {
-        this.$post(' /report/test/analysis/getReport', opt, response => {
+          html2canvas(document.getElementById('reportAnalysis'), {
-          let data = response.data.chartDTO;
+            scale: 2
-          let tableDTOs = response.data.tableDTOs;
+          }).then(function (canvas) {
-          this.initPic(data,tableDTOs);
+            exportPdf(name, [canvas]);
-        });
-      },
-      filterCharts(opt) {
-        this.init(opt);
-      },
-      orderCharts(order) {
-        this.options.order = order;
-        this.filterCharts(this.options);
-      },
-      saveReport(reportName) {
-        let obj = {};
-        obj.name = reportName;
-        obj.projectId = getCurrentProjectID();
-        obj.selectOption = JSON.stringify(this.options);
-        let dataOptionObj = {
-          loadOption: this.loadOption,
-          pieOption: this.pieOption,
-          tableData: this.tableData,
-        };
-        obj.dataOption = JSON.stringify(dataOptionObj);
-        obj.reportType = 'TEST_CASE_ANALYSIS';
-        this.$post("/history/report/saveReport", obj, response => {
-          this.$alert(this.$t('commons.save_success'));
-          this.$refs.historyReport.initReportData();
-        });
-      },
-      initPic(loadOptionParam,tableData){
-        this.loading = true;
-        if (loadOptionParam) {
-          this.loadOption.legend = loadOptionParam.legend;
-          this.loadOption.xAxis = loadOptionParam.xaxis;
-          this.loadOption.series = loadOptionParam.series;
-          this.loadOption.grid = {
-            bottom: '75px',//距离下边距
-          }
-          this.loadOption.series.forEach(item => {
-            item.type = this.$refs.analysisChart.chartType;
-          })
-        }
-        if (tableData) {
-          this.tableData = tableData;
-        }
-        this.loading = false;
-      },
-      selectReport(selectId){
-        if(selectId){
-          this.loading = true;
-          let paramObj = {
-            id:selectId
-          }
-          this.$post('/history/report/selectById',paramObj, response => {
-            let reportData = response.data;
-            if(reportData){
-              if(reportData.dataOption){
-                let dataOptionObj = JSON.parse(reportData.dataOption);
-                this.initPic(dataOptionObj.loadOption,dataOptionObj.pieOption,dataOptionObj.tableData);
-              }
-              if(reportData.selectOption){
-                let selectOptionObj = JSON.parse(reportData.selectOption);
-                this.$refs.analysisFilter.initSelectOption(selectOptionObj);
-              }
-            }
-            this.loading = false;
-          }, (error) => {
-            this.loading = false;
           });
-          this.$emit('initHistoryReportId',selectId);
+        }, 1000);
+      });
+    },
+    hidePage(isHide) {
+      this.isHide = isHide;
+    },
+    close() {
+      this.$emit('closePage');
+    },
+    init(opt) {
+      this.loading = true;
+      this.options = opt;
+      this.$post(' /report/test/analysis/getReport', opt, response => {
+        let data = response.data.chartDTO;
+        let tableDTOs = response.data.tableDTOs;
+        this.initPic(data, tableDTOs);
+      });
+    },
+    filterCharts(opt) {
+      this.init(opt);
+    },
+    orderCharts(order) {
+      this.options.order = order;
+      this.filterCharts(this.options);
+    },
+    updateReport(reportId) {
+      let obj = {};
+      obj.id = reportId;
+      obj.projectId = getCurrentProjectID();
+      obj.selectOption = JSON.stringify(this.options);
+      let dataOptionObj = {
+        loadOption: this.loadOption,
+        pieOption: this.pieOption,
+        tableData: this.tableData,
+      };
+      obj.dataOption = JSON.stringify(dataOptionObj);
+      obj.reportType = 'TEST_CASE_ANALYSIS';
+      this.$post("/history/report/update", obj, response => {
+        this.$alert(this.$t('commons.save_success'));
+        this.$refs.historyReport.initReportData();
+      });
+    },
+    saveReport(reportName) {
+      let obj = {};
+      obj.name = reportName;
+      obj.projectId = getCurrentProjectID();
+      obj.selectOption = JSON.stringify(this.options);
+      let dataOptionObj = {
+        loadOption: this.loadOption,
+        pieOption: this.pieOption,
+        tableData: this.tableData,
+      };
+      obj.dataOption = JSON.stringify(dataOptionObj);
+      obj.reportType = 'TEST_CASE_ANALYSIS';
+      this.$post("/history/report/saveReport", obj, response => {
+        this.$alert(this.$t('commons.save_success'));
+        this.$refs.historyReport.initReportData();
+      });
+    },
+    initPic(loadOptionParam, tableData) {
+      this.loading = true;
+      if (loadOptionParam) {
+        this.loadOption.legend = loadOptionParam.legend;
+        this.loadOption.xAxis = loadOptionParam.xaxis;
+        this.loadOption.series = loadOptionParam.series;
+        this.loadOption.grid = {
+          bottom: '75px',//距离下边距
         }
-      },
+        this.loadOption.series.forEach(item => {
-      removeHistoryReportId(){
+          item.type = this.$refs.analysisChart.chartType;
-        this.$emit('initHistoryReportId',"");
+        })
-      },
+      }
-      selectAndSaveReport(reportName){
+      if (tableData) {
-        let opt = this.$refs.analysisFilter.getOption();
+        this.tableData = tableData;
-        this.options = opt;
+      }
-        this.saveReport(reportName);
+      this.loading = false;
-      },
+    },
-      saveAndSaveAsReport(reportName,saveType){
+    selectReport(selectId) {
-        if(saveType === 'save'){
+      if (selectId) {
-          this.saveReport(reportName);
+        this.loading = true;
-        }else if(saveType === 'saveAs'){
+        let paramObj = {
-          this.selectAndSaveReport(reportName);
+          id: selectId
         }
+        this.$post('/history/report/selectById', paramObj, response => {
+          let reportData = response.data;
+          if (reportData) {
+            if (reportData.dataOption) {
+              let dataOptionObj = JSON.parse(reportData.dataOption);
+              this.initPic(dataOptionObj.loadOption, dataOptionObj.pieOption, dataOptionObj.tableData);
+            }
+            if (reportData.selectOption) {
+              let selectOptionObj = JSON.parse(reportData.selectOption);
+              this.$refs.analysisFilter.initSelectOption(selectOptionObj);
+            }
+          }
+          this.loading = false;
+        }, (error) => {
+          this.loading = false;
+        });
+        this.$emit('initHistoryReportId', selectId);
       }
     },
-  }
+    removeHistoryReportId() {
+      this.$emit('initHistoryReportId', "");
+    },
+    selectAndSaveReport(reportName) {
+      let opt = this.$refs.analysisFilter.getOption();
+      this.options = opt;
+      this.saveReport(reportName);
+    },
+    saveAndSaveAsReport(reportName, saveType) {
+      if (saveType === 'save') {
+        this.saveReport(reportName);
+      } else if (saveType === 'saveAs') {
+        this.selectAndSaveReport(reportName);
+      }
+    }
+  },
+}
 </script>
 
 <style scoped>
-  .ms-row {
+.ms-row {
-    padding-top: 10px;
+  padding-top: 10px;
-  }
+}
 
-  /deep/ .el-main {
+/deep/ .el-main {
-    padding: 0px 20px 0px;
+  padding: 0px 20px 0px;
-  }
+}
 </style>