simulation-front/src/views/workManagement/manualRunProjectDetail.vue

<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="140px"
      class="flexBox"
    >
      <div class="formItemBox">
        <el-form-item label="项目名称:" prop="projectName">
          <el-input
            placeholder="请输入"
            maxlength="120"
            v-autoTrim="{ obj: form, key: 'projectName' }"
            v-model="form.projectName"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="项目描述:" prop="projectDescribe">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            placeholder="请输入"
            maxlength="300"
            v-autoTrim="{ obj: form, key: 'projectDescribe' }"
            v-model="form.projectDescribe"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="算法来源:" prop="algorithmType">
          <el-radio v-model="form.algorithmType" label="1" @change="typeChange"
            >私有导入</el-radio
          >
          <el-radio v-model="form.algorithmType" label="3" @change="typeChange"
            >算法平台</el-radio
          >
        </el-form-item>
        <el-form-item label="选择算法:" prop="algorithmArrayS">
          <el-cascader
            ref="cascaderA"
            v-model="form.algorithmArrayS"
            :options="algorithmList"
            :props="props"
            @change="algorithmSelChange"
          ></el-cascader>
          <!-- <el-select v-model="form.algorithm">
                        <el-option
                            v-for="item in algorithmList"
                            :label="item.name"
                            :value="item.id"
                            :key="item.id"
                            :title="item.description"
                        ></el-option>
                    </el-select> -->
        </el-form-item>
        <el-form-item label="选择车辆:" prop="vehicleArrayS">
          <el-cascader
            ref="cascaderB"
            v-model="form.vehicleArrayS"
            :options="vehicleList"
            :props="props"
            @change="vehicleSelChange"
          ></el-cascader>
          <!-- <el-select
                        v-model="form.vehicle"
                        @change="vehicleSelChange"
                    >
                        <el-option
                            v-for="item in vehicleList"
                            :label="item.name"
                            :value="item.id"
                            :key="item.id"
                            :title="item.description"
                        ></el-option>
                    </el-select> -->
        </el-form-item>
        <el-form-item label="选择场景:" prop="sceneArrayS">
          <el-cascader
            ref="cascaderC"
            v-model="form.sceneArrayS"
            :options="sceneList"
            :props="props"
            @change="sceneSelChange"
          ></el-cascader>
          <!-- <el-select v-model="form.scene" @change="sceneSelChange">
                        <el-option
                            v-for="item in sceneList"
                            :label="item.name"
                            :value="item.id"
                            :key="item.id"
                        ></el-option>
                    </el-select> -->
        </el-form-item>
        <el-form-item label="并行度:" prop="parallelism">
          <el-input
            :disabled="runDisabled"
            placeholder="请输入"
            maxlength="10"
            v-autoTrim="{ obj: form, key: 'parallelism' }"
            v-model="form.parallelism"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="场景评价规则:"></el-form-item>
        <el-form-item label="危险度" class="rule-item" prop="riskEvaluationRuleId">
          <el-select placeholder="暂不评价" v-model="form.riskEvaluationRuleId">
            <el-option
              v-for="(item, idx) in scriptList['2']"
              :key="idx"
              :label="item.ruleName"
              :value="item.ruleId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="复杂度" class="rule-item" prop="complexityEvaluationRuleId">
          <el-select placeholder="暂不评价" v-model="form.complexityEvaluationRuleId">
            <el-option
              v-for="(item, idx) in scriptList['1']"
              :key="idx"
              :label="item.ruleName"
              :value="item.ruleId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="暴露率" class="rule-item" prop="exposureRateEvaluationRuleId">
          <el-select placeholder="暂不评价" v-model="form.exposureRateEvaluationRuleId">
            <el-option
              v-for="(item, idx) in scriptList['3']"
              :key="idx"
              :label="item.ruleName"
              :value="item.ruleId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="覆盖率" class="rule-item" prop="coverageRateEvaluationRuleId">
          <el-select placeholder="暂不评价" v-model="form.coverageRateEvaluationRuleId">
            <el-option
              v-for="(item, idx) in scriptList['4']"
              :key="idx"
              :label="item.ruleName"
              :value="item.ruleId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="最大仿真时间(s):" prop="maxSimulationTime">
          <div style="position: relative;">
            <el-input
            placeholder="请输入"
            maxlength="10"
            v-autoTrim="{ obj: form, key: 'maxSimulationTime' }"
            v-model="form.maxSimulationTime"
          >
          </el-input>
            <span style="position: absolute; right: -160px;">(最小是5，最大是10000)</span>
          </div>
         
        </el-form-item>
        <el-form-item label="是否选择GPU:" prop="isChoiceGpu">
          <el-radio v-model="form.isChoiceGpu" label="0">是</el-radio>
          <el-radio v-model="form.isChoiceGpu" label="1">否</el-radio>
        </el-form-item>
      </div>

            <div class="tipBox">
                <div class="tip tipA">
                    <!-- (传感器1：根据车辆自动带出;传感器2：根据车辆自动带出) -->
                    <span v-for="item in sensors" :key="item" v-bind:class="{
                        iconA: item === 'camera',
                        iconB: item === 'ogt',
                        iconC: item === 'lidar',
                        iconE: item === 'gps',
                    }"></span>
                </div>
                <div class="tip">(场景数量：{{ sceneCount }})</div>
                <!-- <div class="tip flexBox">
                    <div>(下次运行时间：XX时XX分XX秒)</div>
                    <div class="tipBtnBox">
                        <el-button type="primary">规则查看</el-button>
                    </div>
                </div> -->
                <div class="tip">(最多可用资源：{{ maxCount }})</div>
                <!-- <div class="tip">(最小是5，最大是10000)</div> -->
            </div>
        </el-form>
        <div class="btns">
            <el-button type="primary" @click="save(false)">保存</el-button>
            <el-button type="primary" @click="save(true)" v-if="this.$route.query.id">另存为</el-button>
            <el-button type="primary" @click="save(false, true)" :disabled="runDisabled">提交</el-button>
            <el-button type="primary" plain @click="cancel">取消</el-button>
        </div>
    </div>
