663 lines
17 KiB
Vue
663 lines
17 KiB
Vue
<template>
|
||
<div>
|
||
<el-tabs type="border-card">
|
||
<el-tab-pane label="预检测项目">
|
||
<div class="form-grid">
|
||
<el-checkbox v-for="(item, index) in detectionOptions" v-model="item.selected" :key="index"
|
||
:label="item.name"></el-checkbox>
|
||
<!-- disabled="true" -->
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
|
||
<div class="test-dialog">
|
||
<div class="dialog-left">
|
||
<el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus"
|
||
finish-status="success">
|
||
<el-step :status="step1" title="源通讯校验" />
|
||
<el-step :status="step2" title="设备通讯校验" />
|
||
<el-step :status="step3" title="协议校验" />
|
||
<el-step :status="step4" title="相序校验" />
|
||
<el-step :status="step5" title="检测完成" />
|
||
</el-steps>
|
||
</div>
|
||
<div class="dialog-right">
|
||
<el-collapse v-model="collapseActiveName" accordion>
|
||
<el-collapse-item title="源通讯校验" name="1">
|
||
<div class="div-log">
|
||
<p v-for="(item, index) in step1InitLog" :key="index"
|
||
:style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
|
||
{{ item.log }} <br />
|
||
</p>
|
||
</div>
|
||
</el-collapse-item>
|
||
<el-collapse-item title="设备通讯校验" name="2">
|
||
<div class="div-log">
|
||
<p v-for="(item, index) in step2InitLog" :key="index"
|
||
:style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
|
||
{{ item.log }} <br />
|
||
</p>
|
||
</div>
|
||
</el-collapse-item>
|
||
<el-collapse-item title="协议校验" name="3">
|
||
<div class="div-log">
|
||
<p v-for="(item, index) in step3InitLog" :key="index"
|
||
:style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
|
||
{{ item.log }} <br />
|
||
</p>
|
||
</div>
|
||
</el-collapse-item>
|
||
<el-collapse-item title="相序校验" name="4">
|
||
<div class="div-log">
|
||
<p v-for="(item, index) in step4InitLog" :key="index"
|
||
:style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
|
||
{{ item.log }} <br />
|
||
</p>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
<script lang="tsx" setup name="preTest">
|
||
import {ElMessage} from "element-plus";
|
||
import { defineExpose } from 'vue';
|
||
const step1InitLog = ref([
|
||
{
|
||
type: 'info',
|
||
log: '暂无数据，等待检测开始',
|
||
},
|
||
])
|
||
|
||
const step1Log = ref([
|
||
{
|
||
type: 'info',
|
||
log: '源通讯校验成功',
|
||
},
|
||
])
|
||
|
||
const step2InitLog = ref([
|
||
{
|
||
type: 'info',
|
||
log: '暂无数据，等待检测开始',
|
||
},
|
||
])
|
||
|
||
const step2Log = ref([
|
||
{
|
||
type: 'info',
|
||
log: '被检设备：240001通讯校验成功',
|
||
},
|
||
{
|
||
type: 'info',
|
||
log: '被检设备：240002通讯校验成功',
|
||
},
|
||
{
|
||
type: 'info',
|
||
log: '被检设备：240003通讯校验成功',
|
||
},
|
||
{
|
||
type: 'info',
|
||
log: '被检设备：240004通讯校验成功',
|
||
},
|
||
])
|
||
|
||
const step3InitLog = ref([
|
||
{
|
||
type: 'info',
|
||
log: '暂无数据，等待检测开始',
|
||
},
|
||
])
|
||
|
||
const step3Log = ref([
|
||
{
|
||
type: 'info',
|
||
log: '被检设备：240001协议校验成功',
|
||
},
|
||
{
|
||
type: 'info',
|
||
log: '被检设备：240002协议校验成功',
|
||
},
|
||
{
|
||
type: 'info',
|
||
log: '被检设备：240003协议校验成功',
|
||
},
|
||
{
|
||
type: 'info',
|
||
log: '被检设备：240004协议校验成功',
|
||
},
|
||
])
|
||
|
||
|
||
const step4InitLog = ref([
|
||
{
|
||
type: 'info',
|
||
log: '暂无数据，等待检测开始',
|
||
},
|
||
])
|
||
|
||
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 step1 = ref('wait')
|
||
const step2 = ref('wait')
|
||
const step3 = ref('wait')
|
||
const step4 = ref('wait')
|
||
const step5 = ref('wait')
|
||
|
||
//定义与预检测配置数组
|
||
const detectionOptions = ref([
|
||
{
|
||
id: 0,
|
||
name: "源通讯检测",//判断源通讯是否正常
|
||
selected: true,
|
||
},
|
||
{
|
||
id: 1,
|
||
name: "设备通讯检测",//判断设备的IP、Port、识别码、秘钥是否正常
|
||
selected: true,
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "协议校验",//ICD报告触发测试
|
||
selected: true,
|
||
},
|
||
{
|
||
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');
|
||
|
||
const props = defineProps({
|
||
testStatus: {
|
||
type: String,
|
||
default: 'wait'
|
||
},
|
||
webMsgSend: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
})
|
||
|
||
|
||
|
||
|
||
|
||
const testStatus = toRef(props, 'testStatus');
|
||
const webMsgSend = toRef(props, 'webMsgSend');
|
||
const ts = ref('');
|
||
|
||
watch(webMsgSend,function (newValue,oldValue){
|
||
// console.log(newValue)
|
||
|
||
switch (newValue.requestId){
|
||
case 'yjc_ytxjy':
|
||
switch (newValue.operateCode){
|
||
case 'INIT_GATHER':
|
||
if(newValue.code == 10200) {
|
||
step1InitLog.value.push({
|
||
type: 'info',
|
||
log: '源初始化成功!',
|
||
})
|
||
activeIndex.value = 1
|
||
step1.value = 'success'
|
||
step2.value = 'process'
|
||
}else if(newValue.code == 10201){
|
||
step1.value = 'process'
|
||
step1InitLog.value = [{
|
||
type: 'wait',
|
||
log: '正在进行源初始化!',
|
||
}];
|
||
}else if(newValue.code == 10552){
|
||
ElMessage.error(newValue.code)
|
||
step1.value = 'error'
|
||
ts.value = 'error'
|
||
}else if(newValue.code == 10523){
|
||
step1.value = 'error'
|
||
ts.value = 'error'
|
||
step1InitLog.value = [{
|
||
type: 'error',
|
||
log: '源连接失败!',
|
||
}];
|
||
}
|
||
break;
|
||
|
||
|
||
|
||
|
||
}
|
||
break;
|
||
case 'yjc_sbtxjy':
|
||
|
||
switch (newValue.operateCode) {
|
||
case 'INIT_GATHER$01':
|
||
if (newValue.code == 10200) {
|
||
step2InitLog.value.push({
|
||
type: 'info',
|
||
log: newValue.data+'设备通讯校验成功!',
|
||
})
|
||
|
||
} else if (newValue.code == 10201) {
|
||
step2.value = 'process'
|
||
step2InitLog.value = [{
|
||
type: 'wait',
|
||
log: '正在进行设备通讯校验.....',
|
||
}];
|
||
} else if (newValue.code == 10550) {
|
||
step2InitLog.value.push({
|
||
type: 'error',
|
||
log: newValue.data+'设备连接异常!',
|
||
})
|
||
step2.value = 'error'
|
||
ts.value = 'error'
|
||
}else if (newValue.code == 10551) {
|
||
step2InitLog.value.push({
|
||
type: 'error',
|
||
log: newValue.data+'设备触发报告异常!',
|
||
})
|
||
step2.value = 'error'
|
||
ts.value = 'error'
|
||
} else if (newValue.code == 10552) {
|
||
//ElMessage.error("存在已经初始化步骤,已经自动关闭,请重新发起检测！")
|
||
step2InitLog.value = [{
|
||
type: 'wait',
|
||
log: '存在已经初始化步骤,执行自动关闭,请重新发起检测！',
|
||
}];
|
||
step2.value = 'error'
|
||
ts.value = 'error'
|
||
} else if (newValue.code == 25001) {
|
||
activeIndex.value = 2
|
||
step2.value = 'success'
|
||
step3.value = 'process'
|
||
}
|
||
break;
|
||
}
|
||
|
||
break;
|
||
case 'yjc_xyjy':
|
||
switch (newValue.operateCode) {
|
||
case 'INIT_GATHER$01':
|
||
if (newValue.code == 10200) {
|
||
step3InitLog.value.push({
|
||
type: 'info',
|
||
log: '统计数据协议校验:'+newValue.data+'通讯协议校验成功!',
|
||
})
|
||
|
||
} else if (newValue.code == 10201) {
|
||
step3.value = 'process'
|
||
step3InitLog.value = [{
|
||
type: 'wait',
|
||
log: '正在进行通讯协议校验.....',
|
||
}];
|
||
} else if (newValue.code == 10550) {
|
||
step3InitLog.value.push({
|
||
type: 'error',
|
||
log: newValue.data+'设备连接异常!',
|
||
})
|
||
step3.value = 'error'
|
||
ts.value = 'error'
|
||
}else if (newValue.code == 10551) {
|
||
step3InitLog.value.push({
|
||
type: 'error',
|
||
log: newValue.data+'设备触发报告异常!',
|
||
})
|
||
step3.value = 'error'
|
||
ts.value = 'error'
|
||
}else if (newValue.code == 10552) {
|
||
step3.value = 'error'
|
||
//ElMessage.error("存在已经初始化步骤,已经自动关闭,请重新发起检测！")
|
||
step3InitLog.value = [{
|
||
type: 'wait',
|
||
log: '存在已经初始化步骤,执行自动关闭,请重新发起检测！',
|
||
}];
|
||
ts.value = 'error'
|
||
}
|
||
break;
|
||
case 'INIT_GATHER$02':
|
||
if (newValue.code == 10200) {
|
||
step3InitLog.value.push({
|
||
type: 'info',
|
||
log: '实时数据协议校验:'+newValue.data+'通讯协议校验成功!',
|
||
})
|
||
|
||
} else if (newValue.code == 10201) {
|
||
step3.value = 'process'
|
||
step3InitLog.value = [{
|
||
type: 'wait',
|
||
log: '正在进行通讯协议校验.....',
|
||
}];
|
||
}else if (newValue.code == 10550) {
|
||
step3InitLog.value.push({
|
||
type: 'error',
|
||
log: newValue.data+'设备连接异常!',
|
||
})
|
||
step3.value = 'error'
|
||
ts.value = 'error'
|
||
}else if (newValue.code == 10551) {
|
||
step3InitLog.value.push({
|
||
type: 'error',
|
||
log: newValue.data+'设备触发报告异常!',
|
||
})
|
||
step3.value = 'error'
|
||
ts.value = 'error'
|
||
} else if (newValue.code == 10552) {
|
||
step3.value = 'error'
|
||
//ElMessage.error("存在已经初始化步骤,已经自动关闭,请重新发起检测！")
|
||
step3InitLog.value = [{
|
||
type: 'wait',
|
||
log: '存在已经初始化步骤,执行自动关闭,请重新发起检测！',
|
||
}];
|
||
ts.value = 'error'
|
||
}
|
||
break;
|
||
case 'INIT_GATHER$03':
|
||
if (newValue.code == 10200) {
|
||
step3InitLog.value.push({
|
||
type: 'info',
|
||
log: '暂态数据协议校验:'+newValue.data+'通讯协议校验成功!',
|
||
})
|
||
|
||
} 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'
|
||
}else if (newValue.code == 10551) {
|
||
step3InitLog.value.push({
|
||
type: 'error',
|
||
log: newValue.data+'设备触发报告异常!',
|
||
})
|
||
step3.value = 'error'
|
||
ts.value = 'error'
|
||
} else if (newValue.code == 10552) {
|
||
//ElMessage.error("当前步骤已经初始化,执行自动关闭,请重新发起检测！")
|
||
step3.value = 'error'
|
||
step3InitLog.value = [{
|
||
type: 'wait',
|
||
log: '存在已经初始化步骤,执行自动关闭,请重新发起检测！',
|
||
}];
|
||
ts.value = 'error'
|
||
} else if (newValue.code == 25001) {
|
||
activeIndex.value = 3
|
||
step3.value = 'success'
|
||
step4.value = 'process'
|
||
}
|
||
break;
|
||
}
|
||
|
||
break;
|
||
case 'YJC_xujy':
|
||
switch (newValue.operateCode) {
|
||
case 'OPER_GATHER':
|
||
if (newValue.code == 10200) {
|
||
step4InitLog.value.push({
|
||
type: 'info',
|
||
log: '源已接通!',
|
||
})
|
||
|
||
} else if (newValue.code == 10201) {
|
||
step4.value = 'process'
|
||
step4InitLog.value = [{
|
||
type: 'wait',
|
||
log: '正在接通源.....',
|
||
}];
|
||
} else if (newValue.code == 10552) {
|
||
ElMessage.error("存在已经初始化步骤,已经自动关闭,请重新发起检测！")
|
||
step4.value = 'error'
|
||
ts.value = 'error'
|
||
} else if (newValue.code == 10520) {
|
||
step4.value = 'error'
|
||
step4InitLog.value.push({
|
||
type: 'error',
|
||
log: '解析报文异常',
|
||
})
|
||
ts.value = 'error'
|
||
}
|
||
break;
|
||
|
||
case 'DATA_REQUEST$02':
|
||
if (newValue.code == 10200) {
|
||
let type = 'info'
|
||
if(newValue.data.includes('不合格')){
|
||
type = 'error'
|
||
}
|
||
step4InitLog.value.push({
|
||
type: type,
|
||
log: '相序校验:'+newValue.data,
|
||
})
|
||
|
||
} else if (newValue.code == 10201) {
|
||
step4.value = 'process'
|
||
step4InitLog.value = [{
|
||
type: 'wait',
|
||
log: '获取数据相序校验数据!',
|
||
}];
|
||
}
|
||
else if (newValue.code == 25001) {
|
||
step4.value = 'success'
|
||
step5.value = 'success'
|
||
step4InitLog.value.push({
|
||
type: 'wait',
|
||
log: '相序校验成功!',
|
||
})
|
||
}
|
||
activeIndex.value = 5
|
||
ts.value = 'success'
|
||
break
|
||
}
|
||
|
||
break;
|
||
case 'quit':
|
||
break;
|
||
case 'connect':
|
||
switch (newValue.operateCode){
|
||
case "Source":
|
||
step1.value = 'error'
|
||
step1InitLog.value = [{
|
||
type: 'error',
|
||
log: '源服务端连接失败!',
|
||
}];
|
||
ts.value = 'error'
|
||
break;
|
||
case "Dev":
|
||
step2.value = 'error'
|
||
step2InitLog.value = [{
|
||
type: 'error',
|
||
log: '设备服务端连接失败!',
|
||
}];
|
||
ts.value = 'error'
|
||
break;
|
||
}
|
||
break;
|
||
case 'unknown_operate':
|
||
|
||
break;
|
||
}
|
||
|
||
})
|
||
|
||
watch(activeIndex, function (newValue, oldValue) {
|
||
if (newValue <= activeTotalNum.value - 2){
|
||
collapseActiveName.value = (newValue+1).toString()
|
||
} else{
|
||
collapseActiveName.value = (newValue - 1).toString()
|
||
}
|
||
})
|
||
|
||
//监听goods_sn的变化
|
||
watch(testStatus, function (newValue, oldValue) {
|
||
|
||
ts.value = props.testStatus;
|
||
if (ts.value === 'start') {
|
||
ts.value = 'process'
|
||
}else if(ts.value === 'waiting'){
|
||
activeIndex.value = 0
|
||
step1InitLog.value = [
|
||
{
|
||
type: 'info',
|
||
log: '暂无数据，等待检测开始',
|
||
},
|
||
]
|
||
step1.value = 'finish'
|
||
step2.value = 'wait'
|
||
step3.value = 'wait'
|
||
step4.value = 'wait'
|
||
step5.value = 'wait'
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['update:testStatus']);
|
||
//监听sn
|
||
watch(ts, function (newValue, oldValue) {
|
||
//修改父组件
|
||
emit('update:testStatus', ts.value)
|
||
})
|
||
|
||
|
||
|
||
|
||
// 定义一个初始化参数的方法
|
||
function initializeParameters() {
|
||
activeIndex.value = 0
|
||
step1.value = 'process'
|
||
step2.value = 'wait'
|
||
step3.value = 'wait'
|
||
step4.value = 'wait'
|
||
step5.value = 'wait'
|
||
|
||
step1InitLog.value = [
|
||
{
|
||
type: 'info',
|
||
log: '暂无数据，等待检测开始',
|
||
},
|
||
]
|
||
step2InitLog.value = [
|
||
{
|
||
type: 'info',
|
||
log: '暂无数据，等待检测开始',
|
||
},
|
||
]
|
||
step3InitLog.value = [
|
||
{
|
||
type: 'info',
|
||
log: '暂无数据，等待检测开始',
|
||
},
|
||
]
|
||
step4InitLog.value = [
|
||
{
|
||
type: 'info',
|
||
log: '暂无数据，等待检测开始',
|
||
},
|
||
]
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
defineExpose({
|
||
initializeParameters,
|
||
});
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.test-dialog {
|
||
height: 350px;
|
||
display: flex;
|
||
|
||
flex-direction: row;
|
||
/* 横向排列 */
|
||
margin-top: 20px;
|
||
/* .dialog-left{
|
||
margin-right: 20px;
|
||
} */
|
||
}
|
||
|
||
.dialog-left {
|
||
width: 15%;
|
||
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;
|
||
width: 80%;
|
||
height: 100%;
|
||
}
|
||
|
||
.dialog-right :deep(.el-collapse-item__header) {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.div-log {
|
||
height: 145px;
|
||
overflow-y: auto;
|
||
padding-left: 10px;
|
||
|
||
p {
|
||
margin: 5px 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
}
|
||
</style>
|