From 0e1b379b67bd87b857e2b4e79e46cdf6ddf86d88 Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Thu, 7 Jan 2021 17:17:44 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92):=20?=
 =?UTF-8?q?=E6=80=A7=E8=83=BD=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B=E6=89=A7?=
 =?UTF-8?q?=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/domain/TestPlanLoadCase.java         |   2 +
 .../base/domain/TestPlanLoadCaseExample.java  |  70 ++++
 .../base/mapper/TestPlanLoadCaseMapper.xml    |  25 +-
 .../mapper/ext/ExtTestPlanLoadCaseMapper.xml  |   2 +-
 .../TestPlanLoadCaseController.java           |  12 +
 .../testplan/LoadCaseReportRequest.java       |  11 +
 .../request/testplan/RunTestPlanRequest.java  |   1 +
 .../service/TestPlanLoadCaseService.java      |  34 +-
 .../V62__add_test_plan_load_case.sql          |   1 +
 .../view/comonents/load/LoadCaseReport.vue    |  39 ++
 .../comonents/load/LoadCaseReportView.vue     | 376 ++++++++++++++++++
 .../comonents/load/TestPlanLoadCaseList.vue   |  78 +++-
 12 files changed, 625 insertions(+), 26 deletions(-)
 create mode 100644 backend/src/main/java/io/metersphere/track/request/testplan/LoadCaseReportRequest.java
 create mode 100644 frontend/src/business/components/track/plan/view/comonents/load/LoadCaseReport.vue
 create mode 100644 frontend/src/business/components/track/plan/view/comonents/load/LoadCaseReportView.vue

