From f783b00d37147ad3f8be0432d0d044e98a486900 Mon Sep 17 00:00:00 2001
From: song-tianyang <tianyang.song@fit2cloud.com>
Date: Fri, 15 Jul 2022 14:36:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95=E6=8A=A5=E5=91=8A=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA=E5=A2=9E=E5=8A=A0=E8=BF=90=E8=A1=8C=E7=8E=AF=E5=A2=83?=
 =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

接口测试报告导出增加运行环境的显示
---
 .../api/automation/report/ApiReportDetail.vue |   1 +
 .../api/automation/report/ApiReportExport.vue | 149 +++++++++---------
 .../components/card/ApiCaseCountCard.vue      |   2 +-
 .../homepage/components/card/ApiCountCard.vue |   2 +-
 .../components/card/ScenarioCountCard.vue     |   6 +-
 .../components/card/ScheduleTaskCountCard.vue |   2 +-
 .../report/MsReportExportTemplate.vue         |  41 ++---
 .../components/report/MsReportTitle.vue       |  90 ++++++-----
 8 files changed, 157 insertions(+), 136 deletions(-)

diff --git a/frontend/src/business/components/api/automation/report/ApiReportDetail.vue b/frontend/src/business/components/api/automation/report/ApiReportDetail.vue
index 606851bb1e..aa8ebcc56e 100644
--- a/frontend/src/business/components/api/automation/report/ApiReportDetail.vue
+++ b/frontend/src/business/components/api/automation/report/ApiReportDetail.vue
@@ -94,6 +94,7 @@
             <ms-api-report-export
               v-if="reportExportVisible"
               id="apiTestReport"
+              :project-env-map="projectEnvMap"
               :title="report.name"
               :content="content"
               :report="report"
diff --git a/frontend/src/business/components/api/automation/report/ApiReportExport.vue b/frontend/src/business/components/api/automation/report/ApiReportExport.vue
index 9aa89cfc94..65d22381df 100644
--- a/frontend/src/business/components/api/automation/report/ApiReportExport.vue
+++ b/frontend/src/business/components/api/automation/report/ApiReportExport.vue
@@ -1,5 +1,6 @@
 <template>
-  <ms-report-export-template :title="title" :report="report" :type="$t('report.api_test_report')">
+  <ms-report-export-template :title="title" :report="report" :project-env-map="projectEnvMap"
+                             :type="$t('report.api_test_report')">
     <ms-metric-chart :content="content" :is-export="true" :totalTime="totalTime" :report="report"/>
     <div class="scenario-result" v-for="(scenario, index) in content.scenarios" :key="index" :scenario="scenario">
       <div>
@@ -15,41 +16,41 @@
                 {{ getName(request.name) }}
               </div>
               <div class="url">
-                {{request.url}}
+                {{ request.url }}
               </div>
             </div>
             <el-divider/>
             <div class="request-middle">
               <api-report-reqest-header-item :title="$t('api_test.request.method')">
-                <span class="method"> {{request.method}}</span>
+                <span class="method"> {{ request.method }}</span>
               </api-report-reqest-header-item>
 
               <api-report-reqest-header-item :title="$t('api_report.response_time')">
-                {{request.responseResult.responseTime}} ms
+                {{ request.responseResult.responseTime }} ms
               </api-report-reqest-header-item>
 
               <api-report-reqest-header-item :title="$t('api_report.latency')">
-                {{request.responseResult.latency}} ms
+                {{ request.responseResult.latency }} ms
               </api-report-reqest-header-item>
 
               <api-report-reqest-header-item :title="$t('api_report.request_size')">
-                {{request.requestSize}} bytes
+                {{ request.requestSize }} bytes
               </api-report-reqest-header-item>
 
               <api-report-reqest-header-item :title="$t('api_report.response_size')">
-                {{request.responseResult.responseSize}} bytes
+                {{ request.responseResult.responseSize }} bytes
               </api-report-reqest-header-item>
 
               <api-report-reqest-header-item :title="$t('api_report.error')">
-                {{request.error}}
+                {{ request.error }}
               </api-report-reqest-header-item>
 
               <api-report-reqest-header-item :title="$t('api_report.assertions')">
-                {{request.passAssertions + " / " + request.totalAssertions}}
+                {{ request.passAssertions + " / " + request.totalAssertions }}
               </api-report-reqest-header-item>
 
               <api-report-reqest-header-item :title="$t('api_report.response_code')">
