From e84588723429725491d937c0317c6a45c985005c Mon Sep 17 00:00:00 2001
From: metersphere-bot <78466014+metersphere-bot@users.noreply.github.com>
Date: Wed, 25 Aug 2021 21:31:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=88=86=E4=BA=AB=E6=9F=A5=E7=9C=8B?=
 =?UTF-8?q?=E6=80=A7=E8=83=BD=E6=B5=8B=E8=AF=95=E6=8A=A5=E5=91=8A=E6=8A=A5?=
 =?UTF-8?q?=E9=94=99=20(#5700)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: chenjianxing <jianxing.chen@fit2cloud.com>
---
 .../api/service/ApiScenarioReportService.java |   2 +-
 .../controller/ShareController.java           |  85 ++-
 .../service/TestPlanScenarioCaseService.java  |   2 +-
 .../report/components/ErrorLog.vue            |  84 ++-
 .../report/components/LogDetails.vue          |  69 +-
 .../report/components/MonitorCard.vue         |  41 +-
 .../report/components/RequestStatistics.vue   |  30 +-
 .../report/components/TestDetails.vue         | 247 +++----
 .../report/components/TestOverview.vue        | 606 ++++++++++--------
 .../comonents/load/LoadCaseReportView.vue     |  27 +-
 frontend/src/common/js/utils.js               |   4 +-
 frontend/src/network/load-test.js             |  91 +++
 12 files changed, 809 insertions(+), 479 deletions(-)

diff --git a/backend/src/main/java/io/metersphere/api/service/ApiScenarioReportService.java b/backend/src/main/java/io/metersphere/api/service/ApiScenarioReportService.java
index 157a0ae86a..77d756e4f3 100644
--- a/backend/src/main/java/io/metersphere/api/service/ApiScenarioReportService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ApiScenarioReportService.java
@@ -94,7 +94,7 @@ public class ApiScenarioReportService {
     public APIScenarioReportResult get(String reportId) {
         APIScenarioReportResult reportResult = extApiScenarioReportMapper.get(reportId);
         ApiScenarioReportDetail detail = apiScenarioReportDetailMapper.selectByPrimaryKey(reportId);
-        if (detail != null) {
+        if (detail != null && reportResult != null) {
             reportResult.setContent(new String(detail.getContent(), StandardCharsets.UTF_8));
         }
         return reportResult;
diff --git a/backend/src/main/java/io/metersphere/controller/ShareController.java b/backend/src/main/java/io/metersphere/controller/ShareController.java
index 4cd7edb8de..a0ce8897c8 100644
--- a/backend/src/main/java/io/metersphere/controller/ShareController.java
+++ b/backend/src/main/java/io/metersphere/controller/ShareController.java
@@ -1,5 +1,7 @@
 package io.metersphere.controller;
 
+import com.github.pagehelper.Page;
+import com.github.pagehelper.PageHelper;
 import io.metersphere.api.dto.APIReportResult;
 import io.metersphere.api.dto.automation.APIScenarioReportResult;
 import io.metersphere.api.dto.automation.TestPlanFailureApiDTO;
@@ -8,9 +10,15 @@ import io.metersphere.api.service.ApiDefinitionService;
 import io.metersphere.api.service.ApiScenarioReportService;
 import io.metersphere.api.service.ShareInfoService;
 import io.metersphere.base.domain.IssuesDao;
+import io.metersphere.base.domain.LoadTestReportLog;
 import io.metersphere.base.domain.LoadTestReportWithBLOBs;
-import io.metersphere.performance.base.ReportTimeInfo;
+import io.metersphere.commons.utils.PageUtils;
+import io.metersphere.commons.utils.Pager;
+import io.metersphere.dto.LogDetailDTO;
+import io.metersphere.performance.base.*;
 import io.metersphere.performance.dto.LoadTestExportJmx;
+import io.metersphere.performance.dto.MetricData;
+import io.metersphere.performance.service.MetricQueryService;
 import io.metersphere.performance.service.PerformanceReportService;
 import io.metersphere.performance.service.PerformanceTestService;
 import io.metersphere.track.dto.TestPlanCaseDTO;
@@ -53,6 +61,8 @@ public class ShareController {
     PerformanceTestService performanceTestService;
     @Resource
     TestPlanReportService testPlanReportService;
+    @Resource
+    MetricQueryService metricService;
 
     @GetMapping("/issues/plan/get/{shareId}/{planId}")
     public List<IssuesDao> getIssuesByPlanoId(@PathVariable String shareId, @PathVariable String planId) {
@@ -150,13 +160,13 @@ public class ShareController {
         return testPlanLoadCaseService.isExistReport(request);
     }
 
-    @GetMapping("/performance/report/get-jmx-content/{reportId}")
-    public LoadTestExportJmx getJmxContent(@PathVariable String reportId) {
+    @GetMapping("/performance/report/get-jmx-content/{shareId}/{reportId}")
+    public LoadTestExportJmx getJmxContent(@PathVariable String shareId, @PathVariable String reportId) {
         return performanceReportService.getJmxContent(reportId);
     }
 
-    @GetMapping("/performance/get-jmx-content/{testId}")
-    public List<LoadTestExportJmx> getOldJmxContent(@PathVariable String testId) {
+    @GetMapping("/performance/get-jmx-content/{shareId}/{testId}")
+    public List<LoadTestExportJmx> getOldJmxContent(@PathVariable String shareId, @PathVariable String testId) {
 //        checkPermissionService.checkPerformanceTestOwner(testId);
         return performanceTestService.getJmxContent(testId);
     }
@@ -167,4 +177,69 @@ public class ShareController {
         return testPlanReportService.getReport(reportId);
     }
 
+    @GetMapping("/performance/report/content/testoverview/{shareId}/{reportId}")
+    public TestOverview getTestOverview(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getTestOverview(reportId);
+    }
+
+    @GetMapping("/performance/report/content/load_chart/{shareId}/{reportId}")
+    public List<ChartsData> getLoadChartData(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getLoadChartData(reportId);
+    }
+
+    @GetMapping("/performance/report/content/res_chart/{shareId}/{reportId}")
+    public List<ChartsData> getResponseTimeChartData(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getResponseTimeChartData(reportId);
+    }
+
+    @GetMapping("/performance/report/content/error_chart/{shareId}/{reportId}")
+    public List<ChartsData> getErrorChartData(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getErrorChartData(reportId);
+    }
+
+    @GetMapping("/performance/report/content/response_code_chart/{shareId}/{reportId}")
+    public List<ChartsData> getResponseCodeChartData(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getResponseCodeChartData(reportId);
+    }
+
+    @GetMapping("/performance/report/content/{shareId}/{reportKey}/{reportId}")
+    public List<ChartsData> getReportChart(@PathVariable String shareId, @PathVariable String reportKey, @PathVariable String reportId) {
+        return performanceReportService.getReportChart(reportKey, reportId);
+    }
+
+    @GetMapping("/performance/report/content/{shareId}/{reportId}")
+    public List<Statistics> getReportContent(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getReportStatistics(reportId);
+    }
+
+    @GetMapping("/performance/report/content/errors/{shareId}/{reportId}")
+    public List<Errors> getReportErrors(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getReportErrors(reportId);
+    }
+
+    @GetMapping("/performance/report/content/errors_top5/{shareId}/{reportId}")
+    public List<ErrorsTop5> getReportErrorsTop5(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getReportErrorsTOP5(reportId);
+    }
+
+    @GetMapping("/performance/report/log/resource/{shareId}/{reportId}")
+    public List<LogDetailDTO> getResourceIds(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getReportLogResource(reportId);
+    }
+
+    @GetMapping("/performance/report/log/{shareId}/{reportId}/{resourceId}/{goPage}")
+    public Pager<List<LoadTestReportLog>> logs(@PathVariable String shareId, @PathVariable String reportId, @PathVariable String resourceId, @PathVariable int goPage) {
+        Page<Object> page = PageHelper.startPage(goPage, 1, true);
+        return PageUtils.setPageInfo(page, performanceReportService.getReportLogs(reportId, resourceId));
+    }
+
+    @GetMapping("/metric/query/{shareId}/{id}")
+    public List<MetricData> queryMetric(@PathVariable String shareId, @PathVariable("id") String reportId) {
+        return metricService.queryMetric(reportId);
+    }
+
+    @GetMapping("/metric/query/resource/{shareId}/{id}")
+    public List<String> queryReportResource(@PathVariable String shareId, @PathVariable("id") String reportId) {
+        return metricService.queryReportResource(reportId);
+    }
 }
diff --git a/backend/src/main/java/io/metersphere/track/service/TestPlanScenarioCaseService.java b/backend/src/main/java/io/metersphere/track/service/TestPlanScenarioCaseService.java
index 209c62df7f..283b808112 100644
--- a/backend/src/main/java/io/metersphere/track/service/TestPlanScenarioCaseService.java
+++ b/backend/src/main/java/io/metersphere/track/service/TestPlanScenarioCaseService.java
@@ -78,7 +78,7 @@ public class TestPlanScenarioCaseService {
 
         apiTestCases.forEach(item -> {
             Project project = projectMap.get(item.getProjectId());
-            if (project.getScenarioCustomNum() != null && project.getScenarioCustomNum()) {
+            if (project != null && project.getScenarioCustomNum() != null && project.getScenarioCustomNum()) {
                 item.setCustomNum(item.getCustomNum());
             } else {
                 item.setCustomNum(item.getNum().toString());
diff --git a/frontend/src/business/components/performance/report/components/ErrorLog.vue b/frontend/src/business/components/performance/report/components/ErrorLog.vue
index 6b47234157..9d8196f91b 100644
--- a/frontend/src/business/components/performance/report/components/ErrorLog.vue
+++ b/frontend/src/business/components/performance/report/components/ErrorLog.vue
@@ -153,6 +153,11 @@
 </template>
 
 <script>
+import {
+  getPerformanceReportErrorsContent, getPerformanceReportErrorsTop5,
+  getSharePerformanceReportErrorsContent, getSharePerformanceReportErrorsTop5
+} from "@/network/load-test";
+
 export default {
   name: "ErrorLog",
   data() {
@@ -167,40 +172,58 @@ export default {
       id: ''
     };
   },
+  props: ['report', 'isShare', 'shareId', 'planReportTemplate'],
   methods: {
     initTableData() {
-      this.$get("/performance/report/content/errors/" + this.id).then(res => {
-        this.tableData = res.data.data;
-      }).catch(() => {
-        this.tableData = [];
+      if (this.planReportTemplate) {
+        this.dataData = this.planReportTemplate.errorsContent;
+        this.handleGetTop5(this.planReportTemplate.errorTop5);
+      } else if (this.isShare){
+        getSharePerformanceReportErrorsContent(this.shareId, this.id).then(res => {
+          this.tableData = res.data.data;
+        });
+
+        getSharePerformanceReportErrorsTop5(this.shareId, this.id).then(res => {
+          this.handleGetTop5(res.data.data);
+        });
+      } else {
+        getPerformanceReportErrorsContent(this.id).then(res => {
+          this.tableData = res.data.data;
+        });
+
+        getPerformanceReportErrorsTop5(this.id).then(res => {
+          this.handleGetTop5(res.data.data);
+        });
+      }
+    },
+    handleGetTop5(data) {
+      this.errorTop1 = data.map(e => {
+        return {error1: e.error1, error1Size: e.error1Size};
       });
-      this.$get("/performance/report/content/errors_top5/" + this.id).then(res => {
-        this.errorTop1 = res.data.data.map(e => {
-          return {error1: e.error1, error1Size: e.error1Size};
-        });
-        this.errorTop2 = res.data.data.map(e => {
-          return {error2: e.error2, error2Size: e.error2Size};
-        });
-        this.errorTop3 = res.data.data.map(e => {
-          return {error3: e.error3, error3Size: e.error3Size};
-        });
-        this.errorTop4 = res.data.data.map(e => {
-          return {error4: e.error4, error4Size: e.error4Size};
-        });
-        this.errorTop5 = res.data.data.map(e => {
-          return {error5: e.error5, error5Size: e.error5Size};
-        });
-        this.errorSummary = res.data.data.map(e => {
-          return {sample: e.sample, samples: e.samples, errorsAllSize: e.errorsAllSize};
-        });
-      }).catch(() => {
-        this.errorTop1 = [];
-        this.errorTop2 = [];
-        this.errorTop3 = [];
-        this.errorTop4 = [];
-        this.errorTop5 = [];
-        this.errorSummary = [];
+      this.errorTop2 = data.map(e => {
+        return {error2: e.error2, error2Size: e.error2Size};
       });
+      this.errorTop3 = data.map(e => {
+        return {error3: e.error3, error3Size: e.error3Size};
+      });
+      this.errorTop4 = data.map(e => {
+        return {error4: e.error4, error4Size: e.error4Size};
+      });
+      this.errorTop5 = data.map(e => {
+        return {error5: e.error5, error5Size: e.error5Size};
+      });
+      this.errorSummary = data.map(e => {
+        return {sample: e.sample, samples: e.samples, errorsAllSize: e.errorsAllSize};
+      });
+    },
+    initData() {
+      this.tableData = [];
+      this.errorTop1 = [];
+      this.errorTop2 = [];
+      this.errorTop3 = [];
+      this.errorTop4 = [];
+      this.errorTop5 = [];
+      this.errorSummary = [];
     }
   },
   watch: {
@@ -226,7 +249,6 @@ export default {
       deep: true
     }
   },
-  props: ['report']
 };
 </script>
 
diff --git a/frontend/src/business/components/performance/report/components/LogDetails.vue b/frontend/src/business/components/performance/report/components/LogDetails.vue
index 3e49988119..696eef9fb8 100644
--- a/frontend/src/business/components/performance/report/components/LogDetails.vue
+++ b/frontend/src/business/components/performance/report/components/LogDetails.vue
@@ -20,6 +20,11 @@
 
 <script>
 
+import {
+  getPerformanceReportLogResource, getPerformanceReportLogResourceDetail,
+  getSharePerformanceReportLogResource, getSharePerformanceReportLogResourceDetail,
+} from "@/network/load-test";
+
 export default {
   name: "LogDetails",
   data() {
@@ -36,24 +41,36 @@ export default {
       logStatus: {}
     };
   },
+  props: ['report', 'export', 'isShare', 'shareId', 'planReportTemplate'],
   methods: {
     getResource() {
       this.init = true;
       this.active = '0';
-      this.result = this.$get("/performance/report/log/resource/" + this.id, data => {
-        this.resource = data.data;
-        if (!this.resource || this.resource.length === 0) {
-          this.init = false;
-        }
-        this.page = data.data.map(item => item.resourceId).reduce((result, curr) => {
-          result[curr] = 1;
-          return result;
-        }, {});
-        this.logContent = data.data.map(item => item.resourceId).reduce((result, curr) => {
-          result[curr] = [];
-          return result;
-        }, {});
-      });
+      if (this.planReportTemplate) {
+        this.handleGetLogResource(this.planReportTemplate.logResource);
+      } else if (this.isShare){
+        getSharePerformanceReportLogResource(this.shareId, this.id, (data) => {
+          this.handleGetLogResource(data);
+        });
+      } else {
+        getPerformanceReportLogResource(this.id, (data) => {
+          this.handleGetLogResource(data);
+        });
+      }
+    },
+    handleGetLogResource(data) {
+      this.resource = data;
+      if (!this.resource || this.resource.length === 0) {
+        this.init = false;
+      }
+      this.page = data.map(item => item.resourceId).reduce((result, curr) => {
+        result[curr] = 1;
+        return result;
+      }, {});
+      this.logContent = data.map(item => item.resourceId).reduce((result, curr) => {
+        result[curr] = [];
+        return result;
+      }, {});
     },
     load(resourceId) {
       if (this.loading || this.page[resourceId] > this.pageCount) {
@@ -61,15 +78,24 @@ export default {
       }
       this.logStatus[resourceId] = true;
       this.loading = true;
-      let url = "/performance/report/log/" + this.id + "/" + resourceId + "/" + this.page[resourceId];
-      this.$get(url, res => {
-        let data = res.data;
-        data.listObject.forEach(log => {
-          this.logContent[resourceId].push(log);
+      if (this.planReportTemplate) {
+        this.handleGetLogResourceDetail(this.planReportTemplate.logResourceDetail, resourceId);
+      } else if (this.isShare){
+        getSharePerformanceReportLogResourceDetail(this.shareId, this.id, resourceId, this.page[resourceId], data => {
+          this.handleGetLogResourceDetail(data, resourceId);
         });
-        this.page[resourceId]++;
-        this.loading = false;
+      } else {
+        getPerformanceReportLogResourceDetail(this.id, resourceId, this.page[resourceId], data => {
+          this.handleGetLogResourceDetail(data, resourceId);
+        });
+      }
+    },
+    handleGetLogResourceDetail(data, resourceId) {
+      data.listObject.forEach(log => {
+        this.logContent[resourceId].push(log);
       });
+      this.page[resourceId]++;
+      this.loading = false;
     },
     selectTab(tab) {
       let resourceId = tab.$vnode.key;
@@ -135,7 +161,6 @@ export default {
       deep: true
     }
   },
-  props: ['report']
 };
 </script>
 
diff --git a/frontend/src/business/components/performance/report/components/MonitorCard.vue b/frontend/src/business/components/performance/report/components/MonitorCard.vue
index 68a9584dc0..58ded80778 100644
--- a/frontend/src/business/components/performance/report/components/MonitorCard.vue
+++ b/frontend/src/business/components/performance/report/components/MonitorCard.vue
@@ -29,12 +29,16 @@
 <script>
 
 import MsChart from "@/business/components/common/chart/MsChart";
+import {
+  getPerformanceMetricQuery, getPerformanceMetricQueryResource,
+  getSharePerformanceMetricQuery, getSharePerformanceMetricQueryResource,
+} from "@/network/load-test";
 
 const color = ['#60acfc', '#32d3eb', '#5bc49f', '#feb64d', '#ff7c7c', '#9287e7', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
 
 export default {
   name: "MonitorCard",
-  props: ['report'],
+  props: ['report', 'export', 'isShare', 'shareId', 'planReportTemplate'],
   components: {MsChart},
   data() {
     return {
@@ -104,22 +108,29 @@ export default {
   methods: {
     getResource() {
       // this.init = true;
-      this.result = this.$get("/metric/query/resource/" + this.id)
-        .then(response => {
+      if (this.planReportTemplate) {
+        this.totalOption = this.getOption(this.planReportTemplate.metricResource);
+      } else if (this.isShare){
+        getSharePerformanceMetricQueryResource(this.shareId, this.id).then(response => {
           this.instances = response.data.data;
-          this.$get("/metric/query/" + this.id)
-            .then(result => {
-              if (result) {
-                this.data = result.data.data;
-                this.totalOption = this.getOption(this.instances[0]);
-              }
-            })
-            .catch(() => {
-            });
-        })
-        .catch(() => {
+          getSharePerformanceMetricQuery(this.shareId, this.id).then(result => {
+            if (result) {
+              this.data = result.data.data;
+              this.totalOption = this.getOption(this.instances[0]);
+            }
+          });
         });
-
+      } else {
+        getPerformanceMetricQueryResource(this.id).then(response => {
+          this.instances = response.data.data;
+          getPerformanceMetricQuery(this.id).then(result => {
+            if (result) {
+              this.data = result.data.data;
+              this.totalOption = this.getOption(this.instances[0]);
+            }
+          });
+        });
+      }
     },
     handleChecked(id) {
       this.totalOption = {};
diff --git a/frontend/src/business/components/performance/report/components/RequestStatistics.vue b/frontend/src/business/components/performance/report/components/RequestStatistics.vue
index 0c04b42756..587376a890 100644
--- a/frontend/src/business/components/performance/report/components/RequestStatistics.vue
+++ b/frontend/src/business/components/performance/report/components/RequestStatistics.vue
@@ -130,6 +130,10 @@
 </template>
 
 <script>
+import {
+  getPerformanceReportContent,getSharePerformanceReportContent,
+} from "@/network/load-test";
+
 export default {
   name: "RequestStatistics",
   data() {
@@ -142,14 +146,27 @@ export default {
       showBtn: true,
     }
   },
+  props: ['report', 'isShare', 'shareId', 'planReportTemplate'],
   methods: {
     initTableData() {
-      this.$get("/performance/report/content/" + this.id).then(res => {
-        this.tableData = res.data.data;
-        this.originalData = res.data.data;
-      }).catch(() => {
-        this.tableData = [];
-      })
+      if (this.planReportTemplate) {
+        let data = this.planReportTemplate.content;
+        this.buildInfo(data);
+      } else if (this.isShare){
+        getSharePerformanceReportContent(this.shareId, this.id).then(res => {
+          this.tableData = res.data.data;
+          this.originalData = res.data.data;
+        }).catch(() => {
+          this.tableData = [];
+        })
+      } else {
+        getPerformanceReportContent(this.id).then(res => {
+          this.tableData = res.data.data;
+          this.originalData = res.data.data;
+        }).catch(() => {
+          this.tableData = [];
+        })
+      }
     },
     click(column) {
       this.searchLabel = '';
@@ -182,7 +199,6 @@ export default {
       deep: true
     }
   },
-  props: ['report']
 }
 </script>
 
diff --git a/frontend/src/business/components/performance/report/components/TestDetails.vue b/frontend/src/business/components/performance/report/components/TestDetails.vue
index de4a53f124..60d70ae128 100644
--- a/frontend/src/business/components/performance/report/components/TestDetails.vue
+++ b/frontend/src/business/components/performance/report/components/TestDetails.vue
@@ -293,6 +293,10 @@
 
 <script>
 import MsChart from "@/business/components/common/chart/MsChart";
+import {
+  getPerformanceReportDetailContent,
+  getSharePerformanceReportDetailContent,
+} from "@/network/load-test";
 
 const color = ['#60acfc', '#32d3eb', '#5bc49f', '#feb64d', '#ff7c7c', '#9287e7', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
 
@@ -317,7 +321,7 @@ const CHART_MAP = [
 export default {
   name: "TestDetails",
   components: {MsChart},
-  props: ['report', 'export'],
+  props: ['report', 'export', 'isShare', 'shareId', 'planReportTemplate'],
   data() {
     return {
       result: {},
@@ -455,17 +459,27 @@ export default {
       this.resetDefault();
     },
     getCheckOptions(reportKey) {
-      this.$get("/performance/report/content/" + reportKey + "/" + this.id)
-        .then(res => {
-          let data = res.data.data;
-          if (!data || data.length === 0) {
-            this.init = false;
-            return;
-          }
-          let yAxisIndex0List = data.filter(m => m.yAxis2 === -1).map(m => m.groupName);
-          yAxisIndex0List = this._unique(yAxisIndex0List);
-          this.checkOptions[reportKey] = ['ALL'].concat(yAxisIndex0List);
+      if (this.planReportTemplate) {
+        let data = this.planReportTemplate.detailContent;
+        this.handleGetCheckOptions(data, reportKey);
+      } else if (this.isShare){
+        return getSharePerformanceReportDetailContent(this.shareId, reportKey, this.id).then(res => {
+          this.handleGetCheckOptions(res.data.data, reportKey);
         });
+      } else {
+        return getPerformanceReportDetailContent(reportKey, this.id).then(res => {
+          this.handleGetCheckOptions(res.data.data, reportKey);
+        });
+      }
+    },
+    handleGetCheckOptions(data, reportKey) {
+      if (!data || data.length === 0) {
+        this.init = false;
+        return;
+      }
+      let yAxisIndex0List = data.filter(m => m.yAxis2 === -1).map(m => m.groupName);
+      yAxisIndex0List = this._unique(yAxisIndex0List);
+      this.checkOptions[reportKey] = ['ALL'].concat(yAxisIndex0List);
     },
     getTotalChart() {
       this.result.loading = true;
@@ -475,112 +489,125 @@ export default {
       this.baseOption.yAxis = [];
       this.legend = [];
       let promises = [];
-      for (let name in this.checkList) {
-        promises.push(this.getChart(name, this.checkList[name]));
-      }
-      Promise.all(promises).then((res) => {
-        res = res.filter(v => !!v);
-        // console.log(res);
-        for (let i = 0; i < res.length; i++) {
-          if (i === 0) {
-            this.baseOption.yAxis.push({
-              name: this.$t('load_test.report.' + res[i].reportKey),
-              type: 'value',
-              min: 0,
-              position: 'left',
-              boundaryGap: [0, '100%']
-            });
-          } else {
-            this.baseOption.yAxis.push({
-              name: this.$t('load_test.report.' + res[i].reportKey),
-              type: 'value',
-              min: 0,
-              position: 'right',
-              nameRotate: 20,
-              offset: (i - 1) * 50,
-              boundaryGap: [0, '100%']
-            });
-          }
-          this.totalOption = this.generateOption(this.baseOption, res[i].data, i);
+      if (this.planReportTemplate) {
+        let data = this.planReportTemplate.detailContent;
+        this.buildInfo(data);
+      } else {
+        for (let name in this.checkList) {
+          promises.push(this.getChart(name, this.checkList[name]));
         }
-        this.totalOption.grid.right = (res.length - 1) * 5 + '%';
-        this.changeDataZoom({start: 0, end: 100});
-        this.result.loading = false;
-      }).catch(() => {
-        this.result.loading = false;
-      });
+        Promise.all(promises).then((res) => {
+          this.handleGetTotalChart(res);
+        }).catch(() => {
+          this.result.loading = false;
+        });
+      }
+    },
+    handleGetTotalChart(res) {
+      res = res.filter(v => !!v);
+      // console.log(res);
+      for (let i = 0; i < res.length; i++) {
+        if (i === 0) {
+          this.baseOption.yAxis.push({
+            name: this.$t('load_test.report.' + res[i].reportKey),
+            type: 'value',
+            min: 0,
+            position: 'left',
+            boundaryGap: [0, '100%']
+          });
+        } else {
+          this.baseOption.yAxis.push({
+            name: this.$t('load_test.report.' + res[i].reportKey),
+            type: 'value',
+            min: 0,
+            position: 'right',
+            nameRotate: 20,
+            offset: (i - 1) * 50,
+            boundaryGap: [0, '100%']
+          });
+        }
+        this.totalOption = this.generateOption(this.baseOption, res[i].data, i);
+      }
+      this.totalOption.grid.right = (res.length - 1) * 5 + '%';
+      this.changeDataZoom({start: 0, end: 100});
+      this.result.loading = false;
     },
     getChart(reportKey, checkList) {
       if (!checkList || checkList.length === 0) {
         return;
       }
-      return this.$get("/performance/report/content/" + reportKey + "/" + this.id)
-        .then(res => {
-          let data = res.data.data;
-          let allData = [];
-          let checkAllOption = checkList.indexOf('ALL') > -1;
-          if (checkAllOption) {
-            let avgOpt = [
-              'ResponseTimeChart',
-              'ResponseTimePercentilesChart',
-              'LatencyChart',
-            ];
-            let result = groupBy(data, 'xAxis');
-            for (const xAxis in result) {
-              let yAxis = result[xAxis].map(a => a.yAxis).reduce((a, b) => a + b, 0);
-              if (avgOpt.indexOf(reportKey) > -1) {
-                yAxis = yAxis / result[xAxis].length;
-              }
-              allData.push({
-                groupName: 'ALL',
-                xAxis: xAxis,
-                yAxis: yAxis
-              });
-            }
-          }
-
-          //
-          data = data.filter(item => {
-            if (checkList.indexOf(item.groupName) > -1) {
-              return true;
-            }
-          });
-
-          // 选中了all
-          data = data.concat(allData);
-
-
-          // prefix
-          data.forEach(item => {
-            item.groupName = this.$t('load_test.report.' + reportKey) + ': ' + item.groupName;
-          });
-          return {data, reportKey};
-          // if (this.baseOption.yAxis.length === 0) {
-          //   this.baseOption.yAxis.push({
-          //     name: this.$t('load_test.report.' + reportKey),
-          //     type: 'value',
-          //     min: 0,
-          //     position: 'left',
-          //     boundaryGap: [0, '100%']
-          //   });
-          // } else {
-          //   this.baseOption.yAxis.push({
-          //     name: this.$t('load_test.report.' + reportKey),
-          //     type: 'value',
-          //     min: 0,
-          //     position: 'right',
-          //     nameRotate: 20,
-          //     offset: (this.baseOption.yAxis.length - 1) * 50,
-          //     boundaryGap: [0, '100%']
-          //   });
-          //   this.baseOption.grid.right = (this.baseOption.yAxis.length - 1) * 5 + '%';
-          // }
-          // let yAxisIndex = this.baseOption.yAxis.length - 1;
-          // this.totalOption = this.generateOption(this.baseOption, data, yAxisIndex);
-        })
-        .catch(() => {
-          this.totalOption = {};
+      this.totalOption = {};
+      if (this.isShare){
+        return getSharePerformanceReportDetailContent(this.shareId, reportKey, this.id).then(res => {
+          return this.handleGetChart(res.data.data, reportKey, checkList);
         });
+      } else {
+        return getPerformanceReportDetailContent(reportKey, this.id).then(res => {
+          return this.handleGetChart(res.data.data, reportKey, checkList);
+        });
+      }
+    },
+    handleGetChart(data, reportKey, checkList) {
+      let allData = [];
+      let checkAllOption = checkList.indexOf('ALL') > -1;
+      if (checkAllOption) {
+        let avgOpt = [
+          'ResponseTimeChart',
+          'ResponseTimePercentilesChart',
+          'LatencyChart',
+        ];
+        let result = groupBy(data, 'xAxis');
+        for (const xAxis in result) {
+          let yAxis = result[xAxis].map(a => a.yAxis).reduce((a, b) => a + b, 0);
+          if (avgOpt.indexOf(reportKey) > -1) {
+            yAxis = yAxis / result[xAxis].length;
+          }
+          allData.push({
+            groupName: 'ALL',
+            xAxis: xAxis,
+            yAxis: yAxis
+          });
+        }
+      }
+
+      //
+      data = data.filter(item => {
+        if (checkList.indexOf(item.groupName) > -1) {
+          return true;
+        }
+      });
+
+      // 选中了all
+      data = data.concat(allData);
+
+
+      // prefix
+      data.forEach(item => {
+        item.groupName = this.$t('load_test.report.' + reportKey) + ': ' + item.groupName;
+      });
+      return {data, reportKey};
+      // if (this.baseOption.yAxis.length === 0) {
+      //   this.baseOption.yAxis.push({
+      //     name: this.$t('load_test.report.' + reportKey),
+      //     type: 'value',
+      //     min: 0,
+      //     position: 'left',
+      //     boundaryGap: [0, '100%']
+      //   });
+      // } else {
+      //   this.baseOption.yAxis.push({
+      //     name: this.$t('load_test.report.' + reportKey),
+      //     type: 'value',
+      //     min: 0,
+      //     position: 'right',
+      //     nameRotate: 20,
+      //     offset: (this.baseOption.yAxis.length - 1) * 50,
+      //     boundaryGap: [0, '100%']
+      //   });
+      //   this.baseOption.grid.right = (this.baseOption.yAxis.length - 1) * 5 + '%';
+      // }
+      // let yAxisIndex = this.baseOption.yAxis.length - 1;
+      // this.totalOption = this.generateOption(this.baseOption, data, yAxisIndex);
     },
     generateOption(option, data, yAxisIndex) {
       let chartData = data;
diff --git a/frontend/src/business/components/performance/report/components/TestOverview.vue b/frontend/src/business/components/performance/report/components/TestOverview.vue
index 2c16831b07..baef7ac135 100644
--- a/frontend/src/business/components/performance/report/components/TestOverview.vue
+++ b/frontend/src/business/components/performance/report/components/TestOverview.vue
@@ -78,6 +78,16 @@
 
 <script>
 import MsChart from "@/business/components/common/chart/MsChart";
+import {
+  getPerformanceReportErrorChart,
+  getPerformanceReportLoadChart,
+  getPerformanceReportOverview,
+  getPerformanceReportResChart, getPerformanceReportResponseCodeChart,
+  getSharePerformanceReportErrorChart,
+  getSharePerformanceReportLoadChart,
+  getSharePerformanceReportOverview,
+  getSharePerformanceReportResChart, getSharePerformanceReportResponseCodeChart,
+} from "@/network/load-test";
 
 const color = ['#60acfc', '#32d3eb', '#5bc49f', '#feb64d', '#ff7c7c', '#9287e7', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
 
@@ -110,312 +120,354 @@ export default {
   props: ['report', 'export', 'isShare', 'shareId', 'planReportTemplate'],
   methods: {
     initTableData() {
-      this.$get("/performance/report/content/testoverview/" + this.id).then(res => {
-        let data = res.data.data;
-        this.maxUsers = data.maxUsers;
-        this.avgThroughput = data.avgThroughput;
-        this.avgTransactions = data.avgTransactions;
-        this.errors = data.errors;
-        this.avgResponseTime = data.avgResponseTime;
-        this.responseTime90 = data.responseTime90;
-        this.avgBandwidth = data.avgBandwidth;
-      }).catch(() => {
-        this.maxUsers = '0';
-        this.avgThroughput = '0';
-        this.avgTransactions = '0';
-        this.errors = '0';
-        this.avgResponseTime = '0';
-        this.responseTime90 = '0';
-        this.avgBandwidth = '0';
-        // this.$warning(this.$t('report.generation_error'));
-      });
+      this.initData();
+      if (this.planReportTemplate) {
+        let data = this.planReportTemplate.loadOverview;
+        this.buildInfo(data);
+      } else if (this.isShare){
+        getSharePerformanceReportOverview(this.shareId, this.id, (data) => {
+          this.buildInfo(data);
+        });
+      } else {
+        getPerformanceReportOverview(this.id, data => {
+          this.buildInfo(data);
+        });
+      }
       this.getLoadChart();
       this.getResChart();
       this.getErrorChart();
       this.getResponseCodeChart();
     },
+    initData() {
+      this.buildInfo();
+      this.loadOption = {};
+      this.resOption = {};
+      this.errorOption = {};
+      this.resCodeOption = {};
+    },
+    buildInfo(data) {
+      this.maxUsers = data ? data.maxUsers : '0';
+      this.avgThroughput = data ? data.avgThroughput : '0';
+      this.avgTransactions = data ? data.avgTransactions : '0';
+      this.errors = data ? data.errors : '0';
+      this.avgResponseTime = data ? data.avgResponseTime : '0';
+      this.responseTime90 = data ? data.responseTime90 : '0';
+      this.avgBandwidth = data ? data.avgBandwidth : '0';
+    },
     getLoadChart() {
-      this.$get("/performance/report/content/load_chart/" + this.id).then(res => {
-        let data = res.data.data;
-
-        let loadOption = {
-          color: color,
-          title: {
-            text: 'Load',
-            left: 'center',
-            top: 20,
-            textStyle: {
-              color: '#65A2FF'
-            },
+      if (this.planReportTemplate) {
+        let data = this.planReportTemplate.loadOverviewLoadChart;
+        this.handleGetLoadChart(data);
+      } else if (this.isShare){
+        getSharePerformanceReportLoadChart(this.shareId, this.id, data => {
+          this.handleGetLoadChart(data);
+        });
+      } else {
+        getPerformanceReportLoadChart(this.id, (data) => {
+          this.handleGetLoadChart(data);
+        });
+      }
+    },
+    handleGetLoadChart(data) {
+      let loadOption = {
+        color: color,
+        title: {
+          text: 'Load',
+          left: 'center',
+          top: 20,
+          textStyle: {
+            color: '#65A2FF'
           },
-          tooltip: {
-            show: true,
-            trigger: 'axis',
-            // extraCssText: 'z-index: 999;',
-            confine: true,
-          },
-          legend: {},
-          xAxis: {},
-          series: []
-        };
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          // extraCssText: 'z-index: 999;',
+          confine: true,
+        },
+        legend: {},
+        xAxis: {},
+        series: []
+      };
 
-        let allData = [];
-        let result = groupBy(data, 'xAxis');
-        for (const xAxis in result) {
-          let yAxis1 = result[xAxis].filter(a => a.yAxis2 === -1).map(a => a.yAxis).reduce((a, b) => a + b, 0);
-          let yAxis2 = result[xAxis].filter(a => a.yAxis === -1).map(a => a.yAxis2).reduce((a, b) => a + b, 0);
-          allData.push({
-            groupName: 'users',
-            xAxis: xAxis,
-            yAxis: yAxis1,
-            yAxis2: -1,
-            yAxisIndex: 0,
-          }, {
-            groupName: 'transactions/s',
-            xAxis: xAxis,
-            yAxis: -1,
-            yAxis2: yAxis2,
-            yAxisIndex: 1,
-          });
+      let allData = [];
+      let result = groupBy(data, 'xAxis');
+      for (const xAxis in result) {
+        let yAxis1 = result[xAxis].filter(a => a.yAxis2 === -1).map(a => a.yAxis).reduce((a, b) => a + b, 0);
+        let yAxis2 = result[xAxis].filter(a => a.yAxis === -1).map(a => a.yAxis2).reduce((a, b) => a + b, 0);
+        allData.push({
+          groupName: 'users',
+          xAxis: xAxis,
+          yAxis: yAxis1,
+          yAxis2: -1,
+          yAxisIndex: 0,
+        }, {
+          groupName: 'transactions/s',
+          xAxis: xAxis,
+          yAxis: -1,
+          yAxis2: yAxis2,
+          yAxisIndex: 1,
+        });
+      }
+      let yAxisList = allData.filter(m => m.yAxis2 === -1).map(m => m.yAxis);
+      let yAxis2List = allData.filter(m => m.yAxis === -1).map(m => m.yAxis2);
+      let yAxisListMax = this._getChartMax(yAxisList);
+      let yAxis2ListMax = this._getChartMax(yAxis2List);
+      loadOption.yAxis = [{
+        name: 'User',
+        type: 'value',
+        min: 0,
+        max: yAxisListMax,
+        splitNumber: 5,
+        interval: yAxisListMax / 5
+      },
+        {
+          name: 'Transactions/s',
+          type: 'value',
+          splitNumber: 5,
+          min: 0,
+          max: yAxis2ListMax,
+          interval: yAxis2ListMax / 5
         }
-        let yAxisList = allData.filter(m => m.yAxis2 === -1).map(m => m.yAxis);
-        let yAxis2List = allData.filter(m => m.yAxis === -1).map(m => m.yAxis2);
-        let yAxisListMax = this._getChartMax(yAxisList);
-        let yAxis2ListMax = this._getChartMax(yAxis2List);
-        loadOption.yAxis = [{
-          name: 'User',
+      ]
+      this.loadOption = this.generateOption(loadOption, allData);
+    },
+    getResChart() {
+      if (this.planReportTemplate) {
+        let data = this.planReportTemplate.loadOverviewResChart;
+        this.handleGetResChart(data);
+      } else if (this.isShare){
+        getSharePerformanceReportResChart(this.shareId, this.id, data => {
+          this.handleGetResChart(data);
+        });
+      } else {
+        getPerformanceReportResChart(this.id, data => {
+          this.handleGetResChart(data);
+        });
+      }
+    },
+    handleGetResChart(data) {
+      let resOption = {
+        color: color,
+        title: {
+          text: 'Response Time',
+          left: 'center',
+          top: 20,
+          textStyle: {
+            color: '#99743C'
+          },
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          // extraCssText: 'z-index: 999;',
+          confine: true,
+          formatter: function (params, ticket, callback) {
+            let result = "";
+            let name = params[0].name;
+            result += name + "<br/>";
+            for (let i = 0; i < params.length; i++) {
+              let seriesName = params[i].seriesName;
+              if (seriesName.length > 100) {
+                seriesName = seriesName.substring(0, 100);
+              }
+              let value = params[i].value;
+              let marker = params[i].marker;
+              result += marker + seriesName + ": " + value[1] + "<br/>";
+            }
+
+            return result;
+          }
+        },
+        legend: {},
+        xAxis: {},
+        series: []
+      };
+
+      let allData = [];
+      let result = groupBy(data, 'xAxis');
+      for (const xAxis in result) {
+        let yAxis1 = result[xAxis].filter(a => a.yAxis2 === -1).map(a => a.yAxis).reduce((a, b) => a + b, 0);
+        yAxis1 = yAxis1 / result[xAxis].length;
+
+        allData.push({
+          groupName: 'response',
+          xAxis: xAxis,
+          yAxis: -1,
+          yAxis2: yAxis1,
+          yAxisIndex: 0,
+        });
+      }
+
+      let yAxisList = allData.filter(m => m.yAxis === -1).map(m => m.yAxis2);
+      let yAxisListMax = this._getChartMax(yAxisList);
+      resOption.yAxis = [
+        {
+          name: 'Response Time',
           type: 'value',
           min: 0,
           max: yAxisListMax,
-          splitNumber: 5,
           interval: yAxisListMax / 5
-        },
-          {
-            name: 'Transactions/s',
-            type: 'value',
-            splitNumber: 5,
-            min: 0,
-            max: yAxis2ListMax,
-            interval: yAxis2ListMax / 5
-          }
-        ]
-        this.loadOption = this.generateOption(loadOption, allData);
-      }).catch(() => {
-        this.loadOption = {};
-      });
-    },
-    getResChart() {
-      this.$get("/performance/report/content/res_chart/" + this.id).then(res => {
-        let data = res.data.data;
-
-        let resOption = {
-          color: color,
-          title: {
-            text: 'Response Time',
-            left: 'center',
-            top: 20,
-            textStyle: {
-              color: '#99743C'
-            },
-          },
-          tooltip: {
-            show: true,
-            trigger: 'axis',
-            // extraCssText: 'z-index: 999;',
-            confine: true,
-            formatter: function (params, ticket, callback) {
-              let result = "";
-              let name = params[0].name;
-              result += name + "<br/>";
-              for (let i = 0; i < params.length; i++) {
-                let seriesName = params[i].seriesName;
-                if (seriesName.length > 100) {
-                  seriesName = seriesName.substring(0, 100);
-                }
-                let value = params[i].value;
-                let marker = params[i].marker;
-                result += marker + seriesName + ": " + value[1] + "<br/>";
-              }
-
-              return result;
-            }
-          },
-          legend: {},
-          xAxis: {},
-          series: []
-        };
-
-        let allData = [];
-        let result = groupBy(data, 'xAxis');
-        for (const xAxis in result) {
-          let yAxis1 = result[xAxis].filter(a => a.yAxis2 === -1).map(a => a.yAxis).reduce((a, b) => a + b, 0);
-          yAxis1 = yAxis1 / result[xAxis].length;
-
-          allData.push({
-            groupName: 'response',
-            xAxis: xAxis,
-            yAxis: -1,
-            yAxis2: yAxis1,
-            yAxisIndex: 0,
-          });
         }
-
-        let yAxisList = allData.filter(m => m.yAxis === -1).map(m => m.yAxis2);
-        let yAxisListMax = this._getChartMax(yAxisList);
-        resOption.yAxis = [
-          {
-            name: 'Response Time',
-            type: 'value',
-            min: 0,
-            max: yAxisListMax,
-            interval: yAxisListMax / 5
-          }
-        ];
-        this.resOption = this.generateOption(resOption, allData);
-      }).catch(() => {
-        this.resOption = {};
-      });
+      ];
+      this.resOption = this.generateOption(resOption, allData);
     },
     getErrorChart() {
-      this.$get("/performance/report/content/error_chart/" + this.id).then(res => {
-        let data = res.data.data;
-
-        let errorOption = {
-          color: color,
-          title: {
-            text: 'Errors',
-            left: 'center',
-            top: 20,
-            textStyle: {
-              color: '#99743C'
-            },
+      if (this.planReportTemplate) {
+        let data = this.planReportTemplate.loadOverviewErrorChart;
+        this.handleGetErrorChart(data);
+      } else if (this.isShare){
+        getSharePerformanceReportErrorChart(this.shareId, this.id, data => {
+          this.handleGetErrorChart(data);
+        });
+      } else {
+        getPerformanceReportErrorChart(this.id, data => {
+          this.handleGetErrorChart(data);
+        });
+      }
+    },
+    handleGetErrorChart(data) {
+      let errorOption = {
+        color: color,
+        title: {
+          text: 'Errors',
+          left: 'center',
+          top: 20,
+          textStyle: {
+            color: '#99743C'
           },
-          tooltip: {
-            show: true,
-            trigger: 'axis',
-            // extraCssText: 'z-index: 999;',
-            confine: true,
-            formatter: function (params, ticket, callback) {
-              let result = "";
-              let name = params[0].name;
-              result += name + "<br/>";
-              for (let i = 0; i < params.length; i++) {
-                let seriesName = params[i].seriesName;
-                if (seriesName.length > 100) {
-                  seriesName = seriesName.substring(0, 100);
-                }
-                let value = params[i].value;
-                let marker = params[i].marker;
-                result += marker + seriesName + ": " + value[1] + "<br/>";
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          // extraCssText: 'z-index: 999;',
+          confine: true,
+          formatter: function (params, ticket, callback) {
+            let result = "";
+            let name = params[0].name;
+            result += name + "<br/>";
+            for (let i = 0; i < params.length; i++) {
+              let seriesName = params[i].seriesName;
+              if (seriesName.length > 100) {
+                seriesName = seriesName.substring(0, 100);
               }
-
-              return result;
+              let value = params[i].value;
+              let marker = params[i].marker;
+              result += marker + seriesName + ": " + value[1] + "<br/>";
             }
-          },
-          legend: {},
-          xAxis: {},
-          series: []
-        };
 
-        let allData = [];
-        let result = groupBy(data, 'xAxis');
-        for (const xAxis in result) {
-          let yAxis1 = result[xAxis].filter(a => a.yAxis2 === -1).map(a => a.yAxis).reduce((a, b) => a + b, 0);
-
-          allData.push({
-            groupName: 'errors',
-            xAxis: xAxis,
-            yAxis: -1,
-            yAxis2: yAxis1,
-            yAxisIndex: 0,
-          });
-        }
-        let yAxisList = allData.filter(m => m.yAxis === -1).map(m => m.yAxis2);
-        let yAxisListMax = this._getChartMax(yAxisList);
-        errorOption.yAxis = [
-          {
-            name: 'No',
-            type: 'value',
-            min: 0,
-            max: yAxisListMax,
-            interval: yAxisListMax / 5
+            return result;
           }
-        ]
+        },
+        legend: {},
+        xAxis: {},
+        series: []
+      };
 
-        this.errorOption = this.generateOption(errorOption, allData);
-      }).catch(() => {
-        this.errorOption = {};
-      });
+      let allData = [];
+      let result = groupBy(data, 'xAxis');
+      for (const xAxis in result) {
+        let yAxis1 = result[xAxis].filter(a => a.yAxis2 === -1).map(a => a.yAxis).reduce((a, b) => a + b, 0);
+
+        allData.push({
+          groupName: 'errors',
+          xAxis: xAxis,
+          yAxis: -1,
+          yAxis2: yAxis1,
+          yAxisIndex: 0,
+        });
+      }
+      let yAxisList = allData.filter(m => m.yAxis === -1).map(m => m.yAxis2);
+      let yAxisListMax = this._getChartMax(yAxisList);
+      errorOption.yAxis = [
+        {
+          name: 'No',
+          type: 'value',
+          min: 0,
+          max: yAxisListMax,
+          interval: yAxisListMax / 5
+        }
+      ]
+
+      this.errorOption = this.generateOption(errorOption, allData);
     },
     getResponseCodeChart() {
-      this.$get("/performance/report/content/response_code_chart/" + this.id).then(res => {
-        let data = res.data.data;
-
-        let resCodeOption = {
-          color: color,
-          title: {
-            text: 'Response code',
-            left: 'center',
-            top: 20,
-            textStyle: {
-              color: '#99743C'
-            },
+      if (this.planReportTemplate) {
+        let data = this.planReportTemplate.loadOverviewResponseCodeChart;
+        this.handleGetResponseCodeChart(data);
+      } else if (this.isShare){
+        getSharePerformanceReportResponseCodeChart(this.shareId, this.id,data => {
+          this.handleGetResponseCodeChart(data);
+        });
+      } else {
+        getPerformanceReportResponseCodeChart(this.id,data => {
+          this.handleGetResponseCodeChart(data);
+        });
+      }
+    },
+    handleGetResponseCodeChart(data) {
+      let resCodeOption = {
+        color: color,
+        title: {
+          text: 'Response code',
+          left: 'center',
+          top: 20,
+          textStyle: {
+            color: '#99743C'
           },
-          tooltip: {
-            show: true,
-            trigger: 'axis',
-            // extraCssText: 'z-index: 999;',
-            confine: true,
-            formatter: function (params, ticket, callback) {
-              let result = "";
-              let name = params[0].name;
-              result += name + "<br/>";
-              for (let i = 0; i < params.length; i++) {
-                let seriesName = params[i].seriesName;
-                if (seriesName.length > 100) {
-                  seriesName = seriesName.substring(0, 100);
-                }
-                let value = params[i].value;
-                let marker = params[i].marker;
-                result += marker + seriesName + ": " + value[1] + "<br/>";
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          // extraCssText: 'z-index: 999;',
+          confine: true,
+          formatter: function (params, ticket, callback) {
+            let result = "";
+            let name = params[0].name;
+            result += name + "<br/>";
+            for (let i = 0; i < params.length; i++) {
+              let seriesName = params[i].seriesName;
+              if (seriesName.length > 100) {
+                seriesName = seriesName.substring(0, 100);
               }
-
-              return result;
+              let value = params[i].value;
+              let marker = params[i].marker;
+              result += marker + seriesName + ": " + value[1] + "<br/>";
             }
-          },
-          legend: {},
-          xAxis: {},
-          series: []
-        };
 
-        let allData = [];
-        let result = groupBy(data, 'xAxis');
-        for (const xAxis in result) {
-          let yAxis1 = result[xAxis].filter(a => a.yAxis2 === -1).map(a => a.yAxis).reduce((a, b) => a + b, 0);
-
-          allData.push({
-            groupName: 'codes',
-            xAxis: xAxis,
-            yAxis: -1,
-            yAxis2: yAxis1,
-            yAxisIndex: 0,
-          });
-        }
-        let yAxisList = allData.filter(m => m.yAxis === -1).map(m => m.yAxis2);
-        let yAxisListMax = this._getChartMax(yAxisList);
-        resCodeOption.yAxis = [
-          {
-            name: 'No',
-            type: 'value',
-            min: 0,
-            max: yAxisListMax,
-            interval: yAxisListMax / 5
+            return result;
           }
-        ];
-        this.resCodeOption = this.generateOption(resCodeOption, allData);
-      }).catch(() => {
-        this.resCodeOption = {};
-      });
+        },
+        legend: {},
+        xAxis: {},
+        series: []
+      };
+
+      let allData = [];
+      let result = groupBy(data, 'xAxis');
+      for (const xAxis in result) {
+        let yAxis1 = result[xAxis].filter(a => a.yAxis2 === -1).map(a => a.yAxis).reduce((a, b) => a + b, 0);
+
+        allData.push({
+          groupName: 'codes',
+          xAxis: xAxis,
+          yAxis: -1,
+          yAxis2: yAxis1,
+          yAxisIndex: 0,
+        });
+      }
+      let yAxisList = allData.filter(m => m.yAxis === -1).map(m => m.yAxis2);
+      let yAxisListMax = this._getChartMax(yAxisList);
+      resCodeOption.yAxis = [
+        {
+          name: 'No',
+          type: 'value',
+          min: 0,
+          max: yAxisListMax,
+          interval: yAxisListMax / 5
+        }
+      ];
+      this.resCodeOption = this.generateOption(resCodeOption, allData);
     },
     generateOption(option, data) {
       let chartData = data;
diff --git a/frontend/src/business/components/track/plan/view/comonents/load/LoadCaseReportView.vue b/frontend/src/business/components/track/plan/view/comonents/load/LoadCaseReportView.vue
index 416a509fe0..2e863fccba 100644
--- a/frontend/src/business/components/track/plan/view/comonents/load/LoadCaseReportView.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/load/LoadCaseReportView.vue
@@ -53,22 +53,28 @@
                                               :share-id="shareId" :is-read-only="true" :report="report"/>
             </el-tab-pane>
             <el-tab-pane :label="$t('report.test_overview')">
-              <ms-report-test-overview :report="report" ref="testOverview"/>
+              <ms-report-test-overview :report="report" :is-share="isShare" :plan-report-template="planReportTemplate"
+                                       :share-id="shareId" ref="testOverview"/>
             </el-tab-pane>
             <el-tab-pane :label="$t('report.test_details')">
-              <ms-report-test-details :report="report" ref="testDetails"/>
+              <ms-report-test-details :report="report" :is-share="isShare" :plan-report-template="planReportTemplate"
+                                      :share-id="shareId" ref="testDetails"/>
             </el-tab-pane>
             <el-tab-pane :label="$t('report.test_request_statistics')">
-              <ms-report-request-statistics :report="report" ref="requestStatistics"/>
+              <ms-report-request-statistics :report="report" :is-share="isShare" :plan-report-template="planReportTemplate"
+                                            :share-id="shareId" ref="requestStatistics"/>
             </el-tab-pane>
             <el-tab-pane :label="$t('report.test_error_log')">
-              <ms-report-error-log :report="report" ref="errorLog"/>
+              <ms-report-error-log :report="report" :is-share="isShare" :plan-report-template="planReportTemplate"
+                                   :share-id="shareId" ref="errorLog"/>
             </el-tab-pane>
             <el-tab-pane :label="$t('report.test_log_details')">
-              <ms-report-log-details :report="report"/>
+              <ms-report-log-details  :report="report" :is-share="isShare" :plan-report-template="planReportTemplate"
+                                     :share-id="shareId"/>
             </el-tab-pane>
             <el-tab-pane :label="$t('report.test_monitor_details')">
-              <monitor-card :report="report"/>
+              <monitor-card :report="report" :is-share="isShare" :plan-report-template="planReportTemplate"
+                            :share-id="shareId"/>
             </el-tab-pane>
           </el-tabs>
         </div>
@@ -106,7 +112,12 @@ import MsMainContainer from "@/business/components/common/components/MsMainConta
 import MsPerformancePressureConfig from "@/business/components/performance/report/components/PerformancePressureConfig";
 import MonitorCard from "@/business/components/performance/report/components/MonitorCard";
 import MsReportTestDetails from '@/business/components/performance/report/components/TestDetails';
-import {getPerformanceReport, getPerformanceReportTime, getSharePerformanceReport} from "@/network/load-test";
+import {
+  getPerformanceReport,
+  getPerformanceReportTime,
+  getSharePerformanceReport,
+  getSharePerformanceReportTime
+} from "@/network/load-test";
 
 
 export default {
@@ -192,7 +203,7 @@ export default {
         this.handleInitReportTimeInfo(this.planReportTemplate);
       } else if (this.isShare) {
         if (this.reportId) {
-          this.result = getPerformanceReportTime(this.shareId, this.reportId)
+          this.result = getSharePerformanceReportTime(this.shareId, this.reportId)
             .then((res) => {
               this.handleInitReportTimeInfo(res.data.data);
             }).catch(() => {
diff --git a/frontend/src/common/js/utils.js b/frontend/src/common/js/utils.js
index a95a8c3e5a..91fd139de8 100644
--- a/frontend/src/common/js/utils.js
+++ b/frontend/src/common/js/utils.js
@@ -527,8 +527,8 @@ export function stopFullScreenLoading(loading, timeout) {
 }
 
 export function getShareId() {
-  // let herfUrl = 'http://localhost:8080/sharePlanReport?shareId=ba80f96a-184f-4607-b78e-324129153d9e';
-  let herfUrl = window.location.href;
+  //let herfUrl = 'http://localhost:8080/sharePlanReport?shareId=bf9496ac-8577-46b4-adf9-9c7e93dd06a8';
+   let herfUrl = window.location.href;
   if (herfUrl.indexOf('shareId=') > -1) {
     let shareId = '';
     new URL(herfUrl).searchParams.forEach((value, key) => {
diff --git a/frontend/src/network/load-test.js b/frontend/src/network/load-test.js
index bdd5625bcf..4f21ee0753 100644
--- a/frontend/src/network/load-test.js
+++ b/frontend/src/network/load-test.js
@@ -34,3 +34,94 @@ export function getOldPerformanceJmxContent(testId, callback) {
 export function getShareOldPerformanceJmxContent(testId, callback) {
   return testId ? baseGet('/performance/get-jmx-content/' + testId, callback) : {};
 }
+
+export function getPerformanceReportOverview(reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/testoverview/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportOverview(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/testoverview/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportLoadChart(reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/load_chart/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportLoadChart(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/load_chart/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportResChart(reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/res_chart/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportResChart(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/res_chart/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportErrorChart(reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/error_chart/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportErrorChart(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/error_chart/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportResponseCodeChart(reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/response_code_chart/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportResponseCodeChart(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/response_code_chart/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportDetailContent(reportKey, reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/' + reportKey + '/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportDetailContent(shareId, reportKey, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/' + shareId + '/' + reportKey + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportContent(reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportContent(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportErrorsContent(reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/errors/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportErrorsContent(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/errors/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportErrorsTop5(reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/errors_top5/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportErrorsTop5(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/errors_top5/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportLogResource(reportId, callback) {
+  return reportId ? baseGet('/performance/report/log/resource/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportLogResource(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/log/resource/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportLogResourceDetail(reportId, resourceId, pageInfo, callback) {
+  return reportId ? baseGet('/performance/report/log/' + reportId + '/' + resourceId + "/" + pageInfo, callback) : {};
+}
+export function getSharePerformanceReportLogResourceDetail(shareId, reportId, resourceId, pageInfo, callback) {
+  return reportId ? baseGet('/performance/report/log/' + shareId + '/' + reportId + '/' + resourceId + "/" + pageInfo, callback) : {};
+}
+
+export function getPerformanceMetricQueryResource(resourceId, callback) {
+  return resourceId ? baseGet('/metric/query/resource/' + resourceId, callback) : {};
+}
+export function getSharePerformanceMetricQueryResource(shareId, resourceId, callback) {
+  return resourceId ? baseGet('/share/metric/query/resource/' + shareId + '/' + resourceId, callback) : {};
+}
+
+export function getPerformanceMetricQuery(resourceId, callback) {
+  return resourceId ? baseGet('/metric/query/' + resourceId, callback) : {};
+}
+export function getSharePerformanceMetricQuery(shareId, resourceId, callback) {
+  return resourceId ? baseGet('/share/metric/query/' + shareId + '/' + resourceId, callback) : {};
+}