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="simulationMageGroupId">
					<el-select v-model="form.simulationMageGroupId">
						<el-option v-for="item in simulationMageGroup" :label="item.groupName" :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">(仿真镜像组数量：{{ simulationMageGroup.length }})</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 {
				simulationMageGroup: [],
				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'
					}],
					simulationMageGroupId:[{
						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 || '提交失败')
					}
				})
			},

			getSimulationMageGroup() {
				this.$axios({
					method: 'post',
					url: this.$api.workManagement.selectAllSimulationMageGroupList,
					data: {},
				}).then((res) => {
					if (res.code == 200) {
						this.simulationMageGroup = res.info
					} 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();
				this.getSimulationMageGroup();
			} else {
				this.getLists()
				this.getMaxSimulationTime()
				this.getScriptList()
				this.getSimulationMageGroup();
			}
		},
	}
</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>