From 1d124b57f4c83b18514ea543eda1ba7bde3daf2e Mon Sep 17 00:00:00 2001
From: song-tianyang <tianyang.song@fit2cloud.com>
Date: Thu, 16 Mar 2023 18:26:40 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=8A=A5=E8=A1=A8=E7=BB=9F=E8=AE=A1):=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A5=BC=E7=8A=B6=E5=9B=BE=E7=9A=84=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E6=96=B9=E5=BC=8F=E4=BB=A5=E5=8F=8A=E5=AF=BC=E5=87=BA?=
 =?UTF-8?q?=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1021171 --user=宋天阳 【报表统计】github#20870，测试用例统计图，报表展示数值重叠，导出后缺少图表
https://www.tapd.cn/55049933/s/1351691
---
 .../sdk-parent/frontend/src/utils/index.js    |  23 +-
 .../service/TestCaseCountService.java         |  13 +-
 .../reportstatistics/utils/DiscoveryUtil.java |  30 ++
 .../src/business/base/ReportHeader.vue        |  89 +++---
 .../projectstatistics/ProjectStatistics.vue   | 144 +++++++---
 .../casecount/TestCaseCountContainer.vue      | 231 +++++++++------
 .../casecount/chart/TestCaseCountChart.vue    | 265 +++++++++++++-----
 .../casecount/table/TestCaseCountTable.vue    |  73 +++--
 .../track/TestAnalysisContainer.vue           | 155 ++++++----
 .../track/chart/TestAnalysisChart.vue         | 123 +++++---
 10 files changed, 780 insertions(+), 366 deletions(-)
 create mode 100644 report-stat/backend/src/main/java/io/metersphere/reportstatistics/utils/DiscoveryUtil.java

