AIManage/src/views/simulationEvaluation/addTask.vue

<template>
    <div class="app-container simulation-add-task">
        <el-card class="card-step">
            <el-steps style="width: 900px;max-width: 900px;" :space="200" :active="active" finish-status="success">
                <el-step title="Step1" :class="active == 0 ? 'active' : ''" description="评估基本信息填写" />
                <el-step title="Step2" :class="active == 1 ? 'active' : ''" description="选择模型" />
                <el-step title="Step3" :class="active == 2 ? 'active' : ''" description="选择设备" />
                <el-step title="Step4" :class="active == 3 ? 'active' : ''" description="评估数据集选择" />
            </el-steps>
        </el-card>
        <div style="margin-bottom:100px;" class="card-content">
            <addStep1 ref="step1" v-if="active == 1" />
            <addStep2 ref="step2" v-if="active == 2"/>
            <addStep3 ref="step3" v-if="active == 3"  :modelInfo="modelInfo"/>
            <addStep4 ref="step4" v-if="active == 4" />
        </div>
        <el-card class="card-footer">
            <el-button type="primary" v-if="active == 3" @click="doCompile">编译部署</el-button>
            <el-button type="primary" v-if="active == 4" @click="doStart">开始</el-button>
            <el-button type="primary" v-if="active > 0 && active <= 4" @click="doPrev">上一步</el-button>
            <el-button @click="doNext" v-if="active < 4">下一步</el-button>
        </el-card>
    </div>
</template>

<script setup>
import addStep1 from './addStep1.vue'
import addStep2 from './addStep2.vue'
import addStep3 from './addStep3.vue'
import addStep4 from './addStep4.vue'
const router = useRouter();
const active = ref(1)
const step1=ref()
const step2=ref()
const step3=ref()
const step4=ref()
let taskInfo=reactive({});
let modelInfo=reactive({});
let devices=reactive([]);
let datas=reactive({});

const doStart = () => {
    let tmp=step4.value.checkForm();
        if(tmp){
            datas=tmp;
            ElMessage.success("开始执行!");
            setTimeout(()=>{
                router.replace({ path: "/simulationEvaluation/execution" });
            },1000);
        }else{
            ElMessage.error("请选择数据集!");
        }
}
const doCompile = () => {
    let tmp=step3.value.checkForm();
        if(tmp){
            devices=tmp;
            ElMessage.success("开始编译部署!");
        }else{
            ElMessage.error("请选择设备!");
        }
}
const doPrev = () => {
    active.value--;
}
const doNext = () => {
    if(active.value==1){
        step1.value.checkForm().then(d=>{
            if(d){
                taskInfo=step1.value.getFormData();
                active.value++;
            }
        });
    }else if(active.value==2){
        let tmp=step2.value.checkForm();
        if(tmp){
            modelInfo=tmp;
            active.value++;
        }else{
            ElMessage.error("请选择模型!");
        }
    }else if(active.value==3){
        let tmp=step3.value.checkForm();
        if(tmp){
            devices=tmp;
            active.value++;
        }else{
            ElMessage.error("请选择设备!");
        }
    }else if(active.value==4){
        
    }else{
        active.value++;
    }
}
</script>
<style lang='scss'>
.simulation-add-task {
    .card-step {
        .el-card__body {
            padding-left: 100px;
            display: flex;
            justify-content: center;

            .el-steps {
                flex-grow: 1;
                margin-left: 100px;

                .el-step {
                    &.active {}

                    .el-step__main {
                        position: relative;

                        .el-step__title {
                            display: inline-block;
                            width: 150px;
                            text-align: center;
                            padding: 0px;
                            position: relative;
                            left: -65px;
                        }

                        .el-step__description {
                            display: inline-block;
                            width: 150px;
                            text-align: center;
                            padding: 0px;
                            position: relative;
                            left: -65px;
                        }
                    }
                }
            }
        }
    }

    .card-content {
        .el-card__header {
            padding: 8px 12px;
            display: flex;
            align-items: center;
            font-weight: bold;
        }
    }

    .card-footer {
        position: fixed;
        width: calc(100% - 215px);
        bottom: 0px;

        :deep(.el-card__body) {
            padding: 10px;

            .el-pagination {
                justify-content: end;
            }
        }
    }
}
</style>