KlDetectProgress

考拉检测进度组件

效果

<script setup lang="ts">
import { ref, onMounted } from 'vue';
const detectStates = ref([
  { name: '来料', state: 'end', progress: 0, info: '' },
  { name: '定位', state: 'end', progress: 0, info: '' },
  { name: '图像', state: 'ongoing', progress: 0, info: '' },
  { name: '外观', state: 'error', progress: 0, info: '图像异常' },
  { name: '下料', state: 'wait', progress: 0, info: '' },
]);

// 因为`setInterval`活跃，直接写入最顶层`npm run docs:build`进程不能退出`
onMounted(() => {
  const timer = setInterval(() => {
    detectStates.value[2].progress += 1;
    if (detectStates.value[2].progress < 100) return;

    clearInterval(timer);
    detectStates.value[2].state = 'end';
  }, 500)
})
</script>
<template>
  <div class="m20" style="width: 500px;">
    <KlDetectProgress :detectStates="detectStates" />
  </div>
</template>

Attributes

属性	说明	类型	默认值
detectStates	检测进度项列表	DetectState[]	-

interface DetectState {
  // 事件名称
  name: string,
  // 事件状态 wait|ongoing|end|error
  state: string,
  // 事件进度 0-100
  progress: number,
  // 事件说明
  info: string,
}