fix(任务中心): 接口测试任务-修复点击切换任务查看报告-报告未切换显示&修复查看场景任务空白

--bug=1027494 --user=白奇 【任务中心】接口测试任务-点击切换任务查看报告-报告未切换显示 https://www.tapd.cn/55049933/s/1391137

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

@@ -5,55 +5,84 @@
 </template>
 
 <script>
-import {initGlobalState, loadMicroApp} from 'qiankun';
+import { initGlobalState, loadMicroApp } from "qiankun";
 
 export default {
-  name: 'MicroApp',
+  name: "MicroApp",
   props: {
     to: String,
     service: String,
     routeParams: null,
-    routeName: null
+    routeName: null,
   },
   data() {
     return {
       messageEvent: initGlobalState({ event: null }),
       microApp: null,
-    }
+      updateTask: null,
+    };
   },
   watch: {
     routeParams: {
       handler() {
-        this.microApp.update({
+        this.microAppUpdate();
+      },
+      deep: true,
+    },
+    to(val) {
+      if (val) {
+        this.microAppUpdate();
+      }
+    },
+    service(val) {
+      if (val) {
+        this.microAppInit();
+        this.messageInit();
+      }
+    },
+  },
+  mounted() {
+    this.microAppInit();
+    this.messageInit();
+  },
+  methods: {
+    microAppUpdate() {
+      if (this.updateTask) {
+        // 如果当前还有正在执行的更新任务，则清除，重新设置更新任务
+        clearTimeout(this.updateTask);
+      }
+      // 防抖缓冲，避免多个被watch的属性变化后触发多次更新，Vue的响应式更新会在微任务队列清空前完成，所以这里设置0ms即可
+      this.updateTask = setTimeout(() => {
+        this.microApp?.update({
           defaultPath: this.to,
           routeParams: this.routeParams,
           routeName: this.routeName,
         });
+        this.$nextTick(() => {
+          // 视图更新完毕后再清除更新任务，才可触发下次的更新
+          this.updateTask = null;
+        });
+      }, 0);
     },
-      deep: true,
-    }
-  },
-  mounted() {
-    this.microAppInit()
-    this.messageInit()
-  },
-  methods: {
     microAppInit() {
       const microPorts = JSON.parse(sessionStorage.getItem("micro_ports"));
       let app = {
-        name: 'micro-app-' + this.service,
+        name: "micro-app-" + this.service,
         container: this.$refs.child1,
-        entry: '//127.0.0.1:' + (microPorts[this.service] - 4000),
+        entry: "//127.0.0.1:" + (microPorts[this.service] - 4000),
         props: {
           defaultPath: this.to,
           routeParams: this.routeParams,
           routeName: this.routeName,
-          eventBus: this.$EventBus
+          eventBus: this.$EventBus,
-        }
+        },
       };
-      if (process.env.NODE_ENV !== 'development') {
+      if (process.env.NODE_ENV !== "development") {
         // 替换成后端的端口
-        app.entry = app.entry.replace(/127\.0\.0\.1:\d+/g, window.location.host + "/" + this.service);
+        app.entry = app.entry.replace(
+          /127\.0\.0\.1:\d+/g,
+          window.location.host + "/" + this.service
+        );
       }
       this.microApp = loadMicroApp(app);
     },
@@ -62,15 +91,13 @@ export default {
     },
     changeState() {
       this.messageEvent.setGlobalState({ b: 1 });
-    }
+    },
   },
   beforeDestroy() {
-    this.messageEvent.offGlobalStateChange()
+    this.messageEvent.offGlobalStateChange();
     this.microApp.unmount();
-  }
+  },
-}
+};
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-
-</style>

framework/sdk-parent/frontend/src/components/task/TaskCenter.vue

@@ -3,14 +3,22 @@
     <div class="ms-header-menu align-right">
       <el-tooltip effect="light" v-if="showMenu">
         <template v-slot:content>
-          <span>{{ $t('commons.task_center') }}</span>
+          <span>{{ $t("commons.task_center") }}</span>
         </template>
         <div @click="showTaskCenter" v-if="runningTotal > 0">
           <el-badge :value="runningTotal" class="item" type="primary">
