135 lines
4.2 KiB
Vue
135 lines
4.2 KiB
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="125">
|
|
<template #default="scope">
|
|
<el-input />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="谐波相角" width="125">
|
|
<template #default="scope">
|
|
<el-input />
|
|
</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="125">
|
|
<template #default="scope">
|
|
<el-input />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="谐波相角" width="125">
|
|
<template #default="scope">
|
|
<el-input />
|
|
</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="125">
|
|
<template #default="scope">
|
|
<el-input />
|
|
<label>123%</label>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="谐波相角" width="125">
|
|
<template #default="scope">
|
|
<el-input />
|
|
</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="125">
|
|
<template #default="scope">
|
|
<el-input />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="谐波相角" width="125">
|
|
<template #default="scope">
|
|
<el-input />
|
|
</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; /* 最后一个表格不需要右侧间距 */
|
|
}
|
|
|
|
</style> |