feat: 测试计划报告目录

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

@@ -1,5 +1,5 @@
 <template>
-  <test-plan-report-container :title="'接口用例统计分析'">
+  <test-plan-report-container id="api" :title="'接口用例统计分析'">
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane v-if="resultEnable" label="测试结果" name="first">
         <api-result :api-result="report.apiResult"/>

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

@@ -1,5 +1,5 @@
 <template>
-  <test-plan-report-container :title="'功能用例统计分析'">
+  <test-plan-report-container id="functional" :title="'功能用例统计分析'">
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane v-if="resultEnable" label="测试结果" name="first">
         <functional-result :function-result="report.functionResult"/>

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

@@ -1,5 +1,5 @@
 <template>
-  <test-plan-report-container :title="'性能用例统计分析'">
+  <test-plan-report-container id="load" :title="'性能用例统计分析'">
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane v-if="resultEnable" label="测试结果" name="first">
         <load-result :load-result="report.loadResult"/>

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

@@ -1,5 +1,5 @@
 <template>
-  <test-plan-report-container :title="'概览'">
+  <test-plan-report-container id="overview" :title="'概览'">
     <el-form class="form-info" v-loading="result.loading">
       <el-form-item :label="$t('测试时间') + ':'">
         {{showTime}}
@@ -13,11 +13,13 @@
         <el-col :span="8">
           <el-form-item :label="'执行率' + ':'">
             {{ (report.executeRate * 100).toFixed(0) + '%'}}
+            <ms-instructions-icon content="执行过的用例/所有用例 * 100%"/>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item :label="'通过率' + ':'">
             {{ (report.passRate * 100).toFixed(0) + '%'}}
+            <ms-instructions-icon content="执行通过用例/所有用例 * 100%"/>
           </el-form-item>
         </el-col>
       </el-row>
@@ -30,9 +32,10 @@ import MsFormDivider from "@/business/components/common/components/MsFormDivider
 import TestPlanReportContainer
   from "@/business/components/track/plan/view/comonents/report/detail/TestPlanReportContainer";
 import {timestampFormatDate} from "@/common/js/filter";
