kev/Drawer/drawer-htmlroot/components/TableComponent.vue

<template>
    <el-table :data="formattedData" style="width: 100%;overflow: auto;">
        <!-- 第一列：井号/段号 -->
        <el-table-column :label="tableFirstColumn" min-width="120">
            <template #default="scope">
                <span>{{ scope.row.segment }}</span>
            </template>
        </el-table-column>
        
        <!-- 动态切换列 -->
        <!-- 动态参数列，当 chartNum === 5 -->
        <template v-if="chartNum === 5">
            <el-table-column prop="stage" label="段号" min-width="100"></el-table-column>
            <el-table-column 
                v-for="(paramName, index) in dynamicParamNames" 
                :key="index" 
                :prop="paramName" 
                :label="paramName" 
                min-width="120">
                <template #default="scope">
                    <span>{{ scope.row[paramName] }}</span>
                </template>
            </el-table-column>
        </template>

        <!-- 井号列，其他情况 -->
        <template v-else>
            <el-table-column 
                v-for="(well, index) in wellNames" 
                :key="index" 
                :label="well" 
                min-width="100">
                <template #default="scope">
                    <div v-for="(item, idx) in scope.row[well]" :key="idx">
                        <span>{{ item.point.Z }}</span>
                    </div>
                </template>
            </el-table-column>
        </template>
    </el-table>
</template>

<script>
export default {
    props: {
        tableData: {
            type: Object,
            required: true
        },
        chartNum: Number
    },
    computed: {
        dynamicParamNames() {
            if (this.chartNum === 5) {
                const paramNames = new Set();
                // 遍历每个井号的数据
                Object.values(this.tableData).forEach(parameters => {
                    parameters.forEach(param => paramNames.add(param.ParamName));
                });
                return Array.from(paramNames); // 返回参数名的数组
            }
            return [];
        },
        wellNames() {
            return Object.keys(this.tableData);
        },
        tableFirstColumn() {
            if (this.chartNum == 0 || this.chartNum == 1) {
                return '段号';
            } else if (this.chartNum == 2) {
                return '井号';
            } else {
                return '参数名';
            }
        },
        formattedData() {
            const maxLength = Math.max(...this.wellNames.map(well => this.tableData[well].length));

            if (this.chartNum == 0 || this.chartNum == 1) {
                return Array.from({ length: maxLength }, (_, index) => {
                    const row = { segment: index + 1 }; // 添加段号
                    this.wellNames.forEach(well => {
                        row[well] = this.tableData[well][index] ? [{ point: this.tableData[well][index].Point }] : [];
                    });
                    return row;
                })
            } else if (this.chartNum == 2 || this.chartNum == 3) {
                return Array.from({ length: maxLength }, (_, index) => {
                    const row = { segment: '平均值' }; // 添加段号
                    this.wellNames.forEach(well => {
                        row[well] = this.tableData[well][index] ? [{ point: this.tableData[well][index].Point }] : [];
                    });
                    return row;
                });
            } else if (this.chartNum == 4) {
                return Array.from({ length: maxLength }, (_, index) => {
                    const row = {};
                    this.wellNames.forEach(well => {
                        row.segment = this.tableData[well][index] ? this.tableData[well][index].ParamName : '';
                        row[well] = this.tableData[well][index] ? [{ point: this.tableData[well][index].Point }] : [];
                    });
                    return row;
                });
            } else {
                 const formatted = [];
            Object.entries(this.tableData).forEach(([wellName, parameters]) => {
                const groupedByStage = {};
                parameters.forEach(param => {
                    const stage = param.StageNo;
                    if (!groupedByStage[stage]) {
                        groupedByStage[stage] = {};
                    }
                    groupedByStage[stage][param.ParamName] = param.Point.Z; // 提取 Z 值
                });

                // 构建表格行
                Object.entries(groupedByStage).forEach(([stageNo, paramValues]) => {
                    const row = {
                        segment: wellName, // 井号
                        stage: stageNo 
                    };

                    // 根据动态参数名填充数据
                    this.dynamicParamNames.forEach(paramName => {
                        row[paramName] = paramValues[paramName] || ""; // 如果值不存在，则设为空字符串
                    });

                    formatted.push(row);
                });
            });

            return formatted;
            }
        }
    }
}
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>