211 lines
9.1 KiB
Vue
211 lines
9.1 KiB
Vue
<template>
|
||
<div class="divider-container">
|
||
<el-divider style="width: 300px" content-position="left">检测脚本信息</el-divider>
|
||
<el-divider style="width: 400px" content-position="left">通讯脚本</el-divider>
|
||
<el-divider style="flex: 1" content-position="left">检测项目概要信息</el-divider>
|
||
</div>
|
||
<div class="data-check-content">
|
||
<div class="content-tree">
|
||
<Tree />
|
||
</div>
|
||
<div class="content-tree" style="width: 400px">
|
||
<Commun :options="props.options" />
|
||
</div>
|
||
|
||
<div class="content-right-Tabs" style="height: calc(100vh - 335px); width: 100px">
|
||
<el-tabs type="border-card" style="height: 100%" v-model="activeName">
|
||
<el-tab-pane v-for="tab in tabData" :key="tab.value" :label="tab.label" :name="tab.value">
|
||
<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>
|
||
<!-- 频率tab -->
|
||
<el-tabs type="border-card">
|
||
<el-tab-pane
|
||
v-for="subTab in tab.children || []"
|
||
:key="subTab.name"
|
||
:label="subTab.label"
|
||
:name="subTab.name"
|
||
>
|
||
<div class="table-container">
|
||
<el-table
|
||
:data="tableData"
|
||
:header-cell-style="{
|
||
textAlign: 'center',
|
||
backgroundColor: '#003078',
|
||
color: '#fff'
|
||
}"
|
||
:cell-style="{ textAlign: 'center' }"
|
||
height="calc(100vh - 515px)"
|
||
>
|
||
<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>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
|
||
<TestProjectPopup ref="testProjectPopup" :options="props.options" :activeName="activeName" @addTab="addTab" />
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { type PropType, ref, nextTick } from 'vue'
|
||
import Tree from './tree.vue'
|
||
import Commun from './communication.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'
|
||
|
||
interface TabOption {
|
||
label: string
|
||
name: string
|
||
value: string
|
||
children?: TabOption[]
|
||
}
|
||
|
||
const props = defineProps({
|
||
options: {
|
||
type: Array as PropType<TabOption[]>,
|
||
required: true
|
||
}
|
||
})
|
||
const activeName = ref('')
|
||
const testProjectPopup = ref()
|
||
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 tabData: any = ref([])
|
||
|
||
// 打开 drawer(新增、编辑)
|
||
const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> = {}) => {
|
||
if (titleType == 'add') {
|
||
}
|
||
testProjectPopup.value?.open(titleType, row)
|
||
}
|
||
// 新增保存
|
||
const addTab = (row: any) => {
|
||
let flag = false
|
||
let list: any = {}
|
||
tabData.value.forEach(item => {
|
||
if (item.value == activeName.value) {
|
||
list = item
|
||
item.children.forEach(k => {
|
||
if (k.value == row.value) {
|
||
flag = true
|
||
}
|
||
})
|
||
}
|
||
})
|
||
if (flag) {
|
||
list.children.push(row)
|
||
}
|
||
// if (tab.length == 0) {
|
||
// tabData.value.filter(item => item.value == activeName.value)[0].children?.push(row)
|
||
// }
|
||
}
|
||
onMounted(() => {
|
||
props.options.forEach(item => {
|
||
tabData.value.push({
|
||
label: item.label.replace(/准确度|检测/g, ''),
|
||
value: item.value,
|
||
children: []
|
||
})
|
||
})
|
||
activeName.value = tabData.value[0].value
|
||
})
|
||
</script>
|
||
<style scoped>
|
||
.data-check-content {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.content-tree {
|
||
width: 300px;
|
||
height: calc(100vh - 335px);
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
margin-right: 10px;
|
||
overflow: auto; /* 同时启用垂直和水平滚动 */
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* 确保 el-tree 内容可以超出容器宽度 */
|
||
.el-tree {
|
||
width: fit-content; /* 根据内容自适应宽度 */
|
||
}
|
||
|
||
.content-right-Tabs {
|
||
flex: 1; /* 根据需要调整宽度比例 */
|
||
}
|
||
|
||
.dialog-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.divider-container {
|
||
display: flex;
|
||
}
|
||
|
||
.divider-container .el-divider {
|
||
margin-right: 30px; /* 根据需要调整间距 */
|
||
}
|
||
:deep(.el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell) {
|
||
padding: 3px 11px;
|
||
}
|
||
</style>
|