diff --git a/frontend/src/assets/images/inspected1.jpg b/frontend/src/assets/images/inspected1.jpg new file mode 100644 index 0000000..42550e3 Binary files /dev/null and b/frontend/src/assets/images/inspected1.jpg differ diff --git a/frontend/src/assets/images/inspected2.png b/frontend/src/assets/images/inspected2.png new file mode 100644 index 0000000..df5bd62 Binary files /dev/null and b/frontend/src/assets/images/inspected2.png differ diff --git a/frontend/src/views/home/components/channelPairing.vue b/frontend/src/views/home/components/channelPairing.vue index a82e2b0..80d4c7d 100644 --- a/frontend/src/views/home/components/channelPairing.vue +++ b/frontend/src/views/home/components/channelPairing.vue @@ -16,7 +16,6 @@ :min-zoom="1" :max-zoom="1" :nodesConnectable="checkStore.nodesConnectable" - :elements-selectable="false" auto-connect @connect="handleConnect" @@ -51,7 +50,7 @@ import { ElMessage, stepProps } from 'element-plus' import CustomEdge from './RemoveableEdge.vue' // 导入自定义连接线组件 import { jwtUtil } from '@/utils/jwtUtil' import { useCheckStore } from '@/stores/modules/check' - +const vueFlowElement = ref(442) const checkStore = useCheckStore() const dialogVisible = ref(false) const selectTestItemPopupRef = ref>() @@ -69,8 +68,7 @@ const prop = defineProps({ planIdKey: { type: String, default: '' - }, - + } }) // 计算对话框高度 const dialogHeight = ref(600) @@ -88,15 +86,16 @@ const onPaneReady = () => { } // 提取公共的label渲染函数 -const createLabel = (text: string, type: string) => { +const createLabel = (text: string, type: string, Key: number) => { return h( 'div', { style: { display: 'flex', - flexDirection: 'column', + // flexDirection: 'column', alignItems: 'center', fontSize: '15px', + height: '75px', // textAlign: 'center', border: '1px solid #ccc', borderRadius: '8px', @@ -105,11 +104,24 @@ const createLabel = (text: string, type: string) => { } }, [ - h(Platform, { + // h(Platform, { + // style: { + // height: '40px', + // marginBottom: '4px', + // color: '#526ade' + // } + // }), + h('img', { + src: + Key == 2 + ? new URL('@/assets/images/inspected1.jpg', import.meta.url).href + : new URL('@/assets/images/inspected2.png', import.meta.url).href, + // alt: '设备图标', style: { - width: '20px', - marginBottom: '4px', - color: '#526ade' + width: '50px', + marginRight: '5px' + // 保持原有的颜色风格，如果需要可以调整滤镜 + // filter: 'invert(35%) sepia(65%) saturate(300%) hue-rotate(210deg)' } }), h('div', { style: { textAlign: 'left' } }, ['设备名称：' + text, h('br'), '设备类型：' + type]) @@ -127,17 +139,18 @@ const createLabel3 = (text: string) => { display: 'flex', alignItems: 'center', fontSize: '15px', + height: '35px', textAlign: 'center', border: '1px solid #ccc', borderRadius: '8px', - padding: '8px', + // padding: '8px', backgroundColor: '#f9f9f9' } }, [ - h(Flag, { + h('div', { style: { - width: '20px', + width: '8px', marginRight: '4px', color: '#526ade' } @@ -363,95 +376,59 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP const deviceChannelGroups: { deviceId: string; centerY: number }[] = [] const standardChannelGroups: any[] = [] - const deviceWidth = 100 + const deviceWidth = 50 const inputChannelX = 350 - const outputChannelX = 1020 + const outputChannelX = 1050 const standardWidth = 1170 - const yPosition = ref(75) - const yPosition2 = ref(75) + const yPosition = (vueFlowElement.value - Object.keys(channelCounts).length * 50) / 2 + const yPosition2 = (vueFlowElement.value - Object.keys(channelCounts2).length * 50) / 2 + // const yPosition = ref(75) + // const yPosition2 = ref(75) // 添加被检通道 Object.entries(channelCounts).forEach(([deviceId, count]) => { + const yPosition = (vueFlowElement.value - count * 52) / 2 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 }, + position: { x: inputChannelX, y: yPosition + (i - 1) * 50 }, + // position: { x: inputChannelX, y: yPosition.value }, sourcePosition: 'right', - style: { width: '150px', border: 'none', boxShadow: 'none' } + style: { width: '120px', 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 + deviceChannelGroups.push({ + deviceId, + centerY: 0 + }) } - yPosition.value += 50 }) // 添加标准通道 Object.entries(channelCounts2).forEach(([deviceId, count]) => { + const yPosition2 = (vueFlowElement.value - count * 52) / 2 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 }, + // position: { x: outputChannelX, y: yPosition2.value }, + position: { x: outputChannelX, y: yPosition2 + (i - 1) * 50 }, targetPosition: 'left', - style: { width: '150px', border: 'none', boxShadow: 'none' } + style: { width: '120px', 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 + standardChannelGroups.push({ + deviceId, + centerY: 0 //yPosition2.value - 25 + }) } - yPosition2.value += 50 }) // 添加被检设备 @@ -460,10 +437,11 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP if (device) { newNodes.push({ id: device.id, - data: { label: createLabel(device.name, device.deviceType) }, - position: { x: deviceWidth, y: centerY }, + data: { label: createLabel(device.name, device.deviceType, 1) }, + // position: { x: deviceWidth, y: centerY }, + position: { x: deviceWidth, y: (vueFlowElement.value - 112) / 2 }, class: 'no-handle-node', - style: { width: '250px', border: 'none', boxShadow: 'none' } + style: { width: '300px', border: 'none', boxShadow: 'none' } }) } }) @@ -474,16 +452,17 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP if (device) { newNodes.push({ id: device.id, - data: { label: createLabel(device.name, device.deviceType) }, - position: { x: standardWidth, y: centerY + 25 }, + data: { label: createLabel(device.name, device.deviceType, 2) }, + position: { x: standardWidth, y: (vueFlowElement.value - 112) / 2 }, + // position: { x: standardWidth, y: centerY + 25 }, class: 'no-handle-node', - style: { width: '250px', border: 'none', boxShadow: 'none' } + style: { width: '300px', border: 'none', boxShadow: 'none' } }) } }) //页面高度取决于设备通道 - dialogHeight.value = Math.max(yPosition.value, yPosition2.value) + // dialogHeight.value = Math.max(yPosition.value, yPosition2.value) return newNodes }