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 class="half-width-table">
            <el-table-column prop="date" label="次数" width="60"/>
            <el-table-column prop="date" label="谐波含有率" width="120">
              <template #default="scope">
                <div class="input-label-container">
                  <el-input  />
                  <label>%</label>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="谐波相角" width="120">
              <template #default="scope">
                <div class="input-label-container">
                  <el-input  />
                  <label>°</label>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-table :data="tableData2" border class="half-width-table">
            <el-table-column prop="date" label="次数" width="60"/>
            <el-table-column prop="date" label="谐波含有率" width="120">
              <template #default="scope">
                <div class="input-label-container">
                  <el-input  />
                  <label>%</label>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="谐波相角" width="120">
              <template #default="scope">
                <div class="input-label-container">
                  <el-input  />
                  <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 class="half-width-table">
            <el-table-column prop="date" label="次数" width="60"/>
            <el-table-column prop="date" label="谐波含有率" width="120">
              <template #default="scope">
                <div class="input-label-container">
                  <el-input  />
                  <label>%</label>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="谐波相角" width="120">
              <template #default="scope">
                <div class="input-label-container">
                  <el-input  />
                  <label>°</label>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-table :data="tableData2" border class="half-width-table">
            <el-table-column prop="date" label="次数" width="60"/>
            <el-table-column prop="date" label="谐波含有率" width="120">
              <template #default="scope">
                <div class="input-label-container">
                  <el-input  />
                  <label>%</label>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="谐波相角" width="120">
              <template #default="scope">
                 <div class="input-label-container">
                  <el-input  />
                  <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";

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

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

for (let i = 1; 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>