diff --git a/backend/src/main/java/io/metersphere/base/domain/TestPlanLoadCase.java b/backend/src/main/java/io/metersphere/base/domain/TestPlanLoadCase.java
index a57ce07329..ebe2afc8dc 100644
--- a/backend/src/main/java/io/metersphere/base/domain/TestPlanLoadCase.java
+++ b/backend/src/main/java/io/metersphere/base/domain/TestPlanLoadCase.java
@@ -11,6 +11,8 @@ public class TestPlanLoadCase implements Serializable {
 
     private String loadCaseId;
 
+    private String loadReportId;
+
     private String status;
 
     private Long createTime;
diff --git a/backend/src/main/java/io/metersphere/base/domain/TestPlanLoadCaseExample.java b/backend/src/main/java/io/metersphere/base/domain/TestPlanLoadCaseExample.java
index 1184a849c1..7d946f4b7f 100644
--- a/backend/src/main/java/io/metersphere/base/domain/TestPlanLoadCaseExample.java
+++ b/backend/src/main/java/io/metersphere/base/domain/TestPlanLoadCaseExample.java
@@ -314,6 +314,76 @@ public class TestPlanLoadCaseExample {
             return (Criteria) this;
         }
 
+        public Criteria andLoadReportIdIsNull() {
+            addCriterion("load_report_id is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andLoadReportIdIsNotNull() {
+            addCriterion("load_report_id is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andLoadReportIdEqualTo(String value) {
+            addCriterion("load_report_id =", value, "loadReportId");
+            return (Criteria) this;
+        }
+
+        public Criteria andLoadReportIdNotEqualTo(String value) {
+            addCriterion("load_report_id <>", value, "loadReportId");
+            return (Criteria) this;
+        }
+
+        public Criteria andLoadReportIdGreaterThan(String value) {
+            addCriterion("load_report_id >", value, "loadReportId");
+            return (Criteria) this;
+        }
+
+        public Criteria andLoadReportIdGreaterThanOrEqualTo(String value) {
+            addCriterion("load_report_id >=", value, "loadReportId");
+            return (Criteria) this;
+        }
+
+        public Criteria andLoadReportIdLessThan(String value) {
+            addCriterion("load_report_id <", value, "loadReportId");
+            return (Criteria) this;
+        }
+
+        public Criteria andLoadReportIdLessThanOrEqualTo(String value) {
+            addCriterion("load_report_id <=", value, "loadReportId");
+            return (Criteria) this;
+        }
+
+        public Criteria andLoadReportIdLike(String value) {
+            addCriterion("load_report_id like", value, "loadReportId");
+            return (Criteria) this;
+        }
+
+        public Criteria andLoadReportIdNotLike(String value) {
+            addCriterion("load_report_id not like", value, "loadReportId");
+            return (Criteria) this;
+        }
+
+        public Criteria andLoadReportIdIn(List<String> values) {
+            addCriterion("load_report_id in", values, "loadReportId");
+            return (Criteria) this;
+        }
+
+        public Criteria andLoadReportIdNotIn(List<String> values) {
+            addCriterion("load_report_id not in", values, "loadReportId");
+            return (Criteria) this;
+        }
+
+        public Criteria andLoadReportIdBetween(String value1, String value2) {
+            addCriterion("load_report_id between", value1, value2, "loadReportId");
+            return (Criteria) this;
+        }
+
+        public Criteria andLoadReportIdNotBetween(String value1, String value2) {
+            addCriterion("load_report_id not between", value1, value2, "loadReportId");
+            return (Criteria) this;
+        }
+
         public Criteria andStatusIsNull() {
             addCriterion("`status` is null");
             return (Criteria) this;
diff --git a/backend/src/main/java/io/metersphere/base/mapper/TestPlanLoadCaseMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/TestPlanLoadCaseMapper.xml
index 1d2b1cea37..4fb8225c0f 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/TestPlanLoadCaseMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/TestPlanLoadCaseMapper.xml
@@ -5,6 +5,7 @@
     <id column="id" jdbcType="VARCHAR" property="id" />
     <result column="test_plan_id" jdbcType="VARCHAR" property="testPlanId" />
     <result column="load_case_id" jdbcType="VARCHAR" property="loadCaseId" />
+    <result column="load_report_id" jdbcType="VARCHAR" property="loadReportId" />
     <result column="status" jdbcType="VARCHAR" property="status" />
     <result column="create_time" jdbcType="BIGINT" property="createTime" />
     <result column="update_time" jdbcType="BIGINT" property="updateTime" />
@@ -68,7 +69,7 @@
     </where>
   </sql>
   <sql id="Base_Column_List">
-    id, test_plan_id, load_case_id, `status`, create_time, update_time
+    id, test_plan_id, load_case_id, load_report_id, `status`, create_time, update_time
   </sql>
   <select id="selectByExample" parameterType="io.metersphere.base.domain.TestPlanLoadCaseExample" resultMap="BaseResultMap">
     select
@@ -102,11 +103,11 @@
   </delete>
   <insert id="insert" parameterType="io.metersphere.base.domain.TestPlanLoadCase">
     insert into test_plan_load_case (id, test_plan_id, load_case_id, 
-      `status`, create_time, update_time
-      )
+      load_report_id, `status`, create_time, 
+      update_time)
     values (#{id,jdbcType=VARCHAR}, #{testPlanId,jdbcType=VARCHAR}, #{loadCaseId,jdbcType=VARCHAR}, 
-      #{status,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT}
-      )
+      #{loadReportId,jdbcType=VARCHAR}, #{status,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, 
+      #{updateTime,jdbcType=BIGINT})
   </insert>
   <insert id="insertSelective" parameterType="io.metersphere.base.domain.TestPlanLoadCase">
     insert into test_plan_load_case
@@ -120,6 +121,9 @@
       <if test="loadCaseId != null">
         load_case_id,
       </if>
+      <if test="loadReportId != null">
+        load_report_id,
+      </if>
       <if test="status != null">
         `status`,
       </if>
@@ -140,6 +144,9 @@
       <if test="loadCaseId != null">
         #{loadCaseId,jdbcType=VARCHAR},
       </if>
+      <if test="loadReportId != null">
+        #{loadReportId,jdbcType=VARCHAR},
+      </if>
       <if test="status != null">
         #{status,jdbcType=VARCHAR},
       </if>
@@ -169,6 +176,9 @@
       <if test="record.loadCaseId != null">
         load_case_id = #{record.loadCaseId,jdbcType=VARCHAR},
       </if>
+      <if test="record.loadReportId != null">
+        load_report_id = #{record.loadReportId,jdbcType=VARCHAR},
+      </if>
       <if test="record.status != null">
         `status` = #{record.status,jdbcType=VARCHAR},
       </if>
@@ -188,6 +198,7 @@
     set id = #{record.id,jdbcType=VARCHAR},
       test_plan_id = #{record.testPlanId,jdbcType=VARCHAR},
       load_case_id = #{record.loadCaseId,jdbcType=VARCHAR},
+      load_report_id = #{record.loadReportId,jdbcType=VARCHAR},
       `status` = #{record.status,jdbcType=VARCHAR},
       create_time = #{record.createTime,jdbcType=BIGINT},
       update_time = #{record.updateTime,jdbcType=BIGINT}
@@ -204,6 +215,9 @@
       <if test="loadCaseId != null">
         load_case_id = #{loadCaseId,jdbcType=VARCHAR},
       </if>
+      <if test="loadReportId != null">
+        load_report_id = #{loadReportId,jdbcType=VARCHAR},
+      </if>
       <if test="status != null">
         `status` = #{status,jdbcType=VARCHAR},
       </if>
@@ -220,6 +234,7 @@
     update test_plan_load_case
     set test_plan_id = #{testPlanId,jdbcType=VARCHAR},
       load_case_id = #{loadCaseId,jdbcType=VARCHAR},
+      load_report_id = #{loadReportId,jdbcType=VARCHAR},
       `status` = #{status,jdbcType=VARCHAR},
       create_time = #{createTime,jdbcType=BIGINT},
       update_time = #{updateTime,jdbcType=BIGINT}
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanLoadCaseMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanLoadCaseMapper.xml
index ab78f44e71..e99558c432 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanLoadCaseMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanLoadCaseMapper.xml
@@ -12,7 +12,7 @@
     </select>
     <select id="selectTestPlanLoadCaseList" resultType="io.metersphere.track.dto.TestPlanLoadCaseDTO">
         select tplc.id, u.name as userName, tplc.create_time, tplc.update_time, tplc.test_plan_id, tplc.load_case_id,
-               lt.status, lt.name as caseName
+               lt.status, lt.name as caseName, tplc.load_report_id
         from test_plan_load_case tplc
                  inner join load_test lt on tplc.load_case_id = lt.id
                  inner join user u on lt.user_id = u.id
diff --git a/backend/src/main/java/io/metersphere/track/controller/TestPlanLoadCaseController.java b/backend/src/main/java/io/metersphere/track/controller/TestPlanLoadCaseController.java
index 299ded472b..28dc2ee23b 100644
--- a/backend/src/main/java/io/metersphere/track/controller/TestPlanLoadCaseController.java
+++ b/backend/src/main/java/io/metersphere/track/controller/TestPlanLoadCaseController.java
@@ -6,7 +6,9 @@ import io.metersphere.base.domain.LoadTest;
 import io.metersphere.commons.utils.PageUtils;
 import io.metersphere.commons.utils.Pager;
 import io.metersphere.track.dto.TestPlanLoadCaseDTO;
+import io.metersphere.track.request.testplan.LoadCaseReportRequest;
 import io.metersphere.track.request.testplan.LoadCaseRequest;
+import io.metersphere.track.request.testplan.RunTestPlanRequest;
 import io.metersphere.track.service.TestPlanLoadCaseService;
 import org.springframework.web.bind.annotation.*;
 import javax.annotation.Resource;
@@ -40,4 +42,14 @@ public class TestPlanLoadCaseController {
     public void delete(@PathVariable String id) {
         testPlanLoadCaseService.delete(id);
     }
+
+    @PostMapping("/run")
+    public String run(@RequestBody RunTestPlanRequest request) {
+        return testPlanLoadCaseService.run(request);
+    }
+
+    @PostMapping("/report/exist")
+    public Boolean isExistReport(@RequestBody LoadCaseReportRequest request) {
+        return testPlanLoadCaseService.isExistReport(request);
+    }
 }
diff --git a/backend/src/main/java/io/metersphere/track/request/testplan/LoadCaseReportRequest.java b/backend/src/main/java/io/metersphere/track/request/testplan/LoadCaseReportRequest.java
new file mode 100644
index 0000000000..f189476e65
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/track/request/testplan/LoadCaseReportRequest.java
@@ -0,0 +1,11 @@
+package io.metersphere.track.request.testplan;
+
+import lombok.Getter;
+import lombok.Setter;
+
+@Getter
+@Setter
+public class LoadCaseReportRequest {
+    private String reportId;
+    private String testPlanLoadCaseId;
+}
diff --git a/backend/src/main/java/io/metersphere/track/request/testplan/RunTestPlanRequest.java b/backend/src/main/java/io/metersphere/track/request/testplan/RunTestPlanRequest.java
index 3f05f1ce3c..ec04980ebc 100644
--- a/backend/src/main/java/io/metersphere/track/request/testplan/RunTestPlanRequest.java
+++ b/backend/src/main/java/io/metersphere/track/request/testplan/RunTestPlanRequest.java
@@ -8,4 +8,5 @@ import lombok.Setter;
 public class RunTestPlanRequest extends TestPlanRequest {
     private String userId;
     private String triggerMode;
+    private String testPlanLoadId;
 }
diff --git a/backend/src/main/java/io/metersphere/track/service/TestPlanLoadCaseService.java b/backend/src/main/java/io/metersphere/track/service/TestPlanLoadCaseService.java
index c3a76171fb..caa4ce1e6e 100644
--- a/backend/src/main/java/io/metersphere/track/service/TestPlanLoadCaseService.java
+++ b/backend/src/main/java/io/metersphere/track/service/TestPlanLoadCaseService.java
@@ -1,13 +1,14 @@
 package io.metersphere.track.service;
 
-import io.metersphere.base.domain.LoadTest;
-import io.metersphere.base.domain.TestPlanLoadCase;
-import io.metersphere.base.domain.TestPlanLoadCaseExample;
+import io.metersphere.base.domain.*;
+import io.metersphere.base.mapper.LoadTestReportMapper;
 import io.metersphere.base.mapper.TestPlanLoadCaseMapper;
 import io.metersphere.base.mapper.ext.ExtTestPlanLoadCaseMapper;
 import io.metersphere.performance.service.PerformanceTestService;
 import io.metersphere.track.dto.TestPlanLoadCaseDTO;
+import io.metersphere.track.request.testplan.LoadCaseReportRequest;
 import io.metersphere.track.request.testplan.LoadCaseRequest;
+import io.metersphere.track.request.testplan.RunTestPlanRequest;
 import org.apache.ibatis.session.ExecutorType;
 import org.apache.ibatis.session.SqlSession;
 import org.apache.ibatis.session.SqlSessionFactory;
@@ -32,6 +33,8 @@ public class TestPlanLoadCaseService {
     private PerformanceTestService performanceTestService;
     @Resource
     private SqlSessionFactory sqlSessionFactory;
+    @Resource
+    private LoadTestReportMapper loadTestReportMapper;
 
     public List<LoadTest> relevanceList(LoadCaseRequest request) {
         List<String> ids = extTestPlanLoadCaseMapper.selectIdsNotInPlan(request.getProjectId(), request.getTestPlanId());
@@ -68,4 +71,29 @@ public class TestPlanLoadCaseService {
         testPlanLoadCaseExample.createCriteria().andIdEqualTo(id);
         testPlanLoadCaseMapper.deleteByExample(testPlanLoadCaseExample);
     }
+
+    public String run(RunTestPlanRequest request) {
+        String reportId = performanceTestService.run(request);
+        TestPlanLoadCase testPlanLoadCase = new TestPlanLoadCase();
+        testPlanLoadCase.setId(request.getTestPlanLoadId());
+        testPlanLoadCase.setLoadReportId(reportId);
+        testPlanLoadCaseMapper.updateByPrimaryKeySelective(testPlanLoadCase);
+        return reportId;
+    }
+
+    public Boolean isExistReport(LoadCaseReportRequest request) {
+        String reportId = request.getReportId();
+        String testPlanLoadCaseId = request.getTestPlanLoadCaseId();
+        LoadTestReportExample example = new LoadTestReportExample();
+        example.createCriteria().andIdEqualTo(reportId);
+        List<LoadTestReport> loadTestReports = loadTestReportMapper.selectByExample(example);
+        if (CollectionUtils.isEmpty(loadTestReports)) {
+            TestPlanLoadCase testPlanLoadCase = new TestPlanLoadCase();
+            testPlanLoadCase.setId(testPlanLoadCaseId);
+            testPlanLoadCase.setLoadReportId("");
+            testPlanLoadCaseMapper.updateByPrimaryKeySelective(testPlanLoadCase);
+            return false;
+        }
+        return true;
+    }
 }
diff --git a/backend/src/main/resources/db/migration/V62__add_test_plan_load_case.sql b/backend/src/main/resources/db/migration/V62__add_test_plan_load_case.sql
index d952934a88..26abd8af0c 100644
--- a/backend/src/main/resources/db/migration/V62__add_test_plan_load_case.sql
+++ b/backend/src/main/resources/db/migration/V62__add_test_plan_load_case.sql
@@ -4,6 +4,7 @@ CREATE TABLE IF NOT EXISTS `test_plan_load_case`
     `test_plan_id`   varchar(50) NOT NULL COMMENT 'Test plan ID',
     `load_case_id`    varchar(50) NOT NULL COMMENT 'Load test case ID',
     `status`         varchar(50) DEFAULT NULL COMMENT 'Load case status',
+    `load_report_id` varchar(50) DEFAULT NULL COMMENT 'Load report id',
     `create_time`    bigint(13)  NOT NULL COMMENT 'Create timestamp',
     `update_time`    bigint(13)  NOT NULL COMMENT 'Update timestamp',
     PRIMARY KEY (`id`),
diff --git a/frontend/src/business/components/track/plan/view/comonents/load/LoadCaseReport.vue b/frontend/src/business/components/track/plan/view/comonents/load/LoadCaseReport.vue
new file mode 100644
index 0000000000..29ddbd7bc7
--- /dev/null
+++ b/frontend/src/business/components/track/plan/view/comonents/load/LoadCaseReport.vue
@@ -0,0 +1,39 @@
+<template>
+  <el-drawer
+    class="load-case-report-drawer"
+    :visible.sync="drawer"
+    direction="ltr"
+    @close="handleClose"
+    size="80%">
+    <load-case-report-view :report-id="reportId" ref="loadCaseReportView"/>
+  </el-drawer>
+</template>
+
+<script>
+import LoadCaseReportView from "@/business/components/track/plan/view/comonents/load/LoadCaseReportView";
+
+export default {
+  name: "LoadCaseReport",
+  components: {LoadCaseReportView},
+  data() {
+    return {
+      drawer: false,
+    }
+  },
+  props: {
+    reportId: String
+  },
+  methods: {
+    handleClose() {
+      this.drawer = false;
+      this.$emit('refresh');
+    }
+  },
+}
+</script>
+
+<style scoped>
+.load-case-report-drawer >>> .el-drawer__header {
+  margin-bottom: 0;
+}
+</style>
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
new file mode 100644
index 0000000000..755ef3d597
--- /dev/null
+++ b/frontend/src/business/components/track/plan/view/comonents/load/LoadCaseReportView.vue
@@ -0,0 +1,376 @@
+<template>
+  <ms-container>
+    <ms-main-container>
+      <el-card v-loading="result.loading" v-if="show">
+        <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 :disabled="isReadOnly || report.status !== 'Running'" type="primary" plain size="mini"
+                         @click="dialogFormVisible=true">
+                {{ $t('report.test_stop_now') }}
+              </el-button>
+              <el-button :disabled="isReadOnly || report.status !== 'Completed'" type="success" plain size="mini"
+                         @click="rerun(testId)">
+                {{ $t('report.test_execute_again') }}
+              </el-button>
+              <el-button :disabled="isReadOnly" type="info" plain size="mini" @click="handleExport(reportName)">
+                {{ $t('test_track.plan_view.export_report') }}
+              </el-button>
+              <el-button :disabled="isReadOnly" type="warning" plain size="mini" @click="downloadJtl()">
+                {{ $t('report.downloadJtl') }}
+              </el-button>
+
+              <!--<el-button :disabled="isReadOnly" 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/>
+        <div ref="resume">
+          <el-tabs v-model="active" type="border-card" :stretch="true">
+            <el-tab-pane :label="$t('load_test.pressure_config')">
+              <ms-performance-pressure-config :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"/>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('report.test_request_statistics')">
+              <ms-report-request-statistics :report="report" ref="requestStatistics"/>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('report.test_error_log')">
+              <ms-report-error-log :report="report" ref="errorLog"/>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('report.test_log_details')">
+              <ms-report-log-details :report="report"/>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+
+        <ms-performance-report-export :title="reportName" id="performanceReportExport" v-show="reportExportVisible"
+                                      :report="report"/>
+
+      </el-card>
+      <el-dialog :title="$t('report.test_stop_now_confirm')" :visible.sync="dialogFormVisible" width="30%">
+        <p v-html="$t('report.force_stop_tips')"/>
+        <p v-html="$t('report.stop_tips')"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="danger" size="small" @click="stopTest(true)">{{ $t('report.force_stop_btn') }}
+          </el-button>
+          <el-button type="primary" size="small" @click="stopTest(false)">{{ $t('report.stop_btn') }}
+          </el-button>
+        </div>
+      </el-dialog>
+    </ms-main-container>
+  </ms-container>
+</template>
+
+<script>
+
+import {checkoutTestManagerOrTestUser, exportPdf} from "@/common/js/utils";
+import html2canvas from 'html2canvas';
+import {Message} from "element-ui";
+import MsPerformanceReportExport from "@/business/components/performance/report/PerformanceReportExport";
+import MsReportErrorLog from "@/business/components/performance/report/components/ErrorLog";
+import MsReportLogDetails from "@/business/components/performance/report/components/LogDetails";
+import MsReportRequestStatistics from "@/business/components/performance/report/components/RequestStatistics";
+import MsReportTestOverview from "@/business/components/performance/report/components/TestOverview";
+import MsContainer from "@/business/components/common/components/MsContainer";
+import MsMainContainer from "@/business/components/common/components/MsMainContainer";
+import MsPerformancePressureConfig from "@/business/components/performance/report/components/PerformancePressureConfig";
+
+
+export default {
+  name: "LoadCaseReportView",
+  components: {
+    MsPerformanceReportExport,
+    MsReportErrorLog,
+    MsReportLogDetails,
+    MsReportRequestStatistics,
+    MsReportTestOverview,
+    MsContainer,
+    MsMainContainer,
+    MsPerformancePressureConfig
+  },
+  data() {
+    return {
+      result: {},
+      active: '1',
+      status: '',
+      reportName: '',
+      testId: '',
+      testName: '',
+      projectId: '',
+      projectName: '',
+      startTime: '0',
+      endTime: '0',
+      minutes: '0',
+      seconds: '0',
+      title: 'Logging',
+      report: {},
+      websocket: null,
+      dialogFormVisible: false,
+      reportExportVisible: false,
+      testPlan: {testResourcePoolId: null},
+      show: true
+    }
+  },
+  props: {
+    reportId: String,
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    },
+  },
+  watch: {
+    reportId() {
+      this.init();
+    }
+  },
+  methods: {
+    initBreadcrumb(callback) {
+      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;
+            //
+            if (callback) callback(res);
+          } else {
+            this.$error(this.$t('report.not_exist'));
+          }
+        })
+      }
+    },
+    initReportTimeInfo() {
+      if (this.status === 'Starting') {
+        this.clearData();
+        return;
+      }
+      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();
+          });
+      }
+    },
+    initWebSocket() {
+      let protocol = "ws://";
+      if (window.location.protocol === 'https:') {
+        protocol = "wss://";
+      }
+      const uri = protocol + window.location.host + "/performance/report/" + this.reportId;
+      this.websocket = new WebSocket(uri);
+      this.websocket.onmessage = this.onMessage;
+      this.websocket.onopen = this.onOpen;
+      this.websocket.onerror = this.onError;
+      this.websocket.onclose = this.onClose;
+    },
+    checkReportStatus(status) {
+      switch (status) {
+        case 'Error':
+          // this.$warning(this.$t('report.generation_error'));
+          this.active = '4';
+          break;
+        case 'Starting':
+          this.$alert(this.$t('report.start_status'));
+          break;
+        case 'Reporting':
+        case 'Running':
+        case 'Completed':
+        default:
+          break;
+      }
+    },
+    clearData() {
+      this.startTime = '0';
+      this.endTime = '0';
+      this.minutes = '0';
+      this.seconds = '0';
+    },
+    stopTest(forceStop) {
+      this.result = this.$get('/performance/stop/' + this.reportId + '/' + forceStop, () => {
+        this.$success(this.$t('report.test_stop_success'));
+        if (forceStop) {
+          this.$router.push('/performance/report/all');
+        } else {
+          this.report.status = 'Completed';
+        }
+      });
+      this.dialogFormVisible = false;
+    },
+    rerun(testId) {
+      this.$confirm(this.$t('report.test_rerun_confirm'), '', {
+        confirmButtonText: this.$t('commons.confirm'),
+        cancelButtonText: this.$t('commons.cancel'),
+        type: 'warning'
+      }).then(() => {
+        // this.result = this.$post('/performance/run', {id: testId, triggerMode: 'MANUAL'}, (response) => {
+        //   this.reportId = response.data;
+        //   this.$router.push({path: '/performance/report/view/' + this.reportId});
+        //   // 注册 socket
+        //   this.initWebSocket();
+        // })
+      }).catch(() => {
+      });
+    },
+    onOpen() {
+      // window.console.log("socket opening.");
+    },
+    onError(e) {
+      // window.console.error(e)
+    },
+    onMessage(e) {
+      this.$set(this.report, "refresh", e.data); // 触发刷新
+      if (e.data.startsWith('Error')) {
+        this.$set(this.report, "status", 'Error');
+        this.$warning(e.data);
+        return;
+      }
+      this.$set(this.report, "status", 'Running');
+      this.status = 'Running';
+      this.initReportTimeInfo();
+      // window.console.log('receive a message:', e.data);
+    },
+    onClose(e) {
+      if (e.code === 1005) {
+        // 强制删除之后关闭socket，不用刷新report
+        return;
+      }
+      this.$set(this.report, "refresh", Math.random()); // 触发刷新
+      this.$set(this.report, "status", 'Completed');
+      this.initReportTimeInfo();
+      // window.console.log("socket closed.");
+    },
+    handleExport(name) {
+      this.result.loading = true;
+      this.reportExportVisible = true;
+      let reset = this.exportReportReset;
+
+      this.$nextTick(function () {
+        setTimeout(() => {
+          html2canvas(document.getElementById('performanceReportExport'), {
+            scale: 2
+          }).then(function (canvas) {
+            exportPdf(name, [canvas]);
+            reset();
+          });
+        }, 1000);
+      });
+    },
+    exportReportReset() {
+      this.reportExportVisible = false;
+      this.result.loading = false;
+    },
+    downloadJtl() {
+      let config = {
+        url: "/performance/report/jtl/download/" + this.reportId,
+        method: 'get',
+        responseType: 'blob'
+      };
+      this.result = this.$request(config).then(response => {
+        const content = response.data;
+        const blob = new Blob([content]);
+        if ("download" in document.createElement("a")) {
+          // 非IE下载
+          //  chrome/firefox
+          let aTag = document.createElement('a');
+          aTag.download = this.reportId + ".jtl";
+          aTag.href = URL.createObjectURL(blob);
+          aTag.click();
+          URL.revokeObjectURL(aTag.href)
+        } else {
+          // IE10+下载
+          navigator.msSaveBlob(blob, this.filename)
+        }
+      }).catch(e => {
+        let text = e.response.data.text();
+        text.then((data) => {
+          Message.error({message: JSON.parse(data).message || e.message, showClose: true});
+        });
+      });
+    },
+    init() {
+      this.isReadOnly = false;
+      if (!checkoutTestManagerOrTestUser()) {
+        this.isReadOnly = true;
+      }
+      this.clearData();
+      this.result = this.$get("/performance/report/" + this.reportId, res => {
+        let data = res.data;
+        if (data) {
+          this.status = data.status;
+          this.$set(this.report, "id", this.reportId);
+          this.$set(this.report, "status", data.status);
+          this.$set(this.report, "testId", data.testId);
+          this.$set(this.report, "loadConfiguration", data.loadConfiguration);
+          this.checkReportStatus(data.status);
+          if (this.status === "Completed" || this.status === "Running") {
+            this.initReportTimeInfo();
+          }
+          this.initBreadcrumb();
+          this.initWebSocket();
+        } else {
+          this.$error(this.$t('report.not_exist'))
+        }
+      });
+    }
+  },
+  created() {
+    this.init();
+  }
+}
+</script>
+
+<style scoped>
+
+.ms-report-view-btns {
+  margin-top: 15px;
+}
+
+.ms-report-time-desc {
+  text-align: left;
+  display: block;
+  color: #5C7878;
+}
+
+.report-export .el-card {
+  margin-bottom: 15px;
+}
+
+</style>
+
diff --git a/frontend/src/business/components/track/plan/view/comonents/load/TestPlanLoadCaseList.vue b/frontend/src/business/components/track/plan/view/comonents/load/TestPlanLoadCaseList.vue
index 92652e83f9..7c2adc1752 100644
--- a/frontend/src/business/components/track/plan/view/comonents/load/TestPlanLoadCaseList.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/load/TestPlanLoadCaseList.vue
@@ -24,18 +24,18 @@
           </template>
         </el-table-column>
 
