修改通道配对布局

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>
 
         <!-- 底部操作按钮 -->
@@ -226,7 +211,7 @@ const open = async () => {
     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,prop.deviceMonitor)
+    nodes.value = createNodes(prop.devIdList, prop.pqStandardDevList, prop.deviceMonitor)
     dialogVisible.value = true
     onPaneReady()
 }
@@ -356,7 +341,7 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
     device.forEach(device => {
         channelCounts[device.id] = device.devChns || 0
     })
-    
+
     const inspectionDevices = device.map(d => ({
         id: d.id,
         name: d.name,
@@ -387,13 +372,23 @@ 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]) => {
         // 从deviceMonitor中获取实际通道信息
         let actualChannels = []; // 存储实际的通道号
-        
+
         // 如果deviceMonitor中有该设备的数据，则使用实际监测点信息
         if (deviceMonitor.has(deviceId)) {
             const monitorPoints = deviceMonitor.get(deviceId) || [];
@@ -402,9 +397,9 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
             //console.log('deviceId', deviceId, '实际通道号:', actualChannels, '监测点:', monitorPoints);
         } else {
             // 如果没有monitor数据，默认使用连续的通道号
-            actualChannels = Array.from({length: count}, (_, i) => i + 1);
+            actualChannels = Array.from({ length: count }, (_, i) => i + 1);
         }
-        
+
         const yPosition = currentYPosition;
         // 遍历实际通道号而不是连续的数字
         actualChannels.forEach((channelNum, index) => {
@@ -417,25 +412,32 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
                 sourcePosition: 'right',
                 style: { width: '120px', border: 'none', boxShadow: 'none' }
             });
-            
+
             deviceChannelGroups.push({
                 deviceId,
-                centerY: 0 
+                centerY: 0
             });
         });
-        
+
         // 更新currentYPosition，为下一台设备留出空间
         // 每台设备需要的空间 = 实际通道数 * 50 + 设备间距
         currentYPosition += actualChannels.length * 50 + deviceSpacing;
     });
 
     // 添加标准通道
-    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]) => {
         const yPosition2 = currentYPosition2;
-        
+
         for (let i = 1; i <= count; i++) {
             const channelId = `标准通道-${deviceId}-${i}`;
             newNodes.push({
@@ -452,13 +454,27 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
                 centerY: 0
             });
         }
-        
+
         // 更新currentYPosition2，为下一台标准设备留出空间
         currentYPosition2 += count * 50 + standardDeviceSpacing;
     });
 
-   // 添加被检设备
+
-    let deviceCurrentYPosition = 50; // 与通道计算保持一致的初始位置
+
+    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 = (vueFlowElement.value - 125 * conditionCount) / 2;;  // 与通道计算保持一致的初始位置
     let lastDeviceId = ''; // 记录上一个处理的设备ID
 
     deviceChannelGroups.forEach(({ deviceId, centerY }) => {
@@ -468,16 +484,15 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
             if (lastDeviceId !== deviceId) {
                 // 计算该设备对应的实际通道数量
                 let actualChannelCount = channelCounts[deviceId] || 0;
-                
+
                 // 如果deviceMonitor中有该设备的数据，则使用实际监测点数量
                 if (deviceMonitor.has(deviceId)) {
                     const monitorPoints = deviceMonitor.get(deviceId) || [];
                     actualChannelCount = monitorPoints.length;
                 }
-                
+
                 // 计算设备高度居中位置 - 基于该设备组的实际位置
                 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) },
@@ -485,7 +500,7 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
                     class: 'no-handle-node',
                     style: { width: '300px', border: 'none', boxShadow: 'none' }
                 })
-                
+
                 // 更新位置为下一台设备的起始位置
                 deviceCurrentYPosition += actualChannelCount * 50 + 30
                 // 更新上一个设备ID
@@ -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 }) => {
@@ -514,7 +545,7 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
                     class: 'no-handle-node',
                     style: { width: '300px', border: 'none', boxShadow: 'none' }
                 })
-                
+
                 // 更新位置为下一台标准设备的起始位置
                 standardDeviceCurrentYPosition += channelCount * 50 + 30
                 // 更新上一个标准设备ID