-            <font-awesome-icon class="icon global focusing" :icon="['fas', 'tasks']"/>
+            <font-awesome-icon
+              class="icon global focusing"
+              :icon="['fas', 'tasks']"
+            />
           </el-badge>
         </div>
-        <font-awesome-icon @click="open('API')" class="icon global focusing" :icon="['fas', 'tasks']" v-else/>
+        <font-awesome-icon
+          @click="open('API')"
+          class="icon global focusing"
+          :icon="['fas', 'tasks']"
+          v-else
+        />
       </el-tooltip>
     </div>
     <el-drawer
@@ -21,41 +29,63 @@
       :modal="false"
       :title="$t('commons.task_center')"
       :size="size.toString()"
-      custom-class="ms-drawer-task">
+      custom-class="ms-drawer-task"
-      <el-card style="float: left;margin-top: 0px" :style="{'width': (size - 600)+'px'}" v-if="size > 600 "
+    >
-               class="ms-task-container">
+      <el-card
-        <div class="ms-task-opt-btn" @click="packUp">{{ $t('commons.task_close') }}</div>
+        style="float: left; margin-top: 0px"
-        <!-- 接口用例结果 -->
+        :style="{ width: size - 600 + 'px' }"
-        <micro-app :to="`/definition/report/view/${reportId}`" service="api"
+        v-if="size > 600"
-                   v-if="executionModule === 'API' && reportType !=='API_INTEGRATED'"/>
+        class="ms-task-container"
-        <!-- 接口场景报告 -->
+      >
-        <micro-app :to="`/automation/report/view/${reportId}`" service="api"
+        <div class="ms-task-opt-btn" @click="packUp">
-                   v-if="executionModule === 'SCENARIO'|| reportType ==='API_INTEGRATED'"/>
+          {{ $t("commons.task_close") }}
-        <!-- 性能测试报告 -->
+        </div>
-        <micro-app :to="`/performance/report/view/${reportId}`" service="performance"
+        <micro-app
-                   v-if="executionModule === 'PERFORMANCE'"/>
+          v-if="isMicroAppInited"
-        <!-- UI测试报告 -->
+          :to="microAppConfig.url"
-        <micro-app :to="`/ui/report/view/${reportId}?showCancelButton=false`" service="ui"
+          :service="microAppConfig.service"
-                   v-if="executionModule === 'UI_SCENARIO'"/>
+        />
       </el-card>
       <el-card style="width: 550px; float: right">
-        <div style="color: #2B415C;margin: 0px;">
+        <div style="color: #2b415c; margin: 0px">
           <el-form label-width="95px" class="ms-el-form-item">
             <el-row>
               <el-col :span="12">
-                <el-form-item :label="$t('test_track.report.list.trigger_mode')" prop="runMode">
+                <el-form-item
-                  <el-select size="mini" style="margin-right: 10px" v-model="condition.triggerMode" @change="changeInit"
+                  :label="$t('test_track.report.list.trigger_mode')"
-                             :disabled="isDebugHistory">
+                  prop="runMode"
-                    <el-option v-for="item in runMode" :key="item.id" :value="item.id" :label="item.label"/>
+                >
+                  <el-select
+                    size="mini"
+                    style="margin-right: 10px"
+                    v-model="condition.triggerMode"
+                    @change="changeInit"
+                    :disabled="isDebugHistory"
+                  >
+                    <el-option
+                      v-for="item in runMode"
+                      :key="item.id"
+                      :value="item.id"
+                      :label="item.label"
+                    />
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item :label="$t('commons.status')" prop="status">
-                  <el-select size="mini" style="margin-right: 10px" v-model="condition.executionStatus"
+                  <el-select
+                    size="mini"
+                    style="margin-right: 10px"
+                    v-model="condition.executionStatus"
                     @change="init(true)"
