@@ -1,50 +1,75 @@
< template >
<!-- 检测流程弹窗容器 -- >
< el-dialog :title = "dialogTitle" width = "1550px" :model-value = "dialogVisible" :before-close = "beforeClose" @close ="handleClose" height = "1000px" draggable >
<!-- 步骤指示器容器 -- >
< div class = "steps-container" >
< el-steps v-if = "showSteps" class="test-head-steps" simple :active="stepsActiveIndex" process-status="finish" finish-status="success" >
<!-- 检测步骤进度条 , 根据选择的检测项动态显示步骤 -- >
<!-- 注意 : Element Plus的active属性从0开始 , 但业务逻辑从1开始 , 所以需要减1 -- >
< el-steps v-if = "showSteps" class="test-head-steps" simple :active="stepsActiveIndex - 1" process-status="finish" finish-status="success" >
< ! - - 预检测步骤 - - >
< el-step v-if = "preTestSelected" title="预检测" :icon="stepsActive > 1 || stepsActiveIndex > stepsTotalNum-1? SuccessFilled :Edit" @click="handleStepClick(1)" />
< ! - - 守时检测步骤 - - >
< el-step v-if = "timeTestSelected" title="守时检测" :icon="stepsActive > 2 || stepsActiveIndex > stepsTotalNum-1? SuccessFilled :UploadFilled"
@click ="handleStepClick(2)" />
< ! - - 系数校准步骤 - - >
< el-step v-if = "channelsTestSelected" title="系数校准" :icon="stepsActive > 3 || stepsActiveIndex > stepsTotalNum-1? SuccessFilled :Odometer"
@click ="handleStepClick(3)" />
< ! - - 正式检测步骤 - - >
< el-step v-if = "testSelected" title="正式检测" :icon="stepsActive > 4 || stepsActiveIndex > stepsTotalNum-1? SuccessFilled :Coin" @click="handleStepClick(4)" />
< ! - - 检测完成步骤 - - >
< el-step title = "检测完成" : icon = "stepsActiveIndex > stepsTotalNum-1 ? SuccessFilled :Key" / >
< / el-steps >
< / div >
<!-- 检测组件容器 - 根据当前步骤显示对应的检测组件 -- >
<!-- 预检测组件 -- >
< preTest v-if = "showComponent&&preTestSelected" v-show="preTestSelected && stepsActiveView==1" ref="preTestRef" v-model:testStatus="preTestStatus"
:webMsgSend = "webMsgSend" / >
<!-- 守时检测组件 -- >
< timeTest v-if = "showComponent&&timeTestSelected" v-show="timeTestSelected && stepsActiveView==2" v-model:testStatus="timeTestStatus" />
< ! - - < channelsTest v-if = "stepsActiveIndex === 3" v-model:testStatus="channelsTestStatus" > < / channelsTest > - - >
< ! - - 系数校准检测组件 - - >
< factorTest v-if = "showComponent&&channelsTestSelected" v-show="channelsTestSelected && stepsActiveView==3" v-model:testStatus="channelsTestStatus"
:webMsgSend = "webMsgSend" / >
<!-- 正式检测组件 -- >
< test v-if = "showComponent&&testSelected" ref="testRef" v-show="testSelected && stepsActiveView==4" v-model:testStatus="TestStatus" :webMsgSend="webMsgSend"
@ update :webMsgSend = "webMsgSend=$event" @sendPause ="sendPause" @sendResume ="sendResume" @sendReCheck ="sendReCheck" @closeWebSocket ="closeWebSocket"
:stepsActive = "stepsActive" / >
<!-- 弹窗底部操作按钮区域 -- >
< template # footer >
< div >
<!-- 跳过按钮 ( 已注释 ) -- >
<!-- < el-button type = "primary" :icon = "DArrowRight" v-if = "stepsActiveIndex < stepsTotalNum && ActiveStatue != 'success'" @click="nextStep" > 跳过 < / el -button > -- >
<!-- 开始检测按钮 - 当前状态为等待时显示 -- >
< el-button type = "primary" :icon = "VideoPlay" v-if = "ActiveStatue === 'waiting'" @click="handleSubmitFast" > 开始检测 < / el -button >
<!-- 初始化中按钮 - 禁用状态 , 显示加载动画 -- >
< el-button type = "primary" v-if = "TestStatus === 'test_init'" disabled >
< el-icon class = "loading-box" style = "color: #fff;margin-right: 8px;" >
< component :is = "Refresh" / >
< / el-icon >
初始化中
< / el-button >
<!-- 停止检测按钮 - 检测进行中时显示 -- >
< el-button
type = "primary"
v-if = "TestStatus=='process'"
:icon = "VideoPause"
@click ="handlePause()" > 停止检测
< / el -button >
<!-- 暂停中按钮 - 禁用状态 , 显示加载动画 -- >
< el-button type = "warning" v-if = "TestStatus === 'paused_ing'" disabled >
< el-icon class = "loading-box" style = "color: #fff;margin-right: 8px;" >
< component :is = "Refresh" / >
< / el-icon >
暂停中
< / el-button >
<!-- 继续检测按钮 - 检测已暂停时显示 -- >
< el-button
type = "warning"
v-if = "(TestStatus =='paused')"
@@ -53,11 +78,14 @@
> 继续检测
< / el-button >
<!-- 下一步 / 完成 / 错误状态按钮 -- >
< el-button :type = "ActiveStatue==='success'?'primary':'danger'" :icon = "Right"
v-if = "nextStepText !== '下一步' && (ActiveStatue === 'success'||ActiveStatue==='error'||ActiveStatue==='test_init_fail'||ActiveStatue==='connect_timeout'||ActiveStatue==='pause_timeout')"
@click ="nextStep" >
{{ nextStepText }}
< / el -button >
<!-- 退出检测按钮 - 默认显示 -- >
< el-button type = "primary" @click ="handleQuit" v-else >
退出检测
< / el -button >
@@ -69,6 +97,7 @@
< / template >
< script lang = "tsx" setup name = "testPopup" >
// ====================== 导入依赖 ======================
import { reactive , ref , watch } from 'vue' ;
import { ElMessage , ElMessageBox } from 'element-plus'
import { Coin , Edit , Key , Odometer , Refresh , Right , SuccessFilled , UploadFilled , VideoPause , VideoPlay } from '@element-plus/icons-vue'
@@ -80,55 +109,70 @@ import socketClient from '@/utils/webSocketClient';
import { useCheckStore } from "@/stores/modules/check" ;
import { pauseTest , resumeTest , startPreTest } from '@/api/socket/socket'
import { useUserStore } from "@/stores/modules/user" ;
import { JwtUtil } from "@/utils/jwtUtil" ;
// ====================== 状态管理 ======================
const userStore = useUserStore ( )
const checkStore = useCheckStore ( ) ;
const nextStepText = ref ( '下一步' ) ;
const dialogVisible = ref ( false )
const showSteps = ref ( false )
const stepsTotalNum = ref ( - 1 ) ; //步骤总数
const stepsActiveIndex = ref ( 1 ) ; //当前正在执行的步骤索引
const stepsActiveView = ref ( - 1 ) ; //当前正在执行的步骤在(预处理、守时校验、系数校准、正式检测)中的排序,仅用于页面显示
const stepsActive = ref ( - 1 ) ; //当前正在执行的步骤在(预处理、守时校验、系数校准、正式检测)中的排序,实际记录步骤的状态,用于切换步骤
const ActiveStatue = ref ( 'waiting' ) ; //当前步骤状态
const preTestStatus = ref ( 'waiting' ) ; //预检测执行状态
const timeTestStatus = ref ( 'waiting' ) ; //守时校验执行状态
const channelsTestStatus = ref ( 'waiting' ) ; //通道系数校准执行状态
const TestStatus = ref ( 'waiting' ) ; //正式检测执行状态
const webMsgSend = ref ( ) ; //webSocket推送的数据
// ====================== 基础状态变量 ======================
const nextStepText = ref ( '下一步' ) ; // 下一步按钮文本
const dialogVisible = ref ( false ) // 弹窗显示状态
const dialogTitle = ref ( '' ) // 弹窗标题
const showComponent = ref ( true ) // 是否显示检测组件
const preTestRef = ref ( null ) // 预检测组件引用
const testRef = ref ( null ) // 正式检测组件引用
// ====================== 步骤控制相关变量 ======================
const showSteps = ref ( false ) // 是否显示步骤条
const stepsTotalNum = ref ( - 1 ) // 步骤总数(选中的检测项数量 + 1个完成步骤)
const stepsActiveIndex = ref ( 1 ) // 当前正在执行的步骤索引( 用于UI显示高亮)
const stepsActiveView = ref ( - 1 ) // 当前显示的检测组件步骤序号( 控制v-show显示哪个组件)
const stepsActive = ref ( - 1 ) // 当前实际执行的业务步骤序号(控制业务逻辑分支)
const dialogTitle = ref ( '' )
const showComponent = ref ( true )
const preTestRef = ref ( null )
const testRef = ref ( null )
// ====================== 状态管理变量 ======================
const ActiveStatue = ref ( 'waiting' ) // 当前步骤的整体状态( waiting/start/process/success/error等)
const preTestStatus = ref ( 'waiting' ) // 预检测执行状态
const timeTestStatus = ref ( 'waiting' ) // 守时校验执行状态
const channelsTestStatus = ref ( 'waiting' ) // 通道系数校准执行状态
const TestStatus = ref ( 'waiting' ) // 正式检测执行状态
const webMsgSend = ref ( ) // webSocket推送的数据, 用于组件间通信
// ====================== WebSocket 相关 ======================
const dataSocket = reactive ( {
socketServe : socketClient . Instance ,
socketServe : socketClient . Instance , // WebSocket客户端实例
} ) ;
// 勾选的检测内容
const preTestSelected = ref ( false )
const tim eTestSelected = ref ( false )
const channels TestSelected = ref ( false )
const t estSelected = ref ( false )
// ====================== 检测项选择状态 ======================
// 根据用户勾选的检测内容动态显示对应的检测步骤和组件
const pr eTestSelected = ref ( false ) // 是否选择预检测
const time TestSelected = ref ( false ) // 是否选择守时检测
const channelsT estSelected = ref ( false ) // 是否选择系数校准
const testSelected = ref ( false ) // 是否选择正式检测
// ====================== 初始化操作 ======================
/**
* 初始化操作 - 重置所有状态并根据用户选择的检测项设置初始步骤
*/
const initOperate = ( ) => {
// 重置所有状态为等待状态
ActiveStatue . value = 'waiting'
preTestStatus . value = 'waiting'
timeTestStatus . value = 'waiting'
channelsTestStatus . value = 'waiting'
TestStatus . value = 'waiting'
// 重置步骤和组件显示状态
stepsActiveIndex . value = 1
showComponent . value = true
// 初始化勾选的检测内容
// 从store中获取用户勾选的检测内容
preTestSelected . value = checkStore . selectTestItems . preTest
timeTestSelected . value = checkStore . selectTestItems . timeTest
channelsTestSelected . value = checkStore . selectTestItems . channelsTest
testSelected . value = checkStore . selectTestItems . test
// 计算总步骤数(选中的检测项 + 1个完成步骤)
let count = 0
for ( let key in checkStore . selectTestItems ) {
if ( checkStore . selectTestItems [ key ] ) {
@@ -137,68 +181,89 @@ const initOperate = () => {
}
stepsTotalNum . value = count + 1
// 根据选中的检测项,设置初始显示的步骤(按优先级:预检测 > 守时检测 > 系数校准 > 正式检测)
if ( preTestSelected . value ) {
stepsActiveView . value = 1
stepsActive . value = 1
stepsActiveView . value = 1 // 显示预检测组件
stepsActive . value = 1 // 业务逻辑设为预检测
return
}
if ( timeTestSelected . value ) {
stepsActiveView . value = 2
stepsActive . value = 2
stepsActiveView . value = 2 // 显示守时检测组件
stepsActive . value = 2 // 业务逻辑设为守时检测
return
}
if ( channelsTestSelected . value ) {
stepsActiveView . value = 3
stepsActive . value = 3
stepsActiveView . value = 3 // 显示系数校准组件
stepsActive . value = 3 // 业务逻辑设为系数校准
return
}
if ( testSelected . value ) {
stepsActiveView . value = 4
stepsActive . value = 4
stepsActiveView . value = 4 // 显示正式检测组件
stepsActive . value = 4 // 业务逻辑设为正式检测
return
}
}
// ====================== 弹窗开启方法 ======================
/**
* 打开检测弹窗
* @param title 弹窗标题
*/
const open = ( title : string ) => {
showSteps . value = true
initOperate ( )
dialogTitle . value = title ;
dialogVisible . value = true ;
showSteps . value = true // 显示步骤条
initOperate ( ) // 初始化所有状态和步骤
dialogTitle . value = title // 设置弹窗标题
dialogVisible . value = true // 显示弹窗
// 如果预检测组件存在,初始化其参数
if ( preTestRef . value ) {
preTestRef . value . initializeParameters ( ) ;
}
//开始 创建w ebSocket客户端
// 创建W ebSocket连接
socketClient . Instance . connect ( ) ;
dataSocket . socketServe = socketClient . Instance ;
// 注册WebSocket消息回调处理
dataSocket . socketServe . registerCallBack ( 'aaa' , ( res ) => {
// 处理来自服务器的消息
// console.log('Received message:', res);
// 根据需要在这里添加更多的处理逻辑
if ( res . code === 20000 ) {
// 处理错误码20000的情况
//ElMessage.error(message.message)
// loading.close()
} else {
// 将接收到的数据传递给子组件
webMsgSend . value = res
}
} ) ;
}
// ====================== 开始检测处理 ======================
/**
* 快速开始检测 - 根据当前步骤执行对应的检测逻辑
*/
const handleSubmitFast = ( ) => {
// 获取设备ID列表和计划ID
let deviceIds = checkStore . devices . map ( ( item ) => item . deviceId )
let planId = checkStore . plan . id
// 检查WebSocket连接状态
if ( ! dataSocket . socketServe . connected ) {
ElMessage . error ( 'webSocket连接中断! ' )
return
}
console . log ( "handleSubmit" , stepsActive . value , TestStatus . value )
// 根据当前激活的步骤执行对应的检测逻辑
switch ( stepsActive . value ) {
case 1 :
case 1 : // 预检测步骤
if ( preTestStatus . value == 'waiting' ) {
if ( checkStore . selectTestItems . preTest ) {
// 启动预检测
startPreTest ( {
userPageId : JwtUtil . getLoginName ( ) ,
devIds : deviceIds ,
planId : planId ,
reCheckType : checkStore . reCheckType == 1 ? '1' : '2' ,
@@ -219,13 +284,15 @@ const handleSubmitFast = () => {
}
}
break ;
case 2 :
case 2 : // 守时检测步骤
timeTestStatus . value = 'start'
break ;
case 3 :
case 3 : // 系数校准步骤
if ( channelsTestStatus . value == 'waiting' ) {
// 如果没有预检测且有系数校准,需要先进行初始化
if ( ! checkStore . selectTestItems . preTest && checkStore . selectTestItems . channelsTest ) {
startPreTest ( {
userPageId : JwtUtil . getLoginName ( ) ,
devIds : deviceIds ,
planId : planId ,
reCheckType : checkStore . reCheckType == 1 ? '1' : '2' ,
@@ -242,15 +309,16 @@ const handleSubmitFast = () => {
channelsTestStatus . value = 'test_init_fail'
}
} )
// 调用系数校准组件的handleSubmit方法
}
channelsTestStatus . value = 'start'
}
break ;
case 4 :
case 4 : // 正式检测步骤
if ( TestStatus . value == "waiting" ) {
// 如果没有预检测和系数校准,直接进行正式检测需要先初始化
if ( ! checkStore . selectTestItems . preTest && ! checkStore . selectTestItems . channelsTest && checkStore . selectTestItems . test ) {
startPreTest ( {
userPageId : JwtUtil . getLoginName ( ) ,
devIds : deviceIds ,
planId : planId ,
reCheckType : checkStore . reCheckType == 1 ? '1' : '2' ,
@@ -270,16 +338,9 @@ const handleSubmitFast = () => {
}
TestStatus . value = 'start'
} else if ( TestStatus . value == 'paused' ) {
// 发送继续指令
// 如果是暂停状态, 发送继续指令
sendResume ( )
}
// else if (TestStatus.value == 'recheck') {
// // 发送重新检测指令
// sendReCheck()
// }
// else if (TestStatus.value == 'success') {
// handleClose()
// }
break ;
default :
break ;
@@ -287,117 +348,157 @@ const handleSubmitFast = () => {
}
// ====================== 事件定义 ======================
const emit = defineEmits < {
( e : 'quitClicked' ) : void ;
( e : 'quitClicked' ) : void ; // 退出检测事件
} > ( ) ;
// ====================== 状态监听器 ======================
// 监听各个检测步骤的状态变化,并同步到总体状态
watch ( preTestStatus , function ( newValue , oldValue ) {
console . log ( newValue , oldValue ) ;
ActiveStatue . value = newValue
console . log ( '预检测状态变化:' , newValue , oldValue ) ;
ActiveStatue . value = newValue // 同步到总体状态
} )
watch ( timeTestStatus , function ( newValue , oldValue ) {
console . log ( newValue , oldValue ) ;
ActiveStatue . value = newValue
console . log ( '守时检测状态变化:' , newValue , oldValue ) ;
ActiveStatue . value = newValue // 同步到总体状态
} )
watch ( channelsTestStatus , function ( newValue , oldValue ) {
console . log ( newValue , oldValue ) ;
ActiveStatue . value = newValue
console . log ( '系数校准状态变化:' , newValue , oldValue ) ;
ActiveStatue . value = newValue // 同步到总体状态
} )
watch ( TestStatus , function ( newValue , oldValue ) {
console . log ( newValue , oldValue ) ;
ActiveStatue . value = newValue
console . log ( '正式检测状态变化:' , newValue , oldValue ) ;
ActiveStatue . value = newValue // 同步到总体状态
} )
// 监听总体状态变化,处理步骤切换和错误状态
watch ( ActiveStatue , function ( newValue , oldValue ) {
console . log ( '总体状态变化:' , newValue , oldValue ) ;
// 处理错误状态
if ( newValue === 'error' ) {
stepsActiveIndex . value = stepsTotalNum . value + 1
stepsActiveIndex . value = stepsTotalNum . value + 1 // 跳到最后一步
nextStepText . value = '检测失败'
}
// 处理成功完成状态(已到达最后一个检测步骤)
if ( newValue === 'success' && stepsActiveIndex . value === stepsTotalNum . value - 1 ) {
stepsActiveIndex . value += 2
stepsActiveIndex . value += 2 // 跳到完成状态
nextStepText . value = '检测完成'
}
// 处理初始化失败状态
if ( newValue === 'test_init_fail' ) {
stepsActiveIndex . value += 2
stepsActiveIndex . value += 2 // 跳过当前步骤
nextStepText . value = '初始化失败'
}
// 处理连接超时状态
if ( newValue === 'connect_timeout' ) {
stepsActiveIndex . value += 2
stepsActiveIndex . value += 2 // 跳过当前步骤
nextStepText . value = '连接超时'
}
// 处理暂停超时状态
if ( newValue === 'pause_timeout' ) {
stepsActiveIndex . value += 2
// nextStepText.value = '结束测试'
stepsActiveIndex . value += 2 // 跳过当前步骤
nextStepText . value = '暂停超时'
}
if ( newValue === 'success' && stepsActiveIndex . value < stepsTotalNum . value - 1 ) {
nextStep ( ) // 实现自动点击,进入下一个测试内容
//handleSubmit()
handleSubmitFast ( )
}
// 处理成功状态的自动步骤切换(还有后续步骤时)
if ( newValue === 'success' && stepsActiveIndex . value < stepsTotalNum . value - 1 ) {
nextStep ( ) // 自动进入下一个测试步骤
handleSubmitFast ( ) // 自动开始下一步检测
}
} )
// ====================== 退出和暂停恢复处理 ======================
/**
* 处理退出检测
*/
const handleQuit = ( ) => {
console . log ( 'handleQuit' , ActiveStatue . value )
// 如果不是终止状态,需要确认退出
if ( ActiveStatue . value !== 'success' && ActiveStatue . value !== 'waiting' && ActiveStatue . value !== 'paused' && ActiveStatue . value !== 'test_init_fail' && ActiveStatue . value !== 'connect_timeout' && ActiveStatue . value !== 'pause_timeout' ) {
beforeClose ( ( ) => {
// 确认退出回调(空实现)
} )
} else {
handleClose ( )
handleClose ( ) // 直接关闭
}
}
/**
* 处理暂停检测
*/
const handlePause = ( ) => {
sendPause ( )
testRef . value ? . handlePause ( )
sendPause ( ) // 发送暂停指令
testRef . value ? . handlePause ( ) // 调用正式检测组件的暂停方法
}
/**
* 发送暂停指令
*/
const sendPause = ( ) => {
console . log ( '发起暂停请求' )
TestStatus . value = 'paused_ing'
pauseTest ( )
// setTimeout(() => {
// Object.assign(webMsgSend.value, {
// requestId: 'preStopTest',
// operateCode: 'stop'
// })
// }, 5000)
TestStatus . value = 'paused_ing' // 设置为暂停中状态
pauseTest ( ) // 调用暂停API
}
/**
* 发送继续检测指令
*/
const sendResume = ( ) => {
console . log ( '发起继续检测请求' )
// 调用继续检测API
resumeTest ( {
userPageId : "cdf" ,
devIds : checkStore . devices . map ( ( item ) => item . deviceId ) ,
planId : checkStore . plan . id ,
<< << << < HEAD
reCheckType : '2' , // 0:'系数校验', '1'为预检测、‘ 2‘ 为正式检测、'8'为不合格项复检
=== === =
operateType : '2' , // 操作类型: 0-系数校验, 1-预检测, 2-正式检测, 8-不合格项复检
>>> >>> > 3 d1b4eb7c617a76aa37d9d81af4136da08932228
userId : userStore . userInfo . id ,
temperature : checkStore . temperature ,
humidity : checkStore . humidity
} )
// 发送继续成功消息给子组件
Object . assign ( webMsgSend . value , {
requestId : 'Resume_Success'
} )
}
/**
* 发送重新检测指令
*/
const sendReCheck = ( ) => {
console . log ( '发送重新检测指令' )
// 启动重新检测流程
startPreTest ( {
userPageId : JwtUtil . getLoginName ( ) ,
devIds : checkStore . devices . map ( ( item ) => item . deviceId ) ,
planId : checkStore . plan . id ,
<< << << < HEAD
reCheckType : '2' , // 0:'系数校验', '1'为预检测、‘ 2‘ 为正式检测、'8'为不合格项复检
=== === =
operateType : '2' , // 操作类型: 0-系数校验, 1-预检测, 2-正式检测, 8-不合格项复检
>>> >>> > 3 d1b4eb7c617a76aa37d9d81af4136da08932228
userId : userStore . userInfo . id ,
temperature : checkStore . temperature ,
humidity : checkStore . humidity ,
testItemList : [ checkStore . selectTestItems . preTest , checkStore . selectTestItems . channelsTest , checkStore . selectTestItems . test ]
} ) . then ( res => {
console . log ( res )
console . log ( '重新检测响应:' , res )
if ( res . code === 'A001014' ) {
ElMessageBox . alert ( '装置配置异常' , '初始化失败' , {
confirmButtonText : '确定' ,
@@ -406,58 +507,67 @@ const sendReCheck = () => {
TestStatus . value = 'test_init_fail'
}
} )
TestStatus . value = 'start'
TestStatus . value = 'start' // 设置为开始状态
}
/**
* 关闭WebSocket连接
*/
const closeWebSocket = ( ) => {
dataSocket . socketServe . closeWs ( )
}
// ====================== 步骤切换处理 ======================
/**
* 进入下一步检测 - 复杂的步骤切换逻辑
*/
const nextStep = ( ) => {
// 如果已到最后或遇到错误状态,直接关闭弹窗
if ( stepsActiveIndex . value == stepsTotalNum . value + 1 || ActiveStatue . value === 'error' || ActiveStatue . value === 'test_init_fail' || ActiveStatue . value === 'connect_timeout' || ActiveStatue . value === 'pause_timeout' ) {
handleClose ( )
return
}
// 如果不是错误状态,进行步骤切换
if ( ActiveStatue . value != 'error' ) {
ActiveStatue . value = 'waiting'
ActiveStatue . value = 'waiting' // 重置为等待状态
let tempStep = stepsActiveIndex . value
let idx = 1
stepsActiveIndex . value ++
stepsActiveIndex . value ++ // 步骤索引递增
// 遍历检测项,找到下一个需要执行的步骤
for ( let selectTestItemsKey in checkStore . selectTestItems ) {
if ( tempStep == 0 && checkStore . selectTestItems [ selectTestItemsKey ] ) {
stepsActiveView . value = idx
stepsActive . value = idx
// 找到下一个要执行的检测项
stepsActiveView . value = idx // 设置显示的组件
stepsActive . value = idx // 设置业务逻辑步骤
return
}
if ( checkStore . selectTestItems [ selectTestItemsKey ] && tempStep != 0 ) {
tempStep --
tempStep -- // 跳过已选择的检测项
}
idx ++
}
}
// if (stepsActiveIndex.value < stepsTotalNum.value && ActiveStatue.value != 'error') {
// stepsActiveIndex.value++
// if (!checkStore.selectTestItems.timeTest) { // 不具备守时检测
// stepsActiveIndex.value++
// }
//
// ActiveStatue.value = 'waiting'
// } else if (stepsActiveIndex.value === stepsTotalNum.value || ActiveStatue.value === 'error') {
// //emit('update:visible', false); // 关闭对话框
// clearData()
// dialogVisible.value = false;
// }
}
/**
* 处理步骤点击 - 允许点击回到之前已完成的步骤
* @param step 点击的步骤序号
*/
const handleStepClick = ( step : number ) => {
if ( step > stepsActive . value ) {
return
return // 不能点击未完成的步骤
} else {
stepsActiveView . value = step
stepsActiveView . value = step // 切换到点击的步骤显示
}
}
// ====================== 数据清理和关闭处理 ======================
/**
* 清理所有数据状态
*/
function clearData ( ) {
stepsTotalNum . value = - 1
stepsActiveIndex . value = 1
@@ -470,7 +580,12 @@ function clearData() {
nextStepText . value = "下一步"
}
/**
* 关闭前确认处理
* @param done 确认关闭的回调函数
*/
const beforeClose = ( done : ( ) => void ) => {
// 如果检测未完成且不是错误状态,需要用户确认
if ( stepsActiveIndex . value < stepsTotalNum . value && ActiveStatue . value != 'error' ) {
ElMessageBox . confirm ( '检测未完成,是否退出当前检测流程?' , '提示' , {
confirmButtonText : '确定' ,
@@ -478,25 +593,28 @@ const beforeClose = (done: () => void) => {
type : 'warning' ,
}
) . then ( ( ) => {
handleClose ( )
handleClose ( ) // 用户确认后关闭
} )
} else {
handleClose ( )
handleClose ( ) // 直接关闭
}
}
/**
* 关闭弹窗并清理资源
*/
const handleClose = ( ) => {
showSteps . value = false
dataSocket . socketServe . closeWs ( )
dialogVisible . value = false ;
clearData ( )
showComponent . value = false ;
showSteps . value = false // 隐藏步骤条
dataSocket . socketServe . closeWs ( ) // 关闭WebSocket连接
dialogVisible . value = false // 隐藏弹窗
clearData ( ) // 清理所有状态数据
showComponent . value = false // 隐藏检测组件
emit ( 'quitClicked' ) ; // 触发事 件
emit ( 'quitClicked' ) // 触发退出事件通知父组 件
}
// 对外映射
defineExpose ( { open } )
// ====================== 对外暴露的方法 ======================
defineExpose ( { open } ) // 只暴露open方法供父组件调用
< / script >
< style scoped lang = "scss" >