diff --git a/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue b/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
index 40f7ad7cdb37a4efd2a3500a66e80915587cb938..6145eabf2b798fc88272e694b9c213e29a7cd2d8 100644
--- a/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
@@ -89,12 +89,12 @@
                 <el-col class="test-detail" :span="20" :offset="1">
                     <el-tabs type="border-card">
                       <el-tab-pane :label="$t('test_track.plan_view.test_detail')">
-                        <api-test-detail v-if="testCase.type == 'api'" @runTest="apiTestRun" :id="testCase.testId" v-show="testCase.type == 'api'" ref="apiTestDetail"/>
-                        <edit-performance-test-plan v-if="testCase.type == 'performance'"/>
+                        <api-test-detail v-if="testCase.type == 'api'" @runTest="apiTestRun" :id="testCase.testId" ref="apiTestDetail"/>
+                        <performance-test-detail v-if="testCase.type == 'performance'" :id="testCase.testId" ref="performanceTestDetail"/>
                       </el-tab-pane>
                       <el-tab-pane :label="$t('test_track.plan_view.test_result')">
                         <api-test-result :report-id="testCase.reportId" v-if=" testCase.type == 'api'" ref="apiTestResult"/>
-                        <performance-report-view v-if="testCase.type == 'performance'"/>
+                        <performance-test-result :report-id="testCase.reportId" v-if="testCase.type == 'performance'"/>
                       </el-tab-pane>
                     </el-tabs>
                 </el-col>
@@ -199,20 +199,19 @@
 <script>
   import TestPlanTestCaseStatusButton from '../../common/TestPlanTestCaseStatusButton';
   import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
-  import MsApiTestConfig from "../../../../api/test/ApiTestConfig";
-  import MsApiReportView from "../../../../api/report/ApiReportView";
-  import EditPerformanceTestPlan from "../../../../performance/test/EditPerformanceTestPlan";
-  import PerformanceReportView from "../../../../performance/report/PerformanceReportView";
   import ApiTestDetail from "./test/ApiTestDetail";
   import ApiTestResult from "./test/ApiTestResult";
