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

<template>
  <el-dialog v-model='dialogVisible' title="系数校准"  v-bind="dialogBig" width="1400px" @close="handleCancel">
    <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="container">
            <div class="dialog-left">
              <el-steps direction="vertical" :active="active" :process-status="currentStepStatus" finish-status="success">
                <el-step title="开始"  />
                <el-step title="大电压/电流下装"/>
                <el-step>
                  <template #title>
                      <span>源输出为：</span><br/>
                      <span>Ua=Ub=Uc=57.74V</span><br/>
                      <span>Ia=Ib=Ic=1A</span>
                  </template>
                </el-step>
                <el-step title="小电压/电流下装"/>
                <el-step>
                  <template #title>
                      <span>源输出为：</span><br/>
                      <span>Ua=Ub=Uc=57.74V</span><br/>
                      <span>Ia=Ib=Ic=1A</span>
                  </template>
                </el-step>
                <el-step title="结束"/>
              </el-steps>
            </div>
            <div class="right-content">
          
              <el-tabs type="border-card">
                <div v-if="activeIndex > 0">
                <el-tab-pane v-for="(device, index) in name.slice(0, activeIndex )" :key="index" :label="device">
                  <template #label>
                    <span class="custom-tabs-label">
                      <span>{{ device }}</span>
                      <el-icon v-if="errorStates[index]">
                        <Failed />
                      </el-icon>
                    </span>
                  </template>
                  <channelsTestTable :tableData="getTableDataForChannel(index)"></channelsTestTable>
                </el-tab-pane>
              </div>
              <el-empty description="暂无数据，等待检测开始" v-if="activeIndex === 0" />
            </el-tabs>
              
              <!-- <el-tabs type="border-card">
                <el-empty description="暂无数据，等待检测开始" v-if="activeIndex === 0" />
                <el-tab-pane label="240001" v-if="activeIndex > 0">
                  <template #label>
                    <span class="custom-tabs-label">
                      <span>240001</span>
                      <el-icon>
                        <Failed />
                      </el-icon>
                    </span>
                  </template>
                  <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>
    </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 { type Device } from '@/api/device/interface/device';
import { SuccessFilled, Failed, Message, MessageBox } from '@element-plus/icons-vue'
import { type Ref, ref, toRef, watch } from 'vue'
 import {dialogBig} from '@/utils/elementBind'
import { ElMessage, ElMessageBox } from 'element-plus';
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 active = ref(0)
let intervalId: NodeJS.Timeout | null = null;
  const name = ref<string[]>([])//系数校准所选设备名字数组
  const channel = ref<number[]>([])//系数校准所选设备通道数组
// 在 setup 函数中
const errorStates = ref(new Array(name.value.length).fill(false));


// 定义 TableDataItem 接口
interface TableDataItem {
  id: string;
  deviceName?: string;
  MonitorIdx: number;
  UaData?: number | string;
  UaChannel?: number | string;
  UbData?: number | string;
  UbChannel?: number | string;
  UcData?: number | string;
  UcChannel?: number | string;
  IaData?: number | string;
  IaChannel?: number | string;
  IbData?: number | string;
  IbChannel?: number | string;
  IcData?: number | string;
  IcChannel?: number | string;
  Result?: string | string;
  updateTime?: string;
}


// 定义每种状态的数据模板
const dataTemplates = [
  {
    deviceName: '大电压大电流1',
    UaData: 57.74,
    UaChannel: 1.0003,
    UbData: 57.74,
    UbChannel: 1.0003,
    UcData: 57.74,
    UcChannel: 1.0003,
    IaData: 5,
    IaChannel: 1.0001,
    IbData: 5,
    IbChannel: 1.0001,
    IcData: 5,
    IcChannel: 1.0001,
  },
  {
    deviceName: '小电压小电流1',
    UaData: 57.74,
    UaChannel: 1.0003,
    UbData: 57.74,
    UbChannel: 1.0003,
    UcData: 57.74,
    UcChannel: 1.0003,
    IaData: 5,
    IaChannel: 1.0001,
    IbData: 5,
    IbChannel: 1.0001,
    IcData: 5,
    IcChannel: 1.0001,
  },
  {
    deviceName: '大电压大电流2',
    UaData: 57.74,
    UaChannel: '合格',
    UbData: 57.74,
    UbChannel: '合格',
    UcData: 57.74,
    UcChannel: '合格',
    IaData: 5,
    IaChannel: '合格',
    IbData: 5,
    IbChannel: '合格',
    IcData: 5,
    IcChannel: '合格',
  },
  {
    deviceName: '小电压小电流2',
    UaData: 57.74,
    UaChannel: '合格',
    UbData: 57.74,
    UbChannel: '合格',
    UcData: 57.74,
    UcChannel: '合格',
    IaData: 5,
    IaChannel: '合格',
    IbData: 5,
    IbChannel: '合格',
    IcData: 5,
    IcChannel: '合格',
  },
];

