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

<template>
  <div>
<div class = "test-dialog">

  <div class="dialog-content">

    <div class="right-title">    
          <!-- <div>系数校准表</div> -->
          <div>当前源输出为：Ua=Ub=Uc=57.74V Ia=Ib=Ic=1A； 电压误差为：±0.1Un%； 电流误差为：±0.5%</div>
          <div>
              <el-button type="primary" loading v-if="activeIndex > 0 && activeIndex < activeTotalNum">通道系数已校准3台/共3台</el-button> 
              <el-button type="primary" :disabled="true" v-if="activeIndex === activeTotalNum">通道系数已校准3台/共3台</el-button>
          </div>
      </div>
      <div class="right-content">
        <el-tabs type="border-card">
          <el-empty description="暂无数据，等待检测开始"  v-if="activeIndex === 0"/>
          <el-tab-pane label="被检设备1" v-if="activeIndex > 0"> 
            <channelsTestTable
            :tableData="tableData1"
            ></channelsTestTable>
          </el-tab-pane>
          <el-tab-pane label="被检设备2" v-if="activeIndex > 1 ">
            <template #label> 
              <span class="custom-tabs-label">
                <span>被检设备2</span>
                <el-icon><Failed /></el-icon>
              </span>
            </template>
            <channelsTestTable
            :tableData="tableData2"></channelsTestTable>
          </el-tab-pane>
          <el-tab-pane label="被检设备3" v-if="activeIndex > 2 ">
            <channelsTestTable
            :tableData="tableData3"></channelsTestTable>
          </el-tab-pane>
      </el-tabs>

      </div>
  </div>

</div>
  </div>

</template>
<script lang="tsx" setup name="channelsTest">
import { SuccessFilled,Failed } from '@element-plus/icons-vue'

const activeIndex = ref(0)
const activeTotalNum = ref(3)


