fix(接口测试): 修复JDBC请求步骤所属环境未随公共环境变动问题

--bug=1011789 --user=赵勇 【接口测试】场景-引用场景为sql接口-更换运行环境-调试-返回结果后查看数据源名称-仍显示之前的数据源源名称 https://www.tapd.cn/55049933/s/1128715

backend/src/main/java/io/metersphere/api/exec/api/ApiCaseExecuteService.java

@@ -178,6 +178,7 @@ public class ApiCaseExecuteService {
             }
         }
     }
+
     /**
      * 接口定义case执行
      *
@@ -199,6 +200,8 @@ public class ApiCaseExecuteService {
         ServiceUtils.getSelectAllIds(request, request.getCondition(),
                 (query) -> extApiTestCaseMapper.selectIdsByQuery((ApiTestCaseRequest) query));
 
+        List<MsExecResponseDTO> responseDTOS = new LinkedList<>();
+
         ApiTestCaseExample example = new ApiTestCaseExample();
         example.createCriteria().andIdIn(request.getIds());
         List<ApiTestCaseWithBLOBs> caseList = apiTestCaseMapper.selectByExampleWithBLOBs(example);
@@ -222,6 +225,7 @@ public class ApiCaseExecuteService {
 
             apiScenarioReportStructureService.save(serialReportId, new ArrayList<>());
             apiCaseResultService.batchSave(executeQueue);
+            responseDTOS.add(new MsExecResponseDTO(JSON.toJSONString(request.getIds()), report.getId(), request.getTriggerMode()));
         }
 
         if (request.getConfig() != null && request.getConfig().getMode().equals(RunModeConstants.SERIAL.toString())) {
@@ -238,7 +242,6 @@ public class ApiCaseExecuteService {
             request.setTriggerMode(ApiRunMode.DEFINITION.name());
         }
 
-        List<MsExecResponseDTO> responseDTOS = new LinkedList<>();
         Map<String, ApiDefinitionExecResult> executeQueue = new LinkedHashMap<>();
         String status = request.getConfig().getMode().equals(RunModeConstants.SERIAL.toString()) ? APITestStatus.Waiting.name() : APITestStatus.Running.name();
 
@@ -254,7 +257,9 @@ public class ApiCaseExecuteService {
                 report.setIntegratedReportId(serialReportId);
             }
             executeQueue.put(caseWithBLOBs.getId(), report);
-            responseDTOS.add(new MsExecResponseDTO(caseWithBLOBs.getId(), report.getId(), request.getTriggerMode()));
+            if (!StringUtils.equals(request.getConfig().getReportType(), RunModeConstants.SET_REPORT.toString())) {
+                responseDTOS.add(new MsExecResponseDTO(caseWithBLOBs.getId(), report.getId(), request.getTriggerMode()));
+            }
         }
 
         apiCaseResultService.batchSave(executeQueue);

backend/src/main/java/io/metersphere/api/service/ApiScenarioReportService.java

@@ -349,6 +349,7 @@ public class ApiScenarioReportService {
             execResultExample.createCriteria().andIntegratedReportIdEqualTo(reportId).andStatusEqualTo("Error");
             long size = definitionExecResultMapper.countByExample(execResultExample);
             result.setStatus(size > 0 ? ScenarioStatus.Error.name() : ScenarioStatus.Success.name());
+            result.setEndTime(System.currentTimeMillis());
             definitionExecResultMapper.updateByPrimaryKeySelective(result);
         } else {
             ApiScenarioReport report = apiScenarioReportMapper.selectByPrimaryKey(reportId);
@@ -385,9 +386,9 @@ public class ApiScenarioReportService {
             }
 
             long successSize = requestResults.stream().filter(requestResult -> StringUtils.equalsIgnoreCase(requestResult.getStatus(), ScenarioStatus.Success.name())).count();
-            if(requestResults.size() == 0){
+            if (requestResults.size() == 0) {
                 scenario.setPassRate("0%");
-            }else {
+            } else {
                 scenario.setPassRate(new DecimalFormat("0%").format((float) successSize / requestResults.size()));
             }
 

backend/src/main/java/io/metersphere/api/service/MsHashTreeService.java

@@ -58,6 +58,8 @@ public class MsHashTreeService {
     private static final String BODY = "body";
     private static final String ARGUMENTS = "arguments";
     private static final String AUTH_MANAGER = "authManager";
+    private static final String PROJECT_ID = "projectId";
+    private static final String ACTIVE = "active";
 
     public void setHashTree(JSONArray hashTree) {
         // 将引用转成复制
@@ -187,11 +189,12 @@ public class MsHashTreeService {
                     element.put(REST, refElement.get(REST));
                     element.put(PATH, refElement.get(PATH));
                     element.put(BODY, refElement.get(BODY));
-                    element.put("active", false);
+                    element.put(ACTIVE, false);
                     element.put(AUTH_MANAGER, refElement.get(AUTH_MANAGER));
                     element.put(ARGUMENTS, refElement.get(ARGUMENTS));
+                    element.put(PROJECT_ID, apiTestCase.getProjectId());
                     if (array != null) {
-                        JSONArray sourceHashTree = element.getJSONArray("hashTree");
+                        JSONArray sourceHashTree = element.getJSONArray(HASH_TREE);
                         Map<String, List<JSONObject>> groupMap = ElementUtil.group(sourceHashTree);
                         Map<String, List<JSONObject>> targetGroupMap = ElementUtil.group(refElement.getJSONArray(HASH_TREE));
 
@@ -208,7 +211,7 @@ public class MsHashTreeService {
                         if (CollectionUtils.isNotEmpty(rules)) {
                             step.addAll(rules);
                         }
-                        element.put("hashTree", step);
+                        element.put(HASH_TREE, step);
                     }
                     element.put(REFERENCED, REF);
                     element.put(DISABLED, true);

frontend/src/business/components/api/automation/scenario/EditApiScenario.vue

@@ -734,11 +734,6 @@ export default {
               this.getEnvDomain(data.hashTree, domainMap);
               this.margeDomain(this.scenarioDefinition, domainMap);
               this.cancelBatchProcessing();
-              if (this.$store.state.currentApiCase) {
-                this.$store.state.currentApiCase.resetDataSource = getUUID();
-              } else {
-                this.$store.state.currentApiCase = {resetDataSource: getUUID()};
-              }
             }
           }
         })

frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue

@@ -270,32 +270,16 @@ export default {
     if (requireComponent != null && JSON.stringify(esbDefinition) != '{}' && JSON.stringify(esbDefinitionResponse) != '{}') {
       this.showXpackCompnent = true;
     }
-    this.getEnvironments(this.environmentGroupId);
   },
   watch: {
-    envMap(val) {
-      this.getEnvironments();
-      this.environmentMap = val;
-    },
     message() {
       this.forStatus();
       this.reload();
     },
-    environmentGroupId(val) {
-      this.getEnvironments(val);
-    },
-    environmentType(val) {
-      this.envType = val;
-    },
     '$store.state.currentApiCase.debugLoop'() {
       this.forStatus();
       this.reload();
     },
-    '$store.state.currentApiCase.resetDataSource'() {
-      if (this.request.id && this.request.referenced !== 'REF') {
-        this.initDataSource();
-      }
-    },
   },
   computed: {
     displayColor() {
@@ -391,50 +375,7 @@ export default {
         this.response = this.request.requestResult[0];
       }
     },
-    initDataSource() {
+
-      let databaseConfigsOptions = [];
-      if (this.request.protocol === 'SQL' || this.request.type === 'JDBCSampler') {
-        if (this.environment && this.environment.config) {
-          let config = JSON.parse(this.environment.config);
-          if (config && config.databaseConfigs) {
-            config.databaseConfigs.forEach(item => {
-              databaseConfigsOptions.push(item);
-            });
-          }
-        }
-      }
-      if (databaseConfigsOptions.length > 0 && this.request.environmentId !== this.environment.id) {
-        this.request.dataSourceId = databaseConfigsOptions[0].id;
-        this.request.environmentId = this.environment.id;
-      }
-    },
-    getEnvironments(groupId) {
-      this.environment = {};
-      let id = undefined;
-      if (groupId) {
-        this.$get("/environment/group/project/map/" + groupId, res => {
-          let data = res.data;
-          if (data) {
-            this.environmentMap = new Map(Object.entries(data));
-            id = new Map(Object.entries(data)).get(this.request.projectId);
-            if (id) {
-              this.$get('/api/environment/get/' + id, response => {
-                this.environment = response.data;
-                this.initDataSource();
-              });
-            }
-          }
-        })
-      } else {
-        id = this.envMap.get(this.request.projectId);
-        if (id) {
-          this.$get('/api/environment/get/' + id, response => {
-            this.environment = response.data;
-            this.initDataSource();
-          });
-        }
-      }
-    },
     remove() {
       this.$emit('remove', this.request, this.node);
     },
@@ -454,78 +395,6 @@ export default {
         }
       }
     },
-    getApiInfo() {
-      if (this.request.id && this.request.referenced === 'REF') {
-        let requestResult = this.request.requestResult;
-        let enable = this.request.enable;
-        this.$get("/api/testcase/get/" + this.request.id, response => {
-          if (response.data) {
-            let hashTree = [];
-            if (this.request.hashTree) {
-              hashTree = JSON.parse(JSON.stringify(this.request.hashTree));
-            }
-            Object.assign(this.request, JSON.parse(response.data.request));
-            this.request.name = response.data.name;
-            this.request.referenced = "REF";
-            this.request.enable = enable;
-            if (response.data.path && response.data.path != null) {
-              this.request.path = response.data.path;
-              this.request.url = response.data.url;
-            }
-            if (response.data.method && response.data.method != null) {
-              this.request.method = response.data.method;
-            }
-            if (requestResult && Object.prototype.toString.call(requestResult) !== '[object Array]') {
-              this.request.requestResult = [requestResult];
-            } else {
-              this.request.requestResult = requestResult;
-            }
-            if (response.data.num) {
-              this.request.num = response.data.num;
-            }
-            this.request.id = response.data.id;
-            this.request.disabled = true;
-            this.request.root = true;
-            this.request.projectId = response.data.projectId;
-            this.request.versionName = response.data.versionName;
-            this.request.versionEnable = response.data.versionEnable;
-            let req = JSON.parse(response.data.request);
-            if (req && this.request) {
-              this.request.hashTree = hashTree;
-              this.mergeHashTree(req.hashTree);
-            }
-            this.initDataSource();
-            this.forStatus();
-            this.sort();
-            this.reload();
-          }
-        })
-      } else if (this.request.id && this.request.referenced === 'Copy') {
-        if (this.request.refType === 'CASE') {
-          this.$get("/api/testcase/get/" + this.request.id, response => {
-            if (response.data) {
-              if (response.data.num) {
-                this.request.num = response.data.num;
-              }
-              this.request.id = response.data.id;
-              this.request.versionName = response.data.versionName;
-              this.request.versionEnable = response.data.versionEnable;
-            }
-          })
-        } else if (this.request.refType === 'API') {
-          this.$get("/api/definition/get/" + this.request.id, response => {
-            if (response.data) {
-              if (response.data.num) {
-                this.request.num = response.data.num;
-              }
-              this.request.id = response.data.id;
-              this.request.versionName = response.data.versionName;
-              this.request.versionEnable = response.data.versionEnable;
-            }
-          })
-        }
-      }
-    },
     mergeHashTree(targetHashTree) {
       let sourceHashTree = this.request.hashTree;
       // 历史数据兼容

frontend/src/business/components/api/definition/components/request/database/BasisParameters.vue

@@ -108,252 +108,263 @@
 </template>
 
 <script>
-  import MsApiKeyValue from "../../ApiKeyValue";
+import MsApiKeyValue from "../../ApiKeyValue";
-  import MsApiAssertions from "../../assertion/ApiAssertions";
+import MsApiAssertions from "../../assertion/ApiAssertions";
-  import MsApiExtract from "../../extract/ApiExtract";
+import MsApiExtract from "../../extract/ApiExtract";
-  import ApiRequestMethodSelect from "../../collapse/ApiRequestMethodSelect";
+import ApiRequestMethodSelect from "../../collapse/ApiRequestMethodSelect";
-  import MsCodeEdit from "../../../../../common/components/MsCodeEdit";
+import MsCodeEdit from "../../../../../common/components/MsCodeEdit";
-  import MsApiScenarioVariables from "../../ApiScenarioVariables";
+import MsApiScenarioVariables from "../../ApiScenarioVariables";
-  import {createComponent} from "../../jmeter/components";
+import {createComponent} from "../../jmeter/components";
-  import {Assertions, Extract} from "../../../model/ApiTestModel";
+import {Assertions, Extract} from "../../../model/ApiTestModel";
-  import {parseEnvironment} from "../../../model/EnvironmentModel";
+import {parseEnvironment} from "../../../model/EnvironmentModel";
-  import ApiEnvironmentConfig from "@/business/components/api/test/components/ApiEnvironmentConfig";
+import ApiEnvironmentConfig from "@/business/components/api/test/components/ApiEnvironmentConfig";
-  import {getCurrentProjectID} from "@/common/js/utils";
+import {getCurrentProjectID} from "@/common/js/utils";
-  import {getUUID} from "@/common/js/utils";
+import {getUUID} from "@/common/js/utils";
-  import MsJsr233Processor from "../../../../automation/scenario/component/Jsr233Processor";
+import MsJsr233Processor from "../../../../automation/scenario/component/Jsr233Processor";
-  import MsJmxStep from "../../step/JmxStep";
+import MsJmxStep from "../../step/JmxStep";
-  import {stepCompute, hisDataProcessing} from "@/business/components/api/definition/api-definition";
+import {stepCompute, hisDataProcessing} from "@/business/components/api/definition/api-definition";
 
 
-  export default {
+export default {
-    name: "MsDatabaseConfig",
+  name: "MsDatabaseConfig",
-    components: {
+  components: {
-      MsJsr233Processor,
+    MsJsr233Processor,
-      MsApiScenarioVariables,
+    MsApiScenarioVariables,
-      MsCodeEdit,
+    MsCodeEdit,
-      ApiRequestMethodSelect, MsApiExtract, MsApiAssertions, MsApiKeyValue, ApiEnvironmentConfig,
+    ApiRequestMethodSelect, MsApiExtract, MsApiAssertions, MsApiKeyValue, ApiEnvironmentConfig,
-      MsJmxStep
+    MsJmxStep
+  },
+  props: {
+    request: {},
+    basisData: {},
+    response: {},
+    moduleOptions: Array,
+    showScript: {
+      type: Boolean,
+      default: true,
     },
-    props: {
+    isReadOnly: {
-      request: {},
+      type: Boolean,
-      basisData: {},
+      default: false
-      response: {},
-      moduleOptions: Array,
-      showScript: {
-        type: Boolean,
-        default: true,
-      },
-      isReadOnly: {
-        type: Boolean,
-        default: false
-      },
     },
-    data() {
+  },
-      return {
+  data() {
-        spanNum: 24,
+    return {
-        environments: [],
+      spanNum: 24,
-        isBodyShow: true,
+      environments: [],
-        currentEnvironment: {},
+      isBodyShow: true,
-        databaseConfigsOptions: [],
+      currentEnvironment: {},
-        isReloadData: false,
+      databaseConfigsOptions: [],
-        activeName: "variables",
+      isReloadData: false,
-        rules: {},
+      activeName: "variables",
-      }
+      rules: {},
-    },
+    }
-    watch: {
+  },
-      'request.dataSourceId'() {
+  watch: {
-        this.setDataSource();
+    'request.hashTree': {
-      },
+      handler(v) {
-      'request.hashTree': {
-        handler(v) {
-          this.initStepSize(this.request.hashTree);
-        },
-        deep: true
-      }
-    },
-    created() {
-      this.getEnvironments();
-      if (this.request.hashTree) {
         this.initStepSize(this.request.hashTree);
-        this.historicalDataProcessing(this.request.hashTree);
+      },
-      }
+      deep: true
     },
-    computed: {
+    '$store.state.scenarioEnvMap': {
-      projectId() {
+      handler(v) {
-        return getCurrentProjectID();
-      },
-    },
-    methods: {
-      tabClick() {
-        if (this.activeName === 'preOperate') {
-          this.$refs.preStep.filter();
-        }
-        if (this.activeName === 'postOperate') {
-          this.$refs.postStep.filter();
-        }
-        if (this.activeName === 'assertionsRule') {
-          this.$refs.assertionsRule.filter();
-        }
-      },
-      historicalDataProcessing(array) {
-        hisDataProcessing(array, this.request);
-      },
-      initStepSize(array) {
-        stepCompute(array, this.request);
-        this.reloadBody();
-      },
-      reloadBody() {
-        // 解决修改请求头后 body 显示错位
-        this.isBodyShow = false;
-        this.$nextTick(() => {
-          this.isBodyShow = true;
-        });
-      },
-      remove(row) {
-        let index = this.request.hashTree.indexOf(row);
-        this.request.hashTree.splice(index, 1);
-        this.reload();
-      },
-      copyRow(row) {
-        let obj = JSON.parse(JSON.stringify(row));
-        obj.id = getUUID();
-        this.request.hashTree.push(obj);
-        this.reload();
-      },
-      reload() {
-        this.isReloadData = true
-        this.$nextTick(() => {
-          this.isReloadData = false
-        })
-      },
-      validate() {
-        this.$refs['request'].validate((valid) => {
-          if (valid) {
-            this.$emit('callback');
-          }
-        })
-      },
-      saveApi() {
-        this.basisData.method = this.basisData.protocol;
-        this.$emit('saveApi', this.basisData);
-      },
-      runTest() {
-
-      },
-      getEnvironments() {
-        this.environments = [];
-        let id = this.request.projectId ? this.request.projectId : this.projectId;
-        this.$get('/api/environment/list/' + id, response => {
-          this.environments = response.data;
-          this.environments.forEach(environment => {
-            parseEnvironment(environment);
-          });
-          if (!this.request.environmentId) {
-            this.request.environmentId = this.$store.state.useEnvironment;
-          }
-          let hasEnvironment = false;
-          for (let i in this.environments) {
-            if (this.environments[i].id === this.request.environmentId) {
-              hasEnvironment = true;
-              break;
-            }
-          }
-          if (!hasEnvironment) {
-            this.request.environmentId = undefined;
-          }
-          if (!this.request.environmentId) {
-            this.request.dataSourceId = undefined;
-          }
-          this.initDataSource();
-        });
-      },
-      openEnvironmentConfig() {
-        this.$refs.environmentConfig.open(getCurrentProjectID());
-      },
-      initDataSource() {
-        let flag = false;
-        for (let i in this.environments) {
-          if (this.environments[i].id === this.request.environmentId) {
-            this.databaseConfigsOptions = [];
-            this.environments[i].config.databaseConfigs.forEach(item => {
-              if (item.id === this.request.dataSourceId) {
-                flag = true;
-              }
-              this.databaseConfigsOptions.push(item);
-            });
-            break;
-          }
-        }
-        if (!flag) {
-          this.request.dataSourceId = "";
-        }
-      },
-      setDataSource() {
-        this.initDataSource();
-
-        for (let item of this.databaseConfigsOptions) {
-          if (this.request.dataSourceId === item.id) {
-            this.request.dataSource = item;
-            break;
-          }
-        }
-      },
-      environmentChange(value) {
-        this.request.dataSource = undefined;
-        this.request.dataSourceId = "";
-        for (let i in this.environments) {
-          if (this.environments[i].id === value) {
-            this.databaseConfigsOptions = [];
-            this.environments[i].config.databaseConfigs.forEach(item => {
-              this.databaseConfigsOptions.push(item);
-            })
-            break;
-          }
-        }
-      },
-      environmentConfigClose() {
         this.getEnvironments();
       },
+      deep: true
     }
+  },
+  created() {
+    this.getEnvironments();
+    if (this.request.hashTree) {
+      this.initStepSize(this.request.hashTree);
+      this.historicalDataProcessing(this.request.hashTree);
+    }
+  },
+  computed: {
+    projectId() {
+      return getCurrentProjectID();
+    },
+  },
+  methods: {
+    tabClick() {
+      if (this.activeName === 'preOperate') {
+        this.$refs.preStep.filter();
+      }
+      if (this.activeName === 'postOperate') {
+        this.$refs.postStep.filter();
+      }
+      if (this.activeName === 'assertionsRule') {
+        this.$refs.assertionsRule.filter();
+      }
+    },
+    historicalDataProcessing(array) {
+      hisDataProcessing(array, this.request);
+    },
+    initStepSize(array) {
+      stepCompute(array, this.request);
+      this.reloadBody();
+    },
+    reloadBody() {
+      // 解决修改请求头后 body 显示错位
+      this.isBodyShow = false;
+      this.$nextTick(() => {
+        this.isBodyShow = true;
+      });
+    },
+    remove(row) {
+      let index = this.request.hashTree.indexOf(row);
+      this.request.hashTree.splice(index, 1);
+      this.reload();
+    },
+    copyRow(row) {
+      let obj = JSON.parse(JSON.stringify(row));
+      obj.id = getUUID();
+      this.request.hashTree.push(obj);
+      this.reload();
+    },
+    reload() {
+      this.isReloadData = true
+      this.$nextTick(() => {
+        this.isReloadData = false
+      })
+    },
+    validate() {
+      this.$refs['request'].validate((valid) => {
+        if (valid) {
+          this.$emit('callback');
+        }
+      })
+    },
+    saveApi() {
+      this.basisData.method = this.basisData.protocol;
+      this.$emit('saveApi', this.basisData);
+    },
+    runTest() {
 
+    },
+    getEnvironments() {
+      this.environments = [];
+      let id = this.request.projectId ? this.request.projectId : this.projectId;
+      this.$get('/api/environment/list/' + id, response => {
+        this.environments = response.data;
+        this.environments.forEach(environment => {
+          parseEnvironment(environment);
+        });
+        let hasEnvironment = false;
+        for (let i in this.environments) {
+          if (this.environments[i].id === this.request.environmentId) {
+            if (this.$store.state.scenarioEnvMap && this.$store.state.scenarioEnvMap instanceof Map) {
+              if (this.$store.state.scenarioEnvMap.has(this.projectId) &&
+                this.$store.state.scenarioEnvMap.get(this.projectId) === this.request.environmentId) {
+                hasEnvironment = true;
+              }
+            } else {
+              hasEnvironment = true;
+            }
+            break;
+          }
+        }
+        if (!hasEnvironment) {
+          if (this.$store.state.scenarioEnvMap && this.$store.state.scenarioEnvMap instanceof Map
+            && this.$store.state.scenarioEnvMap.has(this.projectId)) {
+            this.request.environmentId = this.$store.state.scenarioEnvMap.get(this.projectId);
+          }
+        }
+        if (!this.request.environmentId) {
+          this.request.dataSourceId = undefined;
+        }
+        this.initDataSource();
+      });
+    },
+    openEnvironmentConfig() {
+      this.$refs.environmentConfig.open(getCurrentProjectID());
+    },
+    initDataSource() {
+      let flag = false;
+      let environment = {};
+      for (let i in this.environments) {
+        if (this.environments[i].id === this.request.environmentId) {
+          environment = this.environments[i];
+          break;
+        }
+      }
+
+      this.databaseConfigsOptions = [];
+      if (environment.config && environment.config.databaseConfigs) {
+        environment.config.databaseConfigs.forEach(item => {
+          if (item.id === this.request.dataSourceId) {
+            flag = true;
+          }
+          this.databaseConfigsOptions.push(item);
+        });
+        if (!flag && environment.config.databaseConfigs.length > 0) {
+          this.request.dataSourceId = environment.config.databaseConfigs[0].id;
+          flag = true;
+        }
+      }
+      if (!flag) {
+        this.request.dataSourceId = "";
+      }
+    },
+    setDataSource() {
+      this.initDataSource();
+
+      for (let item of this.databaseConfigsOptions) {
+        if (this.request.dataSourceId === item.id) {
+          this.request.dataSource = item;
+          break;
+        }
+      }
+    },
+    environmentChange(value) {
+      this.request.dataSource = undefined;
+      this.request.dataSourceId = "";
+      for (let i in this.environments) {
+        if (this.environments[i].id === value) {
+          this.databaseConfigsOptions = [];
+          this.environments[i].config.databaseConfigs.forEach(item => {
+            this.databaseConfigsOptions.push(item);
+          })
+          break;
+        }
+      }
+    },
+    environmentConfigClose() {
+      this.getEnvironments();
+    },
   }
+
+}
 </script>
 
 <style scoped>
-  .sql-content {
+.sql-content {
-    height: calc(100vh - 570px);
+  height: calc(100vh - 570px);
-  }
+}
 
-  .one-row .el-form-item {
+.one-row .el-form-item {
-    display: inline-block;
+  display: inline-block;
-  }
+}
 
-  .one-row .el-form-item:nth-child(2) {
+.one-row .el-form-item:nth-child(2) {
-    margin-left: 60px;
+  margin-left: 60px;
-  }
+}
 
-  .ms-left-cell {
+.ms-header {
-    margin-top: 40px;
+  background: #783887;
-  }
+  color: white;
+  height: 18px;
+  font-size: xx-small;
+  border-radius: 50%;
+}
 
-  .ms-header {
+.environment-button {
-    background: #783887;
+  margin-left: 20px;
-    color: white;
+  padding: 7px;
-    height: 18px;
+}
-    font-size: xx-small;
-    border-radius: 50%;
-  }
 
-  .environment-button {
+/deep/ .el-form-item {
-    margin-left: 20px;
+  margin-bottom: 15px;
-    padding: 7px;
+}
-  }
-
-  .ms-left-buttion {
-    margin: 6px 0px 8px 30px;
-  }
-
-  /deep/ .el-form-item {
-    margin-bottom: 15px;
-  }
 </style>