+  import PerformanceTestDetail from "./test/PerformanceTestDetail";
+  import PerformanceTestResult from "./test/PerformanceTestResult";
 
   export default {
     name: "TestPlanTestCaseEdit",
     components: {
+      PerformanceTestResult,
+      PerformanceTestDetail,
       ApiTestResult,
       ApiTestDetail,
-      PerformanceReportView,
-      EditPerformanceTestPlan, MsApiReportView, MsApiTestConfig, TestPlanTestCaseStatusButton},
+      TestPlanTestCaseStatusButton},
     data() {
       return {
         result: {},
@@ -304,17 +303,14 @@
       },
       initTest() {
         this.$nextTick(() => {
-
           if (this.testCase.method == 'auto') {
             if (this.$refs.apiTestDetail && this.testCase.type == 'api') {
               this.$refs.apiTestDetail.init();
+            } else if(this.testCase.type == 'performance') {
+              this.$refs.performanceTestDetail.init();
             }
-            // else if(testCase.type == 'api') {
-            //   this.$refs.apiTestDetail.init();
-            // }
           }
         });
-
       },
       apiTestRun(reportId) {
         this.testCase.reportId = reportId;
@@ -323,13 +319,6 @@
       saveReport(reportId) {
         this.$post('/test/plan/case/edit', {id: this.testCase.id, reportId: reportId});
       },
-      updateTestCases(testCase) {
-        this.testCases.forEach(item => {
-           if (testCase.id === item.id) {
-             Object.assign(item, testCase);
-           }
-        });
-      },
       initData(testCase) {
         this.result = this.$post('/test/plan/case/list/all', this.searchParam, response => {
           this.testCases = response.data;
diff --git a/frontend/src/business/components/track/plan/view/comonents/test/PerformanceTestDetail.vue b/frontend/src/business/components/track/plan/view/comonents/test/PerformanceTestDetail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b32dbf5a8dfbac51bdd8f23af1bc1e4b8c7f1986
--- /dev/null
+++ b/frontend/src/business/components/track/plan/view/comonents/test/PerformanceTestDetail.vue
@@ -0,0 +1,123 @@
+<template>
+  <ms-container>
+    <ms-main-container>
+      <el-card>
+      <!--<el-card v-loading="result.loading">-->
+        <el-row>
+          <el-col :span="10">
+            <el-input :disabled="true" :placeholder="$t('load_test.input_name')" v-model="test.name" class="input-with-select">
+              <template v-slot:prepend>
+                <el-select :disabled="true" v-model="project.name" :placeholder="$t('load_test.select_project')" slot="prepend">
+                </el-select>
+              </template>
+            </el-input>
+          </el-col>
+          <el-col :span="12" :offset="2">
+            <el-button type="primary" plain @click="runTest">执行</el-button>
+          </el-col>
+        </el-row>
+
+        <el-tabs class="test-config" v-model="active" type="border-card" :stretch="true">
+          <el-tab-pane :label="$t('load_test.basic_config')">
+            <performance-basic-config :test-plan="test" ref="basicConfig"/>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('load_test.pressure_config')">
+            <performance-pressure-config :test-plan="test" ref="pressureConfig"/>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('load_test.advanced_config')" class="advanced-config">
+            <performance-advanced-config ref="advancedConfig"/>
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+    </ms-main-container>
+  </ms-container>
+</template>
+
+<script>
+
+  import MsContainer from "../../../../../common/components/MsContainer";
+  import MsMainContainer from "../../../../../common/components/MsMainContainer";
+  import PerformanceBasicConfig from "../../../../../performance/test/components/PerformanceBasicConfig";
+  import PerformancePressureConfig from "../../../../../performance/test/components/PerformancePressureConfig";
+  import PerformanceAdvancedConfig from "../../../../../performance/test/components/PerformanceAdvancedConfig";
+  export default {
+    name: "PerformanceTestDetail",
+    components: {
+      PerformanceAdvancedConfig,
+      PerformancePressureConfig,
+      PerformanceBasicConfig,
+      MsMainContainer,
+      MsContainer
+    },
+    data() {
+      return {
+        result: {},
+        test: {},
+        savePath: "/performance/save",
+        editPath: "/performance/edit",
+        runPath: "/performance/run",
+        project: {},
+        projectId: '',
+        active: '0',
+        tabs: [{
+          title: this.$t('load_test.basic_config'),
+          id: '0',
+          component: 'PerformanceBasicConfig'
+        }, {
+          title: this.$t('load_test.pressure_config'),
+          id: '1',
+          component: 'PerformancePressureConfig'
+        }, {
+          title: this.$t('load_test.advanced_config'),
+          id: '2',
+          component: 'PerformanceAdvancedConfig'
+        }]
+      }
+    },
+    props: ['id'],
+    methods: {
+      init() {
+        this.getTest();
+      },
+      getProject(projectId) {
+        this.$get("/project/get/" + projectId, response => {
+          this.project = response.data;
+        });
+      },
+      getTest() {
+        if (this.id) {
+          this.result = this.$get('/performance/get/' + this.id, response => {
+            this.test = response.data;
+            this.getProject(this.test.projectId);
+          });
+        }
+      },
+      runTest() {
+        this.result = this.$post(this.runPath, {id: this.test.id}, () => {
+          this.$success(this.$t('load_test.is_running'));
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+  .test-config {
+    margin-top: 15px;
+    text-align: center;
+  }
+
+  .el-select {
+    min-width: 130px;
+  }
+
+  .edit-test-container .input-with-select .el-input-group__prepend {
+    background-color: #fff;
+  }
+
+  .advanced-config {
+    height: calc(100vh - 280px);
+    overflow: auto;
+  }
+</style>
diff --git a/frontend/src/business/components/track/plan/view/comonents/test/PerformanceTestResult.vue b/frontend/src/business/components/track/plan/view/comonents/test/PerformanceTestResult.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4aa6a994658b8252c315b381ee73b9936859182a
--- /dev/null
+++ b/frontend/src/business/components/track/plan/view/comonents/test/PerformanceTestResult.vue
@@ -0,0 +1,224 @@
+<template>
+  <ms-container>
+    <ms-main-container>
+      <el-card v-loading="result.loading">
+        <el-row>
+          <el-col :span="16">
+            <el-row>
+              <el-breadcrumb separator-class="el-icon-arrow-right">
+                <el-breadcrumb-item :to="{ path: '/performance/test/' + this.projectId }">{{projectName}}
+                </el-breadcrumb-item>
+                <el-breadcrumb-item :to="{ path: '/performance/test/edit/' + this.testId }">{{testName}}
+                </el-breadcrumb-item>
+                <el-breadcrumb-item>{{reportName}}</el-breadcrumb-item>
+              </el-breadcrumb>
+            </el-row>
+            <el-row class="ms-report-view-btns">
+              <el-button type="primary" plain size="mini">{{$t('report.test_stop_now')}}</el-button>
+              <el-button type="success" plain size="mini">{{$t('report.test_execute_again')}}</el-button>
+              <el-button type="info" plain size="mini">{{$t('report.export')}}</el-button>
+              <el-button type="warning" plain size="mini">{{$t('report.compare')}}</el-button>
+            </el-row>
+          </el-col>
+          <el-col :span="8">
+            <span class="ms-report-time-desc">
+              {{$t('report.test_duration', [this.minutes, this.seconds])}}
+            </span>
+            <span class="ms-report-time-desc">
+              {{$t('report.test_start_time')}}：{{startTime}}
+            </span>
+            <span class="ms-report-time-desc">
+              {{$t('report.test_end_time')}}：{{endTime}}
+            </span>
+          </el-col>
+        </el-row>
+
+        <el-divider></el-divider>
+
+        <el-tabs v-model="active" type="border-card" :stretch="true">
+          <el-tab-pane :label="$t('report.test_overview')">
+            <test-overview :report="report"/>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('report.test_request_statistics')">
+            <request-statistics :report="report"/>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('report.test_error_log')">
+            <error-log :report="report"/>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('report.test_log_details')">
+            <log-details :report="report"/>
+          </el-tab-pane>
+        </el-tabs>
+
+      </el-card>
+    </ms-main-container>
+  </ms-container>
+</template>
+
+<script>
+  import MsMainContainer from "../../../../../common/components/MsMainContainer";
+  import MsContainer from "../../../../../common/components/MsContainer";
+  import LogDetails from "../../../../../performance/report/components/LogDetails";
+  import ErrorLog from "../../../../../performance/report/components/ErrorLog";
+  import RequestStatistics from "../../../../../performance/report/components/RequestStatistics";
+  import TestOverview from "../../../../../performance/report/components/TestOverview";
+
+  export default {
+    name: "PerformanceTestResult",
+    components: {
+      TestOverview,
+      RequestStatistics,
+      ErrorLog,
+      LogDetails,
+      MsContainer,
+      MsMainContainer
+    },
+    data() {
+      return {
+        result: {},
+        active: '0',
+        reportId: '',
+        status: '',
+        reportName: '',
+        testId: '',
+        testName: '',
+        projectId: '',
+        projectName: '',
+        startTime: '0',
+        endTime: '0',
+        minutes: '0',
+        seconds: '0',
+        title: 'Logging',
+        report: {}
+      }
+    },
+    props: ['reportId'],
+    methods: {
+      initBreadcrumb() {
+        if (this.reportId) {
+          this.result = this.$get("/performance/report/test/pro/info/" + this.reportId, res => {
+            let data = res.data;
+            if (data) {
+              this.reportName = data.name;
+              this.testId = data.testId;
+              this.testName = data.testName;
+              this.projectId = data.projectId;
+              this.projectName = data.projectName;
+            }
+          })
+        }
+      },
+      initReportTimeInfo() {
+        if (this.reportId) {
+          this.result = this.$get("/performance/report/content/report_time/" + this.reportId)
+            .then(res => {
+            let data = res.data.data;
+            if (data) {
+              this.startTime = data.startTime;
+              this.endTime = data.endTime;
+              let duration = data.duration;
+              this.minutes = Math.floor(duration / 60);
+              this.seconds = duration % 60;
+            }
+          }).catch(() => {
+            this.clearData();
+          })
+        }
+      },
+      checkReportStatus(status) {
+        switch (status) {
+          case 'Error':
+            this.$warning(this.$t('report.generation_error'));
+            break;
+          case 'Starting':
+            this.$warning("测试处于开始状态,请稍后查看报告！");
+            break;
+          case 'Reporting':
+            this.$info(this.$t('report.being_generated'));
+            break;
+          case 'Running':
+            this.$warning("测试处于运行状态,请稍后查看报告！");
+            break;
+          case 'Completed':
+          default:
+            break;
+        }
+      },
+      clearData() {
+        this.startTime = '0';
+        this.endTime = '0';
+        this.minutes = '0';
+        this.seconds = '0';
+      }
+    },
+    created() {
+      this.result = this.$get("/performance/report/" + this.reportId, res => {
+        let data = res.data;
+        this.status = data.status;
+        this.$set(this.report, "id", this.reportId);
+        this.$set(this.report, "status", data.status);
+        this.checkReportStatus(data.status);
+        if (this.status === "Completed") {
+          this.initReportTimeInfo();
+        }
+      });
+      this.initBreadcrumb();
+
+    },
+    watch: {
+      '$route'(to) {
+        if (to.name === "perReportView") {
+          let reportId = to.path.split('/')[4];
+          this.reportId = reportId;
+          if (reportId) {
+            this.$get("/performance/report/test/pro/info/" + reportId, response => {
+              let data = response.data;
+              if (data) {
+                this.status = data.status;
+                this.reportName = data.name;
+                this.testName = data.testName;
+                this.projectName = data.projectName;
+
+                this.$set(this.report, "id", reportId);
+                this.$set(this.report, "status", data.status);
+
+                this.checkReportStatus(data.status);
+                if (this.status === "Completed") {
+                  this.result = this.$get("/performance/report/content/report_time/" + this.reportId).then(res => {
+                    let data = res.data.data;
+                    if (data) {
+                      this.startTime = data.startTime;
+                      this.endTime = data.endTime;
+                      let duration = data.duration;
+                      this.minutes = Math.floor(duration / 60);
+                      this.seconds = duration % 60;
+                    }
+                  }).catch(() => {
+                    this.clearData();
+                  })
+                } else {
+                  this.clearData();
+                }
+              }
+            });
+
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+  .ms-report-view-btns {
+    margin-top: 15px;
+  }
+
+  .ms-report-time-desc {
+    text-align: left;
+    display: block;
+    color: #5C7878;
+  }
+
+</style>