feat(接口测试): 接口测试报告导出增加运行环境的显示

接口测试报告导出增加运行环境的显示

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"

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,30 +81,31 @@
 </template>
 
 <script>
-  import MsScenarioResult from "./components/ScenarioResult";
+import MsScenarioResult from "./components/ScenarioResult";
-  import MsRequestResultTail from "./components/RequestResultTail";
+import MsRequestResultTail from "./components/RequestResultTail";
-  import ApiReportReqestHeaderItem from "./ApiReportReqestHeaderItem";
+import ApiReportReqestHeaderItem from "./ApiReportReqestHeaderItem";
-  import MsMetricChart from "./components/MetricChart";
+import MsMetricChart from "./components/MetricChart";
-  import MsReportTitle from "../../../common/components/report/MsReportTitle";
+import MsReportTitle from "../../../common/components/report/MsReportTitle";
-  import MsReportExportTemplate from "../../../common/components/report/MsReportExportTemplate";
+import MsReportExportTemplate from "../../../common/components/report/MsReportExportTemplate";
-  import MsAssertionResults from "@/business/components/api/automation/report/components/AssertionResults"
+import MsAssertionResults from "@/business/components/api/automation/report/components/AssertionResults"
 
-  export default {
+export default {
   name: "MsApiReportExport",
   components: {
     MsReportExportTemplate,
-      MsReportTitle, MsMetricChart, ApiReportReqestHeaderItem, MsRequestResultTail, MsScenarioResult ,MsAssertionResults
+    MsReportTitle, MsMetricChart, ApiReportReqestHeaderItem, MsRequestResultTail, MsScenarioResult, MsAssertionResults
   },
   props: {
-      report:Object,
+    report: Object,
     content: Object,
     totalTime: Number,
+    projectEnvMap: {},
     title: String
   },
   data() {
     return {}
   },
-    methods:{
+  methods: {
     getName(name) {
       if (name && name.indexOf("^@~@^") !== -1) {
         let arr = name.split("^@~@^");
@@ -115,45 +117,46 @@
       return name;
     }
   }
-  }
+}
 </script>
 
 <style scoped>
 
-  .scenario-result {
+.scenario-result {
   margin-top: 20px;
   margin-bottom: 20px;
-  }
+}
 
-  .method {
+.method {
   color: #1E90FF;
   font-size: 14px;
   font-weight: 500;
-  }
+}
 
-  .request-top, .request-bottom , .request-middle{
+.request-top, .request-bottom, .request-middle {
   margin-left: 20px;
-  }
+}
 
-  .url {
+.url {
   color: #409EFF;
   font-size: 14px;
   font-weight: bold;
   font-style: italic;
-  }
+}
 
-  .el-card {
+.el-card {
   border-style: none;
   padding: 10px 30px;
-  }
+}
 
-  .request-top div {
+.request-top div {
   margin-top: 10px;
-  }
+}
-  .ms-test-error_code {
+
+.ms-test-error_code {
   color: #F6972A;
   background-color: #FDF5EA;
   border-color: #FDF5EA;
-  }
+}
 
 </style>

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 {

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 {

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 {

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 {

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";
+import MsReportTitle from "./MsReportTitle";
-    export default {
+
+export default {
   name: "MsReportExportTemplate",
   components: {MsReportTitle},
-      props: {title: String, type: String, report: Object},
+  props: {title: String, type: String, report: Object, projectEnvMap: {}},
-    }
+}
 </script>
 
 <style scoped>
 
-  .report-export {
+.report-export {
   padding: 30px;
-  }
+}
 
-  .report-title {
+.report-title {
   margin-bottom: 30px;
-  }
+}
 
-  .report-export {
+.report-export {
   background: white;
-  }
+}
 
-  @page {
+@page {
   margin-bottom: 30px;
   margin-top: 30px;
-  }
+}
 </style>

frontend/src/business/components/common/components/report/MsReportTitle.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="clearfix report-title">
+    <el-row>
       <div class="report-left">
         <div class="title">
           【{{ type }}】- {{ title }}
@@ -14,49 +15,64 @@
       <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 {
+import MsTag from "@/business/components/common/components/MsTag";
+
+export default {
   name: "MsReportTitle",
-      props: {title: String, type: String, report: Object},
+  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 {
+.report-left {
   float: left;
-  }
+}
 
-  .report-right {
+.report-right {
   float: right;
-  }
+}
 
-  .logo {
+.logo {
   height: 30px;
   line-height: 30px;
   vertical-align: middle
-  }
+}
 
 
-  .report-left {
+.report-left {
   font-size: 15px;
-  }
+}
 
-  .time {
+.time {
   margin-left: 10px;
-  }
+}
 
-  .title {
+.title {
   margin-bottom: 5px;
-  }
+}
-
 
 
 </style>