联调检测脚本页面
This commit is contained in:
@@ -1,103 +1,266 @@
|
||||
<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 :formContent="props.formContent" />
|
||||
<div>
|
||||
<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="content-tree" style="width: 400px">
|
||||
<Commun :options="props.options" />
|
||||
<div class="data-check-content">
|
||||
<div class="content-tree">
|
||||
<Tree :treeData="treeData" />
|
||||
</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" @tab-change="tabChange">
|
||||
<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 -->
|
||||
<!-- {{ tab.children }} -->
|
||||
<el-tabs type="border-card" v-model="childActiveName" @tab-change="inquireTable">
|
||||
<el-tab-pane
|
||||
v-for="subTab in tab.children || []"
|
||||
:key="subTab.value"
|
||||
:label="subTab.label"
|
||||
:name="subTab.value"
|
||||
>
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:header-cell-style="{
|
||||
textAlign: 'center',
|
||||
backgroundColor: '#003078',
|
||||
color: '#fff'
|
||||
}"
|
||||
stripe
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
height="calc(100vh - 515px)"
|
||||
>
|
||||
<el-table-column type="index" label="组次" width="60" />
|
||||
<el-table-column prop="ffreq" label="频率(Hz)" width="100" />
|
||||
<el-table-column :label="item.label" v-for="item in column" :key="item.label">
|
||||
<template #default="{ row }">
|
||||
<table class="tableL">
|
||||
<tr>
|
||||
<td class="theFirst">V</td>
|
||||
<td>
|
||||
{{
|
||||
row.channelList[item.num]?.famp
|
||||
? '电压=' +
|
||||
row.channelList[item.num]?.famp +
|
||||
(valueCode == 'Absolute' ? 'V' : '%')
|
||||
: '/'
|
||||
}}
|
||||
</td>
|
||||
<td>
|
||||
{{
|
||||
row.channelList[item.num]?.fphase
|
||||
? '电流=' + row.channelList[item.num]?.fphase + '°'
|
||||
: '/'
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="theFirst">I</td>
|
||||
<td>
|
||||
{{
|
||||
row.channelList[item.num + 1]?.famp
|
||||
? '电压=' +
|
||||
row.channelList[item.num + 1]?.famp +
|
||||
(valueCode == 'Absolute' ? 'V' : '%')
|
||||
: '/'
|
||||
}}
|
||||
</td>
|
||||
<td>
|
||||
{{
|
||||
row.channelList[item.num + 1]?.fphase
|
||||
? '电流=' +
|
||||
row.channelList[item.num + 1]?.fphase +
|
||||
'°'
|
||||
: '/'
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="L1">
|
||||
<template #default="{ row }">
|
||||
<table class="tableL">
|
||||
<tr>
|
||||
<td class="theFirst">V</td>
|
||||
<td>
|
||||
{{
|
||||
row.channelList[0]?.famp
|
||||
? '电压=' +
|
||||
row.channelList[0]?.famp +
|
||||
(valueCode == 'Absolute' ? 'V' : '%')
|
||||
: '/'
|
||||
}}
|
||||
</td>
|
||||
<td>
|
||||
{{
|
||||
row.channelList[0]?.fphase
|
||||
? '电流=' + row.channelList[0]?.fphase + '°'
|
||||
: '/'
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="theFirst">I</td>
|
||||
<td>
|
||||
{{
|
||||
row.channelList[1]?.famp
|
||||
? '电压=' +
|
||||
row.channelList[1]?.famp +
|
||||
(valueCode == 'Absolute' ? 'V' : '%')
|
||||
: '/'
|
||||
}}
|
||||
</td>
|
||||
<td>
|
||||
{{
|
||||
row.channelList[1]?.fphase
|
||||
? '电流=' + row.channelList[1]?.fphase + '°'
|
||||
: '/'
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="L2">
|
||||
<template #default="{ row }">
|
||||
<table class="tableL">
|
||||
<tr>
|
||||
<td class="theFirst">V</td>
|
||||
<td>
|
||||
{{
|
||||
row.channelList[2]?.famp
|
||||
? '电压=' +
|
||||
row.channelList[2]?.famp +
|
||||
(valueCode == 'Absolute' ? 'V' : '%')
|
||||
: '/'
|
||||
}}
|
||||
</td>
|
||||
<td>
|
||||
{{
|
||||
row.channelList[2]?.fphase
|
||||
? '电流=' + row.channelList[2]?.fphase + '°'
|
||||
: '/'
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="theFirst">I</td>
|
||||
<td>
|
||||
{{
|
||||
row.channelList[3]?.famp
|
||||
? '电压=' +
|
||||
row.channelList[3]?.famp +
|
||||
(valueCode == 'Absolute' ? 'V' : '%')
|
||||
: '/'
|
||||
}}
|
||||
</td>
|
||||
<td>
|
||||
{{
|
||||
row.channelList[3]?.fphase
|
||||
? '电流=' + row.channelList[3]?.fphase + '°'
|
||||
: '/'
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="L3" label="L3">
|
||||
<template #default="{ row }">
|
||||
<table class="tableL">
|
||||
<tr>
|
||||
<td class="theFirst">V</td>
|
||||
<td>
|
||||
{{
|
||||
row.channelList[4]?.famp
|
||||
? '电压=' +
|
||||
row.channelList[4]?.famp +
|
||||
(valueCode == 'Absolute' ? 'V' : '%')
|
||||
: '/'
|
||||
}}
|
||||
</td>
|
||||
<td>
|
||||
{{
|
||||
row.channelList[4]?.fphase
|
||||
? '电流=' + row.channelList[4]?.fphase + '°'
|
||||
: '/'
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="theFirst">I</td>
|
||||
<td>
|
||||
{{
|
||||
row.channelList[5]?.famp
|
||||
? '电压=' +
|
||||
row.channelList[5]?.famp +
|
||||
(valueCode == 'Absolute' ? 'V' : '%')
|
||||
: '/'
|
||||
}}
|
||||
</td>
|
||||
<td>
|
||||
{{
|
||||
row.channelList[5]?.fphase
|
||||
? '电流=' + row.channelList[5]?.fphase + '°'
|
||||
: '/'
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="操作" width="210">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<TestProjectPopup
|
||||
ref="testProjectPopupRef"
|
||||
:options="props.options"
|
||||
:activeName="activeName"
|
||||
@addTab="addTab"
|
||||
:formContent="props.formContent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TestProjectPopup
|
||||
ref="testProjectPopupRef"
|
||||
:options="props.options"
|
||||
:activeName="activeName"
|
||||
@addTab="addTab"
|
||||
:formContent="props.formContent"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -105,10 +268,13 @@ import { type PropType, ref, nextTick } from 'vue'
|
||||
import Tree from './tree.vue'
|
||||
import Commun from './communication.vue'
|
||||
import type { CascaderOption } from 'element-plus'
|
||||
import { getTreeData } from '@/api/check/test'
|
||||
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 { CheckData } from '@/api/check/interface'
|
||||
import { dlsDetails } from '@/api/device/testScript'
|
||||
import { useDictStore } from '@/stores/modules/dict'
|
||||
interface TabOption {
|
||||
label?: string
|
||||
name?: string
|
||||
@@ -116,7 +282,8 @@ interface TabOption {
|
||||
code?: string
|
||||
children?: TabOption[]
|
||||
}
|
||||
|
||||
const treeData = ref<CheckData.TreeItem[]>([])
|
||||
const valueCode = ref('') //Absolute绝对值
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array as PropType<TabOption[]>,
|
||||
@@ -127,27 +294,109 @@ const props = defineProps({
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const dictStore = useDictStore()
|
||||
const activeName = ref('')
|
||||
const childActiveName = ref('')
|
||||
const testProjectPopupRef = 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 tableData: any = ref([])
|
||||
const tabData: any = ref([])
|
||||
const column = ref([
|
||||
{
|
||||
label: 'L1',
|
||||
num: 0
|
||||
},
|
||||
{
|
||||
label: 'L2',
|
||||
num: 2
|
||||
},
|
||||
{
|
||||
label: 'L3',
|
||||
num: 4
|
||||
}
|
||||
])
|
||||
// 获取树
|
||||
const getTree = () => {
|
||||
getTreeData({
|
||||
scriptId: props.formContent.id
|
||||
}).then(res => {
|
||||
if (res.code === 'A0000') {
|
||||
treeData.value = res.data
|
||||
// 添加tab子项
|
||||
props.options.forEach((k: any, i: number) => {
|
||||
tabData.value[i].children = []
|
||||
treeData.value.forEach((item: any) => {
|
||||
if (k.value == item.scriptTypeCode) {
|
||||
item.children.forEach((s: any) => {
|
||||
k.children.forEach((P: any) => {
|
||||
if (P.code == s.scriptTypeCode) {
|
||||
tabData.value[i].children.push({
|
||||
label: P.label,
|
||||
value: P.code,
|
||||
children: []
|
||||
})
|
||||
} else {
|
||||
s.children.forEach((j: any) => {
|
||||
if (j.scriptTypeCode == P.code) {
|
||||
tabData.value[i].children.push({
|
||||
label: P.label,
|
||||
value: P.code,
|
||||
children: []
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
tabChange()
|
||||
}
|
||||
})
|
||||
}
|
||||
const copyActiveName = ref('')
|
||||
|
||||
// 切换大tab控制小tab
|
||||
const tabChange = () => {
|
||||
if (copyActiveName.value != activeName.value) {
|
||||
copyActiveName.value == activeName.value
|
||||
childActiveName.value = ''
|
||||
childActiveName.value =
|
||||
tabData.value.filter(item => item.value == activeName.value)[0]?.children[0]?.value || ''
|
||||
}
|
||||
inquireTable()
|
||||
}
|
||||
//根据脚本id查询检测脚本详情
|
||||
const inquireTable = () => {
|
||||
const sortOrder = ['Ua', 'Ia', 'Ub', 'Ib', 'Uc', 'Ic']
|
||||
dlsDetails({
|
||||
scriptId: props.formContent.id,
|
||||
scriptType: activeName.value,
|
||||
scriptSubType: childActiveName.value
|
||||
}).then((res: any) => {
|
||||
if (res.code === 'A0000') {
|
||||
res.data.forEach((item: any) => {
|
||||
item.channelList = item.channelList.sort((a, b) => {
|
||||
const indexA = sortOrder.indexOf(a.channelType)
|
||||
const indexB = sortOrder.indexOf(b.channelType)
|
||||
return indexA - indexB
|
||||
})
|
||||
})
|
||||
|
||||
tableData.value = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
// 打开 drawer(新增、编辑)
|
||||
const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> = {}) => {
|
||||
if (titleType == 'add') {
|
||||
}
|
||||
testProjectPopupRef.value?.open(titleType, row)
|
||||
}
|
||||
// 获取左边树数据
|
||||
// 新增保存
|
||||
const addTab = (row: any) => {
|
||||
|
||||
getTree()
|
||||
// let data = JSON.parse(JSON.stringify(row))
|
||||
// let flag = true
|
||||
// let list: any = {}
|
||||
@@ -172,8 +421,8 @@ const addTab = (row: any) => {
|
||||
}
|
||||
onMounted(() => {
|
||||
console.log('🚀 ~ onMounted ~ props.options:', props.options)
|
||||
|
||||
props.options.forEach(item => {
|
||||
getTree()
|
||||
props.options.forEach((item: any) => {
|
||||
tabData.value.push({
|
||||
label: item.label.replace(/准确度|检测/g, ''),
|
||||
value: item.value,
|
||||
@@ -182,9 +431,12 @@ onMounted(() => {
|
||||
})
|
||||
})
|
||||
activeName.value = tabData.value[0].value
|
||||
valueCode.value = dictStore
|
||||
.getDictData('Script_Value_Type')
|
||||
.filter(item => item.id == props.formContent.valueType)[0].code
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.data-check-content {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
@@ -225,4 +477,22 @@ onMounted(() => {
|
||||
:deep(.el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell) {
|
||||
padding: 3px 11px;
|
||||
}
|
||||
:deep(.el-loading-mask) {
|
||||
z-index: 3000;
|
||||
}
|
||||
.tableL {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
|
||||
td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
width: 45%;
|
||||
}
|
||||
.theFirst {
|
||||
background-color: #003078;
|
||||
color: #fff;
|
||||
width: 20px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user