修改检测脚本页面
This commit is contained in:
@@ -1,266 +1,288 @@
|
||||
<template>
|
||||
<div class="divider-container">
|
||||
<el-divider style="width: 400px">检测脚本信息</el-divider>
|
||||
<el-divider style="width: 1300px">检测项目概要信息</el-divider>
|
||||
</div>
|
||||
<div class="divider-container">
|
||||
<el-divider style="width: 400px">检测脚本信息</el-divider>
|
||||
<el-divider style="width: 1300px">检测项目概要信息</el-divider>
|
||||
</div>
|
||||
<div class="data-check-content">
|
||||
<div class="content-tree" >
|
||||
<el-tree
|
||||
:default-expanded-keys="['0', '0-1', '0-2', '0-3', '1']"
|
||||
node-key="id"
|
||||
:data="data"
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick" />
|
||||
<div class="content-tree">
|
||||
<Tree />
|
||||
</div>
|
||||
|
||||
<div class="content-right-Tabs" style="height: 570px; width: 100px">
|
||||
<el-tabs type="border-card" style="height: 100%">
|
||||
<el-tab-pane
|
||||
v-for="tab in props.options"
|
||||
:key="tab.name"
|
||||
:label="tab.label.replace(/准确度|检测/g, '')"
|
||||
:name="tab.name"
|
||||
>
|
||||
<!-- 频率tab -->
|
||||
<el-tabs type="border-card" style="height: 500px">
|
||||
<el-tab-pane
|
||||
v-for="subTab in tab.children || []"
|
||||
:key="subTab.name"
|
||||
:label="subTab.label"
|
||||
:name="subTab.name"
|
||||
>
|
||||
<!-- 子标签页内容 -->
|
||||
<div class="dialog-footer">
|
||||
<el-button :icon="CirclePlus" type="primary" @click="openDialog('add')">新增</el-button>
|
||||
<el-button :icon="CirclePlus" type="primary" @click="openAddDialog()">
|
||||
保存测试项
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:header-cell-style="{
|
||||
textAlign: 'center',
|
||||
backgroundColor: '#003078',
|
||||
color: '#fff'
|
||||
}"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
style="width: 100%"
|
||||
:style="{ height: '390px', overflow: 'hidden' }"
|
||||
>
|
||||
<el-table-column prop="sort" label="组次" width="60" />
|
||||
<el-table-column prop="frequency" label="频率(Hz)" width="100" />
|
||||
<el-table-column prop="L1" label="L1">
|
||||
<template #default="scope">
|
||||
<el-descriptions border :column="1" size="small">
|
||||
<el-descriptions-item label="V">0.000V 0.000°</el-descriptions-item>
|
||||
<el-descriptions-item label=" I">0.000A 0.000°</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="L2" label="L2">
|
||||
<template #default="scope">
|
||||
<el-descriptions border :column="1" size="small">
|
||||
<el-descriptions-item label="V">0.000V 0.000°</el-descriptions-item>
|
||||
<el-descriptions-item label=" I">0.000A 0.000°</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="L3" label="L3">
|
||||
<template #default="scope">
|
||||
<el-descriptions border :column="1" size="small">
|
||||
<el-descriptions-item label="V">0.000V 0.000°</el-descriptions-item>
|
||||
<el-descriptions-item label=" I">0.000A 0.000°</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link :icon="CopyDocument" @click="copyRow(row)">
|
||||
复制
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
:icon="CopyDocument"
|
||||
@click="openAddDialog('edit', row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button type="primary" link :icon="Delete" @click="deleteRow(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- <div class="dialog-footer" style="margin-top: 20px;">
|
||||
|
||||
</div> -->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<div class="content-right-Tabs" style="height: 470px;width: 100px;">
|
||||
<el-tabs type="border-card" style="height: 100%;">
|
||||
<el-tab-pane
|
||||
v-for="tab in props.options"
|
||||
:key="tab.name"
|
||||
:label="tab.label.replace(/准确度|检测/g, '')"
|
||||
:name="tab.name">
|
||||
<!-- 频率tab -->
|
||||
<el-tabs type="border-card" style="height: 400px;">
|
||||
<el-tab-pane
|
||||
v-for="subTab in tab.children || []"
|
||||
:key="subTab.name"
|
||||
:label="subTab.label"
|
||||
:name="subTab.name">
|
||||
<!-- 子标签页内容 -->
|
||||
<div class="dialog-footer">
|
||||
<el-button :icon='CirclePlus' type="primary" @click="openDialog('add')">新增</el-button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<el-table :data="tableData"
|
||||
:header-cell-style="{ textAlign: 'center',backgroundColor: '#003078',color: '#fff' } "
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
style="width: 100%"
|
||||
:style="{ height: '240px',overflow:'hidden'}">
|
||||
<el-table-column prop="sort" label="组次" width="60" />
|
||||
<el-table-column prop="frequency" label="频率(Hz)" width="100" />
|
||||
<el-table-column prop="L1" label="L1"/>
|
||||
<el-table-column prop="L2" label="L2"/>
|
||||
<el-table-column prop="L3" label="L3"/>
|
||||
<el-table-column label="操作" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link :icon='CopyDocument' @click="copyRow(row)">复制</el-button>
|
||||
<el-button type="primary" link :icon='CopyDocument' @click="openAddDialog('edit',row)">编辑</el-button>
|
||||
<el-button type='primary' link :icon='Delete' @click="deleteRow(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="dialog-footer" style="margin-top: 20px;">
|
||||
<el-button :icon='CirclePlus' type="primary" @click="openAddDialog()">保存测试项</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TestProjectPopup ref="testProjectPopup" />
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type PropType, ref } from 'vue';
|
||||
import { data } from "@/api/plan/autoTest.json";
|
||||
import type { CascaderOption } from 'element-plus';
|
||||
import {CirclePlus, Delete, EditPen,CopyDocument} from '@element-plus/icons-vue'
|
||||
import type { TestScript } from '@/api/device/interface/testScript';
|
||||
import TestProjectPopup from '@/views/machine/testScript/components/testProjectPopup.vue';
|
||||
import { type PropType, ref } from 'vue'
|
||||
import Tree from './tree.vue'
|
||||
import type { CascaderOption } from 'element-plus'
|
||||
import { CirclePlus, Delete, EditPen, CopyDocument } from '@element-plus/icons-vue'
|
||||
import type { TestScript } from '@/api/device/interface/testScript'
|
||||
import TestProjectPopup from '@/views/machine/testScript/components/testProjectPopup.vue'
|
||||
|
||||
const testProjectPopup = ref()
|
||||
|
||||
interface TabOption {
|
||||
label: string;
|
||||
name: string;
|
||||
children?: TabOption[];
|
||||
label: string
|
||||
name: string
|
||||
children?: TabOption[]
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array as PropType<TabOption[]>,
|
||||
required: true
|
||||
},
|
||||
});
|
||||
|
||||
const tableData= [
|
||||
{ sort: 1, frequency: 42.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
|
||||
{ sort: 2, frequency: 50, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
|
||||
{ sort: 3, frequency: 50.05, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
|
||||
{ sort: 4, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
|
||||
{ sort: 5, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
|
||||
{ sort: 6, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
|
||||
]
|
||||
type: Array as PropType<TabOption[]>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const tableData = [
|
||||
{ sort: 1, frequency: 42.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
|
||||
{ sort: 2, frequency: 50, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
|
||||
{ sort: 3, frequency: 50.05, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
|
||||
{ sort: 4, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
|
||||
{ sort: 5, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
|
||||
{ sort: 6, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' }
|
||||
]
|
||||
|
||||
const tabs = ref([
|
||||
{
|
||||
label: '频率',
|
||||
name: 'resultTab',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '电压',
|
||||
name: 'resultTab1',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab1' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab1' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab1' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '电流',
|
||||
name: 'resultTab2',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab2' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab2' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab2' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '电压不平衡度',
|
||||
name: 'resultTab3',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab3' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab3' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab3' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '电流不平衡度',
|
||||
name: 'resultTab4',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab4' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab4' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab4' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '谐波电压',
|
||||
name: 'resultTab5',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab5' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab5' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab5' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '谐波电流',
|
||||
name: 'resultTab6',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab6' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab6' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab6' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '间谐波电压',
|
||||
name: 'resultTab7',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab7' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab7' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab7' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '间谐波电流',
|
||||
name: 'resultTab8',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab8' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab8' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab8' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '电压暂升暂降',
|
||||
name: 'resultTab9',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab9' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab9' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab9' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '闪变',
|
||||
name: 'resultTab10',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab10' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab10' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab10' }
|
||||
]
|
||||
}
|
||||
]);
|
||||
{
|
||||
label: '频率',
|
||||
name: 'resultTab',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '电压',
|
||||
name: 'resultTab1',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab1' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab1' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab1' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '电流',
|
||||
name: 'resultTab2',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab2' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab2' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab2' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '电压不平衡度',
|
||||
name: 'resultTab3',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab3' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab3' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab3' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '电流不平衡度',
|
||||
name: 'resultTab4',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab4' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab4' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab4' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '谐波电压',
|
||||
name: 'resultTab5',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab5' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab5' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab5' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '谐波电流',
|
||||
name: 'resultTab6',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab6' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab6' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab6' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '间谐波电压',
|
||||
name: 'resultTab7',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab7' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab7' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab7' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '间谐波电流',
|
||||
name: 'resultTab8',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab8' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab8' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab8' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '电压暂升暂降',
|
||||
name: 'resultTab9',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab9' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab9' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab9' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '闪变',
|
||||
name: 'resultTab10',
|
||||
subTabs: [
|
||||
{ label: '额度工作条件下的检测', name: 'quotaConditionTab10' },
|
||||
{ label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab10' },
|
||||
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab10' }
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
const defaultProps = {
|
||||
children: "children",
|
||||
label: "name",
|
||||
pid: "pid",
|
||||
};
|
||||
|
||||
const handleNodeClick = (data: any) => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
// 打开 drawer(新增、编辑)
|
||||
const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> = {}) => {
|
||||
testProjectPopup.value?.open(titleType, row)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.data-check-content {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.content-tree {
|
||||
width: 300px;
|
||||
height: 470px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
overflow: auto; /* 同时启用垂直和水平滚动 */
|
||||
overflow-x: auto; /* 确保水平滚动条生效 */
|
||||
width: 300px;
|
||||
height: 560px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
overflow: auto; /* 同时启用垂直和水平滚动 */
|
||||
overflow-x: auto; /* 确保水平滚动条生效 */
|
||||
}
|
||||
|
||||
/* 确保 el-tree 内容可以超出容器宽度 */
|
||||
.el-tree {
|
||||
width: fit-content; /* 根据内容自适应宽度 */
|
||||
width: fit-content; /* 根据内容自适应宽度 */
|
||||
}
|
||||
|
||||
.content-right-Tabs {
|
||||
flex: 1; /* 根据需要调整宽度比例 */
|
||||
flex: 1; /* 根据需要调整宽度比例 */
|
||||
}
|
||||
|
||||
.dialog-footer{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 10px;
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.divider-container {
|
||||
display: flex;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.divider-container .el-divider {
|
||||
margin-right: 30px; /* 根据需要调整间距 */
|
||||
margin-right: 30px; /* 根据需要调整间距 */
|
||||
}
|
||||
:deep(.el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell) {
|
||||
padding: 3px 11px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user