修改检测脚本页面
This commit is contained in:
@@ -1,229 +1,260 @@
|
||||
<template>
|
||||
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" width="1400px">
|
||||
<div class="dialog-content" >
|
||||
<el-tabs type="border-card" class="left-tabs" style="height: 100%;">
|
||||
<el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" width="1400px">
|
||||
<div class="dialog-content">
|
||||
<el-tabs type="border-card" class="left-tabs" style="height: 100%">
|
||||
<el-tab-pane label="输出菜单">
|
||||
<!-- 输出菜单内容 -->
|
||||
<el-table :data="tableData"
|
||||
:header-cell-style="{ textAlign: 'center',backgroundColor: '#003078',color: '#fff' } "
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
style="width: 100%"
|
||||
:style="{ height: '295px',overflow:'hidden'}"
|
||||
:show-header="false"
|
||||
:span-method="arraySpanMethod">
|
||||
<el-table-column prop="sort" label="相别" width="60" />
|
||||
<el-table-column prop="frequency" label="电压/电流" width="90" />
|
||||
<el-table-column prop="L1" label="值" width="180"/>
|
||||
<el-table-column label="操作" width="80">
|
||||
<template #default="{ }">
|
||||
<el-button type="info" :icon="Bottom"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:header-cell-style="{ textAlign: 'center', backgroundColor: '#003078', color: '#fff' }"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
style="width: 100%"
|
||||
:style="{ height: '295px', overflow: 'hidden' }"
|
||||
:show-header="false"
|
||||
:span-method="arraySpanMethod"
|
||||
>
|
||||
<el-table-column prop="sort" label="相别" width="60" />
|
||||
<el-table-column prop="frequency" label="电压/电流" width="90" />
|
||||
<el-table-column prop="L1" label="值" width="180" />
|
||||
<el-table-column label="操作" width="80">
|
||||
<template #default="{}">
|
||||
<el-button type="info" :icon="Bottom"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-tabs type="border-card" class="right-tabs" style="height: 100%;">
|
||||
<el-tabs type="border-card" class="right-tabs" style="height: 100%">
|
||||
<el-tab-pane label="全局设置菜单">
|
||||
<!-- 全局设置菜单内容 -->
|
||||
<div class="form-item-container">
|
||||
<el-form-item label="频率：" prop='name'>
|
||||
<div class="input-label-container">
|
||||
<el-input style="width: 100px;" />
|
||||
<label>Hz</label>
|
||||
<!-- 全局设置菜单内容 -->
|
||||
<div style="height: 295px;">
|
||||
<div class="form-item-container">
|
||||
<el-form-item label="频率：" prop="name">
|
||||
<div class="input-label-container">
|
||||
<el-input style="width: 100px" />
|
||||
<label>Hz</label>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="button-label-container">
|
||||
<label>参考设定值列表:</label>
|
||||
<el-button type="primary" :icon="EditPen" @click="openDialog">编辑</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="button-label-container">
|
||||
<label>参考设定值列表:</label>
|
||||
<el-button type="primary" :icon='EditPen' @click="openDialog">编辑</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div style="margin-top: 20px;">
|
||||
<el-tabs type="border-card" class="custom-tabs">
|
||||
<el-tab-pane label="电压/电流编辑">
|
||||
<TestScriptVolCurTab/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="谐波编辑">
|
||||
<TestScriptHarmTab/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="间谐波编辑">
|
||||
<TestScriptInHarmTab/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="闪变编辑">
|
||||
<TestScriptFlickerTab/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="暂态编辑">
|
||||
<TestScriptDipTab/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<SetValueTable ref="setValueTable"/>
|
||||
</div>
|
||||
<div style="margin-top: 10px">
|
||||
<el-tabs type="border-card" class="custom-tabs">
|
||||
<el-tab-pane label="电压/电流编辑">
|
||||
<TestScriptVolCurTab />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="谐波编辑">
|
||||
<TestScriptHarmTab />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="间谐波编辑">
|
||||
<TestScriptInHarmTab />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="闪变编辑">
|
||||
<TestScriptFlickerTab />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="暂态编辑">
|
||||
<TestScriptDipTab />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div >
|
||||
<el-button @click='close()'>取 消</el-button>
|
||||
<el-button type="primary" @click='save()'>保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<SetValueTable ref="setValueTable" />
|
||||
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button @click="close()">取 消</el-button>
|
||||
<el-button type="primary" @click="save()">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
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 { 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';
|
||||
|
||||
import SetValueTable from '@/views/machine/testScript/components/setValueTable.vue'
|
||||
import { EditPen, ArrowDown, Bottom } 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 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 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 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°'},
|
||||
]
|
||||
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°' }
|
||||
]
|
||||
|
||||
// 定义 span-method 逻辑
|
||||
const arraySpanMethod = ({ rowIndex, columnIndex }: { rowIndex: number; columnIndex: number }) => {
|
||||
if (columnIndex === 0 || columnIndex === 3) { // 第一列
|
||||
if (rowIndex % 2 === 0) {
|
||||
return {
|
||||
rowspan: 2,
|
||||
colspan: 1
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0
|
||||
};
|
||||
if (columnIndex === 0 || columnIndex === 3) {
|
||||
// 第一列
|
||||
if (rowIndex % 2 === 0) {
|
||||
return {
|
||||
rowspan: 2,
|
||||
colspan: 1
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
// 切换按钮类型
|
||||
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 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 close = () => {
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
|
||||
// 保存数据
|
||||
const save = () => {
|
||||
|
||||
}
|
||||
|
||||
|
||||
const save = () => {}
|
||||
|
||||
// 打开弹窗，可能是新增，也可能是编辑
|
||||
const open = (sign: string,row: any) => {
|
||||
const open = (sign: string, row: any) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = sign === 'add'? '新增检测项目信息' : '编辑检测项目信息'
|
||||
dialogTitle.value = sign === 'add' ? '新增检测项目信息' : '编辑检测项目信息'
|
||||
|
||||
// 初始化按钮类型
|
||||
tableData.forEach((_, index) => {
|
||||
buttonTypes[index] = {
|
||||
channel: 'info',
|
||||
harmonic: 'info',
|
||||
interHarmonic: 'info',
|
||||
flicker: 'info',
|
||||
transient: 'info'
|
||||
};
|
||||
});
|
||||
tableData.forEach((_, index) => {
|
||||
buttonTypes[index] = {
|
||||
channel: 'info',
|
||||
harmonic: 'info',
|
||||
interHarmonic: 'info',
|
||||
flicker: 'info',
|
||||
transient: 'info'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 打开 drawer(新增、编辑)
|
||||
const openDialog = () => {
|
||||
setValueTable.value?.open()
|
||||
setValueTable.value?.open()
|
||||
}
|
||||
|
||||
|
||||
// 对外映射
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog-content {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left-tabs {
|
||||
flex: 3; /* 左侧 tab 占据 3/4 的宽度 */
|
||||
margin-right: 10px; /* 可选：添加间距 */
|
||||
flex: 3; /* 左侧 tab 占据 3/4 的宽度 */
|
||||
margin-right: 10px; /* 可选：添加间距 */
|
||||
}
|
||||
|
||||
.right-tabs {
|
||||
flex: 1; /* 右侧 tab 占据 1/4 的宽度 */
|
||||
flex: 1; /* 右侧 tab 占据 1/4 的宽度 */
|
||||
}
|
||||
|
||||
.form-item-container {
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
margin-bottom: 10px; /* 可选：添加间距 */
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
margin-bottom: 10px; /* 可选：添加间距 */
|
||||
}
|
||||
|
||||
.button-label-container {
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
}
|
||||
|
||||
.button-label-container label {
|
||||
margin-right: 10px; /* 按钮和文字之间的距离 */
|
||||
margin-right: 10px; /* 按钮和文字之间的距离 */
|
||||
}
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user