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:
sjl
2025-08-05 10:37:40 +08:00
parent 0079f7415e
commit 9c5e54507b
14 changed files with 1550 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/layouts/components/Menu/SubMenu.vue
View File

@@ -25,7 +25,7 @@ import { useRouter } from "vue-router";
defineProps<{ menuList: Menu.MenuOptions[] }>();
const router = useRouter();
const handleClickMenu = (subItem: Menu.MenuOptions) => {
console.log('1456----------------',subItem);
//console.log('1456----------------',subItem);
if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
router.push(subItem.path);
};

85
frontend/src/views/home/components/RemoveableEdge.vue Normal file
View File

@@ -0,0 +1,85 @@
<script setup>
import { BaseEdge, EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
import { computed } from 'vue'
const props = defineProps({
id: {
type: String,
required: true,
},
sourceX: {
type: Number,
required: true,
},
sourceY: {
type: Number,
required: true,
},
targetX: {
type: Number,
required: true,
},
targetY: {
type: Number,
required: true,
},
sourcePosition: {
type: String,
required: true,
},
targetPosition: {
type: String,
required: true,
},
markerEnd: {
type: String,
required: false,
},
style: {
type: Object,
required: false,
},
})
const { removeEdges } = useVueFlow()
const path = computed(() => getBezierPath(props))
</script>
<script>
export default {
inheritAttrs: false,
}
</script>
<template>
<BaseEdge :id="id" :style="style" :path="path[0]" :marker-end="markerEnd" />
<EdgeLabelRenderer>
<div
:style="{
pointerEvents: 'all',
position: 'absolute',
transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
}"
class="nodrag nopan"
>
<el-popconfirm
title="确定要删除这条连线吗？"
@confirm="removeEdges(id)"
>
<template #reference>
<el-icon class="edge-icon"><Delete/></el-icon>
</template>
</el-popconfirm>
</div>
</EdgeLabelRenderer>
</template>
<style scoped>
.edge-icon {
background: white;
border-radius: 50%;
padding: 2px;
cursor: pointer;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
</style>

657
frontend/src/views/home/components/comparePreTest.vue Normal file
View File

@@ -0,0 +1,657 @@
<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" disabled></el-checkbox>
</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-step :status="step6" title="遥控录波功能验证"/> -->
<el-step :status="step6" :title="ts === 'error'? '检测失败':ts === 'process'? '检测中':ts === 'success'? '检测成功':'待检测'"/>
</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 name="4">
<template #title>
实时数据对齐验证
<el-icon class="title-icon" @click="openDialog"><InfoFilled/></el-icon>
</template>
<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-item title="相序校验" name="5">
<div class="div-log">
<p v-for="(item, index) in step5InitLog" :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.split('&&')[0] }}
<br v-if="item.log.includes('&&')"/>
&nbsp;&nbsp;&nbsp;&nbsp;{{ item.log.split('&&')[1] }}
<br v-if="item.log.includes('&&')"/>
&nbsp;&nbsp;&nbsp;&nbsp;{{ item.log.split('&&')[2] }}
</p>
</div>
</el-collapse-item> -->
</el-collapse>
</div>
</div>
</div>
<RealTimeData ref="realTimeDataRef"/>
</template>
<script lang="tsx" setup name="preTest">
import {ElMessage, ElMessageBox, StepProps} from "element-plus";
import {defineExpose, ref, toRef, watch} from 'vue';
import RealTimeData from './realTimeDataAlign.vue'
const realTimeDataRef = ref()
const step1InitLog = ref([
{
type: 'info',
log: '暂无数据，等待检测开始',
},
])
const step2InitLog = ref([
{
type: 'info',
log: '暂无数据，等待检测开始',
},
])
const step3InitLog = ref([
{
type: 'info',
log: '暂无数据，等待检测开始',
},
])
const step4InitLog = ref([
{
type: 'info',
log: '暂无数据，等待检测开始',
},
])
const step5InitLog = ref([
{
type: 'info',
log: '暂无数据，等待检测开始',
},
])
const collapseActiveName = ref('1')
const activeIndex = ref(0)
const activeTotalNum = ref(5)
const step1 = ref<StepProps['status']>('wait')
const step2 = ref<StepProps['status']>('wait')
const step3 = ref<StepProps['status']>('wait')
const step4 = ref<StepProps['status']>('wait')
const step5 = ref<StepProps['status']>('wait')
const step6 = ref<StepProps['status']>('wait')
//定义与预检测配置数组
const detectionOptions = ref([
{
id: 0,
name: "设备通讯校验",
selected: true,
},
{
id: 1,
name: "协议校验",
selected: true,
},
{
id: 2,
name: "模型一致性校验",
selected: true,
},
{
id: 3,
name: "实时数据对齐验证",
selected: true,
},
{
id: 4,
name: "相序校验",
selected: true,
},
]);
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) {
if (testStatus.value !== 'waiting') {
switch (newValue.requestId) {
case 'yjc_sbtxjy':
switch (newValue.operateCode) {
case 'INIT_GATHER$01':
if (newValue.code == 10200) {
step1InitLog.value.push({
type: 'info',
log: newValue.data + '设备通讯校验成功!',
})
} else if (newValue.code == 10201) {
step1.value = 'process'
step1InitLog.value = [{
type: 'wait',
log: '正在进行设备通讯校验.....',
}];
} else if (newValue.code == 10550) {
step1InitLog.value.push({
type: 'error',
log: newValue.data + '设备连接异常!',
})
step1.value = 'error'
// ts.value = 'error'
// step6.value = 'error'
} else if (newValue.code == 10551) {
step1InitLog.value.push({
type: 'error',
log: newValue.data + '设备触发报告异常!',
})
step1.value = 'error'
ts.value = 'error'
step6.value = 'error'
} else if (newValue.code == 10552) {
//ElMessage.error("存在已经初始化步骤,已经自动关闭,请重新发起检测！")
step2InitLog.value = [{
type: 'wait',
log: '存在已经初始化步骤,执行自动关闭,请重新发起检测！',
}];
step1.value = 'error'
ts.value = 'error'
step6.value = 'error'
} else if (newValue.code == 25001) {
activeIndex.value = 1
step1.value = 'success'
step3.value = 'process'
}
break;
}
break;
case 'yjc_xyjy':
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'
// step5.value = 'error'
} else if (newValue.code == 10551) {
step3InitLog.value.push({
type: 'error',
log: newValue.data + '设备触发报告异常!',
})
step3.value = 'error'
ts.value = 'error'
step5.value = 'error'
} else if (newValue.code == 10552) {
step3.value = 'error'
//ElMessage.error("存在已经初始化步骤,已经自动关闭,请重新发起检测！")
step3InitLog.value = [{
type: 'wait',
log: '存在已经初始化步骤,执行自动关闭,请重新发起检测！',
}];
ts.value = 'error'
step5.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'
// step5.value = 'error'
} else if (newValue.code == 10551) {
step3InitLog.value.push({
type: 'error',
log: newValue.data + '设备触发报告异常!',
})
step3.value = 'error'
ts.value = 'error'
step5.value = 'error'
} else if (newValue.code == 10552) {
step3.value = 'error'
//ElMessage.error("存在已经初始化步骤,已经自动关闭,请重新发起检测！")
step3InitLog.value = [{
type: 'wait',
log: '存在已经初始化步骤,执行自动关闭,请重新发起检测！',
}];
ts.value = 'error'
step5.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'
// step5.value = 'error'
} else if (newValue.code == 10551) {
step3InitLog.value.push({
type: 'error',
log: newValue.data + '设备触发报告异常!',
})
step3.value = 'error'
ts.value = 'error'
step5.value = 'error'
} else if (newValue.code == 10552) {
//ElMessage.error("当前步骤已经初始化,执行自动关闭,请重新发起检测！")
step3.value = 'error'
step3InitLog.value = [{
type: 'wait',
log: '存在已经初始化步骤,执行自动关闭,请重新发起检测！',
}];
ts.value = 'error'
step5.value = 'error'
}
break;
case 'VERIFY_MAPPING$01':
if (newValue.code == 25001) {
activeIndex.value = 3
step3.value = 'success'
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'
} else if (newValue.code == 10500) {
step3InitLog.value.push({
type: 'error',
log: `装置中未找到该icd！`,
})
step3.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
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'
step5.value = 'error'
} else if (newValue.code == 10520) {
step4.value = 'error'
step4InitLog.value.push({
type: 'error',
log: '解析报文异常',
})
ts.value = 'error'
step5.value = 'error'
}
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 = [{
type: 'wait',
log: '获取数据相序校验数据!',
}];
} else if (newValue.code == 25003) {
step4.value = 'error'
step4InitLog.value.push({
type: 'error',
log: '相序校验未通过!',
})
ts.value = 'error'
step5.value = 'error'
} else if (newValue.code == 25001) {
step4.value = 'success'
step5.value = 'success'
step4InitLog.value.push({
type: 'wait',
log: '相序校验成功!',
})
ts.value = 'success'
}
activeIndex.value = 5
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'
break;
case "Dev":
step2.value = 'error'
step2InitLog.value = [{
type: 'error',
log: '设备服务端连接失败!',
}];
ts.value = 'error'
step5.value = 'error'
break;
}
break;
case 'unknown_operate':
break;
case 'error_flow_end':
ElMessageBox.alert(`设备连接异常，请检查设备连接情况！`, '检测失败', {
confirmButtonText: '确定',
type: 'error',
})
ts.value = 'error'
step5.value = 'error'
break;
case 'socket_timeout':
ElMessageBox.alert(`设备连接异常，请检查设备连接情况！`, '检测失败', {
confirmButtonText: '确定',
type: 'error',
})
ts.value = 'error'
step5.value = 'error'
break;
case 'server_error':
ElMessageBox.alert('服务端主动关闭连接!', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
ts.value = 'error'
step5.value = 'error'
break;
case 'device_error':
ElMessageBox.alert('设备主动关闭连接!', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
ts.value = 'error'
step5.value = 'error'
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: '暂无数据，等待检测开始',
},
]
step5InitLog.value = [
{
type: 'info',
log: '暂无数据，等待检测开始',
},
]
}
const openDialog = () => {
realTimeDataRef.value.open()
}
defineExpose({
initializeParameters,
});
</script>
<style scoped lang="scss">
.title-icon {
margin-left: 10px;
cursor: pointer;
font-size: 16px;
vertical-align: middle;
}
.test-dialog {
height: 350px;
display: flex;
flex-direction: row;
/* 横向排列 */
margin-top: 20px;
}
.dialog-left {
width: 15%;
margin-left: 20px;
}
.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>

