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

<template>
  <el-dialog title="实时数据详情" v-model='dialogVisible' @close="handleClose" v-bind="dialogBig">
    <el-tabs v-model="activeTab" type="card">
      <el-tab-pane 
        v-for="(device, deviceName, index) in testDataStructure" 
        :key="deviceName"
        :name="`channel${index + 1}`">
        <template #label>
          <span>
            {{ deviceName }}
            <el-icon v-if="tabStatus[deviceName]" style="color: red; margin-left: 5px;">
              <CircleClose />
            </el-icon>
            <el-icon v-else style="color: green; margin-left: 5px;">
              <CircleCheck />
            </el-icon>
          </span>
        </template>
        <div class="table-toolbar">
          <el-form-item label="被检设备通道号" prop="createId">
            <el-select 
              v-model="selectedChannels[deviceName]" 
              placeholder="选择通道" 
              style="width: 150px;"
              @change="() => handleDutChannelChange(deviceName)">
             <el-option 
              v-for="channel in device.channelDataList" 
              :key="channel.devNum"
              :label="`通道${channel.devNum}`"
              :value="`通道${channel.devNum}`">
            </el-option>
            </el-select>
            <span style="margin-left: 20px; font-size: 14px; color: var(--el-color-primary);">
              被检设备：{{ deviceName }}-{{ selectedChannels[deviceName] }} ---> 标准设备：{{ formatStandardChannelLabel(getMappedStandardChannel(deviceName, selectedChannels[deviceName])) }}
            </span>
          </el-form-item>    
          <el-button type="primary" @click="exportData">导出数据</el-button>
        </div>
        <el-table 
          :data="tableDataMap[deviceName]" 
          :header-cell-style="{ textAlign: 'center',backgroundColor: 'var(--el-color-primary)',color: '#fff' } "
          :cell-style="{ textAlign: 'center' }"
          style="width: 100%"
          :style="{ height: '400px',maxHeight: '400px',overflow:'hidden'}">
         
          <el-table-column :label="`${deviceName}-${selectedChannels[deviceName] || '通道1'}`">
            <el-table-column prop="timeDev" label="数据时标" width="200"/>
            <el-table-column prop="uaDev" label="A相(V)"/>
            <el-table-column prop="ubDev" label="B相(V)"/>
            <el-table-column prop="ucDev" label="C相(V)"/>
          </el-table-column>
          <el-table-column :label="formatStandardChannelLabel(getMappedStandardChannel(deviceName, selectedChannels[deviceName]))">
            <el-table-column prop="timeStdDev" label="数据时标" width="200"/>
            <el-table-column prop="uaStdDev" label="A相(V)"/>
            <el-table-column prop="uaStdDev" label="B相(V)"/>
            <el-table-column prop="uaStdDev" label="C相(V)"/>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script setup lang='tsx' name='realTimeDataAlign'>
import { dialogBig } from "@/utils/elementBind";
import { PropType, ref } from "vue";
import { ElMessage } from "element-plus";
import { CircleCheck, CircleClose } from '@element-plus/icons-vue';

const dialogVisible = ref(false);
const activeTab = ref('channel1');

// 在 script setup 中定义接口
interface ChannelData {
  devNum: string;
  standardDevInfo: string;
  dataList: {
    timeDev: string | null;
    uaDev: number | null;
    ubDev: number | null;
    ucDev: number | null;
    timeStdDev: string | null;
    uaStdDev: number | null;
    ubStdDev: number | null;
    ucStdDev: number | null;
  }[];
}

interface DeviceData {
  devName: string;
  channelDataList: ChannelData[];
}

// 修改 testDataStructure 的类型声明
const testDataStructure = ref<Record<string, DeviceData>>({});

