fix(测试跟踪): 测试计划报告展示优化

--bug=1024708
--user=宋天阳
【测试跟踪】报告-查看-点击场景用例-未显示执行结果-前端报错
https://www.tapd.cn/55049933/s/1356003

framework/sdk-parent/frontend/src/components/MsDoughnutPieChart.vue

@@ -23,7 +23,7 @@ export default {
         },
         legend: {
           orient: "vertical",
-          right: 50,
+          left: "60%",
           bottom: "40%",
           formatter: function (name) {
             return name;

test-track/frontend/src/business/plan/view/comonents/report/detail/api/RequestResultTail.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="request-result" v-loading="loading">
-    <ms-request-metric v-if="showMetric" :response="response"/>
-    <ms-response-result :currentProtocol="currentProtocol" :response="response"
-                        :isTestPlan="isTestPlan"/>
+    <ms-request-metric v-if="showMetric" :response="response" />
+    <ms-response-result
+      :currentProtocol="currentProtocol"
+      :response="response"
+      :isTestPlan="isTestPlan"
+    />
   </div>
 </template>
 
@@ -12,7 +15,7 @@ import MsRequestMetric from "./RequestMetric";
 
 export default {
   name: "MsRequestResultTail",
-  components: {MsRequestMetric, MsResponseResult},
+  components: { MsRequestMetric, MsResponseResult },
   props: {
     response: Object,
     currentProtocol: String,
@@ -21,27 +24,22 @@ export default {
       type: Boolean,
       default() {
         return true;
-      }
+      },
     },
     isTestPlan: {
       type: Boolean,
       default() {
         return false;
-      }
-    }
-  },
-  watch: {
-    reportId: {
-      immediate: true,
+      },
     },
   },
   data() {
     return {
       loading: false,
       report: {},
-    }
+    };
   },
-}
+};
 </script>
 
 <style scoped>
@@ -52,13 +50,13 @@ export default {
 }
 
 .request-result .info {
-  background-color: #F9F9F9;
+  background-color: #f9f9f9;
   margin-left: 20px;
   cursor: pointer;
 }
 
 .request-result .method {
-  color: #1E90FF;
+  color: #1e90ff;
   font-size: 14px;
   font-weight: 500;
   line-height: 40px;
@@ -86,20 +84,19 @@ export default {
 }
 
 .sub-result .info {
-  background-color: #FFF;
+  background-color: #fff;
 }
 
 .sub-result .method {
-  border-left: 5px solid #1E90FF;
+  border-left: 5px solid #1e90ff;
   padding-left: 20px;
 }
 
 .sub-result:last-child {
-  border-bottom: 1px solid #EBEEF5;
+  border-bottom: 1px solid #ebeef5;
 }
 
 .request-result .icon.is-active {
   transform: rotate(90deg);
 }
-
 </style>

test-track/frontend/src/business/plan/view/comonents/report/detail/component/ApiCaseFailureResult.vue

@@ -56,15 +56,9 @@
     </ms-aside-container>
     <ms-main-container v-loading="responseLoading">
       <div v-if="showResponse">
-        <micro-app
-          v-if="!isTemplate"
-          route-name="ApiReportView"
-          service="api"
-          :route-params="{
-            isTestPlan: showResponse,
-            response,
-          }"
-        />
+        <el-card v-if="!isTemplate">
+          <ms-request-result-tail :response="response" ref="showRspResult" />
+        </el-card>
         <el-card v-else>
           <ms-request-result-tail
             :response="response"
@@ -107,7 +101,6 @@ import {
   apiDefinitionReportGet,
   apiDefinitionReportGetDb,
 } from "@/api/remote/api/api-definition";
-import MicroApp from "metersphere-frontend/src/components/MicroApp";
 import MsTestPlanApiStatus from "@/business/plan/view/comonents/api/TestPlanApiStatus";
 
 export default {
@@ -116,7 +109,6 @@ export default {
     MsTestPlanApiStatus,
     MsMainContainer,
     MsAsideContainer,
-    MicroApp,
     MsTableColumn,
     MsTable,
     StatusTableItem,

test-track/frontend/src/business/report/components/TestPlanReportList.vue

@@ -47,7 +47,7 @@
           :field="item"
           :fields-width="fieldsWidth"
           :label="$t('test_track.report.list.test_plan')"
-          min-width="100"
+          min-width="160"
         />
 
         <ms-table-column
@@ -62,6 +62,7 @@
           :field="item"
           :fields-width="fieldsWidth"
           sortable
+          min-width="120"
           :label="$t('test_track.report.list.create_time')"
           :show-overflow-tooltip="true"
         >
@@ -74,6 +75,7 @@
           prop="triggerMode"
           :field="item"
           :fields-width="fieldsWidth"
+          min-width="120"
           sortable
           :label="$t('test_track.report.list.trigger_mode')"
         >
@@ -86,6 +88,7 @@
           prop="status"
           :field="item"
           :fields-width="fieldsWidth"
+          min-width="100"
           sortable
           :label="$t('commons.status')"
         >
@@ -121,6 +124,7 @@
           :fields-width="fieldsWidth"
           sortable="custom"
           :label="$t('test_track.report.list.run_time')"
+          min-width="120"
         >
           <template v-slot:default="scope">
             <span v-if="scope.row.endTime != null">{{