const activities = [
{
  content: '开始检测',
  timestamp: '2018-04-12 20:46',
  size: 'large',
  color: '#0bbd87',
  icon: SuccessFilled,
},
{
  content: 'GPS上送时刻',
  timestamp: '2018-04-03 20:46',
  hollow: true,
},
{
  content: '设备最早上送时刻',
  timestamp: '2018-04-03 20:46',
  hollow: true,
},
{
  content: '设备最晚上送时刻',
  timestamp: '2018-04-03 20:46',
  hollow: true,
},
{
  content: '检测结束',
  timestamp: '2018-04-03 20:46',
  hollow: true,
},
]
const tableData1 = ref([
    {
      id: '1',
      updateTime: '2024-10-10 10:30:00', 
      deviceName:'被检设备1',
      MonitorIdx: 1, 
      Ua:1.0003,
      Ub:1.0003,
      Uc:0.0096,
      Ia:1.0003,
      Ib:1.0003,
      Ic:1.0008,
      Result: '合格', 
    },
    {
      id: '2',
      updateTime: '2024-10-10 10:30:00', 
      deviceName:'被检设备1',
      MonitorIdx: 2, 
      Ua:1.0003,
      Ub:1.0003,
      Uc:0.0096,
      Ia:1.0003,
      Ib:1.0003,
      Ic:1.0008,
      Result: '合格', 
    },
    {
      id: '3',
      updateTime: '2024-10-10 10:30:00', 
      deviceName:'被检设备1',
      MonitorIdx: 3, 
      Ua:1.0003,
      Ub:1.0003,
      Uc:0.0096,
      Ia:1.0003,
      Ib:1.0003,
      Ic:1.0008,
      Result: '合格', 
    },
    {
      id: '4',
      updateTime: '2024-10-10 10:30:00', 
      deviceName:'被检设备1',
      MonitorIdx: 4, 
      Ua:1.0003,
      Ub:1.0003,
      Uc:0.0096,
      Ia:1.0003,
      Ib:1.0003,
      Ic:1.0008,
      Result: '合格', 
    },
  ])
  const tableData2 = ref([
    {
      id: '1',
      updateTime: '2024-10-10 10:30:00', 
      deviceName:'被检设备2',
      MonitorIdx: 1, 
      Ua:1.0003,
      Ub:1.0003,
      Uc:0.0096,
      Ia:1.0003,
      Ib:1.0003,
      Ic:1.0008,
      Result: '合格', 
    },
    {
      id: '2',
      updateTime: '2024-10-10 10:30:00', 
      deviceName:'被检设备2',
      MonitorIdx: 2, 
      Ua:1.0003,
      Ub:1.0003,
      Uc:0.0096,
      Ia:1.0003,
      Ib:1.0003,
      Ic:1.0008,
      Result: '不合格', 
    },
    {
      id: '3',
      updateTime: '2024-10-10 10:30:00', 
      deviceName:'被检设备2',
      MonitorIdx: 3, 
      Ua:1.0003,
      Ub:1.0003,
      Uc:0.0096,
      Ia:1.0003,
      Ib:1.0003,
      Ic:1.0008,
      Result: '合格', 
    },
    {
      id: '4',
      updateTime: '2024-10-10 10:30:00', 
      deviceName:'被检设备2',
      MonitorIdx: 4, 
      Ua:1.0003,
      Ub:1.0003,
      Uc:0.0096,
      Ia:1.0003,
      Ib:1.0003,
      Ic:1.0008,
      Result: '不合格', 
    },
  ])
  const tableData3 = ref([
    {
      id: '1',
      updateTime: '2024-10-10 10:30:00', 
      deviceName:'被检设备3',
      MonitorIdx: 1, 
      Ua:1.0003,
      Ub:1.0003,
      Uc:0.0096,
      Ia:1.0003,
      Ib:1.0003,
      Ic:1.0008,
      Result: '合格', 
    },
    {
      id: '2',
      updateTime: '2024-10-10 10:30:00', 
      deviceName:'被检设备3',
      MonitorIdx: 2, 
      Ua:1.0003,
      Ub:1.0003,
      Uc:0.0096,
      Ia:1.0003,
      Ib:1.0003,
      Ic:1.0008,
      Result: '合格', 
    },
    {
      id: '3',
      updateTime: '2024-10-10 10:30:00', 
      deviceName:'被检设备3',
      MonitorIdx: 3, 
      Ua:1.0003,
      Ub:1.0003,
      Uc:0.0096,
      Ia:1.0003,
      Ib:1.0003,
      Ic:1.0008,
      Result: '合格', 
    },
    {
      id: '4',
      updateTime: '2024-10-10 10:30:00', 
      deviceName:'被检设备3',
      MonitorIdx: 4, 
      Ua:1.0003,
      Ub:1.0003,
      Uc:0.0096,
      Ia:1.0003,
      Ib:1.0003,
      Ic:1.0008,
      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)
          activeIndex.value++
      else if(activeIndex.value === activeTotalNum.value)
      {
          clearInterval(timer)
          ts.value = 'success'
      }
      else 
      {
          clearInterval(timer)
          ts.value = 'success'
      }
      
}, 1000);
}
})
// watch(activeIndex, function (newValue, oldValue) {

// if(activeIndex.value === 1)
// {
//   activities.value.length = 0;
//   activities.value.push({
//     content: '开始检测',
//     timestamp: '2018-04-12 20:46',
//     size: 'large',
//     color: '#0bbd87',
//     icon: SuccessFilled,
//   });
// }
// if(activeIndex.value === 2)
// {
//   activities.value.push({
//     content: 'GPS上送时刻',
//     timestamp: '2018-04-03 20:46',
//     color: '#0bbd87',
//     icon: SuccessFilled,
//     size: 'large',
//   });
// }
// if(activeIndex.value === 3)
// {
//   activities.value.push({
//     content: '设备最早上送时刻',
//     timestamp: '2018-04-03 20:46',
//     color: '#0bbd87',
//     icon: SuccessFilled,
//     size: 'large',
//   });

//   deviceOperatorData.value.length = 0;
//   deviceOperatorData.value = deviceData.value;
// }
// if(activeIndex.value > 3)
// {
//   activities.value.push({
//     content: '设备最晚上送时刻',
//     timestamp: '2018-04-03 20:46',
//     color: '#0bbd87',
//     icon: SuccessFilled,
//     size: 'large',
//   });
//   activities.value.push({
//     content: '检测结束',
//     timestamp: '2018-04-03 20:46',
//     color: '#0bbd87',
//     icon: SuccessFilled,
//     size: 'large',
//   });
// }
// })

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

</script>
<style scoped>
  .right-title{
      display: flex;
      flex-direction: row; /* 横向排列 */
      justify-content: space-between;
      margin-bottom: 10px;
  }
  .right-content{
    max-height: 400px;
  }

  .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>