// 重构后的 testDataStructure
// const testDataStructure = ref({
//   "被检1": {
//     devName: "被检设备1",
//     channelDataList: [
//       {
//         devNum: "1",
//         standardDevInfo: "标准设备1通道1",
//         dataList: [
//           {
//             timeDev: "2025-09-02 14:00:02.231",
//             uaDev: 57.74,
//             ubDev: 57.74,
//             ucDev: 57.74,
//             timeStdDev: "2025-09-02 14:00:02.231",
//             uaStdDev: 57.73,
//             ubStdDev: 57.73,
//             ucStdDev: 57.74
//           },
//           {
//             timeDev: "2025-09-02 14:00:02.234",
//             uaDev: 57.74,
//             ubDev: 57.74,
//             ucDev: 57.74,
//             timeStdDev: null,
//             uaStdDev: null,
//             ubStdDev: null,
//             ucStdDev: null
//           },
//           {
//             timeDev: null,
//             uaDev: null,
//             ubDev: null,
//             ucDev: null,
//             timeStdDev: "2025-09-02 14:00:02.237",
//             uaStdDev: 57.74,
//             ubStdDev: 57.74,
//             ucStdDev: 57.74
//           }
//         ]
//       },
//       {
//         devNum: "2",
//         standardDevInfo: "标准设备2通道4",
//         dataList: [
//           {
//             timeDev: "2025-09-02 14:00:02.231",
//             uaDev: 57.74,
//             ubDev: 57.74,
//             ucDev: 57.74,
//             timeStdDev: "2025-09-02 14:00:02.231",
//             uaStdDev: 57.73,
//             ubStdDev: 57.73,
//             ucStdDev: 57.74
//           },
//           {
//             timeDev: "2025-09-02 14:00:02.231",
//             uaDev: 57.74,
//             ubDev: 57.74,
//             ucDev: 57.74,
//             timeStdDev: "2025-09-02 14:00:02.231",
//             uaStdDev: 57.73,
//             ubStdDev: 57.73,
//             ucStdDev: 57.74
//           },
//           {
//             timeDev: "2025-09-02 14:00:02.231",
//             uaDev: 57.74,
//             ubDev: 57.74,
//             ucDev: 57.74,
//             timeStdDev: "2025-09-02 14:00:02.231",
//             uaStdDev: 57.73,
//             ubStdDev: 57.73,
//             ucStdDev: 57.74
//           }
//         ]
//       }
//     ]
//   },
//   "被检2": {
//     devName: "被检设备2",
//     channelDataList: [
//       {
//         devNum: "1",
//         standardDevInfo: "标准设备1通道1",
//         dataList: [
//           {
//             timeDev: "2025-09-02 14:00:02.231",
//             uaDev: 57.74,
//             ubDev: 57.74,
//             ucDev: 57.74,
//             timeStdDev: "2025-09-02 14:00:02.231",
//             uaStdDev: 57.73,
//             ubStdDev: 57.73,
//             ucStdDev: 57.74
//           },
//           {
//             timeDev: "2025-09-02 14:00:02.234",
//             uaDev: 57.74,
//             ubDev: 57.74,
//             ucDev: 57.74,
//             timeStdDev: "2025-09-02 14:00:02.231",
//             uaStdDev: 57.73,
//             ubStdDev: 57.73,
//             ucStdDev: 57.74
//           },
//           {
//             timeDev: "2025-09-02 14:00:02.234",
//             uaDev: 57.74,
//             ubDev: 57.74,
//             ucDev: 57.74,
//             timeStdDev: "2025-09-02 14:00:02.237",
//             uaStdDev: 57.74,
//             ubStdDev: 57.74,
//             ucStdDev: 57.74
//           }
//         ]
//       },
//       {
//         devNum: "3",
//         standardDevInfo: "标准设备2通道4",
//         dataList: [
//           {
//             timeDev: "2025-09-02 14:00:02.231",
//             uaDev: 57.74,
//             ubDev: 57.74,
//             ucDev: 57.74,
//             timeStdDev: "2025-09-02 14:00:02.231",
//             uaStdDev: 57.73,
//             ubStdDev: 57.73,
//             ucStdDev: 57.74
//           },
//           {
//             timeDev: "2025-09-02 14:00:02.231",
//             uaDev: 57.74,
//             ubDev: 57.74,
//             ucDev: 57.74,
//             timeStdDev: "2025-09-02 14:00:02.231",
//             uaStdDev: 57.73,
//             ubStdDev: 57.73,
//             ucStdDev: 57.74
//           },
//           {
//             timeDev: "2025-09-02 14:00:02.231",
//             uaDev: 57.74,
//             ubDev: 57.74,
//             ucDev: 57.74,
//             timeStdDev: "2025-09-02 14:00:02.231",
//             uaStdDev: 57.73,
//             ubStdDev: 57.73,
//             ucStdDev: 57.74
//           }
//         ]
//       }
//     ]
//   }
// });

// 每个设备选中的通道
const selectedChannels = ref<Record<string, string>>({});

// 通道映射关系：被检设备通道 -> 标准设备通道
const channelMapping = ref<Record<string, Record<string, string>>>({
  // '被检1': {
  //   '通道1': '标准设备1通道2',
  //   '通道2': '标准设备2通道4',
  // },
  // '被检2': {
  //   '通道1': '标准设备1通道3',
  //   '通道3': '标准设备2通道1'
  // }
});

// 每个设备的表格数据
const tableDataMap = ref<Record<string, any[]>>({});

// 每个tab的状态（true表示有不完整数据，false表示数据完整）
const tabStatus = ref<Record<string, boolean>>({});

// 检查设备数据是否有不完整的行（包含null的行）
const hasIncompleteData = (deviceName: string) => {
  const tableData = tableDataMap.value[deviceName];
  if (!tableData || tableData.length === 0) return false;
  
  // 检查每一行是否有缺失数据（包含null的字段）
  return tableData.some(row => {
   return row.Ua1 === '/' || row.Ub1 === '/' || row.Uc1 === '/' || 
           row.Ua2 === '/' || row.Ub2 === '/' || row.Uc2 === '/';
  });
};

