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-27 15:09:09 +08:00
parent e0fd42199f
commit c7e5ee0862
9 changed files with 417 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

441
frontend/src/views/machine/testScript/components/testScriptInHarmTab.vue
View File

@@ -2,141 +2,191 @@
<div class="tabs-container">
<el-tabs type="border-card" class="right-tabs" style="height: 100%">
<el-tab-pane label="电压通道">
<el-table :data="form[0].inharmList" border size="small" class="half-width-table">
<el-table-column prop="date" align="center" label="次数">
<template #default="{ row, $index }">
<div class="input-label-container">
<el-select
v-model="form[0].inharmList[$index].inharm"
:disabled="!form[0].inHarmFlag"
filterable
placeholder="选择次数"
size="small"
<el-form :inline="true" :model="formInline" :disabled="!props.childForm[0].inHarmFlag">
<el-form-item label="次数">
<el-select
v-model="formInline.inharm"
multiple
collapse-tags
collapse-tags-tooltip
style="width: 160px"
filterable
clearable
>
<el-option label="全部" value="0" />
<el-option v-for="item in 49" :key="item" :label="item + 0.5" :value="item + 0.5" />
</el-select>
</el-form-item>
<el-form-item label="含有率">
<el-input
v-model="formInline.famp"
type="number"
placeholder="含有率"
style="width: 80px"
clearable
/>
</el-form-item>
<el-form-item label="相角">
<el-input
v-model="formInline.fphase"
type="number"
placeholder="相角"
style="width: 80px"
clearable
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Check" @click="onSubmit" size="small">确定</el-button>
<el-button type="primary" :icon="Delete" @click="empty(0)" size="small">清空表格</el-button>
</el-form-item>
</el-form>
<!-- 电压通道内容 -->
<div class="table-container">
<el-table :data="form[0].inharmList" border stripe size="small">
<el-table-column prop="inharm" align="center" label="次数" width="60" />
<el-table-column prop="famp" align="center" label="间谐波含有率">
<template #default="{ row }">
<el-input
type="number"
v-if="row.show"
v-model="row.famp"
/>
<span v-else>{{ row.famp }}%</span>
</template>
</el-table-column>
<el-table-column prop="fphase" label="间谐波相角" align="center">
<template #default="{ row }">
<el-input
type="number"
v-if="row.show"
v-model="row.fphase"
/>
<span v-else>{{ row.fphase }}°</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="{ row, $index }">
<el-button
type="primary"
link
:icon="EditPen"
v-if="!row.show"
@click="row.show = true"
>
<el-option v-for="item in 49" :key="item" :label="item + 0.5" :value="item + 0.5" />
</el-select>
</div>
</template>
</el-table-column>
<el-table-column prop="date" align="center" label="间谐波含有率">
<template #default="{ row, $index }">
<div class="input-label-container">
<el-input
type="number"
size="small"
v-model="form[0].inharmList[$index].famp"
:disabled="!form[0].inHarmFlag"
/>
<label>%</label>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="间谐波相角" align="center">
<template #default="{ row, $index }">
<div class="input-label-container">
<el-input
type="number"
size="small"
v-model="form[0].inharmList[$index].fphase"
:disabled="!form[0].inHarmFlag"
/>
<label>°</label>
</div>
</template>
</el-table-column>
<el-table-column prop="date" align="center" label="操作" width="100">
<template #default="{ row, $index }">
<el-button
v-if="$index == 0"
type="primary"
size="small"
link
:icon="CirclePlus"
@click="inHarmFlagAdd(0, row)"
>
新增
</el-button>
<el-button v-else type="primary" link :icon="Delete" @click="inHarmFlagDelete(0, $index)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
编辑
</el-button>
<el-button type="primary" link :icon="Check" v-else @click="row.show = false">
保存
</el-button>
<el-button type="primary" link :icon="Delete" @click="inHarmFlagDelete(0, $index)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-tab-pane>
</el-tabs>
<el-tabs type="border-card" class="right-tabs" style="height: 100%">
<el-tabs type="border-card" style="height: 100%">
<el-tab-pane label="电流通道">
<el-table :data="form[1].inharmList" border size="small" class="half-width-table">
<el-table-column prop="date" align="center" label="次数">
<template #default="{ row, $index }">
<div class="input-label-container">
<el-select
v-model="form[1].inharmList[$index].inharm"
:disabled="!form[1].inHarmFlag"
filterable
placeholder="选择次数"
size="small"
<el-form :inline="true" :model="formInline1" :disabled="!props.childForm[1].inHarmFlag">
<el-form-item label="次数">
<el-select
v-model="formInline1.inharm"
multiple
collapse-tags
collapse-tags-tooltip
style="width: 160px"
filterable
clearable
>
<el-option label="全部" value="0" />
<el-option v-for="item in 49" :key="item" :label="item + 0.5" :value="item + 0.5" />
</el-select>
</el-form-item>
<el-form-item label="含有率">
<el-input
v-model="formInline1.famp"
type="number"
placeholder="含有率"
style="width: 80px"
clearable
/>
</el-form-item>
<el-form-item label="相角">
<el-input
v-model="formInline1.fphase"
type="number"
placeholder="相角"
style="width: 80px"
clearable
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit1" size="small">确定</el-button>
<el-button type="primary" @click="empty(1)" size="small">清空表格</el-button>
</el-form-item>
</el-form>
<!-- 电流通道内容 -->
<div class="table-container">
<el-table :data="form[1].inharmList" border stripe size="small">
<el-table-column prop="inharm" align="center" label="次数" width="60" />
<el-table-column prop="famp" align="center" label="间谐波含有率">
<template #default="{ row }">
<el-input
type="number"
v-if="row.show"
v-model="row.famp"
/>
<span v-else>{{ row.famp }}%</span>
</template>
</el-table-column>
<el-table-column prop="fphase" label="间谐波相角" align="center">
<template #default="{ row }">
<el-input
type="number"
v-if="row.show"
v-model="row.fphase"
/>
<span v-else>{{ row.fphase }}°</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="{ row, $index }">
<el-button
type="primary"
link
:icon="EditPen"
v-if="!row.show"
@click="row.show = true"
>
<el-option v-for="item in 49" :key="item" :label="item + 0.5" :value="item + 0.5" />
</el-select>
</div>
</template>
</el-table-column>
<el-table-column prop="date" align="center" label="间谐波含有率">
<template #default="{ row, $index }">
<div class="input-label-container">
<el-input
type="number"
size="small"
v-model="form[1].inharmList[$index].famp"
:disabled="!form[1].inHarmFlag"
/>
<label>%</label>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="间谐波相角" align="center">
<template #default="{ row, $index }">
<div class="input-label-container">
<el-input
type="number"
size="small"
v-model="form[1].inharmList[$index].fphase"
:disabled="!form[1].inHarmFlag"
/>
<label>°</label>
</div>
</template>
</el-table-column>
<el-table-column prop="date" align="center" label="操作" width="100">
<template #default="{ row, $index }">
<el-button
v-if="$index == 0"
type="primary"
size="small"
link
:icon="CirclePlus"
@click="inHarmFlagAdd(1, row)"
>
新增
</el-button>
<el-button v-else type="primary" link :icon="Delete" @click="inHarmFlagDelete(1, $index)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
编辑
</el-button>
<el-button type="primary" link :icon="Check" v-else @click="row.show = false">
保存
</el-button>
<el-button type="primary" link :icon="Delete" @click="inHarmFlagDelete(1, $index)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup lang="ts">
import { Check, Delete, EditPen, CopyDocument } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { CirclePlus, Delete, EditPen, CopyDocument } from '@element-plus/icons-vue'
const props = defineProps({
childForm: {
type: Array,
type: Array as any,
required: true
}
})
@@ -147,45 +197,138 @@ const form: any = computed({
},
set(value) {}
})
const num = ref(0)
const formInline = ref({
inharm: [],
famp: '',
fphase: ''
})
const formInline1 = ref({
inharm: [],
famp: '',
fphase: ''
})
// 定义表格数据项的类型
interface TableItem {
date: string
inharmonicRate?: string
inharmonicPhase?: string
name?: string
}
const empty = (index: number) => {
props.childForm[index].inharmList = []
}
const onSubmit = () => {
console.log('🚀 ~ onSubmit ~ props.childForm[0]:', props.childForm[0].inharmList)
if (formInline.value.inharm.length == 0 || formInline.value.famp == '' || formInline.value.fphase == '') {
ElMessage.warning('请填写值!')
return
}
if (formInline.value.inharm.includes('0')) {
props.childForm[0].inharmList = []
for (let i = 2; i < 51; i++) {
props.childForm[0].inharmList.push({
inharm: i, //间间谐波次数
famp: formInline.value.famp, //间间谐波含有率
fphase: formInline.value.fphase // 间间谐波相角
})
}
} else {
formInline.value.inharm.forEach((item: any) => {
props.childForm[0].inharmList.push({
inharm: item, //间间谐波次数
famp: formInline.value.famp, //间间谐波含有率
fphase: formInline.value.fphase // 间间谐波相角
})
})
const seen = new Set()
const uniqueData = []
// 添加间间谐波
const inHarmFlagAdd = (index: number, row: any) => {
props.childForm[index].inharmList.push({ inharm: '', famp: 0, fphase: 0 })
num.value += 1
// 反向遍历数组
for (let i = props.childForm[0].inharmList.length - 1; i >= 0; i--) {
const item = props.childForm[0].inharmList[i]
// 如果 inharm 还未出现过，则添加到结果数组
if (!seen.has(item.inharm)) {
seen.add(item.inharm)
uniqueData.unshift(item) // 添加到结果数组的开头
}
}
props.childForm[0].inharmList = uniqueData.sort((a, b) => a.inharm - b.inharm)
}
}
const onSubmit1 = () => {
if (formInline1.value.inharm.length == 0 || formInline1.value.famp == '' || formInline1.value.fphase == '') {
ElMessage.warning('请填写值!')
return
}
if (formInline1.value.inharm.includes('0')) {
props.childForm[1].inharmList = []
for (let i = 2; i < 51; i++) {
props.childForm[1].inharmList.push({
inharm: i, //间间谐波次数
famp: formInline1.value.famp, //间间谐波含有率
fphase: formInline1.value.fphase // 间间谐波相角
})
}
} else {
formInline1.value.inharm.forEach((item: any) => {
props.childForm[1].inharmList.push({
inharm: item, //间间谐波次数
famp: formInline1.value.famp, //间间谐波含有率
fphase: formInline1.value.fphase // 间间谐波相角
})
})
const seen = new Set()
const uniqueData = []
// 反向遍历数组
for (let i = props.childForm[1].inharmList.length - 1; i >= 0; i--) {
const item = props.childForm[1].inharmList[i]
// 如果 inharm 还未出现过，则添加到结果数组
if (!seen.has(item.inharm)) {
seen.add(item.inharm)
uniqueData.unshift(item) // 添加到结果数组的开头
}
}
props.childForm[1].inharmList = uniqueData.sort((a, b) => a.inharm - b.inharm)
}
}
// 删除
const inHarmFlagDelete = (index: number, number: number) => {
props.childForm[index].inharmList.splice(number, 1)
num.value -= 1
}
</script>
<style lang="scss" scoped>
.container {
.tabs-container {
display: flex;
align-items: center;
border-bottom: 1px solid #ccc;
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%;
margin-top: 10px;
height: 40px;
}
.fixed-width-tabs:last-child {
margin-right: 0; /* 最后一个 el-tabs 不需要右侧间距 */
.half-width-table {
flex: 1; /* 使两个表格占据相同的空间 */
margin-right: 10px; /* 可选：添加表格之间的间距 */
}
.el-tab-pane {
display: flex;
flex-direction: column; /* 确保内容上下排列 */
.half-width-table:last-child {
margin-right: 0; /* 最后一个表格不需要右侧间距 */
}
.el-form-item {
margin-bottom: 20px; /* 可选：添加表单项之间的间距 */
}
:deep(.el-form-item) {
margin-bottom: 10px !important;
}
.input-label-container {
display: flex;
align-items: center; /* 垂直居中对齐 */
@@ -194,13 +337,7 @@ const inHarmFlagDelete = (index: number, number: number) => {
.input-label-container label {
margin-left: 5px; /* 添加标签与输入框之间的间距 */
}
.tabs-container {
display: flex;
justify-content: space-between; /* 使两个 el-tabs 之间有间距 */
height: 100%;
.right-tabs {
flex: 1; /* 使两个 el-tabs 占据相同的空间 */
margin-right: 10px; /* 可选：添加右侧间距 */
}
}
// 全局css 加上以下代码，可以隐藏上下箭头
// 取消input的上下箭头
</style>