ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

系数校准

Browse Source
This commit is contained in:
sjl
2024-12-30 14:43:13 +08:00
parent 6ce58e86ad
commit d76b055730
13 changed files with 1208 additions and 424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
frontend/src/views/machine/testScript/components/testScriptHarmTab.vue Normal file
View File

@@ -0,0 +1,135 @@
<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>