add：UI测试-测试报告详情

test-ui/src/router/index.js

@@ -152,7 +152,7 @@ export const constantRoutes = [
       {
         path: '',
         component: () => import('@/views/test/performance/performanceAdd'),
-        name: 'performanceAdd',
+        name: 'PerformanceAdd',
         noCache: true,
         meta: { title: '新增测试', activeMenu: '/performance' }
       }
@@ -166,7 +166,7 @@ export const constantRoutes = [
       {
         path: '',
         component: () => import('@/views/test/performance/performanceEdit'),
-        name: 'performanceAdd',
+        name: 'PerformanceEdit',
         noCache: true,
         meta: { title: '修改测试', activeMenu: '/performance' }
       }
@@ -180,9 +180,23 @@ export const constantRoutes = [
       {
         path: '',
         component: () => import('@/views/test/performance/reportDetail'),
-        name: 'performanceAdd',
+        name: 'ReportDetail',
         noCache: true,
-        meta: { title: '修改测试', activeMenu: '/performance' }
+        meta: { title: '报告详情', activeMenu: '/performance' }
+      }
+    ]
+  },
+  {
+    path: '/ui-test/report/detail',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/test/uiTest/testReportDetail'),
+        name: 'TestReportDetail',
+        noCache: true,
+        meta: { title: '测试报告', activeMenu: '/ui-test' }
       }
     ]
   },

test-ui/src/views/test/uiTest/automationTest.vue

@@ -40,10 +40,8 @@
           </template>
         </el-table-column>
       </el-table>
-      <div class="page">
-        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-          :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />
-      </div>
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />
     </div>
   </folder-page>
 </template>

test-ui/src/views/test/uiTest/elementLibrary.vue

@@ -26,10 +26,8 @@
           </template>
         </el-table-column>
       </el-table>
-      <div class="page">
-        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-          :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />
-      </div>
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />
     </div>
     <!-- 创建元素、编辑元素 -->
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
@@ -130,12 +128,12 @@ export default {
     },
     // 查看
     handleClickDetail() { },
-    handleSizeChange() { },
     // 确定
     handleWithAdd() {
       console.log(this.editForm)
     },
     handleCurrentChange() { },
+    handleSizeChange() { },
   },
 }
 

test-ui/src/views/test/uiTest/testReport.vue

@@ -1,5 +1,35 @@
 <template>
-  <div>测试报告</div>
+  <div class="report">
+    <div class="header">
+      <div class="searchInput">
+        <i class="el-icon-search"></i>
+        <el-input class="input" v-model="search" placeholder="根据名称搜索"></el-input>
+      </div>
+    </div>
+    <div class="list">
+      <el-table :data="reportList">
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="id" label="ID" width="50" align="center" />
+        <el-table-column prop="performanceName" label="名称" width="150" align="center" sortable />
+        <el-table-column prop="createBy" label="报告类型" width="150" align="center" />
+        <el-table-column prop="createTime" label="创建人" width="150" align="center" sortable />
+        <el-table-column prop="updateTime" label="创建时间" width="150" align="center" sortable />
+        <el-table-column prop="status" label="结束时间" width="150" align="center" sortable />
+        <el-table-column prop="status" label="触发方式" width="150" align="center" />
+        <el-table-column prop="status" label="状态" width="150" align="center" />
+        <el-table-column prop="action" label="操作" align="center" fixed="right" width="150px">
+          <template slot-scope="scope">
+            <el-button type="text" icon="el-icon-view" @click="handleClickDetail(scope.row)"
+              style="color: green;">查看</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>
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />
+    </div>
+  </div>
 </template>
 <script>
 
@@ -7,12 +37,30 @@ export default {
   name: "TestReport",
   data() {
     return {
+      search: '',
+      reportList: [{}],
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 10,
+      },
+      total: 0,
     }
   },
   mounted() {
   },
   methods: {
-
+    // 删除
+    hadleClickDelete(val) {
+      this.$modal.confirm('确认删除元素' + '？').then(() => {
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => { })
+    },
+    // 查看
+    handleClickDetail(val) {
+      this.$tab.openPage("测试报告详情", "/ui-test/report/detail", { id: val.id });
+    },
+    handleSizeChange() { },
+    handleCurrentChange() { },
   }
 
 }
