pqs-9100_client/frontend/src/views/machine/testScript/components/testScriptHarmTab.vue

<template>
    <div class="tabs-container">
        <el-tabs type="border-card" class="right-tabs" style="height: 100%">
            <el-tab-pane label="电压通道">
                <!-- 电压通道内容 -->
                <div class="table-container">
                    <el-table :data="tableData1" border size="small" class="half-width-table">
                        <el-table-column prop="date" align="center" label="次数" width="60" />
                        <el-table-column prop="date" align="center" label="谐波含有率" width="120">
                            <template #default="{ row, $index }">
                                <div class="input-label-container">
                                    <el-input type="number" size="small" v-model="form[0].harmList[$index].famp" :disabled="!form[0].harmFlag"/>
                                    <label>%</label>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="谐波相角" align="center" width="120">
                            <template #default="{ row, $index }">
                                <div class="input-label-container">
                                    <el-input type="number" size="small"  v-model="form[0].harmList[$index].fphase" :disabled="!form[0].harmFlag"/>
                                    <label>°</label>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-table :data="tableData2" border size="small" class="half-width-table">
                        <el-table-column prop="date" label="次数" align="center" width="60" />
                        <el-table-column prop="date" label="谐波含有率" align="center" width="120">
                            <template #default="{ row, $index }">
                                <div class="input-label-container">
                                    <el-input type="number" size="small" v-model="form[0].harmList[$index + 24].famp" :disabled="!form[0].harmFlag"/>
                                    <label>%</label>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="谐波相角" align="center" width="120">
                            <template #default="{ row, $index }">
                                <div class="input-label-container">
                                    <el-input type="number" size="small"  v-model="form[0].harmList[$index+24].fphase" :disabled="!form[0].harmFlag"/>
                                    <label>°</label>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-tabs type="border-card" style="height: 100%">
            <el-tab-pane label="电流通道">
                <!-- 电流通道内容 -->
                <div class="table-container">
                    <el-table :data="tableData1" border size="small" class="half-width-table">
                        <el-table-column prop="date" label="次数" align="center" width="60" />
                        <el-table-column prop="date" label="谐波含有率" align="center" width="120">
                            <template #default="{ row, $index }">
                                <div class="input-label-container">
                                    <el-input type="number" size="small" v-model="form[1].harmList[$index].famp" :disabled="!form[1].harmFlag"/>
                                    <label>%</label>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" align="center" label="谐波相角" width="120">
                            <template #default="{ row, $index }">
                                <div class="input-label-container">
                                    <el-input type="number" size="small"  v-model="form[1].harmList[$index].fphase" :disabled="!form[1].harmFlag"/>
                                    <label>°</label>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-table :data="tableData2" border size="small" class="half-width-table">
                        <el-table-column prop="date" label="次数" align="center" width="60" />
                        <el-table-column prop="date" label="谐波含有率" align="center" width="120">
                            <template #default="{ row, $index }">
                                <div class="input-label-container">
                                    <el-input type="number" size="small" v-model="form[1].harmList[$index + 24].famp" :disabled="!form[1].harmFlag"/>
                                    <label>%</label>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="谐波相角" align="center" width="120">
                            <template #default="{ row, $index }">
                                <div class="input-label-container">
                                    <el-input type="number" size="small"  v-model="form[1].harmList[$index+24].fphase" :disabled="!form[1].harmFlag"/>
                                    <label>°</label>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
    childForm: {
        type: Array,
        required: true
    }
})

const form:any = computed({
    get() {
        return props.childForm
    },
    set(value) {}
})

// 定义表格数据项的类型
interface TableItem {
    date: string
    harmonicRate?: string
    harmonicPhase?: string
    name?: string
}

// 定义并初始化 tableData
const tableData1 = ref<TableItem[]>([])
const tableData2 = ref<TableItem[]>([])

for (let i = 2; i <= 25; i++) {
    tableData1.value.push({
        date: i.toString(),
        harmonicRate: `谐波含有率${i}`,
        harmonicPhase: `谐波相角${i}`
    })
}
for (let i = 26; i <= 50; i++) {
    tableData2.value.push({
        date: i.toString(),
        harmonicRate: `谐波含有率${i}`,
        harmonicPhase: `谐波相角${i}`
    })
}
</script>

<style scoped>
.tabs-container {
    display: flex;
    justify-content: space-between; /* 使两个 el-tabs 之间有间距 */
    height: 100%;
}

.right-tabs {
    flex: 1; /* 使两个 el-tabs 占据相同的空间 */
    margin-right: 10px; /* 可选：添加右侧间距 */
}

.el-tabs {
    flex: 1; /* 使两个 el-tabs 占据相同的空间 */
}

.table-container {
    display: flex;
    justify-content: space-between; /* 使两个表格之间有间距 */
    width: 100%;
}

.half-width-table {
    flex: 1; /* 使两个表格占据相同的空间 */
    margin-right: 10px; /* 可选：添加表格之间的间距 */
}

.half-width-table:last-child {
    margin-right: 0; /* 最后一个表格不需要右侧间距 */
}

.input-label-container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

.input-label-container label {
    margin-left: 5px; /* 添加标签与输入框之间的间距 */
}
</style>