修改通道配对布局

frontend/src/views/home/components/channelPairing.vue

@@ -1,29 +1,14 @@
 <template>
     <div>
-        <div class="flow-container" style="overflow: hidden; position: relative" :style="{ height: 442 + 'px' }">
+        <div class="flow-container" style="overflow: hidden; position: relative"
+            :style="{ height: vueFlowElement + 'px' }">
             <!-- <el-button @click="logConnections">打印当前配对</el-button>  -->
-            <VueFlow
+            <VueFlow :nodes="nodes" :edges="edges" :connection-radius="30" :nodes-draggable="false" :dragging="false"
-                :nodes="nodes"
+                :zoom-on-scroll="false" :pan-on-drag="false" :disable-zoom-pan-on-connect="true"
-                :edges="edges"
+                :prevent-scrolling="true" :fit-view="true" :min-zoom="1" :max-zoom="1"
-                :connection-radius="30"
+                :nodesConnectable="checkStore.nodesConnectable" :elements-selectable="false" auto-connect
-                :nodes-draggable="false"
+                @connect="handleConnect" @connect-start="handleConnectStart" @connect-end="handleConnectEnd"
-                :dragging="false"
+                @pane-ready="onPaneReady" v-on:pane-mouse-move="false"></VueFlow>
-                :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"
-                :nodesConnectable="checkStore.nodesConnectable"
-                :elements-selectable="false"
-                auto-connect
-                @connect="handleConnect"
-                @connect-start="handleConnectStart"
-                @connect-end="handleConnectEnd"
-                @pane-ready="onPaneReady"
-                v-on:pane-mouse-move="false"
-            ></VueFlow>
         </div>
 
         <!-- 底部操作按钮 -->
@@ -387,7 +372,17 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
     const standardWidth = 1170
 
     // 添加被检通道
-    let currentYPosition = 50; // 初始Y位置
+    // let currentYPosition = 50; // 初始Y位置
+    let actualChannelsTotalLength = 0;
+
+    for (const [deviceId, count] of Object.entries(channelCounts)) {
+        // 直接计算当前设备的通道数并累加，无需完整构建数组
+        actualChannelsTotalLength += deviceMonitor.has(deviceId)
+            ? (deviceMonitor.get(deviceId) || []).length
+            : count;
+    }
+
+    let currentYPosition = (vueFlowElement.value - 60 * actualChannelsTotalLength) / 2; // 初始Y位置
     const deviceSpacing = 30; // 设备间的垂直间距
 
     Object.entries(channelCounts).forEach(([deviceId, count]) => {
@@ -430,7 +425,14 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
     });
 
     // 添加标准通道
-    let currentYPosition2 = 50; // 初始Y位置
+    // let currentYPosition2 = 50; // 初始Y位置
+    let totalCount = 0;
+    // 遍历所有条目并累加 count 值
+    Object.entries(channelCounts2).forEach(([deviceId, count]) => {
+        totalCount += count;
+    });
+
+    let currentYPosition2 = (vueFlowElement.value - 60 * totalCount) / 2; // 初始Y位置; // 初始Y位置
     const standardDeviceSpacing = 30; // 标准设备间的垂直间距
 
     Object.entries(channelCounts2).forEach(([deviceId, count]) => {
@@ -457,8 +459,22 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
         currentYPosition2 += count * 50 + standardDeviceSpacing;
     });
 
+
+
+    let conditionCount = 0;
+    let Key;
+    // 提前创建设备ID集合，优化查找性能
+    const validDeviceIds = new Set(inspectionDevices.map(d => d.id));
+    for (const { deviceId } of deviceChannelGroups) {
+        if (validDeviceIds.has(deviceId) && Key !== deviceId) {
+            conditionCount++;
+            Key = deviceId;
+        }
+    }
+
     // 添加被检设备
-    let deviceCurrentYPosition = 50; // 与通道计算保持一致的初始位置
+    // let deviceCurrentYPosition = 50; // 与通道计算保持一致的初始位置
+    let deviceCurrentYPosition = (vueFlowElement.value - 125 * conditionCount) / 2;;  // 与通道计算保持一致的初始位置
     let lastDeviceId = ''; // 记录上一个处理的设备ID
 
     deviceChannelGroups.forEach(({ deviceId, centerY }) => {
@@ -477,7 +493,6 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
 
                 // 计算设备高度居中位置 - 基于该设备组的实际位置
                 const deviceCenterY = deviceCurrentYPosition + (actualChannelCount * 50) / 2 - 50
-                console.log('deviceCenterY', deviceId, deviceCenterY)
                 newNodes.push({
                     id: device.id,
                     data: { label: createLabel(device.name, device.deviceType, 1) },
@@ -494,8 +509,24 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
         }
     })
 
+
+
+
+
+    let lastStandardDeviceKey = '';
+    let channelCount = 0;
+    const validDeviceKey = new Set(standardDevices.map(d => d.id)); // 提前构建有效ID集合
+
+    standardChannelGroups.forEach(({ deviceId }) => {
+        if (validDeviceKey.has(deviceId) && lastStandardDeviceKey !== deviceId) {
+            channelCount++;
+            lastStandardDeviceKey = deviceId;
+        }
+    });
+
     // 添加标准设备
-    let standardDeviceCurrentYPosition = 50; // 与标准通道计算保持一致的初始位置
+    // let standardDeviceCurrentYPosition = 50; // 与标准通道计算保持一致的初始位置
+    let standardDeviceCurrentYPosition = (vueFlowElement.value - 125 * channelCount) / 2;; // 与标准通道计算保持一致的初始位置
     let lastStandardDeviceId = ''; // 记录上一个处理的标准设备ID
 
     standardChannelGroups.forEach(({ deviceId, centerY }) => {