From 2847d81af3a594a26c7ada12a6216d8850d9917f Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Tue, 10 Mar 2020 13:19:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95=E6=8A=A5=E5=91=8A=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E6=A6=82=E8=A7=88=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/report/ReportView.vue          |  47 +++--
 .../report/components/TestOverview.vue        | 174 +++++++++++++++++-
 2 files changed, 208 insertions(+), 13 deletions(-)

diff --git a/frontend/src/performance/components/report/ReportView.vue b/frontend/src/performance/components/report/ReportView.vue
index 72f05e8a94..49c8c0af44 100644
--- a/frontend/src/performance/components/report/ReportView.vue
+++ b/frontend/src/performance/components/report/ReportView.vue
@@ -3,19 +3,34 @@
     <div class="main-content">
       <el-card>
         <el-row>
-          <el-breadcrumb separator-class="el-icon-arrow-right">
-            <el-breadcrumb-item :to="{ path: '/' }">{{projectName}}</el-breadcrumb-item>
-            <el-breadcrumb-item>{{testName}}</el-breadcrumb-item>
-            <el-breadcrumb-item>{{reportName}}</el-breadcrumb-item>
-          </el-breadcrumb>
+          <el-col :span="16">
+            <el-row>
+              <el-breadcrumb separator-class="el-icon-arrow-right">
+                <el-breadcrumb-item :to="{ path: '/' }">{{projectName}}</el-breadcrumb-item>
+                <el-breadcrumb-item>{{testName}}</el-breadcrumb-item>
+                <el-breadcrumb-item>{{reportName}}</el-breadcrumb-item>
+              </el-breadcrumb>
+            </el-row>
+            <el-row class="ms-report-view-btns">
+              <el-button type="primary" plain size="mini">立即停止</el-button>
+              <el-button type="success" plain size="mini">再次执行</el-button>
+              <el-button type="info" plain size="mini">导出</el-button>
+              <el-button type="warning" plain size="mini">比较</el-button>
+            </el-row>
+          </el-col>
+          <el-col :span="8">
+            <span class="ms-report-time-desc">
+              持续时间：  30 分钟
+            </span>
+            <span class="ms-report-time-desc">
+              开始时间：  2020-3-10 12:00:00
+            </span>
+            <span class="ms-report-time-desc">
+              结束时间：  2020-3-10 12:30:00
+            </span>
+          </el-col>
         </el-row>
 
-        <el-row style="margin-top: 15px;margin-left: -300px;">
-          <el-button type="primary" plain size="mini">立即停止</el-button>
-          <el-button type="success" plain size="mini">再次执行</el-button>
-          <el-button type="info" plain size="mini">导出</el-button>
-          <el-button type="warning" plain size="mini">比较</el-button>
-        </el-row>
         <el-divider></el-divider>
 
         <el-tabs v-model="active" type="border-card" :stretch="true">
@@ -94,4 +109,14 @@
     width: 100%;
     max-width: 1200px;
   }
+
+  .ms-report-view-btns {
+    margin-top: 15px;
+  }
+
+  .ms-report-time-desc {
+    text-align: left;
+    display: block;
+    color: #5C7878;
+  }
 </style>
diff --git a/frontend/src/performance/components/report/components/TestOverview.vue b/frontend/src/performance/components/report/components/TestOverview.vue
index 54af3bb2fe..bc7ba5d362 100644
--- a/frontend/src/performance/components/report/components/TestOverview.vue
+++ b/frontend/src/performance/components/report/components/TestOverview.vue
@@ -1,15 +1,185 @@
 <template>
   <div>
