修改检测脚本页面

This commit is contained in:
GGJ
2025-02-17 16:44:02 +08:00
parent 5c012c2bc9
commit 92b9a82f21
8 changed files with 289 additions and 151 deletions

View File

@@ -1,8 +1,8 @@
<template>
<el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" width="1500px">
<el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" width="1400px">
<div class="dialog-content">
<el-tabs type="border-card" class="right-tabs" style="height: 100%">
<el-tab-pane label="全局设置菜单">
<el-tab-pane label="检测">
<!-- 全局设置菜单内容 -->
<div style="height: 295px">
<el-radio-group v-model="radio">
@@ -30,48 +30,30 @@
:span-method="arraySpanMethod"
:cell-style="tableStyle.cellStyle"
:header-cell-style="{ textAlign: 'center', backgroundColor: '#003078', color: '#fff' }"
@row-click="handleRowClick"
@cell-click="handleRowClick"
>
<el-table-column prop="sort" label="相别" width="60" align="center" />
<el-table-column prop="frequency" label="电压/电流" align="center" width="90" />
<el-table-column prop="L1" label="值" width="180" align="center" />
<el-table-column label="操作" width="80">
<el-table-column prop="name" label="相别" width="60" align="center" />
<el-table-column prop="frequency" label="电压/电流" align="center" width="60" />
<el-table-column prop="L1" label="值" width="180" align="center">
<template #default="{ row, $index }">
<span>
{{ row.frequency === 'V' ? '电压' : '电流' }}{{ form.children[$index].fAmp
}}{{ row.frequency === 'V' ? 'V' : 'A' }} 相角{{ form.children[$index].fPhase }}°
</span>
</template>
</el-table-column>
<el-table-column label="操作" width="85">
<template #default="{}">
<el-button type="primary" :icon="Bottom"></el-button>
<el-button type="primary" link :icon="Bottom">复制</el-button>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="{ row, $index }">
<el-button
:type="buttonTypes[$index].channel || 'info'"
@click="toggleType(row, $index, 'channel')"
>
通道使能
</el-button>
<el-button
:type="buttonTypes[$index]?.harmonic || 'info'"
@click="toggleType(row, $index, 'harmonic')"
>
谐波使能
</el-button>
<el-button
:type="buttonTypes[$index]?.interHarmonic || 'info'"
@click="toggleType(row, $index, 'interHarmonic')"
>
间谐波使能
</el-button>
<el-button
:type="buttonTypes[$index]?.flicker || 'info'"
@click="toggleType(row, $index, 'flicker')"
>
闪变使能
</el-button>
<el-button
:type="buttonTypes[$index]?.transient || 'info'"
@click="toggleType(row, $index, 'transient')"
>
暂态使能
</el-button>
<el-checkbox-group v-model="form.children[$index].checkboxGroup">
<el-checkbox-button v-for="item in GroupList" :key="item.value" :value="item.value">
{{ item.label }}
</el-checkbox-button>
</el-checkbox-group>
</template>
</el-table-column>
</el-table>
@@ -84,7 +66,7 @@
<div class="form-item-container">
<el-form-item label="频率:" prop="name">
<div class="input-label-container">
<el-input style="width: 100px" />
<el-input style="width: 100px" v-model="form.fFreq" />
<label>Hz</label>
</div>
</el-form-item>
@@ -100,19 +82,19 @@
<div style="margin-top: 10px">
<el-tabs type="border-card" class="custom-tabs">
<el-tab-pane label="电压/电流编辑">
<TestScriptVolCurTab />
<TestScriptVolCurTab :childForm="childForm" />
</el-tab-pane>
<el-tab-pane label="谐波编辑">
<TestScriptHarmTab />
<TestScriptHarmTab :childForm="childForm" />
</el-tab-pane>
<el-tab-pane label="间谐波编辑">
<TestScriptInHarmTab />
<TestScriptInHarmTab :childForm="childForm" />
</el-tab-pane>
<el-tab-pane label="闪变编辑">
<TestScriptFlickerTab />
<TestScriptFlickerTab :childForm="childForm" />
</el-tab-pane>
<el-tab-pane label="暂态编辑">
<TestScriptDipTab />
<TestScriptDipTab :childForm="childForm" />
</el-tab-pane>
</el-tabs>
</div>
@@ -132,13 +114,14 @@
import { dialogBig } from '@/utils/elementBind'
import { onMounted, reactive, ref } from 'vue'
import SetValueTable from '@/views/machine/testScript/components/setValueTable.vue'
import { EditPen, ArrowDown, Bottom } from '@element-plus/icons-vue'
import { EditPen, ArrowDown, Bottom, CopyDocument } from '@element-plus/icons-vue'
import { type TabsInstance } from 'element-plus'
import TestScriptVolCurTab from '@/views/machine/testScript/components/testScriptVolCurTab.vue'
import TestScriptHarmTab from '@/views/machine/testScript/components/testScriptHarmTab.vue'
import TestScriptInHarmTab from '@/views/machine/testScript/components/testScriptInHarmTab.vue'
import TestScriptFlickerTab from '@/views/machine/testScript/components/testScriptFlickerTab.vue'
import TestScriptDipTab from '@/views/machine/testScript/components/testScriptDipTab.vue'
const emit = defineEmits(['addTab'])
interface TabOption {
label: string
@@ -157,34 +140,105 @@ const props = defineProps({
required: true
}
})
const form = ref({
const GroupList = [
{
label: '通道使能',
value: 'channelFlag'
},
{
label: '谐波使能',
value: 'harmFlag'
},
{
label: '间谐波使能',
value: 'inHarmFlag'
},
{
label: '闪变使能',
value: 'flickerFlag'
},
{
label: '暂态使能',
value: 'dipFlag'
}
]
const form: any = ref({
value: '',
label: ''
label: '',
fFreq: 50,
children: [
{
checkboxGroup: ['channelFlag','harmFlag'],//通道选择
fAmp: 0, //幅值
fPhase: 0, //相角
harmList: [
{
harm: 1, //谐波次数
fAmp: 0, //谐波含有率
fPhase: 0 // 谐波相角
}
], //谐波
inHarmList: [
{
inharm: 1, //间谐波次数
fAmp: 0, //间谐波含有率
fPhase: 0 // 间谐波相角
}
], //间谐波
flickerData: {
fChagValue: 0,//电压变动幅度
fChagFre: 0, //波动频度
waveFluType: 0, //波动类型
waveType: 0, //波类型
fDutyCycle: 0, //占空比
}, //闪变
dipData: {
fTransValue: 0, // 暂态幅值
fRetainTime: 0 // 暂态持续时间
} //暂态
},
{
checkboxGroup: [],
fAmp: 0,
fPhase: 0
},
{
checkboxGroup: [],
fAmp: 0,
fPhase: 0
},
{
checkboxGroup: [],
fAmp: 0,
fPhase: 0
},
{
checkboxGroup: [],
fAmp: 0,
fPhase: 0
},
{
checkboxGroup: [],
fAmp: 0,
fPhase: 0
}
]
})
const childForm: any = ref([])
const dialogVisible = ref(false)
const dialogTitle = ref()
const setValueTable = ref()
const buttonTypeOptions = ['default', 'text', 'success', 'warning', 'info', 'primary', 'danger'] as const
type ButtonType = (typeof buttonTypeOptions)[number]
// 初始化按钮类型
const buttonTypes = reactive<{
[key: number]: {
channel: ButtonType
harmonic: ButtonType
interHarmonic: ButtonType
flicker: ButtonType
transient: ButtonType
}
}>({})
const tableData = [
{ sort: 'L1', frequency: 'V', L1: '电压:57.75V 相角:0°' },
{ sort: 'L1', frequency: 'I', L1: '电压:57.75V 相角:0°' },
{ sort: 'L2', frequency: 'V', L1: '电压:57.75V 相角:0°' },
{ sort: 'L2', frequency: 'I', L1: '电压:57.75V 相角:0°' },
{ sort: 'L3', frequency: 'V', L1: '电压:57.75V 相角:0°' },
{ sort: 'L3', frequency: 'I', L1: '电压:57.75V 相角:0°' }
{ name: 'L1', frequency: 'V', electricity: 0, fPhase: 0, sort: 0 },
{ name: 'L1', frequency: 'I', electricity: 0, fPhase: 0, sort: 0 },
{ name: 'L2', frequency: 'V', electricity: 0, fPhase: 0, sort: 1 },
{ name: 'L2', frequency: 'I', electricity: 0, fPhase: 0, sort: 1 },
{ name: 'L3', frequency: 'V', electricity: 0, fPhase: 0, sort: 2 },
{ name: 'L3', frequency: 'I', electricity: 0, fPhase: 0, sort: 2 }
]
const radio = ref('')
const tabChildren: any = ref([])
@@ -205,28 +259,24 @@ const arraySpanMethod = ({ rowIndex, columnIndex }: { rowIndex: number; columnIn
}
}
}
const selectedRow = ref('L1')
const selectedRow = ref('')
const tableStyle = {
cellStyle: ({ row }: { row: any }) => {
return row.sort === selectedRow.value
return row.name === selectedRow.value
? { backgroundColor: '#dcdcdc' } // 设置选中行的背景颜色
: {}
}
}
const handleRowClick = async (row: any) => {
selectedRow.value = row.sort
}
// 切换按钮类型
const toggleType = (
row: any,
$index: number,
buttonType: 'channel' | 'harmonic' | 'interHarmonic' | 'flicker' | 'transient'
) => {
if ($index !== undefined) {
const currentType = buttonTypes[$index][buttonType]
buttonTypes[$index][buttonType] = currentType === 'info' ? 'primary' : 'info'
const handleRowClick = async (row: any, column: any) => {
if (column.label == '相别') {
childForm.value = []
selectedRow.value = row.name
childForm.value.push(form.value.children[row.sort * 2])
childForm.value.push(form.value.children[row.sort * 2 + 1])
console.log('🚀 ~ handleRowClick ~ childForm.value:', childForm.value)
}
// childForm.value = row
}
// 关闭弹窗
@@ -236,6 +286,7 @@ const close = () => {
// 保存数据
const save = () => {
dialogVisible.value = false
form.value.value = radio.value
form.value.label = tabChildren.value.filter(item => item.value == radio.value)[0].label
emit('addTab', form.value)
@@ -245,19 +296,10 @@ const save = () => {
const open = (sign: string, row: any) => {
dialogVisible.value = true
dialogTitle.value = sign === 'add' ? '新增检测项目信息' : '编辑检测项目信息'
// 初始化按钮类型
tableData.forEach((_, index) => {
buttonTypes[index] = {
channel: 'info',
harmonic: 'info',
interHarmonic: 'info',
flicker: 'info',
transient: 'info'
}
})
// 添加选择检测项目
tabChildren.value = props.options.filter(item => item.value == props.activeName)[0].children || []
radio.value = tabChildren.value[0].value || ''
handleRowClick({ name: 'L1', sort: 0 }, { label: '相别' })
}
// 打开 drawer(新增、编辑)
@@ -285,7 +327,7 @@ defineExpose({ open })
}
.left-tabs {
width: 980px;
width: 900px;
margin: 0 10px; /* 可选:添加间距 */
}