-                {{request.responseResult.responseCode}}
+                {{ request.responseResult.responseCode }}
               </api-report-reqest-header-item>
 
               <api-report-reqest-header-item :title="$t('api_report.result')">
@@ -65,10 +66,10 @@
                   {{ $t('error_report_library.option.name') }}
                 </el-tag>
                 <el-tag size="mini" type="success" v-else-if="request.success">
-                  {{$t('api_report.success')}}
+                  {{ $t('api_report.success') }}
                 </el-tag>
                 <el-tag size="mini" type="danger" v-else>
-                  {{$t('api_report.fail')}}
+                  {{ $t('api_report.fail') }}
                 </el-tag>
               </api-report-reqest-header-item>
             </div>
@@ -80,80 +81,82 @@
 </template>
 
 <script>
-  import MsScenarioResult from "./components/ScenarioResult";
-  import MsRequestResultTail from "./components/RequestResultTail";
-  import ApiReportReqestHeaderItem from "./ApiReportReqestHeaderItem";
-  import MsMetricChart from "./components/MetricChart";
-  import MsReportTitle from "../../../common/components/report/MsReportTitle";
-  import MsReportExportTemplate from "../../../common/components/report/MsReportExportTemplate";
-  import MsAssertionResults from "@/business/components/api/automation/report/components/AssertionResults"
+import MsScenarioResult from "./components/ScenarioResult";
+import MsRequestResultTail from "./components/RequestResultTail";
+import ApiReportReqestHeaderItem from "./ApiReportReqestHeaderItem";
+import MsMetricChart from "./components/MetricChart";
+import MsReportTitle from "../../../common/components/report/MsReportTitle";
+import MsReportExportTemplate from "../../../common/components/report/MsReportExportTemplate";
+import MsAssertionResults from "@/business/components/api/automation/report/components/AssertionResults"
 