</template>

<script>
//import  from '';
let maxCount = 0 // 用于校验
let validateNum = (rule, value, callback) => {
  !/^(\d+)$/.test(value) && callback(new Error(rule.message))
  if (+value <= 0 || +value > +maxCount) callback(new Error(rule.message))
  callback()
}
let validateNumA = (rule, value, callback) => {
    !/^(\d+)$/.test(value) && callback(new Error(rule.message));
    if (+value < 5 || +value > 10000) callback(new Error(rule.message));
    callback();
};
let validateNumB = (rule, value, callback) => {
  !/^(\d+)$/.test(value) && callback(new Error(rule.message))
  if (+value <= 0) callback(new Error(rule.message))
  callback()
}

export default {
  name: 'manualRunProjectDetail', // 标准化测试详情
  components: {},
  data() {
    return {
      form: {
        id: '',
        projectName: '', // 项目名称
        projectDescribe: '', // 项目描述
        algorithmType: '1', // 算法来源
        algorithm: '', // 选择算法
        algorithmArrayS: '', // 选择算法
        vehicle: '', // 选择车辆
        vehicleArrayS: '', // 选择车辆
        scene: '', // 选择场景
        sceneArrayS: '', // 选择场景
        parallelism: '', // 并行度
        maxSimulationTime: '', // 最大仿真时间
        isChoiceGpu: '0', // 是否选择GPU
        nowRunState: '10', // 运行状态
        complexityEvaluationRuleId: '', // 复杂度
        riskEvaluationRuleId: '', // 危险度
        exposureRateEvaluationRuleId: '', // 暴露率
        coverageRateEvaluationRuleId: '', // 覆盖率
      },
      algorithmList: [], // 算法对应列表
      vehicleList: [], // 车辆对应列表
      sceneList: [], // 场景对应列表
      maxCount: 0, // 最多可用资源
      sceneCount: 0, // 场景数量
      scriptList: {}, // 评价脚本列表
      rules: {
        projectName: [{ required: true, message: '请输入', trigger: 'blur' }],
        projectDescribe: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        algorithmType: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        algorithmArrayS: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        vehicleArrayS: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        sceneArrayS: [{ required: true, message: '请选择', trigger: 'change' }],
        parallelism: [
          { required: true, message: '请输入', trigger: 'blur' },
          // {
          //     validator: validateNum,
          //     message: "请输入不大于最多可用资源的正整数",
          //     trigger: ["blur"],
          // },
        ],
        maxSimulationTime: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            validator: validateNumA,
            message: '请输入不小于5且不大于10000的正整数',
            trigger: ['blur'],
          },
        ],
        isChoiceGpu: [{ required: true, message: '请选择', trigger: 'change' }],
      },
      sensors: [], // 选中车辆后对应的传感器数组
      runDisabled: false, // 若最多可用资源为0，则不可点击"提交"
      props: {
        multiple: false,
        label: 'name',
        value: 'code',
      },
    }
  },

  computed: {},

  methods: {
    async getLists(dropDownType = '') {
      await this.$axios({
        method: 'post',
        url: this.$api.workManagement.selectDropDownByTypeNew,
        data: {
          dropDownType,
          algorithmType: this.form.algorithmType,
        },
      }).then((res) => {
        if (res.code == 200 && res.info) {
          res.info.forEach((item) => {
            if (item.type === '1') {
              // item.dropDownList.forEach((i) => {
              //     if (i.share === "1") i.name = i.name + "(公有)";
              // });

              this.algorithmList = item.dropDownList
            } else if (item.type === '2') {
              // item.dropDownList.forEach((i) => {
              //     if (i.share === "1") i.name = i.name + "(公有)";
              // });

              this.vehicleList = item.dropDownList
            } else if (item.type === '3') {
              // item.dropDownList.forEach((i) => {
              //     if (i.share === "1") i.name = i.name + "(公有)";
              // });

              this.sceneList = item.dropDownList
            }
            // 空表示第一次进，有值表示在切换算法来源，需要清空选择算法的值
            if (dropDownType) {
              this.form.algorithm = ''
              this.form.algorithmArrayS = []
              this.$nextTick(() => {
                // this.$refs.form.clearValidate("algorithm");
                this.$refs.form.clearValidate('algorithmArrayS')
              })
            }
          })
        } else {
          this.$message.error(res.message || '获取信息失败')
        }
      })
    },
    typeChange() {
      this.getLists('1')
    },
    async getMaxSimulationTime() {
      await this.$axios({
        method: 'post',
        url: this.$api.workManagement.selectMaxParallelism,
        data: {},
      }).then((res) => {
        if (res.code == 200 && res.info && res.info != 0) {
          this.maxCount = maxCount = res.info
          if (res.info == -1) {
            this.rules.parallelism.push({
              validator: validateNumB,
              message: '请输入正整数',
              trigger: ['blur'],
            })
          } else {
            this.rules.parallelism.push({
              validator: validateNum,
              message: '请输入不大于最多可用资源的正整数',
              trigger: ['blur'],
            })
          }
        } else if (res.code == 200 && res.info == 0) {
          this.maxCount = maxCount = 0
          this.runDisabled = true
          this.form.parallelism = 0
        } else {
          this.$message.error(res.message || '获取信息失败')
        }
      })
    },
    algorithmSelChange(v) {
      // console.log(v);
      // console.log(this.$refs.cascaderA.getCheckedNodes(true)[0].data.vo);
      let item = this.$refs.cascaderA.getCheckedNodes(true)[0].data.vo
      this.form.algorithm = item.id
    },
    vehicleSelChange(v) {
      let item = this.$refs.cascaderB.getCheckedNodes(true)[0].data.vo
      this.form.vehicle = item.id

      let sensor = item.sensor
      if (!sensor) {
        this.sensors = []
      } else {
        this.sensors = sensor.split(',')
      }

      // let sensor = this.vehicleList.find((i) => i.id === item).sensor;

      // if (!sensor) {
      //     this.sensors = [];
      // } else {
      //     this.sensors = sensor.split(",");
      // }
    },
    sceneSelChange(v) {
      let item = this.$refs.cascaderC.getCheckedNodes(true)[0].data.vo
      this.form.scene = item.id
      this.sceneCount = item.sceneNum

      // this.sceneCount = this.sceneList.find(
      //     (i) => i.id === item
      // ).sceneNum;
    },
    getScriptList() {
      this.$axios({
        method: 'post',
        url: this.$api.sceneLibrary.getScriptListByType,
        data: {
          sceneEvaluationType: ['1', '2', '3', '4'],
        },
      }).then((res) => {
        this.scriptList = res.info
      })
    },
    save(isAdd = false, needChange = false) {
      // isAdd是否强制新增，needChange是否需要改变状态
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (isAdd) {
            // 另存为
            this.form.id = ''
          }

          this.form.nowRunState = '10'

          this.$axios({
            method: 'post',
            url: this.$api.workManagement.addOrUpdateProject,
            data: {
              ...this.form,
            },
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success('保存成功')
              if (needChange) {
                this.form.id = res.info
                this.stateChange()
              } else {
                this.cancel()
              }
            } else {
              this.$message.error(res.message || '保存失败')
            }
          })
        }
      })
    },
    cancel() {
      this.$router.replace({ path: '/manualRunProjectList' })
    },
    stateChange() {
      this.$axios({
        method: 'post',
        url: this.$api.workManagement.updateProjectNowRunState,
        data: {
          id: this.form.id,
          nowRunState: '20',
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success('提交成功')
          this.cancel()
        } else {
          this.$message.error(res.message || '提交失败')
        }
      })
    },
  },

  mounted() {
    if (this.$route.query.id) {
      let id = ''
      this.form.id = id = this.$route.query.id

      if (id) {
        this.$axios({
          method: 'post',
          url: this.$api.workManagement.selectProjectById,
          data: {
            id,
          },
        }).then(async (res) => {
          if (res.code == 200 && res.info) {
            this.form = res.info
            await this.getLists()
            await this.getMaxSimulationTime()
            this.vehicleSelChange(res.info.vehicle)
            this.sceneSelChange(res.info.scene)
          } else {
            this.$message.error(res.message || '获取信息失败')
          }
        })
      }
      this.getScriptList()
    } else {
      this.getLists()
      this.getMaxSimulationTime()
      this.getScriptList()
    }
  },
}
</script>

