TxProject/src/views/CurrentDiagnosis/index.vue

<template>
  <div>
    <!-- header -->
    <div class="flex items-center justify-center">
      <div class="flex-1">
        <el-steps
          space="14%"
          :active="active"
          finish-status="success"
          align-center
        >
          <el-step title="数据预处理"></el-step>
          <el-step title="故障初步定为"></el-step>
          <el-step title="故障定位单机"></el-step>
          <el-step title="系统诊断详情"></el-step>
          <el-step title="单机故障诊断"></el-step>
          <el-step title="单机诊断详情"></el-step>
          <el-step title="生成诊断报告"></el-step>
        </el-steps>
      </div>
      <div>
        <el-button size="small">查看原始数据</el-button>
        <el-button size="small" type="primary" @click="prevStep"
          >上一步</el-button
        >
        <el-button size="small" type="primary" @click="nextStep"
          >下一步</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "currentDiagosis",
  data() {
    return {
      active: 1,
    };
  },
  methods: {
    nextStep() {
      this.active++;
    },
    prevStep() {
      if (this.active <= 1) return;
      this.active--;
    },
  },
};
</script>
<style scoped lang="scss"></style>