-    TestOverview
+    <el-row :gutter="12">
+      <el-col :span="4">
+        <el-card shadow="always" class="ms-card-index-1">
+          <span class="ms-card-data">
+            <span class="ms-card-data-digital">40</span>
+            <span class="ms-card-data-unit"> VU</span>
+          </span>
+          <span class="ms-card-desc">Max Users</span>
+        </el-card>
+      </el-col>
+      <el-col :span="4">
+        <el-card shadow="always" class="ms-card-index-2">
+          <span class="ms-card-data">
+            <span class="ms-card-data-digital">5.4</span>
+            <span class="ms-card-data-unit"> Hits/s</span>
+          </span>
+          <span class="ms-card-desc">Avg.Throughput</span>
+        </el-card>
+      </el-col>
+      <el-col :span="4">
+        <el-card shadow="always" class="ms-card-index-3">
+          <span class="ms-card-data">
+            <span class="ms-card-data-digital">0.41</span>
+            <span class="ms-card-data-unit"> %</span>
+          </span>
+          <span class="ms-card-desc">Errors</span>
+        </el-card>
+      </el-col>
+      <el-col :span="4">
+        <el-card shadow="always" class="ms-card-index-4">
+          <span class="ms-card-data">
+            <span class="ms-card-data-digital">1.28</span>
+            <span class="ms-card-data-unit"> s</span>
+          </span>
+          <span class="ms-card-desc">Avg.Response Time</span>
+        </el-card>
+      </el-col>
+      <el-col :span="4">
+        <el-card shadow="always" class="ms-card-index-5">
+          <span class="ms-card-data">
+            <span class="ms-card-data-digital">1.41</span>
+            <span class="ms-card-data-unit"> s</span>
+          </span>
+          <span class="ms-card-desc">90% Response Time</span>
+        </el-card>
+      </el-col>
+      <el-col :span="4">
+        <el-card shadow="always" class="ms-card-index-6">
+          <span class="ms-card-data">
+            <span class="ms-card-data-digital">817.29</span>
+            <span class="ms-card-data-unit"> KiB/s</span>
+          </span>
+          <span class="ms-card-desc">Avg.Bandwidth</span>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row>
+      <el-col :span="12">
+        <chart ref="chart1" :options="option1" :autoresize="true"></chart>
+      </el-col>
+      <el-col :span="12">
+        <chart ref="chart2" :options="option2" :autoresize="true"></chart>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
   export default {
-    name: "TestOverview"
+    name: "TestOverview",
+    data() {
+      return {
+        option1: {
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            areaStyle: {}
+          }]
+        },
+        option2: {
+          xAxis: {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line'
+          }]
+        }
+      }
+    }
   }
 </script>
 
 <style scoped>
 
+  .ms-card-data {
+    text-align: left;
+    display: block;
+    margin-bottom: 5px;
+  }
+
+  .ms-card-desc {
+    display: block;
+    text-align: left;
+  }
+
+  .ms-card-data-digital {
+    font-size: 21px;
+  }
+
+  .ms-card-data-unit {
+    color: #8492a6;
+    font-size: 15px;
+  }
+
+  .ms-card-index-1 .ms-card-data-digital {
+    color: #44b349;
+  }
+
+  .ms-card-index-1 {
+    border-left-color: #44b349;
+    border-left-width: 3px;
+  }
+
+  .ms-card-index-2 .ms-card-data-digital {
+    color: #65A2FF;
+  }
+
+  .ms-card-index-2 {
+    border-left-color: #65A2FF;
+    border-left-width: 3px;
+  }
+
+  .ms-card-index-3 .ms-card-data-digital {
+    color: #FFC265;
+  }
+
+  .ms-card-index-3 {
+    border-left-color: #FFC265;
+    border-left-width: 3px;
+  }
+
+  .ms-card-index-4 .ms-card-data-digital {
+    color: #C265FF;
+  }
+
+  .ms-card-index-4 {
+    border-left-color: #C265FF;
+    border-left-width: 3px;
+  }
+
+  .ms-card-index-5 .ms-card-data-digital {
+    color: #99743C;
+  }
+
+  .ms-card-index-5 {
+    border-left-color: #99743C;
+    border-left-width: 3px;
+  }
+
+  .ms-card-index-6 .ms-card-data-digital {
+    color: #3C9899;
+  }
+
+  .ms-card-index-6 {
+    border-left-color: #3C9899;
+    border-left-width: 3px;
+  }
+
 </style>