<style lang='less' scoped>
.el-form {
  width: 60%;
  min-width: 900px;
  padding-top: 60px;
  margin: 0 auto;

  .formItemBox {
    flex: 1;

    /deep/ .el-input,
    .el-select,
    .el-cascader {
      width: 100%;
    }

    .el-cascader {
      height: 32px;
      line-height: 32px;
    }
  }

  .el-textarea {
    height: 96px;
  }

  .tipBox {
    min-width: 270px;
    margin-left: 20px;

    .tip {
      margin-bottom: 22px;
      line-height: 32px;
    }
    .tip1{
      margin-bottom: -100px;
      border: 1px solid black;
    }

    .tipA {
      height: 32px;
      // 按54往上加
      margin-top: 280px;

      .iconA {
        background: url('../../assets/common/image/sensor/001.png') center
          no-repeat;
        background-size: contain;
      }

      .iconB {
        background: url('../../assets/common/image/sensor/002.png') center
          no-repeat;
        background-size: contain;
      }

      .iconC {
        background: url('../../assets/common/image/sensor/003.png') center
          no-repeat;
        background-size: contain;
      }

      .iconD {
        background: url('../../assets/common/image/sensor/004.png') center
          no-repeat;
        background-size: contain;
      }

      .iconE {
        background: url('../../assets/common/image/sensor/005.png') center
          no-repeat;
        background-size: contain;
      }

      span {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-top: 7px;
        margin-right: 6px;
      }
    }

    .tipB {
      padding-top: 54px;
    }

    .tipBtnBox {
      margin-left: 20px;
    }
  }
}
.rule-item {
  margin-left: 60px;
}
.btns {
  padding-top: 30px;
  text-align: center;
}
</style>