diff --git a/frontend/src/business/components/performance/test/EditPerformanceTestPlan.vue b/frontend/src/business/components/performance/test/EditPerformanceTestPlan.vue
index 34da329f74..af7e5736b0 100644
--- a/frontend/src/business/components/performance/test/EditPerformanceTestPlan.vue
+++ b/frontend/src/business/components/performance/test/EditPerformanceTestPlan.vue
@@ -22,11 +22,12 @@
             </el-input>
           </el-col>
           <el-col :span="12" :offset="2">
-            <el-button :disabled="isReadOnly" type="primary" plain @click="save">{{$t('commons.save')}}</el-button>
+            <el-button :disabled="isReadOnly" type="primary" plain @click="save">{{ $t('commons.save') }}</el-button>
             <el-button :disabled="isReadOnly" type="primary" plain @click="saveAndRun">
-              {{$t('load_test.save_and_run')}}
+              {{ $t('load_test.save_and_run') }}
+            </el-button>
+            <el-button :disabled="isReadOnly" type="warning" plain @click="cancel">{{ $t('commons.cancel') }}
             </el-button>
-            <el-button :disabled="isReadOnly" type="warning" plain @click="cancel">{{$t('commons.cancel')}}</el-button>
 
             <ms-schedule-config :schedule="testPlan.schedule" :save="saveCronExpression" @scheduleChange="saveSchedule"
                                 :check-open="checkScheduleEdit" :custom-validate="durationValidate"/>
@@ -52,272 +53,272 @@
 </template>
 
 <script>
-  import PerformanceBasicConfig from "./components/PerformanceBasicConfig";
-  import PerformancePressureConfig from "./components/PerformancePressureConfig";
-  import PerformanceAdvancedConfig from "./components/PerformanceAdvancedConfig";
-  import MsContainer from "../../common/components/MsContainer";
-  import MsMainContainer from "../../common/components/MsMainContainer";
-  import {checkoutTestManagerOrTestUser} from "../../../../common/js/utils";
-  import MsScheduleConfig from "../../common/components/MsScheduleConfig";
+import PerformanceBasicConfig from "./components/PerformanceBasicConfig";
+import PerformancePressureConfig from "./components/PerformancePressureConfig";
+import PerformanceAdvancedConfig from "./components/PerformanceAdvancedConfig";
+import MsContainer from "../../common/components/MsContainer";
+import MsMainContainer from "../../common/components/MsMainContainer";
+import {checkoutTestManagerOrTestUser} from "../../../../common/js/utils";
+import MsScheduleConfig from "../../common/components/MsScheduleConfig";
 
