558 lines
23 KiB
Vue
558 lines
23 KiB
Vue
<template>
|
||
<div>
|
||
<div class="divider-container">
|
||
<el-divider style="width: 260px" 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" :style="{ height: `calc(100vh - ${props.shrink ? '370px' : '315px'})` }">
|
||
<Tree :treeData="treeData" @setTab="setTab" />
|
||
</div>
|
||
|
||
<div
|
||
class="content-right-Tabs"
|
||
style="width: 100px"
|
||
:style="{ height: `calc(100vh - ${props.shrink ? '370px' : '315px'})` }"
|
||
>
|
||
<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 v-if="activeName == tab.value">
|
||
<div class="dialog-footer">
|
||
<el-button :icon="CirclePlus" type="primary" @click="openDialog('add')">新增</el-button>
|
||
</div>
|
||
<div style="display: flex">
|
||
<!-- 通信脚本 -->
|
||
<el-tabs type="border-card" v-model="firstName" style="height: 100%">
|
||
<el-tab-pane label="通讯脚本" name="first">
|
||
<Commun
|
||
:activeName="activeName"
|
||
:formContent="props.formContent"
|
||
:options="props.options"
|
||
style="width: 360px"
|
||
:shrink="props.shrink"
|
||
:disabled="tab.children.length == 0 ? false : true"
|
||
ref="communRef"
|
||
/>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<!-- 2级tab -->
|
||
<el-tabs
|
||
type="border-card"
|
||
style="flex: 1; margin-left: 10px"
|
||
v-model="childActiveName"
|
||
@tab-change="inquireTable"
|
||
>
|
||
<el-tab-pane
|
||
v-for="subTab in tab.children || []"
|
||
:key="subTab.value"
|
||
:label="subTab.label"
|
||
:name="subTab.value"
|
||
style="width: 100%"
|
||
>
|
||
<el-table
|
||
:data="tableData"
|
||
:header-cell-style="{
|
||
textAlign: 'center',
|
||
backgroundColor: 'var(--el-color-primary)',
|
||
color: '#fff'
|
||
}"
|
||
stripe
|
||
:cell-style="{ textAlign: 'center' }"
|
||
highlight-current-row
|
||
:height="`calc(100vh - ${props.shrink ? '535px' : '480px'})`"
|
||
style="width: 100%"
|
||
>
|
||
<el-table-column type="index" label="组次" width="60" />
|
||
<el-table-column prop="ffreq" label="频率(Hz)" width="90" />
|
||
<el-table-column
|
||
:label="item.label"
|
||
v-for="item in column"
|
||
:key="item.label"
|
||
>
|
||
<template #default="{ row }">
|
||
<table class="tableL">
|
||
<tbody>
|
||
<tr>
|
||
<td class="theFirst">V</td>
|
||
<td>
|
||
{{
|
||
row.channelList[item.num].famp == null
|
||
? '/'
|
||
: '' +
|
||
row.channelList[item.num]?.famp +
|
||
(valueCode == 'Absolute' ? 'V' : '%')
|
||
}}
|
||
</td>
|
||
<td>
|
||
{{
|
||
row.channelList[item.num].fphase == null
|
||
? '/'
|
||
: '' +
|
||
row.channelList[item.num].fphase +
|
||
'°'
|
||
}}
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="theFirst">I</td>
|
||
<td>
|
||
{{
|
||
row.channelList[item.num + 1].famp == null
|
||
? '/'
|
||
: '' +
|
||
row.channelList[item.num + 1].famp +
|
||
(valueCode == 'Absolute' ? 'A' : '%')
|
||
}}
|
||
</td>
|
||
<td>
|
||
{{
|
||
row.channelList[item.num + 1].fphase == null
|
||
? '/'
|
||
: '' +
|
||
row.channelList[item.num + 1].fphase +
|
||
'°'
|
||
}}
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="是否启用" width="85">
|
||
<template #default="{ row }">
|
||
<el-switch
|
||
v-model="row.enable"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
@change="enableRow(row)"
|
||
>
|
||
<template #active-action>
|
||
<span>√</span>
|
||
</template>
|
||
<template #inactive-action>
|
||
<span>×</span>
|
||
</template>
|
||
</el-switch>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="165">
|
||
<template #default="{ row }">
|
||
<div class="actionButtons">
|
||
<el-button
|
||
type="primary"
|
||
link
|
||
:icon="CopyDocument"
|
||
@click="copyRow(row)"
|
||
>
|
||
复制
|
||
</el-button>
|
||
<el-button type="primary" link :icon="View" @click="view(row)">
|
||
查看
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
link
|
||
:icon="EditPen"
|
||
@click="openDialog('edit', row)"
|
||
>
|
||
编辑
|
||
</el-button>
|
||
|
||
<el-button
|
||
type="primary"
|
||
link
|
||
:icon="Delete"
|
||
@click="deleteRow(row)"
|
||
>
|
||
删除
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
|
||
<TestProjectPopup
|
||
ref="testProjectPopupRef"
|
||
:options="props.options"
|
||
:activeName="activeName"
|
||
:childActiveName="childActiveName"
|
||
:formContent="props.formContent"
|
||
:communicationList="communicationList"
|
||
@addTab="addTab"
|
||
@getCommunication="getCommunication"
|
||
@close="showDialog = false"
|
||
v-if="showDialog"
|
||
/>
|
||
<!-- 查看 -->
|
||
<ViewRow
|
||
ref="viewRowRef"
|
||
:activeName="activeName"
|
||
:formContent="props.formContent"
|
||
@close="viewDialog = false"
|
||
v-if="viewDialog"
|
||
/>
|
||
</div>
|
||
</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, ElMessageBox } from 'element-plus'
|
||
import { getTreeData } from '@/api/check/test'
|
||
import { CirclePlus, Delete, Check, CopyDocument, View, EditPen } 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, deleteDtls, updateDtls, addScriptDtls, checkDataList } from '@/api/device/testScript'
|
||
import { useDictStore } from '@/stores/modules/dict'
|
||
import { useHandleData } from '@/hooks/useHandleData'
|
||
import { scriptDtlsCheckDataList } from '@/api/device/testScript/index'
|
||
import ViewRow from '@/views/machine/testScript/components/viewRow.vue'
|
||
interface TabOption {
|
||
label?: string
|
||
name?: string
|
||
value?: string
|
||
code?: string
|
||
children?: TabOption[]
|
||
}
|
||
const communRef = ref()
|
||
const treeData = ref<CheckData.TreeItem[]>([])
|
||
const valueCode = ref('') //Absolute绝对值
|
||
const props = defineProps({
|
||
options: {
|
||
type: Array as PropType<TabOption[]>,
|
||
required: true
|
||
},
|
||
formContent: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
shrink: {
|
||
type: Boolean
|
||
}
|
||
})
|
||
const showDialog = ref(false)
|
||
const viewDialog = ref(false)
|
||
const dictStore = useDictStore()
|
||
const activeName = ref('')
|
||
const childActiveName = ref('')
|
||
const firstName = 'first'
|
||
const viewRowRef = ref()
|
||
const communicationList = ref([])
|
||
const testProjectPopupRef = ref()
|
||
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 = () => {
|
||
console.log('props.formContent.id', props.formContent.id)
|
||
getTreeData({
|
||
scriptId: props.formContent.id
|
||
}).then(res => {
|
||
if (res.code === 'A0000') {
|
||
treeData.value = res.data
|
||
console.log('tree', treeData.value)
|
||
// 添加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()
|
||
}
|
||
})
|
||
}
|
||
// 设置树点击tab
|
||
const setTab = row => {
|
||
activeName.value = row.activeName
|
||
childActiveName.value = row.childActiveName
|
||
getTree()
|
||
}
|
||
const copyActiveName = ref('')
|
||
// 获取通讯脚本点击
|
||
const getCommunication = () => {
|
||
console.log('123123', communRef.value[0]?.getData())
|
||
communicationList.value = communRef.value[0]?.getData()
|
||
}
|
||
// 切换大tab控制小tab
|
||
const tabChange = () => {
|
||
if (copyActiveName.value != activeName.value) {
|
||
copyActiveName.value == activeName.value
|
||
|
||
if (
|
||
tabData.value
|
||
.filter((item: any) => item.value == activeName.value)[0]
|
||
?.children.filter((item: any) => item.value == childActiveName.value).length == 0
|
||
) {
|
||
childActiveName.value =
|
||
tabData.value.filter((item: any) => 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: any, b: any) => {
|
||
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> = {}) => {
|
||
showDialog.value = true
|
||
setTimeout(() => {
|
||
testProjectPopupRef.value?.open(titleType, row)
|
||
}, 0)
|
||
}
|
||
// 复制
|
||
const copyRow = async (row: any) => {
|
||
ElMessageBox.confirm('是否复制当前检测项目?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
draggable: true
|
||
}).then(async () => {
|
||
let checkDataList: any = []
|
||
await communRef.value[0]?.getData().forEach((item: any) => {
|
||
item.children.forEach((k: any) => {
|
||
if (k.enable != 0 || k.errorFlag != 0) {
|
||
checkDataList.push({
|
||
pid: k.pid,
|
||
valueType: k.id,
|
||
dataType: k.dataType,
|
||
enable: k.enable,
|
||
errorFlag: k.errorFlag
|
||
})
|
||
}
|
||
})
|
||
})
|
||
let { data } = await scriptDtlsCheckDataList({ checkDataList: checkDataList, ...row, retryCompute: true })
|
||
let copyRow = JSON.parse(JSON.stringify(row))
|
||
delete copyRow.index
|
||
|
||
await addScriptDtls({ ...copyRow, scriptType: activeName.value, checkDataList: data }).then(res => {
|
||
if (res.code === 'A0000') {
|
||
ElMessage.success({
|
||
message: '复制成功!',
|
||
type: 'success'
|
||
})
|
||
getTree()
|
||
}
|
||
})
|
||
})
|
||
}
|
||
// 查看
|
||
const view = (row: Partial<TestScript.ResTestScript> = {}) => {
|
||
getCommunication()
|
||
console.log('communicationList', communicationList.value)
|
||
//当前点击的一级tab
|
||
const parentTabName = communicationList.value.find(t => t.id === activeName.value)?.name || '未找到对应名称'
|
||
//当前点击的二级tab
|
||
const childrenTabName = ref('')
|
||
tabData.value.forEach((item: any) => {
|
||
if (item.value == activeName.value) {
|
||
item.children.forEach((k: any) => {
|
||
if (k.value == childActiveName.value) {
|
||
childrenTabName.value = k.label
|
||
}
|
||
})
|
||
}
|
||
})
|
||
viewDialog.value = true
|
||
setTimeout(() => {
|
||
viewRowRef.value?.open(row, communicationList.value, parentTabName, childrenTabName.value)
|
||
}, 0)
|
||
}
|
||
// 删除
|
||
const deleteRow = async (row: any) => {
|
||
await useHandleData(deleteDtls, { enable: row.enable, index: row.index, scriptId: row.scriptId }, `删除`)
|
||
getTree()
|
||
}
|
||
// 启用
|
||
const enableRow = async (row: any) => {
|
||
ElMessageBox.confirm(`是否${row.enable == 0 ? `禁用` : `启用`}?`, '温馨提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
draggable: true
|
||
})
|
||
.then(async () => {
|
||
updateDtls({ enable: row.enable, index: row.index, scriptId: row.scriptId }).then(res => {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: `${row.enable == 0 ? `禁用` : `启用`}成功!`
|
||
})
|
||
getTree()
|
||
})
|
||
})
|
||
.catch(() => {
|
||
row.enable = row.enable == 0 ? 1 : 0
|
||
})
|
||
}
|
||
// 获取左边树数据
|
||
// 新增保存
|
||
const addTab = (row: any) => {
|
||
getTree()
|
||
}
|
||
// 保存通信脚本
|
||
const saveTheNewsletter = () => {}
|
||
onMounted(() => {
|
||
getTree()
|
||
console.log('testScriptDetail', props.options)
|
||
props.options.forEach((item: any) => {
|
||
tabData.value.push({
|
||
label: item.label.replace(/准确度|检测/g, ''),
|
||
value: item.value,
|
||
code: item.code,
|
||
children: []
|
||
})
|
||
})
|
||
activeName.value = tabData.value[0].value
|
||
valueCode.value = dictStore
|
||
.getDictData('Script_Value_Type')
|
||
.filter(item => item.id == props.formContent.valueType)[0].code
|
||
})
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.data-check-content {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.content-tree {
|
||
width: 260px;
|
||
|
||
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;
|
||
}
|
||
: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: var(--el-color-primary);
|
||
color: #fff;
|
||
width: 20px !important;
|
||
}
|
||
}
|
||
.actionButtons {
|
||
.el-button {
|
||
margin-left: 0px;
|
||
margin: 5px 6px;
|
||
}
|
||
}
|
||
</style>
|
||
<style>
|
||
input::-webkit-inner-spin-button {
|
||
-webkit-appearance: none !important;
|
||
}
|
||
|
||
input::-webkit-outer-spin-button {
|
||
-webkit-appearance: none !important;
|
||
}
|
||
.el-divider--horizontal {
|
||
margin: 4px 0 24px 0;
|
||
}
|
||
.el-tabs--border-card > .el-tabs__content {
|
||
padding: 10px;
|
||
}
|
||
</style>
|