修改 通道配对样式

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<InstanceType<typeof SelectTestItemPopup>>()
@@ -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',
+                    width: '50px',
-                    marginBottom: '4px',
+                    marginRight: '5px'
-                    color: '#526ade'
+                    // 保持原有的颜色风格，如果需要可以调整滤镜
+                    // 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 yPosition = (vueFlowElement.value - Object.keys(channelCounts).length * 50) / 2
-    const yPosition2 = ref(75)
+    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
+                centerY: 0
-                })
-            } 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]) => {
+        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
+                centerY: 0 //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
     })
 
     // 添加被检设备
@@ -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) },
+                data: { label: createLabel(device.name, device.deviceType, 1) },
-                position: { x: deviceWidth, y: centerY },
+                // 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) },
+                data: { label: createLabel(device.name, device.deviceType, 2) },
-                position: { x: standardWidth, y: centerY + 25 },
+                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
 }