-<!--        <el-table-column prop="num" label="ID" show-overflow-tooltip/>-->
+        <!--        <el-table-column prop="num" label="ID" show-overflow-tooltip/>-->
         <el-table-column
           prop="caseName"
           :label="$t('commons.name')"
           show-overflow-tooltip>
         </el-table-column>
-<!--        <el-table-column-->
-<!--          prop="projectName"-->
-<!--          :label="$t('load_test.project_name')"-->
-<!--          width="150"-->
-<!--          show-overflow-tooltip>-->
-<!--        </el-table-column>-->
+        <!--        <el-table-column-->
+        <!--          prop="projectName"-->
+        <!--          :label="$t('load_test.project_name')"-->
+        <!--          width="150"-->
+        <!--          show-overflow-tooltip>-->
+        <!--        </el-table-column>-->
         <el-table-column
           prop="userName"
           :label="$t('load_test.user_name')"
@@ -66,9 +66,20 @@
             <ms-performance-test-status :row="row"/>
           </template>
         </el-table-column>
+        <el-table-column
+          label="报告"
+          show-overflow-tooltip>
+          <template v-slot:default="scope">
+            <div v-loading="loading === scope.row.id">
+              <el-link type="info" @click="getReport(scope.row)" v-if="scope.row.loadReportId">查看报告</el-link>
+              <span v-else> - </span>
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column v-if="!isReadOnly" :label="$t('commons.operating')" align="center">
           <template v-slot:default="scope">
