pqs-9100_client/frontend/src/views/home/components/channelPairing.vue

<template>
    <div>
        <div class="flow-container" style="overflow: hidden; position: relative" :style="{ height: 442 + '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>
        </div>

        <!-- 底部操作按钮 -->
        <!-- <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleNext">下一步</el-button>
            </div>
        </template> -->
        <!-- 手动检测-勾选检测项弹窗 -->
        <!-- <SelectTestItemPopup ref="selectTestItemPopupRef" @openTestDialog="openTestDialog"></SelectTestItemPopup> -->
    </div>
</template>

<script lang="ts" setup>
import { h, ref, onMounted } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { dialogBig } from '@/utils/elementBind'
import { Platform, Flag } from '@element-plus/icons-vue'
import { Device } from '@/api/device/interface/device'
import { StandardDevice } from '@/api/device/interface/standardDevice'
import SelectTestItemPopup from '@/views/home/components/selectTestItemPopup.vue'
import { ElMessage, stepProps } from 'element-plus'
import CustomEdge from './RemoveableEdge.vue' // 导入自定义连接线组件
import { jwtUtil } from '@/utils/jwtUtil'
import { useCheckStore } from '@/stores/modules/check'

const checkStore = useCheckStore()
const dialogVisible = ref(false)
const selectTestItemPopupRef = ref<InstanceType<typeof SelectTestItemPopup>>()
const testPopup = ref()
const dialogTitle = ref('手动检测')
const prop = defineProps({
    devIdList: {
        type: Array as any,
        default: []
    },
    pqStandardDevList: {
        type: Array as any,
        default: []
    },
    planIdKey: {
        type: String,
        default: ''
    },

})
// 计算对话框高度
const dialogHeight = ref(600)

// 初始化 VueFlow，注册自定义连线类型
const { edges, setViewport } = useVueFlow({
    edgeTypes: {
        default: CustomEdge
    }
})

// 初始化时锁定画布位置
const onPaneReady = () => {
    setViewport({ x: 0, y: 0, zoom: 1 })
}

// 提取公共的label渲染函数
const createLabel = (text: string, type: string) => {
    return h(
        'div',
        {
            style: {
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                fontSize: '15px',
                // textAlign: 'center',
                border: '1px solid #ccc',
                borderRadius: '8px',
                padding: '8px',
                backgroundColor: '#f9f9f9'
            }
        },
        [
            h(Platform, {
                style: {
                    width: '20px',
                    marginBottom: '4px',
                    color: '#526ade'
                }
            }),
            h('div', { style: { textAlign: 'left' } }, ['设备名称：' + text, h('br'), '设备类型：' + type])
            // h('div', null, '设备名称：' + text),
            // h('div', null, '设备类型：' + type)
        ]
    ) as any
}

const createLabel3 = (text: string) => {
    return h(
        'div',
        {
            style: {
                display: 'flex',
                alignItems: 'center',
                fontSize: '15px',
                textAlign: 'center',
                border: '1px solid #ccc',
                borderRadius: '8px',
                padding: '8px',
                backgroundColor: '#f9f9f9'
            }
        },
        [
            h(Flag, {
                style: {
                    width: '20px',
                    marginRight: '4px',
                    color: '#526ade'
                }
            }),
            text
        ]
    ) as any
}

const handleConnectStart = (params: any) => {
    onPaneReady()
}

const handleConnectEnd = (params: any) => {
    onPaneReady()
}

