From 30c2b2e8db7c11160376c31050fc45d9c4060ab1 Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Tue, 24 Aug 2021 19:03:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92?=
 =?UTF-8?q?=E6=8A=A5=E5=91=8A=E7=9B=AE=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../report/detail/TestPlanApiReport.vue       |   2 +-
 .../detail/TestPlanFunctionalReport.vue       |   2 +-
 .../report/detail/TestPlanLoadReport.vue      |   2 +-
 .../report/detail/TestPlanOverviewReport.vue  |  11 +-
 .../report/detail/TestPlanReportContent.vue   |   4 +
 .../detail/TestPlanReportNavigationBar.vue    | 113 ++++++++++++++++++
 .../report/detail/TestPlanSummaryReport.vue   |   2 +-
 .../report/components/TestPlanDbReport.vue    |  24 ++--
 .../components/TestPlanReportReview.vue       |  24 ++--
 9 files changed, 154 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportNavigationBar.vue

diff --git a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanApiReport.vue b/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanApiReport.vue
index d5f5ff3485..8a196e9487 100644
--- a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanApiReport.vue
+++ b/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"/>
diff --git a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanFunctionalReport.vue b/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanFunctionalReport.vue
index 337b9a7ac8..2f22c4999e 100644
--- a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanFunctionalReport.vue
+++ b/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"/>
diff --git a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanLoadReport.vue b/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanLoadReport.vue
index ccd9e1aa48..eeadbc6a75 100644
--- a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanLoadReport.vue
+++ b/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"/>
diff --git a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanOverviewReport.vue b/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanOverviewReport.vue
index 10678e4f11..bf22c108d8 100644
--- a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanOverviewReport.vue
+++ b/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>
diff --git a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportContent.vue b/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportContent.vue
index 38edaed11c..8aff7f3a27 100644
--- a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportContent.vue
+++ b/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,
diff --git a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportNavigationBar.vue b/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportNavigationBar.vue
new file mode 100644
index 0000000000..c0ada1e486
--- /dev/null
+++ b/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>
diff --git a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanSummaryReport.vue b/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanSummaryReport.vue
index 5bb14ed003..51c89c0a9b 100644
--- a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanSummaryReport.vue
+++ b/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">
         编辑
diff --git a/frontend/src/business/components/track/report/components/TestPlanDbReport.vue b/frontend/src/business/components/track/report/components/TestPlanDbReport.vue
index 3b9b2fa94f..73c74c7333 100644
--- a/frontend/src/business/components/track/report/components/TestPlanDbReport.vue
+++ b/frontend/src/business/components/track/report/components/TestPlanDbReport.vue
@@ -50,23 +50,23 @@ export default {
     this.isTestManagerOrTestUser = true;
   },
   methods: {
-    listenGoBack() {
-      //监听浏览器返回操作，关闭该对话框
-      if (window.history && window.history.pushState) {
-        history.pushState(null, null, document.URL);
-        window.addEventListener('popstate', this.goBack, false);
-      }
-    },
-    goBack() {
-      this.handleClose();
-    },
+    // listenGoBack() {
+    //   //监听浏览器返回操作，关闭该对话框
+    //   if (window.history && window.history.pushState) {
+    //     history.pushState(null, null, document.URL);
+    //     window.addEventListener('popstate', this.goBack, false);
+    //   }
+    // },
+    // goBack() {
+    //   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;
     },
diff --git a/frontend/src/business/components/track/report/components/TestPlanReportReview.vue b/frontend/src/business/components/track/report/components/TestPlanReportReview.vue
index 422b920238..2da7d26d69 100644
--- a/frontend/src/business/components/track/report/components/TestPlanReportReview.vue
+++ b/frontend/src/business/components/track/report/components/TestPlanReportReview.vue
@@ -50,23 +50,23 @@ export default {
     this.isTestManagerOrTestUser = true;
   },
   methods: {
-    listenGoBack() {
-      //监听浏览器返回操作，关闭该对话框
-      if (window.history && window.history.pushState) {
-        history.pushState(null, null, document.URL);
-        window.addEventListener('popstate', this.goBack, false);
-      }
-    },
-    goBack() {
-      this.handleClose();
-    },
+    // listenGoBack() {
+    //   //监听浏览器返回操作，关闭该对话框
+    //   if (window.history && window.history.pushState) {
+    //     history.pushState(null, null, document.URL);
+    //     window.addEventListener('popstate', this.goBack, false);
+    //   }
+    // },
+    // goBack() {
+    //   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;
     },