-  export default {
-    name: "EditPerformanceTestPlan",
-    components: {
-      MsScheduleConfig,
-      PerformancePressureConfig,
-      PerformanceBasicConfig,
-      PerformanceAdvancedConfig,
-      MsContainer,
-      MsMainContainer
-    },
-    data() {
-      return {
-        result: {},
-        testPlan: {schedule: {}},
-        listProjectPath: "/project/listAll",
-        savePath: "/performance/save",
-        editPath: "/performance/edit",
-        runPath: "/performance/run",
-        projects: [],
-        active: '0',
-        testId: '',
-        isReadOnly: false,
-        tabs: [{
-          title: this.$t('load_test.basic_config'),
-          id: '0',
-          component: 'PerformanceBasicConfig'
-        }, {
-          title: this.$t('load_test.pressure_config'),
-          id: '1',
-          component: 'PerformancePressureConfig'
-        }, {
-          title: this.$t('load_test.advanced_config'),
-          id: '2',
-          component: 'PerformanceAdvancedConfig'
-        }]
-      }
-    },
-    watch: {
-      '$route'(to) {
-        // 如果是创建测试
-        if (to.name === 'createPerTest') {
-          window.location.reload();
-          return;
-        }
-
-        if (to.name !== 'editPerTest') {
-          return;
-        }
-
-        this.isReadOnly = false;
-        if (!checkoutTestManagerOrTestUser()) {
-          this.isReadOnly = true;
-        }
-        this.getTest(to.params.testId);
+export default {
+  name: "EditPerformanceTestPlan",
+  components: {
+    MsScheduleConfig,
+    PerformancePressureConfig,
+    PerformanceBasicConfig,
+    PerformanceAdvancedConfig,
+    MsContainer,
+    MsMainContainer
+  },
+  data() {
+    return {
+      result: {},
+      testPlan: {schedule: {}},
+      listProjectPath: "/project/listAll",
+      savePath: "/performance/save",
+      editPath: "/performance/edit",
+      runPath: "/performance/run",
+      projects: [],
+      active: '0',
+      testId: '',
+      isReadOnly: false,
+      tabs: [{
+        title: this.$t('load_test.basic_config'),
+        id: '0',
+        component: 'PerformanceBasicConfig'
+      }, {
+        title: this.$t('load_test.pressure_config'),
+        id: '1',
+        component: 'PerformancePressureConfig'
+      }, {
+        title: this.$t('load_test.advanced_config'),
+        id: '2',
+        component: 'PerformanceAdvancedConfig'
+      }]
+    }
+  },
+  watch: {
+    '$route'(to) {
+      // 如果是创建测试
+      if (to.name === 'createPerTest') {
+        window.location.reload();
+        return;
+      }
+
+      if (to.name !== 'editPerTest') {
+        return;
       }
 
-    },
-    created() {
       this.isReadOnly = false;
       if (!checkoutTestManagerOrTestUser()) {
         this.isReadOnly = true;
       }
-      this.getTest(this.$route.params.testId);
-      this.listProjects();
+      this.getTest(to.params.testId);
+    }
+
+  },
+  created() {
+    this.isReadOnly = false;
+    if (!checkoutTestManagerOrTestUser()) {
+      this.isReadOnly = true;
+    }
+    this.getTest(this.$route.params.testId);
+    this.listProjects();
+  },
+  mounted() {
+    this.importAPITest();
+  },
+  methods: {
+    importAPITest() {
+      let apiTest = this.$store.state.api.test;
+      if (apiTest && apiTest.name) {
+        this.$set(this.testPlan, "projectId", apiTest.projectId);
+        this.$set(this.testPlan, "name", apiTest.name);
+        let blob = new Blob([apiTest.jmx.xml], {type: "application/octet-stream"});
+        let file = new File([blob], apiTest.jmx.name);
+        this.$refs.basicConfig.beforeUpload(file);
+        this.$refs.basicConfig.handleUpload({file: file});
+        this.active = '1';
+        this.$store.commit("clearTest");
+      }
     },
-    mounted() {
-      this.importAPITest();
-    },
-    methods: {
-      importAPITest() {
-        let apiTest = this.$store.state.api.test;
-        if (apiTest && apiTest.name) {
-          this.$set(this.testPlan, "projectId", apiTest.projectId);
-          this.$set(this.testPlan, "name", apiTest.name);
-          let blob = new Blob([apiTest.jmx.xml], {type: "application/octet-stream"});
-          let file = new File([blob], apiTest.jmx.name);
-          this.$refs.basicConfig.beforeUpload(file);
-          this.$refs.basicConfig.handleUpload({file: file});
-          this.active = '1';
-          this.$store.commit("clearTest");
-        }
-      },
-      getTest(testId) {
-        if (testId) {
-          this.testId = testId;
-          this.result = this.$get('/performance/get/' + testId, response => {
-            if (response.data) {
-              this.testPlan = response.data;
-              if (!this.testPlan.schedule) {
-                this.testPlan.schedule = {};
-              }
+    getTest(testId) {
+      if (testId) {
+        this.testId = testId;
+        this.result = this.$get('/performance/get/' + testId, response => {
+          if (response.data) {
+            this.testPlan = response.data;
+            if (!this.testPlan.schedule) {
+              this.testPlan.schedule = {};
             }
-          });
-        }
-      },
-      listProjects() {
-        this.result = this.$get(this.listProjectPath, response => {
-          this.projects = response.data;
-        })
-      },
-      save() {
-        if (!this.validTestPlan()) {
-          return;
-        }
-
-        let options = this.getSaveOption();
-
-        this.result = this.$request(options, () => {
-          this.$success(this.$t('commons.save_success'));
-          this.$refs.advancedConfig.cancelAllEdit();
-          this.$router.push({path: '/performance/test/all'})
-        });
-      },
-      saveAndRun() {
-        if (!this.validTestPlan()) {
-          return;
-        }
-
-        let options = this.getSaveOption();
-
-        this.result = this.$request(options, (response) => {
-          this.testPlan.id = response.data;
-          this.$success(this.$t('commons.save_success'));
-          this.result = this.$post(this.runPath, {id: this.testPlan.id, triggerMode: 'MANUAL'}, (response) => {
-            let reportId = response.data;
-            this.$router.push({path: '/performance/report/view/' + reportId})
-          })
-        });
-      },
-      getSaveOption() {
-        let formData = new FormData();
-        let url = this.testPlan.id ? this.editPath : this.savePath;
-
-        if (this.$refs.basicConfig.uploadList.length > 0) {
-          this.$refs.basicConfig.uploadList.forEach(f => {
-            formData.append("file", f);
-          });
-        }
-        // 基本配置
-        this.testPlan.updatedFileList = this.$refs.basicConfig.updatedFileList();
-        // 压力配置
-        this.testPlan.loadConfiguration = JSON.stringify(this.$refs.pressureConfig.convertProperty());
-        this.testPlan.testResourcePoolId = this.$refs.pressureConfig.resourcePool;
-        // 高级配置
-        this.testPlan.advancedConfiguration = JSON.stringify(this.$refs.advancedConfig.configurations());
-
-        // file属性不需要json化
-        let requestJson = JSON.stringify(this.testPlan, function (key, value) {
-          return key === "file" ? undefined : value
-        });
-
-        formData.append('request', new Blob([requestJson], {
-          type: "application/json"
-        }));
-
-        return {
-          method: 'POST',
-          url: url,
-          data: formData,
-          headers: {
-            'Content-Type': undefined
           }
-        };
-      },
-      cancel() {
+        });
+      }
+    },
+    listProjects() {
+      this.result = this.$get(this.listProjectPath, response => {
+        this.projects = response.data;
+      })
+    },
+    save() {
+      if (!this.validTestPlan()) {
+        return;
+      }
+
+      let options = this.getSaveOption();
+
+      this.result = this.$request(options, () => {
+        this.$success(this.$t('commons.save_success'));
+        this.$refs.advancedConfig.cancelAllEdit();
         this.$router.push({path: '/performance/test/all'})
-      },
-      validTestPlan() {
-        if (!this.testPlan.name) {
-          this.$error(this.$t('load_test.test_name_is_null'));
-          return false;
-        }
+      });
+    },
+    saveAndRun() {
+      if (!this.validTestPlan()) {
+        return;
+      }
 
-        if (!this.testPlan.projectId) {
-          this.$error(this.$t('load_test.project_is_null'));
-          return false;
-        }
+      let options = this.getSaveOption();
 
-        if (!this.$refs.basicConfig.validConfig()) {
-          return false;
-        }
+      this.result = this.$request(options, (response) => {
+        this.testPlan.id = response.data;
+        this.$success(this.$t('commons.save_success'));
+        this.result = this.$post(this.runPath, {id: this.testPlan.id, triggerMode: 'MANUAL'}, (response) => {
+          let reportId = response.data;
+          this.$router.push({path: '/performance/report/view/' + reportId})
+        })
+      });
+    },
+    getSaveOption() {
+      let formData = new FormData();
+      let url = this.testPlan.id ? this.editPath : this.savePath;
 
-        if (!this.$refs.pressureConfig.validConfig()) {
-          return false;
-        }
-
-        if (!this.$refs.advancedConfig.validConfig()) {
-          return false;
-        }
-
-        /// todo: 其他校验
-
-        return true;
-      },
-      changeTabActive(activeName) {
-        this.$nextTick(() => {
-          this.active = activeName;
+      if (this.$refs.basicConfig.uploadList.length > 0) {
+        this.$refs.basicConfig.uploadList.forEach(f => {
+          formData.append("file", f);
         });
-      },
-      saveCronExpression(cronExpression) {
-        this.testPlan.schedule.enable = true;
-        this.testPlan.schedule.value = cronExpression;
-        this.saveSchedule();
-      },
-      saveSchedule() {
-        this.checkScheduleEdit();
-        let param = {};
-        param = this.testPlan.schedule;
-        param.resourceId = this.testPlan.id;
-        let url = '/performance/schedule/create';
-        if (param.id) {
-          url = '/performance/schedule/update';
-        }
-        this.$post(url, param, response => {
-          this.$success(this.$t('commons.save_success'));
-          this.getTest(this.testPlan.id);
-        });
-      },
-      checkScheduleEdit() {
-        if (!this.testPlan.id) {
-          this.$message(this.$t('api_test.environment.please_save_test'));
-          return false;
-        }
-        return true;
-      },
-      durationValidate(intervalTime) {
-        let duration = this.$refs.pressureConfig.duration * 60 * 1000;
-        if (intervalTime < duration) {
-          return {
-            pass: false,
-            info: this.$t('load_test.schedule_tip')
-          }
+      }
+      // 基本配置
+      this.testPlan.updatedFileList = this.$refs.basicConfig.updatedFileList();
+      // 压力配置
+      this.testPlan.loadConfiguration = JSON.stringify(this.$refs.pressureConfig.convertProperty());
+      this.testPlan.testResourcePoolId = this.$refs.pressureConfig.resourcePool;
+      // 高级配置
+      this.testPlan.advancedConfiguration = JSON.stringify(this.$refs.advancedConfig.configurations());
+
+      // file属性不需要json化
+      let requestJson = JSON.stringify(this.testPlan, function (key, value) {
+        return key === "file" ? undefined : value
+      });
+
+      formData.append('request', new Blob([requestJson], {
+        type: "application/json"
+      }));
+
+      return {
+        method: 'POST',
+        url: url,
+        data: formData,
+        headers: {
+          'Content-Type': undefined
         }
+      };
+    },
+    cancel() {
+      this.$router.push({path: '/performance/test/all'})
+    },
+    validTestPlan() {
+      if (!this.testPlan.name) {
+        this.$error(this.$t('load_test.test_name_is_null'));
+        return false;
+      }
+
+      if (!this.testPlan.projectId) {
+        this.$error(this.$t('load_test.project_is_null'));
+        return false;
+      }
+
+      if (!this.$refs.basicConfig.validConfig()) {
+        return false;
+      }
+
+      if (!this.$refs.pressureConfig.validConfig()) {
+        return false;
+      }
+
+      if (!this.$refs.advancedConfig.validConfig()) {
+        return false;
+      }
+
+      /// todo: 其他校验
+
+      return true;
+    },
+    changeTabActive(activeName) {
+      this.$nextTick(() => {
+        this.active = activeName;
+      });
+    },
+    saveCronExpression(cronExpression) {
+      this.testPlan.schedule.enable = true;
+      this.testPlan.schedule.value = cronExpression;
+      this.saveSchedule();
+    },
+    saveSchedule() {
+      this.checkScheduleEdit();
+      let param = {};
+      param = this.testPlan.schedule;
+      param.resourceId = this.testPlan.id;
+      let url = '/performance/schedule/create';
+      if (param.id) {
+        url = '/performance/schedule/update';
+      }
+      this.$post(url, param, response => {
+        this.$success(this.$t('commons.save_success'));
+        this.getTest(this.testPlan.id);
+      });
+    },
+    checkScheduleEdit() {
+      if (!this.testPlan.id) {
+        this.$message(this.$t('api_test.environment.please_save_test'));
+        return false;
+      }
+      return true;
+    },
+    durationValidate(intervalTime) {
+      let duration = this.$refs.pressureConfig.duration * 60 * 1000;
+      if (intervalTime < duration) {
         return {
-          pass: true
+          pass: false,
+          info: this.$t('load_test.schedule_tip')
         }
       }
+      return {
+        pass: true
+      }
     }
   }
+}
 </script>
 
 <style scoped>
 
-  .testplan-config {
-    margin-top: 15px;
-    text-align: center;
-  }
+.testplan-config {
+  margin-top: 15px;
+  text-align: center;
+}
 
-  .el-select {
-    min-width: 130px;
-  }
+.el-select {
+  min-width: 130px;
+}
 
-  .edit-testplan-container .input-with-select .el-input-group__prepend {
-    background-color: #fff;
-  }
+.edit-testplan-container .input-with-select .el-input-group__prepend {
+  background-color: #fff;
+}
 
-  .advanced-config {
-    height: calc(100vh - 280px);
-    overflow: auto;
-  }
+.advanced-config {
+  height: calc(100vh - 280px);
+  overflow: auto;
+}
 </style>
diff --git a/frontend/src/business/components/performance/test/PerformanceTestStatus.vue b/frontend/src/business/components/performance/test/PerformanceTestStatus.vue
index 859407a64b..5c9ee6a04e 100644
--- a/frontend/src/business/components/performance/test/PerformanceTestStatus.vue
+++ b/frontend/src/business/components/performance/test/PerformanceTestStatus.vue
@@ -17,7 +17,7 @@
     </el-tag>
     <el-tooltip placement="top" v-else-if="row.status === 'Error'" effect="light">
       <template v-slot:content>
-        <div>{{row.description}}</div>
+        <div>{{ row.description }}</div>
       </template>
       <el-tag size="mini" type="danger">
         {{ row.status }}
@@ -30,13 +30,13 @@
 </template>
 
 <script>
-  export default {
-    name: "MsPerformanceTestStatus",
+export default {
+  name: "MsPerformanceTestStatus",
 
-    props: {
-      row: Object
-    }
+  props: {
+    row: Object
   }
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/business/components/performance/test/components/PerformanceAdvancedConfig.vue b/frontend/src/business/components/performance/test/components/PerformanceAdvancedConfig.vue
index 785e475949..bef3203aaa 100644
--- a/frontend/src/business/components/performance/test/components/PerformanceAdvancedConfig.vue
+++ b/frontend/src/business/components/performance/test/components/PerformanceAdvancedConfig.vue
@@ -2,8 +2,9 @@
   <div>
     <el-row>
       <el-col :span="8">
-        <h3>{{$t('load_test.params')}}</h3>
-        <el-button :disabled="readOnly" icon="el-icon-circle-plus-outline" plain size="mini" @click="add('params')">{{$t('commons.add')}}
+        <h3>{{ $t('load_test.params') }}</h3>
+        <el-button :disabled="readOnly" icon="el-icon-circle-plus-outline" plain size="mini" @click="add('params')">
+          {{ $t('commons.add') }}
         </el-button>
       </el-col>
     </el-row>
@@ -26,7 +27,7 @@
                 :placeholder="$t('load_test.param_name')"
                 clearable>
               </el-input>
-              <span>{{row.name}}</span>
+              <span>{{ row.name }}</span>
             </template>
           </el-table-column>
           <el-table-column
@@ -60,12 +61,13 @@
                 v-model="row.value"
                 :placeholder="$t('load_test.param_value')"
                 clearable></el-input>
-              <span>{{row.value}}</span>
+              <span>{{ row.value }}</span>
             </template>
           </el-table-column>
           <el-table-column align="center" :label="$t('load_test.operating')">
             <template v-slot:default="{row, $index}">
-              <ms-table-operator-button :disabled="readOnly" :tip="$t('commons.delete')" icon="el-icon-delete" type="danger"
+              <ms-table-operator-button :disabled="readOnly" :tip="$t('commons.delete')" icon="el-icon-delete"
+                                        type="danger"
                                         @exec="del(row, 'params', $index)"/>
             </template>
           </el-table-column>
@@ -77,10 +79,11 @@
       <el-col :span="8">
         <el-form :inline="true">
           <el-form-item>
-            <div>{{$t('load_test.connect_timeout')}}</div>
+            <div>{{ $t('load_test.connect_timeout') }}</div>
           </el-form-item>
           <el-form-item>
-            <el-input-number :disabled="readOnly" size="mini" v-model="timeout" :min="10" :max="100000"></el-input-number>
+            <el-input-number :disabled="readOnly" size="mini" v-model="timeout" :min="10"
+                             :max="100000"></el-input-number>
           </el-form-item>
           <el-form-item>
             ms
@@ -92,10 +95,11 @@
       <el-col :span="8">
         <el-form :inline="true">
           <el-form-item>
-            <div>{{$t('load_test.custom_http_code')}}</div>
+            <div>{{ $t('load_test.custom_http_code') }}</div>
           </el-form-item>
           <el-form-item>
-            <el-input :disabled="readOnly" size="mini" v-model="statusCodeStr" :placeholder="$t('load_test.separated_by_commas')"
+            <el-input :disabled="readOnly" size="mini" v-model="statusCodeStr"
+                      :placeholder="$t('load_test.separated_by_commas')"
                       @input="checkStatusCode"></el-input>
           </el-form-item>
         </el-form>
@@ -105,169 +109,169 @@
 </template>
 
 <script>
-  import MsTableOperatorButton from "../../../common/components/MsTableOperatorButton";
+import MsTableOperatorButton from "../../../common/components/MsTableOperatorButton";
 
-  export default {
-    name: "PerformanceAdvancedConfig",
-    components: {MsTableOperatorButton},
-    data() {
-      return {
-        timeout: 2000,
-        statusCode: [],
-        domains: [],
-        params: [],
-        statusCodeStr: '',
-      }
+export default {
+  name: "PerformanceAdvancedConfig",
+  components: {MsTableOperatorButton},
+  data() {
+    return {
+      timeout: 2000,
+      statusCode: [],
+      domains: [],
+      params: [],
+      statusCodeStr: '',
+    }
+  },
+  props: {
+    readOnly: {
+      type: Boolean,
+      default: false
     },
-    props: {
-      readOnly: {
-        type: Boolean,
-        default: false
-      },
-      testId: String,
-    },
-    mounted() {
+    testId: String,
+  },
+  mounted() {
+    if (this.testId) {
+      this.getAdvancedConfig();
+    }
+  },
+  watch: {
+    testId() {
       if (this.testId) {
         this.getAdvancedConfig();
       }
-    },
-    watch: {
-      testId () {
-        if (this.testId) {
-          this.getAdvancedConfig();
+    }
+  },
+  methods: {
+    getAdvancedConfig() {
+      this.$get('/performance/get-advanced-config/' + this.testId, (response) => {
+        if (response.data) {
+          let data = JSON.parse(response.data);
+          this.timeout = data.timeout || 10;
+          this.statusCode = data.statusCode || [];
+          this.statusCodeStr = this.statusCode.join(',');
+          this.domains = data.domains || [];
+          this.params = data.params || [];
+          /*this.domains.forEach(d => d.edit = false);
+          this.params.forEach(d => d.edit = false);*/
         }
+      });
+    },
+    add(dataName) {
+      if (dataName === 'domains') {
+        this[dataName].push({
+          domain: 'fit2cloud.com',
+          enable: true,
+          ip: '127.0.0.1',
+          edit: true,
+        });
+      }
+      if (dataName === 'params') {
+        this[dataName].push({
+          name: 'param1',
+          enable: true,
+          value: '0',
+          edit: true,
+        });
       }
     },
-    methods: {
-      getAdvancedConfig() {
-        this.$get('/performance/get-advanced-config/' + this.testId, (response) => {
-          if (response.data) {
-            let data = JSON.parse(response.data);
-            this.timeout = data.timeout || 10;
-            this.statusCode = data.statusCode || [];
-            this.statusCodeStr = this.statusCode.join(',');
-            this.domains = data.domains || [];
-            this.params = data.params || [];
-            /*this.domains.forEach(d => d.edit = false);
-            this.params.forEach(d => d.edit = false);*/
-          }
-        });
-      },
-      add(dataName) {
-        if (dataName === 'domains') {
-          this[dataName].push({
-            domain: 'fit2cloud.com',
-            enable: true,
-            ip: '127.0.0.1',
-            edit: true,
-          });
+    edit(row) {
+      row.edit = !row.edit
+    },
+    del(row, dataName, index) {
+      this[dataName].splice(index, 1);
+    },
+    confirmEdit(row) {
+      row.edit = false;
+      row.enable = true;
+    },
+    groupBy(data, key) {
+      return data.reduce((p, c) => {
+        let name = c[key];
+        if (!p.hasOwnProperty(name)) {
+          p[name] = 0;
         }
-        if (dataName === 'params') {
-          this[dataName].push({
-            name: 'param1',
-            enable: true,
-            value: '0',
-            edit: true,
-          });
-        }
-      },
-      edit(row) {
-        row.edit = !row.edit
-      },
-      del(row, dataName, index) {
-        this[dataName].splice(index, 1);
-      },
-      confirmEdit(row) {
-        row.edit = false;
-        row.enable = true;
-      },
-      groupBy(data, key) {
-        return data.reduce((p, c) => {
-          let name = c[key];
-          if (!p.hasOwnProperty(name)) {
-            p[name] = 0;
-          }
-          p[name]++;
-          return p;
-        }, {});
-      },
-      validConfig() {
-        let counts = this.groupBy(this.domains, 'domain');
-        for (let c in counts) {
-          if (counts[c] > 1) {
-            this.$error(this.$t('load_test.domain_is_duplicate'));
-            return false;
-          }
-        }
-        counts = this.groupBy(this.params, 'name');
-        for (let c in counts) {
-          if (counts[c] > 1) {
-            this.$error(this.$t('load_test.param_is_duplicate'));
-            return false;
-          }
-        }
-        if (this.domains.filter(d => !d.domain || !d.ip).length > 0) {
-          this.$error(this.$t('load_test.domain_ip_is_empty'));
+        p[name]++;
+        return p;
+      }, {});
+    },
+    validConfig() {
+      let counts = this.groupBy(this.domains, 'domain');
+      for (let c in counts) {
+        if (counts[c] > 1) {
+          this.$error(this.$t('load_test.domain_is_duplicate'));
           return false;
         }
-        if (this.params.filter(d => !d.name || !d.value).length > 0) {
-          this.$error(this.$t('load_test.param_name_value_is_empty'));
+      }
+      counts = this.groupBy(this.params, 'name');
+      for (let c in counts) {
+        if (counts[c] > 1) {
+          this.$error(this.$t('load_test.param_is_duplicate'));
           return false;
         }
-        return true;
-      },
-      checkStatusCode() {
-        let license_num = this.statusCodeStr;
-        license_num = license_num.replace(/[^\d,]/g, ''); // 清除“数字”和“.”以外的字符
-        this.statusCodeStr = license_num;
-      },
-      cancelAllEdit() {
-        this.domains.forEach(d => d.edit = false);
-        this.params.forEach(d => d.edit = false);
-      },
-      configurations() {
-        let statusCode = [];
-        if (this.statusCodeStr) {
-          statusCode = this.statusCodeStr.split(',');
-        }
-        return {
-          timeout: this.timeout,
-          statusCode: statusCode,
-          params: this.params,
-          domains: this.domains,
-        };
-      },
-    }
+      }
+      if (this.domains.filter(d => !d.domain || !d.ip).length > 0) {
+        this.$error(this.$t('load_test.domain_ip_is_empty'));
+        return false;
+      }
+      if (this.params.filter(d => !d.name || !d.value).length > 0) {
+        this.$error(this.$t('load_test.param_name_value_is_empty'));
+        return false;
+      }
+      return true;
+    },
+    checkStatusCode() {
+      let license_num = this.statusCodeStr;
+      license_num = license_num.replace(/[^\d,]/g, ''); // 清除“数字”和“.”以外的字符
+      this.statusCodeStr = license_num;
+    },
+    cancelAllEdit() {
+      this.domains.forEach(d => d.edit = false);
+      this.params.forEach(d => d.edit = false);
+    },
+    configurations() {
+      let statusCode = [];
+      if (this.statusCodeStr) {
+        statusCode = this.statusCodeStr.split(',');
+      }
+      return {
+        timeout: this.timeout,
+        statusCode: statusCode,
+        params: this.params,
+        domains: this.domains,
+      };
+    },
   }
+}
 </script>
 
 <style scoped>
-  .el-row {
-    margin-bottom: 10px;
-  }
+.el-row {
+  margin-bottom: 10px;
+}
 
-  .edit-input {
-    padding-right: 0px;
-  }
+.edit-input {
+  padding-right: 0px;
+}
 
-  .tb-edit .el-textarea {
-    display: none;
-  }
+.tb-edit .el-textarea {
+  display: none;
+}
 
-  .tb-edit .current-row .el-textarea {
-    display: block;
-  }
+.tb-edit .current-row .el-textarea {
+  display: block;
+}
 
-  .tb-edit .current-row .el-textarea + span {
-    display: none;
-  }
+.tb-edit .current-row .el-textarea + span {
+  display: none;
+}
 
-  .el-col {
-    text-align: left;
-  }
+.el-col {
+  text-align: left;
+}
 
-  .el-col .el-table {
-    align: center;
-  }
+.el-col .el-table {
+  align: center;
+}
 
 </style>
diff --git a/frontend/src/business/components/performance/test/components/PerformanceBasicConfig.vue b/frontend/src/business/components/performance/test/components/PerformanceBasicConfig.vue
index 8d3ecd1f60..428d604d2e 100644
--- a/frontend/src/business/components/performance/test/components/PerformanceBasicConfig.vue
+++ b/frontend/src/business/components/performance/test/components/PerformanceBasicConfig.vue
@@ -15,7 +15,7 @@
       <i class="el-icon-upload"/>
       <div class="el-upload__text" v-html="$t('load_test.upload_tips')"></div>
       <template v-slot:tip>
-        <div class="el-upload__tip">{{$t('load_test.upload_type')}}</div>
+        <div class="el-upload__tip">{{ $t('load_test.upload_type') }}</div>
       </template>
     </el-upload>
 
@@ -42,9 +42,11 @@
       <el-table-column
         :label="$t('commons.operating')">
         <template v-slot:default="scope">
-          <el-button @click="handleDownload(scope.row)" :disabled="!scope.row.id || isReadOnly" type="primary" icon="el-icon-download"
+          <el-button @click="handleDownload(scope.row)" :disabled="!scope.row.id || isReadOnly" type="primary"
+                     icon="el-icon-download"
                      size="mini" circle/>
-          <el-button :disabled="isReadOnly" @click="handleDelete(scope.row, scope.$index)" type="danger" icon="el-icon-delete" size="mini"
+          <el-button :disabled="isReadOnly" @click="handleDelete(scope.row, scope.$index)" type="danger"
+                     icon="el-icon-delete" size="mini"
                      circle/>
         </template>
       </el-table-column>
@@ -53,170 +55,170 @@
 </template>
 
 <script>
-  import {Message} from "element-ui";
+import {Message} from "element-ui";
 
-  export default {
-    name: "PerformanceBasicConfig",
-    props: {
-      testPlan: {
-        type: Object
-      },
-      isReadOnly: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  name: "PerformanceBasicConfig",
+  props: {
+    testPlan: {
+      type: Object
     },
-    data() {
-      return {
-        result: {},
-        getFileMetadataPath: "/performance/file/metadata",
-        jmxDownloadPath: '/performance/file/download',
-        jmxDeletePath: '/performance/file/delete',
-        fileList: [],
-        tableData: [],
-        uploadList: [],
-      };
-    },
-    created() {
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      result: {},
+      getFileMetadataPath: "/performance/file/metadata",
+      jmxDownloadPath: '/performance/file/download',
+      jmxDeletePath: '/performance/file/delete',
+      fileList: [],
+      tableData: [],
+      uploadList: [],
+    };
+  },
+  created() {
+    if (this.testPlan.id) {
+      this.getFileMetadata(this.testPlan)
+    }
+  },
+  watch: {
+    testPlan() {
       if (this.testPlan.id) {
         this.getFileMetadata(this.testPlan)
       }
-    },
-    watch: {
-      testPlan() {
-        if (this.testPlan.id) {
-          this.getFileMetadata(this.testPlan)
+    }
+  },
+  methods: {
+    getFileMetadata(testPlan) {
+      this.fileList = [];
+      this.tableData = [];
+      this.uploadList = [];
+      this.result = this.$get(this.getFileMetadataPath + "/" + testPlan.id, response => {
+        let files = response.data;
+
+        if (!files) {
+          Message.error({message: this.$t('load_test.related_file_not_found'), showClose: true});
+          return;
         }
+        // deep copy
+        this.fileList = JSON.parse(JSON.stringify(files));
+        this.tableData = JSON.parse(JSON.stringify(files));
+        this.tableData.map(f => {
+          f.size = f.size + ' Bytes';
+        });
+      })
+    },
+    beforeUpload(file) {
+      if (!this.fileValidator(file)) {
+        /// todo: 显示错误信息
+        return false;
+      }
+
+      if (this.tableData.filter(f => f.name === file.name).length > 0) {
+        this.$error(this.$t('load_test.delete_file'));
+        return false;
+      }
+
+      let type = file.name.substring(file.name.lastIndexOf(".") + 1);
+
+      this.tableData.push({
+        name: file.name,
+        size: file.size + ' Bytes', /// todo: 按照大小显示Byte、KB、MB等
+        type: type.toUpperCase(),
+        updateTime: file.lastModified,
+      });
+
+      return true;
+    },
+    handleUpload(uploadResources) {
+      this.uploadList.push(uploadResources.file);
+    },
+    handleDownload(file) {
+      let data = {
+        name: file.name,
+        id: file.id,
+      };
+      let config = {
+        url: this.jmxDownloadPath,
+        method: 'post',
+        data: data,
+        responseType: 'blob'
+      };
+      this.result = this.$request(config).then(response => {
+        const content = response.data;
+        const blob = new Blob([content]);
+        if ("download" in document.createElement("a")) {
+          // 非IE下载
+          //  chrome/firefox
+          let aTag = document.createElement('a');
+          aTag.download = file.name;
+          aTag.href = URL.createObjectURL(blob);
+          aTag.click();
+          URL.revokeObjectURL(aTag.href)
+        } else {
+          // IE10+下载
+          navigator.msSaveBlob(blob, this.filename)
+        }
+      }).catch(e => {
+        Message.error({message: e.message, showClose: true});
+      });
+    },
+    handleDelete(file, index) {
+      this.$alert(this.$t('load_test.delete_file_confirm') + file.name + "？", '', {
+        confirmButtonText: this.$t('commons.confirm'),
+        callback: (action) => {
+          if (action === 'confirm') {
+            this._handleDelete(file, index);
+          }
+        }
+      });
+    },
+    _handleDelete(file, index) {
+      this.fileList.splice(index, 1);
+      this.tableData.splice(index, 1);
+      //
+      let i = this.uploadList.findIndex(upLoadFile => upLoadFile.name === file.name);
+      if (i > -1) {
+        this.uploadList.splice(i, 1);
       }
     },
-    methods: {
-      getFileMetadata(testPlan) {
-        this.fileList = [];
-        this.tableData = [];
-        this.uploadList = [];
-        this.result = this.$get(this.getFileMetadataPath + "/" + testPlan.id, response => {
-          let files = response.data;
-
-          if (!files) {
-            Message.error({message: this.$t('load_test.related_file_not_found'), showClose: true});
-            return;
-          }
-          // deep copy
-          this.fileList = JSON.parse(JSON.stringify(files));
-          this.tableData = JSON.parse(JSON.stringify(files));
-          this.tableData.map(f => {
-            f.size = f.size + ' Bytes';
-          });
-        })
-      },
-      beforeUpload(file) {
-        if (!this.fileValidator(file)) {
-          /// todo: 显示错误信息
-          return false;
-        }
-
-        if (this.tableData.filter(f => f.name === file.name).length > 0) {
-          this.$error(this.$t('load_test.delete_file'));
-          return false;
-        }
-
-        let type = file.name.substring(file.name.lastIndexOf(".") + 1);
-
-        this.tableData.push({
-          name: file.name,
-          size: file.size + ' Bytes', /// todo: 按照大小显示Byte、KB、MB等
-          type: type.toUpperCase(),
-          updateTime: file.lastModified,
-        });
-
-        return true;
-      },
-      handleUpload(uploadResources) {
-        this.uploadList.push(uploadResources.file);
-      },
-      handleDownload(file) {
-        let data = {
-          name: file.name,
-          id: file.id,
-        };
-        let config = {
-          url: this.jmxDownloadPath,
-          method: 'post',
-          data: data,
-          responseType: 'blob'
-        };
-        this.result = this.$request(config).then(response => {
-          const content = response.data;
-          const blob = new Blob([content]);
-          if ("download" in document.createElement("a")) {
-            // 非IE下载
-            //  chrome/firefox
-            let aTag = document.createElement('a');
-            aTag.download = file.name;
-            aTag.href = URL.createObjectURL(blob);
-            aTag.click();
-            URL.revokeObjectURL(aTag.href)
-          } else {
-            // IE10+下载
-            navigator.msSaveBlob(blob, this.filename)
-          }
-        }).catch(e => {
-          Message.error({message: e.message, showClose: true});
-        });
-      },
-      handleDelete(file, index) {
-        this.$alert(this.$t('load_test.delete_file_confirm') + file.name + "？", '', {
-          confirmButtonText: this.$t('commons.confirm'),
-          callback: (action) => {
-            if (action === 'confirm') {
-              this._handleDelete(file, index);
-            }
-          }
-        });
-      },
-      _handleDelete(file, index) {
-        this.fileList.splice(index, 1);
-        this.tableData.splice(index, 1);
-        //
-        let i = this.uploadList.findIndex(upLoadFile => upLoadFile.name === file.name);
-        if (i > -1) {
-          this.uploadList.splice(i, 1);
-        }
-      },
-      handleExceed() {
-        this.$error(this.$t('load_test.file_size_limit'));
-      },
-      fileValidator(file) {
-        /// todo: 是否需要对文件内容和大小做限制
-        return file.size > 0;
-      },
-      updatedFileList() {
-        return this.fileList;// 表示修改了已经上传的文件列表
-      },
-      validConfig() {
-        let newJmxNum = 0, oldJmxNum = 0;
-        if (this.uploadList.length > 0) {
-          newJmxNum = this.uploadList.filter(f => f.name.toLowerCase().endsWith(".jmx")).length;
-        }
-        if (this.fileList.length > 0) {
-          oldJmxNum = this.fileList.filter(f => f.name.toLowerCase().endsWith(".jmx")).length;
-        }
-        if (newJmxNum + oldJmxNum !== 1) {
-          this.$error(this.$t('load_test.jmx_is_null'));
-          return false;
-        }
-        return true;
-      }
+    handleExceed() {
+      this.$error(this.$t('load_test.file_size_limit'));
     },
-  }
+    fileValidator(file) {
+      /// todo: 是否需要对文件内容和大小做限制
+      return file.size > 0;
+    },
+    updatedFileList() {
+      return this.fileList;// 表示修改了已经上传的文件列表
+    },
+    validConfig() {
+      let newJmxNum = 0, oldJmxNum = 0;
+      if (this.uploadList.length > 0) {
+        newJmxNum = this.uploadList.filter(f => f.name.toLowerCase().endsWith(".jmx")).length;
+      }
+      if (this.fileList.length > 0) {
+        oldJmxNum = this.fileList.filter(f => f.name.toLowerCase().endsWith(".jmx")).length;
+      }
+      if (newJmxNum + oldJmxNum !== 1) {
+        this.$error(this.$t('load_test.jmx_is_null'));
+        return false;
+      }
+      return true;
+    }
+  },
+}
 </script>
 
 <style scoped>
-  .basic-config {
-    width: 100%
-  }
+.basic-config {
+  width: 100%
+}
 
-  .last-modified {
-    margin-left: 5px;
-  }
+.last-modified {
+  margin-left: 5px;
+}
 </style>
diff --git a/frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue b/frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue
index 71c1b091f8..348f4e7715 100644
--- a/frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue
+++ b/frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue
@@ -4,7 +4,7 @@
       <el-col :span="10">
         <el-form :inline="true">
           <el-form-item>
-            <div class="config-form-label">{{$t('load_test.thread_num')}}</div>
+            <div class="config-form-label">{{ $t('load_test.thread_num') }}</div>
           </el-form-item>
           <el-form-item>
             <el-input-number
@@ -18,7 +18,7 @@
         </el-form>
         <el-form :inline="true">
           <el-form-item>
-            <div class="config-form-label">{{$t('load_test.duration')}}</div>
+            <div class="config-form-label">{{ $t('load_test.duration') }}</div>
           </el-form-item>
           <el-form-item>
             <el-input-number
@@ -33,7 +33,7 @@
         <el-form :inline="true">
           <el-form-item>
             <el-form-item>
-              <div class="config-form-label">{{$t('load_test.rps_limit')}}</div>
+              <div class="config-form-label">{{ $t('load_test.rps_limit') }}</div>
             </el-form-item>
             <el-form-item>
               <el-switch v-model="rpsLimitEnable"/>
@@ -52,7 +52,7 @@
 
         <el-form :inline="true" class="input-bottom-border">
           <el-form-item>
-            <div>{{$t('load_test.ramp_up_time_within')}}</div>
+            <div>{{ $t('load_test.ramp_up_time_within') }}</div>
           </el-form-item>
           <el-form-item>
             <el-input-number
@@ -65,7 +65,7 @@
               size="mini"/>
           </el-form-item>
           <el-form-item>
-            <div>{{$t('load_test.ramp_up_time_minutes')}}</div>
+            <div>{{ $t('load_test.ramp_up_time_minutes') }}</div>
           </el-form-item>
           <el-form-item>
             <el-input-number
@@ -78,12 +78,12 @@
               size="mini"/>
           </el-form-item>
           <el-form-item>
-            <div>{{$t('load_test.ramp_up_time_times')}}</div>
+            <div>{{ $t('load_test.ramp_up_time_times') }}</div>
           </el-form-item>
         </el-form>
         <el-form :inline="true" class="input-bottom-border">
           <el-form-item>
-            <div>{{$t('load_test.select_resource_pool')}}</div>
+            <div>{{ $t('load_test.select_resource_pool') }}</div>
           </el-form-item>
           <el-form-item>
             <el-select v-model="resourcePool" :disabled="isReadOnly" size="mini">
@@ -98,7 +98,7 @@
         </el-form>
       </el-col>
       <el-col :span="14">
-        <div class="title">{{$t('load_test.pressure_prediction_chart')}}</div>
+        <div class="title">{{ $t('load_test.pressure_prediction_chart') }}</div>
         <chart class="chart-container" ref="chart1" :options="orgOptions" :autoresize="true"></chart>
       </el-col>
     </el-row>
@@ -106,263 +106,263 @@
 </template>
 
 <script>
-  import echarts from "echarts";
+import echarts from "echarts";
 
-  const TARGET_LEVEL = "TargetLevel";
-  const RAMP_UP = "RampUp";
-  const STEPS = "Steps";
-  const DURATION = "duration";
-  const RPS_LIMIT = "rpsLimit";
-  const RPS_LIMIT_ENABLE = "rpsLimitEnable";
+const TARGET_LEVEL = "TargetLevel";
+const RAMP_UP = "RampUp";
+const STEPS = "Steps";
+const DURATION = "duration";
+const RPS_LIMIT = "rpsLimit";
+const RPS_LIMIT_ENABLE = "rpsLimitEnable";
 
-  export default {
-    name: "PerformancePressureConfig",
-    props: {
-      testPlan: {
-        type: Object
-      },
-      testId: {
-        type: String
-      },
-      isReadOnly: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  name: "PerformancePressureConfig",
+  props: {
+    testPlan: {
+      type: Object
     },
-    data() {
-      return {
-        result: {},
-        threadNumber: 10,
-        duration: 10,
-        rampUpTime: 10,
-        step: 10,
-        rpsLimit: 10,
-        rpsLimitEnable: false,
-        orgOptions: {},
-        resourcePool: null,
-        resourcePools: [],
-      }
+    testId: {
+      type: String
     },
-    mounted() {
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      result: {},
+      threadNumber: 10,
+      duration: 10,
+      rampUpTime: 10,
+      step: 10,
+      rpsLimit: 10,
+      rpsLimitEnable: false,
+      orgOptions: {},
+      resourcePool: null,
+      resourcePools: [],
+    }
+  },
+  mounted() {
+    if (this.testId) {
+      this.getLoadConfig();
+    } else {
+      this.calculateChart();
+    }
+    this.resourcePool = this.testPlan.testResourcePoolId;
+    this.getResourcePools();
+  },
+  watch: {
+    testPlan(n) {
+      this.resourcePool = n.testResourcePoolId;
+    },
+    testId() {
       if (this.testId) {
         this.getLoadConfig();
       } else {
         this.calculateChart();
       }
-      this.resourcePool = this.testPlan.testResourcePoolId;
-      this.getResourcePools();
     },
-    watch: {
-      testPlan(n) {
-        this.resourcePool = n.testResourcePoolId;
-      },
-      testId() {
-        if (this.testId) {
-          this.getLoadConfig();
-        } else {
-          this.calculateChart();
+  },
+  methods: {
+    getResourcePools() {
+      this.result = this.$get('/testresourcepool/list/quota/valid', response => {
+        this.resourcePools = response.data;
+        // 如果当前的资源池无效 设置 null
+        if (response.data.filter(p => p.id === this.resourcePool).length === 0) {
+          this.resourcePool = null;
         }
-      },
+      })
     },
-    methods: {
-      getResourcePools() {
-        this.result = this.$get('/testresourcepool/list/quota/valid', response => {
-          this.resourcePools = response.data;
-          // 如果当前的资源池无效 设置 null
-          if (response.data.filter(p => p.id === this.resourcePool).length === 0) {
-            this.resourcePool = null;
+    getLoadConfig() {
+      if (this.testId) {
+
+        this.$get('/performance/get-load-config/' + this.testId, (response) => {
+          if (response.data) {
+            let data = JSON.parse(response.data);
+
+            data.forEach(d => {
+              switch (d.key) {
+                case TARGET_LEVEL:
+                  this.threadNumber = d.value;
+                  break;
+                case RAMP_UP:
+                  this.rampUpTime = d.value;
+                  break;
+                case DURATION:
+                  this.duration = d.value;
+                  break;
+                case STEPS:
+                  this.step = d.value;
+                  break;
+                case RPS_LIMIT:
+                  this.rpsLimit = d.value;
+                  break;
+                default:
+                  break;
+              }
+            });
+
+            this.threadNumber = this.threadNumber || 10;
+            this.duration = this.duration || 30;
+            this.rampUpTime = this.rampUpTime || 12;
+            this.step = this.step || 3;
+            this.rpsLimit = this.rpsLimit || 10;
+
+            this.calculateChart();
           }
-        })
-      },
-      getLoadConfig() {
-        if (this.testId) {
-
-          this.$get('/performance/get-load-config/' + this.testId, (response) => {
-            if (response.data) {
-              let data = JSON.parse(response.data);
-
-              data.forEach(d => {
-                switch (d.key) {
-                  case TARGET_LEVEL:
-                    this.threadNumber = d.value;
-                    break;
-                  case RAMP_UP:
-                    this.rampUpTime = d.value;
-                    break;
-                  case DURATION:
-                    this.duration = d.value;
-                    break;
-                  case STEPS:
-                    this.step = d.value;
-                    break;
-                  case RPS_LIMIT:
-                    this.rpsLimit = d.value;
-                    break;
-                  default:
-                    break;
-                }
-              });
-
-              this.threadNumber = this.threadNumber || 10;
-              this.duration = this.duration || 30;
-              this.rampUpTime = this.rampUpTime || 12;
-              this.step = this.step || 3;
-              this.rpsLimit = this.rpsLimit || 10;
-
-              this.calculateChart();
-            }
-          });
-        }
-      },
-      calculateChart() {
-        if (this.duration < this.rampUpTime) {
-          this.rampUpTime = this.duration;
-        }
-        if (this.rampUpTime < this.step) {
-          this.step = this.rampUpTime;
-        }
-        this.orgOptions = {
-          xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: []
-          },
-          yAxis: {
-            type: 'value'
-          },
-          tooltip: {
-            trigger: 'axis',
-            formatter: '{a}: {c0}',
-            axisPointer: {
-              lineStyle: {
-                color: '#57617B'
-              }
-            }
-          },
-          series: [{
-            name: 'User',
-            data: [],
-            type: 'line',
-            step: 'start',
-            smooth: false,
-            symbolSize: 5,
-            showSymbol: false,
-            lineStyle: {
-              normal: {
-                width: 1
-              }
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                  offset: 0,
-                  color: 'rgba(137, 189, 27, 0.3)'
-                }, {
-                  offset: 0.8,
-                  color: 'rgba(137, 189, 27, 0)'
-                }], false),
-                shadowColor: 'rgba(0, 0, 0, 0.1)',
-                shadowBlur: 10
-              }
-            },
-            itemStyle: {
-              normal: {
-                color: 'rgb(137,189,27)',
-                borderColor: 'rgba(137,189,2,0.27)',
-                borderWidth: 12
-              }
-            },
-          }]
-        };
-        let timePeriod = Math.floor(this.rampUpTime / this.step);
-        let timeInc = timePeriod;
-
-        let threadPeriod = Math.floor(this.threadNumber / this.step);
-        let threadInc1 = Math.floor(this.threadNumber / this.step);
-        let threadInc2 = Math.ceil(this.threadNumber / this.step);
-        let inc2count = this.threadNumber - this.step * threadInc1;
-        for (let i = 0; i <= this.duration; i++) {
-          // x 轴
-          this.orgOptions.xAxis.data.push(i);
-          if (i > timePeriod) {
-            timePeriod += timeInc;
-            if (inc2count > 0) {
-              threadPeriod = threadPeriod + threadInc2;
-              inc2count--;
-            } else {
-              threadPeriod = threadPeriod + threadInc1;
-            }
-            if (threadPeriod > this.threadNumber) {
-              threadPeriod = this.threadNumber;
-            }
-            this.orgOptions.series[0].data.push(threadPeriod);
-          } else {
-            this.orgOptions.series[0].data.push(threadPeriod);
-          }
-        }
-      },
-      validConfig() {
-        if (!this.resourcePool) {
-          this.$warning(this.$t('load_test.resource_pool_is_null'));
-          // 资源池为空，设置参数为资源池所在Tab的name
-          this.$emit('changeActive', '1');
-          return false;
-        }
-
-        if (!this.threadNumber || !this.duration || !this.rampUpTime || !this.step || !this.rpsLimit) {
-          this.$warning(this.$t('load_test.pressure_config_params_is_empty'));
-          this.$emit('changeActive', '1');
-          return false;
-        }
-
-        return true;
-      },
-      convertProperty() {
-        /// todo：下面4个属性是jmeter ConcurrencyThreadGroup plugin的属性，这种硬编码不太好吧，在哪能转换这种属性？
-        return [
-          {key: TARGET_LEVEL, value: this.threadNumber},
-          {key: RAMP_UP, value: this.rampUpTime},
-          {key: STEPS, value: this.step},
-          {key: DURATION, value: this.duration},
-          {key: RPS_LIMIT, value: this.rpsLimit},
-          {key: RPS_LIMIT_ENABLE, value: this.rpsLimitEnable},
-        ];
+        });
       }
+    },
+    calculateChart() {
+      if (this.duration < this.rampUpTime) {
+        this.rampUpTime = this.duration;
+      }
+      if (this.rampUpTime < this.step) {
+        this.step = this.rampUpTime;
+      }
+      this.orgOptions = {
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: []
+        },
+        yAxis: {
+          type: 'value'
+        },
+        tooltip: {
+          trigger: 'axis',
+          formatter: '{a}: {c0}',
+          axisPointer: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        },
+        series: [{
+          name: 'User',
+          data: [],
+          type: 'line',
+          step: 'start',
+          smooth: false,
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(137, 189, 27, 0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(137, 189, 27, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(137,189,27)',
+              borderColor: 'rgba(137,189,2,0.27)',
+              borderWidth: 12
+            }
+          },
+        }]
+      };
+      let timePeriod = Math.floor(this.rampUpTime / this.step);
+      let timeInc = timePeriod;
+
+      let threadPeriod = Math.floor(this.threadNumber / this.step);
+      let threadInc1 = Math.floor(this.threadNumber / this.step);
+      let threadInc2 = Math.ceil(this.threadNumber / this.step);
+      let inc2count = this.threadNumber - this.step * threadInc1;
+      for (let i = 0; i <= this.duration; i++) {
+        // x 轴
+        this.orgOptions.xAxis.data.push(i);
+        if (i > timePeriod) {
+          timePeriod += timeInc;
+          if (inc2count > 0) {
+            threadPeriod = threadPeriod + threadInc2;
+            inc2count--;
+          } else {
+            threadPeriod = threadPeriod + threadInc1;
+          }
+          if (threadPeriod > this.threadNumber) {
+            threadPeriod = this.threadNumber;
+          }
+          this.orgOptions.series[0].data.push(threadPeriod);
+        } else {
+          this.orgOptions.series[0].data.push(threadPeriod);
+        }
+      }
+    },
+    validConfig() {
+      if (!this.resourcePool) {
+        this.$warning(this.$t('load_test.resource_pool_is_null'));
+        // 资源池为空，设置参数为资源池所在Tab的name
+        this.$emit('changeActive', '1');
+        return false;
+      }
+
+      if (!this.threadNumber || !this.duration || !this.rampUpTime || !this.step || !this.rpsLimit) {
+        this.$warning(this.$t('load_test.pressure_config_params_is_empty'));
+        this.$emit('changeActive', '1');
+        return false;
+      }
+
+      return true;
+    },
+    convertProperty() {
+      /// todo：下面4个属性是jmeter ConcurrencyThreadGroup plugin的属性，这种硬编码不太好吧，在哪能转换这种属性？
+      return [
+        {key: TARGET_LEVEL, value: this.threadNumber},
+        {key: RAMP_UP, value: this.rampUpTime},
+        {key: STEPS, value: this.step},
+        {key: DURATION, value: this.duration},
+        {key: RPS_LIMIT, value: this.rpsLimit},
+        {key: RPS_LIMIT_ENABLE, value: this.rpsLimitEnable},
+      ];
     }
   }
+}
 </script>
 
 
 <style scoped>
-  .pressure-config-container .el-input {
-    width: 130px;
+.pressure-config-container .el-input {
+  width: 130px;
 
-  }
+}
 
-  .pressure-config-container .config-form-label {
-    width: 130px;
-  }
+.pressure-config-container .config-form-label {
+  width: 130px;
+}
 
-  .pressure-config-container .input-bottom-border input {
-    border: 0;
-    border-bottom: 1px solid #DCDFE6;
-  }
+.pressure-config-container .input-bottom-border input {
+  border: 0;
+  border-bottom: 1px solid #DCDFE6;
+}
 
-  .chart-container {
-    width: 100%;
-  }
+.chart-container {
+  width: 100%;
+}
 
-  .el-col .el-form {
-    margin-top: 15px;
-    text-align: left;
-  }
+.el-col .el-form {
+  margin-top: 15px;
+  text-align: left;
+}
 
-  .el-col {
-    margin-top: 15px;
-    text-align: left;
-  }
+.el-col {
+  margin-top: 15px;
+  text-align: left;
+}
 
-  .title {
-    margin-left: 60px;
-  }
+.title {
+  margin-left: 60px;
+}
 </style>