scd_tools_ui/src/pages/mission/components/StepMethod.vue

<template>
    <div>
        <div class="bigBox">
            <div style="display: flex;justify-content: flex-start;align-items: center;">
                    <img style="display: block;" src="../../../assets/icon/point.png" alt="">
                    <span style="display: block;font-size: 14px;font-size: 16px;font-weight: 400;">检测详情</span>
                </div>
            <el-steps space="10px" finish-status="success" process-status="wait" direction="vertical">
                <el-step v-for="(step, index) in steps" :status="setStatus(step.status)" :key="index"
                    :description="step.description" :title="step.title">
                    {{ step.content }}
                </el-step>
            </el-steps>
            <!-- <el-button @click="nextStep">下一步</el-button> -->
        </div>
    </div>
</template>
  
<script>
import { ref, onMounted, toRefs, watch } from "vue";
import { Edit, Picture, Upload, Loading } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
export default {
    props: {
        stepList: {
            type: Array,
            required: true,
        }
    },
    setup(props, { emit }) {
        let activeStep = ref(0); // 当前激活的步骤
        let steps = ref([])
        watch(() => props.stepList, (newVal) => {
            steps.value = newVal.map((item, index) => {
                return {
                    title: item.step_name,
                    description: item.state_msg,
                    status: item.state,
                    msg: item.state_msg
                }
            })
        })
        function reload() {
            console.log(steps.value, '组件内');
        }
        function nextStep() {
            if (activeStep.value > 0 && activeStep.value < steps.value.length) {
                const prevStep = steps.value[activeStep.value - 1];
                if (prevStep.status === "2") {
                    activeStep.value++;
                } else {
                    // ElMessage({
                    //     message: prevStep.msg || '前一步骤未完成',
                    //     type: "error"
                    // });
                }
            } else if (activeStep.value === 0) {
                // 如果当前是第一步，直接跳到第二步，或者根据需要处理其他逻辑
                activeStep.value = 1;
            } else {
                console.log("无法进行下一步，索引越界");
            }
        }

        // 2完成，1检测中，0未开始
        function setStatus(num) {
            if (num == 1) {
                return 'wait'
            } else if (num == 2) {
                return 'success'
            } else if (num == 0) {
                return "process"
            } else if (num == 3) {
                return 'error'
            }
        }
        onMounted(() => {
            reload()
            // setInterval(() => {
            //     nextStep()
            // }, 1000);
        })
        return {
            activeStep,
            steps,
            nextStep,
            setStatus,
            Loading,
        };
    },
};
</script>
<style scoped>
/*   */
:deep(.el-step.is-vertical .el-step__title) {
    font-size: 14px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #1A2447;
}
</style>