feat(接口测试): 接口测试首页空统计图优化

接口测试首页空统计图优化

api-test/frontend/src/business/automation/report/components/RequestResult.vue

@@ -40,7 +40,7 @@
           <!-- 请求响应时间 -->
           <el-col :span="3">
             <div :style="{color: statusColor(totalStatus ? totalStatus : request.status)}">
-              {{ request.responseResult.responseTime }}
+              {{ request.responseResult.responseTime }} ms
             </div>
           </el-col>
           <el-col :span="2">

api-test/frontend/src/business/home/components/chart/CountChart.vue

@@ -83,10 +83,19 @@ export default {
   },
   computed: {
     options() {
-      let protocolData = [{value: 0}];
-      let colorArr = ['#DEE0E3'];
+      let dataIsNotEmpty = false;
+      let protocolData = [
+        {value: 0, name: 'HTTP'},
+        {value: 0, name: 'RPC'},
+        {value: 0, name: 'TCP'},
+        {value: 0, name: 'SQL'},
+      ];
+      let borderWidth = 0;
+      let colorArr = ['#DEE0E3', '#DEE0E3', '#DEE0E3', '#DEE0E3'];
       if (this.getTotal() > 0) {
-        colorArr = ['#AA4FBF', '#FFD131', '#10CECE', '#4261F6',]
+        colorArr = ['#AA4FBF', '#FFD131', '#10CECE', '#4261F6',];
+        borderWidth = 3;
+        dataIsNotEmpty = true;
         protocolData = [
           {value: this.apiData.httpCount, name: 'HTTP'},
           {value: this.apiData.rpcCount, name: 'RPC'},
@@ -102,6 +111,7 @@ export default {
         legend: {
           orient: 'vertical',
           icon: "rect",
+          selectedMode: dataIsNotEmpty,
           itemGap: 16,
           left: '45%',
           y: 'center',
@@ -117,13 +127,13 @@ export default {
                 fontSize: 14,
                 color: '#646A73',
                 fontWeight: 400,
-                align: 'center',
+                width: 50,
+                align: 'left',
                 lineHeight: 22,
-                padding: [0, 0, 0, 4]
               },
               num: {
                 fontSize: 14,
-                align: 'left',
+                align: 'right',
                 lineHeight: 22,
                 color: '#646A73',
                 fontWeight: 500,
@@ -138,10 +148,6 @@ export default {
               return item.name === name
             });
             let value = singleData[0].value;
-            if (name !== 'HTTP') {
-              name += "  ";
-            }
-            name += " \t";
             return [`{protocol|${name}}`, `{num|${value}}`].join("");
           }
         },
@@ -183,13 +189,14 @@ export default {
             radius: ['70%', '96%'],
             center: ['92px', '50%'],
             avoidLabelOverlap: false,
-            hoverAnimation: true,
+            hoverAnimation: dataIsNotEmpty,
+            legendHoverLink: false,
             label: {
               show: false,
             },
             itemStyle: {
               borderColor: "#FFF",
-              borderWidth: 3,
+              borderWidth: borderWidth,
               borderRadius: 1,
             },
             labelLine: {
@@ -207,52 +214,4 @@ export default {
 
 <style scoped>
 
-.count-row {
-  padding: 8px 0px 8px 0px;
-}
-
-.count-title {
-  color: #646A73;
-  font-size: 14px;
-  font-weight: 400;
-}
-
-.count-value {
-  color: #646A73;
-  float: right;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.ms-point-http {
-  height: 8px;
-  width: 8px;
-  margin-right: 8px;
-  display: inline-block;
-  background-color: #AA4FBF;
-}
-
-.ms-point-rpc {
-  height: 8px;
-  width: 8px;
-  margin-right: 8px;
-  display: inline-block;
-  background-color: #FFD131;
-}
-
-.ms-point-tcp {
-  height: 8px;
-  width: 8px;
-  margin-right: 8px;
-  display: inline-block;
-  background-color: #10CECE;
-}
-
-.ms-point-sql {
-  height: 8px;
-  width: 8px;
-  margin-right: 8px;
-  display: inline-block;
-  background-color: #4261F6;
-}
 </style>

api-test/frontend/src/business/home/components/table/UpdatedApiList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="margin: 24px">
+  <div style="margin: 24px" class="update-api-table">
     <span class="table-title">
       {{ $t('api_test.home_page.new_case_list.title') }}
     </span>
@@ -12,24 +12,24 @@
       </div>
       <div v-show="!loadError">
         <el-table border :data="tableData" class="adjust-table table-content" height="233px"
+                  @row-click="clickRow"
                   header-cell-class-name="home-table-cell"
+
                   v-loading="loading" element-loading-background="#FFFFFF">
           <!--ID-->
           <el-table-column prop="num" :label="$t('home.new_case.index')" width="100"
                            show-overflow-tooltip>
             <template v-slot:default="{row}">
-              <el-link type="info" @click="redirectPage('api','api','edit:' + row.id)">
-                {{ row.num }}
-              </el-link>
+              {{ row.num }}
             </template>
           </el-table-column>
           <!--名称-->
           <el-table-column prop="name" :label="$t('commons.name')"
                            show-overflow-tooltip min-width="170">
             <template v-slot:default="{row}">
-              <el-link type="info" @click="redirectPage('api','api','edit:' + row.id)">
+              <span class="redirectColumn">
                 {{ row.name }}
-              </el-link>
+              </span>
             </template>
           </el-table-column>
           <!--路径-->
@@ -93,13 +93,11 @@ import {getCurrentProjectID} from "metersphere-frontend/src/utils/token";
 import {API_STATUS} from "@/business/definition/model/JsonData";
 import ApiStatus from "@/business/definition/components/list/ApiStatus";
 import HomeTablePagination from "@/business/home/components/table/HomeTablePagination";
-import BasicStatusLabel from "@/business/home/components/BasicStatusLabel";
-import BasicStatus from "@/business/home/components/BasicStatusLabel";
+import BasicStatusLabel from "metersphere-frontend/src/components/BasicStatusLabel";
 
 export default {
   name: "UpdatedApiList",
   components: {
-    BasicStatus,
     BasicStatusLabel, ApiStatus, HomeTablePagination
   },
   data() {
@@ -118,6 +116,11 @@ export default {
     this.search();
   },
   methods: {
+    clickRow(row, column, event) {
+      if (column.property !== 'caseTotal' && column.property !== 'scenarioTotal') {
+        this.redirectPage('api', 'api', 'edit:' + row.id);
+      }
+    },
     search() {
       let projectId = getCurrentProjectID();
       this.loading = true;
@@ -160,4 +163,7 @@ export default {
   float: left;
 }
 
+.update-api-table :deep(.el-table__body tr:hover ) {
+  cursor: pointer;
+}
 </style>