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:
GGJ
2025-02-13 16:15:26 +08:00
parent 475d236b7e
commit 1e83172e9a
13 changed files with 990 additions and 873 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
frontend/src/views/machine/testScript/components/testScriptHarmTab.vue
View File

@@ -1,166 +1,166 @@
<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>
<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="scope">
<div class="input-label-container">
<el-input size="small" />
<label>%</label>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="谐波相角" align="center" width="120">
<template #default="scope">
<div class="input-label-container">
<el-input size="small" />
<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="scope">
<div class="input-label-container">
<el-input size="small" />
<label>%</label>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="谐波相角" align="center" width="120">
<template #default="scope">
<div class="input-label-container">
<el-input size="small" />
<label>°</label>
</div>
</template>
</el-table-column>
</el-table>
</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>
</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="scope">
<div class="input-label-container">
<el-input size="small" />
<label>%</label>
</div>
</template>
</el-table-column>
<el-table-column prop="name" align="center" label="谐波相角" width="120">
<template #default="scope">
<div class="input-label-container">
<el-input size="small" />
<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="scope">
<div class="input-label-container">
<el-input size="small" />
<label>%</label>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="谐波相角" align="center" width="120">
<template #default="scope">
<div class="input-label-container">
<el-input size="small" />
<label>°</label>
</div>
</template>
</el-table-column>
</el-table>
</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>
</el-tab-pane>
</el-tabs>
</div>
</template>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ref } from 'vue'
// 定义表格数据项的类型
interface TableItem {
date: string;
harmonicRate?: string;
harmonicPhase?: string;
name?: string;
date: string
harmonicRate?: string
harmonicPhase?: string
name?: string
}
// 定义并初始化 tableData
const tableData1 = ref<TableItem[]>([]);
const tableData2 = ref<TableItem[]>([]);
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}`
});
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}`
});
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%;
display: flex;
justify-content: space-between; /* 使两个 el-tabs 之间有间距 */
height: 100%;
}
.right-tabs {
flex: 1; /* 使两个 el-tabs 占据相同的空间 */
margin-right: 10px; /* 可选：添加右侧间距 */
flex: 1; /* 使两个 el-tabs 占据相同的空间 */
margin-right: 10px; /* 可选：添加右侧间距 */
}
.el-tabs {
flex: 1; /* 使两个 el-tabs 占据相同的空间 */
flex: 1; /* 使两个 el-tabs 占据相同的空间 */
}
.table-container {
display: flex;
justify-content: space-between; /* 使两个表格之间有间距 */
width: 100%;
display: flex;
justify-content: space-between; /* 使两个表格之间有间距 */
width: 100%;
}
.half-width-table {
flex: 1; /* 使两个表格占据相同的空间 */
margin-right: 10px; /* 可选：添加表格之间的间距 */
flex: 1; /* 使两个表格占据相同的空间 */
margin-right: 10px; /* 可选：添加表格之间的间距 */
}
.half-width-table:last-child {
margin-right: 0; /* 最后一个表格不需要右侧间距 */
margin-right: 0; /* 最后一个表格不需要右侧间距 */
}
.input-label-container {
display: flex;
align-items: center; /* 垂直居中对齐 */
display: flex;
align-items: center; /* 垂直居中对齐 */
}
.input-label-container label {
margin-left: 5px; /* 添加标签与输入框之间的间距 */
margin-left: 5px; /* 添加标签与输入框之间的间距 */
}
</style>
</style>