diff --git a/framework/sdk-parent/frontend/src/utils/index.js b/framework/sdk-parent/frontend/src/utils/index.js
index 3b278d4350..8b22d5f89d 100644
--- a/framework/sdk-parent/frontend/src/utils/index.js
+++ b/framework/sdk-parent/frontend/src/utils/index.js
@@ -8,6 +8,14 @@ import {
 import i18n from "../i18n";
 import html2canvas from "html2canvas";
 import JsPDF from "jspdf";
+/**
+ * 同一行的多个文本框高度保持一致
+ * 同时支持 autosize 的功能
+ * @param size 同一行中文本框的个数
+ * @param index 编辑行的下标
+ * 如果编辑某一行，则只调整某一行，提升效率
+ */
+import calcTextareaHeight from "element-ui/packages/input/src/calcTextareaHeight";
 
 export function setCustomizeColor(color) {
   // 自定义主题风格
@@ -309,10 +317,10 @@ export function sizeToByte(size) {
   let k = 1024,
     sizeUnits = ["B", "K", "M", "G", "T", "P", "E", "Z", "Y"];
   let i = 1;
-  for (i++; i < sizeUnits.length;) {
+  for (i++; i < sizeUnits.length; ) {
     let unit = sizeUnits[i];
     if (size.indexOf(unit) !== -1) {
-      return size.toString().replace(unit, "") * Math.pow(k, i)
+      return size.toString().replace(unit, "") * Math.pow(k, i);
     }
   }
 }
@@ -325,15 +333,6 @@ export function getTypeByFileName(filename) {
   return type.toUpperCase();
 }
 
-/**
- * 同一行的多个文本框高度保持一致
- * 同时支持 autosize 的功能
- * @param size 同一行中文本框的个数
- * @param index 编辑行的下标
- * 如果编辑某一行，则只调整某一行，提升效率
- */
-import calcTextareaHeight from "element-ui/packages/input/src/calcTextareaHeight";
-
 export function resizeTextarea(size = 2, index) {
   let textareaList = document.querySelectorAll(
     ".sync-textarea .el-textarea__inner"
@@ -404,7 +403,7 @@ export function downloadPDF(ele, pdfName) {
   let scale = canvas.height / ((canvas.width / 592.28) * 841.89);
   scale = scale > 3 ? 1 : 2;
   context.translate(-eleOffsetLeft - abs, -eleOffsetTop);
-  let scrollWidth = document.getElementById("apiTestReport").scrollWidth;
+  let scrollWidth = ele.scrollWidth;
   html2canvas(ele, {
     scale: scale, // 背景灰色
     background: "#FFFFFF",
diff --git a/report-stat/backend/src/main/java/io/metersphere/reportstatistics/service/TestCaseCountService.java b/report-stat/backend/src/main/java/io/metersphere/reportstatistics/service/TestCaseCountService.java
index 2b909e3bff..005123e034 100644
--- a/report-stat/backend/src/main/java/io/metersphere/reportstatistics/service/TestCaseCountService.java
+++ b/report-stat/backend/src/main/java/io/metersphere/reportstatistics/service/TestCaseCountService.java
@@ -2,6 +2,7 @@ package io.metersphere.reportstatistics.service;
 
 import io.metersphere.base.domain.CustomField;
 import io.metersphere.base.domain.User;
+import io.metersphere.commons.constants.MicroServiceName;
 import io.metersphere.commons.utils.DateUtils;
 import io.metersphere.commons.utils.JSON;
 import io.metersphere.i18n.Translator;
@@ -15,15 +16,16 @@ import io.metersphere.reportstatistics.service.remote.apitest.ScenarioRemoteServ
 import io.metersphere.reportstatistics.service.remote.performance.PerformanceRemoteService;
 import io.metersphere.reportstatistics.service.remote.projectmanagement.TestCaseTemplateRemoteService;
 import io.metersphere.reportstatistics.service.remote.track.TestCaseRemoteService;
+import io.metersphere.reportstatistics.utils.DiscoveryUtil;
 import io.metersphere.request.member.QueryMemberRequest;
 import io.metersphere.service.BaseUserService;
+import jakarta.annotation.Resource;
 import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.collections.MapUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
-import jakarta.annotation.Resource;
 import java.util.*;
 
 @Service
@@ -126,7 +128,6 @@ public class TestCaseCountService {
             } else if (StringUtils.equalsIgnoreCase(request.getTimeRangeUnit(), "year")) {
                 dateCountType = Calendar.YEAR;
             }
-
             if (dateCountType != 0 && request.getTimeRange() != 0) {
                 long startTime = DateUtils.dateSum(new Date(), (0 - request.getTimeRange()), dateCountType).getTime();
                 request.setStartTime(startTime);
@@ -246,7 +247,7 @@ public class TestCaseCountService {
         }
 
 
-        if (yAxisSelectTestCase) {
+        if (yAxisSelectTestCase && DiscoveryUtil.hasService(MicroServiceName.TEST_TRACK)) {
             functionCaseCountResult = testCaseRemoteService.countTestCaseByRequest(request);
             if (functionCaseCountResult.isEmpty() && StringUtils.equalsIgnoreCase(request.getXaxis(), "casetype")) {
                 TestCaseCountChartResult result = new TestCaseCountChartResult();
@@ -255,7 +256,7 @@ public class TestCaseCountService {
                 functionCaseCountResult.add(result);
             }
         }
-        if (yAxisSelectApi) {
+        if (yAxisSelectApi && DiscoveryUtil.hasService(MicroServiceName.API_TEST)) {
             Map<String, List<String>> apiCaseFilterList = new HashMap<>();
             if (MapUtils.isNotEmpty(request.getFilterSearchList())) {
                 for (Map.Entry<String, List<String>> entry : request.getFilterSearchList().entrySet()) {
@@ -274,7 +275,7 @@ public class TestCaseCountService {
                 apiCaseCountResult.add(result);
             }
         }
-        if (yAxisSelectScenarioCase) {
+        if (yAxisSelectScenarioCase && DiscoveryUtil.hasService(MicroServiceName.API_TEST)) {
             scenarioCaseCount = scenarioRemoteService.countTestCaseByRequest(request);
             if (scenarioCaseCount.isEmpty() && StringUtils.equalsIgnoreCase(request.getXaxis(), "casetype")) {
                 TestCaseCountChartResult result = new TestCaseCountChartResult();
@@ -283,7 +284,7 @@ public class TestCaseCountService {
                 scenarioCaseCount.add(result);
             }
         }
-        if (yAxisSelectLoad) {
+        if (yAxisSelectLoad && DiscoveryUtil.hasService(MicroServiceName.PERFORMANCE_TEST)) {
             Map<String, List<String>> loadCaseFilterMap = new HashMap<>();
             if (MapUtils.isNotEmpty(request.getFilterSearchList())) {
                 for (Map.Entry<String, List<String>> entry : request.getFilterSearchList().entrySet()) {
diff --git a/report-stat/backend/src/main/java/io/metersphere/reportstatistics/utils/DiscoveryUtil.java b/report-stat/backend/src/main/java/io/metersphere/reportstatistics/utils/DiscoveryUtil.java
new file mode 100644
index 0000000000..c220b45c41
--- /dev/null
+++ b/report-stat/backend/src/main/java/io/metersphere/reportstatistics/utils/DiscoveryUtil.java
@@ -0,0 +1,30 @@
+package io.metersphere.reportstatistics.utils;
+
+import io.metersphere.commons.utils.CommonBeanFactory;
+import io.metersphere.dto.ServiceDTO;
+import org.springframework.cloud.client.discovery.DiscoveryClient;
+
+import java.util.List;
+import java.util.Set;
+import java.util.stream.Collectors;
+
+public class DiscoveryUtil {
+
+    public static boolean hasService(String serviceId) {
+        return getServiceIdSet().contains(serviceId);
+    }
+
+    public static Set<String> getServiceIdSet() {
+        DiscoveryClient discoveryClient = CommonBeanFactory.getBean(DiscoveryClient.class);
+        return discoveryClient.getServices()
+                .stream()
+                .collect(Collectors.toSet());
+    }
+
+    public static List<ServiceDTO> getServices() {
+        DiscoveryClient discoveryClient = CommonBeanFactory.getBean(DiscoveryClient.class);
+        return discoveryClient.getServices().stream()
+                .map(service -> new ServiceDTO(service, discoveryClient.getInstances(service).get(0).getPort()))
+                .collect(Collectors.toList());
+    }
+}
diff --git a/report-stat/frontend/src/business/base/ReportHeader.vue b/report-stat/frontend/src/business/base/ReportHeader.vue
index 05771e2b84..2aadac48b8 100644
--- a/report-stat/frontend/src/business/base/ReportHeader.vue
+++ b/report-stat/frontend/src/business/base/ReportHeader.vue
@@ -1,35 +1,55 @@
 <template>
   <div class="ms-header">
     <el-row>
-      <div class="ms-div">{{ title }}
+      <div class="ms-div">
+        {{ title }}
         <span v-if="historyReportName" class="history-report-name">
           {{ historyReportName }}
         </span>
       </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="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>
+        <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="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"/>
+        <i class="el-icon-close report-alt-ico" @click="close" />
       </div>
     </el-row>
   </div>
 </template>
 
 <script>
-import {exportPdf,} from "metersphere-frontend/src/utils";
-import {hasPermission} from "metersphere-frontend/src/utils/permission";
-import html2canvas from 'html2canvas';
+import { hasPermission } from "metersphere-frontend/src/utils/permission";
+import html2canvas from "html2canvas";
 
 export default {
   name: "ReportHeader",
   components: {},
   data() {
-    return {}
+    return {};
   },
   props: {
     title: String,
@@ -37,20 +57,22 @@ export default {
     historyReportName: String,
   },
   watch: {
-    historyReportName() {
-    }
-  },
-  created() {
+    historyReportName() {},
   },
+  created() {},
   computed: {
     readOnly() {
-      return !hasPermission('PROJECT_REPORT_ANALYSIS:READ+EXPORT');
+      return !hasPermission("PROJECT_REPORT_ANALYSIS:READ+EXPORT");
     },
     isSaveAsButtonShow() {
-      if (!this.historyReportId || this.historyReportId === null || this.historyReportId === '') {
+      if (
+        !this.historyReportId ||
+        this.historyReportId === null ||
+        this.historyReportId === ""
+      ) {
         return false;
       } else {
-        if (hasPermission('PROJECT_REPORT_ANALYSIS:READ+CREATE')) {
+        if (hasPermission("PROJECT_REPORT_ANALYSIS:READ+CREATE")) {
           return true;
         } else {
           return false;
@@ -58,28 +80,23 @@ export default {
       }
     },
     isSaveButtonShow() {
-      if (hasPermission('PROJECT_REPORT_ANALYSIS:READ+UPDATE')) {
+      if (hasPermission("PROJECT_REPORT_ANALYSIS:READ+UPDATE")) {
         return true;
       } else {
         return false;
       }
-    }
+    },
   },
   methods: {
     handleExport() {
-      let name = this.title;
-      this.$nextTick(function () {
-        setTimeout(() => {
-          html2canvas(document.getElementById('reportAnalysis'), {
-            scale: 2
-          }).then(function (canvas) {
-            exportPdf(name, [canvas]);
-          });
-        }, 1000);
-      });
+      this.$emit("exportReport", this.title);
     },
     handleSave() {
-      if (!this.historyReportId || this.historyReportId === null || this.historyReportId === '') {
+      if (
+        !this.historyReportId ||
+        this.historyReportId === null ||
+        this.historyReportId === ""
+      ) {
         this.$emit("selectAndSaveReport");
       } else {
         this.$emit("updateReport");
@@ -89,16 +106,16 @@ export default {
       this.$emit("selectAndSaveReport");
     },
     close() {
-      this.$emit('closePage');
+      this.$emit("closePage");
     },
   },
-}
+};
 </script>
 
 <style scoped>
 .ms-header {
-  border-bottom: 1px solid #E6E6E6;
-  background-color: #FFF;
+  border-bottom: 1px solid #e6e6e6;
+  background-color: #fff;
 }
 
 .ms-div {
diff --git a/report-stat/frontend/src/business/projectstatistics/ProjectStatistics.vue b/report-stat/frontend/src/business/projectstatistics/ProjectStatistics.vue
index 02b9adf486..76d33656b7 100644
--- a/report-stat/frontend/src/business/projectstatistics/ProjectStatistics.vue
+++ b/report-stat/frontend/src/business/projectstatistics/ProjectStatistics.vue
@@ -2,56 +2,101 @@
   <div>
     <el-row type="flex">
       <p class="tip">
-        <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"/>
+        <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>
       </p>
     </el-row>
     <transition>
       <keep-alive>
-        <report-card @openCard="openCard"/>
+        <report-card @openCard="openCard" />
       </keep-alive>
     </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"
-                       :history-report-name="historyReportName"
-                       @closePage="close" @updateReport="updateReport"
-                       @selectAndSaveReport="openSaveReportDialog('saveAs')"/>
+        <report-header
+          :title="$t('commons.report_statistics.test_case_analysis')"
+          :history-report-id="historyReportId"
+          :history-report-name="historyReportName"
+          @closePage="close"
+          @updateReport="updateReport"
+          @exportReport="exportReport"
+          @selectAndSaveReport="openSaveReportDialog('saveAs')"
+        />
       </template>
-      <test-analysis-container @initHistoryReportId="initHistoryReportId" ref="testAnalysisContainer"/>
+      <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"
-                       :history-report-name="historyReportName"
-                       @updateReport="updateReport"
-                       @selectAndSaveReport="openSaveReportDialog('saveAs')"/>
+        <report-header
+          :title="$t('commons.report_statistics.test_case_count')"
+          :history-report-id="historyReportId"
+          @closePage="close"
+          :history-report-name="historyReportName"
+          @updateReport="updateReport"
+          @exportReport="exportReport"
+          @selectAndSaveReport="openSaveReportDialog('saveAs')"
+        />
       </template>
-      <test-case-count-container @initHistoryReportId="initHistoryReportId" ref="testCaseCountContainer"/>
+      <test-case-count-container
+        @initHistoryReportId="initHistoryReportId"
+        ref="testCaseCountContainer"
+      />
     </ms-drawer>
 
     <el-dialog
       :title="$t('commons.save')"
       :visible.sync="dialogFormVisible"
       width="30%"
-      :before-close="handleCloseSaveReportDialog">
-
+      :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-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>
+        <el-button type="primary" @click="saveReport">{{
+          $t("commons.confirm")
+        }}</el-button>
       </div>
     </el-dialog>
   </div>
@@ -63,11 +108,17 @@ import TestAnalysisContainer from "@/business/projectstatistics/track/TestAnalys
 import MsDrawer from "metersphere-frontend/src/components/MsDrawer";
 import ReportHeader from "@/business/base/ReportHeader";
 import TestCaseCountContainer from "@/business/projectstatistics/casecount/TestCaseCountContainer";
-
+import html2canvas from "html2canvas";
 
 export default {
   name: "ReportAnalysis",
-  components: {ReportCard, TestAnalysisContainer, MsDrawer, ReportHeader, TestCaseCountContainer},
+  components: {
+    ReportCard,
+    TestAnalysisContainer,
+    MsDrawer,
+    ReportHeader,
+    TestCaseCountContainer,
+  },
   data() {
     return {
       reportType: "track",
@@ -75,7 +126,7 @@ export default {
       testCaseCountDrawer: false,
       historyReportId: "",
       historyReportName: "",
-      reportTypes: [{id: 'track', name: this.$t('test_track.test_track')}],
+      reportTypes: [{ id: "track", name: this.$t("test_track.test_track") }],
       dialogFormVisible: false,
       form: {
         reportName: "",
@@ -83,19 +134,30 @@ export default {
       },
       saveReportRules: {
         reportName: [
-          {required: true, message: this.$t('commons.input_name'), trigger: 'blur'},
-          {min: 1, max: 20, message: '长度不大于20个字符', trigger: 'blur'}
+          {
+            required: true,
+            message: this.$t("commons.input_name"),
+            trigger: "blur",
+          },
+          { min: 1, max: 20, message: "长度不大于20个字符", trigger: "blur" },
         ],
-      }
-    }
+      },
+    };
   },
   methods: {
+    exportReport(title) {
+      if (this.testCaseCountDrawer && this.$refs.testCaseCountContainer) {
+        this.$refs.testCaseCountContainer.handleExport();
+      } else if (this.testCaseTrendDrawer) {
+        this.$refs.testAnalysisContainer.handleExport();
+      }
+    },
     openCard(type) {
       this.historyReportName = "";
       this.historyReportId = "";
-      if (type === 'trackTestCase') {
+      if (type === "trackTestCase") {
         this.testCaseTrendDrawer = true;
-      } else if (type === 'countTestCase') {
+      } else if (type === "countTestCase") {
         this.testCaseCountDrawer = true;
       }
     },
@@ -119,12 +181,18 @@ export default {
       }
     },
     saveReport() {
-      this.$refs['saveReportRuleForm'].validate((valid) => {
+      this.$refs["saveReportRuleForm"].validate((valid) => {
         if (valid) {
           if (this.testCaseTrendDrawer) {
-            this.$refs.testAnalysisContainer.saveAndSaveAsReport(this.form.reportName, this.form.saveType);
+            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.$refs.testCaseCountContainer.saveAndSaveAsReport(
+              this.form.reportName,
+              this.form.saveType
+            );
           }
           this.form.reportName = "";
           this.form.saveType = "";
@@ -142,14 +210,14 @@ export default {
       this.form.reportName = "";
       this.form.saveType = "";
       this.dialogFormVisible = false;
-    }
+    },
   },
-}
+};
 </script>
 
 <style scoped>
 .ms-span {
-  margin: 10px 10px 0px
+  margin: 10px 10px 0px;
 }
 
 .tip {
diff --git a/report-stat/frontend/src/business/projectstatistics/casecount/TestCaseCountContainer.vue b/report-stat/frontend/src/business/projectstatistics/casecount/TestCaseCountContainer.vue
index 664fd53490..c80ae63852 100644
--- a/report-stat/frontend/src/business/projectstatistics/casecount/TestCaseCountContainer.vue
+++ b/report-stat/frontend/src/business/projectstatistics/casecount/TestCaseCountContainer.vue
@@ -1,24 +1,53 @@
 <template>
   <div>
-    <el-container v-loading="loading" :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"/>
+    <el-container
+      v-loading="loading"
+      :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"
+        />
       </el-aside>
       <el-main class="ms-main" id="reportAnalysis" style="padding: 0px 5px 0px">
-        <div>
-          <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-columns="options.yaxis"
-                                 :tableData="tableData"/>
+        <div id="testCaseCountPicDiv">
+          <div>
+            <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">
+            <test-case-count-table
+              :group-name="getGroupNameStr(options.xaxis)"
+              :show-columns="options.yaxis"
+              ref="caseCountTable"
+              :tableData="tableData"
+            />
+          </div>
         </div>
       </el-main>
-      <el-aside v-if="!isHide" style="height: 100%" :width="!isHide ?'485px':'0px'">
-        <test-case-count-filter @filterCharts="filterCharts" ref="countFilter"/>
+      <el-aside
+        v-if="!isHide"
+        style="height: 100%"
+        :width="!isHide ? '485px' : '0px'"
+      >
+        <test-case-count-filter
+          @filterCharts="filterCharts"
+          ref="countFilter"
+        />
       </el-aside>
     </el-container>
   </div>
@@ -28,16 +57,24 @@
 import TestCaseCountChart from "./chart/TestCaseCountChart";
 import TestCaseCountTable from "@/business/projectstatistics/casecount/table/TestCaseCountTable";
 import TestCaseCountFilter from "./filter/TestCaseCountFilter";
-import {exportPdf} from "metersphere-frontend/src/utils";
-import {getCurrentProjectID} from "metersphere-frontend/src/utils/token";
-import html2canvas from 'html2canvas';
-import {getCountReport} from "@/api/report";
+import { getCurrentProjectID } from "metersphere-frontend/src/utils/token";
+import { downloadPDF } from "metersphere-frontend/src/utils";
+import { getCountReport } from "@/api/report";
 import HistoryReportData from "../../base/HistoryReportData";
-import {createHistoryReport, selectHistoryReportById, updateHistoryReport} from "@/api/history-report";
+import {
+  createHistoryReport,
+  selectHistoryReportById,
+  updateHistoryReport,
+} from "@/api/history-report";
 
 export default {
   name: "TestCaseCountContainer",
-  components: {TestCaseCountChart, TestCaseCountTable, TestCaseCountFilter, HistoryReportData},
+  components: {
+    TestCaseCountChart,
+    TestCaseCountTable,
+    TestCaseCountFilter,
+    HistoryReportData,
+  },
   data() {
     return {
       isHide: false,
@@ -52,7 +89,7 @@ export default {
         yAxis: {},
         label: {},
         tooltip: {},
-        series: []
+        series: [],
       },
       pieOption: {
         legend: {},
@@ -71,26 +108,29 @@ export default {
       this.chartType = value;
     },
     handleExport() {
-      let name = this.$t('commons.report_statistics.test_case_analysis');
+      this.hidePage(true);
+      let name = this.$t("commons.report_statistics.test_case_count");
       this.$nextTick(function () {
         setTimeout(() => {
-          html2canvas(document.getElementById('reportAnalysis'), {
-            scale: 2
-          }).then(function (canvas) {
-            exportPdf(name, [canvas]);
-          });
+          downloadPDF(
+            document.getElementById("testCaseCountPicDiv"),
+            name || "MeterSphere-report"
+          );
         }, 1000);
       });
     },
+
     hidePage(isHide) {
       this.isHide = isHide;
+      this.$refs.analysisChart.reCountWidth(isHide);
+      this.$refs.caseCountTable.reCountWidth(isHide);
     },
     close() {
-      this.$emit('closePage');
+      this.$emit("closePage");
     },
     init(opt) {
       this.options = opt;
-      this.loading = getCountReport(opt).then(response => {
+      this.loading = getCountReport(opt).then((response) => {
         let data = response.data.barChartDTO;
         let pieData = response.data.pieChartDTO;
         let selectTableData = response.data.tableDTOs;
@@ -101,19 +141,18 @@ export default {
       if (!formatData) {
         return;
       }
-      if (typeof (formatData.legend) === 'string') {
+      if (typeof formatData.legend === "string") {
         formatData.legend = JSON.parse(formatData.legend);
       }
-      if (typeof (formatData.xaxis) === 'string') {
+      if (typeof formatData.xaxis === "string") {
         formatData.xaxis = JSON.parse(formatData.xaxis);
       }
-      if (typeof (formatData.series) === 'string') {
+      if (typeof formatData.series === "string") {
         formatData.series = JSON.parse(formatData.series);
       }
-      if (typeof (formatData.title) === 'string') {
+      if (typeof formatData.title === "string") {
         formatData.title = JSON.parse(formatData.title);
       }
-
     },
     initPic(barData, pieData, selectTableData) {
       this.loading = true;
@@ -126,9 +165,9 @@ export default {
         this.loadOption.xaxis = barData.xaxis;
         this.loadOption.series = barData.series;
         this.loadOption.grid = {
-          bottom: '75px',//距离下边距
+          bottom: "75px", //距离下边距
         };
-        this.loadOption.series.forEach(item => {
+        this.loadOption.series.forEach((item) => {
           if (this.$refs.analysisChart) {
             item.type = this.$refs.analysisChart.chartType;
           }
@@ -141,14 +180,14 @@ export default {
         this.pieOption.series = pieData.series;
         this.pieOption.title = pieData.title;
         this.pieOption.grid = {
-          bottom: '75px',//距离下边距
+          bottom: "75px", //距离下边距
         };
         if (pieData.width) {
           this.pieOption.width = pieData.width;
           this.chartWidth = pieData.width;
         }
         if (this.pieOption.series) {
-          this.pieOption.series.forEach(item => {
+          this.pieOption.series.forEach((item) => {
             if (this.$refs.analysisChart) {
               item.type = this.$refs.analysisChart.chartType;
             }
@@ -158,7 +197,10 @@ 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);
     },
@@ -181,9 +223,9 @@ export default {
         chartType: this.chartType,
       };
       obj.dataOption = JSON.stringify(dataOptionObj);
-      obj.reportType = 'TEST_CASE_COUNT';
+      obj.reportType = "TEST_CASE_COUNT";
       updateHistoryReport(obj).then(() => {
-        this.$alert(this.$t('commons.save_success'));
+        this.$alert(this.$t("commons.save_success"));
         this.$refs.historyReport.initReportData();
       });
     },
@@ -199,9 +241,9 @@ export default {
         chartType: this.chartType,
       };
       obj.dataOption = JSON.stringify(dataOptionObj);
-      obj.reportType = 'TEST_CASE_COUNT';
+      obj.reportType = "TEST_CASE_COUNT";
       createHistoryReport(obj).then(() => {
-        this.$alert(this.$t('commons.save_success'));
+        this.$alert(this.$t("commons.save_success"));
         this.$refs.historyReport.initReportData();
       });
     },
@@ -210,54 +252,71 @@ export default {
       if (selectId) {
         this.loading = true;
         let paramObj = {
-          id: selectId
-        }
-        selectHistoryReportById(paramObj).then((response) => {
-          let reportData = response.data;
-          if (reportData) {
-            selectName = reportData.name;
-            if (reportData.dataOption) {
-              let dataOptionObj = JSON.parse(reportData.dataOption);
-              if (dataOptionObj.chartType) {
-                if (dataOptionObj.chartType === "\"bar\"") {
-                  this.chartType = "bar";
-                } else if (dataOptionObj.chartType === "\"pie\"") {
-                  this.chartType = "pie";
+          id: selectId,
+        };
+        selectHistoryReportById(paramObj).then(
+          (response) => {
+            let reportData = response.data;
+            if (reportData) {
+              selectName = reportData.name;
+              if (reportData.dataOption) {
+                let dataOptionObj = JSON.parse(reportData.dataOption);
+                if (dataOptionObj.chartType) {
+                  if (dataOptionObj.chartType === '"bar"') {
+                    this.chartType = "bar";
+                  } else if (dataOptionObj.chartType === '"pie"') {
+                    this.chartType = "pie";
+                  } else {
+                    this.chartType = dataOptionObj.chartType;
+                  }
                 } else {
-                  this.chartType = dataOptionObj.chartType;
+                  this.chartType = "bar";
                 }
-              } else {
-                this.chartType = "bar";
+                this.initPic(
+                  dataOptionObj.loadOption,
+                  dataOptionObj.pieOption,
+                  dataOptionObj.tableData
+                );
               }
-              this.initPic(dataOptionObj.loadOption, dataOptionObj.pieOption, dataOptionObj.tableData);
-            }
-            if (reportData.selectOption) {
-              let selectOptionObj = JSON.parse(reportData.selectOption);
-              this.$refs.countFilter.initSelectOption(selectOptionObj);
+              if (reportData.selectOption) {
+                let selectOptionObj = JSON.parse(reportData.selectOption);
+                this.$refs.countFilter.initSelectOption(selectOptionObj);
+              }
+              this.loading = false;
             }
+            this.$emit("initHistoryReportId", selectId, selectName);
+          },
+          (error) => {
             this.loading = false;
+            this.removeHistoryReportId();
           }
-          this.$emit('initHistoryReportId', selectId, selectName);
-        }, (error) => {
-          this.loading = false;
-          this.removeHistoryReportId();
-        });
+        );
       }
     },
     removeHistoryReportId() {
-      this.$emit('initHistoryReportId', "", "");
+      this.$emit("initHistoryReportId", "", "");
     },
     getGroupNameStr(groupName) {
-      if (groupName === 'creator') {
-        return this.$t('commons.report_statistics.report_filter.select_options.creator');
-      } else if (groupName === 'maintainer') {
-        return this.$t('commons.report_statistics.report_filter.select_options.maintainer');
-      } else if (groupName === 'casetype') {
-        return this.$t('commons.report_statistics.report_filter.select_options.case_type');
-      } else if (groupName === 'casestatus') {
-        return this.$t('commons.report_statistics.report_filter.select_options.case_status');
-      } else if (groupName === 'caselevel') {
-        return this.$t('commons.report_statistics.report_filter.select_options.case_level');
+      if (groupName === "creator") {
+        return this.$t(
+          "commons.report_statistics.report_filter.select_options.creator"
+        );
+      } else if (groupName === "maintainer") {
+        return this.$t(
+          "commons.report_statistics.report_filter.select_options.maintainer"
+        );
+      } else if (groupName === "casetype") {
+        return this.$t(
+          "commons.report_statistics.report_filter.select_options.case_type"
+        );
+      } else if (groupName === "casestatus") {
+        return this.$t(
+          "commons.report_statistics.report_filter.select_options.case_status"
+        );
+      } else if (groupName === "caselevel") {
+        return this.$t(
+          "commons.report_statistics.report_filter.select_options.case_level"
+        );
       } else {
         return "";
       }
@@ -269,7 +328,7 @@ export default {
         yAxis: {},
         label: {},
         tooltip: {},
-        series: []
+        series: [],
       };
       this.pieOption = {
         legend: {},
@@ -286,12 +345,12 @@ export default {
       this.saveReport(reportName);
     },
     saveAndSaveAsReport(reportName, saveType) {
-      if (saveType === 'save') {
+      if (saveType === "save") {
         this.saveReport(reportName);
-      } else if (saveType === 'saveAs') {
+      } else if (saveType === "saveAs") {
         this.selectAndSaveReport(reportName);
       }
-    }
+    },
   },
 };
 </script>
@@ -301,7 +360,7 @@ export default {
   padding-top: 5px;
 }
 
-:deep(.el-main ) {
+:deep(.el-main) {
   padding: 0px 20px 0px;
 }
 </style>
diff --git a/report-stat/frontend/src/business/projectstatistics/casecount/chart/TestCaseCountChart.vue b/report-stat/frontend/src/business/projectstatistics/casecount/chart/TestCaseCountChart.vue
index 549e0322f1..46d8dcdf52 100644
--- a/report-stat/frontend/src/business/projectstatistics/casecount/chart/TestCaseCountChart.vue
+++ b/report-stat/frontend/src/business/projectstatistics/casecount/chart/TestCaseCountChart.vue
@@ -1,12 +1,20 @@
 <template>
   <div v-loading="loading">
-    <el-card class="ms-test-chart" :style="{ width: w+'px', height: h + 'px'}" ref="msDrawer">
+    <el-card
+      class="ms-test-chart"
+      :style="{ width: w + 'px', height: h + 'px' }"
+      ref="msDrawer"
+    >
       <el-row class="ms-row">
-        <p class="tip"><span style="margin-left: 5px"></span> {{ $t('commons.report_statistics.chart') }} </p>
+        <p class="tip">
+          <span style="margin-left: 5px"></span>
+          {{ $t("commons.report_statistics.chart") }}
+        </p>
         <div class="ms-test-chart-header" v-if="!readOnly">
           <el-dropdown @command="exportCommand" :hide-on-click="false">
             <span class="el-dropdown-link">
-              {{ $t('commons.export') }}<i class="el-icon-arrow-down el-icon--right"></i>
+              {{ $t("commons.export")
+              }}<i class="el-icon-arrow-down el-icon--right"></i>
             </span>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item command="jpg">JPG</el-dropdown-item>
@@ -14,26 +22,63 @@
             </el-dropdown-menu>
           </el-dropdown>
           <span style="margin: 0px 10px 10px">|</span>
-          <el-select v-model="chartType" class="ms-col-type" size="mini" style="width: 100px" @change="generateOption">
-            <el-option :key="t.id" :value="t.id" :label="t.name" v-for="t in charts"/>
+          <el-select
+            v-model="chartType"
+            class="ms-col-type"
+            size="mini"
+            style="width: 100px"
+            @change="generateOption"
+          >
+            <el-option
+              :key="t.id"
+              :value="t.id"
+              :label="t.name"
+              v-for="t in charts"
+            />
           </el-select>
           <span style="margin: 0px 10px 10px">|</span>
-          <el-select v-model="order" class="ms-col-type" size="mini" style="width: 120px" @change="orderCharts">
-            <el-option :key="t.id" :value="t.id" :label="t.name" v-for="t in orders"/>
+          <el-select
+            v-model="order"
+            class="ms-col-type"
+            size="mini"
+            style="width: 120px"
+            @change="orderCharts"
+          >
+            <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>
         <div class="chart-style">
-          <ms-chart ref="chart1" v-if="!loading" :options="dataOption"
-                    :style="{width: chartWidthNumber+'px', height: (h-70) + 'px'}" class="chart-config"
-                    :autoresize="true"
-                    id="picChart"/>
+          <ms-chart
+            ref="chart1"
+            v-if="!loading"
+            :options="dataOption"
+            :style="{ width: chartWidthNumber + 'px', height: h - 70 + 'px' }"
+            class="chart-config"
+            :autoresize="true"
+            id="picChart"
+          />
         </div>
       </el-row>
     </el-card>
@@ -42,10 +87,11 @@
 
 <script>
 import MsChart from "metersphere-frontend/src/components/chart/MsChart";
+import html2canvas from "html2canvas";
 
 export default {
   name: "TestCaseCountChart",
-  components: {MsChart},
+  components: { MsChart },
   props: {
     chartWidth: Number,
     needFullScreen: Boolean,
@@ -68,24 +114,28 @@ export default {
         type: Boolean,
         default() {
           return true;
-        }
+        },
       },
       charts: [
-        {id: 'bar', name: this.$t('commons.report_statistics.bar')},
-        {id: 'pie', name: this.$t('commons.report_statistics.pie')}
+        { id: "bar", name: this.$t("commons.report_statistics.bar") },
+        { id: "pie", name: this.$t("commons.report_statistics.pie") },
       ],
       order: "",
-      orders: [{id: '', name: this.$t('commons.sort_default')}, {
-        id: 'desc',
-        name: this.$t('commons.report_statistics.desc')
-      }, {
-        id: 'asc',
-        name: this.$t('commons.report_statistics.asc')
-      }],
+      orders: [
+        { id: "", name: this.$t("commons.sort_default") },
+        {
+          id: "desc",
+          name: this.$t("commons.report_statistics.desc"),
+        },
+        {
+          id: "asc",
+          name: this.$t("commons.report_statistics.asc"),
+        },
+      ],
       loading: false,
       options: {},
       chartType: "bar",
-    }
+    };
   },
   created() {
     this.dataOption = this.loadOption;
@@ -104,32 +154,109 @@ export default {
     },
   },
   methods: {
+    reCountWidth(isHideOther) {
+      if (isHideOther) {
+        this.w = document.documentElement.clientWidth - 50;
+      } else {
+        this.w = document.documentElement.clientWidth - 760;
+      }
+      this.generateOption(this.chartType);
+      this.countChartWidth();
+      this.reload();
+    },
     countChartWidth() {
-      if (this.chartWidth === 0 || this.chartType === 'bar') {
+      if (this.chartWidth === 0 || this.chartType === "bar") {
         this.chartWidthNumber = this.w;
+      } else if (
+        this.chartType === "pie" &&
+        this.dataOption.width &&
+        this.dataOption.width > 0
+      ) {
+        this.chartWidthNumber = this.dataOption.width;
       } else {
         this.chartWidthNumber = this.chartWidth;
       }
     },
     orderCharts() {
-      this.$emit('orderCharts', this.order);
+      this.$emit("orderCharts", this.order);
     },
     generateOption(chartTypeParam) {
       if (chartTypeParam) {
         this.chartType = chartTypeParam;
       }
-      if (this.chartType === 'pie') {
-        this.dataOption = this.pieOption;
+      if (this.chartType === "pie") {
+        this.dataOption = this.formatPieOption(this.pieOption);
       } else {
         this.dataOption = this.loadOption;
       }
       if (this.dataOption.series) {
-        this.dataOption.series.forEach(item => {
-          item.type = this.chartType;
+        this.dataOption.series.forEach((item) => {
+          item.type = chartTypeParam;
         });
       }
       this.reload();
     },
+    formatPieOption(reformatPieOption) {
+      let finalPieOption = reformatPieOption;
+      /**
+       * 根据现有的 width，动态计算饼图各个模块的位置。
+       * 假设饼图共n个，  一行为c，一共r行
+       * 则 r 取 200 + 350 * c <= width 的最大值。
+       * 高度为： n/r 进一法取整数， height = 200*n
+       * 第一行
+       *    第一个饼图位置(center属性)为："center": ["200", "150"],title位置："left": "200","top": "200",
+       *    第二个饼图位置(center属性)为："center": ["550", "150"],title位置："left": "550","top": "200",
+       * 第二行
+       *    第一个饼图位置(center属性)为："center": ["200", "350"],title位置："left": "200","top": "400",
+       *    第二个饼图位置(center属性)为："center": ["550", "350"],title位置："left": "550","top": "400",
+       */
+      this.h = document.documentElement.clientHeight * 0.5;
+      // "series" "title"
+      if (
+        finalPieOption.series &&
+        finalPieOption.title &&
+        finalPieOption.series.length > 0 &&
+        finalPieOption.series.length === finalPieOption.title.length
+      ) {
+        let cNum = 0;
+        let rNum = 0;
+        let countWidth = this.w;
+        let countHeight = 0;
+        let allPieCount = finalPieOption.series.length;
+        if (countWidth >= 550) {
+          countWidth = countWidth - 200;
+          do {
+            cNum++;
+            countWidth = countWidth - 350;
+          } while (countWidth > 350);
+          if (cNum > 0) {
+            rNum = Math.ceil(allPieCount / cNum);
+            countHeight = 200 * rNum + 100;
+            if (countHeight > this.h) {
+              this.h = countHeight;
+            }
+            let pieRowIndex = 1; //饼状图起始行
+            for (let pieIndex = 0; pieIndex < allPieCount; pieIndex++) {
+              if (pieIndex >= cNum * pieRowIndex) {
+                pieRowIndex++;
+              }
+              let pieInRow = pieIndex;
+              if (pieIndex >= cNum) {
+                pieInRow = pieIndex % cNum;
+              }
+              finalPieOption.series[pieIndex].center = [
+                200 + 350 * pieInRow,
+                200 * pieRowIndex - 60,
+              ];
+              finalPieOption.title[pieIndex].left = 200 + 350 * pieInRow;
+              finalPieOption.title[pieIndex].top = 200 * pieRowIndex;
+            }
+            finalPieOption.width = this.w;
+          }
+        }
+      }
+      return finalPieOption;
+    },
     setPieOptionAndBarOption(barOption, pieOption) {
       if (barOption) {
         this.loadOption = barOption;
@@ -139,33 +266,32 @@ export default {
       }
     },
     reload() {
-      this.loading = true
+      this.loading = true;
       this.$nextTick(() => {
         this.loading = false;
-      })
+      });
     },
     fullScreen() {
       this.originalW = this.w;
-      this.originalH = this.h;
       this.w = document.body.clientWidth - 50;
-      this.h = document.body.clientHeight;
       this.isFullScreen = true;
-      this.$emit('hidePage', true);
+      this.$emit("hidePage", true);
     },
     unFullScreen() {
       this.w = this.originalW;
-      this.h = this.originalH;
       this.isFullScreen = false;
-      this.$emit('hidePage', false);
+      this.$emit("hidePage", false);
     },
     getImages(command) {
-      let imageType = 'image/png';
-      if (command === 'jpg') {
-        imageType = 'image/jpg';
+      let imageType = "image/png";
+      if (command === "jpg") {
+        imageType = "image/jpg";
       }
       let returnImageData = "";
-      if (document.getElementById('picChart')) {
-        let chartsCanvas = document.getElementById('picChart').querySelectorAll('canvas')[0];
+      if (document.getElementById("picChart")) {
+        let chartsCanvas = document
+          .getElementById("picChart")
+          .querySelectorAll("canvas")[0];
         if (chartsCanvas) {
           // toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码
           returnImageData = chartsCanvas && chartsCanvas.toDataURL(imageType);
@@ -175,46 +301,50 @@ export default {
       return returnImageData;
     },
     exportCommand(command) {
-      let fileName = 'report_pic.' + command;
-      if (document.getElementById('picChart')) {
-        let chartsCanvas = document.getElementById('picChart').querySelectorAll('canvas')[0]
-        let mime = 'image/png';
-        if (command === 'jpg') {
-          mime = 'image/jpg';
+      let fileName = "report_pic." + command;
+      if (document.getElementById("picChart")) {
+        let chartsCanvas = document
+          .getElementById("picChart")
+          .querySelectorAll("canvas")[0];
+        let mime = "image/png";
+        if (command === "jpg") {
+          mime = "image/jpg";
         }
         if (chartsCanvas) {
           // toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码
-          let imageUrl = chartsCanvas && chartsCanvas.toDataURL(mime)
-          if (navigator.userAgent.indexOf('Trident') > -1) {
+          let imageUrl = chartsCanvas && chartsCanvas.toDataURL(mime);
+          if (navigator.userAgent.indexOf("Trident") > -1) {
             // IE11
-            let arr = imageUrl.split(',')
+            let arr = imageUrl.split(",");
             // atob() 函数对已经使用base64编码编码的数据字符串进行解码
-            let bstr = atob(arr[1])
-            let bstrLen = bstr.length
+            let bstr = atob(arr[1]);
+            let bstrLen = bstr.length;
             // Uint8Array, 开辟 8 位无符号整数值的类型化数组。内容将初始化为 0
-            let u8arr = new Uint8Array(bstrLen)
+            let u8arr = new Uint8Array(bstrLen);
             while (bstrLen--) {
               // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码
-              u8arr[bstrLen] = bstr.charCodeAt(bstrLen)
+              u8arr[bstrLen] = bstr.charCodeAt(bstrLen);
             }
             //  msSaveOrOpenBlob 方法允许用户在客户端上保存文件，方法如同从 Internet 下载文件，这是此类文件保存到“下载”文件夹的原因
-            window.navigator.msSaveOrOpenBlob(new Blob([u8arr], {type: mime}), fileName);
+            window.navigator.msSaveOrOpenBlob(
+              new Blob([u8arr], { type: mime }),
+              fileName
+            );
           } else {
             // 其他浏览器
-            let $a = document.createElement('a')
-            $a.setAttribute('href', imageUrl)
-            $a.setAttribute('download', fileName)
-            $a.click()
+            let $a = document.createElement("a");
+            $a.setAttribute("href", imageUrl);
+            $a.setAttribute("download", fileName);
+            $a.click();
           }
         }
       }
     },
   },
-}
+};
 </script>
 
 <style scoped>
-
 .ms-test-chart-header {
   z-index: 999;
   width: 380px;
@@ -234,7 +364,7 @@ export default {
   font-size: 18px;
 }
 
-:deep(.echarts ) {
+:deep(.echarts) {
   height: calc(100vh / 1.95);
 }
 
@@ -258,8 +388,7 @@ export default {
   width: 100%;
 }
 
-:deep(.el-card__body ) {
+:deep(.el-card__body) {
   padding: 0px;
 }
-
 </style>
diff --git a/report-stat/frontend/src/business/projectstatistics/casecount/table/TestCaseCountTable.vue b/report-stat/frontend/src/business/projectstatistics/casecount/table/TestCaseCountTable.vue
index cdfea29ae3..3d14c96253 100644
--- a/report-stat/frontend/src/business/projectstatistics/casecount/table/TestCaseCountTable.vue
+++ b/report-stat/frontend/src/business/projectstatistics/casecount/table/TestCaseCountTable.vue
@@ -1,46 +1,63 @@
 <template>
   <div v-loading="loading" class="ms-div">
-    <el-card :style="{ width: w+'px'}">
+    <el-card :style="{ width: w + 'px' }">
       <el-row style="padding-top: 10px">
-        <p class="tip"><span style="margin-left: 5px"></span>{{ $t('commons.report_statistics.excel') }} </p>
+        <p class="tip">
+          <span style="margin-left: 5px"></span
+          >{{ $t("commons.report_statistics.excel") }}
+        </p>
       </el-row>
       <el-row>
         <el-table
           :data="tableData"
-          :max-height="tableHeight"
-          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
           row-key="id"
           border
-          class="ms-table">
-          <el-table-column
-            prop="name"
-            :label="groupName">
-          </el-table-column>
+          class="ms-table"
+        >
+          <el-table-column prop="name" :label="groupName"> </el-table-column>
           <el-table-column
             prop="allCount"
-            :label="$t('commons.report_statistics.count')">
+            :label="$t('commons.report_statistics.count')"
+          >
           </el-table-column>
           <el-table-column
             prop="testCaseCount"
-            :label="$t('api_test.home_page.failed_case_list.table_value.case_type.functional')"
+            :label="
+              $t(
+                'api_test.home_page.failed_case_list.table_value.case_type.functional'
+              )
+            "
             v-if="isShowColumn('testCase')"
           >
           </el-table-column>
           <el-table-column
             prop="apiCaseCount"
-            :label="$t('api_test.home_page.failed_case_list.table_value.case_type.api')"
+            :label="
+              $t(
+                'api_test.home_page.failed_case_list.table_value.case_type.api'
+              )
+            "
             v-if="isShowColumn('apiCase')"
           >
           </el-table-column>
           <el-table-column
             prop="scenarioCaseCount"
-            :label="$t('api_test.home_page.failed_case_list.table_value.case_type.scene')"
+            :label="
+              $t(
+                'api_test.home_page.failed_case_list.table_value.case_type.scene'
+              )
+            "
             v-if="isShowColumn('scenarioCase')"
           >
           </el-table-column>
           <el-table-column
             prop="loadCaseCount"
-            :label="$t('api_test.home_page.failed_case_list.table_value.case_type.load')"
+            :label="
+              $t(
+                'api_test.home_page.failed_case_list.table_value.case_type.load'
+              )
+            "
             v-if="isShowColumn('loadCase')"
           >
           </el-table-column>
@@ -62,15 +79,15 @@ export default {
       type: Boolean,
       default() {
         return false;
-      }
-    }
+      },
+    },
   },
   data() {
     return {
       tableHeight: "100px",
       w: document.documentElement.clientWidth - 760,
       loading: false,
-    }
+    };
   },
   created() {
     this.getTableHeight();
@@ -79,25 +96,30 @@ export default {
     }
   },
   methods: {
+    reCountWidth(isHideOther) {
+      if (isHideOther) {
+        this.w = document.documentElement.clientWidth - 50;
+      } else {
+        this.w = document.documentElement.clientWidth - 760;
+      }
+    },
     isShowColumn(type) {
       if (this.showColumns) {
-        return this.showColumns.findIndex(item => item === type) >= 0;
+        return this.showColumns.findIndex((item) => item === type) >= 0;
       } else {
         return false;
       }
-
     },
     getTableHeight() {
-      let countNumber = document.documentElement.clientHeight * 0.4 / 1 - 140;
+      let countNumber = (document.documentElement.clientHeight * 0.4) / 1 - 140;
       countNumber = Math.ceil(countNumber);
-      this.tableHeight = countNumber + 'px';
-    }
+      this.tableHeight = countNumber + "px";
+    },
   },
-}
+};
 </script>
 
 <style scoped>
-
 .tip {
   float: left;
   font-size: 14px;
@@ -115,8 +137,7 @@ export default {
   margin: 20px;
 }
 
-:deep( .el-card__body ) {
+:deep(.el-card__body) {
   padding: 0px;
 }
-
 </style>
diff --git a/report-stat/frontend/src/business/projectstatistics/track/TestAnalysisContainer.vue b/report-stat/frontend/src/business/projectstatistics/track/TestAnalysisContainer.vue
index b2614fc1e1..613a7244ed 100644
--- a/report-stat/frontend/src/business/projectstatistics/track/TestAnalysisContainer.vue
+++ b/report-stat/frontend/src/business/projectstatistics/track/TestAnalysisContainer.vue
@@ -1,23 +1,36 @@
 <template>
-  <div :style="{ height: h + 'px'}">
+  <div :style="{ height: h + 'px' }">
     <el-container v-loading="loading" style="overflow: scroll">
       <el-container class="ms-row">
-        <el-aside :width="!isHide ?'235px':'0px'" style="margin-left: 5px; max-height: 843px">
-          <history-report-data report-type="TEST_CASE_ANALYSIS"
-                               @selectReport="selectReport" @removeHistoryReportId="removeHistoryReportId"
-                               ref="historyReport"/>
+        <el-aside
+          :width="!isHide ? '235px' : '0px'"
+          style="margin-left: 5px; max-height: 843px"
+        >
+          <history-report-data
+            report-type="TEST_CASE_ANALYSIS"
+            @selectReport="selectReport"
+            @removeHistoryReportId="removeHistoryReportId"
+            ref="historyReport"
+          />
         </el-aside>
         <el-main class="ms-main" id="reportAnalysis">
           <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"/>
+            <test-analysis-table :tableData="tableData" />
           </div>
         </el-main>
-        <el-aside :width="!isHide ?'485px':'0px'">
-          <test-analysis-filter @filterCharts="filterCharts" ref="analysisFilter"/>
+        <el-aside :width="!isHide ? '485px' : '0px'">
+          <test-analysis-filter
+            @filterCharts="filterCharts"
+            ref="analysisFilter"
+          />
         </el-aside>
       </el-container>
     </el-container>
@@ -28,16 +41,25 @@
 import TestAnalysisChart from "./chart/TestAnalysisChart";
 import TestAnalysisTable from "./table/TestAnalysisTable";
 import TestAnalysisFilter from "./filter/TestAnalysisFilter";
-import {getCurrentProjectID} from "metersphere-frontend/src/utils/token";
-import {exportPdf} from "metersphere-frontend/src/utils";
-import {getAnalysisReport} from "@/api/report";
-import html2canvas from 'html2canvas';
+import { getCurrentProjectID } from "metersphere-frontend/src/utils/token";
+import { exportPdf } from "metersphere-frontend/src/utils";
+import { getAnalysisReport } from "@/api/report";
+import html2canvas from "html2canvas";
 import HistoryReportData from "../../base/HistoryReportData";
-import {createHistoryReport, selectHistoryReportById, updateHistoryReport} from "@/api/history-report";
+import {
+  createHistoryReport,
+  selectHistoryReportById,
+  updateHistoryReport,
+} from "@/api/history-report";
 
 export default {
   name: "TestAnalysisContainer",
-  components: {TestAnalysisChart, TestAnalysisTable, TestAnalysisFilter, HistoryReportData},
+  components: {
+    TestAnalysisChart,
+    TestAnalysisTable,
+    TestAnalysisFilter,
+    HistoryReportData,
+  },
   data() {
     return {
       isHide: false,
@@ -49,35 +71,41 @@ export default {
         yAxis: {},
         label: {},
         tooltip: {},
-        series: []
+        series: [],
       },
       tableData: [],
       h: document.documentElement.clientHeight - 40,
-    }
+    };
   },
   methods: {
     handleExport() {
-      let name = this.$t('commons.report_statistics.test_case_analysis');
+      this.hidePage(true);
+      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]);
-          });
+          html2canvas(document.getElementById("reportAnalysis"), {
+            scale: 2,
+          })
+            .then(function (canvas) {
+              exportPdf(name, [canvas]);
+            })
+            .then(() => {
+              this.hidePage(false);
+            });
         }, 1000);
       });
     },
     hidePage(isHide) {
       this.isHide = isHide;
+      this.$refs.analysisChart.reCountWidth(isHide);
     },
     close() {
-      this.$emit('closePage');
+      this.$emit("closePage");
     },
     init(opt) {
       this.loading = true;
       this.options = opt;
-      getAnalysisReport(opt).then(response => {
+      getAnalysisReport(opt).then((response) => {
         let data = response.data.chartDTO;
         let tableDTOs = response.data.tableDTOs;
         this.initPic(data, tableDTOs);
@@ -102,9 +130,9 @@ export default {
         tableData: this.tableData,
       };
       obj.dataOption = JSON.stringify(dataOptionObj);
-      obj.reportType = 'TEST_CASE_ANALYSIS';
+      obj.reportType = "TEST_CASE_ANALYSIS";
       updateHistoryReport(obj).then(() => {
-        this.$alert(this.$t('commons.save_success'));
+        this.$alert(this.$t("commons.save_success"));
         this.$refs.historyReport.initReportData();
       });
     },
@@ -119,9 +147,9 @@ export default {
         tableData: this.tableData,
       };
       obj.dataOption = JSON.stringify(dataOptionObj);
-      obj.reportType = 'TEST_CASE_ANALYSIS';
+      obj.reportType = "TEST_CASE_ANALYSIS";
       createHistoryReport(obj).then(() => {
-        this.$alert(this.$t('commons.save_success'));
+        this.$alert(this.$t("commons.save_success"));
         this.$refs.historyReport.initReportData();
       });
     },
@@ -132,11 +160,11 @@ export default {
         this.loadOption.xAxis = loadOptionParam.xaxis;
         this.loadOption.series = loadOptionParam.series;
         this.loadOption.grid = {
-          bottom: '75px',//距离下边距
-        }
-        this.loadOption.series.forEach(item => {
+          bottom: "75px", //距离下边距
+        };
+        this.loadOption.series.forEach((item) => {
           item.type = this.$refs.analysisChart.chartType;
-        })
+        });
       }
       if (tableData) {
         this.tableData = tableData;
@@ -148,32 +176,37 @@ export default {
       if (selectId) {
         this.loading = true;
         let paramObj = {
-          id: selectId
-        }
-        selectHistoryReportById(paramObj).then(response => {
-          let reportData = response.data;
-          if (reportData) {
-            selectName = reportData.name;
-            if (reportData.dataOption) {
-              let dataOptionObj = JSON.parse(reportData.dataOption);
-              this.initPic(dataOptionObj.loadOption, dataOptionObj.pieOption, dataOptionObj.tableData);
+          id: selectId,
+        };
+        selectHistoryReportById(paramObj)
+          .then((response) => {
+            let reportData = response.data;
+            if (reportData) {
+              selectName = reportData.name;
+              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);
+              }
             }
-            if (reportData.selectOption) {
-              let selectOptionObj = JSON.parse(reportData.selectOption);
-              this.$refs.analysisFilter.initSelectOption(selectOptionObj);
-            }
-          }
-          this.$emit('initHistoryReportId', selectId, selectName);
-          this.loading = false;
-        }).catch(() => {
-          this.loading = false;
-          this.removeHistoryReportId();
-        });
-
+            this.$emit("initHistoryReportId", selectId, selectName);
+            this.loading = false;
+          })
+          .catch(() => {
+            this.loading = false;
+            this.removeHistoryReportId();
+          });
       }
     },
     removeHistoryReportId() {
-      this.$emit('initHistoryReportId', "", "");
+      this.$emit("initHistoryReportId", "", "");
     },
     selectAndSaveReport(reportName) {
       let opt = this.$refs.analysisFilter.getOption();
@@ -181,14 +214,14 @@ export default {
       this.saveReport(reportName);
     },
     saveAndSaveAsReport(reportName, saveType) {
-      if (saveType === 'save') {
+      if (saveType === "save") {
         this.saveReport(reportName);
-      } else if (saveType === 'saveAs') {
+      } else if (saveType === "saveAs") {
         this.selectAndSaveReport(reportName);
       }
-    }
+    },
   },
-}
+};
 </script>
 
 <style scoped>
@@ -196,7 +229,7 @@ export default {
   padding-top: 10px;
 }
 
-:deep(.el-main ) {
+:deep(.el-main) {
   padding: 0px 20px 0px;
 }
 </style>
diff --git a/report-stat/frontend/src/business/projectstatistics/track/chart/TestAnalysisChart.vue b/report-stat/frontend/src/business/projectstatistics/track/chart/TestAnalysisChart.vue
index 1f0630cb1c..9d7161fc38 100644
--- a/report-stat/frontend/src/business/projectstatistics/track/chart/TestAnalysisChart.vue
+++ b/report-stat/frontend/src/business/projectstatistics/track/chart/TestAnalysisChart.vue
@@ -1,25 +1,69 @@
 <template>
   <div v-loading="loading">
-    <el-card class="ms-test-chart" :style="{ width: w+'px', height: h + 'px'}" ref="msDrawer">
+    <el-card
+      class="ms-test-chart"
+      :style="{ width: w + 'px', height: h + 'px' }"
+      ref="msDrawer"
+    >
       <el-row class="ms-row">
-        <p class="tip"><span style="margin-left: 5px"></span> {{ $t('commons.report_statistics.chart') }} </p>
+        <p class="tip">
+          <span style="margin-left: 5px"></span>
+          {{ $t("commons.report_statistics.chart") }}
+        </p>
         <div class="ms-test-chart-header">
-          <el-select v-model="chartType" class="ms-col-type" size="mini" style="width: 100px" @change="generateOption">
-            <el-option :key="t.id" :value="t.id" :label="t.name" v-for="t in charts"/>
+          <el-select
+            v-model="chartType"
+            class="ms-col-type"
+            size="mini"
+            style="width: 100px"
+            @change="generateOption"
+          >
+            <el-option
+              :key="t.id"
+              :value="t.id"
+              :label="t.name"
+              v-for="t in charts"
+            />
           </el-select>
           <span style="margin: 0px 10px 10px">|</span>
-          <el-select v-model="order" class="ms-col-type" size="mini" style="width: 120px" @change="orderCharts">
-            <el-option :key="t.id" :value="t.id" :label="t.name" v-for="t in orders"/>
+          <el-select
+            v-model="order"
+            class="ms-col-type"
+            size="mini"
+            style="width: 120px"
+            @change="orderCharts"
+          >
+            <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>
-        <ms-chart ref="chart1" :options="loadOption" class="chart-config" :autoresize="true"/>
+        <ms-chart
+          ref="chart1"
+          :options="loadOption"
+          class="chart-config"
+          :autoresize="true"
+        />
       </el-row>
     </el-card>
   </div>
@@ -32,7 +76,7 @@ import MsChart from "metersphere-frontend/src/components/chart/MsChart";
 
 export default {
   name: "TestAnalysisChart",
-  components: {MsChart},
+  components: { MsChart },
   props: {
     loadOption: {},
   },
@@ -49,35 +93,50 @@ export default {
         type: Boolean,
         default() {
           return true;
-        }
+        },
       },
       // 头部部分
       chartType: "line",
-      charts: [{id: 'line', name: this.$t('commons.report_statistics.line')}, {id: 'bar', name: this.$t('commons.report_statistics.bar')}],
+      charts: [
+        { id: "line", name: this.$t("commons.report_statistics.line") },
+        { id: "bar", name: this.$t("commons.report_statistics.bar") },
+      ],
       order: "",
-      orders: [{id: '', name: this.$t('commons.sort_default')}, {id: 'desc', name: this.$t('commons.report_statistics.desc')}, {
-        id: 'asc',
-        name: this.$t('commons.report_statistics.asc')
-      }],
+      orders: [
+        { id: "", name: this.$t("commons.sort_default") },
+        { id: "desc", name: this.$t("commons.report_statistics.desc") },
+        {
+          id: "asc",
+          name: this.$t("commons.report_statistics.asc"),
+        },
+      ],
       loading: false,
       options: {},
-    }
+    };
   },
   methods: {
+    reCountWidth(isHideOther) {
+      if (isHideOther) {
+        this.w = document.documentElement.clientWidth - 20;
+      } else {
+        this.w = document.documentElement.clientWidth - 760;
+      }
+      this.reload();
+    },
     orderCharts() {
-      this.$emit('orderCharts', this.order);
+      this.$emit("orderCharts", this.order);
     },
     generateOption() {
-      this.loadOption.series.forEach(item => {
+      this.loadOption.series.forEach((item) => {
         item.type = this.chartType;
-      })
+      });
       this.reload();
     },
     reload() {
-      this.loading = true
+      this.loading = true;
       this.$nextTick(() => {
-        this.loading = false
-      })
+        this.loading = false;
+      });
     },
     fullScreen() {
       this.originalW = this.w;
@@ -85,23 +144,22 @@ export default {
       this.w = document.body.clientWidth - 50;
       this.h = document.body.clientHeight;
       this.isFullScreen = true;
-      this.$emit('hidePage', true);
+      this.$emit("hidePage", true);
     },
     unFullScreen() {
       this.w = this.originalW;
       this.h = this.originalH;
       this.isFullScreen = false;
-      this.$emit('hidePage', false);
+      this.$emit("hidePage", false);
     },
     getOptions() {
       return this.loadOption;
-    }
+    },
   },
-}
+};
 </script>
 
 <style scoped>
-
 .ms-test-chart-header {
   z-index: 999;
   width: 320px;
@@ -121,7 +179,7 @@ export default {
   font-size: 18px;
 }
 
-:deep(.echarts ) {
+:deep(.echarts) {
   height: calc(100vh / 1.95);
 }
 
@@ -141,8 +199,7 @@ export default {
   width: 100%;
 }
 
-:deep(.el-card__body ) {
+:deep(.el-card__body) {
   padding: 0px;
 }
-
 </style>