668 lines
25 KiB
Vue
668 lines
25 KiB
Vue
<template>
|
|
<div>
|
|
<div class="divider-container">
|
|
<el-divider style="width: 260px" 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 :treeData="treeData" @setTab="setTab" />
|
|
</div>
|
|
|
|
<div class="content-right-Tabs" style="height: calc(100vh - 315px); 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 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%" class="hidden-tab">
|
|
<el-tab-pane label="通讯脚本" name="first">
|
|
<Commun
|
|
:activeName="activeName"
|
|
:formContent="props.formContent"
|
|
:options="props.options"
|
|
style="width: 360px"
|
|
: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: '#003078',
|
|
color: '#fff'
|
|
}"
|
|
stripe
|
|
:cell-style="{ textAlign: 'center' }"
|
|
height="calc(100vh - 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' ? 'V' : '%')
|
|
}}
|
|
</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="165">
|
|
<template #default="{ row }">
|
|
<div class="actionButtons">
|
|
<el-button type="primary" link :icon="View" @click="view(row)">
|
|
查看
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<div class="page">
|
|
<div class="black-container">
|
|
<!-- <el-progress-->
|
|
<!-- v-if="loading"-->
|
|
<!-- type="circle"-->
|
|
<!-- >-->
|
|
<!-- <template #default="{}">-->
|
|
<!-- <span class="Loading">Loading</span>-->
|
|
<!-- </template>-->
|
|
<!-- </el-progress>-->
|
|
<div class="loading-container" v-if="showLoading">
|
|
<div style="width: 80%;height: 80%;" class="loading-box">
|
|
<Loading style="color: #003078;"/>
|
|
</div>
|
|
<!-- <div style="color:#fff;width: 80%;text-align: center;">Loading...</div>-->
|
|
</div>
|
|
<div class="loading-container" v-else>
|
|
<div style="width: 80%;height: 80%;font-size: 30px;">
|
|
<Loading style="color: #003078;"/>
|
|
</div>
|
|
<!-- <div style="color:#fff;width: 80%;text-align: center;">Loading...</div>-->
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 10px;">
|
|
<span>标准源加量输出:{{hour}}时{{minute}}分{{second}}秒</span>
|
|
</div>
|
|
<div style="margin-top: 10px;">
|
|
<el-button :icon="VideoPlay"
|
|
type="primary"
|
|
size="large"
|
|
@click="startLoading"
|
|
|
|
>启动</el-button>
|
|
<el-button :icon="VideoPause"
|
|
type="primary"
|
|
size="large"
|
|
@click="stopLoading"
|
|
:disabled="pauseDisabled"
|
|
>停止</el-button>
|
|
</div>
|
|
</div>
|
|
</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, onMounted, watch } from 'vue'
|
|
import Tree from './tree.vue'
|
|
import Commun from '@/views/machine/testScript/components//communication.vue'
|
|
import {type CascaderOption, ElMessage} from 'element-plus'
|
|
import { getTreeData } from '@/api/check/test'
|
|
import {CirclePlus, Delete, Check, CopyDocument, View, EditPen, VideoPlay, VideoPause, Loading} 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'
|
|
import { startSimulateTest,closeSimulateTest } from '@/api/device/controlSource/index.ts'
|
|
import { controlSource } from '@/api/device/interface/controlSource'
|
|
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
|
|
},
|
|
formControl: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
startDisabeld: {
|
|
type:Boolean,
|
|
required:true
|
|
},
|
|
pauseDisabled: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
|
|
const showDialog = ref(false)
|
|
const viewDialog = ref(false)
|
|
const dictStore = useDictStore()
|
|
const activeName = ref('')
|
|
const childActiveName = ref('')
|
|
const childActiveIndex = ref(0)
|
|
const firstName = 'first'
|
|
const viewRowRef = ref()
|
|
const communicationList = ref<[]>([])
|
|
const testProjectPopupRef = ref()
|
|
const tableData: any = ref([])
|
|
const tabData: any = ref([])
|
|
|
|
const showLoading = ref(false)
|
|
const column = ref([
|
|
{
|
|
label: 'L1',
|
|
num: 0
|
|
},
|
|
{
|
|
label: 'L2',
|
|
num: 2
|
|
},
|
|
{
|
|
label: 'L3',
|
|
num: 4
|
|
}
|
|
])
|
|
|
|
// 时间计数器
|
|
let timer: any = null
|
|
const timeCount = ref(0)
|
|
const hour = ref(0)
|
|
const minute = ref(0)
|
|
const second = ref(0)
|
|
|
|
const emit = defineEmits(['update:activeName','update:activeIndex','update:startDisabeld','update:pauseDisabled'])
|
|
|
|
watch(()=>props.formControl.scriptId,()=>{
|
|
//console.log("切换脚本",props.formControl.scriptId);
|
|
if(props.formControl.scriptId!=''){
|
|
getTree()
|
|
}
|
|
})
|
|
const controlContent = ref<controlSource.ResControl>({
|
|
userPageId: '',
|
|
scriptId: '',
|
|
scriptIndex: 0,
|
|
sourceId: '',
|
|
})
|
|
// 获取树
|
|
const getTree = () => {
|
|
getTreeData({
|
|
scriptId: props.formControl.scriptId,
|
|
}).then(res => {
|
|
if (res.code === 'A0000') {
|
|
treeData.value = res.data
|
|
//console.log('tree',res.data)
|
|
// 为 treeData 及其子节点添加 id
|
|
let idCounter = 0;
|
|
const addIdToTree = (nodes: any[]) => {
|
|
nodes.forEach(node => {
|
|
node.id = idCounter++; // 为每个节点添加唯一的 id
|
|
if (node.children && node.children.length > 0) {
|
|
node.disabled = true
|
|
addIdToTree(node.children); // 递归为子节点添加 id
|
|
}
|
|
});
|
|
};
|
|
|
|
addIdToTree(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: []
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
})
|
|
|
|
//console.log('2222',treeData.value)
|
|
|
|
tabChange()
|
|
}
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
// 设置树点击tab
|
|
const setTab = row => {
|
|
activeName.value = row.activeName
|
|
childActiveName.value = row.childActiveName
|
|
childActiveIndex.value = row.activeIndex
|
|
getTree()
|
|
emit('update:activeName', activeName.value) // 触发事件并传递 activeName.value
|
|
emit('update:activeIndex', row.activeIndex) // 触发事件并传递 activeName.value
|
|
}
|
|
const copyActiveName = ref('')
|
|
// 获取通讯脚本点击
|
|
const getCommunication = () => {
|
|
//console.log('controlSourceDetail',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.formControl.scriptId,
|
|
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
|
|
}
|
|
})
|
|
|
|
//console.log('treeData',treeData.value)
|
|
}
|
|
|
|
|
|
// 查看
|
|
const view = (row: Partial<TestScript.ResTestScript> = {}) => {
|
|
|
|
getCommunication()
|
|
//当前点击的一级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(() => {
|
|
console.log('row',row)
|
|
console.log('communicationList',communicationList.value)
|
|
console.log('parentTabName',parentTabName)
|
|
console.log('childrenTabName',parentTabName)
|
|
console.log('activeName',activeName.value)
|
|
viewRowRef.value?.open(row, communicationList.value, parentTabName, childrenTabName.value)
|
|
}, 0)
|
|
|
|
}
|
|
|
|
// 定义 startLoading 方法
|
|
const startLoading = async () => {
|
|
emit('update:startDisabeld', true)
|
|
emit('update:pauseDisabled', true)
|
|
ElMessage.success({message:'启动中...',duration:5000})
|
|
// 启动加载逻辑
|
|
controlContent.value.userPageId = 'cdf'
|
|
controlContent.value.scriptId = props.formControl.scriptId
|
|
controlContent.value.scriptIndex = childActiveIndex.value
|
|
controlContent.value.sourceId = props.formControl.sourceId
|
|
setTimeout(async () => {
|
|
await startSimulateTest(controlContent.value)
|
|
},3000)
|
|
}
|
|
|
|
// 定义 startLoading 方法
|
|
const stopLoading = async () => {
|
|
// 启动加载逻辑
|
|
controlContent.value.userPageId = 'cdf'
|
|
controlContent.value.scriptId = props.formControl.scriptId
|
|
controlContent.value.scriptIndex = childActiveIndex.value
|
|
controlContent.value.sourceId = props.formControl.sourceId
|
|
await closeSimulateTest(controlContent.value)
|
|
emit('update:pauseDisabled', true)
|
|
emit('update:startDisabeld', true)
|
|
ElMessage.success({message:'停止中...',duration:5000})
|
|
}
|
|
|
|
|
|
const startTimeCount = () => {
|
|
// Loading效果展示
|
|
showLoading.value = true
|
|
|
|
if (!timer) {
|
|
hour.value = 0
|
|
minute.value = 0
|
|
second.value = 0
|
|
timeCount.value = 0
|
|
timer = setInterval(() => {
|
|
timeCount.value = timeCount.value + 1
|
|
secondToTime(timeCount.value)
|
|
}, 1000)
|
|
}
|
|
}
|
|
|
|
const secondToTime = (secd: number) => {
|
|
//将秒数转换成时分秒
|
|
hour.value = Math.floor(secd / 3600)
|
|
minute.value = Math.floor((secd - hour.value * 3600) / 60)
|
|
second.value = Math.floor(secd % 60);
|
|
}
|
|
|
|
const stopTimeCount = () => {
|
|
if (timer) {
|
|
clearInterval(timer)
|
|
timer = null
|
|
}
|
|
//Loading效果关闭
|
|
showLoading.value = false
|
|
}
|
|
|
|
// 获取左边树数据
|
|
// 新增保存
|
|
const addTab = (row: any) => {
|
|
getTree()
|
|
}
|
|
|
|
onMounted(() => {
|
|
getTree()
|
|
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
|
|
})
|
|
|
|
defineExpose({
|
|
startTimeCount,
|
|
stopTimeCount
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.data-check-content {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.content-tree {
|
|
width: 260px;
|
|
height: calc(100vh - 315px);
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
// margin-right: 10px;
|
|
overflow: auto; /* 同时启用垂直和水平滚动 */
|
|
overflow-x: hidden;
|
|
}
|
|
.scriptTree {
|
|
height: calc(100vh - 520px);
|
|
}
|
|
|
|
/* 确保 el-tree 内容可以超出容器宽度 */
|
|
.el-tree {
|
|
width: fit-content; /* 根据内容自适应宽度 */
|
|
}
|
|
|
|
.content-right-Tabs {
|
|
flex: 1; /* 根据需要调整宽度比例 */
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: flex;
|
|
margin-left: 10px;
|
|
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: #003078;
|
|
color: #fff;
|
|
width: 20px !important;
|
|
}
|
|
}
|
|
.actionButtons {
|
|
.el-button {
|
|
margin-left: 0px;
|
|
margin: 5px 6px;
|
|
}
|
|
}
|
|
|
|
.page{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.black-container {
|
|
background-color: #000;
|
|
width: 300px;
|
|
height: 300px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 20px;
|
|
|
|
.loading-container{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.loading-box {
|
|
animation: rotate 2s linear infinite;
|
|
font-size: 30px; /* 增大图标的大小 */
|
|
}
|
|
|
|
.hidden-tab {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
</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>
|