ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端优化调整

Browse Source
This commit is contained in:
hongawen
2025-08-11 11:14:20 +08:00
parent 27d2d82fcd
commit c85eac3888
3 changed files with 661 additions and 712 deletions
Download Patch File Download Diff File Expand all files Collapse all files

422
frontend/src/views/home/components/testPopup.vue
View File

@@ -1,92 +1,105 @@
<template>
<!-- 检测流程弹窗容器 -->
<el-dialog :title="dialogTitle" width="1550px" :model-value="dialogVisible" :before-close="beforeClose" @close="handleClose" height="1000px" draggable>
<el-dialog :title='dialogTitle' width='1550px' :model-value='dialogVisible' :before-close='beforeClose'
@close='handleClose' height='1000px' draggable>
<!-- 步骤指示器容器 -->
<div class="steps-container">
<div class='steps-container'>
<!-- 检测步骤进度条，根据选择的检测项动态显示步骤 -->
<!-- 注意：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-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='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='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='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 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-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"/>
<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"/>
<timeTest v-if='showComponent&&timeTestSelected' v-show='timeTestSelected && stepsActiveView==2'
v-model:testStatus='timeTestStatus' />
<!-- 系数校准检测组件 -->
<factorTest v-if="showComponent&&channelsTestSelected" v-show="channelsTestSelected && stepsActiveView==3" v-model:testStatus="channelsTestStatus"
:webMsgSend="webMsgSend"/>
<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"/>
<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'
@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' :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-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()">停止检测
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-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')"
:icon="VideoPlay"
@click="sendResume"
type='warning'
v-if="(TestStatus =='paused')"
:icon='VideoPlay'
@click='sendResume'
>继续检测
</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">
<el-button :type="ActiveStatue==='success'?'primary':'danger'" :icon='Right'
v-if="nextStepText !== '下一步' && (ActiveStatue === 'success'||ActiveStatue==='error'||ActiveStatue==='connect_timeout'||ActiveStatue==='pause_timeout')"
@click='nextStep'>
{{ nextStepText }}
</el-button>
<!-- 退出检测按钮 - 默认显示 -->
<el-button type="primary" @click="handleQuit" v-else>
<el-button type='primary' @click='handleQuit' v-else>
退出检测
</el-button>
</div>
@@ -96,27 +109,38 @@
</template>
<script lang="tsx" setup name="testPopup">
<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'
import { reactive, ref, watch, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
Coin,
Edit,
Key,
Odometer,
Refresh,
Right,
SuccessFilled,
UploadFilled,
VideoPause,
VideoPlay,
} from '@element-plus/icons-vue'
import preTest from './preTest.vue'
import timeTest from './timeTest.vue'
import factorTest from './factorTest.vue'
import test from './test.vue'
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";
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 checkStore = useCheckStore()
// ====================== 基础状态变量 ======================
const nextStepText = ref('下一步'); // 下一步按钮文本
const nextStepText = ref('下一步') // 下一步按钮文本
const dialogVisible = ref(false) // 弹窗显示状态
const dialogTitle = ref('') // 弹窗标题
const showComponent = ref(true) // 是否显示检测组件
@@ -141,7 +165,7 @@ const webMsgSend = ref() // webSocket推送的数据，用于组件间通信
// ====================== WebSocket 相关 ======================
const dataSocket = reactive({
socketServe: socketClient.Instance, // WebSocket客户端实例
});
})
// ====================== 检测项选择状态 ======================
// 根据用户勾选的检测内容动态显示对应的检测步骤和组件
@@ -165,7 +189,7 @@ const initOperate = () => {
// 重置步骤和组件显示状态
stepsActiveIndex.value = 1
showComponent.value = true
// 从store中获取用户勾选的检测内容
preTestSelected.value = checkStore.selectTestItems.preTest
timeTestSelected.value = checkStore.selectTestItems.timeTest
@@ -217,26 +241,18 @@ const open = (title: string) => {
// 如果预检测组件存在，初始化其参数
if (preTestRef.value) {
preTestRef.value.initializeParameters();
preTestRef.value.initializeParameters()
}
// 创建WebSocket连接
socketClient.Instance.connect();
dataSocket.socketServe = socketClient.Instance;
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
}
});
// 将接收到的数据传递给子组件
webMsgSend.value = res
})
}
// ====================== 开始检测处理 ======================
@@ -253,9 +269,9 @@ const handleSubmitFast = () => {
ElMessage.error('webSocket连接中断！')
return
}
console.log("handleSubmit", stepsActive.value, TestStatus.value)
console.log('handleSubmit', stepsActive.value, TestStatus.value)
// 根据当前激活的步骤执行对应的检测逻辑
switch (stepsActive.value) {
case 1: // 预检测步骤
@@ -263,17 +279,17 @@ const handleSubmitFast = () => {
if (checkStore.selectTestItems.preTest) {
// 启动预检测
startPreTest({
userPageId:JwtUtil.getLoginName(),
userPageId: JwtUtil.getLoginName(),
devIds: deviceIds,
planId: planId,
reCheckType: checkStore.reCheckType == 1 ? '1' : '2',
reCheckType: checkStore.reCheckType == 1 ? '1' : '2', // 操作类型：1为预检测，2为正式检测
userId: userStore.userInfo.id,
temperature: checkStore.temperature,
humidity: checkStore.humidity,
testItemList: [checkStore.selectTestItems.preTest, checkStore.selectTestItems.channelsTest, checkStore.selectTestItems.test]
testItemList: [checkStore.selectTestItems.preTest, checkStore.selectTestItems.channelsTest, checkStore.selectTestItems.test],
}).then(res => {
if (res.code === 'A001014') {
ElMessageBox.alert('装置配置异常', '检测失败', {
if (res.code !== 'A0000') {
ElMessageBox.alert('预检测失败', '检测失败', {
confirmButtonText: '确定',
type: 'error',
})
@@ -283,56 +299,56 @@ const handleSubmitFast = () => {
preTestStatus.value = 'start'
}
}
break;
break
case 2: // 守时检测步骤
timeTestStatus.value = 'start'
break;
break
case 3: // 系数校准步骤
if (channelsTestStatus.value == 'waiting') {
// 如果没有预检测且有系数校准，需要先进行初始化
if (!checkStore.selectTestItems.preTest && checkStore.selectTestItems.channelsTest) {
startPreTest({
userPageId:JwtUtil.getLoginName(),
userPageId: JwtUtil.getLoginName(),
devIds: deviceIds,
planId: planId,
reCheckType: checkStore.reCheckType == 1 ? '1' : '2',
userId: userStore.userInfo.id,
temperature: checkStore.temperature,
humidity: checkStore.humidity,
testItemList: [checkStore.selectTestItems.preTest, checkStore.selectTestItems.channelsTest, checkStore.selectTestItems.test]
testItemList: [checkStore.selectTestItems.preTest, checkStore.selectTestItems.channelsTest, checkStore.selectTestItems.test],
}).then(res => {
if (res.code === 'A001014') {
ElMessageBox.alert('装置配置异常', '初始化失败', {
if (res.code !== 'A0000') {
ElMessageBox.alert('系数校准失败', '检测失败', {
confirmButtonText: '确定',
type: 'error',
})
channelsTestStatus.value = 'test_init_fail'
channelsTestStatus.value = 'error'
}
})
}
channelsTestStatus.value = 'start'
}
break;
break
case 4: // 正式检测步骤
if (TestStatus.value == "waiting") {
if (TestStatus.value == 'waiting') {
// 如果没有预检测和系数校准，直接进行正式检测需要先初始化
if (!checkStore.selectTestItems.preTest && !checkStore.selectTestItems.channelsTest && checkStore.selectTestItems.test) {
startPreTest({
userPageId:JwtUtil.getLoginName(),
userPageId: JwtUtil.getLoginName(),
devIds: deviceIds,
planId: planId,
reCheckType: checkStore.reCheckType == 1 ? '1' : '2',
userId: userStore.userInfo.id,
temperature: checkStore.temperature,
humidity: checkStore.humidity,
testItemList: [checkStore.selectTestItems.preTest, checkStore.selectTestItems.channelsTest, checkStore.selectTestItems.test]
testItemList: [checkStore.selectTestItems.preTest, checkStore.selectTestItems.channelsTest, checkStore.selectTestItems.test],
}).then(res => {
if (res.code === 'A001014') {
ElMessageBox.alert('装置配置异常', '初始化失败', {
if (res.code !== 'A0000') {
ElMessageBox.alert('正式检测失败', '检测失败', {
confirmButtonText: '确定',
type: 'error',
})
TestStatus.value = 'test_init_fail'
TestStatus.value = 'error'
}
})
}
@@ -341,9 +357,9 @@ const handleSubmitFast = () => {
// 如果是暂停状态，发送继续指令
sendResume()
}
break;
break
default:
break;
break
}
}
@@ -351,64 +367,61 @@ const handleSubmitFast = () => {
// ====================== 事件定义 ======================
const emit = defineEmits<{
(e: 'quitClicked'): void; // 退出检测事件
}>();
}>()
// ====================== 状态监听器 ======================
// 监听各个检测步骤的状态变化，并同步到总体状态
watch(preTestStatus, function (newValue, oldValue) {
console.log('预检测状态变化：', newValue, oldValue);
watch(preTestStatus, function(newValue, oldValue) {
console.log('预检测状态变化：', newValue, oldValue)
ActiveStatue.value = newValue // 同步到总体状态
})
watch(timeTestStatus, function (newValue, oldValue) {
console.log('守时检测状态变化：', newValue, oldValue);
watch(timeTestStatus, function(newValue, oldValue) {
console.log('守时检测状态变化：', newValue, oldValue)
ActiveStatue.value = newValue // 同步到总体状态
})
watch(channelsTestStatus, function (newValue, oldValue) {
console.log('系数校准状态变化：', newValue, oldValue);
watch(channelsTestStatus, function(newValue, oldValue) {
console.log('系数校准状态变化：', newValue, oldValue)
ActiveStatue.value = newValue // 同步到总体状态
})
watch(TestStatus, function (newValue, oldValue) {
console.log('正式检测状态变化：', newValue, oldValue);
watch(TestStatus, function(newValue, oldValue) {
console.log('正式检测状态变化：', newValue, oldValue)
ActiveStatue.value = newValue // 同步到总体状态
})
// 监听总体状态变化，处理步骤切换和错误状态
watch(ActiveStatue, function (newValue, oldValue) {
console.log('总体状态变化：', newValue, oldValue);
watch(ActiveStatue, function(newValue, oldValue) {
console.log('总体状态变化：', newValue, oldValue)
// 处理错误状态
if (newValue === 'error') {
stepsActiveIndex.value = stepsTotalNum.value + 1 // 跳到最后一步
nextStepText.value = '检测失败'
}
// 处理成功完成状态（已到达最后一个检测步骤）
if (newValue === 'success' && stepsActiveIndex.value === stepsTotalNum.value - 1) {
stepsActiveIndex.value += 2 // 跳到完成状态
console.log('success')
nextStepText.value = '检测完成'
}
// 处理初始化失败状态
if (newValue === 'test_init_fail') {
stepsActiveIndex.value += 2 // 跳过当前步骤
nextStepText.value = '初始化失败'
}
// 处理连接超时状态
if (newValue === 'connect_timeout') {
stepsActiveIndex.value += 2 // 跳过当前步骤
console.log('connect_timeout')
nextStepText.value = '连接超时'
}
// 处理暂停超时状态
if (newValue === 'pause_timeout') {
stepsActiveIndex.value += 2 // 跳过当前步骤
console.log('pause_timeout')
nextStepText.value = '暂停超时'
}
// 处理成功状态的自动步骤切换（还有后续步骤时）
if (newValue === 'success' && stepsActiveIndex.value < stepsTotalNum.value - 1) {
nextStep() // 自动进入下一个测试步骤
@@ -422,13 +435,29 @@ watch(ActiveStatue, function (newValue, oldValue) {
*/
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(() => {
// 确认退出回调（空实现）
})
// 可以直接关闭的安全状态：未检测、检测完成、检测失败或异常情况
const safeExitStates = [
'waiting', // 未开始检测
'success', // 检测完成
'error', // 检测失败
'connect_timeout', // 连接超时
'pause_timeout' // 暂停超时
]
// 需要确认退出的状态：所有进行中、暂停中等状态
const needConfirmStates = [
'start', // 开始检测
'process', // 检测进行中
'test_init', // 初始化中
'paused', // 已暂停（用户可能想要继续）
'paused_ing' // 暂停中
]
if (safeExitStates.includes(ActiveStatue.value)) {
handleClose() // 安全状态直接关闭
} else {
handleClose() // 直接关闭
beforeClose() // 需要确认的状态
}
}
@@ -445,7 +474,7 @@ const handlePause = () => {
*/
const sendPause = () => {
console.log('发起暂停请求')
TestStatus.value = 'paused_ing' // 设置为暂停中状态
pauseTest() // 调用暂停API
}
@@ -455,59 +484,31 @@ const sendPause = () => {
*/
const sendResume = () => {
console.log('发起继续检测请求')
// 调用继续检测API
resumeTest({
userPageId: "cdf",
userPageId: JwtUtil.getLoginName(),
devIds: checkStore.devices.map((item) => item.deviceId),
planId: checkStore.plan.id,
reCheckType: '2', // 0:'系数校验'，'1'为预检测、‘2‘为正式检测、'8'为不合格项复检
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,
reCheckType: '2', // 0:'系数校验'，'1'为预检测、‘2‘为正式检测、'8'为不合格项复检
reCheckType: '2', // 操作类型：0-系数校验，1-预检测，2-正式检测，8-不合格项复检
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)
if (res.code === 'A001014') {
ElMessageBox.alert('装置配置异常', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
TestStatus.value = 'test_init_fail'
}
})
TestStatus.value = 'start' // 设置为开始状态
// 发送继续成功消息给子组件
Object.assign(webMsgSend.value, {
requestId: 'Resume_Success',
})
}
/**
* 关闭WebSocket连接
*/
const closeWebSocket = () => {
dataSocket.socketServe.closeWs()
// 检查连接状态，避免重复关闭WebSocket连接
if (dataSocket.socketServe.connected) {
dataSocket.socketServe.closeWs()
}
}
// ====================== 步骤切换处理 ======================
@@ -516,18 +517,18 @@ const closeWebSocket = () => {
*/
const nextStep = () => {
// 如果已到最后或遇到错误状态，直接关闭弹窗
if (stepsActiveIndex.value == stepsTotalNum.value + 1 || ActiveStatue.value === 'error' || ActiveStatue.value === 'test_init_fail' || ActiveStatue.value === 'connect_timeout' || ActiveStatue.value === 'pause_timeout') {
if (stepsActiveIndex.value == stepsTotalNum.value + 1 || ActiveStatue.value === 'error' || ActiveStatue.value === 'connect_timeout' || ActiveStatue.value === 'pause_timeout') {
handleClose()
return
}
// 如果不是错误状态，进行步骤切换
if (ActiveStatue.value != 'error') {
ActiveStatue.value = 'waiting' // 重置为等待状态
let tempStep = stepsActiveIndex.value
let idx = 1
stepsActiveIndex.value++ // 步骤索引递增
// 遍历检测项，找到下一个需要执行的步骤
for (let selectTestItemsKey in checkStore.selectTestItems) {
if (tempStep == 0 && checkStore.selectTestItems[selectTestItemsKey]) {
@@ -564,26 +565,25 @@ function clearData() {
stepsTotalNum.value = -1
stepsActiveIndex.value = 1
stepsActiveView.value = -1
preTestStatus.value = "waiting"
timeTestStatus.value = "waiting"
channelsTestStatus.value = "waiting"
TestStatus.value = "waiting"
ActiveStatue.value = "waiting"
nextStepText.value = "下一步"
preTestStatus.value = 'waiting'
timeTestStatus.value = 'waiting'
channelsTestStatus.value = 'waiting'
TestStatus.value = 'waiting'
ActiveStatue.value = 'waiting'
nextStepText.value = '下一步'
}
/**
* 关闭前确认处理
* @param done 确认关闭的回调函数
*/
const beforeClose = (done: () => void) => {
const beforeClose = () => {
// 如果检测未完成且不是错误状态，需要用户确认
if (stepsActiveIndex.value < stepsTotalNum.value && ActiveStatue.value != 'error') {
ElMessageBox.confirm('检测未完成，是否退出当前检测流程?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
},
).then(() => {
handleClose() // 用户确认后关闭
})
@@ -597,7 +597,7 @@ const beforeClose = (done: () => void) => {
*/
const handleClose = () => {
showSteps.value = false // 隐藏步骤条
dataSocket.socketServe.closeWs() // 关闭WebSocket连接
closeWebSocket() // 统一通过closeWebSocket函数关闭连接，避免重复关闭
dialogVisible.value = false // 隐藏弹窗
clearData() // 清理所有状态数据
showComponent.value = false // 隐藏检测组件
@@ -605,11 +605,20 @@ const handleClose = () => {
emit('quitClicked') // 触发退出事件通知父组件
}
// ====================== 生命周期处理 ======================
/**
* 组件卸载前的清理工作
* 确保路由切换或组件销毁时正确关闭WebSocket连接
*/
onBeforeUnmount(() => {
closeWebSocket() // 组件销毁前关闭WebSocket连接
})
// ====================== 对外暴露的方法 ======================
defineExpose({open}) // 只暴露open方法供父组件调用
defineExpose({ open }) // 只暴露open方法供父组件调用
</script>
<style scoped lang="scss">
<style scoped lang='scss'>
.test-head-steps {
::v-deep .el-step {
@@ -666,52 +675,5 @@ defineExpose({open}) // 只暴露open方法供父组件调用
}
}
// :deep(.test-head-steps){
// height: 100px;
// margin-bottom: 20px;
// }
// .el-step__icon.is-text {
// border-radius: 50%;
// border: 4px solid;
// width: 50px;
// height: 50px;
// border-color: inherit;
// }
// .el-step__icon.is-icon {
// border-radius: 50%;
// border: 4px solid;
// width: 50px;
// height: 50px;
// border-color: inherit;
// }
// .test-head-steps .el-step__line{
// height:50px !important;
// }
// .test-head-steps .el-step__icon-inner{
// width: 40px !important;
// height:40px !important;
// }
// .test-head-steps .el-step__icon{
// width: 48px !important;
// height:48px !important;
// font-size: 48px !important; /* 调整图标大小 */
// line-height: 80px !important; /* 使图标居中 */
// }
// :deep(.el-step__title) {
// font-size: 24px !important; /* 设置标题字体大小 */
// margin-top: 10px !important; /* 调整标题与图标的间距 */
// }
// :deep(.el-step__icon-inner) {
// font-size: 24px !important;
// }
// .test-head-steps .el-step__description {
// font-size: 20px !important; /* 设置描述字体大小 */
// }
</style>