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

<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="135px" 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="最大仿真时间(s):" prop="maxSimulationTime">
                    <el-input placeholder="请输入" maxlength="10" v-autoTrim="{ obj: form, key: 'maxSimulationTime' }"
                        v-model="form.maxSimulationTime">
                    </el-input>
                </el-form-item>
                <el-form-item label="运行周期:" prop="operationCycle">
                    <el-input placeholder="请输入" maxlength="60" v-autoTrim="{ obj: form, key: 'operationCycle' }"
                        v-model="form.operationCycle">
                    </el-input>
                </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="ruleTip">
            <el-collapse v-model="activeNames">
                <el-collapse-item title="运行周期规则查看" name="1">
                    <!-- <div class="collapseInfo">运行周期规则查看</div> -->
                    <div class="collapseInfo">
                        <span>参考网址：</span>
                        <a href="https://cron.qqe2.com" target="_blank">https://cron.qqe2.com</a>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>

        <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: "autoRunProjectDetail", // 自动化测试详情
    components: {},
    data() {
        return {
            form: {
                id: "",
                projectName: "", // 项目名称
                projectDescribe: "", // 项目描述
                algorithmType: "2", // 算法来源
                algorithm: "", // 选择算法
                algorithmArrayS: "", // 选择算法
                vehicle: "", // 选择车辆
                vehicleArrayS: "", // 选择车辆
                scene: "", // 选择场景
                sceneArrayS: "", // 选择场景
                parallelism: "", // 并行度
                maxSimulationTime: "", // 最大仿真时间
                isChoiceGpu: "0", // 是否选择GPU
                nowRunState: "10", // 运行状态
                operationCycle: "", // 运行周期
            },
            algorithmList: [], // 算法对应列表
            vehicleList: [], // 车辆对应列表
            sceneList: [], // 场景对应列表
            maxCount: 0, // 最多可用资源
            sceneCount: 0, // 场景数量
            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" },
                ],
                maxSimulationTime: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNumA,
                        message: "请输入不小于5且不大于10000的正整数",
                        trigger: ["blur"],
                    },
                ],
                isChoiceGpu: [
                    { required: true, message: "请选择", trigger: "change" },
                ],
                operationCycle: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
            },
            sensors: [], // 选中车辆后对应的传感器数组
            activeNames: [""],
            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) => {
                // res.info = 10;
                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) {
            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(",");
            }
        },
        sceneSelChange(v) {
            let item = this.$refs.cascaderC.getCheckedNodes(true)[0].data.vo;
            this.form.scene = item.id;
            this.sceneCount = item.sceneNum
        },
        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
                            .addOrUpdateAutomaticProject,
                        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: "/autoRunProjectList" });
        },
        stateChange() {
            this.$axios({
                method: "post",
                url: this.$api.workManagement.updateAutomaticRunState,
                data: {
                    id: this.form.id,
                    automaticRunState: "0",
                },
            }).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.selectAutomaticProjectById,
                    data: {
                        id,
                    },
                }).then(async (res) => {
                    if (res.code == 200 && res.info) {
                        this.form = res.info;
                        this.form.algorithmType = "2";
                        await this.getLists();
                        await this.getMaxSimulationTime();
                        this.vehicleSelChange(res.info.vehicle);
                        this.sceneSelChange(res.info.scene);
                    } else {
                        this.$message.error(res.message || "获取信息失败");
                    }
                });
            }
        } else {
            this.getLists();
            this.getMaxSimulationTime();
        }
    },
};
</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;
        }

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

            .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;
        }
    }
}

.ruleTip {
    width: 60%;
    min-width: 900px;
    margin: 0 auto;

    a {
        color: @themeColor;
    }
}

.btns {
    padding-top: 30px;
    text-align: center;
}
</style>