CameraMachine/frontend/src/components/check/index.vue

<template>
  <el-dialog
    v-model="visible"
    :title="title"
    :close-on-click-modal="false"
    width="500px"
    class="hardware-check-dialog"
  >
    <div class="hardware-check-container">
      <el-timeline>
        <!-- Step 1 -->
        <el-timeline-item
          :type="'primary'"
          :hollow="true">
          <template #dot>
            <img src="@/assets/images/check/icon1.png" class="custom-timeline-icon" />
          </template>
          <div class="step-content">
            <div class="step-title">
              <template v-if="checkLoading">正在初始化检测硬件......</template>
              <template v-else-if="checkSuccess">硬件检测完成</template>
              <template v-else>初始化检测硬件失败</template>
            </div>
            <el-progress 
              :percentage="progress" 
              :colors="['#2FB0FF', '#B863FB']"
              :stroke-width="8"
              v-if="checkLoading"
            ></el-progress>
            <div class="check-error-result" v-else-if="!checkSuccess">失败的原因，比如请检查硬件链接</div>
          </div>
        </el-timeline-item>
        
        <!-- Step 2 -->
        <el-timeline-item
          :type="'primary'"
          :hollow="true">
          <template #dot>
            <img src="@/assets/images/check/icon2.png" class="custom-timeline-icon" />
          </template>
          <div class="step-content">
            <div class="step-title">自我检查</div>
            <div class="check-result">
              <p>补光灯电源和链接器是否正常连上。</p>
              <p>请检查红外线器是否正常显示。</p>
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
    <template #footer v-if="!checkLoading">
        <div class="flex" v-if="!checkSuccess">
            <div class="check-btn" @click="reCheck">重新监测</div>
        </div>
        <div class="flex" v-else>
            <div class="check-btn">正常，开始下一步</div>
        </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch, onBeforeUnmount, nextTick } from 'vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '检测硬件'
  }
});
const checkSuccess = ref(false);
const checkLoading = ref(false)
const emit = defineEmits(['update:modelValue', 'confirm']);

const progress = ref(80);
let timer = null;

const visible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit('update:modelValue', val);
  }
});

function startProgress() {
  progress.value = 0;
  checkLoading.value = true;
  timer = setInterval(() => {
    if (progress.value < 80) {
      progress.value += 1;
    } else {
      checkSuccess.value = false;
      clearInterval(timer);
    }
  }, 50);
}

function reCheck() {
    startProgress();
}


function handleConfirm() {
  emit('confirm');
  visible.value = false;
}

watch(visible, (val) => {
  if (val) {
    nextTick(() => {
      startProgress();
    });
  } else {
    clearInterval(timer);
  }
});

onBeforeUnmount(() => {
  clearInterval(timer);
});
</script>

<style lang="scss" scoped>
.hardware-check-container {
  padding: 20px 0;
}

.step-content {
  flex: 1;
}

.step-title {
font-weight: 600;
font-size: 14px;
color: #000000;
  margin-bottom: 15px;
  padding-top: 4px;
  text-align: left;
}

.progress-text {
  text-align: right;    
  margin-top: 5px;
  color: #606266;
}

.check-result {
    color: rgba(0,0,0,0.45);
  text-align: left;
  p {
    margin: 8px 0;
  }
}

:deep(.el-progress-bar__inner) {
  background-image: linear-gradient(to right, #409EFF, #7e57c2);
}
.custom-timeline-icon{
    width: 24px;
    height: 24px;
    position: relative;
    left: -7px;
}
.check-btn{
    width: 100px;
    height: 40px;
    background: linear-gradient( 135deg, #2FB0FF 0%, #B863FB 100%);
    border-radius: 4px;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    line-height: 40px;
}
.check-error-result{
    font-size: 14px;
    text-align: left;
    color: #FF4C00;
}
</style>