-            <ms-table-operator-button class="run-button" :is-tester-permission="true" :tip="$t('api_test.run')" icon="el-icon-video-play"
+            <ms-table-operator-button class="run-button" :is-tester-permission="true" :tip="$t('api_test.run')"
+                                      icon="el-icon-video-play"
                                       @exec="run(scope.row)" v-tester/>
             <ms-table-operator-button :is-tester-permission="true" :tip="$t('test_track.plan_view.cancel_relevance')"
                                       icon="el-icon-unlock" type="danger" @exec="handleDelete(scope.row)" v-tester/>
@@ -78,19 +89,25 @@
       <ms-table-pagination :change="initTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
                            :total="total"/>
     </el-card>
+
+    <load-case-report :report-id="reportId" ref="loadCaseReport" @refresh="initTable"/>
   </div>
 </template>
 
 <script>
-import TestPlanLoadCaseListHeader from "@/business/components/track/plan/view/comonents/load/TestPlanLoadCaseListHeader";
+import TestPlanLoadCaseListHeader
+  from "@/business/components/track/plan/view/comonents/load/TestPlanLoadCaseListHeader";
 import ShowMoreBtn from "@/business/components/track/case/components/ShowMoreBtn";
 import {_filter, _sort} from "@/common/js/utils";
 import MsTablePagination from "@/business/components/common/pagination/TablePagination";
 import MsPerformanceTestStatus from "@/business/components/performance/test/PerformanceTestStatus";
 import MsTableOperatorButton from "@/business/components/common/components/MsTableOperatorButton";
