374 lines
15 KiB
Vue
374 lines
15 KiB
Vue
<template>
|
|
<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].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 50" :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"
|
|
onkeypress="return (/[\d.]/.test(String.fromCharCode(event.keyCode)))"
|
|
@input="validateInput('famp',0)"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="相角">
|
|
<el-input
|
|
v-model="formInline.fphase"
|
|
type="number"
|
|
placeholder="相角"
|
|
style="width: 80px"
|
|
onkeypress="return (/[\d-]/.test(String.fromCharCode(event.keyCode)))"
|
|
@input="validateInput('fphase',0)"
|
|
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-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" style="height: 100%">
|
|
<el-tab-pane label="电流通道">
|
|
<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 50" :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"
|
|
onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
|
|
@input="validateInput('famp',1)"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="相角">
|
|
<el-input
|
|
v-model="formInline1.fphase"
|
|
type="number"
|
|
placeholder="相角"
|
|
style="width: 80px"
|
|
onkeypress="return (/[\d-]/.test(String.fromCharCode(event.keyCode)))"
|
|
@input="validateInput('fphase',1)"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" :icon="Check" @click="onSubmit1" size="small">确定</el-button>
|
|
<el-button type="primary" :icon="Delete" @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-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'
|
|
const props = defineProps({
|
|
childForm: {
|
|
type: Array as any,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const form: any = computed({
|
|
get() {
|
|
return props.childForm
|
|
},
|
|
set(value) {}
|
|
})
|
|
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 = []
|
|
|
|
// 反向遍历数组
|
|
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)
|
|
}
|
|
|
|
const validateInput = (type: string, index: number) => {
|
|
if (type == 'famp') {
|
|
if (Number(formInline.value.famp) < 0 || Number(formInline1.value.famp) < 0) {
|
|
ElMessage.warning("含有率不能低于0")
|
|
if (index == 0) {
|
|
formInline.value.famp = '0'
|
|
}
|
|
if (index == 1) {
|
|
formInline1.value.famp = '0'
|
|
}
|
|
}
|
|
if (Number(formInline.value.famp) > 200 || Number(formInline1.value.famp) > 200) {
|
|
ElMessage.warning("含有率不能高于200")
|
|
if (index == 0) {
|
|
formInline.value.famp = '200'
|
|
}
|
|
if (index == 1) {
|
|
formInline1.value.famp = '200'
|
|
}
|
|
}
|
|
}
|
|
if (type == 'fphase') {
|
|
if (Number(formInline.value.fphase) < -360 || Number(formInline1.value.fphase) < -360) {
|
|
ElMessage.warning("相角不能低于-360°")
|
|
if (index == 0) {
|
|
formInline.value.fphase = '-360';
|
|
}
|
|
if (index == 1) {
|
|
formInline1.value.fphase = '-360';
|
|
}
|
|
} else if (Number(formInline.value.fphase) > 360 || Number(formInline1.value.fphase) > 360) {
|
|
ElMessage.warning("相角不能高于360°")
|
|
if (index == 0) {
|
|
formInline.value.fphase = '360';
|
|
}
|
|
if (index == 1) {
|
|
formInline1.value.fphase = '360';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" 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; /* 最后一个表格不需要右侧间距 */
|
|
}
|
|
|
|
.input-label-container {
|
|
display: flex;
|
|
align-items: center; /* 垂直居中对齐 */
|
|
}
|
|
|
|
.input-label-container label {
|
|
margin-left: 5px; /* 添加标签与输入框之间的间距 */
|
|
}
|
|
// 全局css 加上以下代码，可以隐藏上下箭头
|
|
|
|
// 取消input的上下箭头
|
|
</style>
|