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

<template>
  <el-dialog
    v-model="visible"
    :title="title"
    :close-on-click-modal="false"
    :show-close="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="checkInfoStore.getProgress"
              :colors="['#2FB0FF', '#B863FB']"
              :stroke-width="8"
              v-if="checkLoading"
            ></el-progress>
            <div class="check-error-result" v-else-if="!checkSuccess">失败的原因，{{ checkInfoStore.getErrorMsg }}</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 cu-p" @click="reCheck">重新监测</div>
        </div>
        <div class="flex" v-else>
            <div class="check-btn cu-p" style="width: 180px" @click="confirm()">正常，开始下一步</div>
        </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch, onBeforeUnmount, nextTick, watchEffect } from 'vue';
import useUserInfo from "@/stores/modules/user";
import checkInfo from "@/stores/modules/check";
import client from "@/stores/modules/client";
const clientStore = client();

/**
 * 定义组件的 props。
 * @param {Object} props
 * @param {Boolean} props.modelValue - 控制对话框显示状态的双向绑定值，默认为 false。
 * @param {String} props.title - 对话框标题，默认为 '检测硬件'。
 */
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '检测硬件'
  }
});


// 初始化用户信息状态管理
const useUserInfoStore = useUserInfo()
const checkInfoStore = checkInfo()

// 检测是否成功的状态
const checkSuccess = ref(false);

// 检测加载状态
const checkLoading = ref(true);

// 定义事件发射器，用于更新父组件的 modelValue 和触发 confirm 事件
const emit = defineEmits(['update:modelValue', 'confirm']);

// 检测次数计数器
const checkCount = ref(0);

// 进度条的当前进度值

// 定时器变量，用于控制进度条的递增
let timer = null;

// 控制组件可见性的状态
const visible = ref(false);


/**
 * 开始进度条的递增逻辑。
 * 该函数会重置进度条并启动定时器，逐步增加进度值直到达到 80。
 */
function startProgress() {
  checkLoading.value = true;
  checkInfoStore.reCheckAction()
}

/**
 * 重新执行检测逻辑。
 * 调用 startProgress 函数以重新开始进度条。
 */
function reCheck() {
  startProgress()
 // checkInfoStore.reCheckAction()
}

// 初始化客户端状态管理

/**
 * 监听用户信息和检测次数的变化，自动触发相关逻辑。
 * 当用户信息存在且检测次数为 0 时，设置组件可见性为 true，
 * 并尝试连接 WebSocket 和发送消息。
 */
watchEffect(async ()=>{
  if( useUserInfoStore.userInfo.id && checkCount.value === 0){
    if(clientStore.isClient){
      visible.value = true
      //python 启动有延时，延迟2秒执行
      setTimeout(()=>{

        startProgress()
      },2000)
    }
    checkCount.value++;
  }
})

watchEffect(async ()=>{
  if(checkInfoStore.getProgress === 100 ){
    checkLoading.value = false;
    checkSuccess.value = true;
  }
})




watchEffect(async ()=>{
  if( checkInfoStore.getErrorMsg){
    checkLoading.value = false;
    checkSuccess.value = false;
  }
})

watchEffect(async ()=>{
  if( checkInfoStore.getProgress   === 1){
    checkLoading.value = false;
    checkSuccess.value = true;
  }
})


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

</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>