add：性能测试-报告

test-ui/src/api/performance/index.js

@@ -45,6 +45,14 @@ export function getTestCaseList(query) {
   })
 }
 
+// 测试-详情
+export function getTestDetail(query) {
+  return request({
+    url: 'test/performanceTest/' + query,
+    method: 'get',
+  })
+}
+
 //测试-编辑
 export function editTest(data) {
   return request({

test-ui/src/api/performance/report.js

@@ -0,0 +1 @@
+import request from '@/utils/request'

test-ui/src/router/index.js

@@ -172,6 +172,20 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/performance/report/detail',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/test/performance/reportDetail'),
+        name: 'performanceAdd',
+        noCache: true,
+        meta: { title: '修改测试', activeMenu: '/performance' }
+      }
+    ]
+  },
 ]
 
 // 动态路由，基于用户权限动态去加载

test-ui/src/views/test/performance/performance.vue

@@ -68,7 +68,7 @@ export default {
     },
     // 编辑
     hadleClickEdit(val) {
-      this.$tab.openPage("修改测试", "/performance/edit", { data: val });
+      this.$tab.openPage("修改测试", "/performance/edit", { id: val.id });
     },
     // 删除
     hadleClickDelete(val) {

test-ui/src/views/test/performance/performanceAdd.vue

@@ -255,6 +255,7 @@ export default {
       getTestCaseList(this.searchScenen).then(res => {
         if (res.code === 200) {
           this.sceneList = res.rows
+          this.totalScene = res.total
         }
       })
     },

test-ui/src/views/test/performance/performanceEdit.vue

@@ -29,7 +29,11 @@
             @click="handleClickLoad">引用接口自动化场景</el-button>
           <el-table :data="changeList">
             <el-table-column prop="name" label="场景名称" />
-            <el-table-column prop="status" label="Enable/Disable" />
+            <el-table-column prop="status" label="Enable/Disable">
+              <template slot-scope="scope">
+                <el-switch v-model="scope.row.status" active-value="1" inactive-value="0"></el-switch>
+              </template>
+            </el-table-column>
             <el-table-column prop="action" label="操作">
               <template slot-scope="scope">
                 <el-button type="text" icon="el-icon-delete" style="color: red;"
@@ -139,7 +143,7 @@
 </template>
 
 <script>
-import { editTest, editAndExecuteTest, getTestCaseList } from '../../../api/performance';
+import { editTest, editAndExecuteTest, getTestCaseList, getTestDetail } from '../../../api/performance';
 
 export default {
   name: "PerformanceEdit",
@@ -197,7 +201,7 @@ export default {
   },
   mounted() {
     this.getTestCaseData()
-    this.addForm = this.$route.query.data
+    this.getTestDetailData()
   },
   methods: {
     // 保存
@@ -255,6 +259,15 @@ export default {
       getTestCaseList(this.searchScenen).then(res => {
         if (res.code === 200) {
           this.sceneList = res.rows
+          this.totalScene = res.total
+        }
+      })
+    },
+    // 获取详情
+    getTestDetailData() {
+      getTestDetail(this.$route.query.id).then(res => {
+        if (res.code === 200) {
+          this.addForm = res.data
         }
       })
     },

test-ui/src/views/test/performance/report.vue

@@ -1,9 +1,94 @@
-<script setup>
-
-</script>
-
 <template>
-  <p>报告</p>
+  <div class="report">
+    <div class="header">
+      <div class="search">
+        <el-input v-model="serachForm.performanceName" placeholder="根据名称搜索"></el-input>
+        <el-button type="text" style="margin-left: 10px;" @click="serachList">高级搜索</el-button>
+      </div>
+    </div>
+    <div class="table">
+      <el-table :data="data">
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="name0" label="名称" align="center" sortable />
+        <el-table-column prop="name1" label="创建人" align="center" width="150" sortable />
+        <el-table-column prop="name2" label="并发数" align="center" width="150" sortable />
+        <el-table-column prop="name3" label="响应(s)" align="center" width="150" sortable />
+        <el-table-column prop="name4" label="TPS" align="center" width="150" sortable />
+        <el-table-column prop="name5" label="开始时间" align="center" width="150" sortable />
+        <el-table-column prop="name6" label="结束时间" align="center" width="150" sortable />
+        <el-table-column prop="name7" label="执行时长" align="center" width="150" sortable />
+        <el-table-column prop="name8" label="触发方式" align="center" width="150" sortable />
+        <el-table-column prop="name9" label="状态" align="center" width="150" sortable />
+        <el-table-column prop="action" label="操作" align="center" width="150" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" icon="el-icon-view" @click="hadleClickDetail(scope.row)">查看</el-button>
+            <el-button type="text" icon="el-icon-delete" style="color: red;"
+              @click="hadleClickDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="page">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :page-size="serachForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />
+      </div>
+    </div>
+  </div>
 </template>
 
-<style scoped lang="scss"></style>
+<script>
+export default {
+  name: "Report",
+  data() {
+    return {
+      serachForm: {
+        pageNum: 1,
+        pageSize: 10,
+        performanceName: '', // 名称
+      },
+      total: 0,
+      data: [{}, {}],
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    // 查看
+    hadleClickDetail() {
+      this.$tab.openPage("报告详情", "/performance/report/detail");
+    },
+    // 删除’
+    hadleClickDelete() {
+
+    },
+    // 分页
+    handleSizeChange() { },
+    handleCurrentChange() { },
+    serachList() { },
+  }
+
+}
+</script>
+
+
+
+<style scoped lang="scss">
+.report {
+  padding: 20px;
+
+  .header {
+    display: flex;
+    justify-content: flex-end;
+    padding: 10px;
+  }
+
+  .search {
+    display: flex;
+  }
+
+  .page {
+    padding: 10px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

test-ui/src/views/test/performance/reportDetail.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="report-detail">
+    <div class="header">
+      <div class="title">执行时长</div>
+      <div class="title">开始时间</div>
+      <div class="title">结束时间</div>
+    </div>
+    <div class="tabs">
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="请求统计" name="first">
+          <div class="btn-wrap">
+            <el-button @click="exportExcel">导出为Excel</el-button>
+          </div>
+          <el-table :data="statisticsData">
+            <el-table-column label="Requests" align="center">
+              <el-table-column prop="name" label="Label" width="120" sortable align="center" />
+            </el-table-column>
+            <el-table-column label="Executions" align="center">
+              <el-table-column prop="name" label="Samples" width="120" sortable align="center" />
+              <el-table-column prop="name" label="FAIL" width="120" sortable align="center" />
+              <el-table-column prop="name" label="Error%" width="120" sortable align="center" />
+            </el-table-column>
+            <el-table-column label="Response Times(ms)" align="center">
+              <el-table-column prop="name" label="Avg" width="120" sortable align="center" />
+              <el-table-column prop="name" label="Min" width="120" sortable align="center" />
+              <el-table-column prop="name" label="Max" width="120" sortable align="center" />
+              <el-table-column prop="name" label="Med" width="120" sortable align="center" />
+              <el-table-column prop="name" label="90%" width="120" sortable align="center" />
+              <el-table-column prop="name" label="95%" width="120" sortable align="center" />
+              <el-table-column prop="name" label="99%" width="120" sortable align="center" />
+            </el-table-column>
+            <el-table-column label="Throughput" align="center">
+              <el-table-column prop="name" label="Trans/s" width="120" sortable align="center" />
+            </el-table-column>
+            <el-table-column label="NetWork(KB/Sec)" align="center">
+              <el-table-column prop="name" label="Recd" width="120" sortable align="center" />
+              <el-table-column prop="name" label="Sent" width="120" sortable align="center" />
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="错误记录" name="second">
+          <div class="title-error">Errors</div>
+          <el-table :data="errorList" border>
+            <el-table-column prop="date" label="Type of error" sortable />
+            <el-table-column prop="name" label="Number of errors" sortable />
+            <el-table-column prop="address" label="% in errors" sortable />
+            <el-table-column prop="address" label="% in samples" sortable />
+          </el-table>
+          <div class="title-error">Top 5 Errors</div>
+          <el-table :data="errorList" border>
+            <el-table-column prop="date" label="Sample" sortable />
+            <el-table-column prop="name" label="#Samples" sortable />
+            <el-table-column prop="address" label="All Errors" sortable />
+          </el-table>
+          <div class="title-error">#1 Errors</div>
+          <el-table :data="errorList" border>
+            <el-table-column prop="date" label="Sample" sortable />
+            <el-table-column prop="name" label="#1 Error" sortable />
+            <el-table-column prop="address" label="#1 Error Count" sortable />
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ReportDetail",
+  data() {
+    return {
+      activeName: 'first',
+      statisticsData: [], // 统计
+      errorList: []
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    // 导出excel
+    exportExcel() {
+
+    },
+  }
+
+}
+</script>
+
+
+
+<style scoped lang="scss">
+.report-detail {
+  padding: 20px;
+
+  .title {
+    font-size: 14px;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+
+  }
+
+  .tabs {
+    margin-top: 10px;
+
+    .btn-wrap {
+      display: flex;
+      justify-content: flex-end;
+      margin-bottom: 10px;
+    }
+  }
+
+  .title-error {
+    margin-top: 20px;
+    margin-bottom: 10px;
+    font-size: 20px;
+    color: #DCDFE6;
+    font-weight: 700;
+    text-align: center;
+    width: 100%;
+  }
+}
+</style>