-                             :disabled="isDebugHistory">
+                    :disabled="isDebugHistory"
-                    <el-option v-for="item in runStatus" :key="item.id" :value="item.id" :label="item.label"/>
+                  >
+                    <el-option
+                      v-for="item in runStatus"
+                      :key="item.id"
+                      :value="item.id"
+                      :label="item.label"
+                    />
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -63,30 +93,57 @@
             <el-row>
               <el-col :span="12">
                 <el-form-item :label="$t('commons.executor')" prop="status">
-                  <el-select v-model="condition.executor" :placeholder="$t('commons.executor')" filterable size="mini"
+                  <el-select
-                             style="margin-right: 10px" @change="changeInit" :disabled="isDebugHistory">
+                    v-model="condition.executor"
+                    :placeholder="$t('commons.executor')"
+                    filterable
+                    size="mini"
+                    style="margin-right: 10px"
+                    @change="changeInit"
+                    :disabled="isDebugHistory"
+                  >
                     <el-option
                       v-for="item in maintainerOptions"
                       :key="item.id"
                       :label="item.id + ' (' + item.name + ')'"
-                      :value="item.id">
+                      :value="item.id"
+                    >
                     </el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-button size="mini" class="ms-task-stop" @click="stop(null)" :disabled="isDebugHistory">
+                <el-button
-                  {{ $t('report.stop_btn_all') }}
+                  size="mini"
+                  class="ms-task-stop"
+                  @click="stop(null)"
+                  :disabled="isDebugHistory"
+                >
+                  {{ $t("report.stop_btn_all") }}
                 </el-button>
               </el-col>
             </el-row>
           </el-form>
         </div>
         <el-divider direction="horizontal" style="width: 100%" />
-        <el-tabs v-model="activeName" @tab-click="init(true)" v-loading="loading">
+        <el-tabs
-          <el-tab-pane :key="tab.id" :name="tab.id" :label="tab.label" v-for="tab in tabs" :disabled="isDebugHistory">
+          v-model="activeName"
+          @tab-click="init(true)"
+          v-loading="loading"
+        >
+          <el-tab-pane
+            :key="tab.id"
+            :name="tab.id"
+            :label="tab.label"
+            v-for="tab in tabs"
+            :disabled="isDebugHistory"
+          >
             <span slot="label">
-              <el-badge class="ms-badge-item" v-if="showBadge(tab.id) > 0" :value="showBadge(tab.id)">
+              <el-badge
+                class="ms-badge-item"
+                v-if="showBadge(tab.id) > 0"
+                :value="showBadge(tab.id)"
+              >
                 {{ tab.label }}
               </el-badge>
               <span style="font-size: 13px" v-else>{{ tab.label }}</span>
@@ -113,7 +170,14 @@ import MsDrawer from "../MsDrawer";
 import { getCurrentProjectID, getCurrentUser } from "../../utils/token";
 import { hasLicense, hasPermissions } from "../../utils/permission";
 import { getProjectUsers } from "../../api/user";
-import {getCaseData, getScenarioData, getTaskList, getTaskSocket, stopBatchTask, stopTask} from "../../api/task";
+import {
+  getCaseData,
+  getScenarioData,
+  getTaskList,
+  getTaskSocket,
+  stopBatchTask,
+  stopTask,
+} from "../../api/task";
 import MicroApp from "../../components/MicroApp";
 import { prefetchApps } from "qiankun";
 import TaskCenterItem from "./TaskCenterItem";
@@ -128,9 +192,7 @@ export default {
     MsTaskReportStatus: () => import("./TaskReportStatus"),
     MsTablePagination: () => import("./TaskPagination"),
   },