+import LoadCaseReport from "@/business/components/track/plan/view/comonents/load/LoadCaseReport";
+
 export default {
   name: "TestPlanLoadCaseList",
   components: {
+    LoadCaseReport,
     TestPlanLoadCaseListHeader,
     ShowMoreBtn,
     MsTablePagination,
@@ -108,9 +125,9 @@ export default {
       total: 0,
       screenHeight: document.documentElement.clientHeight - 330,//屏幕高度
       buttons: [
-        {
-          name: "批量编辑用例", handleClick: this.handleBatchEdit
-        },
+        // {
+        //   name: "批量编辑用例", handleClick: this.handleBatchEdit
+        // },
         {
           name: "批量取消关联", handleClick: this.handleDeleteBatch
         },
@@ -126,6 +143,8 @@ export default {
         {text: 'Completed', value: 'Completed'},
         {text: 'Error', value: 'Error'}
       ],
+      reportId: '',
+      loading: false
     }
   },
   props: {
@@ -177,17 +196,24 @@ export default {
         this.selectRows.add(row);
       }
     },
-    handleBatchEdit() {
-
-    },
+    // handleBatchEdit() {
+    //
+    // },
     handleDeleteBatch() {
 
     },
     handleRunBatch() {
 
     },
-    run() {
-
+    run(loadCase) {
+      this.$post('/test/plan/load/case/run', {
+        id: loadCase.loadCaseId,
+        testPlanLoadId: loadCase.id,
+        triggerMode: 'MANUAL'
+      }, response => {
+        let reportId = response.data;
+        this.initTable();
+      })
     },
     handleDelete(loadCase) {
       this.$get('/test/plan/load/case/delete/' + loadCase.id, () => {
@@ -208,6 +234,24 @@ export default {
       _filter(filters, this.condition);
       this.initTableData();
     },
+    getReport(data) {
+      const {loadReportId} = data;
+      this.reportId = loadReportId;
+      this.loading = data.id;
+      this.$post('/test/plan/load/case/report/exist', {
+        testPlanLoadCaseId: data.id,
+        reportId: loadReportId
+      }, response => {
+        let exist = response.data;
+        this.loading = "";
+        if (exist) {
+          this.$refs.loadCaseReport.drawer = true;
+        } else {
+          this.$warning("报告不存在");
+          // this.initTable();
+        }
+      })
+    }
   }
 }
 </script>