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

<template>
  <el-dialog v-model='dialogVisible' title="系数校准"  width="1200px" height="1000px">
    <div class="test-dialog" >
      <div class="dialog-content">

        <div class="right-title">
          <!-- <div>系数校准表</div> -->
          <div>{{ outputDsc }}</div>
          <div>
            <span style="  font-size: 18px;font-weight: 600;">
              设备已合格 <span style="color: #67C23A">{{ qualified }}</span> 台/共 <span style="color: green">{{ total }}</span>
              台
            </span>
            <!-- <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="240001" v-if="activeIndex > 0">
              <channelsTestTable :tableData="tableData1"></channelsTestTable>
            </el-tab-pane>
            <el-tab-pane label="240002" v-if="activeIndex > 1">
              <template #label>
                <span class="custom-tabs-label">
                  <span>240002</span>
                  <el-icon>
                    <Failed />
                  </el-icon>
                </span>
              </template>
              <channelsTestTable :tableData="tableData2"></channelsTestTable>
            </el-tab-pane>
            <el-tab-pane label="240003" v-if="activeIndex > 2">
              <channelsTestTable :tableData="tableData3"></channelsTestTable>
            </el-tab-pane>
            <el-tab-pane label="240004" v-if="activeIndex > 3">
              <channelsTestTable :tableData="tableData4"></channelsTestTable>
            </el-tab-pane>
          </el-tabs>

        </div>
      </div>

    </div>
      <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">开始系数校准</el-button>
      </div>
      </template>
  </el-dialog>
       
</template>
<script lang="tsx" setup name="channelsTest">
import { SuccessFilled, Failed } from '@element-plus/icons-vue'
import { ref, toRef, watch } from 'vue'

const activeIndex = ref(0)
const activeTotalNum = ref(4)
const qualified = ref(0)
const outputDsc = ref('电压误差为：±0.1Un%； 电流误差为：±0.5%')
const total = ref(0)
const dialogVisible = ref(false)
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: '240001',
    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: '240001',
    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: '240001',
    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: '240001',
    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: '240002',
    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: '240002',
    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: '240002',
    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: '240002',
    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: '240003',
    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: '240003',
    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: '240003',
    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: '240003',
    MonitorIdx: 4,
    Ua: 1.0003,
    Ub: 1.0003,
    Uc: 0.0096,
    Ia: 1.0003,
    Ib: 1.0003,
    Ic: 1.0008,
    Result: '合格',
  },
])
const tableData4 = ref([
  {
    id: '1',
    updateTime: '2024-10-10 10:30:00',
    deviceName: '240004',
    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: '240004',
    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: '240004',
    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: '240004',
    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 open = () => {
    dialogVisible.value = true;
    activeIndex.value = 1
  }

// 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++
//         if(activeIndex.value > 1)
//         qualified.value = activeIndex.value -1;//演示效果，实际运行时使用后端传来的真实数据即可
//         else
//         qualified.value = activeIndex.value;
//       }
//       else if (activeIndex.value === activeTotalNum.value) {
//         clearInterval(timer)
//         ts.value = 'success'
//       }
//       else {
//         clearInterval(timer)
//         ts.value = 'success'
//       }

//       total.value = activeTotalNum.value
//     }, 1000);
//   }
// })



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


watch(activeIndex, function (newValue, oldValue) {

if(activeIndex.value === 1)
{
  outputDsc.value = "电压误差为：±0.1Un%； 电流误差为：±0.5%；当前源输出为：Ua=Ub=Uc=57.74V Ia=Ib=Ic=1A";
}

})

const handleSubmit = () => {
    let timer = setInterval(() => {
      if (activeIndex.value < activeTotalNum.value) {
        activeIndex.value++
        if(activeIndex.value > 1)
        qualified.value = activeIndex.value -1;//演示效果，实际运行时使用后端传来的真实数据即可
        else
        qualified.value = activeIndex.value;
      }
      else if (activeIndex.value === activeTotalNum.value) {
        clearInterval(timer)
      }
      else {
        clearInterval(timer)
      }

      total.value = activeTotalNum.value
    }, 1000);
  
};

 // 对外映射
 defineExpose({ open })
 

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

.dialog-content {
  height: 472px;
}

.el-tabs--border-card {
  height: 425px;
}
.el-icon svg {
  color: #ff7171;
}
</style>