-  export default {
-    name: "MsApiReportExport",
-    components: {
-      MsReportExportTemplate,
-      MsReportTitle, MsMetricChart, ApiReportReqestHeaderItem, MsRequestResultTail, MsScenarioResult ,MsAssertionResults
-    },
-    props: {
-      report:Object,
-      content: Object,
-      totalTime: Number,
-      title: String
-    },
-    data() {
-      return {}
-    },
-    methods:{
-      getName(name) {
-        if (name && name.indexOf("^@~@^") !== -1) {
-          let arr = name.split("^@~@^");
-          if (arr[arr.length - 1].indexOf("UUID=")) {
-            return arr[arr.length - 1].split("UUID=")[0];
-          }
-          return arr[arr.length - 1];
+export default {
+  name: "MsApiReportExport",
+  components: {
+    MsReportExportTemplate,
+    MsReportTitle, MsMetricChart, ApiReportReqestHeaderItem, MsRequestResultTail, MsScenarioResult, MsAssertionResults
+  },
+  props: {
+    report: Object,
+    content: Object,
+    totalTime: Number,
+    projectEnvMap: {},
+    title: String
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    getName(name) {
+      if (name && name.indexOf("^@~@^") !== -1) {
+        let arr = name.split("^@~@^");
+        if (arr[arr.length - 1].indexOf("UUID=")) {
+          return arr[arr.length - 1].split("UUID=")[0];
         }
-        return name;
+        return arr[arr.length - 1];
       }
+      return name;
     }
   }
+}
 </script>
 
 <style scoped>
 
-  .scenario-result {
-    margin-top: 20px;
-    margin-bottom: 20px;
-  }
+.scenario-result {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
 
-  .method {
-    color: #1E90FF;
-    font-size: 14px;
-    font-weight: 500;
-  }
+.method {
+  color: #1E90FF;
+  font-size: 14px;
+  font-weight: 500;
+}
 
-  .request-top, .request-bottom , .request-middle{
-    margin-left: 20px;
-  }
+.request-top, .request-bottom, .request-middle {
+  margin-left: 20px;
+}
 
-  .url {
-    color: #409EFF;
-    font-size: 14px;
-    font-weight: bold;
-    font-style: italic;
-  }
+.url {
+  color: #409EFF;
+  font-size: 14px;
+  font-weight: bold;
+  font-style: italic;
+}
 
-  .el-card {
-    border-style: none;
-    padding: 10px 30px;
-  }
+.el-card {
+  border-style: none;
+  padding: 10px 30px;
+}
 
-  .request-top div {
-    margin-top: 10px;
-  }
-  .ms-test-error_code {
-    color: #F6972A;
-    background-color: #FDF5EA;
-    border-color: #FDF5EA;
-  }
+.request-top div {
+  margin-top: 10px;
+}
+
+.ms-test-error_code {
+  color: #F6972A;
+  background-color: #FDF5EA;
+  border-color: #FDF5EA;
+}
 
 </style>
diff --git a/frontend/src/business/components/api/homepage/components/card/ApiCaseCountCard.vue b/frontend/src/business/components/api/homepage/components/card/ApiCaseCountCard.vue
index fa74e06fc7..6dfb63898c 100644
--- a/frontend/src/business/components/api/homepage/components/card/ApiCaseCountCard.vue
+++ b/frontend/src/business/components/api/homepage/components/card/ApiCaseCountCard.vue
@@ -258,7 +258,7 @@ export default {
 .rows-count-number {
   font-family: 'ArialMT', 'Arial', sans-serif;
   font-size: 14px;
-  color: var(--count_number);
+  color: var(--count_number) !important;
 }
 
 .detail-container {
diff --git a/frontend/src/business/components/api/homepage/components/card/ApiCountCard.vue b/frontend/src/business/components/api/homepage/components/card/ApiCountCard.vue
index 225ff1aa42..710b07feed 100644
--- a/frontend/src/business/components/api/homepage/components/card/ApiCountCard.vue
+++ b/frontend/src/business/components/api/homepage/components/card/ApiCountCard.vue
@@ -185,7 +185,7 @@ export default {
 .rows-count-number {
   font-family: 'ArialMT', 'Arial', sans-serif;
   font-size: 14px;
-  color: var(--count_number);
+  color: var(--count_number) !important;
 }
 
 .detail-container {
diff --git a/frontend/src/business/components/api/homepage/components/card/ScenarioCountCard.vue b/frontend/src/business/components/api/homepage/components/card/ScenarioCountCard.vue
index 441ee7622a..7d54a42dea 100644
--- a/frontend/src/business/components/api/homepage/components/card/ScenarioCountCard.vue
+++ b/frontend/src/business/components/api/homepage/components/card/ScenarioCountCard.vue
@@ -76,7 +76,7 @@
           <el-col :span="6">
             <span class="default-property">
               {{ $t('api_test.home_page.detail_card.unexecute') }}
-               <el-link type="info" @click="redirectPage('unexecuteCount')" target="_blank" style="color: #000000">
+               <el-link type="info" class="rows-count-number" @click="redirectPage('unexecuteCount')" target="_blank">
                  <b>{{ sceneCountData.unexecuteCount }}</b>
                 </el-link>
             </span>
@@ -116,7 +116,7 @@
           <el-col :span="8">
             <span class="default-property">
               {{ $t('api_test.home_page.detail_card.unexecute') }}
-               <el-link type="info" @click="redirectPage('unexecuteCount')" target="_blank" style="color: #000000">
+               <el-link type="info" class="rows-count-number" @click="redirectPage('unexecuteCount')" target="_blank">
                  <b>{{ sceneCountData.unexecuteCount }}</b>
                 </el-link>
             </span>
@@ -234,7 +234,7 @@ export default {
 .rows-count-number {
   font-family: 'ArialMT', 'Arial', sans-serif;
   font-size: 14px;
-  color: var(--count_number);
+  color: var(--count_number) !important;
 }
 
 .detail-container {
diff --git a/frontend/src/business/components/api/homepage/components/card/ScheduleTaskCountCard.vue b/frontend/src/business/components/api/homepage/components/card/ScheduleTaskCountCard.vue
index 4978087d7b..06a9083338 100644
--- a/frontend/src/business/components/api/homepage/components/card/ScheduleTaskCountCard.vue
+++ b/frontend/src/business/components/api/homepage/components/card/ScheduleTaskCountCard.vue
@@ -169,7 +169,7 @@ export default {
 .rows-count-number {
   font-family: 'ArialMT', 'Arial', sans-serif;
   font-size: 14px;
-  color: var(--count_number);
+  color: var(--count_number) !important;
 }
 
 .detail-container {
diff --git a/frontend/src/business/components/common/components/report/MsReportExportTemplate.vue b/frontend/src/business/components/common/components/report/MsReportExportTemplate.vue
index aa4cb1ebc0..db7a354e63 100644
--- a/frontend/src/business/components/common/components/report/MsReportExportTemplate.vue
+++ b/frontend/src/business/components/common/components/report/MsReportExportTemplate.vue
@@ -1,35 +1,36 @@
 <template>
   <div class="report-export">
-    <ms-report-title :title="title" :type="type" :report="report"/>
+    <ms-report-title :title="title" :type="type" :report="report" :project-env-map="projectEnvMap"/>
     <slot></slot>
   </div>
 </template>
 
 <script>
-    import MsReportTitle from "./MsReportTitle";
-    export default {
-      name: "MsReportExportTemplate",
-      components: {MsReportTitle},
-      props: {title: String, type: String, report: Object},
-    }
+import MsReportTitle from "./MsReportTitle";
+
+export default {
+  name: "MsReportExportTemplate",
+  components: {MsReportTitle},
+  props: {title: String, type: String, report: Object, projectEnvMap: {}},
+}
 </script>
 
 <style scoped>
 
-  .report-export {
-    padding: 30px;
-  }
+.report-export {
+  padding: 30px;
+}
 
-  .report-title {
-    margin-bottom: 30px;
-  }
+.report-title {
+  margin-bottom: 30px;
+}
 
-  .report-export {
-    background: white;
-  }
+.report-export {
+  background: white;
+}
 
-  @page {
-    margin-bottom: 30px;
-    margin-top: 30px;
-  }
+@page {
+  margin-bottom: 30px;
+  margin-top: 30px;
+}
 </style>
diff --git a/frontend/src/business/components/common/components/report/MsReportTitle.vue b/frontend/src/business/components/common/components/report/MsReportTitle.vue
index 7bfb712a5f..aa9ab19aa7 100644
--- a/frontend/src/business/components/common/components/report/MsReportTitle.vue
+++ b/frontend/src/business/components/common/components/report/MsReportTitle.vue
@@ -1,62 +1,78 @@
 <template>
   <div class="clearfix report-title">
-    <div class="report-left">
-      <div class="title">
-        【{{ type }}】- {{ title }}
-        <span v-if="report && (report.endTime || report.createTime)">
+    <el-row>
+      <div class="report-left">
+        <div class="title">
+          【{{ type }}】- {{ title }}
+          <span v-if="report && (report.endTime || report.createTime)">
           <span style="margin-left: 10px">{{ $t('report.test_start_time') }}：</span>
           <span class="time"> {{ report.createTime | timestampFormatDate }}</span>
           <span style="margin-left: 10px">{{ $t('report.test_end_time') }}：</span>
           <span class="time"> {{ report.endTime | timestampFormatDate }}</span>
         </span>
+        </div>
       </div>
-    </div>
-    <div class="report-right">
-      <img class="logo" src="@/assets/logo-MeterSphere.png">
-    </div>
-
+      <div class="report-right">
+        <img class="logo" src="@/assets/logo-MeterSphere.png">
+      </div>
+    </el-row>
+    <el-row v-if="showProjectEnv" type="flex">
+      <span> {{ $t('commons.environment') + ':' }} </span>
+      <div v-for="(values,key) in projectEnvMap" :key="key" style="margin-right: 10px">
+        {{ key + ":" }}
+        <ms-tag v-for="(item,index) in values" :key="index" type="success" :content="item"
+                style="margin-left: 2px"/>
+      </div>
+    </el-row>
   </div>
 </template>
 
 <script>
-    export default {
-      name: "MsReportTitle",
-      props: {title: String, type: String, report: Object},
-      data() {
-        return {}
-      }
-    }
+import MsTag from "@/business/components/common/components/MsTag";
+
+export default {
+  name: "MsReportTitle",
+  components: {MsTag},
+  props: {title: String, type: String, report: Object, projectEnvMap: {}},
+  data() {
+    return {}
+  },
+  computed: {
+    showProjectEnv() {
+      return this.projectEnvMap && JSON.stringify(this.projectEnvMap) !== '{}';
+    },
+  }
+}
 </script>
 
 <style scoped>
 
-  .report-left {
-    float: left;
-  }
+.report-left {
+  float: left;
+}
 
-  .report-right {
-    float: right;
-  }
+.report-right {
+  float: right;
+}
 
-  .logo {
-    height: 30px;
-    line-height: 30px;
-    vertical-align: middle
-  }
+.logo {
+  height: 30px;
+  line-height: 30px;
+  vertical-align: middle
+}
 
 
-  .report-left {
-    font-size: 15px;
-  }
+.report-left {
+  font-size: 15px;
+}
 
-  .time {
-    margin-left: 10px;
-  }
-
-  .title {
-    margin-bottom: 5px;
-  }
+.time {
+  margin-left: 10px;
+}
 
+.title {
+  margin-bottom: 5px;
+}
 
 
 </style>