// 定义每种状态的数据模板
const dataTemplates2 = [
  {
    deviceName: '大电压大电流1',
    UaData: 57.74,
    UaChannel: 1.0003,
    UbData: 57.74,
    UbChannel: 1.0003,
    UcData: 57.74,
    UcChannel: 1.0003,
    IaData: 5,
    IaChannel: 1.0001,
    IbData: 5,
    IbChannel: 1.0001,
    IcData: 5,
    IcChannel: 1.0001,
  },
  {
    deviceName: '小电压小电流1',
    UaData: 57.74,
    UaChannel: 1.0003,
    UbData: 57.74,
    UbChannel: 1.0003,
    UcData: 57.74,
    UcChannel: 1.0003,
    IaData: 5,
    IaChannel: 1.0001,
    IbData: 5,
    IbChannel: 1.0001,
    IcData: 5,
    IcChannel: 1.0001,
  },
  {
    deviceName: '大电压大电流2',
    UaData: 57.74,
    UaChannel: '不合格',
    UbData: 57.74,
    UbChannel: '合格',
    UcData: 57.74,
    UcChannel: '合格',
    IaData: 5,
    IaChannel: '合格',
    IbData: 5,
    IbChannel: '合格',
    IcData: 5,
    IcChannel: '合格',
  },
  {
    deviceName: '小电压小电流2',
    UaData: 57.74,
    UaChannel: '合格',
    UbData: 57.74,
    UbChannel: '合格',
    UcData: 57.74,
    UcChannel: '合格',
    IaData: 5,
    IaChannel: '不合格',
    IbData: 5,
    IbChannel: '合格',
    IcData: 5,
    IcChannel: '合格',
  },
];

