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

503
frontend/src/views/home/components/factorTest.vue
View File

@@ -90,6 +90,21 @@
</template>
<script lang="tsx" setup name="FactorTest">
/**
* 系数校准组件
*
* 功能概述：
* 1. 对电力设备进行系数校准，确保测量精度
* 2. 包含4个校准步骤：大/小电压电流系数的下装和校准
* 3. 支持多设备并行校准，实时显示校准数据和结果
* 4. 校准完成后自动统计合格设备数量并通知父组件
*
* 校准流程：
* 第1步：大电压/电流系数下装 - 向设备下发大幅值的系数参数
* 第2步：小电压/电流系数下装 - 向设备下发小幅值的系数参数
* 第3步：大电压/电流校准 - 使用大幅值进行校准测试
* 第4步：小电压/电流校准 - 使用小幅值进行校准测试
*/
import {type Device} from '@/api/device/interface/device';
import {Failed} from '@element-plus/icons-vue'
import {onBeforeMount, type Ref, ref, toRef, watch} from 'vue'
@@ -101,182 +116,235 @@ import type {Plan} from '@/api/plan/interface';
import {useCheckStore} from "@/stores/modules/check";
import {useUserStore} from "@/stores/modules/user";
// ==================== 状态管理 ====================
const checkStore = useCheckStore()
const activeIndex = ref(0)
const activeTotalNum = ref(4)
const qualified = ref(0)
const outputDsc = ref('电压误差为：±0.1Un%； 电流误差为：±0.5%')
const total = ref(0)
const dialogVisible = ref(false)
const active = ref(0)
let timer1: NodeJS.Timeout | null = null; // 声明并初始化 timer1
let timer2: NodeJS.Timeout | null = null; // 同样声明并初始化 timer2
const name = ref<string[]>([])//系数校准所选设备名字数组
const channel = ref<number[]>([])//系数校准所选设备通道数组
const devIdArray = ref<string[]>([])//系数校准所选设备ID数组
const select_Plan = ref<Plan.ReqPlan>()
const planId = ref('')
const isButtonDisabled = ref(false);
const CurV = ref<number>()//额定电压
// 在 setup 函数中
const errorStates = ref(new Array(name.value.length).fill(false));
//const loadingStates = ref(new Array(name.value.length).fill(false)); // 初始化 loading 状态
const big_V_loadingStates = ref(false); // 初始化 大电压大电流下装loading 状态
const small_V_loadingStates = ref(false); // 初始化 小电压小电流下装loading 状态
const big_V_loadingStates2 = ref(false); // 初始化 大电压大电流校准loading 状态
const small_V_loadingStates2 = ref(false); // 初始化 小电压小电流校准loading 状态
const editableTabsValue = ref('0')
const big_V_Download = ref('')
const big_I_Download = ref('')
const small_V_Download = ref('')
const small_I_Download = ref('')
const big_V_Adjust = ref('')
const big_I_Adjust = ref('')
const small_V_Adjust = ref('')
const small_I_Adjust = ref('')
const userStore = useUserStore()
// ==================== 界面控制变量 ====================
const activeIndex = ref(0) // 当前活跃的表格数据索引
const activeTotalNum = ref(4) // 总步骤数
const qualified = ref(0) // 已合格的设备数量
const outputDsc = ref('电压误差为：±0.1Un%； 电流误差为：±0.5%') // 输出描述信息
const total = ref(0) // 设备总数
const dialogVisible = ref(false) // 弹窗显示状态
const active = ref(0) // 当前激活的校准步骤（0-5）
const editableTabsValue = ref('0') // 当前选中的标签页
// ==================== 定时器管理 ====================
let timer1: NodeJS.Timeout | null = null // 定时器1
let timer2: NodeJS.Timeout | null = null // 定时器2
// ==================== 设备信息管理 ====================
const name = ref<string[]>([]) // 系数校准所选设备名称数组
const channel = ref<number[]>([]) // 系数校准所选设备通道数量数组
const devIdArray = ref<string[]>([]) // 系数校准所选设备ID数组
const select_Plan = ref<Plan.ReqPlan>() // 选中的检测计划
const planId = ref('') // 计划ID
const CurV = ref<number>() // 额定电压值
// ==================== 状态控制变量 ====================
const isButtonDisabled = ref(false) // 按钮禁用状态
const errorStates = ref(new Array(name.value.length).fill(false)) // 各设备错误状态数组
// ==================== 加载状态管理 ====================
const big_V_loadingStates = ref(false) // 大电压大电流下装加载状态
const small_V_loadingStates = ref(false) // 小电压小电流下装加载状态
const big_V_loadingStates2 = ref(false) // 大电压大电流校准加载状态
const small_V_loadingStates2 = ref(false) // 小电压小电流校准加载状态
// ==================== 源输出参数显示 ====================
const big_V_Download = ref('') // 大电压下装时的电压输出显示
const big_I_Download = ref('') // 大电压下装时的电流输出显示
const small_V_Download = ref('') // 小电压下装时的电压输出显示
const small_I_Download = ref('') // 小电压下装时的电流输出显示
const big_V_Adjust = ref('') // 大电压校准时的电压输出显示
const big_I_Adjust = ref('') // 大电压校准时的电流输出显示
const small_V_Adjust = ref('') // 小电压校准时的电压输出显示
const small_I_Adjust = ref('') // 小电压校准时的电流输出显示
// ==================== 组件Props定义 ====================
const props = defineProps({
testStatus: {
type: String,
default: 'wait'
default: 'wait' // 从父组件接收的测试状态
},
webMsgSend: {
type: Object,
default: () => ({})
default: () => ({}) // 从父组件接收的WebSocket消息
},
})
const userStore = useUserStore()
// ==================== 响应式Props引用 ====================
const testStatus = toRef(props, 'testStatus');
const tableDataMap = new Map<number, Ref<ChannelsTest.CoefficientVO[]>>([]);
const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');
const webMsgSend = toRef(props, 'webMsgSend');
// ==================== 数据管理 ====================
const tableDataMap = new Map<number, Ref<ChannelsTest.CoefficientVO[]>>([]); // 存储每个设备的表格数据映射
const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish'); // 当前步骤状态
// ==================== 组件生命周期 ====================
onBeforeMount(() => {
// 初始化
initData()
initData() // 组件挂载前初始化数据
})
/**
* 初始化组件数据
* 从store中获取设备信息，初始化表格数据和状态变量
*/
const initData = () => {
// 获取设备基础信息
CurV.value = checkStore.devices[0]?.devVolt || 57.74; // 获取额定电压，默认57.74V
isButtonDisabled.value = false; // 恢复按钮可用状态
select_Plan.value = checkStore.plan // 获取检测计划
planId.value = checkStore.devices[0]?.planId || ''; // 获取计划ID
CurV.value = checkStore.devices[0]?.devVolt || 57.74;
isButtonDisabled.value = false; // 恢复按钮
select_Plan.value = checkStore.plan
planId.value = checkStore.devices[0]?.planId || '';
devIdArray.value = checkStore.devices.map(item => item.deviceId);
name.value = checkStore.devices.map(item => item.deviceName)
channel.value = checkStore.devices.map(item => item.chnNum)
dialogVisible.value = true;
total.value = name.value.length
// 提取设备信息数组
devIdArray.value = checkStore.devices.map(item => item.deviceId); // 设备ID数组
name.value = checkStore.devices.map(item => item.deviceName); // 设备名称数组
channel.value = checkStore.devices.map(item => item.chnNum); // 设备通道数量数组
// 设置界面状态
dialogVisible.value = true; // 显示弹窗
total.value = name.value.length; // 设置设备总数
// 初始化 loadingStates 为 false
// loadingStates.value = new Array(selection.length).fill(false);
// 初始化错误状态数组，所有设备初始状态为无错误
errorStates.value = new Array(checkStore.devices.length).fill(false);
// 为每个设备初始化表格数据
for (let i = 0; i < channel.value.length; i++) {
const currentTableData = initializeTableData(dataTemplates, i);
tableDataMap.set(i, currentTableData)
tableDataMap.set(i, currentTableData); // 将表格数据存储到Map中，以设备索引为key
}
//console.log('tableDataMap',tableDataMap);
}
// ==================== 状态监听器 ====================
/**
* 监听父组件传入的测试状态变化
* 当父组件通知开始测试时，启动系数校准流程
*/
watch(testStatus, function (newValue, oldValue) {
if (newValue === 'start') {
// 开始系数校准操作
// 父组件通知开始系数校准操作
handleSubmit()
}
})
/**
* 监听WebSocket消息，处理系数校准过程中的各种响应
* 主要处理：
* 1. 错误代码的统一处理
* 2. 系数校准流程的各个步骤响应
* 3. 表格数据的实时更新
*/
watch(webMsgSend, function (newValue, oldValue) {
console.log('webMsgSend---code', newValue.code)
console.log('webMsgSend---requestId', newValue.requestId)
// 只有在非等待状态下才处理WebSocket消息
if (testStatus.value !== 'waiting') {
// ==================== 通用错误代码处理 ====================
if (newValue.code == 10520) {
// 报文解析异常
ElMessageBox.alert('报文解析异常！', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
} else if (newValue.code == 10521) {
// 程控源参数有误
ElMessageBox.alert('程控源參数有误！', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
} else if (newValue.code == 10522) {
// 测试项解析有误
ElMessageBox.alert('测试项解析有误！', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
} else if (newValue.code == 10523) {
// 源连接失败
ElMessageBox.alert('源连接失败！', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
} else if (newValue.code == 10524) {
// 获取源控制权失败
ElMessageBox.alert('获取源控制权失败！', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
} else if (newValue.code == 10525) {
// 重置源失败
ElMessageBox.alert('重置源失败！', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
} else if (newValue.code == 10527) {
// 源未进行初始化
ElMessageBox.alert('源未进行初始化！', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
} else if (newValue.code == 10528) {
// 目标源有误（用户已控制其他源）
ElMessageBox.alert('目标源有误(该用户已控制其他源，在关闭前无法操作新的源)！', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
} else if (newValue.code == 10529) {
// 源状态有误，无法响应报文
ElMessageBox.alert('源状态有误，无法响应报文(例如源处于输出状态，无法响应初始化报文)！', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
} else if (newValue.code == 10550) {
// 设备连接异常
ElMessageBox.alert(`${newValue.data}设备连接异常！`, '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
} else if (newValue.code == 10551) {
// 设备触发报告异常
ElMessageBox.alert(`${newValue.data}设备触发报告异常！`, '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
} else if (newValue.code == 10552) { //todo 10552之后还会发送消息吗？
} else if (newValue.code == 10552) {
// 存在已经初始化步骤，执行自动关闭
ElMessageBox.alert('存在已经初始化步骤,执行自动关闭,请重新发起检测', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
} else {
// ==================== 特定业务消息处理 ====================
console.log('显示东西code', newValue.code)
console.log('显示东西requestId', newValue.requestId)
switch (newValue.requestId) {
// 处理源通讯校验相关消息
case 'yjc_ytxjy':
switch (newValue.operateCode) {
case'INIT_GATHER':
if (newValue.code == -1) {
// 源未知异常
ElMessageBox.alert('源未知异常', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
} else if (newValue.code == 10523) {
// 源连接失败
ElMessageBox.alert('源连接失败', '源连接失败', {
confirmButtonText: '确定',
type: 'error',
@@ -285,16 +353,19 @@ watch(webMsgSend, function (newValue, oldValue) {
}
}
break;
// 处理相序校验相关消息
case 'YJC_xujy':
switch (newValue.operateCode) {
case 'OPER_GATHER':
if (newValue.code == 10552) {
// 存在已经初始化步骤，执行自动关闭
ElMessageBox.alert('存在已经初始化步骤,执行自动关闭,请重新发起检测', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
} else if (newValue.code == 10520) {
// 解析报文异常
ElMessageBox.alert('解析报文异常,执行自动关闭,请重新发起检测', '解析报文异常', {
confirmButtonText: '确定',
type: 'error',
@@ -304,6 +375,7 @@ watch(webMsgSend, function (newValue, oldValue) {
break;
case 'DATA_REQUEST$02':
if (newValue.code == 25003) {
// 相序校验未通过
ElMessageBox.alert('相序校验未通过,执行自动关闭,请重新发起检测', '相序校验未通过', {
confirmButtonText: '确定',
type: 'error',
@@ -313,42 +385,48 @@ watch(webMsgSend, function (newValue, oldValue) {
break;
}
break;
// 处理设备通讯校验相关消息
case 'yjc_sbtxjy':
switch (newValue.operateCode) {
case 'INIT_GATHER$01':
if (newValue.code == 10550) {
// 设备连接异常
ElMessageBox.alert('设备连接异常', '设备连接异常', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
} else if (newValue.code == 10551) {
// 设备触发报告异常
ElMessageBox.alert('设备触发报告异常', '设备触发报告异常', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
} else if (newValue.code == 10552) {
// 存在已经初始化步骤，执行自动关闭
ElMessageBox.alert('存在已经初始化步骤,执行自动关闭,请重新发起检测', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
} else if (newValue.code == 10520) {
// 解析报文异常
ElMessageBox.alert('解析报文异常,执行自动关闭,请重新发起检测', '解析报文异常', {
confirmButtonText: '确定',
type: 'error',
})
TableInit();
}
break;
}
break;
// 处理协议校验相关消息
case 'yjc_xyjy':
switch (newValue.operateCode) {
case 'VERIFY_MAPPING$01':
if (newValue.code == 10200) {
// 脚本与ICD校验失败
let data = JSON.parse(newValue.data)
ElMessageBox.alert(`脚本与icd校验失败！icd名称：${data['icdType']} -> 校验项：${data['dataType']}`, '初始化失败', {
confirmButtonText: '确定',
@@ -357,6 +435,7 @@ watch(webMsgSend, function (newValue, oldValue) {
TableInit();
}
if (newValue.code == 10500) {
// 装置中未找到该ICD
ElMessageBox.alert(`装置中未找到该icd!`, '初始化失败', {
confirmButtonText: '确定',
type: 'error',
@@ -366,136 +445,162 @@ watch(webMsgSend, function (newValue, oldValue) {
break;
}
break;
// ★★★ 处理系数校准核心业务消息 ★★★
case 'Coefficient_Check':
console.log("Coefficient_Checkactive", active.value);
// ==================== 第1阶段：大电压/电流系数下装 ====================
switch (newValue.operateCode) {
case 'big_start'://大电压,电流下装
case 'big_start':
// 大电压/电流系数下装开始，显示源输出参数
big_V_Download.value = 'Ua=Ub=Uc=' + newValue.data.devVolt + 'V';
big_I_Download.value = 'Ia=Ib=Ic=' + newValue.data.devCurr + 'A';
break;
case 'big_end'://大电压,电流下装
active.value++;
tableLoading('small', '系数下装')
case 'big_end':
// 大电压/电流系数下装完成，进入下一阶段
active.value++; // 步骤进度+1
tableLoading('small', '系数下装') // 开始小电压/电流下装的加载动画
break;
}
// ==================== 第2阶段：小电压/电流系数下装 ====================
switch (newValue.operateCode) {
case 'small_start'://小电压,电流下装
case 'small_start':
// 小电压/电流系数下装开始，显示源输出参数
small_V_Download.value = 'Ua=Ub=Uc=' + newValue.data.devVolt + 'V';
small_I_Download.value = 'Ia=Ib=Ic=' + newValue.data.devCurr + 'A';
break;
case 'small_end'://小电压,电流下装
active.value++;
tableLoading('big', '系数校准')
case 'small_end':
// 小电压/电流系数下装完成，进入校准阶段
active.value++; // 步骤进度+1
tableLoading('big', '系数校准') // 开始大电压/电流校准的加载动画
break;
}
// ==================== 第3阶段：大电压/电流系数校准 ====================
switch (newValue.operateCode) {
case 'big_comp_start'://大电压,电流校准
case 'big_comp_start':
// 大电压/电流系数校准开始，显示源输出参数
big_V_Adjust.value = 'Ua=Ub=Uc=' + newValue.data.devVolt + 'V';
big_I_Adjust.value = 'Ia=Ib=Ic=' + newValue.data.devCurr + 'A';
break;
case 'big_comp_end'://大电压,电流校准
active.value++;
tableLoading('small', '系数校准')
case 'big_comp_end':
// 大电压/电流系数校准完成，进入最后阶段
active.value++; // 步骤进度+1
tableLoading('small', '系数校准') // 开始小电压/电流校准的加载动画
break;
}
// ==================== 第4阶段：小电压/电流系数校准（最终阶段）====================
switch (newValue.operateCode) {
case 'small_comp_start'://小电压,电流校准
case 'small_comp_start':
// 小电压/电流系数校准开始，显示源输出参数
small_V_Adjust.value = 'Ua=Ub=Uc=' + newValue.data.devVolt + 'V';
small_I_Adjust.value = 'Ia=Ib=Ic=' + newValue.data.devCurr + 'A';
break;
case 'small_comp_end'://小电压,电流校准
active.value++;
active.value++;
case 'small_comp_end':
// ★★★ 小电压/电流系数校准完成 - 整个系数校准流程结束 ★★★
active.value++; // 步骤进度+1
active.value++; // 再+1，跳转到完成状态
// 统计所有设备的校准结果
for (let i = 0; i < name.value.length; i++) {
const currentDataRef = tableDataMap.get(i);
if (currentDataRef) {
const currentData = currentDataRef.value;
// 检查当前数据中有无不合格字段
// 检查当前设备的校准数据是否合格
const hasError = checkForErrors(currentData);
if (hasError) {
} else {
qualified.value++;
if (!hasError) {
qualified.value++; // 合格设备计数+1
}
updateErrorState(i, hasError);
updateErrorState(i, hasError); // 更新设备错误状态显示
}
}
//editableTabsValue.value = (tabNumber.value).toString();//显示下一个tab
isButtonDisabled.value = false; // 恢复按钮
isButtonDisabled.value = false; // 恢复按钮可用状态
// ★★★ 通知父组件系数校准成功完成，触发自动步骤切换 ★★★
emit('update:testStatus', 'success')
break;
}
// ==================== 表格数据实时更新 ====================
switch (newValue.operateCode) {
case 'DATA_CHNFACTOR$02'://表格
// 输出 key 为 0 的数组中的第一条 ChannelsTest.CoefficientVO 对象
case 'DATA_CHNFACTOR$02':
// 接收并更新表格中的系数校准数据
console.log('表格', name.value)
// 遍历所有设备，找到匹配的表格项并更新数据
for (let i = 0; i < name.value.length; i++) {
const targetArrayRef = tableDataMap.get(i);
if (targetArrayRef) {
const targetArray = targetArrayRef.value;
if (targetArray.length > 0) {
const firstCoefficientVO = targetArray.find(item => item.monitorNum === newValue.data.monitorNum &&
// 根据监测点号、类型、描述和设备名称找到对应的表格行
const firstCoefficientVO = targetArray.find(item =>
item.monitorNum === newValue.data.monitorNum &&
item.type === newValue.data.type &&
item.desc === newValue.data.desc &&
item.devName === newValue.data.devName);
if (firstCoefficientVO) { // 检查 firstCoefficientVO 是否存在
firstCoefficientVO.aVuData = parseFloat(newValue.data.aVuData).toFixed(4);
if (firstCoefficientVO) {
// 更新A相电压数据和误差
firstCoefficientVO.aVuData = parseFloat(newValue.data.aVuData).toFixed(4);
if (!isNaN(parseFloat(newValue.data.aVuXi)) && isFinite(newValue.data.aVuXi)) {
firstCoefficientVO.aVuXi = (parseFloat(newValue.data.aVuXi) / 10000).toFixed(4);
} else {
firstCoefficientVO.aVuXi = newValue.data.aVuXi;
firstCoefficientVO.aVuXi = newValue.data.aVuXi; // 可能是"不合格"等文本
}
// 更新B相电压数据和误差
firstCoefficientVO.bVuData = parseFloat(newValue.data.bVuData).toFixed(4);
if (!isNaN(parseFloat(newValue.data.bVuXi)) && isFinite(newValue.data.bVuXi)) {
firstCoefficientVO.bVuXi = (parseFloat(newValue.data.bVuXi) / 10000).toFixed(4);
} else {
firstCoefficientVO.bVuXi = newValue.data.bVuXi;
firstCoefficientVO.bVuXi = newValue.data.bVuXi; // 可能是"不合格"等文本
}
// 更新C相电压数据和误差
firstCoefficientVO.cVuData = parseFloat(newValue.data.cVuData).toFixed(4);
if (!isNaN(parseFloat(newValue.data.cVuXi)) && isFinite(newValue.data.cVuXi)) {
firstCoefficientVO.cVuXi = (parseFloat(newValue.data.cVuXi) / 10000).toFixed(4);
} else {
firstCoefficientVO.cVuXi = newValue.data.cVuXi;
firstCoefficientVO.cVuXi = newValue.data.cVuXi; // 可能是"不合格"等文本
}
// 更新A相电流数据和误差
firstCoefficientVO.aIeData = parseFloat(newValue.data.aIeData).toFixed(4);
if (!isNaN(parseFloat(newValue.data.aIeXi)) && isFinite(newValue.data.aIeXi)) {
firstCoefficientVO.aIeXi = (parseFloat(newValue.data.aIeXi) / 10000).toFixed(4);
} else {
firstCoefficientVO.aIeXi = newValue.data.aIeXi;
firstCoefficientVO.aIeXi = newValue.data.aIeXi; // 可能是"不合格"等文本
}
// 更新B相电流数据和误差
firstCoefficientVO.bIeData = parseFloat(newValue.data.bIeData).toFixed(4);
if (!isNaN(parseFloat(newValue.data.bIeXi)) && isFinite(newValue.data.bIeXi)) {
firstCoefficientVO.bIeXi = (parseFloat(newValue.data.bIeXi) / 10000).toFixed(4);
} else {
firstCoefficientVO.bIeXi = newValue.data.bIeXi;
firstCoefficientVO.bIeXi = newValue.data.bIeXi; // 可能是"不合格"等文本
}
// 更新C相电流数据和误差
firstCoefficientVO.cIeData = parseFloat(newValue.data.cIeData).toFixed(4);
if (!isNaN(parseFloat(newValue.data.cIeXi)) && isFinite(newValue.data.cIeXi)) {
firstCoefficientVO.cIeXi = (parseFloat(newValue.data.cIeXi) / 10000).toFixed(4);
} else {
firstCoefficientVO.cIeXi = newValue.data.cIeXi;
firstCoefficientVO.cIeXi = newValue.data.cIeXi; // 可能是"不合格"等文本
}
// 更新三相电压和电流的原始值
firstCoefficientVO.aV = newValue.data.aV;
firstCoefficientVO.bV = newValue.data.bV;
firstCoefficientVO.cV = newValue.data.cV;
firstCoefficientVO.aI = newValue.data.aI;
firstCoefficientVO.bI = newValue.data.bI;
firstCoefficientVO.cI = newValue.data.cI;
console.log(newValue.data.devName + '对象:', firstCoefficientVO);
activeIndex.value++;
activeIndex.value++; // 更新活跃索引
} else {
console.log('未找到匹配的' + newValue.data.devName + '对象');
}
@@ -509,9 +614,11 @@ watch(webMsgSend, function (newValue, oldValue) {
break;
}
break;
// 处理Socket连接超时
case 'socket_timeout':
switch (newValue.operateCode) {
case 'VOLTAGE':
// 电压连接超时
ElMessageBox.alert('连接超时！', '连接超时', {
confirmButtonText: '确定',
type: 'error',
@@ -520,9 +627,11 @@ watch(webMsgSend, function (newValue, oldValue) {
break;
}
break;
// 处理连接失败
case 'connect':
switch (newValue.operateCode) {
case "Source":
// 源服务端连接失败
ElMessageBox.alert('源服务端连接失败', '源服务端连接失败', {
confirmButtonText: '确定',
type: 'error',
@@ -530,6 +639,7 @@ watch(webMsgSend, function (newValue, oldValue) {
TableInit();
break;
case "Dev":
// 设备服务端连接失败
ElMessageBox.alert('设备服务端连接失败', '设备服务端连接失败', {
confirmButtonText: '确定',
type: 'error',
@@ -537,57 +647,97 @@ watch(webMsgSend, function (newValue, oldValue) {
TableInit();
break;
}
break;
}
}
}
})
//出错系数检测初始化
// ==================== 错误处理函数 ====================
/**
* 系数校准出错时的初始化处理
* 通知父组件检测失败，重置相关状态
*/
const TableInit = () => {
console.log("出错系数检测",active.value);
emit('update:testStatus', 'test_init_fail')
// isButtonDisabled.value = false; // 恢复按钮
// for (let i = 0; i < channel.value.length; i++) {
// const currentTableData = initializeTableData(dataTemplates, i);
// tableDataMap.set(i, currentTableData)
// }
// activeIndex.value = 0
// qualified.value = 0
// active.value = 0
// 通知父组件系数校准失败
emit('update:testStatus', 'error')
}
//按行图标转动
// ==================== 界面动画控制 ====================
/**
* 控制表格中特定类型和描述的行显示加载动画
* @param type 类型：'big' | 'small'
* @param desc 描述：'系数下装' | '系数校准'
*/
const tableLoading = (type: string, desc: string) => {
console.log('转动',channel.value)
for (let i = 0; i < channel.value.length; i++) {
// 遍历所有设备
for (let i = 0; i < channel.value.length; i++) {
const targetArrayRef = tableDataMap.get(i);
if (targetArrayRef) {
const targetArray = targetArrayRef.value;
if (targetArray.length > 0) {
// 遍历当前设备的所有通道
for (let j = 0; j < channel.value[i]; j++) {
const firstCoefficientVO = targetArray.find(item => item.monitorNum === (j + 1).toString() &&
// 找到对应类型和描述的表格行
const firstCoefficientVO = targetArray.find(item =>
item.monitorNum === (j + 1).toString() &&
item.type === type &&
item.desc === desc);
if (firstCoefficientVO) {
firstCoefficientVO.loading = true;
firstCoefficientVO.loading = true; // 开启加载动画
}
}
}
}else{
} else {
console.log('不转了')
}
}
}
// ==================== 表格数据模板 ====================
/**
* 系数校准表格的数据模板
* 每个设备的每个通道都会根据这4个模板生成对应的表格行
*
* 模板说明：
* 1. 监测点1 - 大幅值系数下装
* 2. 监测点2 - 小幅值系数下装
* 3. 监测点3 - 大幅值系数校准
* 4. 监测点4 - 小幅值系数校准
*/
const dataTemplates: ChannelsTest.CoefficientVO[] = [
{
monitorNum: '1',
desc: '系数下装',
type: 'big',
monitorNum: '1', // 监测点编号
desc: '系数下装', // 操作描述
type: 'big', // 幅值类型：大幅值
aVuData: '—', // A相电压测量值
aVuXi: '—', // A相电压误差
bVuData: '—', // B相电压测量值
bVuXi: '—', // B相电压误差
cVuData: '—', // C相电压测量值
cVuXi: '—', // C相电压误差
aIeData: '—', // A相电流测量值
aIeXi: '—', // A相电流误差
bIeData: '—', // B相电流测量值
bIeXi: '—', // B相电流误差
cIeData: '—', // C相电流测量值
cIeXi: '—', // C相电流误差
loading: false, // 加载状态
devName: '', // 设备名称（动态填充）
aV: '—', // A相电压原始值
bV: '—', // B相电压原始值
cV: '—', // C相电压原始值
aI: '—', // A相电流原始值
bI: '—', // B相电流原始值
cI: '—', // C相电流原始值
},
{
monitorNum: '2', // 监测点编号
desc: '系数下装', // 操作描述
type: 'small', // 幅值类型：小幅值
aVuData: '—',
aVuXi: '—',
bVuData: '—',
@@ -610,9 +760,9 @@ const dataTemplates: ChannelsTest.CoefficientVO[] = [
cI: '—',
},
{
monitorNum: '2',
desc: '系数下装',
type: 'small',
monitorNum: '3', // 监测点编号
desc: '系数校准', // 操作描述
type: 'big', // 幅值类型：大幅值
aVuData: '—',
aVuXi: '—',
bVuData: '—',
@@ -635,9 +785,9 @@ const dataTemplates: ChannelsTest.CoefficientVO[] = [
cI: '—',
},
{
monitorNum: '3',
desc: '系数校准',
type: 'big',
monitorNum: '4', // 监测点编号
desc: '系数校准', // 操作描述
type: 'small', // 幅值类型：小幅值
aVuData: '—',
aVuXi: '—',
bVuData: '—',
@@ -659,64 +809,51 @@ const dataTemplates: ChannelsTest.CoefficientVO[] = [
bI: '—',
cI: '—',
},
{
monitorNum: '4',
desc: '系数校准',
type: 'small',
aVuData: '—',
aVuXi: '—',
bVuData: '—',
bVuXi: '—',
cVuData: '—',
cVuXi: '—',
aIeData: '—',
aIeXi: '—',
bIeData: '—',
bIeXi: '—',
cIeData: '—',
cIeXi: '—',
loading: false,
devName: '',
aV: '—',
bV: '—',
cV: '—',
aI: '—',
bI: '—',
cI: '—',
},
];
// 更新错误状态的方法
// ==================== 工具函数 ====================
/**
* 更新设备错误状态显示
* @param index 设备索引
* @param hasError 是否有错误
*/
const updateErrorState = (index: number, hasError: boolean) => {
errorStates.value[index] = hasError;
};
// const emit = defineEmits<{
// (e: 'submitClicked', callback: (resolve: (value: boolean) => void) => void): void;
// }>();
const emit = defineEmits(['update:testStatus']);
/**
* 获取指定设备的表格数据
* @param index 设备索引
* @returns 返回对应设备的表格数据数组
*/
const getTableDataForChannel = (index: number): any[] => {
const data = tableDataMap.get(index);
return data ? data.value : [];
}
// ==================== 父子组件通信 ====================
const emit = defineEmits(['update:testStatus']);
// ==================== 界面状态监听 ====================
/**
* 监听活跃索引变化，更新界面描述信息
*/
watch(activeIndex, function (newValue, oldValue) {
if (activeIndex.value === 1) {
outputDsc.value = "电压误差为：±0.1Un%； 电流误差为：±0.5%";
// 当前源输出为：Ua=Ub=Uc=57.74V Ia=Ib=Ic=1A"
}
})
// 示例的 checkForErrors 函数，根据实际需求进行调整
// ==================== 业务逻辑函数 ====================
/**
* 检查设备校准数据是否存在错误
* @param data 设备的校准数据数组
* @returns 返回是否存在不合格项
*/
const checkForErrors = (data: ChannelsTest.CoefficientVO[]): boolean => {
// 这里假设不合格字段的标准是 status 为 '不合格' 或 isValid 为 false
// 检查各相电压和电流的误差值是否为"不合格"
return data.some(item =>
item.aVuXi === '不合格' ||
item.bVuXi === '不合格' ||
@@ -727,43 +864,35 @@ const checkForErrors = (data: ChannelsTest.CoefficientVO[]): boolean => {
);
};
/**
* 处理系数校准开始事件
* 由父组件通过状态监听触发
*/
const handleSubmit = async () => {
// 创建一个 Promise 来等待父组件的回调
// const response = await new Promise<boolean>((resolve) => {
// emit('submitClicked', resolve);
// });
// if (!response) {
// return;
// }()
isButtonDisabled.value = true; // 禁用按钮
tableLoading('big', '系数下装')
/* await getCoefficientCheck({
userPageId: "cdf",
devIds: devIdArray.value,
planId: planId.value,
errorSysId: select_Plan.value?.errorSysId,
scriptId: select_Plan.value?.scriptId,
reCheckType: '0', // '0'为预检测、‘1‘为正式检测
userId:userStore.userInfo.id
})*/
active.value++;
isButtonDisabled.value = true; // 禁用按钮，防止重复提交
tableLoading('big', '系数下装') // 开启大幅值系数下装的加载动画
active.value++; // 步骤进度+1，进入第一个校准阶段
console.log('开始检测active.value', active.value)
};
// 提取初始化并填充 currentTableData 的函数
/**
* 为指定设备初始化表格数据
* @param templates 数据模板数组
* @param index 设备索引
* @returns 返回初始化后的表格数据引用
*/
const initializeTableData = (templates: ChannelsTest.CoefficientVO[], index: number): Ref<ChannelsTest.CoefficientVO[]> => {
const currentTableData = ref<ChannelsTest.CoefficientVO[]>([]);
// 为当前设备的每个通道生成表格数据
for (let j = 0; j < channel.value[index]; j++) {
templates.forEach((template) => {
// 使用解构赋值排除 id 和 MonitorIdx 属性
// 使用解构赋值复制模板，排除不需要的属性
const {devName, monitorNum: __, ...rest} = template;
currentTableData.value.push({
monitorNum: (j + 1).toString(),
devName: name.value[index],
...rest,
monitorNum: (j + 1).toString(), // 监测点号从1开始
devName: name.value[index], // 设置设备名称
...rest, // 其他模板属性
});
});
}

430
frontend/src/views/home/components/preTest.vue
View File

@@ -11,8 +11,7 @@
<div class="test-dialog">
<div class="dialog-left">
<el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus"
finish-status="success">
<el-steps direction="vertical" :active="activeIndex" finish-status="success">
<el-step :status="step1" title="源通讯校验"/>
<el-step :status="step2" title="设备通讯校验"/>
<el-step :status="step3" title="协议校验"/>
@@ -67,9 +66,19 @@
</template>
<script lang="tsx" setup name="preTest">
/**
* 预检测组件
* 负责电力设备检测中的预检测阶段，包含4个步骤：
* 1. 源通讯校验 - 验证源端通讯是否正常
* 2. 设备通讯校验 - 检查设备IP、端口、识别码、密钥
* 3. 协议校验 - 进行ICD报告触发测试
* 4. 相序校验 - 判断装置接线是否正确
*/
import {ElMessage, ElMessageBox} from "element-plus";
import {defineExpose, ref, toRef, watch} from 'vue';
// ==================== 日志数据存储 ====================
// 各步骤的日志数据，用于在右侧折叠面板中显示实时日志
const step1InitLog = ref([
{
type: 'info',
@@ -77,13 +86,6 @@ const step1InitLog = ref([
},
])
const step1Log = ref([
{
type: 'info',
log: '源通讯校验成功',
},
])
const step2InitLog = ref([
{
type: 'info',
@@ -91,25 +93,6 @@ const step2InitLog = ref([
},
])
const step2Log = ref([
{
type: 'info',
log: '被检设备：240001通讯校验成功',
},
{
type: 'info',
log: '被检设备：240002通讯校验成功',
},
{
type: 'info',
log: '被检设备：240003通讯校验成功',
},
{
type: 'info',
log: '被检设备：240004通讯校验成功',
},
])
const step3InitLog = ref([
{
type: 'info',
@@ -117,26 +100,6 @@ const step3InitLog = ref([
},
])
const step3Log = ref([
{
type: 'info',
log: '被检设备：240001协议校验成功',
},
{
type: 'info',
log: '被检设备：240002协议校验成功',
},
{
type: 'info',
log: '被检设备：240003协议校验成功',
},
{
type: 'info',
log: '被检设备：240004协议校验成功',
},
])
const step4InitLog = ref([
{
type: 'info',
@@ -144,35 +107,21 @@ const step4InitLog = ref([
},
])
const step4Log = ref([
{
type: 'info',
log: '被检设备：240001相序校验成功',
},
{
type: 'info',
log: '被检设备：240002相序校验成功',
},
{
type: 'info',
log: '被检设备：240003相序校验成功',
},
{
type: 'info',
log: '被检设备：240004相序校验成功',
},
])
// ==================== 界面状态控制 ====================
const collapseActiveName = ref('1') // 当前展开的折叠面板
const activeIndex = ref(0) // 当前激活的步骤索引（用于步骤条高亮）
const activeTotalNum = ref(5) // 总步骤数
const collapseActiveName = ref('1')
const activeIndex = ref(0)
const activeTotalNum = ref(5)
const step1 = ref('wait')
const step2 = ref('wait')
const step3 = ref('wait')
const step4 = ref('wait')
const step5 = ref('wait')
// ==================== 步骤状态管理 ====================
// 各步骤的执行状态：wait/process/success/error
const step1 = ref('wait') // 源通讯校验状态
const step2 = ref('wait') // 设备通讯校验状态
const step3 = ref('wait') // 协议校验状态
const step4 = ref('wait') // 相序校验状态
const step5 = ref('wait') // 整体检测结果状态
//定义与预检测配置数组
// ==================== 预检测项目配置 ====================
// 定义预检测包含的检测项目（顶部tabs显示用，只读）
const detectionOptions = ref([
{
id: 0,
@@ -193,45 +142,67 @@ const detectionOptions = ref([
id: 3,
name: "相序校验",//判断装置的接线是否正确
selected: true,
},
// {
// id: 4,
// name: "守时校验",//判断装置24小时内的守时误差是否小于1s
// selected: true,
// },
// {
// id: 5,
// name: "通道系数校准",//通过私有协议与装置进行通讯，校准三相电压电流的通道系数
// selected: true,
// },
// {
// id: 6,
// name: "实时数据比对",
// },
// {
// id: 7,
// name: "录波数据比对",
// },
}
]);
const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');
// ==================== 组件Props定义 ====================
const props = defineProps({
testStatus: {
type: String,
default: 'wait'
default: 'wait' // 从父组件接收的测试状态
},
webMsgSend: {
type: Object,
default: () => ({})
default: () => ({}) // 从父组件接收的WebSocket消息
}
})
// ==================== 响应式Props引用 ====================
const testStatus = toRef(props, 'testStatus');
const webMsgSend = toRef(props, 'webMsgSend');
const ts = ref('');
const ts = ref(''); // 内部测试状态，用于向父组件同步
// ==================== 错误处理函数 ====================
/**
* 处理致命错误 - 会终止整个检测流程
* @param stepRef 当前步骤状态引用
* @param logRef 当前步骤日志引用
* @param message 错误消息
*/
function handleFatalError(stepRef: any, logRef: any, message: string) {
stepRef.value = 'error';
ts.value = 'error';
step5.value = 'error';
logRef.value = [{
type: 'error',
log: message
}];
}
/**
* 处理警告错误 - 只标记当前步骤失败，检测可继续
* @param stepRef 当前步骤状态引用
* @param logRef 当前步骤日志引用
* @param message 错误消息
*/
function handleWarningError(stepRef: any, logRef: any, message: string) {
stepRef.value = 'error';
logRef.value.push({
type: 'error',
log: message
});
}
// ==================== WebSocket消息处理 ====================
/**
* 监听WebSocket消息，根据不同的requestId和operateCode处理各种检测状态
* 主要消息类型：
* - yjc_ytxjy: 源通讯校验
* - yjc_sbtxjy: 设备通讯校验
* - yjc_xyjy: 协议校验
* - YJC_xujy: 相序校验
*/
watch(webMsgSend, function (newValue, oldValue) {
if (testStatus.value !== 'waiting') {
switch (newValue.requestId) {
@@ -254,33 +225,16 @@ watch(webMsgSend, function (newValue, oldValue) {
}];
} else if (newValue.code == 10552) {
ElMessage.error(newValue.code)
step1.value = 'error'
ts.value = 'error'
step5.value = 'error'
handleFatalError(step1, step1InitLog, '重复的初始化操作!')
} else if (newValue.code == 10523) {
step1.value = 'error'
ts.value = 'error'
step5.value = 'error'
step1InitLog.value = [{
type: 'error',
log: '源连接失败!',
}];
handleFatalError(step1, step1InitLog, '源连接失败!')
} else if (newValue.code == -1) {
step1.value = 'error'
ts.value = 'error'
step5.value = 'error'
step1InitLog.value = [{
type: 'error',
log: '源未知异常!',
}];
handleFatalError(step1, step1InitLog, '源未知异常!')
}
break;
}
break;
case 'yjc_sbtxjy':
switch (newValue.operateCode) {
case 'INIT_GATHER$01':
if (newValue.code == 10200) {
@@ -296,30 +250,11 @@ watch(webMsgSend, function (newValue, oldValue) {
log: '正在进行设备通讯校验.....',
}];
} else if (newValue.code == 10550) {
step2InitLog.value.push({
type: 'error',
log: newValue.data + '设备连接异常!',
})
step2.value = 'error'
// ts.value = 'error'
// step5.value = 'error'
handleWarningError(step2, step2InitLog, newValue.data + '设备连接异常!')
} else if (newValue.code == 10551) {
step2InitLog.value.push({
type: 'error',
log: newValue.data + '设备触发报告异常!',
})
step2.value = 'error'
ts.value = 'error'
step5.value = 'error'
handleFatalError(step2, step2InitLog, newValue.data + '设备触发报告异常!')
} else if (newValue.code == 10552) {
//ElMessage.error("存在已经初始化步骤,已经自动关闭,请重新发起检测！")
step2InitLog.value = [{
type: 'wait',
log: '存在已经初始化步骤,执行自动关闭,请重新发起检测！',
}];
step2.value = 'error'
ts.value = 'error'
step5.value = 'error'
handleFatalError(step2, step2InitLog, '存在已经初始化步骤,执行自动关闭,请重新发起检测！')
} else if (newValue.code == 25001) {
activeIndex.value = 2
step2.value = 'success'
@@ -327,7 +262,6 @@ watch(webMsgSend, function (newValue, oldValue) {
}
break;
}
break;
case 'yjc_xyjy':
switch (newValue.operateCode) {
@@ -345,30 +279,11 @@ watch(webMsgSend, function (newValue, oldValue) {
log: '正在进行通讯协议校验.....',
}];
} else if (newValue.code == 10550) {
step3InitLog.value.push({
type: 'error',
log: newValue.data + '设备连接异常!',
})
step3.value = 'error'
// ts.value = 'error'
// step5.value = 'error'
handleWarningError(step3, step3InitLog, newValue.data + '设备连接异常!')
} else if (newValue.code == 10551) {
step3InitLog.value.push({
type: 'error',
log: newValue.data + '设备触发报告异常!',
})
step3.value = 'error'
ts.value = 'error'
step5.value = 'error'
handleFatalError(step3, step3InitLog, newValue.data + '设备触发报告异常!')
} else if (newValue.code == 10552) {
step3.value = 'error'
//ElMessage.error("存在已经初始化步骤,已经自动关闭,请重新发起检测！")
step3InitLog.value = [{
type: 'wait',
log: '存在已经初始化步骤,执行自动关闭,请重新发起检测！',
}];
ts.value = 'error'
step5.value = 'error'
handleFatalError(step3, step3InitLog, '存在已经初始化步骤,执行自动关闭,请重新发起检测！')
}
break;
case 'INIT_GATHER$02':
@@ -385,30 +300,11 @@ watch(webMsgSend, function (newValue, oldValue) {
log: '正在进行通讯协议校验.....',
}];
} else if (newValue.code == 10550) {
step3InitLog.value.push({
type: 'error',
log: newValue.data + '设备连接异常!',
})
step3.value = 'error'
// ts.value = 'error'
// step5.value = 'error'
handleWarningError(step3, step3InitLog, newValue.data + '设备连接异常!')
} else if (newValue.code == 10551) {
step3InitLog.value.push({
type: 'error',
log: newValue.data + '设备触发报告异常!',
})
step3.value = 'error'
ts.value = 'error'
step5.value = 'error'
handleFatalError(step3, step3InitLog, newValue.data + '设备触发报告异常!')
} else if (newValue.code == 10552) {
step3.value = 'error'
//ElMessage.error("存在已经初始化步骤,已经自动关闭,请重新发起检测！")
step3InitLog.value = [{
type: 'wait',
log: '存在已经初始化步骤,执行自动关闭,请重新发起检测！',
}];
ts.value = 'error'
step5.value = 'error'
handleFatalError(step3, step3InitLog, '存在已经初始化步骤,执行自动关闭,请重新发起检测！')
}
break;
case 'INIT_GATHER$03':
@@ -421,30 +317,11 @@ watch(webMsgSend, function (newValue, oldValue) {
} else if (newValue.code == 10201) {
step3.value = 'process'
} else if (newValue.code == 10550) {
step3InitLog.value.push({
type: 'error',
log: newValue.data + '设备连接异常!',
})
step3.value = 'error'
// ts.value = 'error'
// step5.value = 'error'
handleWarningError(step3, step3InitLog, newValue.data + '设备连接异常!')
} else if (newValue.code == 10551) {
step3InitLog.value.push({
type: 'error',
log: newValue.data + '设备触发报告异常!',
})
step3.value = 'error'
ts.value = 'error'
step5.value = 'error'
handleFatalError(step3, step3InitLog, newValue.data + '设备触发报告异常!')
} else if (newValue.code == 10552) {
//ElMessage.error("当前步骤已经初始化,执行自动关闭,请重新发起检测！")
step3.value = 'error'
step3InitLog.value = [{
type: 'wait',
log: '存在已经初始化步骤,执行自动关闭,请重新发起检测！',
}];
ts.value = 'error'
step5.value = 'error'
handleFatalError(step3, step3InitLog, '存在已经初始化步骤,执行自动关闭,请重新发起检测！')
}
break;
case 'VERIFY_MAPPING$01':
@@ -454,21 +331,9 @@ watch(webMsgSend, function (newValue, oldValue) {
step4.value = 'process'
} else if (newValue.code == 10200) {
let data = JSON.parse(newValue.data)
step3InitLog.value.push({
type: 'error',
log: `脚本与icd检验失败! icd名称：${data['icdType']} -> 校验项：${data['dataType']}`,
})
step3.value = 'error'
ts.value = 'error'
step5.value = 'error'
handleFatalError(step3, step3InitLog, `脚本与icd检验失败! icd名称：${data['icdType']} -> 校验项：${data['dataType']}`)
} else if (newValue.code == 10500) {
step3InitLog.value.push({
type: 'error',
log: `装置中未找到该icd！`,
})
step3.value = 'error'
ts.value = 'error'
step5.value = 'error'
handleFatalError(step3, step3InitLog, '装置中未找到该icd！')
}
break;
}
@@ -490,33 +355,22 @@ watch(webMsgSend, function (newValue, oldValue) {
}];
} else if (newValue.code == 10552) {
ElMessage.error("存在已经初始化步骤,已经自动关闭,请重新发起检测！")
step4.value = 'error'
ts.value = 'error'
step5.value = 'error'
handleFatalError(step4, step4InitLog, '存在已经初始化步骤,执行自动关闭,请重新发起检测！')
} else if (newValue.code == 10520) {
step4.value = 'error'
step4InitLog.value.push({
type: 'error',
log: '解析报文异常',
})
ts.value = 'error'
step5.value = 'error'
handleFatalError(step4, step4InitLog, '解析报文异常')
}
break;
case 'DATA_REQUEST$02':
if (newValue.code == 10200) {
let type = 'info'
if (newValue.data.includes('不合格')) {
type = 'error'
}
newValue.data.split('<br/>')
step4InitLog.value.push({
type: type,
log: newValue.data,
})
} else if (newValue.code == 10201) {
step4.value = 'process'
step4InitLog.value = [{
@@ -524,13 +378,7 @@ watch(webMsgSend, function (newValue, oldValue) {
log: '获取数据相序校验数据!',
}];
} else if (newValue.code == 25003) {
step4.value = 'error'
step4InitLog.value.push({
type: 'error',
log: '相序校验未通过!',
})
ts.value = 'error'
step5.value = 'error'
handleFatalError(step4, step4InitLog, '相序校验未通过!')
} else if (newValue.code == 25001) {
step4.value = 'success'
step5.value = 'success'
@@ -544,71 +392,85 @@ watch(webMsgSend, function (newValue, oldValue) {
console.log("@@@@", ts.value)
break
}
break;
case 'quit':
break;
case 'connect':
switch (newValue.operateCode) {
case "Source":
step1.value = 'error'
step1InitLog.value = [{
type: 'error',
log: '源服务端连接失败!',
}];
ts.value = 'error'
step5.value = 'error'
handleFatalError(step1, step1InitLog, '源服务端连接失败!')
break;
case "Dev":
step2.value = 'error'
step2InitLog.value = [{
type: 'error',
log: '设备服务端连接失败!',
}];
ts.value = 'error'
step5.value = 'error'
handleFatalError(step2, step2InitLog, '设备服务端连接失败!')
break;
}
break;
case 'unknown_operate':
break;
case 'error_flow_end':
ElMessageBox.alert(`设备连接异常，请检查设备连接情况！`, '检测失败', {
confirmButtonText: '确定',
type: 'error',
})
ts.value = 'error'
step5.value = 'error'
// 根据当前步骤选择对应的日志记录
const currentStepLog = activeIndex.value === 0 ? step1InitLog :
activeIndex.value === 1 ? step2InitLog :
activeIndex.value === 2 ? step3InitLog : step4InitLog
const currentStep = activeIndex.value === 0 ? step1 :
activeIndex.value === 1 ? step2 :
activeIndex.value === 2 ? step3 : step4
handleFatalError(currentStep, currentStepLog, '设备连接异常，检测终止！')
break;
case 'socket_timeout':
ElMessageBox.alert(`设备连接异常，请检查设备连接情况！`, '检测失败', {
confirmButtonText: '确定',
type: 'error',
})
ts.value = 'error'
step5.value = 'error'
// 根据当前步骤选择对应的日志记录
const timeoutStepLog = activeIndex.value === 0 ? step1InitLog :
activeIndex.value === 1 ? step2InitLog :
activeIndex.value === 2 ? step3InitLog : step4InitLog
const timeoutStep = activeIndex.value === 0 ? step1 :
activeIndex.value === 1 ? step2 :
activeIndex.value === 2 ? step3 : step4
handleFatalError(timeoutStep, timeoutStepLog, 'Socket连接超时，检测终止！')
break;
case 'server_error':
ElMessageBox.alert('服务端主动关闭连接!', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
ts.value = 'error'
step5.value = 'error'
// 根据当前步骤选择对应的日志记录
const serverStepLog = activeIndex.value === 0 ? step1InitLog :
activeIndex.value === 1 ? step2InitLog :
activeIndex.value === 2 ? step3InitLog : step4InitLog
const serverStep = activeIndex.value === 0 ? step1 :
activeIndex.value === 1 ? step2 :
activeIndex.value === 2 ? step3 : step4
handleFatalError(serverStep, serverStepLog, '服务端主动关闭连接！')
break;
case 'device_error':
ElMessageBox.alert('设备主动关闭连接!', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
ts.value = 'error'
step5.value = 'error'
// 根据当前步骤选择对应的日志记录
const deviceStepLog = activeIndex.value === 0 ? step1InitLog :
activeIndex.value === 1 ? step2InitLog :
activeIndex.value === 2 ? step3InitLog : step4InitLog
const deviceStep = activeIndex.value === 0 ? step1 :
activeIndex.value === 1 ? step2 :
activeIndex.value === 2 ? step3 : step4
handleFatalError(deviceStep, deviceStepLog, '设备主动关闭连接！')
break;
}
}
})
// ==================== 界面联动控制 ====================
/**
* 监听当前激活步骤，自动展开对应的日志折叠面板
*/
watch(activeIndex, function (newValue, oldValue) {
if (newValue <= activeTotalNum.value - 2) {
collapseActiveName.value = (newValue + 1).toString()
@@ -617,7 +479,10 @@ watch(activeIndex, function (newValue, oldValue) {
}
})
//监听goods_sn的变化
/**
* 监听父组件传入的测试状态变化
* 处理测试开始和重置逻辑
*/
watch(testStatus, function (newValue, oldValue) {
ts.value = props.testStatus;
if (ts.value === 'start') {
@@ -638,15 +503,23 @@ watch(testStatus, function (newValue, oldValue) {
}
})
// ==================== 父子组件通信 ====================
const emit = defineEmits(['update:testStatus']);
//监听sn
/**
* 监听内部测试状态变化，同步给父组件
* 实现双向数据绑定
*/
watch(ts, function (newValue, oldValue) {
//修改父组件
emit('update:testStatus', ts.value)
})
// 定义一个初始化参数的方法
// ==================== 对外暴露方法 ====================
/**
* 初始化参数方法
* 由父组件调用，用于重置所有步骤状态和日志
*/
function initializeParameters() {
activeIndex.value = 0
step1.value = 'process'
@@ -683,6 +556,7 @@ function initializeParameters() {
}
// 暴露方法给父组件使用
defineExpose({
initializeParameters,
});
@@ -695,9 +569,6 @@ defineExpose({
flex-direction: row;
/* 横向排列 */
margin-top: 20px;
/* .dialog-left{
margin-right: 20px;
} */
}
.dialog-left {
@@ -705,19 +576,6 @@ defineExpose({
margin-left: 20px;
}
/* .dialog-left :deep(.test-head-steps){
height: 80px;
/* margin-bottom: 10px;
}
*/
/* .dialog-left :deep(.el-step__title) {
font-size: 18px !important; /* 设置标题字体大小
} */
/* .dialog-left :deep(.el-step__icon-inner) {
font-size: 24px !important;
} */
.dialog-right {
margin-left: 20px;

364
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"
type='primary'
v-if="TestStatus=='process'"
:icon="VideoPause"
@click="handlePause()">停止检测
: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"
type='warning'
v-if="(TestStatus =='paused')"
:icon="VideoPlay"
@click="sendResume"
: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客户端实例
});
})
// ====================== 检测项选择状态 ======================
// 根据用户勾选的检测内容动态显示对应的检测步骤和组件
@@ -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
}
});
})
}
// ====================== 开始检测处理 ======================
@@ -254,7 +270,7 @@ const handleSubmitFast = () => {
return
}
console.log("handleSubmit", stepsActive.value, TestStatus.value)
console.log('handleSubmit', stepsActive.value, TestStatus.value)
// 根据当前激活的步骤执行对应的检测逻辑
switch (stepsActive.value) {
@@ -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,33 +367,33 @@ 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') {
@@ -388,24 +404,21 @@ watch(ActiveStatue, function (newValue, oldValue) {
// 处理成功完成状态（已到达最后一个检测步骤）
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 = '暂停超时'
}
@@ -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() // 需要确认的状态
}
}
@@ -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'为不合格项复检
reCheckType: '2', // 操作类型：0-系数校验，1-预检测，2-正式检测，8-不合格项复检
userId: userStore.userInfo.id,
temperature: checkStore.temperature,
humidity: checkStore.humidity
humidity: checkStore.humidity,
})
// 发送继续成功消息给子组件
Object.assign(webMsgSend.value, {
requestId: 'Resume_Success'
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'为不合格项复检
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' // 设置为开始状态
}
/**
* 关闭WebSocket连接
*/
const closeWebSocket = () => {
// 检查连接状态，避免重复关闭WebSocket连接
if (dataSocket.socketServe.connected) {
dataSocket.socketServe.closeWs()
}
}
// ====================== 步骤切换处理 ======================
@@ -516,7 +517,7 @@ 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
}
@@ -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',
}
},
).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>