// 获取映射的标准设备通道
const getMappedStandardChannel = (deviceName: string, dutChannel: string) => {

  return channelMapping.value[deviceName][dutChannel];
};


 // 格式化标准设备通道标签，将设备名称和通道号用"-"连接
 const formatStandardChannelLabel = (standardChannel: string) => {
   // 如果是"标准设备X通道Y"格式，则转换为"标准设备X-通道Y"
   return standardChannel.replace(/(标准设备\d+)(通道\d+)/, '$1-$2');
 };

// 处理被检设备通道切换
const handleDutChannelChange = (deviceName: string) => {
  // 更新指定设备的表格数据，但不改变tab图标状态
  updateTableData(deviceName);
};

// 根据 testDataStructure 生成表格数据
const generateTableData = (deviceName: string, dutChannel: string) => {
  const deviceData = testDataStructure.value[deviceName];
  if (!deviceData) return [];
  
 
  // 根据实际通道编号查找对应的数据
  const channelData = deviceData.channelDataList.find(channel => 
   `通道${channel.devNum}` === dutChannel
  );
  
  if (!channelData) return [];
  
  // 生成表格数据
  return channelData.dataList.map(dataItem => {
    return {
      timeDev: dataItem.timeDev !== null ? dataItem.timeDev : '/',
      uaDev: dataItem.uaDev !== null ? dataItem.uaDev : '/',
      ubDev: dataItem.ubDev !== null ? dataItem.ubDev : '/',
      ucDev: dataItem.ucDev !== null ? dataItem.ucDev : '/',
      timeStdDev: dataItem.timeStdDev !== null ? dataItem.timeStdDev : '/',
      uaStdDev: dataItem.uaStdDev !== null ? dataItem.uaStdDev : '/',
      ubStdDev: dataItem.ubStdDev !== null ? dataItem.ubStdDev : '/',
      ucStdDev: dataItem.ucStdDev !== null ? dataItem.ucStdDev : '/'
    };
  });
};

// 更新指定设备的表格数据
const updateTableData = (deviceName: string) => {
  const selectedChannel = selectedChannels.value[deviceName];
  if (selectedChannel) {
    const tableData = generateTableData(deviceName, selectedChannel);
    tableDataMap.value[deviceName] = tableData;
  }
};

// 初始化所有设备的数据和状态
const initAllTableData = () => {
  Object.keys(testDataStructure.value).forEach(deviceName => {

    // 默认选择第一个可用通道
    const firstChannel = testDataStructure.value[deviceName].channelDataList[0];
    selectedChannels.value[deviceName] = `通道${firstChannel.devNum}`;
    
    // 生成表格数据
    updateTableData(deviceName);
    
    // 初始化tab状态（只在初始化时设置一次）
    if (tabStatus.value[deviceName] === undefined) {
      tabStatus.value[deviceName] = hasIncompleteData(deviceName);
    }
  });
};

const open = async (mapping : Record<string, Record<string, string>>,data : any) => {
  let parsedData = data;
  
  // 如果 data 是字符串，先解析为对象
  if (typeof data === 'string') {
    try {
      parsedData = JSON.parse(data);
    } catch (error) {
      console.error('数据解析失败:', error);
      ElMessage.error('数据格式错误');
      return;
    }
  }
  // 转换数据格式以匹配组件期望的格式
  const convertedData: Record<string, DeviceData> = {};
  // 假设传入的数据是一个数组，需要转换为以设备名为键的对象
  if (Array.isArray(parsedData)) {
    parsedData.forEach((deviceItem: any) => {
      const deviceName = deviceItem.devName;
      convertedData[deviceName] = {
        devName: deviceName,
        channelDataList: deviceItem.channelDataList.map((channel: any) => ({
          devNum: channel.devNum,
          standardDevInfo: channel.standardDevInfo,
          dataList: channel.dataList.map((dataItem: any) => ({
            timeDev: dataItem.timeDev,
            uaDev: dataItem.uaDev,
            ubDev: dataItem.ubDev,
            ucDev: dataItem.ucDev,
            timeStdDev: dataItem.timeStdDev,
            uaStdDev: dataItem.uaStdDev,
            ubStdDev: dataItem.ubStdDev,
            ucStdDev: dataItem.ucStdDev
          }))
        }))
      };
    });
  } else if (parsedData && typeof parsedData === 'object') {
    // 如果已经是期望的格式，直接使用
    Object.assign(convertedData, parsedData);
  }
  testDataStructure.value = convertedData;
  channelMapping.value = mapping;
  dialogVisible.value = true;
  // 初始化数据和状态
  initAllTableData();
  
  // 设置默认激活的 tab
  activeTab.value = 'channel1';
};

// 导出数据
const exportData = () => {
  ElMessage.success('数据导出成功');
  // 这里可以添加实际的数据导出逻辑
};

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false;
};

defineExpose({ open });
</script>

<style scoped lang="scss">
.table-toolbar {
  display: flex;
  justify-content: space-between;
}

:deep(.el-dialog__body) {
  padding: 10px 20px 20px 20px;
}
</style>