// 更新错误状态的方法
const updateErrorState = (index: number, hasError: boolean) => {
  errorStates.value[index] = hasError;
};

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<TableDataItem[]>([
  {
    id: '1',
    deviceName: '大电压大电流1',
    MonitorIdx: 1,
    UaData: 57.74,
    UaChannel: 1.0003,
    UbData: 57.74,
    UbChannel: 1.0003,
    UcData: 57.74,
    UcChannel: 1.0003,
    IaData: 5,
    IaChannel: 1.0001,
    IbData: 5,
    IbChannel: 1.0001,
    IcData: 5,
    IcChannel: 1.0001,
  },
  {
    id: '1',
    deviceName: '大电压大电流',
    MonitorIdx: 1,
    UaData: 57.74,
    UaChannel: 1.0003,
    UbData: 57.74,
    UbChannel: 1.0003,
    UcData: 57.74,
    UcChannel: 1.0003,
    IaData: 5,
    IaChannel: 1.0001,
    IbData: 5,
    IbChannel: 1.0001,
    IcData: 5,
    IcChannel: 1.0001,
  },
  {
    id: '1',
    deviceName: '小电压小电流',
    MonitorIdx: 1,
    UaData: 57.74,
    UaChannel: '合格',
    UbData: 57.74,
    UbChannel: '合格',
    UcData: 57.74,
    UcChannel: '合格',
    IaData: 5,
    IaChannel: '合格',
    IbData: 5,
    IbChannel: '合格',
    IcData: 5,
    IcChannel: '合格',
  },
  {
    id: '1',
    deviceName: '小电压小电流',
    MonitorIdx: 1,
    UaData: 57.74,
    UaChannel: "合格",
    UbData: 57.74,
    UbChannel: '合格',
    UcData: 57.74,
    UcChannel: '合格',
    IaData: 5,
    IaChannel: '合格',
    IbData: 5,
    IbChannel: '合格',
    IcData: 5,
    IcChannel: '合格',
  },
  {
    id: '2',
    deviceName: '240001',
    MonitorIdx: 2,
    UaData: 57.74,
    UaChannel: 1.0003,
    UbData: 57.74,
    UbChannel: 1.0003,
    UcData: 57.74,
    UcChannel: 1.0003,
    IaData: 5,
    IaChannel: 1.0001,
    IbData: 5,
    IbChannel: 1.0001,
    IcData: 5,
    IcChannel: 1.0001,
  },
  {
    id: '2',
    deviceName: '240001',
    MonitorIdx: 2,
    UaData: 57.74,
    UaChannel: 1.0003,
    UbData: 57.74,
    UbChannel: 1.0003,
    UcData: 57.74,
    UcChannel: 1.0003,
    IaData: 5,
    IaChannel: 1.0001,
    IbData: 5,
    IbChannel: 1.0001,
    IcData: 5,
    IcChannel: 1.0001,
  },
  {
    id: '2',
    deviceName: '240001',
    MonitorIdx: 2,
    UaData: 57.74,
    UaChannel: '合格',
    UbData: 57.74,
    UbChannel: '合格',
    UcData: 57.74,
    UcChannel: '合格',
    IaData: 5,
    IaChannel: '合格',
    IbData: 5,
    IbChannel: '合格',
    IcData: 5,
    IcChannel: '合格',
  },
  {
    id: '2',
    deviceName: '240001',
    MonitorIdx: 2,
    UaData: 57.74,
    UaChannel: '合格',
    UbData: 57.74,
    UbChannel: '合格',
    UcData: 57.74,
    UcChannel:'合格',
    IaData: 5,
    IaChannel: '合格',
    IbData: 5,
    IbChannel: '合格',
    IcData: 5,
    IcChannel: '合格',
  },
])
const tableData2 = ref<TableDataItem[]>([
{
    id: '1',
    deviceName: '大电压大电流2',
    MonitorIdx: 1,
    UaData: 57.74,
    UaChannel: 1.0003,
    UbData: 57.74,
    UbChannel: 1.0003,
    UcData: 57.74,
    UcChannel: 1.0003,
    IaData: 5,
    IaChannel: 1.0001,
    IbData: 5,
    IbChannel: 1.0001,
    IcData: 5,
    IcChannel: 1.0001,
  },
  {
    id: '1',
    deviceName: '大电压大电流',
    MonitorIdx: 1,
    UaData: 57.74,
    UaChannel: 1.0003,
    UbData: 57.74,
    UbChannel: 1.0003,
    UcData: 57.74,
    UcChannel: 1.0003,
    IaData: 5,
    IaChannel: 1.0001,
    IbData: 5,
    IbChannel: 1.0001,
    IcData: 5,
    IcChannel: 1.0001,
  },
  {
    id: '1',
    deviceName: '小电压小电流',
    MonitorIdx: 1,
    UaData: 57.74,
    UaChannel: '合格',
    UbData: 57.74,
    UbChannel: '合格',
    UcData: 57.74,
    UcChannel: '合格',
    IaData: 5,
    IaChannel: '合格',
    IbData: 5,
    IbChannel: '不合格',
    IcData: 5,
    IcChannel: '合格',
  },
  {
    id: '1',
    deviceName: '小电压小电流',
    MonitorIdx: 1,
    UaData: 57.74,
    UaChannel: "合格",
    UbData: 57.74,
    UbChannel: '合格',
    UcData: 57.74,
    UcChannel: '合格',
    IaData: 5,
    IaChannel: '合格',
    IbData: 5,
    IbChannel: '合格',
    IcData: 5,
    IcChannel: '合格',
  },
])
const tableData3 = ref<TableDataItem[]>([
  {
    id: '1',
    updateTime: '2024-10-10 10:30:00',
    deviceName: '大电压大电流',
    MonitorIdx: 1,
    UaData: 57.74,
    UaChannel: 1.0003,
    UbData: 57.74,
    UbChannel: 1.0003,
    UcData: 57.74,
    UcChannel: 1.0003,
    IaData: 5,
    IaChannel: 1.0001,
    IbData: 5,
    IbChannel: 1.0001,
    IcData: 5,
    IcChannel: 1.0001,
    Result: '合格',
  },
  {
    id: '1',
    updateTime: '2024-10-10 10:30:00',
    deviceName: '大电压大电流',
    MonitorIdx: 1,
    UaData: 57.74,
    UaChannel: 1.0003,
    UbData: 57.74,
    UbChannel: 1.0003,
    UcData: 57.74,
    UcChannel: 1.0003,
    IaData: 5,
    IaChannel: 1.0001,
    IbData: 5,
    IbChannel: 1.0001,
    IcData: 5,
    IcChannel: 1.0001,
    Result: '合格',
  },
  {
    id: '1',
    updateTime: '2024-10-10 10:30:00',
    deviceName: '小电压小电流',
    MonitorIdx: 1,
    UaData: 57.74,
    UaChannel: '合格',
    UbData: 57.74,
    UbChannel: '合格',
    UcData: 57.74,
    UcChannel: '合格',
    IaData: 5,
    IaChannel: '合格',
    IbData: 5,
    IbChannel: '合格',
    IcData: 5,
    IcChannel: '合格',
    Result: '合格',
  },
  {
    id: '1',
    updateTime: '2024-10-10 10:30:00',
    deviceName: '小电压小电流',
    MonitorIdx: 1,
    UaData: 57.74,
    UaChannel: "合格",
    UbData: 57.74,
    UbChannel: '合格',
    UcData: 57.74,
    UcChannel: '不合格',
    IaData: 5,
    IaChannel: '合格',
    IbData: 5,
    IbChannel: '合格',
    IcData: 5,
    IcChannel: '合格',
    Result: '合格',
  },
])