const handleConnect = (params: any) => {
    console.log('连接信息:', params)
    const sourceNode = nodes.value.find(node => node.id === params.source)
    const targetNode = nodes.value.find(node => node.id === params.target)

    // 连接规则验证
    const isValidConnection = sourceNode?.type === 'input' && targetNode?.type === 'output'

    if (!isValidConnection) {
        removeEdge(params)
        ElMessage.warning('只能从被检通道连接到标准通道')
        return
    }

    // 过滤掉当前连接，检查是否还有重复的
    const existingEdges = edges.value.filter(edge => edge.source === params.source || edge.target === params.target)

    // 如果同源或同目标的连接超过1个，说明有重复
    if (existingEdges.length > 1) {
        const duplicateSource = existingEdges.filter(edge => edge.source === params.source).length > 1
        const duplicateTarget = existingEdges.filter(edge => edge.target === params.target).length > 1

        if (duplicateSource) {
            removeEdge(params)
            ElMessage.warning('该被检通道已经连接，不能重复连接')
            return
        }

        if (duplicateTarget) {
            removeEdge(params)
            ElMessage.warning('该标准通道已经连接，不能重复连接')
            return
        }
    }
}

// 删除不合法连接
const removeEdge = (params: any) => {
    const edgeIndex = edges.value.findIndex(edge => edge.source === params.source && edge.target === params.target)
    if (edgeIndex !== -1) {
        edges.value.splice(edgeIndex, 1)
    }
}

const nodes = ref([])
const planId = ref('')
const devIds = ref<string[]>()
const standardDevIds = ref<string[]>()

const open = async () => {
    edges.value = []
    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)
    dialogVisible.value = true
    onPaneReady()
}

onMounted(() => {
    open()
})
const handleNext = async () => {
    if (edges.value.length === 0) {
        ElMessage.warning('请先完成通道配对')
        return false
    }
    // const sourceKey = edge.source.replace('被检通道-', '').replace('-', '_');
    let chnNumList: string[] = []
    await edges.value.forEach(edge => {
        const match = edge.source.split('-')

        if (match) {
            chnNumList.push(match[2])
        }
    })
    const connections = edges.value.reduce(
        (map, edge) => {
            // 从source中提取设备ID和通道号: 被检通道-{deviceId}-{channelNum} => {deviceId}-{channelNum}
            const sourceKey = edge.source.replace('被检通道-', '').replace('-', '_')

            // 从target中提取设备ID和通道号: 标准通道-{deviceId}-{channelNum} => {deviceId}-{channelNum}
            const targetValue = edge.target.replace('标准通道-', '').replace('-', '_')

            map[sourceKey] = targetValue
            return map
        },
        {} as Record<string, string>
    )
    await generateChannelMapping()
    await checkStore.setChnNum(chnNumList)
    return {
        title: dialogTitle.value,
        mapping: channelMapping.value,
        plan: planId.value,
        login: jwtUtil.getLoginName(),
        devIdsArray: devIds.value,
        standardDevIdsArray: standardDevIds.value,
        pair: connections
    }
}

const openTestDialog = async () => {
    // 转换连接信息，只保留设备ID和通道号
    const connections = edges.value.reduce(
        (map, edge) => {
            // 从source中提取设备ID和通道号: 被检通道-{deviceId}-{channelNum} => {deviceId}-{channelNum}
            const sourceKey = edge.source.replace('被检通道-', '').replace('-', '_')

            // 从target中提取设备ID和通道号: 标准通道-{deviceId}-{channelNum} => {deviceId}-{channelNum}
            const targetValue = edge.target.replace('标准通道-', '').replace('-', '_')

            map[sourceKey] = targetValue
            return map
        },
        {} as Record<string, string>
    )

    generateChannelMapping()

    setTimeout(() => {
        testPopup.value?.open(
            dialogTitle.value,
            channelMapping.value,
            planId.value,
            jwtUtil.getLoginName(),
            devIds.value,
            standardDevIds.value,
            connections
        )
    }, 100)
}

// 转换 edges.value 为 channelMapping 格式
const channelMapping = ref<Record<string, Record<string, string>>>({})