+import MsInstructionsIcon from "@/business/components/common/components/MsInstructionsIcon";
 export default {
   name: "TestPlanOverviewReport",
-  components: {TestPlanReportContainer, MsFormDivider},
+  components: {MsInstructionsIcon, TestPlanReportContainer, MsFormDivider},
   props: {
     report: Object,
   },
@@ -62,4 +65,8 @@ export default {
 .form-info {
   padding: 20px;
 }
+
+.el-form-item {
+  margin-bottom: -10px;
+}
 </style>

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

@@ -11,6 +11,7 @@
         <test-plan-load-report v-if="loadEnable" :is-db="isDb" :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId"/>
       </el-card>
     </el-main>
+    <test-plan-report-navigation-bar/>
   </div>
 </template>
 
@@ -26,9 +27,12 @@ import TestPlanOverviewReport
   from "@/business/components/track/plan/view/comonents/report/detail/TestPlanOverviewReport";
 import TestPlanSummaryReport from "@/business/components/track/plan/view/comonents/report/detail/TestPlanSummaryReport";
 import TestPlanReportButtons from "@/business/components/track/plan/view/comonents/report/detail/TestPlanReportButtons";
+import TestPlanReportNavigationBar
+  from "@/business/components/track/plan/view/comonents/report/detail/TestPlanReportNavigationBar";
 export default {
   name: "TestPlanReportContent",
   components: {
+    TestPlanReportNavigationBar,
     TestPlanReportButtons,
     TestPlanSummaryReport,
     TestPlanOverviewReport,

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

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <ms-drawer :class="{'hidden': asideHidden}" :visible="true" :size="10" direction="left" :show-full-screen="false" :is-show-close="false">
+      <div class="title-item" v-for="item in data" :key="item.title">
+        <i class="el-icon-paperclip"></i>
+        <a :href="'#' + item.link">{{ item.title }}</a>
+      </div>
+
+      <div class="hiddenBottom" @click.stop="asideHidden = !asideHidden">
+        <i v-if="!asideHidden" class="el-icon-arrow-left"/>
+        <i v-if="asideHidden" class="el-icon-arrow-right"/>
+      </div>
+    </ms-drawer>
+  </div>
+</template>
+
+<script>
+import MsDrawer from "@/business/components/common/components/MsDrawer";
+export default {
+  name: "TestPlanReportNavigationBar",
+  components: {MsDrawer},
+  data() {
+    return {
+      asideHidden: true,
+      data: [
+        {
+          link: 'overview',
+          title: '概览'
+        },
+        {
+          link: 'summary',
+          title: '报告总结'
+        },
+        {
+          link: 'functional',
+          title: '功能用例统计分析'
+        },
+        {
+          link: 'api',
+          title: '接口用例统计分析'
+        },
+        {
+          link: 'load',
+          title: '性能用例统计分析'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.hiddenBottom {
+  width: 8px;
+  height: 50px;
+  /*top: calc((100vh - 80px)/3);*/
+  right: -10px;
+  /*top: 0;*/
+  top: 40%;
+  line-height: 50px;
+  border-radius: 0 15px 15px 0;
+  background-color: #acb7c1;
+  display: inline-block;
+  position: absolute;
+  cursor: pointer;
+  opacity: 0.6;
+  font-size: 2px;
+  margin-left: 1px;
+}
+
+.hiddenBottom i {
+  margin-left: -2px;
+}
+
+.hiddenBottom:hover {
+  background-color: #783887;
+  opacity: 0.8;
+  width: 12px;
+}
+
+.hiddenBottom:hover i {
+  margin-left: 0;
+  color: white;
+}
+
+.hidden {
+  width: 0px !important;
+  padding: 0px !important;
+}
+
+.ms-drawer {
+  padding: 15px;
+  height: 230px !important;
+  /*min-width: 200px !important;*/
+  top: calc((100vh - 200px)/3) !important;
+  border: 1px solid #E6E6E6;
+  padding: 10px;
+  border-radius: 10px;
+  box-sizing: border-box;
+  background-color: #FFF;
+  overflow: visible !important;
+}
+
+.title-item {
+  margin: 15px;
+}
+
+.el-icon-paperclip {
+  margin-right: 5px;
+}
+
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <test-plan-report-container :title="'报告总结'">
+  <test-plan-report-container id='summary' :title="'报告总结'">
     <template v-slot:title>
       <el-link class="edit-link" v-if="!isTemplate && !isShare && !isEdit" @click="isEdit = true">
         编辑

frontend/src/business/components/track/report/components/TestPlanDbReport.vue

@@ -50,23 +50,23 @@ export default {
     this.isTestManagerOrTestUser = true;
   },
   methods: {
-    listenGoBack() {
+    // listenGoBack() {
-      //监听浏览器返回操作，关闭该对话框
+    //   //监听浏览器返回操作，关闭该对话框
-      if (window.history && window.history.pushState) {
+    //   if (window.history && window.history.pushState) {
-        history.pushState(null, null, document.URL);
+    //     history.pushState(null, null, document.URL);
-        window.addEventListener('popstate', this.goBack, false);
+    //     window.addEventListener('popstate', this.goBack, false);
-      }
+    //   }
-    },
+    // },
-    goBack() {
+    // goBack() {
-      this.handleClose();
+    //   this.handleClose();
-    },
+    // },
     open(report) {
       this.report = report;
       this.showDialog = true;
-      this.listenGoBack();
+      // this.listenGoBack();
     },
     handleClose() {
-      window.removeEventListener('popstate', this.goBack, false);
+      // window.removeEventListener('popstate', this.goBack, false);
       this.$emit('refresh');
       this.showDialog = false;
     },

frontend/src/business/components/track/report/components/TestPlanReportReview.vue

@@ -50,23 +50,23 @@ export default {
     this.isTestManagerOrTestUser = true;
   },
   methods: {
-    listenGoBack() {
+    // listenGoBack() {
-      //监听浏览器返回操作，关闭该对话框
+    //   //监听浏览器返回操作，关闭该对话框
-      if (window.history && window.history.pushState) {
+    //   if (window.history && window.history.pushState) {
-        history.pushState(null, null, document.URL);
+    //     history.pushState(null, null, document.URL);
-        window.addEventListener('popstate', this.goBack, false);
+    //     window.addEventListener('popstate', this.goBack, false);
-      }
+    //   }
-    },
+    // },
-    goBack() {
+    // goBack() {
-      this.handleClose();
+    //   this.handleClose();
-    },
+    // },
     open(plan) {
       this.plan = plan;
       this.showDialog = true;
-      this.listenGoBack();
+      // this.listenGoBack();
     },
     handleClose() {
-      window.removeEventListener('popstate', this.goBack, false);
+      // window.removeEventListener('popstate', this.goBack, false);
       this.$emit('refresh');
       this.showDialog = false;
     },