const tableDataMap = new Map<number, Ref<TableDataItem[]>>([
  // [0, tableData1],
  // [1, tableData2],
  // [2, tableData3],
  // [3, tableData1],
  // [4, tableData1],
  // [5, tableData1],
]);


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

  // 打开弹窗，可能是新增，也可能是编辑
  const open = (selection: Device.ResPqDev[]) => {

    const checkStates = selection.map(item => item.checkState);
    const allCheckStatesEqual = new Set(checkStates).size <= 1;

    if (!allCheckStatesEqual) {
      ElMessageBox.confirm(
        '所勾选设备检测状态不一致，请重新选择',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
      return
    }

    name.value = selection.map(item => item.name)
    channel.value = selection.map(item => item.devChns)
    dialogVisible.value = true;
    total.value = name.value.length


    // 循环生成数据
    for (let i = 0; i < channel.value.length; i++) {
      const currentTableData = ref<TableDataItem[]>([]);
     

      // 随机选择 dataTemplates 或 dataTemplates2
      const selectedTemplates = Math.random() < 0.5 ? dataTemplates : dataTemplates2;

      for(let j = 0; j < channel.value[i]; j++){
            const id = (j + 1).toString();
            selectedTemplates.forEach((template) => {
              currentTableData.value.push({
                id: id,
                MonitorIdx: j + 1,
                ...template,
              });
            });
          }  

      tableDataMap.set(i,currentTableData)
    }
  }

  const handleCancel=() => {
      // 清空 name, channel, total
      name.value = [];
      channel.value = [];
      total.value = 0;
      activeIndex.value = 0
      qualified.value = 0
      active.value = 0
      dialogVisible.value = false
  }

const getTableDataForChannel = (index: number): any[] => {
  const data = tableDataMap.get(index);
  return data ? data.value : [];
}
// 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"
    }
})


// 示例的 checkForErrors 函数，根据实际需求进行调整
const checkForErrors = (data: TableDataItem[]): boolean => {
  // 这里假设不合格字段的标准是 status 为 '不合格' 或 isValid 为 false
  return data.some(item => 
    item.UaChannel === '不合格' ||
    item.UbChannel === '不合格' ||
    item.UcChannel === '不合格' ||
    item.IaChannel === '不合格' ||
    item.IbChannel === '不合格' ||
    item.IcChannel === '不合格'
  );
};

const handleSubmit = () => {
  if (intervalId !== null) {
    clearInterval(intervalId);
  }
  intervalId = setInterval(() => {
    if (activeIndex.value < name.value.length) {
      activeIndex.value++;
       // 获取当前活动索引对应的 tableData
      const currentDataRef = tableDataMap.get(activeIndex.value - 1);
      if (currentDataRef) {
        const currentData = currentDataRef.value;
        // 检查当前数据中有无不合格字段
        const hasError = checkForErrors(currentData);
        if (hasError) {
        }else{
          qualified.value++;
        }
        updateErrorState(activeIndex.value - 1, hasError);
      }
    } else {
      clearInterval(intervalId!); // 停止定时器
    }
   

  }, 1000); // 每隔3秒显示下一个tab

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

    let timer2 = setInterval(() => {
      active.value++
      if (active.value++ > 4) {
        clearInterval(timer2)
      }
    }, 1000);
};

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

  
</script>
<style scoped>
.right-title {
  display: flex;
  flex-direction: row;
  /* 横向排列 */
  justify-content: space-between;
  margin-bottom: 10px;
}
.custom-tabs-label .el-icon {
  vertical-align: middle;
}

.custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}

.dialog-content {
  height: 500px;
}

.el-tabs--border-card {
  height: 470px;
}
.el-icon svg {
  color: #ff7171;
}
.container {
  display: flex;
}

.dialog-left {
  flex: 1;
}

.right-content {
  flex: 5;
}
</style>