Files
pqs-9100_client/frontend/src/views/home/components/comparePreTest.vue
2025-10-15 13:33:40 +08:00

647 lines
17 KiB
Vue

<template>
<div>
<el-tabs type="border-card">
<el-tab-pane label="预检测项目">
<div class="form-grid">
<el-checkbox v-for="(item, index) in detectionOptions" v-model="item.selected" :key="index"
:label="item.name" disabled></el-checkbox>
</div>
</el-tab-pane>
</el-tabs>
<div class="test-dialog">
<div class="dialog-left">
<el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus"
finish-status="success">
<el-step :status="step1" title="设备通讯校验"/>
<el-step :status="step2" title="模型一致性校验"/>
<el-step :status="step3" title="实时数据对齐验证" v-if="!props.onlyWave"/>
<el-step :status="step4" title="相序校验"/>
<!-- <el-step :status="step6" title="遥控录波功能验证"/> -->
<el-step :status="step5" :title="ts === 'error'? '检测失败':ts === 'process'? '检测中':ts === 'success'? '检测成功':'待检测'"/>
</el-steps>
</div>
<div class="dialog-right">
<el-collapse v-model="collapseActiveName" accordion>
<el-collapse-item title="设备通讯校验" name="1">
<div class="div-log">
<p v-for="(item, index) in step1InitLog" :key="index"
:style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
{{ item.log }} <br/>
</p>
</div>
</el-collapse-item>
<el-collapse-item title="模型一致性校验" name="2">
<div class="div-log">
<p v-for="(item, index) in step2InitLog" :key="index"
:style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
{{ item.log }} <br/>
</p>
</div>
</el-collapse-item>
<el-collapse-item name="3" v-if="!props.onlyWave">
<template #title>
实时数据对齐验证
<el-icon class="title-icon" @click="openDialog" v-if="isShowDialog"><InfoFilled/></el-icon>
</template>
<div class="div-log">
<p v-for="(item, index) in step3InitLog" :key="index"
:style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
{{ item.log }}
<br/>
</p>
</div>
</el-collapse-item>
<el-collapse-item title="相序校验" name="4">
<div class="div-log">
<p v-for="(item, index) in step4InitLog" :key="index"
:style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
{{ item.log }} <br/>
</p>
</div>
</el-collapse-item>
<!-- <el-collapse-item title="遥控录波功能验证" name="3">
<div class="div-log">
<p v-for="(item, index) in step3InitLog" :key="index"
:style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
{{ item.log.split('&&')[0] }}
<br v-if="item.log.includes('&&')"/>
&nbsp;&nbsp;&nbsp;&nbsp;{{ item.log.split('&&')[1] }}
<br v-if="item.log.includes('&&')"/>
&nbsp;&nbsp;&nbsp;&nbsp;{{ item.log.split('&&')[2] }}
</p>
</div>
</el-collapse-item> -->
</el-collapse>
</div>
</div>
</div>
<RealTimeData ref="realTimeDataRef" />
</template>
<script lang="tsx" setup name="preTest">
import { ElMessage, ElMessageBox, StepProps } from 'element-plus'
import { computed, PropType, ref, toRef, watch } from 'vue'
import RealTimeData from './realTimeDataAlign.vue'
const realTimeDataRef = ref()
const step1InitLog = ref([
{
type: 'info',
log: '暂无数据,等待检测开始',
},
])
const step2InitLog = ref([
{
type: 'info',
log: '暂无数据,等待检测开始',
},
])
const step3InitLog = ref([
{
type: 'info',
log: '暂无数据,等待检测开始',
},
])
const step4InitLog = ref([
{
type: 'info',
log: '暂无数据,等待检测开始',
},
])
const isShowDialog = ref(false)
const collapseActiveName = ref('1')
const activeIndex = ref(0)
const activeTotalNum = computed(() => {
let count = 4; // 基础步骤数:设备通讯校验、模型一致性校验、相序校验、最终状态
if (props.onlyWave) {
count++; // 添加实时数据对齐验证步骤
}
return count;
});
const step1 = ref<StepProps['status']>('wait')
const step2 = ref<StepProps['status']>('wait')
const step3 = ref<StepProps['status']>('wait')
const step4 = ref<StepProps['status']>('wait')
const step5 = ref<StepProps['status']>('wait')
//定义与预检测配置数组
const detectionOptions = ref([
{
id: 0,
name: "设备通讯校验",
selected: true,
},
{
id: 1,
name: "模型一致性校验",
selected: true,
},
{
id: 2,
name: "实时数据对齐验证",
selected: true,
},
{
id: 3,
name: "相序校验",
selected: true,
},
]);
const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');
const props = defineProps({
testStatus: {
type: String,
default: 'wait'
},
webMsgSend: {
type: Object,
default: () => ({})
},
mapping: {
type: Object as PropType<Record<string, Record<string, string>>>,
default: () => ({})
},
onlyWave: {
type: Boolean,
default: false
}
})
const testStatus = toRef(props, 'testStatus');
const webMsgSend = toRef(props, 'webMsgSend');
const ts = ref('');
// 在 script setup 中定义接口
interface ChannelData {
devNum: string;
standardDevInfo: string;
dataList: {
timeDev: string | null;
uaDev: number | null;
ubDev: number | null;
ucDev: number | null;
timeStdDev: string | null;
uaStdDev: number | null;
ubStdDev: number | null;
ucStdDev: number | null;
}[];
}
interface DeviceData {
devName: string;
channelDataList: ChannelData[];
}
// 修改 testDataStructure 的类型声明
const testDataStructure = ref<Record<string, DeviceData>>({});
watch(webMsgSend, function (newValue, oldValue) {
if(testStatus.value == 'success' || testStatus.value == 'error'){
return
}
if (testStatus.value !== 'waiting') {
if(newValue.code == 25004){
ElMessage.error('接收数据超时!')
ts.value = 'error'
step5.value = 'error'
}else if(newValue.code == 10550){
ElMessage.error('设备连接异常!')
ts.value = 'error'
step5.value = 'error'
}
switch (newValue.requestId) {
case 'yjc_sbtxjy':
if (newValue.code == 10200) {
step1InitLog.value.push({
type: 'info',
log: newValue.data,
})
}
if (newValue.code == 10201) {
step1.value = 'process'
step1InitLog.value = [{
type: 'wait',
log: '正在进行设备通讯校验.....',
}];
}
if (newValue.code == 10551) {
step1InitLog.value.push({
type: 'error',
log: newValue.data + '设备触发报告异常!',
})
step1.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
if (newValue.code == 10552) {
step1InitLog.value = [{
type: 'error',
log: '存在已经初始化步骤,执行自动关闭,请重新发起检测!',
}];
step1.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
if (newValue.code == 25001) {
step1InitLog.value.push({
type: 'info',
log: newValue.data,
})
activeIndex.value = 1
step1.value = 'success'
step2.value = 'process'
}
if(newValue.code == 10550){
step1InitLog.value = [{
type: 'error',
log: '设备通讯校验时,设备连接异常!',
}];
step1.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
break;
case 'record_wave_step1':
if(newValue.code == 10550){
step1InitLog.value = [{
type: 'error',
log: '录波校验时,设备连接异常!',
}];
step1.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
if (newValue.code == 25002) { //某一路录波校验失败
step1InitLog.value.push({
type: 'error',
log: newValue.data,
})
} else if (newValue.code == 25003) { //最终失败
step1.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
break;
case 'yjc_mxyzxjy':
if (newValue.code == 10200) { //单个监测点成功
step2InitLog.value.push({
type: 'info',
log: newValue.data + '模型一致性检验成功!',
})
}
if (newValue.code == 10201) {
step2.value = 'process'
step2InitLog.value = [{
type: 'wait',
log: '正在进行模型一致性校验.....',
}];
}
if(newValue.code == 10550){
step2InitLog.value = [{
type: 'error',
log: '模型一致性校验时,设备连接异常!',
}];
step2.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
if (newValue.code == 25002) { //单个监测点失败
step2InitLog.value.push({
type: 'error',
log: newValue.data + '模型一致性检验失败!',
})
}
if (newValue.code == 25001) { //最终成功
step2.value = 'success'
step3.value = 'process'
activeIndex.value = 2
}
if (newValue.code == 25003) { //最终失败
step2.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
break;
case 'yjc_align':
if (newValue.code == 10200) { //单个监测点成功
step3InitLog.value.push({
type: 'info',
log: newValue.data + '数据对齐检验成功!',
})
}
if (newValue.code == 10201) {
step3.value = 'process'
step3InitLog.value = [{
type: 'wait',
log: '正在进行数据对齐检验.....',
}];
}
if(newValue.code == 10550){
step3InitLog.value = [{
type: 'error',
log: '实时数据对齐时,设备连接异常!',
}];
step3.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
if (newValue.code == 25002) { //单个监测点失败
step3InitLog.value.push({
type: 'error',
log: newValue.data + '数据对齐检验失败!',
})
}
if (newValue.code == 25001 && newValue.data) { //最终成功
isShowDialog.value = true
step3.value = 'success'
step4.value = 'process'
activeIndex.value = 3
testDataStructure.value = newValue.data
}
if (newValue.code == 25003) { //最终失败
isShowDialog.value = true
step3.value = 'error'
ts.value = 'error'
step5.value = 'error'
testDataStructure.value = newValue.data
}
break;
case 'YJC_xujy':
if (newValue.code == 10200) {
step4InitLog.value.push({
type: 'info',
log: newValue.data,
})
}
if (newValue.code == 10201) {
step4.value = 'process'
step4InitLog.value = [{
type: 'wait',
log: '正在进行相序性检.....',
}];
}
if(newValue.code == 10550){
step4InitLog.value = [{
type: 'error',
log: '相序校验时,设备连接异常!',
}];
step4.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
if (newValue.code == 25002) {
step4InitLog.value.push({
type: 'error',
log: newValue.data,
})
}
if (newValue.code == 25003) {
step4InitLog.value.push({
type: 'error',
log: newValue.data,
})
step4.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
if (newValue.code == 25001) {
step4.value = 'success'
step5.value = 'success'
ts.value = 'success'
activeIndex.value = 4
}
break;
case 'quit':
break;
case 'connect':
switch (newValue.operateCode) {
case "Contrast_Dev":
step1.value = 'error'
step1InitLog.value = [{
type: 'error',
log: '设备服务端连接失败!',
}];
ts.value = 'error'
step5.value = 'error'
break;
}
break;
case 'unknown_operate':
break;
case 'error_flow_end':
ElMessageBox.alert(`当前流程存在异常结束!`, '检测失败', {
confirmButtonText: '确定',
type: 'error',
})
ts.value = 'error'
step5.value = 'error'
break;
case 'socket_timeout':
ElMessageBox.alert(`设备连接异常,请检查设备连接情况!`, '检测失败', {
confirmButtonText: '确定',
type: 'error',
})
ts.value = 'error'
step5.value = 'error'
break;
case 'server_error':
ElMessageBox.alert('服务端主动关闭连接!', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
ts.value = 'error'
step5.value = 'error'
break;
case 'device_error':
ElMessageBox.alert('设备主动关闭连接!', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
ts.value = 'error'
step5.value = 'error'
break;
case 'yjc_xyjy' :
switch (newValue.operateCode) {
case 'INIT_GATHER$03':
if (newValue.code == 10552) {
ElMessageBox.alert('重复的初始化操作!', '检测失败', {
confirmButtonText: '确定',
type: 'error',
})
ts.value = 'error'
step5.value = 'error'
}
}
break;
}
}
})
// watch(activeIndex, function (newValue, oldValue) {
// if (newValue <= activeTotalNum.value - 2) {
// collapseActiveName.value = (newValue + 1).toString()
// } else {
// collapseActiveName.value = newValue.toString()
// }
// })
watch(activeIndex, function (newValue, oldValue) {
if(props.onlyWave === true)
{
if (Number(collapseActiveName.value) < activeTotalNum.value - 2) {
if(newValue == 2){
collapseActiveName.value = '4'
}else{
collapseActiveName.value = (newValue + 1).toString()
}
}
} else
{
if (Number(collapseActiveName.value) < activeTotalNum.value) {
collapseActiveName.value = (newValue + 1).toString()
}
}
})
//监听goods_sn的变化
watch(testStatus, function (newValue, oldValue) {
ts.value = props.testStatus;
if (ts.value === 'start') {
ts.value = 'process'
} else if (ts.value === 'waiting') {
activeIndex.value = 0
step1InitLog.value = [
{
type: 'info',
log: '暂无数据,等待检测开始',
},
]
step1.value = 'finish'
step2.value = 'wait'
step3.value = 'wait'
step4.value = 'wait'
step5.value = 'wait'
}
})
const emit = defineEmits(['update:testStatus']);
//监听sn
watch(ts, function (newValue, oldValue) {
//修改父组件
emit('update:testStatus', ts.value)
})
// 定义一个初始化参数的方法
function initializeParameters() {
activeIndex.value = 0
step1.value = 'wait'
step2.value = 'wait'
step3.value = 'wait'
step4.value = 'wait'
step5.value = 'wait'
step1InitLog.value = [
{
type: 'info',
log: '暂无数据,等待检测开始',
},
]
step2InitLog.value = [
{
type: 'info',
log: '暂无数据,等待检测开始',
},
]
step3InitLog.value = [
{
type: 'info',
log: '暂无数据,等待检测开始',
},
]
step4InitLog.value = [
{
type: 'info',
log: '暂无数据,等待检测开始',
},
]
// 清空实时数据对齐验证的数据
testDataStructure.value = {}
isShowDialog.value = false
}
const openDialog = () => {
realTimeDataRef.value.open(props.mapping,testDataStructure.value)
}
defineExpose({
initializeParameters,
});
</script>
<style scoped lang="scss">
.title-icon {
margin-left: 10px;
cursor: pointer;
font-size: 16px;
vertical-align: middle;
}
.test-dialog {
height: 350px;
display: flex;
flex-direction: row;
/* 横向排列 */
margin-top: 20px;
}
.dialog-left {
width: 15%;
margin-left: 20px;
}
.dialog-right {
margin-left: 20px;
width: 80%;
height: 100%;
}
.dialog-right :deep(.el-collapse-item__header) {
font-size: 16px;
}
.div-log {
height: 145px;
overflow-y: auto;
padding-left: 10px;
p {
margin: 5px 0;
font-size: 14px;
}
}
</style>