优化检测脚本页面

录入检测脚本
This commit is contained in:
GGJ
2025-02-27 08:41:33 +08:00
parent 8b2cda80b1
commit 0bae200241
11 changed files with 924 additions and 334 deletions

View File

@@ -2,47 +2,97 @@
<div class="tabs-container">
<el-tabs type="border-card" class="right-tabs" style="height: 100%">
<el-tab-pane label="电压通道">
<el-form :inline="true" :model="formInline" :disabled="!props.childForm[0].harmFlag">
<el-form-item label="次数">
<el-select
v-model="formInline.harm"
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 + 1" :value="item + 1" />
</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" @click="onSubmit" size="small">确定</el-button>
<el-button type="primary" @click="empty(0)" size="small">清空列表</el-button>
</el-form-item>
</el-form>
<!-- 电压通道内容 -->
<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="{ row, $index }">
<div class="input-label-container">
<el-input
type="number"
@mousewheel.native.prevent
size="small"
v-model="form[0].harmList[$index].famp"
:disabled="!form[0].harmFlag"
/>
<label>%</label>
</div>
<el-table :data="form[0].harmList" border stripe size="small">
<el-table-column prop="harm" align="center" label="次数" width="60" />
<el-table-column prop="famp" align="center" label="谐波含有率">
<template #default="{ row }">
<el-input
type="number"
v-if="row.show"
@blur="row.show = !row.show"
v-model="row.famp"
/>
<span v-else>{{ row.famp }}%</span>
</template>
</el-table-column>
<el-table-column prop="name" label="谐波相角" align="center" width="120">
<el-table-column prop="fphase" label="谐波相角" align="center">
<template #default="{ row }">
<el-input
type="number"
v-if="row.show"
@blur="row.show = !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 }">
<div class="input-label-container">
<el-input
type="number"
@mousewheel.native.prevent
size="small"
v-model="form[0].harmList[$index].fphase"
:disabled="!form[0].harmFlag"
/>
<label>°</label>
</div>
<el-button
type="primary"
link
:icon="EditPen"
v-if="!row.show"
@click="row.show = true"
>
编辑
</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="HarmFlagDelete(0, $index)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-table :data="tableData2" border size="small" class="half-width-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="{ row, $index }">
<div class="input-label-container">
<el-input
type="number"
@mousewheel.native.prevent
size="small"
v-model="form[0].harmList[$index + 24].famp"
:disabled="!form[0].harmFlag"
@@ -56,7 +106,6 @@
<div class="input-label-container">
<el-input
type="number"
@mousewheel.native.prevent
size="small"
v-model="form[0].harmList[$index + 24].fphase"
:disabled="!form[0].harmFlag"
@@ -65,73 +114,93 @@
</div>
</template>
</el-table-column>
</el-table>
</el-table> -->
</div>
</el-tab-pane>
</el-tabs>
<el-tabs type="border-card" style="height: 100%">
<el-tab-pane label="电流通道">
<el-form :inline="true" :model="formInline1" :disabled="!props.childForm[1].harmFlag">
<el-form-item label="次数">
<el-select
v-model="formInline1.harm"
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 + 1" :value="item + 1" />
</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="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="{ row, $index }">
<div class="input-label-container">
<el-input
type="number"
@mousewheel.native.prevent
size="small"
v-model="form[1].harmList[$index].famp"
:disabled="!form[1].harmFlag"
/>
<label>%</label>
</div>
<el-table :data="form[1].harmList" border stripe size="small">
<el-table-column prop="harm" align="center" label="次数" width="60" />
<el-table-column prop="famp" align="center" label="谐波含有率">
<template #default="{ row }">
<el-input
type="number"
v-if="row.show"
@blur="row.show = !row.show"
v-model="row.famp"
/>
<span v-else>{{ row.famp }}%</span>
</template>
</el-table-column>
<el-table-column prop="name" align="center" label="谐波相角" width="120">
<template #default="{ row, $index }">
<div class="input-label-container">
<el-input
type="number"
@mousewheel.native.prevent
size="small"
v-model="form[1].harmList[$index].fphase"
:disabled="!form[1].harmFlag"
/>
<label>°</label>
</div>
<el-table-column prop="fphase" label="谐波相角" align="center">
<template #default="{ row }">
<el-input
type="number"
v-if="row.show"
@blur="row.show = !row.show"
v-model="row.fphase"
/>
<span v-else>{{ row.fphase }}°</span>
</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">
<el-table-column label="操作" align="center">
<template #default="{ row, $index }">
<div class="input-label-container">
<el-input
type="number"
@mousewheel.native.prevent
size="small"
v-model="form[1].harmList[$index + 24].famp"
:disabled="!form[1].harmFlag"
/>
<label>%</label>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="谐波相角" align="center" width="120">
<template #default="{ row, $index }">
<div class="input-label-container">
<el-input
type="number"
@mousewheel.native.prevent
size="small"
v-model="form[1].harmList[$index + 24].fphase"
:disabled="!form[1].harmFlag"
/>
<label>°</label>
</div>
<el-button
type="primary"
link
:icon="EditPen"
v-if="!row.show"
@click="row.show = true"
>
编辑
</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="HarmFlagDelete(1, $index)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
@@ -142,10 +211,11 @@
</template>
<script setup lang="ts">
import { Check, Delete, EditPen, CopyDocument } from '@element-plus/icons-vue'
import { ref } from 'vue'
const props = defineProps({
childForm: {
type: Array,
type: Array as any,
required: true
}
})
@@ -156,7 +226,16 @@ const form: any = computed({
},
set(value) {}
})
const formInline = ref({
harm: [],
famp: '',
fphase: ''
})
const formInline1 = ref({
harm: [],
famp: '',
fphase: ''
})
// 定义表格数据项的类型
interface TableItem {
date: string
@@ -164,6 +243,88 @@ interface TableItem {
harmonicPhase?: string
name?: string
}
const empty = (index: number) => {
props.childForm[index].harmList = []
}
const onSubmit = () => {
console.log('🚀 ~ onSubmit ~ props.childForm[0]:', props.childForm[0].harmList)
if (formInline.value.harm.length == 0 || formInline.value.famp == '' || formInline.value.fphase == '') {
ElMessage.warning('请填写值!')
return
}
if (formInline.value.harm.includes('0')) {
props.childForm[0].harmList = []
for (let i = 2; i < 51; i++) {
props.childForm[0].harmList.push({
harm: i, //间谐波次数
famp: formInline.value.famp, //间谐波含有率
fphase: formInline.value.fphase // 间谐波相角
})
}
} else {
formInline.value.harm.forEach((item: any) => {
props.childForm[0].harmList.push({
harm: item, //间谐波次数
famp: formInline.value.famp, //间谐波含有率
fphase: formInline.value.fphase // 间谐波相角
})
})
const seen = new Set()
const uniqueData = []
// 反向遍历数组
for (let i = props.childForm[0].harmList.length - 1; i >= 0; i--) {
const item = props.childForm[0].harmList[i]
// 如果 harm 还未出现过,则添加到结果数组
if (!seen.has(item.harm)) {
seen.add(item.harm)
uniqueData.unshift(item) // 添加到结果数组的开头
}
}
props.childForm[0].harmList = uniqueData.sort((a, b) => a.harm - b.harm)
}
}
const onSubmit1 = () => {
if (formInline1.value.harm.length == 0 || formInline1.value.famp == '' || formInline1.value.fphase == '') {
ElMessage.warning('请填写值!')
return
}
if (formInline1.value.harm.includes('0')) {
props.childForm[1].harmList = []
for (let i = 2; i < 51; i++) {
props.childForm[1].harmList.push({
harm: i, //间谐波次数
famp: formInline1.value.famp, //间谐波含有率
fphase: formInline1.value.fphase // 间谐波相角
})
}
} else {
formInline1.value.harm.forEach((item: any) => {
props.childForm[1].harmList.push({
harm: item, //间谐波次数
famp: formInline1.value.famp, //间谐波含有率
fphase: formInline1.value.fphase // 间谐波相角
})
})
const seen = new Set()
const uniqueData = []
// 反向遍历数组
for (let i = props.childForm[1].harmList.length - 1; i >= 0; i--) {
const item = props.childForm[1].harmList[i]
// 如果 harm 还未出现过,则添加到结果数组
if (!seen.has(item.harm)) {
seen.add(item.harm)
uniqueData.unshift(item) // 添加到结果数组的开头
}
}
props.childForm[1].harmList = uniqueData.sort((a, b) => a.harm - b.harm)
}
}
// 删除
const HarmFlagDelete = (index: number, number: number) => {
props.childForm[index].harmList.splice(number, 1)
}
// 定义并初始化 tableData
const tableData1 = ref<TableItem[]>([])