470
frontend/src/views/home/components/compareTestPopup.vue Normal file
View File

@@ -0,0 +1,470 @@
<template>
<el-dialog :title="dialogTitle" width="1550px" :model-value="dialogVisible" :before-close="beforeClose" @close="handleClose" height="1000px" draggable>
<div class="steps-container">
<el-steps v-if="showSteps" class="test-head-steps" simple :active="stepsActiveIndex" process-status="finish" finish-status="success">
<el-step v-if="preTestSelected" title="预检测" :icon="stepsActive > 1 || stepsActiveIndex > stepsTotalNum - 1? SuccessFilled :Edit" @click="handleStepClick(1)"/>
<el-step v-if="testSelected" title="正式检测" :icon="stepsActive > 2 || stepsActiveIndex > stepsTotalNum - 1? SuccessFilled :Coin" @click="handleStepClick(2)"/>
<el-step title="检测完成" :icon="stepsActiveIndex > stepsTotalNum-1 ? SuccessFilled :Key"/>
</el-steps>
</div>
<ComparePreTest v-if="showComponent&&preTestSelected" v-show="preTestSelected && stepsActiveView==1" ref="preTestRef" v-model:testStatus="preTestStatus"
:webMsgSend="webMsgSend"/>
<test v-if="showComponent&&testSelected" ref="testRef" v-show="testSelected && stepsActiveView==2" v-model:testStatus="TestStatus" :webMsgSend="webMsgSend"
@update:webMsgSend="webMsgSend=$event" @sendPause="sendPause" @sendResume="sendResume" @sendReCheck="sendReCheck" @closeWebSocket="closeWebSocket"
:stepsActive="stepsActive"/>
<template #footer>
<div>
<el-button type="primary" :icon="VideoPlay" v-if="ActiveStatue === 'waiting'" @click="handleSubmitFast">开始检测</el-button>
<el-button type="primary" v-if="TestStatus === 'test_init'" disabled>
<el-icon class="loading-box" style="color: #fff;margin-right: 8px;">
<component :is="Refresh"/>
</el-icon>
初始化中
</el-button>
<el-button
type="primary"
v-if="TestStatus=='process'"
:icon="VideoPause"
@click="handlePause()">停止检测
</el-button>
<el-button type="warning" v-if="TestStatus === 'paused_ing'" disabled>
<el-icon class="loading-box" style="color: #fff;margin-right: 8px;">
<component :is="Refresh"/>
</el-icon>
暂停中
</el-button>
<el-button
type="warning"
v-if="(TestStatus =='paused')"
: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">
{{ nextStepText }}
</el-button>
<el-button type="primary" @click="handleQuit" v-else>
退出检测
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="tsx" setup name="testPopup">
import {reactive, ref, watch} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus'
import {Coin, Edit, Key, Odometer, Refresh, Right, SuccessFilled, UploadFilled, VideoPause, VideoPlay} from '@element-plus/icons-vue'
import ComparePreTest from './comparePreTest.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";
const userStore = useUserStore()
const checkStore = useCheckStore();
const nextStepText = ref('下一步');
const dialogVisible = ref(false)
const showSteps = ref(false)
const stepsTotalNum = ref(-1);//步骤总数
const stepsActiveIndex = ref(1); //当前正在执行的步骤索引
const stepsActiveView = ref(-1); //当前正在执行的步骤在（预处理、守时校验、系数校准、正式检测）中的排序，仅用于页面显示
const stepsActive = ref(-1); //当前正在执行的步骤在（预处理、守时校验、系数校准、正式检测）中的排序，实际记录步骤的状态，用于切换步骤
const ActiveStatue = ref('waiting');//当前步骤状态
const preTestStatus = ref('waiting');//预检测执行状态
const TestStatus = ref('waiting');//正式检测执行状态
const webMsgSend = ref();//webSocket推送的数据
const dialogTitle = ref('')
const showComponent = ref(true)
const preTestRef = ref(null)
const testRef = ref(null)
const dataSocket = reactive({
socketServe: socketClient.Instance,
});
// 勾选的检测内容
const preTestSelected = ref(false)
const testSelected = ref(false)
const initOperate = () => {
ActiveStatue.value = 'waiting'
preTestStatus.value = 'waiting'
TestStatus.value = 'waiting'
stepsActiveIndex.value = 1
showComponent.value = true
// 初始化勾选的检测内容
preTestSelected.value = checkStore.selectTestItems.preTest
testSelected.value = checkStore.selectTestItems.test
let count = 0
for (let key in checkStore.selectTestItems) {
if (checkStore.selectTestItems[key]) {
count++
}
}
stepsTotalNum.value = count + 1
if (preTestSelected.value) {
stepsActiveView.value = 1
stepsActive.value = 1
return
}
if (testSelected.value) {
stepsActiveView.value = 2
stepsActive.value = 2
return
}
}
const open = (title: string,sourceIds: string[]) => {
showSteps.value = true
initOperate()
dialogTitle.value = title;
dialogVisible.value = true;
if (preTestRef.value) {
preTestRef.value.initializeParameters();
}
//开始创建webSocket客户端
socketClient.Instance.connect();
dataSocket.socketServe = socketClient.Instance;
dataSocket.socketServe.registerCallBack('aaa', (res: { code: number; }) => {
// 处理来自服务器的消息
// console.log('Received message:', res);
if (res.code === 20000) {
//ElMessage.error(message.message)
// loading.close()
} else {
webMsgSend.value = res
}
});
}
const handleSubmitFast = () => {
let deviceIds = checkStore.devices.map((item) => item.deviceId)
let planId = checkStore.plan.id
if (!dataSocket.socketServe.connected) {
ElMessage.error('webSocket连接中断！')
return
}
console.log("handleSubmit", stepsActive.value, TestStatus.value)
switch (stepsActive.value) {
case 1:
if (preTestStatus.value == 'waiting') {
if (checkStore.selectTestItems.preTest) {
startPreTest({
userPageId: "cdf",
devIds: deviceIds,
planId: planId,
operateType: 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]
}).then(res => {
if (res.code === 'A001014') {
ElMessageBox.alert('装置配置异常', '检测失败', {
confirmButtonText: '确定',
type: 'error',
})
preTestStatus.value = 'error'
}
})
preTestStatus.value = 'start'
}
}
break;
case 2:
if (TestStatus.value == "waiting") {
if (!checkStore.selectTestItems.preTest && !checkStore.selectTestItems.channelsTest && checkStore.selectTestItems.test) {
startPreTest({
userPageId: "cdf",
devIds: deviceIds,
planId: planId,
operateType: 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]
}).then(res => {
if (res.code === 'A001014') {
ElMessageBox.alert('装置配置异常', '初始化失败', {
confirmButtonText: '确定',
type: 'error',
})
TestStatus.value = 'test_init_fail'
}
})
}
TestStatus.value = 'start'
} else if (TestStatus.value == 'paused') {
// 发送继续指令
sendResume()
}
break;
default:
break;
}
}
const emit = defineEmits<{
(e: 'quitClicked'): void;
}>();
watch(preTestStatus, function (newValue, oldValue) {
console.log('预检测',newValue, oldValue);
ActiveStatue.value = newValue
})
watch(TestStatus, function (newValue, oldValue) {
console.log(newValue, oldValue);
ActiveStatue.value = newValue
})
watch(ActiveStatue, function (newValue, oldValue) {
if (newValue === 'error') {
stepsActiveIndex.value = stepsTotalNum.value + 1
nextStepText.value = '检测失败'
}
if (newValue === 'success' && stepsActiveIndex.value === stepsTotalNum.value - 1) {
stepsActiveIndex.value += 2
nextStepText.value = '检测完成'
}
if (newValue === 'test_init_fail') {
stepsActiveIndex.value += 2
nextStepText.value = '初始化失败'
}
if (newValue === 'connect_timeout') {
stepsActiveIndex.value += 2
nextStepText.value = '连接超时'
}
if (newValue === 'pause_timeout') {
stepsActiveIndex.value += 2
// nextStepText.value = '结束测试'
nextStepText.value = '暂停超时'
}
if (newValue === 'success' && stepsActiveIndex.value < stepsTotalNum.value - 1) {
nextStep() // 实现自动点击，进入下一个测试内容
//handleSubmit()
handleSubmitFast()
}
})
const handleQuit = () => {
console.log('handleQuit', ActiveStatue.value)
if (ActiveStatue.value !== 'success' && ActiveStatue.value !== 'waiting' && ActiveStatue.value !== 'paused' && ActiveStatue.value !== 'test_init_fail' && ActiveStatue.value !== 'connect_timeout' && ActiveStatue.value !== 'pause_timeout') {
beforeClose(() => {
})
} else {
handleClose()
}
}
const handlePause = () => {
sendPause()
testRef.value?.handlePause()
}
const sendPause = () => {
console.log('发起暂停请求')
TestStatus.value = 'paused_ing'
pauseTest()
}
const sendResume = () => {
console.log('发起继续检测请求')
resumeTest({
userPageId: "cdf",
devIds: checkStore.devices.map((item) => item.deviceId),
planId: checkStore.plan.id,
operateType: '2', // 0:'系数校验'，'1'为预检测、‘2‘为正式检测、'8'为不合格项复检
userId: userStore.userInfo.id,
temperature: checkStore.temperature,
humidity: checkStore.humidity
})
Object.assign(webMsgSend.value, {
requestId: 'Resume_Success'
})
}
const sendReCheck = () => {
console.log('发送重新检测指令')
startPreTest({
userPageId: "cdf",
devIds: checkStore.devices.map((item) => item.deviceId),
planId: checkStore.plan.id,
operateType: '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'
}
const closeWebSocket = () => {
dataSocket.socketServe.closeWs()
}
const nextStep = () => {
if (stepsActiveIndex.value == stepsTotalNum.value + 1 || ActiveStatue.value === 'error' || ActiveStatue.value === 'test_init_fail' || ActiveStatue.value === 'connect_timeout' || ActiveStatue.value === 'pause_timeout') {
handleClose()
return
}
if (ActiveStatue.value != 'error') {
ActiveStatue.value = 'waiting'
let tempStep = stepsActiveIndex.value
let idx = 1
stepsActiveIndex.value++
for (let selectTestItemsKey in checkStore.selectTestItems) {
if (tempStep == 0 && checkStore.selectTestItems[selectTestItemsKey]) {
stepsActiveView.value = idx
stepsActive.value = idx
return
}
if (checkStore.selectTestItems[selectTestItemsKey] && tempStep != 0) {
tempStep--
}
idx++
}
}
}
const handleStepClick = (step: number) => {
if (step > stepsActive.value) {
return
} else {
stepsActiveView.value = step
}
}
function clearData() {
stepsTotalNum.value = -1
stepsActiveIndex.value = 1
stepsActiveView.value = -1
preTestStatus.value = "waiting"
TestStatus.value = "waiting"
ActiveStatue.value = "waiting"
nextStepText.value = "下一步"
}
const beforeClose = (done: () => void) => {
if (stepsActiveIndex.value < stepsTotalNum.value && ActiveStatue.value != 'error') {
ElMessageBox.confirm('检测未完成，是否退出当前检测流程?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
handleClose()
})
} else {
handleClose()
}
}
const handleClose = () => {
showSteps.value = false
dataSocket.socketServe.closeWs()
dialogVisible.value = false;
clearData()
showComponent.value = false;
emit('quitClicked'); // 触发事件
}
// 对外映射
defineExpose({open})
</script>
<style scoped lang="scss">
.test-head-steps {
::v-deep .el-step {
.el-step__head.is-success {
color: #91cc75;
}
.el-step__title.is-success {
color: #91cc75;
}
}
}
:deep(.dialog-big .el-dialog__body) {
max-height: 840px !important;
}
.steps-container :deep(.test-head-steps) {
height: 80px;
margin-bottom: 10px;
}
.steps-container :deep(.el-step__title) {
font-size: 20px !important; /* 设置标题字体大小 */
vertical-align: baseline !important;
display: inline-block; /* 确保文字和图标在同一行 */
line-height: 1; /* 调整行高以确保底部对齐 */
}
.steps-container :deep(.el-step__icon-inner) {
font-size: 18px !important;
vertical-align: baseline !important;
display: inline-block; /* 确保文字和图标在同一行 */
line-height: 1; /* 调整行高以确保底部对齐 */
}
.steps-container :deep(.el-step__icon) {
font-size: 18px !important;
vertical-align: baseline !important;
display: inline-block; /* 确保文字和图标在同一行 */
line-height: 1; /* 调整行高以确保底部对齐 */
}
.loading-box {
animation: loading 1.5s linear infinite;
}
@keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>

452
frontend/src/views/home/components/deviceConnectionPopup.vue
View File

@@ -1,105 +1,98 @@
<template>
<el-dialog title="设备通道配对" v-model='dialogVisible' v-bind="dialogBig">
<div class="flow-container" style="overflow: hidden; position: relative;">
<!-- <el-form ref='dialogFormRef' :disabled="false" label-width="auto" class="form-two">
<el-form-item label='被检设备' prop='type'>
<el-select v-model="value" clearable placeholder="被检设备" >
<el-option label="CN88888" :value="2"></el-option>
<el-option label="CN250985" :value="1"></el-option>
<el-option label="PQS240224008" :value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label='标准设备' prop='type' >
<el-select v-model="value" clearable placeholder="被检设备" >
<el-option label="CN88888" :value="2"></el-option>
<el-option label="CN250985" :value="1"></el-option>
<el-option label="PQS240224008" :value="0"></el-option>
</el-select>
</el-form-item>
</el-form> -->
<el-button @click="logConnections">打印当前配对</el-button>
<VueFlow
:nodes="nodes"
:edges="edges"
:connection-radius="30"
:nodes-draggable="false"
:dragging = "false"
:zoom-on-scroll="false"
:pan-on-drag="false"
:disable-zoom-pan-on-connect="true"
auto-connect
@connect="handleConnect"
/>
</div>
<div class="flow-container" style="overflow: hidden; position: relative;">
<el-button @click="logConnections">打印当前配对</el-button>
<VueFlow
:nodes="nodes"
:edges="edges"
:connection-radius="30"
:nodes-draggable="false"
:dragging="false"
:zoom-on-scroll="false"
:pan-on-drag="false"
:disable-zoom-pan-on-connect="true"
:prevent-scrolling="true"
:fit-view="true"
:min-zoom="1"
:max-zoom="1"
:elements-selectable="false"
auto-connect
@connect="handleConnect"
@connect-start="handleConnectStart"
@connect-end="handleConnectEnd"
@pane-ready="onPaneReady"
v-on:pane-mouse-move="false"
>
</VueFlow>
</div>
<!-- 底部操作按钮 -->
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleNext">下一步</el-button>
</div>
</template>
</el-dialog>
<!-- 手动检测-勾选检测项弹窗 -->
<SelectTestItemPopup ref="selectTestItemPopupRef" @openTestDialog="openTestDialog"></SelectTestItemPopup>
<CompareTestPopup ref='testPopup'></CompareTestPopup>
</template>
<script lang="ts" setup>
import { h, ref} from 'vue'
import { VueFlow, useVueFlow} from '@vue-flow/core'
import {dialogBig} from "@/utils/elementBind";
import {Platform,Promotion,Flag} from '@element-plus/icons-vue'
import { c } from 'vite/dist/node/types.d-aGj9QkWt';
import { de, el } from 'element-plus/es/locale';
import { h, ref } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { dialogBig } from "@/utils/elementBind";
import { Platform, Flag } from '@element-plus/icons-vue'
import { Device } from '@/api/device/interface/device';
import { Plan } from '@/api/plan/interface';
import { StandardDevice } from '@/api/device/interface/standardDevice';
const dialogVisible = ref(false)
// 初始化 VueFlow
const { edges} = useVueFlow()
import SelectTestItemPopup from "@/views/home/components/selectTestItemPopup.vue";
import CompareTestPopup from './compareTestPopup.vue'
import { ElMessage } from 'element-plus';
import CustomEdge from './RemoveableEdge.vue' // 导入自定义连接线组件
const dialogVisible = ref(false)
const selectTestItemPopupRef = ref<InstanceType<typeof SelectTestItemPopup>>()
const testPopup = ref()
const dialogTitle = ref('手动检测')
// 初始化 VueFlow，注册自定义连线类型
const { edges, setViewport } = useVueFlow({
edgeTypes: {
default: CustomEdge
}
})
// 初始化时锁定画布位置
const onPaneReady = () => {
setViewport({ x: 0, y: 0, zoom: 1 })
}
// 提取公共的label渲染函数
const createLabel = ( text: string,type :string) => {
const createLabel = (text: string, type: string) => {
return h('div', {
style: {
display: 'flex',
flexDirection: 'column', // 图标和文字上下排列
flexDirection: 'column',
alignItems: 'center',
fontSize: '15px',
textAlign: 'center',
border: '1px solid #ccc', // 添加边框
borderRadius: '8px', // 圆角
padding: '8px', // 内边距
backgroundColor: '#f9f9f9' // 可选：背景色
border: '1px solid #ccc',
borderRadius: '8px',
padding: '8px',
backgroundColor: '#f9f9f9'
}
}, [
h(Platform, {
style: {
width: '20px',
marginBottom: '4px', // 图标与文字间距
marginBottom: '4px',
color: '#526ade'
}
}),
h('div', null, '设备名称：'+ text),
h('div', null, '设备类型：'+ type)
]) as any
}
const createLabel2 = (text: string) => {
return h('div', {
style: {
display: 'flex',
alignItems: 'center',
fontSize: '15px',
textAlign: 'center',
border: '1px solid #ccc', // 添加边框
borderRadius: '8px', // 圆角
padding: '8px', // 内边距
backgroundColor: '#f9f9f9' // 可选：背景色
}
}, [
h(Promotion, {
style: {
width: '20px',
marginRight: '4px',
color: '#526ade'
}
}),
text
h('div', null, '设备名称：' + text),
h('div', null, '设备类型：' + type)
]) as any
}
@@ -110,10 +103,10 @@ const createLabel3 = (text: string) => {
alignItems: 'center',
fontSize: '15px',
textAlign: 'center',
border: '1px solid #ccc', // 添加边框
borderRadius: '8px', // 圆角
padding: '8px', // 内边距
backgroundColor: '#f9f9f9' // 可选：背景色
border: '1px solid #ccc',
borderRadius: '8px',
padding: '8px',
backgroundColor: '#f9f9f9'
}
}, [
h(Flag, {
@@ -127,194 +120,40 @@ const createLabel3 = (text: string) => {
]) as any
}
// 节点数据
const nodes2 = ref([
{
id: '1',
data: { label: createLabel('被检设备1') },
position: { x: 0, y: 50 },
class: 'no-handle-node', // 👈 添加自定义 class
style: { width: '200px', border: 'none', boxShadow: 'none' }
},
{
id: '2',
data: { label: createLabel('标准设备1') },
position: { x: 950, y: 0 },
class: 'no-handle-node', // 👈 添加自定义 class
style: { width: '200px', border: 'none', boxShadow: 'none' }
},
{
id: '3',
data: { label: createLabel('被检设备2') },
position: { x: 0, y: 250 },
class: 'no-handle-node', // 👈 添加自定义 class
style: { width: '200px', border: 'none', boxShadow: 'none' }
},
{
id: '4',
data: { label: createLabel('标准设备2') },
position: { x: 950, y: 200 },
class: 'no-handle-node', // 👈 添加自定义 class
style: { width: '200px', border: 'none', boxShadow: 'none' }
},
const handleConnectStart = (params: any) => {
onPaneReady()
}
{
id: '5',
data: { label: createLabel('被检设备3') },
position: { x: 0, y: 425 },
class: 'no-handle-node', // 👈 添加自定义 class
style: { width: '200px', border: 'none', boxShadow: 'none' }
},
{
id: '被检通道1',
type: 'input',
data: { label: createLabel3('被检通道1') },
position: { x: 200, y: 0 },
sourcePosition: 'right',
style: { width: '150px', border: 'none', boxShadow: 'none' }
},
{
id: '被检通道2',
type: 'input',
data: { label: createLabel3('被检通道2') },
position: { x: 200, y:50 },
sourcePosition: 'right',
style: { width: '150px', border: 'none', boxShadow: 'none' }
},
{
id: '被检通道3',
type: 'input',
data: { label: createLabel3('被检通道3') },
position: { x: 200, y: 100 },
sourcePosition: 'right',
style: { width: '150px', border: 'none', boxShadow: 'none' }
},
{
id: '被检通道4',
type: 'input',
data: { label: createLabel3('被检通道4') },
position: { x: 200, y: 150 },
sourcePosition: 'right',
style: { width: '150px', border: 'none', boxShadow: 'none' }
},
{
id: '被检通道5',
type: 'input',
data: { label: createLabel3('被检通道1') },
position: { x: 200, y: 250 },
sourcePosition: 'right',
style: { width: '150px', border: 'none', boxShadow: 'none' }
},
{
id: '被检通道6',
type: 'input',
data: { label: createLabel3('被检通道2') },
position: { x: 200, y:300 },
sourcePosition: 'right',
style: { width: '150px', border: 'none', boxShadow: 'none' }
},
{
id: '被检通道7',
type: 'input',
data: { label: createLabel3('被检通道1') },
position: { x: 200, y:400 },
sourcePosition: 'right',
style: { width: '150px', border: 'none', boxShadow: 'none' }
},
{
id: '被检通道8',
type: 'input',
data: { label: createLabel3('被检通道2') },
position: { x: 200, y:450 },
sourcePosition: 'right',
style: { width: '150px', border: 'none', boxShadow: 'none' }
},
{
id: '被检通道9',
type: 'input',
data: { label: createLabel3('被检通道3') },
position: { x: 200, y:500 },
sourcePosition: 'right',
style: { width: '150px', border: 'none', boxShadow: 'none' }
},
{
id: '标准通道1',
type: 'output',
data: { label: createLabel2('标准通道1') },
position: { x: 800, y: 0 },
targetPosition: 'left',
style: { width: '150px', border: 'none', boxShadow: 'none' }
},
{
id: '标准通道2',
type: 'output',
data: { label: createLabel2('标准通道2') },
position: { x: 800, y: 50 },
targetPosition: 'left',
style: { width: '150px', border: 'none', boxShadow: 'none' }
},
{
id: '标准通道3',
type: 'output',
data: { label: createLabel2('标准通道1') },
position: { x: 800, y: 150 },
targetPosition: 'left',
style: { width: '150px', border: 'none', boxShadow: 'none' }
},
{
id: '标准通道4',
type: 'output',
data: { label: createLabel2('标准通道2') },
position: { x: 800, y: 200 },
targetPosition: 'left',
style: { width: '150px', border: 'none', boxShadow: 'none' }
},
{
id: '标准通道5',
type: 'output',
data: { label: createLabel2('标准通道3') },
position: { x: 800, y: 250 },
targetPosition: 'left',
style: { width: '150px', border: 'none', boxShadow: 'none' }
},
{
id: '标准通道6',
type: 'output',
data: { label: createLabel2('标准通道4') },
position: { x: 800, y: 300 },
targetPosition: 'left',
style: { width: '150px', border: 'none', boxShadow: 'none' }
},
]);
const handleConnectEnd = (params: any) => {
onPaneReady()
}
const handleConnect = (params: any) => {
console.log('连接信息:', params);
const sourceNode = nodes.value.find(node => node.id === params.source)
const targetNode = nodes.value.find(node => node.id === params.target)
// 连接规则验证
const isValidConnection =
sourceNode?.type === 'input' &&
targetNode?.type === 'output'
if (!isValidConnection) {
// 删除当前连接
removeEdge(params)
}
ElMessage.warning('只能从被检通道连接到标准通道')
return
}
}
// 删除不合法连接的函数
// 删除不合法连接
const removeEdge = (params: any) => {
const edgeIndex = edges.value.findIndex(edge => edge.source === params.source && edge.target === params.target)
const edgeIndex = edges.value.findIndex(edge =>
edge.source === params.source && edge.target === params.target
)
if (edgeIndex !== -1) {
edges.value.splice(edgeIndex, 1) // 删除该连接
edges.value.splice(edgeIndex, 1)
}
}
@@ -334,45 +173,34 @@ function logConnections() {
}
const nodes = ref([])
const open = async (device:Device.ResPqDev[],standardDev:StandardDevice.ResPqStandardDevice[]) => {
nodes.value = createNodes(device,standardDev)
const sourceIdArray = ref<string[]>()
const open = async (device: Device.ResPqDev[], standardDev: StandardDevice.ResPqStandardDevice[],sourceIds: string[]) => {
edges.value = []
sourceIdArray.value = sourceIds
nodes.value = createNodes(device, standardDev)
dialogVisible.value = true
onPaneReady()
}
// // 每台设备的通道数量
// const channelCounts = {
// '1': 1, // 被检设备1 → 4个通道
// '3': 3, // 被检设备2 → 2个通道
// '5': 2, // 被检设备3 → 2个通道
// '7': 4 // 被检设备4 → 4个通道
// }
const handleNext = () => {
if (edges.value.length === 0) {
ElMessage.warning('请先完成通道配对')
return
}
dialogVisible.value = false
selectTestItemPopupRef.value?.open(sourceIdArray.value)
}
// 每台设备的通道数量
// const channelCounts2 = {
// '2': 2, // 标准设备1 → 2个通道
// '4': 1, // 标准设备2 → 1个通道
// }
// const inspectionDevices = [
// { id: '1', name: '被检设备1', type: 'normal', deviceType: 'PQS-882B4' },
// { id: '3', name: '被检设备2', type: 'normal', deviceType: 'PQS-883A2' },
// { id: '5', name: '被检设备3', type: 'normal', deviceType: 'PQS-882B2' },
// { id: '7', name: '被检设备4', type: 'normal', deviceType: 'PQS_883B' }
// ]
// const standardDevices = [
// { id: '2', name: '标准设备1', type: 'normal', deviceType: 'PQS-882A' },
// { id: '4', name: '标准设备2', type: 'normal', deviceType: 'PQS-882B2' },
// ]
const openTestDialog = () => {
testPopup.value?.open(dialogTitle.value,sourceIdArray.value)
}
const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResPqStandardDevice[]) => {
const channelCounts: Record<string, number> = {}
// 每台被检设备的通道数量
device.forEach(device => {
channelCounts[device.id] = device.devChns || 0
})
// 每台被检设备的信息
const inspectionDevices = device.map(d => ({
id: d.id,
name: d.name,
@@ -381,23 +209,19 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
}))
const channelCounts2: Record<string, number> = {}
// 每台标准设备的通道数量
standardDev.forEach(dev => {
standardDev.forEach(dev => {
const channelList = dev.inspectChannel ? dev.inspectChannel.split(',') : []
channelCounts2[dev.id] = channelList.length
})
console.log(standardDev)
// 每台标准设备的信息
const standardDevices = standardDev.map(d => ({
const standardDevices = standardDev.map(d => ({
id: d.id,
name: d.name,
type: 'normal',
deviceType: d.devType
}))
const newNodes: any[] = []
// 存储每组被检/标准通道的垂直范围
const deviceChannelGroups: { deviceId: string; centerY: number; }[] = []
const standardChannelGroups: any[] = []
@@ -421,6 +245,8 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
sourcePosition: 'right',
style: { width: '150px', border: 'none', boxShadow: 'none' }
})
// 计算设备节点Y坐标（居中显示）
if(i == 1 && count == 1){
deviceChannelGroups.push({
deviceId,
@@ -442,10 +268,12 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
centerY: yPosition.value - 100
})
}
yPosition.value += 50
}
yPosition.value += 50
})
// 添加标准通道
Object.entries(channelCounts2).forEach(([deviceId, count]) => {
for (let i = 1; i <= count; i++) {
@@ -458,7 +286,9 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
targetPosition: 'left',
style: { width: '150px', border: 'none', boxShadow: 'none' }
})
if(i == 1 && count == 1){
// 计算设备节点Y坐标（居中显示）
if(i == 1 && count == 1){
standardChannelGroups.push({
deviceId,
centerY: yPosition2.value - 25
@@ -479,51 +309,51 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
centerY: yPosition2.value - 100
})
}
yPosition2.value += 50
yPosition2.value += 50
}
yPosition2.value += 50
yPosition2.value += 50
})
// 添加被检设备
deviceChannelGroups.forEach(({ deviceId, centerY }) => {
const device = inspectionDevices.find(d => d.id === deviceId)
if (!device) return
// 添加被检设备
deviceChannelGroups.forEach(({ deviceId, centerY }) => {
const device = inspectionDevices.find(d => d.id === deviceId)
if (device) {
newNodes.push({
id: device.id,
data: { label: createLabel(device.name,device.deviceType) },
data: { label: createLabel(device.name, device.deviceType) },
position: { x: deviceWidth, y: centerY },
class: 'no-handle-node',
style: { width: '200px', border: 'none', boxShadow: 'none' }
})
})
}
})
// 添加标准设备
standardChannelGroups.forEach(({ deviceId, centerY }) => {
const device = standardDevices.find(d => d.id === deviceId)
if (!device) return
// 添加标准设备
standardChannelGroups.forEach(({ deviceId, centerY }) => {
const device = standardDevices.find(d => d.id === deviceId)
if (device) {
newNodes.push({
id: device.id,
data: { label: createLabel(device.name,device.deviceType) },
data: { label: createLabel(device.name, device.deviceType) },
position: { x: standardWidth, y: centerY },
class: 'no-handle-node',
style: { width: '200px', border: 'none', boxShadow: 'none' }
})
})
}
})
return newNodes
}
defineExpose({open})
defineExpose({ open })
</script>
<style>
.flow-container {
display: flex;
flex-direction: column;
height: 800px;
height: 600px;
width: 100%;
overflow: hidden;
}
.vue-flow__node.no-handle-node .vue-flow__handle {

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

@@ -68,7 +68,7 @@
</template>
<script lang="tsx" setup name="preTest">
import {ElMessage, ElMessageBox} from "element-plus";
import {defineExpose, toRef} from 'vue';
import {defineExpose, ref, toRef, watch} from 'vue';
const step1InitLog = ref([
{

134
frontend/src/views/home/components/realTimeDataAlign.vue Normal file
View File

@@ -0,0 +1,134 @@
<template>
<el-dialog title="实时数据详情" v-model='dialogVisible' @close="handleClose" v-bind="dialogBig" >
<el-tabs v-model="activeTab" type="card">
<el-tab-pane label="被检设备1" name="channel1">
<div class="table-toolbar">
<el-form-item label="被检设备通道号" prop="createId">
<el-select v-model="timeRange" placeholder="选择时间范围" style="width: 150px;">
<el-option label="通道1" value="1"></el-option>
<el-option label="通道2" value="2"></el-option>
<el-option label="通道3" value="3"></el-option>
<el-option label="通道4" value="4"></el-option>
</el-select>
</el-form-item>
<el-button type="primary" @click="exportData">导出数据</el-button>
</div>
<el-table
:data="tableData"
:header-cell-style="{ textAlign: 'center',backgroundColor: 'var(--el-color-primary)',color: '#fff' } "
:cell-style="{ textAlign: 'center' }"
style="width: 100%"
:style="{ height: '400px',maxHeight: '400px',overflow:'hidden'}">
<el-table-column prop="monitorNum" label="数据时标" width="180"/>
<el-table-column label="被检设备1-通道1">
<el-table-column prop="Ua" label="A相(V)">
</el-table-column>
<el-table-column prop="Ub" label="B相(V)">
</el-table-column>
<el-table-column prop="Uc" label="C相(V)">
</el-table-column>
</el-table-column>
<el-table-column label="标准设备-通道1">
<el-table-column prop="Ua" label="A相(V)">
</el-table-column>
<el-table-column prop="Ub" label="B相(V)">
</el-table-column>
<el-table-column prop="Uc" label="C相(V)">
</el-table-column>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="被检设备2" name="channel2"></el-tab-pane>
</el-tabs>
</el-dialog>
</template>
<script setup lang='tsx' name='realTimeDataAlign'>
import { dialogBig } from "@/utils/elementBind";
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
const dialogVisible = ref(false);
const activeTab = ref('channel1');
const timeRange = ref('1');
// 表格数据示例
const tableData = ref([
{
monitorNum: '2023-05-20 10:30:01',
Ua: '220.5V',
Ub: '219.8V',
Uc: '220.2V',
Ia: '4.98A',
Ib: '5.01A',
Ic: '4.99A'
},
{
monitorNum: '2023-05-20 10:30:04',
Ua: '220.3V',
Ub: '220.1V',
Uc: '219.9V',
Ia: '5.02A',
Ib: '4.99A',
Ic: '5.00A'
},
{
monitorNum: '2023-05-20 10:30:07',
Ua: '220.5V',
Ub: '219.8V',
Uc: '220.2V',
Ia: '4.98A',
Ib: '5.01A',
Ic: '4.99A'
},
{
monitorNum: '2023-05-20 10:30:10',
Ua: '220.3V',
Ub: '220.1V',
Uc: '219.9V',
Ia: '5.02A',
Ib: '4.99A',
Ic: '5.00A'
}
]);
const open = async () => {
dialogVisible.value = true;
};
// 刷新数据
const refreshData = () => {
ElMessage.info('正在刷新数据...');
// 这里可以添加实际的数据刷新逻辑
};
// 导出数据
const exportData = () => {
ElMessage.success('数据导出成功');
// 这里可以添加实际的数据导出逻辑
};
// 关闭弹窗
const handleClose = () => {
dialogVisible.value = false;
};
defineExpose({ open });
</script>
<style scoped lang="scss">
.table-toolbar {
display: flex;
justify-content: space-between; // 关键修改：将子元素分布到两端
}
// 移除这个样式，避免影响布局
// .table-toolbar .el-button {
// margin-right: 10px;
// }
:deep(.el-dialog__body) {
padding: 10px 20px 20px 20px;
}
</style>

23
frontend/src/views/home/components/selectTestItemPopup.vue
View File

@@ -8,7 +8,7 @@
<el-form-item v-if="checkStore.plan.timeCheck===1" prop="timeTest" :label-width="100">
<el-checkbox v-model="formContent.timeTest" label="守时检测"/>
</el-form-item>
<el-form-item v-if="AppSceneStore.currentScene === '1'" prop="channelsTest" :label-width="100">
<el-form-item v-if="channelsTestShow" prop="channelsTest" :label-width="100">
<el-checkbox v-model="formContent.channelsTest" label="系数校准"/>
</el-form-item>
<el-form-item prop="test" :label-width="100">
@@ -28,25 +28,36 @@
<script setup lang='tsx' name='selectTestItemPopup'>
import {dialogSmall} from "@/utils/elementBind";
import {ref} from "vue";
import {reactive, ref} from "vue";
import {useCheckStore} from "@/stores/modules/check";
import type {CheckData} from "@/api/check/interface";
import {ElMessageBox} from "element-plus";
import {useAppSceneStore} from "@/stores/modules/mode";
import {useAppSceneStore,useModeStore} from "@/stores/modules/mode";
const AppSceneStore = useAppSceneStore()
const emit = defineEmits(['openTestDialog'])
const checkStore = useCheckStore();
const modeStore = useModeStore()
const dialogFormRef = ref()
const channelsTestShow = ref(false)
const dialogVisible = ref(false)
const formContent = reactive<CheckData.SelectTestItem>({preTest: true, timeTest: false, channelsTest: false, test: false})
const sourceIdArray = ref<string[]>()
const open = async (sourcesIds: string[]) => {
const open = async () => {
sourceIdArray.value = sourcesIds
resetFormContent()
checkStore.setSelectTestItems(formContent)
dialogVisible.value = true
if(modeStore.currentMode === '比对式'){
channelsTestShow.value = false
}else{
if(AppSceneStore.currentScene === '1'){
channelsTestShow.value = true
}else{
channelsTestShow.value = false
}
}
}
// 清空表单内容

33
frontend/src/views/home/components/table.vue
View File

@@ -267,14 +267,13 @@ import {
CirclePlus,
Odometer,
} from '@element-plus/icons-vue'
import {getPlanList} from '@/api/plan/planList'
import deviceDataList from '@/api/device/device/deviceData'
import TestPopup from './testPopup.vue'
import reportPopup from './reportPopup.vue'
import dataCheckPopup from './dataCheckSingleChannelSingleTestPopup.vue'
import dataCheckChangeErrSysPopup from './dataCheckChangeErrSysPopup.vue'
import {generateDevReport, getBoundPqDevList} from '@/api/plan/plan.ts'
import {onBeforeMount, onMounted, PropType, reactive, ref, watch} from 'vue'
import {onBeforeMount, onMounted, PropType, provide, reactive, ref, watch} from 'vue'
import {useDictStore} from '@/stores/modules/dict'
import ChannelsTest from './channelsTest.vue'
import {useModeStore,useAppSceneStore} from '@/stores/modules/mode' // 引入模式 store
@@ -293,7 +292,8 @@ import WriteTHPopup from "@/views/home/components/writeTHPopup.vue";
import DeviceConnectionPopup from '@/views/home/components/deviceConnectionPopup.vue'
import { Plan } from '@/api/plan/interface'
import { StandardDevice } from '@/api/device/interface/standardDevice'
import { s } from 'vite/dist/node/types.d-aGj9QkWt'
import {getPlanList } from '@/api/plan/plan.ts'
import { mount } from 'sortablejs'
const dictStore = useDictStore()
const checkStore = useCheckStore()
@@ -372,6 +372,8 @@ const props = defineProps({
},
})
const appSceneStore = useAppSceneStore()
const planTable = ref<any[]>([])
const emit = defineEmits<{
(e: 'batchGenerateClicked'): void;
@@ -951,7 +953,13 @@ const handleTest2 = () => {
)
return
}
deviceConnectionPopupRef.value?.open(channelsSelection.value,pqStandardDevList.value)
//选中计划的数据源
const dataSources = ref([])
const matchedItem = planTable.value.data.find(item => item.name === props.plan.name)
if (matchedItem) {
dataSources.value = matchedItem.datasourceIds
}
deviceConnectionPopupRef.value?.open(channelsSelection.value,pqStandardDevList.value,dataSources.value)
}
const handleTest = async (val: string) => {
@@ -1074,7 +1082,7 @@ const handleTest = async (val: string) => {
if(appSceneStore.currentScene === '0'){
writeTHPopupRef.value?.open()
}else{
selectTestItemPopupRef.value?.open()
selectTestItemPopupRef.value?.open([])
//openTestDialog(true)
}
})
@@ -1086,7 +1094,7 @@ const handleTest = async (val: string) => {
if(appSceneStore.currentScene === '0'){
writeTHPopupRef.value?.open()
}else{
selectTestItemPopupRef.value?.open()
selectTestItemPopupRef.value?.open([])
//openTestDialog(true)
}
}
@@ -1094,7 +1102,7 @@ const handleTest = async (val: string) => {
checkStore.setSelectTestItems({preTest: false, timeTest: false, channelsTest: false, test: true})
} else {
selectTestItemPopupRef.value?.open()
selectTestItemPopupRef.value?.open([])
checkStore.setReCheckType(1)
}
} else if (val === '系数校准') {
@@ -1301,7 +1309,6 @@ watch(
)
onBeforeMount(async () => {
const response = await getPqDev()
devTypeOptions.value = response.data.map(item => ({
id: item.id,
@@ -1314,6 +1321,16 @@ onBeforeMount(async () => {
}))
})
onMounted(async () => {
if(modeStore.currentMode != '比对式')
return;
const patternId2 = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id;
if (patternId2 !== undefined) {
planTable.value = await getPlanList({ 'patternId': patternId2 });
}
})
const handleQuitClicked = () => {
//console.log('handleQuitClicked')
dataSocket.socketServe.closeWs()

14
frontend/src/views/home/components/tree.vue
View File

@@ -35,7 +35,7 @@
<span>{{ node.label }}</span>
<!-- 子节点右侧图标 + tooltip -->
<el-tooltip
v-if="data.name == '34535'"
v-if="node.label!='未检' && node.label!='检测中' && node.label!='检测完成'"
placement="top"
:manual="true"
content="子计划信息">
@@ -49,13 +49,13 @@
</el-tree>
</div>
</div>
<SourceOpen ref='openSourceView' :width="width" :height="height"></SourceOpen>
<SourceOpen ref='openSourceView' :width="width" :height="height + 175"></SourceOpen>
</template>
<script lang='ts' setup>
import { type Plan } from '@/api/plan/interface';
import { Menu, Platform, CircleCheck,Loading } from '@element-plus/icons-vue'
import { nextTick, onMounted, ref, watch } from 'vue';
import { nextTick, onMounted, PropType, ref, watch } from 'vue';
import { useRouter } from 'vue-router'
import {useCheckStore} from "@/stores/modules/check";
import { ElTooltip } from 'element-plus';
@@ -68,6 +68,7 @@ const checkStore = useCheckStore()
const filterText = ref('')
const treeRef = ref()
const data: any = ref([])
const defaultProps = {
children: 'children',
label: 'name',
@@ -82,7 +83,6 @@ const getTreeData = (val: any) => {
defaultChecked.value = [];
// 遍历 val 的每个 children，过滤掉 pid !== '0'
data.value = val
for (let item of data.value) {
if (item.children.length > 0) {
let node = item.children[0];
@@ -124,11 +124,13 @@ const clickTableToTree = (val: any,id:any) => {
}
}
const {updateSelectedTreeNode,width,height} = defineProps<{
const {updateSelectedTreeNode,width,height,planArray} = defineProps<{
updateSelectedTreeNode:Function;
width: number;
height: number;
planArray?: Plan.ReqPlan[];
}>();
watch(
() => searchForm.value.planName,
(val) => {
@@ -168,7 +170,9 @@ const detail = () => {
}
const childDetail = (data: Plan.ResPlan) => {
console.log('planArray',planArray)
openSourceView.value.open("检测计划详情",data)
}

3
frontend/src/views/home/tabs/dashboard.vue
View File

@@ -5,7 +5,7 @@
<el-col :lg='4' :xl='4' :md='4' :sm='4'>
<div class='left_tree'>
<!-- <tree ref='treeRef' :updateSelectedTreeNode='getPieData || (() => {})' /> -->
<tree ref='treeRef' :updateSelectedTreeNode='updateData|| (() => {})' :width="viewWidth" :height="viewHeight" />
<tree ref='treeRef' :updateSelectedTreeNode='updateData|| (() => {})' :width="viewWidth" :height="viewHeight" :planArray = 'planList2?.data'/>
</div>
</el-col>
<el-col :lg='20' :xl='20' :md='20' :sm='20'>
@@ -302,7 +302,6 @@ const getPieData = async (id: string) => {
planName.value = '所选计划:' + plan.name
select_Plan.value = plan
console.log('所选计划:',plan)

13
frontend/src/views/machine/device/components/devicePopup.vue
View File

@@ -3,7 +3,7 @@
<el-tabs type="border-card" v-model="activeTab" @tab-change="onTabChange">
<el-tab-pane label="设备台账信息">
<div ref="deviceInfoContainer">
<el-form :model='formContent' ref='dialogFormRef' :rules='rules' :disabled="false" label-width="auto" class="form-three">
<el-form :model='formContent' ref='dialogFormRef' :rules='rules' :disabled="false" label-width="auto" class="form-three" :validate-on-rule-change="false">
<el-divider>设备信息</el-divider>
<el-form-item label="装置编号" prop="createId">
<el-input v-model="formContent.createId" placeholder="请输入装置编号" @input="handleInput" maxlength="32" show-word-limit/>
@@ -234,8 +234,6 @@ const monitorTableHeight = ref(375) // 默认高度
const selectOptions = ref<Record<string, Device.SelectOption[]>>({})
const pqChannelArray = ref([
{
value: '1',
@@ -254,7 +252,6 @@ const onTabChange = (tabName: string | number) => {
}
}
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
@@ -333,12 +330,10 @@ const resetFormContent = () => {
}
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增被检设备' : '编辑被检设备'
})
// 定义表单校验规则
const baseRules: Record<string, Array<FormItemRule>> = {
devType: [{required: true, message: '设备类型必选！', trigger: 'change'}],
@@ -426,9 +421,9 @@ const getParameter = (data: Monitor.ResPqMon[]) => {
.sort((a, b) => parseFloat(a) - parseFloat(b));
}
// 保存数据
const save = () => {
try {
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (formContent.encryptionFlag === 0) {

4
frontend/src/views/machine/testScript/components/testScriptFlickerTab.vue
View File

@@ -204,6 +204,10 @@ const waveList = [
{
fchagFre: '2400',
fchagValue: '0.77'
},
{
fchagFre: '4000',
fchagValue: '2.4'
}
]
},

1
frontend/src/views/plan/planList/components/childrenPlan.vue
View File

@@ -374,6 +374,7 @@ const removeTab = async (targetName: TabPaneName) => {
// 弹窗打开方法
const open = async (textTitle: string,data: Plan.ReqPlan,pattern: string) => {
console.log('open',data)
dialogVisible.value = true
title.value = textTitle
planTitle.value = data.name