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

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;