pqs-9100_client/frontend/src/views/home/components/test.vue

<template>

<div class = "test-dialog">
    <div class="dialog-title">    
        <el-progress
            style="width: 80%"
            :percentage="percentage"
            :color="customColors"
          />

            <el-button
              type="primary"
              v-if="!isPause"
              :icon="VideoPause"
              @click="handlePauseTest"
              >暂停检测</el-button
            >
            <el-button
              type="warning"
              v-if="isPause"
              :icon="Refresh"
              @click="handlePauseTest"
              >继续检测</el-button
            >
            <el-button type="danger" :icon="Close" @click="handleFinishTest"
              >停止检测</el-button
            >

    </div>
    <div class="dialog-content">
        <el-table :data="errorData" :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border>
            <el-table-column prop="deviceName" label="检测项目" />
            <el-table-column prop="updataTime" label="被检通道1" />
            <el-table-column prop="ErrorValue" label="被检通道2" />
            <el-table-column prop="Result" label="被检通道3" />
        </el-table>
    </div>
    <div class="dialog-log">
        <el-collapse :v-model="1" accordion>
            <el-collapse-item title="检测日志：" name="1">
                <div>
                    暂无数据，等待检测开始
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</div>


</template>
<script lang="tsx" setup name="test">
import { VideoPause,Refresh,Close } from '@element-plus/icons-vue'

const percentage = ref(0);
const customColors = [
  { color: "#5cb87a", percentage: 100 }, //绿
];
//暂停检测
const isPause = ref<boolean>(false);

const handlePauseTest = () => {
  if (!isPause.value) {

  } else {

  }
  isPause.value = !isPause.value;
};
//完成检测
const handleFinishTest = () => {
  ElMessage.success("完成检测");
};


const errorData = ref([
      {
        deviceName: '额定条件下频率检测42.5Hz',
        updataTime: '√', 
        ErrorValue:'×',
        Result: '/', 
      },
      {
        deviceName: '额定条件下频率检测50Hz',
        updataTime: '/', 
        ErrorValue:'√',
        Result: '×', 
      },
      {
        deviceName: '额定条件下频率检测50.05Hz',
        updataTime: '—', 
        ErrorValue:'—',
        Result: '—', 
      },
      {
        deviceName: '额定条件下频率检测57.5Hz',
        updataTime: '—', 
        ErrorValue:'—',
        Result: '—', 
      },
    ])

const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');

  const props = defineProps({
    testStatus: {
    type: String,
    default: 'wait'
  }
})
const testStatus = toRef(props, 'testStatus');
const ts = ref('');
//监听goods_sn的变化
watch(testStatus, function (newValue, oldValue) {
  ts.value = props.testStatus;
  if(ts.value==='start')
  {
    ts.value = 'process'

    let timer = setInterval(() => {
        if(activeIndex.value < activeTotalNum.value - 2)
            activeIndex.value++
        else if(activeIndex.value === activeTotalNum.value -2)
        {
            activeIndex.value++
            activeIndex.value++
        }
        else 
        {
            clearInterval(timer)
            ts.value = 'success'
        }
        
  }, 1000);
  }
})

const emit = defineEmits(['update:testStatus']);
//监听sn
watch(ts, function (newValue, oldValue) {
  //修改父组件
  emit('update:testStatus',ts.value)
})

</script>
<style scoped>
.test-dialog{
    display: flex;
    flex-direction: column;
}

.dialog-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right:10px;
    margin-bottom:10px;
}

</style>