修改通道配置页面
This commit is contained in:
496
frontend/src/views/home/components/channelPairing.vue
Normal file
496
frontend/src/views/home/components/channelPairing.vue
Normal file
@@ -0,0 +1,496 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="flow-container" style="overflow: hidden; position: relative" :style="{ height: 442 + 'px' }">
|
||||||
|
<!-- <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> -->
|
||||||
|
<!-- 手动检测-勾选检测项弹窗 -->
|
||||||
|
<!-- <SelectTestItemPopup ref="selectTestItemPopupRef" @openTestDialog="openTestDialog"></SelectTestItemPopup> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { h, ref, onMounted } 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 { StandardDevice } from '@/api/device/interface/standardDevice'
|
||||||
|
import SelectTestItemPopup from '@/views/home/components/selectTestItemPopup.vue'
|
||||||
|
import { ElMessage, stepProps } from 'element-plus'
|
||||||
|
import CustomEdge from './RemoveableEdge.vue' // 导入自定义连接线组件
|
||||||
|
import { jwtUtil } from '@/utils/jwtUtil'
|
||||||
|
import { useCheckStore } from '@/stores/modules/check'
|
||||||
|
|
||||||
|
const checkStore = useCheckStore()
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const selectTestItemPopupRef = ref<InstanceType<typeof SelectTestItemPopup>>()
|
||||||
|
const testPopup = ref()
|
||||||
|
const dialogTitle = ref('手动检测')
|
||||||
|
const prop = defineProps({
|
||||||
|
devIdList: {
|
||||||
|
type: Array as any,
|
||||||
|
default: []
|
||||||
|
},
|
||||||
|
pqStandardDevList: {
|
||||||
|
type: Array as any,
|
||||||
|
default: []
|
||||||
|
},
|
||||||
|
planIdKey: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 计算对话框高度
|
||||||
|
const dialogHeight = ref(600)
|
||||||
|
// 初始化 VueFlow,注册自定义连线类型
|
||||||
|
const { edges, setViewport } = useVueFlow({
|
||||||
|
edgeTypes: {
|
||||||
|
default: CustomEdge
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 初始化时锁定画布位置
|
||||||
|
const onPaneReady = () => {
|
||||||
|
setViewport({ x: 0, y: 0, zoom: 1 })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提取公共的label渲染函数
|
||||||
|
const createLabel = (text: string, type: string) => {
|
||||||
|
return h(
|
||||||
|
'div',
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
fontSize: '15px',
|
||||||
|
textAlign: 'center',
|
||||||
|
border: '1px solid #ccc',
|
||||||
|
borderRadius: '8px',
|
||||||
|
padding: '8px',
|
||||||
|
backgroundColor: '#f9f9f9'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[
|
||||||
|
h(Platform, {
|
||||||
|
style: {
|
||||||
|
width: '20px',
|
||||||
|
marginBottom: '4px',
|
||||||
|
color: '#526ade'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
h('div', null, '设备名称:' + text),
|
||||||
|
h('div', null, '设备类型:' + type)
|
||||||
|
]
|
||||||
|
) as any
|
||||||
|
}
|
||||||
|
|
||||||
|
const createLabel3 = (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(Flag, {
|
||||||
|
style: {
|
||||||
|
width: '20px',
|
||||||
|
marginRight: '4px',
|
||||||
|
color: '#526ade'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
text
|
||||||
|
]
|
||||||
|
) as any
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleConnectStart = (params: any) => {
|
||||||
|
onPaneReady()
|
||||||
|
}
|
||||||
|
|
||||||
|
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 existingEdges = edges.value.filter(edge => edge.source === params.source || edge.target === params.target)
|
||||||
|
|
||||||
|
// 如果同源或同目标的连接超过1个,说明有重复
|
||||||
|
if (existingEdges.length > 1) {
|
||||||
|
const duplicateSource = existingEdges.filter(edge => edge.source === params.source).length > 1
|
||||||
|
const duplicateTarget = existingEdges.filter(edge => edge.target === params.target).length > 1
|
||||||
|
|
||||||
|
if (duplicateSource) {
|
||||||
|
removeEdge(params)
|
||||||
|
ElMessage.warning('该被检通道已经连接,不能重复连接')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (duplicateTarget) {
|
||||||
|
removeEdge(params)
|
||||||
|
ElMessage.warning('该标准通道已经连接,不能重复连接')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除不合法连接
|
||||||
|
const removeEdge = (params: any) => {
|
||||||
|
const edgeIndex = edges.value.findIndex(edge => edge.source === params.source && edge.target === params.target)
|
||||||
|
if (edgeIndex !== -1) {
|
||||||
|
edges.value.splice(edgeIndex, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const nodes = ref([])
|
||||||
|
const planId = ref('')
|
||||||
|
const devIds = ref<string[]>()
|
||||||
|
const standardDevIds = ref<string[]>()
|
||||||
|
|
||||||
|
const open = async () => {
|
||||||
|
edges.value = []
|
||||||
|
devIds.value = prop.devIdList.map(d => d.id)
|
||||||
|
standardDevIds.value = prop.pqStandardDevList.map(d => d.id)
|
||||||
|
planId.value = prop.planIdKey
|
||||||
|
nodes.value = createNodes(prop.devIdList, prop.pqStandardDevList)
|
||||||
|
dialogVisible.value = true
|
||||||
|
onPaneReady()
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
open()
|
||||||
|
})
|
||||||
|
const handleNext = async () => {
|
||||||
|
if (edges.value.length === 0) {
|
||||||
|
ElMessage.warning('请先完成通道配对')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
// const sourceKey = edge.source.replace('被检通道-', '').replace('-', '_');
|
||||||
|
let chnNumList: string[] = []
|
||||||
|
await edges.value.forEach(edge => {
|
||||||
|
const match = edge.source.split('-')
|
||||||
|
|
||||||
|
if (match) {
|
||||||
|
chnNumList.push(match[2])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const connections = edges.value.reduce(
|
||||||
|
(map, edge) => {
|
||||||
|
// 从source中提取设备ID和通道号: 被检通道-{deviceId}-{channelNum} => {deviceId}-{channelNum}
|
||||||
|
const sourceKey = edge.source.replace('被检通道-', '').replace('-', '_')
|
||||||
|
|
||||||
|
// 从target中提取设备ID和通道号: 标准通道-{deviceId}-{channelNum} => {deviceId}-{channelNum}
|
||||||
|
const targetValue = edge.target.replace('标准通道-', '').replace('-', '_')
|
||||||
|
|
||||||
|
map[sourceKey] = targetValue
|
||||||
|
return map
|
||||||
|
},
|
||||||
|
{} as Record<string, string>
|
||||||
|
)
|
||||||
|
generateChannelMapping()
|
||||||
|
await checkStore.setChnNum(chnNumList)
|
||||||
|
return {
|
||||||
|
title: dialogTitle.value,
|
||||||
|
mapping: channelMapping.value,
|
||||||
|
plan: planId.value,
|
||||||
|
login: jwtUtil.getLoginName(),
|
||||||
|
devIdsArray: devIds.value,
|
||||||
|
standardDevIdsArray: standardDevIds.value,
|
||||||
|
pair: connections
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const openTestDialog = async () => {
|
||||||
|
// 转换连接信息,只保留设备ID和通道号
|
||||||
|
const connections = edges.value.reduce(
|
||||||
|
(map, edge) => {
|
||||||
|
// 从source中提取设备ID和通道号: 被检通道-{deviceId}-{channelNum} => {deviceId}-{channelNum}
|
||||||
|
const sourceKey = edge.source.replace('被检通道-', '').replace('-', '_')
|
||||||
|
|
||||||
|
// 从target中提取设备ID和通道号: 标准通道-{deviceId}-{channelNum} => {deviceId}-{channelNum}
|
||||||
|
const targetValue = edge.target.replace('标准通道-', '').replace('-', '_')
|
||||||
|
|
||||||
|
map[sourceKey] = targetValue
|
||||||
|
return map
|
||||||
|
},
|
||||||
|
{} as Record<string, string>
|
||||||
|
)
|
||||||
|
|
||||||
|
generateChannelMapping()
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
testPopup.value?.open(
|
||||||
|
dialogTitle.value,
|
||||||
|
channelMapping.value,
|
||||||
|
planId.value,
|
||||||
|
jwtUtil.getLoginName(),
|
||||||
|
devIds.value,
|
||||||
|
standardDevIds.value,
|
||||||
|
connections
|
||||||
|
)
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 转换 edges.value 为 channelMapping 格式
|
||||||
|
const channelMapping = ref<Record<string, Record<string, string>>>({})
|
||||||
|
|
||||||
|
// 生成映射关系的方法
|
||||||
|
const generateChannelMapping = () => {
|
||||||
|
const mapping: Record<string, Record<string, string>> = {}
|
||||||
|
|
||||||
|
edges.value.forEach(edge => {
|
||||||
|
// 解析 source 节点信息(被检通道)
|
||||||
|
const sourceParts = edge.source.split('-')
|
||||||
|
const sourceDeviceId = sourceParts[1]
|
||||||
|
const sourceChannel = sourceParts[2]
|
||||||
|
|
||||||
|
// 解析 target 节点信息(标准通道)
|
||||||
|
const targetParts = edge.target.split('-')
|
||||||
|
const targetDeviceId = targetParts[1]
|
||||||
|
const targetChannel = targetParts[2]
|
||||||
|
|
||||||
|
// 查找对应的节点以获取显示名称
|
||||||
|
const sourceDeviceNode = nodes.value.find(node => node.id === sourceDeviceId)
|
||||||
|
const targetDeviceNode = nodes.value.find(node => node.id === targetDeviceId)
|
||||||
|
|
||||||
|
if (sourceDeviceNode && targetDeviceNode) {
|
||||||
|
// 提取设备显示文本
|
||||||
|
const sourceDeviceText = sourceDeviceNode.data.label.children[1].children
|
||||||
|
const targetDeviceText = targetDeviceNode.data.label.children[1].children
|
||||||
|
|
||||||
|
// 构造键名 - 现在以标准设备为键
|
||||||
|
const targetKey = `${targetDeviceText}`.replace('设备名称:', '')
|
||||||
|
const sourceValue = `${sourceDeviceText}通道${sourceChannel}`.replace('设备名称:', '')
|
||||||
|
|
||||||
|
// 初始化对象
|
||||||
|
if (!mapping[targetKey]) {
|
||||||
|
mapping[targetKey] = {}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加映射关系 - 标准设备通道 -> 被检设备信息
|
||||||
|
mapping[targetKey][`通道${targetChannel}`] = sourceValue
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
channelMapping.value = mapping
|
||||||
|
}
|
||||||
|
|
||||||
|
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,
|
||||||
|
type: 'normal',
|
||||||
|
deviceType: d.devType
|
||||||
|
}))
|
||||||
|
|
||||||
|
const channelCounts2: Record<string, number> = {}
|
||||||
|
standardDev.forEach(dev => {
|
||||||
|
const channelList = dev.inspectChannel ? dev.inspectChannel.split(',') : []
|
||||||
|
channelCounts2[dev.id] = channelList.length
|
||||||
|
})
|
||||||
|
|
||||||
|
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[] = []
|
||||||
|
|
||||||
|
const deviceWidth = 150
|
||||||
|
const inputChannelX = 350
|
||||||
|
const outputChannelX = 1020
|
||||||
|
const standardWidth = 1170
|
||||||
|
|
||||||
|
const yPosition = ref(25)
|
||||||
|
const yPosition2 = ref(25)
|
||||||
|
|
||||||
|
// 添加被检通道
|
||||||
|
Object.entries(channelCounts).forEach(([deviceId, count]) => {
|
||||||
|
for (let i = 1; i <= count; i++) {
|
||||||
|
const channelId = `被检通道-${deviceId}-${i}`
|
||||||
|
newNodes.push({
|
||||||
|
id: channelId,
|
||||||
|
type: 'input',
|
||||||
|
data: { label: createLabel3(`被检通道${i}`) },
|
||||||
|
position: { x: inputChannelX, y: yPosition.value },
|
||||||
|
sourcePosition: 'right',
|
||||||
|
style: { width: '150px', border: 'none', boxShadow: 'none' }
|
||||||
|
})
|
||||||
|
|
||||||
|
// 计算设备节点Y坐标(居中显示)
|
||||||
|
if (i == 1 && count == 1) {
|
||||||
|
deviceChannelGroups.push({
|
||||||
|
deviceId,
|
||||||
|
centerY: yPosition.value - 25
|
||||||
|
})
|
||||||
|
} else if (i == 2 && count == 2) {
|
||||||
|
deviceChannelGroups.push({
|
||||||
|
deviceId,
|
||||||
|
centerY: yPosition.value - 50
|
||||||
|
})
|
||||||
|
} else if (i == 3 && count == 3) {
|
||||||
|
deviceChannelGroups.push({
|
||||||
|
deviceId,
|
||||||
|
centerY: yPosition.value - 75
|
||||||
|
})
|
||||||
|
} else if (i == 4 && count == 4) {
|
||||||
|
deviceChannelGroups.push({
|
||||||
|
deviceId,
|
||||||
|
centerY: yPosition.value - 100
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
yPosition.value += 50
|
||||||
|
}
|
||||||
|
yPosition.value += 50
|
||||||
|
})
|
||||||
|
|
||||||
|
// 添加标准通道
|
||||||
|
Object.entries(channelCounts2).forEach(([deviceId, count]) => {
|
||||||
|
for (let i = 1; i <= count; i++) {
|
||||||
|
const channelId = `标准通道-${deviceId}-${i}`
|
||||||
|
newNodes.push({
|
||||||
|
id: channelId,
|
||||||
|
type: 'output',
|
||||||
|
data: { label: createLabel3(`标准通道${i}`) },
|
||||||
|
position: { x: outputChannelX, y: yPosition2.value },
|
||||||
|
targetPosition: 'left',
|
||||||
|
style: { width: '150px', border: 'none', boxShadow: 'none' }
|
||||||
|
})
|
||||||
|
|
||||||
|
// 计算设备节点Y坐标(居中显示)
|
||||||
|
if (i == 1 && count == 1) {
|
||||||
|
standardChannelGroups.push({
|
||||||
|
deviceId,
|
||||||
|
centerY: yPosition2.value - 25
|
||||||
|
})
|
||||||
|
} else if (i == 2 && count == 2) {
|
||||||
|
standardChannelGroups.push({
|
||||||
|
deviceId,
|
||||||
|
centerY: yPosition2.value - 50
|
||||||
|
})
|
||||||
|
} else if (i == 3 && count == 3) {
|
||||||
|
standardChannelGroups.push({
|
||||||
|
deviceId,
|
||||||
|
centerY: yPosition2.value - 100
|
||||||
|
})
|
||||||
|
} else if (i == 4 && count == 4) {
|
||||||
|
standardChannelGroups.push({
|
||||||
|
deviceId,
|
||||||
|
centerY: yPosition2.value - 100
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
yPosition2.value += 50
|
||||||
|
}
|
||||||
|
yPosition2.value += 50
|
||||||
|
})
|
||||||
|
|
||||||
|
// 添加被检设备
|
||||||
|
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) },
|
||||||
|
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) {
|
||||||
|
newNodes.push({
|
||||||
|
id: device.id,
|
||||||
|
data: { label: createLabel(device.name, device.deviceType) },
|
||||||
|
position: { x: standardWidth, y: centerY },
|
||||||
|
class: 'no-handle-node',
|
||||||
|
style: { width: '200px', border: 'none', boxShadow: 'none' }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
//页面高度取决于设备通道
|
||||||
|
dialogHeight.value = Math.max(yPosition.value, yPosition2.value)
|
||||||
|
|
||||||
|
return newNodes
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ open, handleNext })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.flow-container {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-flow__node.no-handle-node .vue-flow__handle {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -17,7 +17,11 @@
|
|||||||
process-status="finish"
|
process-status="finish"
|
||||||
finish-status="success"
|
finish-status="success"
|
||||||
>
|
>
|
||||||
<!-- <el-step title="通道配对" /> -->
|
<el-step
|
||||||
|
title="通道配对"
|
||||||
|
:icon="stepsActive > 0 || stepsActiveIndex > stepsTotalNum - 1 ? SuccessFilled : Switch"
|
||||||
|
@click="handleStepClick(0)"
|
||||||
|
/>
|
||||||
<el-step
|
<el-step
|
||||||
v-if="preTestSelected"
|
v-if="preTestSelected"
|
||||||
title="预检测"
|
title="预检测"
|
||||||
@@ -34,7 +38,11 @@
|
|||||||
<el-step title="检测完成" :icon="stepsActiveIndex > stepsTotalNum - 1 ? SuccessFilled : Key" />
|
<el-step title="检测完成" :icon="stepsActiveIndex > stepsTotalNum - 1 ? SuccessFilled : Key" />
|
||||||
</el-steps>
|
</el-steps>
|
||||||
</div>
|
</div>
|
||||||
|
<keep-alive>
|
||||||
|
<ChannelPairing v-if="stepsActiveView == 0" ref="channelPairingRef" :devIdList="prop.devIdList"
|
||||||
|
:pqStandardDevList="prop.pqStandardDevList"
|
||||||
|
:planIdKey="prop.planIdKey" />
|
||||||
|
</keep-alive>
|
||||||
<keep-alive>
|
<keep-alive>
|
||||||
<ComparePreTest
|
<ComparePreTest
|
||||||
v-if="preTestSelected && stepsActiveView == 1"
|
v-if="preTestSelected && stepsActiveView == 1"
|
||||||
@@ -126,7 +134,7 @@ import {
|
|||||||
Coin,
|
Coin,
|
||||||
Edit,
|
Edit,
|
||||||
Key,
|
Key,
|
||||||
Odometer,
|
Switch,
|
||||||
Refresh,
|
Refresh,
|
||||||
Right,
|
Right,
|
||||||
SuccessFilled,
|
SuccessFilled,
|
||||||
@@ -135,23 +143,24 @@ import {
|
|||||||
VideoPlay
|
VideoPlay
|
||||||
} from '@element-plus/icons-vue'
|
} from '@element-plus/icons-vue'
|
||||||
import ComparePreTest from './comparePreTest.vue'
|
import ComparePreTest from './comparePreTest.vue'
|
||||||
|
import ChannelPairing from './channelPairing.vue'
|
||||||
|
import { Device } from '@/api/device/interface/device'
|
||||||
import CompareTest from './compareTest.vue'
|
import CompareTest from './compareTest.vue'
|
||||||
import socketClient from '@/utils/webSocketClient'
|
import socketClient from '@/utils/webSocketClient'
|
||||||
import { useCheckStore } from '@/stores/modules/check'
|
import { useCheckStore } from '@/stores/modules/check'
|
||||||
import { pauseTest, resumeTest, startPreTest, contrastTest } from '@/api/socket/socket'
|
import { pauseTest, resumeTest, startPreTest, contrastTest } from '@/api/socket/socket'
|
||||||
import { useUserStore } from '@/stores/modules/user'
|
import { useUserStore } from '@/stores/modules/user'
|
||||||
import { JwtUtil } from '@/utils/jwtUtil'
|
import { JwtUtil } from '@/utils/jwtUtil'
|
||||||
// import {JwtUtil} from "@/utils/check";
|
import { StandardDevice } from '@/api/device/interface/standardDevice'
|
||||||
|
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
const checkStore = useCheckStore()
|
const checkStore = useCheckStore()
|
||||||
|
|
||||||
const nextStepText = ref('下一步')
|
const nextStepText = ref('下一步')
|
||||||
const dialogVisible = ref(false)
|
const dialogVisible = ref(false)
|
||||||
|
const channelPairingRef = ref()
|
||||||
const showSteps = ref(false)
|
const showSteps = ref(false)
|
||||||
const stepsTotalNum = ref(-1) //步骤总数
|
const stepsTotalNum = ref(-1) //步骤总数
|
||||||
const stepsActiveIndex = ref(1) //当前正在执行的步骤索引
|
const stepsActiveIndex = ref(0) //当前正在执行的步骤索引
|
||||||
const stepsActiveView = ref(1) //当前正在执行的步骤在(预处理、守时校验、系数校准、正式检测)中的排序,仅用于页面显示
|
const stepsActiveView = ref(1) //当前正在执行的步骤在(预处理、守时校验、系数校准、正式检测)中的排序,仅用于页面显示
|
||||||
const stepsActive = ref(-1) //当前正在执行的步骤在(预处理、守时校验、系数校准、正式检测)中的排序,实际记录步骤的状态,用于切换步骤
|
const stepsActive = ref(-1) //当前正在执行的步骤在(预处理、守时校验、系数校准、正式检测)中的排序,实际记录步骤的状态,用于切换步骤
|
||||||
const ActiveStatue = ref('waiting') //当前步骤状态
|
const ActiveStatue = ref('waiting') //当前步骤状态
|
||||||
@@ -164,6 +173,20 @@ const showComponent = ref(true)
|
|||||||
const preTestRef = ref<InstanceType<typeof ComparePreTest> | null>(null)
|
const preTestRef = ref<InstanceType<typeof ComparePreTest> | null>(null)
|
||||||
const testRef: any = ref(null)
|
const testRef: any = ref(null)
|
||||||
|
|
||||||
|
const prop = defineProps({
|
||||||
|
devIdList: {
|
||||||
|
type: Array as any,
|
||||||
|
default: []
|
||||||
|
},
|
||||||
|
pqStandardDevList: {
|
||||||
|
type: Array as any,
|
||||||
|
default: []
|
||||||
|
},
|
||||||
|
planIdKey: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
})
|
||||||
const dataSocket = reactive({
|
const dataSocket = reactive({
|
||||||
socketServe: socketClient.Instance
|
socketServe: socketClient.Instance
|
||||||
})
|
})
|
||||||
@@ -178,7 +201,7 @@ const initOperate = () => {
|
|||||||
|
|
||||||
TestStatus.value = 'waiting'
|
TestStatus.value = 'waiting'
|
||||||
|
|
||||||
stepsActiveIndex.value = 1
|
stepsActiveIndex.value = 0
|
||||||
showComponent.value = true
|
showComponent.value = true
|
||||||
// 初始化勾选的检测内容
|
// 初始化勾选的检测内容
|
||||||
preTestSelected.value = checkStore.selectTestItems.preTest
|
preTestSelected.value = checkStore.selectTestItems.preTest
|
||||||
@@ -193,13 +216,13 @@ const initOperate = () => {
|
|||||||
stepsTotalNum.value = count + 1
|
stepsTotalNum.value = count + 1
|
||||||
|
|
||||||
if (preTestSelected.value) {
|
if (preTestSelected.value) {
|
||||||
stepsActiveView.value = 1
|
stepsActiveView.value = 0
|
||||||
stepsActive.value = 1
|
stepsActive.value = 0
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (testSelected.value) {
|
if (testSelected.value) {
|
||||||
stepsActiveView.value = 2
|
stepsActiveView.value = 0
|
||||||
stepsActive.value = 2
|
stepsActive.value = 0
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -224,6 +247,7 @@ const open = async (
|
|||||||
if (checkStore.selectTestItems.preTest && !checkStore.selectTestItems.test) {
|
if (checkStore.selectTestItems.preTest && !checkStore.selectTestItems.test) {
|
||||||
testAgain.value = true
|
testAgain.value = true
|
||||||
}
|
}
|
||||||
|
dialogTitle.value = title
|
||||||
channelMapping.value = mapping
|
channelMapping.value = mapping
|
||||||
planId.value = plan
|
planId.value = plan
|
||||||
loginName.value = login
|
loginName.value = login
|
||||||
@@ -259,12 +283,6 @@ const open = async (
|
|||||||
|
|
||||||
//预检测-重新检测
|
//预检测-重新检测
|
||||||
const handleSubmitAgain = async () => {
|
const handleSubmitAgain = async () => {
|
||||||
console.log(
|
|
||||||
'🚀 ~ handleSubmitAgain ~ stepsActive.value:',
|
|
||||||
stepsActiveIndex.value,
|
|
||||||
stepsActiveView.value,
|
|
||||||
stepsActive.value
|
|
||||||
)
|
|
||||||
if (checkStore.selectTestItems.preTest) {
|
if (checkStore.selectTestItems.preTest) {
|
||||||
stepsActiveIndex.value = 1
|
stepsActiveIndex.value = 1
|
||||||
stepsActiveView.value = 1
|
stepsActiveView.value = 1
|
||||||
@@ -311,10 +329,31 @@ const handleSubmitAgain = async () => {
|
|||||||
|
|
||||||
//开始检测
|
//开始检测
|
||||||
const handleSubmitFast = async () => {
|
const handleSubmitFast = async () => {
|
||||||
|
if (channelPairingRef.value) {
|
||||||
|
const res = await channelPairingRef.value.handleNext()
|
||||||
|
console.log('🚀 ~ handleSubmitFast ~ res:', res)
|
||||||
|
if (!res) return
|
||||||
|
dialogTitle.value = res.title
|
||||||
|
channelMapping.value = res.mapping
|
||||||
|
planId.value = res.plan
|
||||||
|
loginName.value = res.login
|
||||||
|
devIds.value = res.devIdsArray
|
||||||
|
standardDevIds.value = res.standardDevIdsArray
|
||||||
|
pairs.value = res.pair
|
||||||
|
}
|
||||||
if (!dataSocket.socketServe.connected) {
|
if (!dataSocket.socketServe.connected) {
|
||||||
ElMessage.error('webSocket连接中断!')
|
ElMessage.error('webSocket连接中断!')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
if (checkStore.selectTestItems.preTest) {
|
||||||
|
stepsActiveIndex.value = 1
|
||||||
|
stepsActiveView.value = 1
|
||||||
|
stepsActive.value = 1
|
||||||
|
} else {
|
||||||
|
stepsActiveIndex.value = 1
|
||||||
|
stepsActiveView.value = 2
|
||||||
|
stepsActive.value = 2
|
||||||
|
}
|
||||||
|
|
||||||
switch (stepsActive.value) {
|
switch (stepsActive.value) {
|
||||||
case 1:
|
case 1:
|
||||||
@@ -534,6 +573,8 @@ const nextStep = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleStepClick = (step: number) => {
|
const handleStepClick = (step: number) => {
|
||||||
|
console.log('🚀 ~ handleStepClick ~ step > stepsActive.value:', step, stepsActive.value)
|
||||||
|
|
||||||
if (step > stepsActive.value) {
|
if (step > stepsActive.value) {
|
||||||
return
|
return
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -1,11 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog title="设备通道配对" v-model="dialogVisible" v-bind="dialogBig">
|
<!-- <el-dialog title="设备通道配对" v-model="dialogVisible" v-bind="dialogBig">
|
||||||
<div
|
<div
|
||||||
class="flow-container"
|
class="flow-container"
|
||||||
style="overflow: hidden; position: relative"
|
style="overflow: hidden; position: relative"
|
||||||
:style="{ height: dialogHeight + 'px' }"
|
:style="{ height: dialogHeight + 'px' }"
|
||||||
>
|
>
|
||||||
<!-- <el-button @click="logConnections">打印当前配对</el-button> -->
|
|
||||||
<VueFlow
|
<VueFlow
|
||||||
:nodes="nodes"
|
:nodes="nodes"
|
||||||
:edges="edges"
|
:edges="edges"
|
||||||
@@ -29,18 +28,25 @@
|
|||||||
></VueFlow>
|
></VueFlow>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 底部操作按钮 -->
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="dialog-footer">
|
<div class="dialog-footer">
|
||||||
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
<el-button type="primary" @click="handleNext">下一步</el-button>
|
<el-button type="primary" @click="handleNext">下一步</el-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog> -->
|
||||||
|
<!-- devIdList.value
|
||||||
|
pqStandardDevList.value
|
||||||
|
planIdKey.value -->
|
||||||
<!-- 手动检测-勾选检测项弹窗 -->
|
<!-- 手动检测-勾选检测项弹窗 -->
|
||||||
<SelectTestItemPopup ref="selectTestItemPopupRef" @openTestDialog="openTestDialog"></SelectTestItemPopup>
|
<SelectTestItemPopup ref="selectTestItemPopupRef" @openTestDialog="openTestDialog"></SelectTestItemPopup>
|
||||||
<CompareTestPopup ref="testPopup" v-if="CompareTestVisible"></CompareTestPopup>
|
<CompareTestPopup
|
||||||
|
ref="testPopup"
|
||||||
|
v-if="CompareTestVisible"
|
||||||
|
:devIdList="devIdList"
|
||||||
|
:pqStandardDevList="pqStandardDevList"
|
||||||
|
:planIdKey="planIdKey"
|
||||||
|
></CompareTestPopup>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
@@ -192,20 +198,32 @@ const nodes = ref([])
|
|||||||
const planId = ref('')
|
const planId = ref('')
|
||||||
const devIds = ref<string[]>()
|
const devIds = ref<string[]>()
|
||||||
const standardDevIds = ref<string[]>()
|
const standardDevIds = ref<string[]>()
|
||||||
|
const devIdList = ref<Device.ResPqDev[]>([])
|
||||||
|
const pqStandardDevList = ref<StandardDevice.ResPqStandardDevice[]>([])
|
||||||
|
const planIdKey = ref<string>('')
|
||||||
const open = async (
|
const open = async (
|
||||||
device: Device.ResPqDev[],
|
device: Device.ResPqDev[],
|
||||||
standardDev: StandardDevice.ResPqStandardDevice[],
|
standardDev: StandardDevice.ResPqStandardDevice[],
|
||||||
fatherPlanId: string
|
fatherPlanId: string
|
||||||
) => {
|
) => {
|
||||||
console.log('device:', device)
|
selectTestItemPopupRef.value?.open()
|
||||||
edges.value = []
|
devIdList.value = device
|
||||||
devIds.value = device.map(d => d.id)
|
pqStandardDevList.value = standardDev
|
||||||
standardDevIds.value = standardDev.map(d => d.id)
|
planIdKey.value = fatherPlanId
|
||||||
planId.value = fatherPlanId
|
// edges.value = []
|
||||||
nodes.value = createNodes(device, standardDev)
|
|
||||||
dialogVisible.value = true
|
// devIds.value = device.map(d => d.id)
|
||||||
onPaneReady()
|
// standardDevIds.value = standardDev.map(d => d.id)
|
||||||
|
// planId.value = fatherPlanId
|
||||||
|
// nodes.value = createNodes(device, standardDev)
|
||||||
|
// edges.value = []
|
||||||
|
|
||||||
|
// devIds.value = device.map(d => d.id)
|
||||||
|
// standardDevIds.value = standardDev.map(d => d.id)
|
||||||
|
// planId.value = fatherPlanId
|
||||||
|
// nodes.value = createNodes(device, standardDev)
|
||||||
|
// dialogVisible.value = true
|
||||||
|
// onPaneReady()
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleNext = async () => {
|
const handleNext = async () => {
|
||||||
|
|||||||
@@ -778,6 +778,9 @@ const handleTest2 = async () => {
|
|||||||
const deviceNames = inconsistentPointDevices.map(d => d.name).join(', ')
|
const deviceNames = inconsistentPointDevices.map(d => d.name).join(', ')
|
||||||
ElMessage.warning(`以下设备存在通道未绑定监测点: ${deviceNames}`)
|
ElMessage.warning(`以下设备存在通道未绑定监测点: ${deviceNames}`)
|
||||||
}
|
}
|
||||||
|
console.log("🚀 ~ handleTest2 ~ filteredChannelsSelection, pqStandardDevList.value, props.id:", filteredChannelsSelection, )
|
||||||
|
console.log("🚀 ~ handleTest2 ~ filteredChannelsSelection, pqStandardDevList.value, props.id:", pqStandardDevList.value, )
|
||||||
|
console.log("🚀 ~ handleTest2 ~ filteredChannelsSelection, pqStandardDevList.value, props.id:", props.id)
|
||||||
|
|
||||||
// 只传递有监测点的设备
|
// 只传递有监测点的设备
|
||||||
deviceConnectionPopupRef.value?.open(filteredChannelsSelection, pqStandardDevList.value, props.id)
|
deviceConnectionPopupRef.value?.open(filteredChannelsSelection, pqStandardDevList.value, props.id)
|
||||||
@@ -1011,11 +1014,12 @@ const openDrawer = async (title: string, row: any) => {
|
|||||||
}
|
}
|
||||||
if (title === '误差体系更换') {
|
if (title === '误差体系更换') {
|
||||||
checkStore.setShowDetailType(1)
|
checkStore.setShowDetailType(1)
|
||||||
if (modeStore.currentMode == '模拟式') {
|
if (modeStore.currentMode == '模拟式') {
|
||||||
dataCheckPopupRef.value?.open(row.id, '-1', null)
|
dataCheckPopupRef.value?.open(row.id, '-1', null)
|
||||||
} else if (modeStore.currentMode == '比对式') {
|
} else if (modeStore.currentMode == '比对式') {
|
||||||
dataCheckSingleChannelSingleTestPopupRef.value?.open(row, null, row.id, 2)
|
dataCheckSingleChannelSingleTestPopupRef.value?.open(row, null, row.id, 2)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (title === '归档') {
|
if (title === '归档') {
|
||||||
|
|||||||
Reference in New Issue
Block a user