ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改通道配对布局

Browse Source
This commit is contained in:
guanj
2025-09-22 15:26:13 +08:00
parent 24d83cfd39
commit dbc21cdbfa
1 changed files with 74 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
frontend/src/views/home/components/channelPairing.vue
View File

@@ -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
: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"
: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>
<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"
: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