// 生成映射关系的方法
const generateChannelMapping = () => {
    const mapping: Record<string, Record<string, string>> = {}

    edges.value.forEach(edge => {
        // 解析 source 节点信息（被检通道）
        const sourceParts = edge.source.split('-')
        const sourceDeviceId = sourceParts[1]
        const sourceChannel = sourceParts[2]

        // 解析 target 节点信息（标准通道）
        const targetParts = edge.target.split('-')
        const targetDeviceId = targetParts[1]
        const targetChannel = targetParts[2]

        // 查找对应的节点以获取显示名称
        const sourceDeviceNode = nodes.value.find(node => node.id === sourceDeviceId)

        const targetDeviceNode = nodes.value.find(node => node.id === targetDeviceId)

        if (sourceDeviceNode && targetDeviceNode) {
            // 提取设备显示文本
            const sourceDeviceText = sourceDeviceNode.data.label.children[1].children[0].children
            const targetDeviceText = targetDeviceNode.data.label.children[1].children[0].children

            // 构造键名 - 现在以标准设备为键
            const targetKey = `${targetDeviceText}`.replace('设备名称：', '')
            const sourceValue = `${sourceDeviceText}通道${sourceChannel}`.replace('设备名称：', '')

            // 初始化对象
            if (!mapping[targetKey]) {
                mapping[targetKey] = {}
            }

            // 添加映射关系 - 标准设备通道 -> 被检设备信息
            mapping[targetKey][`通道${targetChannel}`] = sourceValue
        }
    })

    channelMapping.value = mapping
}

const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResPqStandardDevice[]) => {
    const channelCounts: Record<string, number> = {}
    device.forEach(device => {
        channelCounts[device.id] = device.devChns || 0
    })

    const inspectionDevices = device.map(d => ({
        id: d.id,
        name: d.name,
        type: 'normal',
        deviceType: d.devType
    }))

    const channelCounts2: Record<string, number> = {}
    standardDev.forEach(dev => {
        const channelList = dev.inspectChannel ? dev.inspectChannel.split(',') : []
        channelCounts2[dev.id] = channelList.length
    })

    const standardDevices = standardDev.map(d => ({
        id: d.id,
        name: d.name,
        type: 'normal',
        deviceType: d.devType
    }))

    const newNodes: any[] = []
    const deviceChannelGroups: { deviceId: string; centerY: number }[] = []
    const standardChannelGroups: any[] = []

    const deviceWidth = 100
    const inputChannelX = 350
    const outputChannelX = 1020
    const standardWidth = 1170

    const yPosition = ref(75)
    const yPosition2 = ref(75)

    // 添加被检通道
    Object.entries(channelCounts).forEach(([deviceId, count]) => {
        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 },
                sourcePosition: 'right',

                style: { width: '150px', 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
        }
        yPosition.value += 50
    })

    // 添加标准通道
    Object.entries(channelCounts2).forEach(([deviceId, count]) => {
        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 },
                targetPosition: 'left',
                style: { width: '150px', 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
        }
        yPosition2.value += 50
    })

    // 添加被检设备
    deviceChannelGroups.forEach(({ deviceId, centerY }) => {
        const device = inspectionDevices.find(d => d.id === deviceId)
        if (device) {
            newNodes.push({
                id: device.id,
                data: { label: createLabel(device.name, device.deviceType) },
                position: { x: deviceWidth, y: centerY },
                class: 'no-handle-node',
                style: { width: '250px', border: 'none', boxShadow: 'none' }
            })
        }
    })

    // 添加标准设备
    standardChannelGroups.forEach(({ deviceId, centerY }) => {
        const device = standardDevices.find(d => d.id === deviceId)
        if (device) {
            newNodes.push({
                id: device.id,
                data: { label: createLabel(device.name, device.deviceType) },
                position: { x: standardWidth, y: centerY + 25 },
                class: 'no-handle-node',
                style: { width: '250px', border: 'none', boxShadow: 'none' }
            })
        }
    })

    //页面高度取决于设备通道
    dialogHeight.value = Math.max(yPosition.value, yPosition2.value)

    return newNodes
}

defineExpose({ open, handleNext })
</script>

<style>
.flow-container {
    width: 100%;
    overflow: hidden;
}

.vue-flow__node.no-handle-node .vue-flow__handle {
    display: none !important;
}
</style>