-  inject: [
+  inject: ["reload"],
-    'reload'
-  ],
   data() {
     return {
       runningData: {},
@@ -147,29 +209,29 @@ export default {
       visible: false,
       showType: "",
       runMode: [
-        {id: '', label: this.$t('api_test.definition.document.data_set.all')},
+        { id: "", label: this.$t("api_test.definition.document.data_set.all") },
-        {id: 'BATCH', label: this.$t('api_test.automation.batch_execute')},
+        { id: "BATCH", label: this.$t("api_test.automation.batch_execute") },
-        {id: 'SCHEDULE', label: this.$t('commons.trigger_mode.schedule')},
+        { id: "SCHEDULE", label: this.$t("commons.trigger_mode.schedule") },
-        {id: 'MANUAL', label: this.$t('commons.trigger_mode.manual')},
+        { id: "MANUAL", label: this.$t("commons.trigger_mode.manual") },
-        {id: 'API', label: this.$t('commons.trigger_mode.api')}
+        { id: "API", label: this.$t("commons.trigger_mode.api") },
       ],
       tabs: [
-        {id: 'API', label: this.$t('task.api_title')},
+        { id: "API", label: this.$t("task.api_title") },
-        {id: 'SCENARIO', label: this.$t('task.scenario_title')},
+        { id: "SCENARIO", label: this.$t("task.scenario_title") },
-        {id: 'PERF', label: this.$t('task.perf_title')}
+        { id: "PERF", label: this.$t("task.perf_title") },
       ],
       runStatus: [
-        {id: '', label: this.$t('api_test.definition.document.data_set.all')},
+        { id: "", label: this.$t("api_test.definition.document.data_set.all") },
-        {id: 'STARTING', label: 'Starting'},
+        { id: "STARTING", label: "Starting" },
-        {id: 'PENDING', label: 'Pending'},
+        { id: "PENDING", label: "Pending" },
-        {id: 'RUNNING', label: 'Running'},
+        { id: "RUNNING", label: "Running" },
-        {id: 'RERUNNING', label: 'Rerunning'},
+        { id: "RERUNNING", label: "Rerunning" },
-        {id: 'REPORTING', label: 'Reporting'},
+        { id: "REPORTING", label: "Reporting" },
-        {id: 'SUCCESS', label: 'Success'},
+        { id: "SUCCESS", label: "Success" },
-        {id: "FAKE_ERROR", label: 'FakeError'},
+        { id: "FAKE_ERROR", label: "FakeError" },
-        {id: 'ERROR', label: 'Error'},
+        { id: "ERROR", label: "Error" },
-        {id: 'STOPPED', label: 'Stopped'},
+        { id: "STOPPED", label: "Stopped" },
-        {id: 'COMPLETED', label: 'Completed'},
+        { id: "COMPLETED", label: "Completed" },
       ],
       condition: { triggerMode: "", executionStatus: "" },
       maintainerOptions: [],
@@ -178,27 +240,32 @@ export default {
       reportId: "",
       executionModule: "",
       reportType: "",
-      isDebugHistory: false
+      isDebugHistory: false,
+      isMicroAppInited: false,
+      microAppConfig: {
+        url: "",
+        service: "",
+      },
     };
   },
   props: {
     showMenu: {
       type: Boolean,
-      default: true
+      default: true,
-    }
+    },
   },
   computed: {
     disabled() {
-      return this.loading
+      return this.loading;
     },
   },
 
   created() {
-    if (hasPermissions('PROJECT_API_SCENARIO:READ')) {
+    if (hasPermissions("PROJECT_API_SCENARIO:READ")) {
       this.condition.executor = getCurrentUser().id;
     }
     if (hasLicense()) {
-      this.tabs.push({id: 'UI', label: this.$t('task.ui_title')})
+      this.tabs.push({ id: "UI", label: this.$t("task.ui_title") });
     }
     this.prefetchApps();
   },
@@ -207,7 +274,41 @@ export default {
       if (!v) {
         this.close();
       }
+    },
+    reportId(v) {
+      // 接口用例结果
+      if (
+        this.executionModule === "API" &&
+        this.reportType !== "API_INTEGRATED"
+      ) {
+        this.microAppConfig = {
+          url: `/definition/report/view/${this.reportId}`,
+          service: "api",
+        };
+      } else if (
+        // 接口场景报告
+        this.executionModule === "SCENARIO" ||
+        this.reportType === "API_INTEGRATED"
+      ) {
+        this.microAppConfig = {
+          url: `/automation/report/view/${this.reportId}`,
+          service: "api",
+        };
+      } else if (this.executionModule === "PERFORMANCE") {
+        // 性能测试报告
+        this.microAppConfig = {
+          url: `/performance/report/view/${this.reportId}`,
+          service: "performance",
+        };
+      } else if (this.executionModule === "UI_SCENARIO") {
+        // UI测试报告
+        this.microAppConfig = {
+          url: `/ui/report/view/${this.reportId}?showCancelButton=false`,
+          service: "ui",
+        };
       }
+      this.isMicroAppInited = true;
+    },
   },
   methods: {
     showBadge(executionModule) {
@@ -223,7 +324,7 @@ export default {
       }
     },
     format(item) {
-      return '';
+      return "";
     },
     packUp() {
       this.size = 600;
@@ -231,50 +332,65 @@ export default {
     stop(row) {
       if (row) {
         let request = { type: row.executionModule, reportId: row.id };
-        stopTask(request).then(response => {
+        stopTask(request).then((response) => {
-          this.$success(this.$t('report.test_stop_success'));
+          this.$success(this.$t("report.test_stop_success"));
           this.init(true);
         });
       } else {
         let array = [];
-        array.push({type: 'API', projectId: getCurrentProjectID(), userId: getCurrentUser().id});
+        array.push({
-        array.push({type: 'SCENARIO', projectId: getCurrentProjectID(), userId: getCurrentUser().id});
+          type: "API",
-        array.push({type: 'PERFORMANCE', projectId: getCurrentProjectID(), userId: getCurrentUser().id});
+          projectId: getCurrentProjectID(),
-        array.push({type: 'UI_SCENARIO', projectId: getCurrentProjectID(), userId: getCurrentUser().id});
+          userId: getCurrentUser().id,
-        stopBatchTask(array).then(response => {
+        });
-          this.$success(this.$t('report.test_stop_success'));
+        array.push({
+          type: "SCENARIO",
+          projectId: getCurrentProjectID(),
+          userId: getCurrentUser().id,
+        });
+        array.push({
+          type: "PERFORMANCE",
+          projectId: getCurrentProjectID(),
+          userId: getCurrentUser().id,
+        });
+        array.push({
+          type: "UI_SCENARIO",
+          projectId: getCurrentProjectID(),
+          userId: getCurrentUser().id,
+        });
+        stopBatchTask(array).then((response) => {
+          this.$success(this.$t("report.test_stop_success"));
           this.init(true);
         });
       }
     },
     getMaintainerOptions() {
-      getProjectUsers()
+      getProjectUsers().then((response) => {
-        .then(response => {
         this.maintainerOptions = response.data;
         this.condition.executor = getCurrentUser().id;
-        })
+      });
     },
     initWebSocket() {
       let isLicense = hasLicense();
-      this.websocket = getTaskSocket(this.condition.executor,this.condition.triggerMode,isLicense || false);
+      this.websocket = getTaskSocket(
+        this.condition.executor,
+        this.condition.triggerMode,
+        isLicense || false
+      );
       this.websocket.onmessage = this.onMessage;
       this.websocket.onopen = this.onOpen;
       this.websocket.onerror = this.onError;
       this.websocket.onclose = this.onClose;
     },
-    onOpen() {
+    onOpen() {},
-    },
+    onError(e) {},
-    onError(e) {
-    },
     onMessage(e) {
       this.loading = false;
       this.runningData = JSON.parse(e.data);
       this.runningTotal = this.runningData.total;
       this.init(false);
-
-    },
-    onClose(e) {
     },
+    onClose(e) {},
     listenScreenChange() {
       if (this.size != 600) {
         this.size = document.body.clientWidth;
@@ -306,10 +422,17 @@ export default {
     getPercentage(status) {
       if (status) {
         status = status.toLowerCase();
-        if (status === "pending" || status === 'stopped') {
+        if (status === "pending" || status === "stopped") {
           return 0;
         }
-        let statusArray = ['saved', 'completed', 'success','error','pending','fake_error'];
+        let statusArray = [
+          "saved",
+          "completed",
+          "success",
+          "error",
+          "pending",
+          "fake_error",
+        ];
         if (statusArray.includes(status)) {
           return 100;
         }
@@ -319,7 +442,15 @@ export default {
     showStop(status) {
       if (status) {
         status = status.toLowerCase();
-        let statusArray = ['saved', 'completed', 'success','error','pending','fake_error', 'stopped'];
+        let statusArray = [
+          "saved",
+          "completed",
+          "success",
+          "error",
+          "pending",
+          "fake_error",
+          "stopped",
+        ];
         if (statusArray.includes(status)) {
           return false;
         }
@@ -329,11 +460,11 @@ export default {
     getModeName(executionModule) {
       switch (executionModule) {
         case "SCENARIO":
-          return this.$t('test_track.scenario_test_case');
+          return this.$t("test_track.scenario_test_case");
         case "PERFORMANCE":
-          return this.$t('test_track.performance_test_case');
+          return this.$t("test_track.performance_test_case");
         case "API":
-          return this.$t('test_track.api_test_case');
+          return this.$t("test_track.api_test_case");
         case "UI_SCENARIO":
           return this.$t("test_track.ui_scenario_test_case");
       }
@@ -346,42 +477,53 @@ export default {
       let status = row.executionStatus;
       if (status) {
         status = row.executionStatus.toLowerCase();
-        let statusArray = ['saved', 'completed', 'success','error','pending','fake_error', 'stopped'];
+        let statusArray = [
+          "saved",
+          "completed",
+          "success",
+          "error",
+          "pending",
+          "fake_error",
+          "stopped",
+        ];
         if (statusArray.includes(status)) {
           this.executionModule = null;
           this.$nextTick(() => {
             this.size = window.innerWidth;
             this.executionModule = row.executionModule;
             this.reportType = row.reportType;
-            if (row.executionModule === 'SCENARIO' || row.reportType === 'API_INTEGRATED') {
+            if (
+              row.executionModule === "SCENARIO" ||
+              row.reportType === "API_INTEGRATED"
+            ) {
               this.reportId = getUUID() + "[TEST-PLAN-REDIRECT]" + row.id;
             } else {
               this.reportId = row.id;
             }
-          })
+          });
         } else {
-          this.$warning(this.$t('commons.run_warning'))
+          this.$warning(this.$t("commons.run_warning"));
         }
       }
     },
     getMode(mode) {
-      if (mode === 'MANUAL') {
+      if (mode === "MANUAL") {
-        return this.$t('commons.trigger_mode.manual');
+        return this.$t("commons.trigger_mode.manual");
       }
-      if (mode === 'SCHEDULE') {
+      if (mode === "SCHEDULE") {
-        return this.$t('commons.trigger_mode.schedule');
+        return this.$t("commons.trigger_mode.schedule");
       }
-      if (mode === 'TEST_PLAN_SCHEDULE') {
+      if (mode === "TEST_PLAN_SCHEDULE") {
-        return this.$t('commons.trigger_mode.schedule');
+        return this.$t("commons.trigger_mode.schedule");
       }
-      if (mode === 'API') {
+      if (mode === "API") {
-        return this.$t('commons.trigger_mode.api');
+        return this.$t("commons.trigger_mode.api");
       }
-      if (mode === 'BATCH') {
+      if (mode === "BATCH") {
-        return this.$t('api_test.automation.batch_execute');
+        return this.$t("api_test.automation.batch_execute");
       }
-      if (mode.startsWith('JENKINS')) {
+      if (mode.startsWith("JENKINS")) {
-        return this.$t('commons.trigger_mode.api');
+        return this.$t("commons.trigger_mode.api");
       }
       return mode;
     },
@@ -408,8 +550,11 @@ export default {
       this.condition.userId = getCurrentUser().id;
       this.condition.activeName = this.activeName;
       this.loading = loading;
-      this.result = getTaskList(this.condition, this.currentPage, this.pageSize)
+      this.result = getTaskList(
-        .then(response => {
+        this.condition,
+        this.currentPage,
+        this.pageSize
+      ).then((response) => {
         this.total = response.data.itemCount;
         this.taskData = response.data.listObject;
         this.loading = false;
@@ -417,24 +562,23 @@ export default {
     },
     setActiveName() {
       if (this.runningData.apiTotal > 0) {
-        this.activeName = 'API';
+        this.activeName = "API";
       } else if (this.runningData.scenarioTotal > 0) {
-        this.activeName = 'SCENARIO';
+        this.activeName = "SCENARIO";
       } else if (this.runningData.perfTotal > 0) {
-        this.activeName = 'PERF';
+        this.activeName = "PERF";
       } else if (this.runningData.uiTotal > 0) {
-        this.activeName = 'UI';
+        this.activeName = "UI";
       }
     },
     initCaseHistory(id) {
-      getCaseData(id)
+      getCaseData(id).then((response) => {
-        .then(response => {
         this.taskData = response.data;
-        })
+      });
     },
     openHistory(id) {
       window.addEventListener("resize", this.listenScreenChange, false);
-      this.activeName = 'API';
+      this.activeName = "API";
       this.initCaseHistory(id);
       this.taskVisible = true;
       this.isDebugHistory = true;
@@ -443,9 +587,8 @@ export default {
     },
     openScenarioHistory(id) {
       window.addEventListener("resize", this.listenScreenChange, false);
-      this.activeName = 'SCENARIO';
+      this.activeName = "SCENARIO";
-      getScenarioData(id)
+      getScenarioData(id).then((response) => {
-        .then(response => {
         this.taskData = response.data;
       });
       this.showType = "SCENARIO";
@@ -457,28 +600,39 @@ export default {
       const microPorts = JSON.parse(sessionStorage.getItem("micro_ports"));
       let apps = [];
       if (microPorts.api) {
-        apps.push({name: 'api', entry: '//127.0.0.1:' + (microPorts.api - 4000)})
+        apps.push({
+          name: "api",
+          entry: "//127.0.0.1:" + (microPorts.api - 4000),
+        });
       }
       if (microPorts.performance) {
-        apps.push({name: 'performance', entry: '//127.0.0.1:' + (microPorts.performance - 4000)})
+        apps.push({
+          name: "performance",
+          entry: "//127.0.0.1:" + (microPorts.performance - 4000),
+        });
       }
       if (microPorts.ui) {
-        apps.push({name: 'ui', entry: '//127.0.0.1:' + (microPorts.ui - 4000)})
+        apps.push({
+          name: "ui",
+          entry: "//127.0.0.1:" + (microPorts.ui - 4000),
+        });
       }
 
-      if (process.env.NODE_ENV !== 'development') {
+      if (process.env.NODE_ENV !== "development") {
         // 替换成后端的端口
-        apps.forEach(app => {
+        apps.forEach((app) => {
-          app.entry = app.entry.replace(/127\.0\.0\.1:\d+/g, window.location.host + "/" + app.name);
+          app.entry = app.entry.replace(
-        })
+            /127\.0\.0\.1:\d+/g,
+            window.location.host + "/" + app.name
+          );
+        });
       }
       prefetchApps(apps);
-    }
+    },
-  }
+  },
 };
 </script>
 
-
 <style scoped>
 .align-right {
   float: right;
@@ -491,8 +645,8 @@ export default {
 :deep(.el-drawer__header) {
   font-size: 14px;
   color: #0a0a0a;
-  border-bottom: 1px solid #E6E6E6;
+  border-bottom: 1px solid #e6e6e6;
-  background-color: #FFF;
+  background-color: #fff;
   margin-bottom: 0px;
   padding-top: 6px;
   padding-bottom: 6px;
@@ -500,7 +654,7 @@ export default {
 
 .global {
   color: rgb(96, 98, 102);
-  font-size: 14px
+  font-size: 14px;
 }
 
 .ms-header-menu {
@@ -522,12 +676,11 @@ export default {
 }
 
 .ms-task-stop {
-  color: #F56C6C;
+  color: #f56c6c;
   float: right;
   margin-right: 20px;
 }
 
-
 .ms-task-stop {
   color: #909399;
 }