fix: 修复接口报告不更新问题

frontend/src/business/components/api/report/ApiReportView.vue

@@ -64,13 +64,15 @@
         report: {},
         loading: true,
         fails: [],
-        totalTime: "",
+        totalTime: 0,
         isRequestResult: false,
         request: {},
         scenarioName: null,
       }
     },
-
+    activated() {
+      this.isRequestResult = false
+    },
     methods: {
       init() {
         this.loading = true;
@@ -83,7 +85,6 @@
       },
       getReport() {
         this.init();
-
         if (this.reportId) {
           let url = "/api/report/get/" + this.reportId;
           this.$get(url, response => {
@@ -111,9 +112,11 @@
       getFails() {
         if (this.isNotRunning) {
           this.fails = [];
-
+          this.totalTime = 0
           this.content.scenarios.forEach((scenario) => {
-            this.totalTime = this.totalTime + scenario.responseTime
+            console.log(scenario.responseTime)
+            this.totalTime = this.totalTime + Number(scenario.responseTime)
+            console.log(this.totalTime)
             let failScenario = Object.assign({}, scenario);
             if (scenario.error > 0) {
               this.fails.push(failScenario);

frontend/src/business/components/api/report/components/MetricChart.vue

@@ -55,7 +55,7 @@
 
     props: {
       content: Object,
-      totalTime: String
+      totalTime: Number
     },
     data() {
       return {
@@ -70,19 +70,29 @@
     },
     methods: {
       initTime() {
-        this.time=this.totalTime
-        this.seconds = Math.floor(this.time / 1000);
-        if (this.seconds > 60) {
-          this.minutes = Math.floor(this.time/60)
-          this.seconds=Math.floor(this.time%60)
-          this.time=this.minutes+"min"+this.seconds+"s"
+        this.time = this.totalTime
+        this.seconds = Math.floor(this.time / 1000)
+        if (this.seconds >= 1) {
+          if (this.seconds > 60) {
+            this.minutes = Math.round(this.time / 60)
+            this.seconds = Math.round(this.time % 60)
+            this.time = this.minutes + "min" + this.seconds + "s"
+          }
+          if (this.seconds > 60) {
+            this.minutes = Math.round(this.time / 60)
+            this.seconds = Math.round(this.time % 60)
+            this.time = this.minutes + "min" + this.seconds + "s"
+          }
+          if (this.minutes > 60) {
+            this.hour = Math.round(this.minutes / 60)
+            this.minutes = Math.round(this.minutes % 60)
+            this.time = this.hour + "hour" + this.minutes + "min" + this.seconds + "s"
+          }
+
+          this.time = (this.seconds) + "s"
+        } else {
+          this.time = this.totalTime + "ms"
         }
-        if(this.minutes>60){
-          this.hour=Math.floor(this.minutes/60)
-          this.minutes = Math.floor(this.minutes%60)
-          this.time=this.hour+"hour"+this.minutes+"min"+this.seconds+"s"
-        }
-        this.time=this.seconds+"s"
       },
     },
     computed: {

frontend/src/business/components/api/report/components/RequestResult.vue

@@ -39,18 +39,8 @@
     methods: {
       active() {
         this.$emit("requestResult", {request: this.request, scenarioName: this.scenarioName});
-
       }
     },
-
-    /*  computed: {
-        assertion() {
-          return this.request.passAssertions + " / " + this.request.totalAssertions;
-        },
-        hasSub() {
-          return this.request.subRequestResults.length > 0;
-        }
-      }*/
   }
 </script>
 

frontend/src/business/components/track/plan/view/comonents/report/TestCaseReportView.vue

@@ -31,7 +31,7 @@
           </el-col>
         </el-row>
 
-        <div class="container" ref="resume">
+        <div class="container" ref="resume" id="app">
           <el-main>
             <div class="preview" v-for="item in previews" :key="item.id">
               <template-component :isReportView="true" :metric="metric" :preview="item"/>
@@ -40,9 +40,10 @@
         </div>
       </template>
     </el-drawer>
-
     <test-case-report-template-edit :metric="metric" ref="templateEdit" @refresh="getReport"/>
+    <!-- <script>
 
+     </script>-->
   </div>
 </template>
 
@@ -55,12 +56,12 @@
   import TestCaseReportTemplateEdit from "./TestCaseReportTemplateEdit";
   import TemplateComponent from "./TemplateComponent/TemplateComponent";
   import writer from 'file-writer'
-  import ResumeCss from "../../../../../../../common/css/main.css";
+  import ReportStyle from "../../../../../../../common/css/report.css.js";
 
   export default {
     name: "TestCaseReportView",
     components: {
-      TemplateComponent, ResumeCss,
+      TemplateComponent,
       TestCaseReportTemplateEdit,
       RichTextComponent, TestResultComponent, TestResultChartComponent, BaseInfoComponent
     },
@@ -145,31 +146,6 @@
       handleEdit() {
         this.$refs.templateEdit.open(this.reportId, true);
       },
-      /*导出报告*/
-      /*handleExport(name) {
-        let html = this.getHtml();
-        writer(`${name}.html`, html, 'utf-8');
-      },
-      getHtml() {
-        const template = this.$refs.resume.innerHTML
-        let html = `<!DOCTYPE html>
-                 <html>
-                 <head>
-                 <meta charset="utf-8">
-                 <meta name="viewport" content="width=device-width,initial-scale=1.0">
-                 <title>html</title>
-                <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
-                <style>${ResumeCss}</style>
-                </head>
-                <body>
-                <div style="margin:0 auto;width:1200px">
-                   <img id ='div' :src = "imgUrl" :style=" {width: '1000px', height: '500px'}" />
-                     ${template}
-                </div>
-                </body>
-                </html>`
-        return html
-      },*/
       handleSave() {
         let param = {};
         this.buildParam(param);
@@ -227,6 +203,32 @@
           }
         });
       },
+      /*导出报告*/
+      handleExport(name) {
+        let html = this.getHtml();
+        writer(`${name}.html`, html, 'utf-8');
+        console.log(html)
+      },
+      getHtml() {
+        let template = this.$refs.resume.innerHTML;
+        let html = `<!DOCTYPE html>
+                 <html>
+                 <head>
+                 <meta charset="utf-8">
+                 <meta name="viewport" content="width=device-width,initial-scale=1.0">
+                 <title>html</title>
+                <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+                <style>${ReportStyle}</style>
+                </head>
+                <body>
+                <div style="margin:0 auto;width:1200px">
+                     ${template}
+                </div>
+                <script src="https://cdn.bootcss.com/element-ui/2.4.11/index.js"/>
+                </body>
+                </html>`
+        return html
+      },
 
     }
   }

frontend/src/common/css/report.css.js

+const ReportStyle = `.body{
+  font-size: 14px;
+  color: #7B0274;
+}
+.container {
+  height: 100vh;
+  background: #F5F5F5;
+}
+.preview {
+  position: relative;
+}
+/* <-- 表格拖拽表头调整宽度，在 t-bable 上添加 border 属性，并添加 adjust-table 类名*/
+.adjust-table td {
+  border-right-color: white;
+}
+
+.adjust-table th {
+  border-right-color: white;
+}
+
+.adjust-table {
+  border-color: white;
+}
+
+.adjust-table:after {
+  background-color: white;
+}
+
+.adjust-table th:hover:after {
+  content: '';
+  position: absolute;
+  top: 25%;
+  right: 0;
+  height: 50%;
+  width: 3px;
+  background-color: #EBEEF5;
+}
+span {
+    margin-right: 5px;
+    display: inline-block;
+  }
+
+  .el-col span:first-child {
+    font-weight: bold;
+    width: 100px;
+  }
+
+  .el-row {
+    height: 60px;
+  }
+
+  .select-time span {
+    display: inline-block;
+  }
+
+  .el-date-editor {
+    width: 150px;
+  }
+`
+
+export default ReportStyle;