@@ -21,4 +69,38 @@ export default {
 
 
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.report {
+  padding: 20px;
+
+  .header {
+    display: flex;
+    justify-content: flex-end;
+
+    .searchInput {
+      display: flex;
+      align-items: center;
+      border: 1px solid #DCDFE6;
+      border-radius: 4px;
+      padding: 0 10px;
+
+      .input {
+        width: 200px;
+      }
+
+      /* 去除 el-input 的边框 */
+      ::v-deep .el-input__inner {
+        border: none !important;
+      }
+    }
+  }
+
+  .list {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    align-items: flex-end;
+  }
+}
+</style>

test-ui/src/views/test/uiTest/testReportDetail.vue

@@ -0,0 +1,341 @@
+<template>
+  <div class="report-detail">
+    <div class="header">
+      <div class="header-title">登录 开始时间 结束时间</div>
+      <div class="header-content">
+        <div class="content-title">42.28s</div>
+        <div class="left-wrap">
+          <!-- 环形图 -->
+          <div>
+          </div>
+          <div class="left-count">
+            <div class="left-count-show">
+              <div class="green-wrap"></div>
+              <div style="font-weight: 600;">4 成功</div>
+            </div>
+            <el-divider></el-divider>
+            <div class="left-count-show">
+              <div class="red-wrap"></div>
+              <div style="font-weight: 600;">0 失败</div>
+            </div>
+          </div>
+        </div>
+        <div class="middle-wrap">
+          <div class="wrap-show">
+            <div class="middle-wrap">
+              <div class="title">1</div>
+              <div>场景</div>
+            </div>
+            <div class="green-wrap"></div>
+            <div class="middle-wrap">
+              <div class="title">1</div>
+              <div>失败</div>
+            </div>
+            <div class="red-wrap"></div>
+            <div class="middle-wrap">
+              <div class="title">1</div>
+              <div>成功</div>
+            </div>
+          </div>
+          <el-divider></el-divider>
+          <div class="wrap-show">
+            <div class="middle-wrap">
+              <div class="title">1</div>
+              <div>步骤</div>
+            </div>
+            <div class="green-wrap"></div>
+            <div class="middle-wrap">
+              <div class="title">1</div>
+              <div>失败</div>
+            </div>
+            <div class="red-wrap"></div>
+            <div class="middle-wrap">
+              <div class="title">1</div>
+              <div>成功</div>
+            </div>
+          </div>
+          <div></div>
+        </div>
+        <div class="right-wrap">
+          <div class="error-wrap">
+            <i class="el-icon-warning-outline" style="color: red; font-size: 30px;"></i>
+            <div class="show-title">0%</div>
+            <div class="show-sub">失败</div>
+          </div>
+          <div class="error-wrap">
+            <i class="el-icon-document-checked" style="font-size: 30px;"></i>
+            <div class="show-title">0-0</div>
+            <div class="show-sub">成功断言</div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+    <div class="list">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="全部" name="first">
+          <el-collapse accordion>
+            <el-collapse-item v-for="(item, index) in allList">
+              <template slot="title">
+                <div class="list-title">{{ index + 1 }}</div>
+                {{ item.title }}
+              </template>
+              <div class="list-sub-wrap">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(row, index) in item.contentList">
+                    <template slot="title">
+                      <div class="sub-title">{{ index + 1 }}</div>
+                      <div class="sub-content">
+                        <div>----打开网页</div>
+                        <div>1231ms</div>
+                        <el-button size="mini" type="text" @click.native.stop="clickHandleScreenshot">截图</el-button>
+                        <div>成功</div>
+                      </div>
+                    </template>
+                    <div style="display: flex; justify-content: flex-end;">开始时间：---- ---- --- 结束时间 ---- ---- --</div>
+                    <el-tabs v-model="active" @tab-click="handleClick" style="margin-left: 20px;">
+                      <el-tab-pane label="日志" name="first">日志</el-tab-pane>
+                      <el-tab-pane label="断言" name="second">断言</el-tab-pane>
+                      <el-tab-pane label="提取" name="third">提取</el-tab-pane>
+                    </el-tabs>
+                  </el-collapse-item>
+                </el-collapse>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </el-tab-pane>
+        <el-tab-pane label="失败" name="second">
+          <el-collapse accordion>
+            <el-collapse-item v-for="(item, index) in failureList">
+              <template slot="title">
+                <div class="list-title">{{ index + 1 }}</div>
+                {{ item.title }}
+              </template>
+              <div class="list-sub-wrap">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(row, index) in item.contentList">
+                    <template slot="title">
+                      <div class="sub-title">{{ index + 1 }}</div>
+                      <div class="sub-content">
+                        <div>----打开网页</div>
+                        <div>1231ms</div>
+                        <el-button size="mini" type="text" @click.native.stop="clickHandleScreenshot">截图</el-button>
+                        <div>成功</div>
+                      </div>
+                    </template>
+                    <div style="display: flex; justify-content: flex-end;">开始时间：---- ---- --- 结束时间 ---- ---- --</div>
+                    <el-tabs v-model="active" @tab-click="handleClick" style="margin-left: 20px;">
+                      <el-tab-pane label="日志" name="first">日志</el-tab-pane>
+                      <el-tab-pane label="断言" name="second">断言</el-tab-pane>
+                      <el-tab-pane label="提取" name="third">提取</el-tab-pane>
+                    </el-tabs>
+                  </el-collapse-item>
+                </el-collapse>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </el-tab-pane>
+        <el-tab-pane label="未执行" name="third">
+          <el-collapse accordion>
+            <el-collapse-item v-for="(item, index) in unexecutedList">
+              <template slot="title">
+                <div class="list-title">{{ index + 1 }}</div>
+                {{ item.title }}
+              </template>
+              <div class="list-sub-wrap">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(row, index) in item.contentList">
+                    <template slot="title">
+                      <div class="sub-title">{{ index + 1 }}</div>
+                      <div class="sub-content">
+                        <div>----打开网页</div>
+                        <div>1231ms</div>
+                        <el-button size="mini" type="text" @click.native.stop="clickHandleScreenshot">截图</el-button>
+                        <div>成功</div>
+                      </div>
+                    </template>
+                    <div style="display: flex; justify-content: flex-end;">开始时间：---- ---- --- 结束时间 ---- ---- --</div>
+                    <el-tabs v-model="active" @tab-click="handleClick" style="margin-left: 20px;">
+                      <el-tab-pane label="日志" name="first">日志</el-tab-pane>
+                      <el-tab-pane label="断言" name="second">断言</el-tab-pane>
+                      <el-tab-pane label="提取" name="third">提取</el-tab-pane>
+                    </el-tabs>
+                  </el-collapse-item>
+                </el-collapse>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: "TestReportDetail",
+  components: { echarts },
+  data() {
+    return {
+      activeName: 'first',
+      allList: [{ title: 'aaa', contentList: [{}, {}] }, { title: 'bbb', contentList: [{}, {}] }], // 全部
+      failureList: [{ title: 'aaa', contentList: [{}, {}] }, { title: 'bbb', contentList: [{}, {}] }], // 失败
+      unexecutedList: [{ title: 'aaa', contentList: [{}, {}] }, { title: 'bbb', contentList: [{}, {}] }], // 未执行
+      active: 'first'
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    handleClick() { },
+    // 截图
+    clickHandleScreenshot() {
+      console.log('截图')
+    },
+  }
+
+}
+
+</script>
+
+
+
+<style scoped lang="scss">
+.report-detail {
+  padding: 20px;
+
+  .header {
+    .header-title {
+      font-size: 14px;
+    }
+
+    .green-wrap {
+      width: 10px;
+      height: 10px;
+      background-color: green;
+      border-radius: 5px;
+    }
+
+    .red-wrap {
+      width: 10px;
+      height: 10px;
+      background-color: red;
+      border-radius: 5px;
+    }
+
+    .header-content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 20px;
+      margin-bottom: 20px;
+      gap: 10px;
+
+      .content-title {
+        font-size: 24px;
+        font-weight: 500;
+      }
+
+      .error-wrap {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 5px;
+      }
+
+      .show-title {
+        font-weight: 700;
+        font-size: 16px;
+      }
+
+      .show-sub {
+        color: gray;
+        font-size: 14px;
+      }
+
+      .middle-wrap {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin: 0px 30px;
+
+        .title {
+          font-size: 18px;
+          font-weight: 700;
+        }
+
+        .wrap-show {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+
+      .right-wrap {
+        display: flex;
+        gap: 50px;
+        padding: 0px 50px;
+      }
+
+      .left-wrap {
+        display: flex;
+        gap: 30px;
+        align-items: center;
+
+        .left-count {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+
+          .left-count-show {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 20px
+          }
+        }
+      }
+    }
+  }
+
+  .list {
+    .list-title {
+      margin-right: 10px;
+      color: gray;
+      border: solid 1px gray;
+      border-radius: 12.5px;
+      width: 25px;
+      height: 25px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .list-sub-wrap {
+      margin-left: 20px;
+
+      .sub-title {
+        margin-right: 10px;
+        color: green;
+        border: solid 1px green;
+        border-radius: 10px;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .sub-content {
+        display: flex;
+        align-items: center;
+        gap: 30px;
+      }
+    }
+  }
+}
+</style>