标准设备，比对模式被检设备

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

@@ -0,0 +1,499 @@
+<template>
+  <el-dialog title="设备通道配对" v-model='dialogVisible' v-bind="dialogBig">
+      <div  class="flow-container" style="overflow: hidden; position: relative;">
+          <!-- <el-form  ref='dialogFormRef' :disabled="false" label-width="auto" class="form-two">
+             <el-form-item label='被检设备'  prop='type'>
+                  <el-select v-model="value"  clearable placeholder="被检设备" >
+                    <el-option label="CN88888" :value="2"></el-option>
+                    <el-option label="CN250985" :value="1"></el-option>     
+                    <el-option label="PQS240224008" :value="0"></el-option>                              
+                  </el-select>                           
+              </el-form-item>  
+              <el-form-item label='标准设备'  prop='type' >
+                    <el-select v-model="value"  clearable placeholder="被检设备" >
+                      <el-option label="CN88888" :value="2"></el-option>
+                      <el-option label="CN250985" :value="1"></el-option>     
+                      <el-option label="PQS240224008" :value="0"></el-option>                              
+                    </el-select>                           
+              </el-form-item>   
+          </el-form> -->
+            <!-- <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"
+                auto-connect 
+                @connect="handleConnect"
+                />          
+        </div>
+        
+
+  </el-dialog>
+ 
+</template>
+
+<script lang="ts" setup>
+import { h, ref} from 'vue'
+import { VueFlow, useVueFlow} from '@vue-flow/core'
+import {dialogBig} from "@/utils/elementBind";
+import {Platform,Promotion,Flag} from '@element-plus/icons-vue'
+import { c } from 'vite/dist/node/types.d-aGj9QkWt';
+import { de, el } from 'element-plus/es/locale';
+const dialogVisible = ref(false)
+// 初始化 VueFlow
+const { edges} = useVueFlow()
+
+
+// 提取公共的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', null, '设备名称：'+ text),
+    h('div', null, '设备类型：'+ type)
+   ]) as any
+}
+
+const createLabel2 = (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(Promotion, {
+      style: {
+        width: '20px',
+        marginRight: '4px',
+        color: '#526ade'
+      }
+    }),
+    text
+  ]) 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 nodes2 = ref([
+  {
+    id: '1',
+    data: { label: createLabel('被检设备1') },
+    position: { x: 0, y: 50 },
+    class: 'no-handle-node', // 👈 添加自定义 class
+    style: { width: '200px', border: 'none', boxShadow: 'none' }
+  },
+  {
+    id: '2',
+    data: { label: createLabel('标准设备1') },
+    position: { x: 950, y: 0 },
+    class: 'no-handle-node', // 👈 添加自定义 class
+    style: { width: '200px', border: 'none', boxShadow: 'none'  }
+  },
+
+  {
+    id: '3',
+    data: { label: createLabel('被检设备2') },
+    position: { x: 0, y: 250 },
+    class: 'no-handle-node', // 👈 添加自定义 class
+    style: { width: '200px', border: 'none', boxShadow: 'none' }
+  },
+  {
+    id: '4',
+    data: { label: createLabel('标准设备2') },
+    position: { x: 950, y: 200 },
+    class: 'no-handle-node', // 👈 添加自定义 class
+    style: { width: '200px', border: 'none', boxShadow: 'none'  }
+  },
+
+
+    {
+    id: '5',
+    data: { label: createLabel('被检设备3') },
+    position: { x: 0, y: 425 },
+    class: 'no-handle-node', // 👈 添加自定义 class
+    style: { width: '200px', border: 'none', boxShadow: 'none' }
+  },
+
+
+  {
+    id: '被检通道1',
+    type: 'input',
+    data: { label: createLabel3('被检通道1') },
+    position: { x: 200, y: 0 },
+    sourcePosition: 'right',
+    style: { width: '150px', border: 'none', boxShadow: 'none'  }
+  },
+  {
+    id: '被检通道2',
+    type: 'input',
+    data: { label: createLabel3('被检通道2') },
+    position: { x: 200, y:50 },
+    sourcePosition: 'right',
+    style: { width: '150px', border: 'none', boxShadow: 'none' }
+  },
+  {
+    id: '被检通道3',
+    type: 'input',
+    data: { label: createLabel3('被检通道3') },
+    position: { x: 200, y: 100 },
+    sourcePosition: 'right',
+    style: { width: '150px', border: 'none', boxShadow: 'none' }
+  },
+  {
+    id: '被检通道4',
+    type: 'input',
+    data: { label: createLabel3('被检通道4') },
+    position: { x: 200, y: 150 },
+    sourcePosition: 'right',
+    style: { width: '150px', border: 'none', boxShadow: 'none' }
+  },
+
+    {
+    id: '被检通道5',
+    type: 'input',
+    data: { label: createLabel3('被检通道1') },
+    position: { x: 200, y: 250 },
+    sourcePosition: 'right',
+    style: { width: '150px', border: 'none', boxShadow: 'none'  }
+  },
+  {
+    id: '被检通道6',
+    type: 'input',
+    data: { label: createLabel3('被检通道2') },
+    position: { x: 200, y:300 },
+    sourcePosition: 'right',
+    style: { width: '150px', border: 'none', boxShadow: 'none' }
+  },
+
+
+  {
+    id: '被检通道7',
+    type: 'input',
+    data: { label: createLabel3('被检通道1') },
+    position: { x: 200, y:400 },
+    sourcePosition: 'right',
+    style: { width: '150px', border: 'none', boxShadow: 'none' }
+  },
+  {
+    id: '被检通道8',
+    type: 'input',
+    data: { label: createLabel3('被检通道2') },
+    position: { x: 200, y:450 },
+    sourcePosition: 'right',
+    style: { width: '150px', border: 'none', boxShadow: 'none' }
+  },
+    {
+    id: '被检通道9',
+    type: 'input',
+    data: { label: createLabel3('被检通道3') },
+    position: { x: 200, y:500 },
+    sourcePosition: 'right',
+    style: { width: '150px', border: 'none', boxShadow: 'none' }
+  },
+
+
+  {
+    id: '标准通道1',
+    type: 'output',
+    data: { label: createLabel2('标准通道1') },
+    position: { x: 800, y: 0 },
+    targetPosition: 'left',
+    style: { width: '150px', border: 'none', boxShadow: 'none' }
+  },
+  {
+    id: '标准通道2',
+    type: 'output',
+    data: { label: createLabel2('标准通道2') },
+    position: { x: 800, y: 50 },
+    targetPosition: 'left',
+    style: { width: '150px', border: 'none', boxShadow: 'none' }
+  },
+
+   {
+    id: '标准通道3',
+    type: 'output',
+    data: { label: createLabel2('标准通道1') },
+    position: { x: 800, y: 150 },
+    targetPosition: 'left',
+    style: { width: '150px', border: 'none', boxShadow: 'none' }
+  },
+  {
+    id: '标准通道4',
+    type: 'output',
+    data: { label: createLabel2('标准通道2') },
+    position: { x: 800, y: 200 },
+    targetPosition: 'left',
+    style: { width: '150px', border: 'none', boxShadow: 'none' }
+  },
+   {
+    id: '标准通道5',
+    type: 'output',
+    data: { label: createLabel2('标准通道3') },
+    position: { x: 800, y: 250 },
+    targetPosition: 'left',
+    style: { width: '150px', border: 'none', boxShadow: 'none' }
+  },
+  {
+    id: '标准通道6',
+    type: 'output',
+    data: { label: createLabel2('标准通道4') },
+    position: { x: 800, y: 300 },
+    targetPosition: 'left',
+    style: { width: '150px', border: 'none', boxShadow: 'none' }
+  },
+]);
+
+const handleConnect = (params: any) => {
+  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)
+  } 
+}
+// 删除不合法连接的函数
+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) // 删除该连接
+  }
+}
+
+
+// 打印当前节点和连线信息
+function logConnections() {
+  console.log('当前节点:', nodes.value);
+  console.log('当前连线:', edges.value);
+
+  const connections = edges.value.map(edge => ({
+    source: edge.source,
+    target: edge.target,
+    label: `${edge.source} → ${edge.target}`
+  }));
+
+  console.table(connections);
+}
+
+const nodes = ref([])
+const open = async () => {
+  nodes.value = createNodes()
+  dialogVisible.value = true
+}
+
+  // 每台设备的通道数量
+  const channelCounts = {
+    '1': 1, // 被检设备1 → 4个通道
+    '3': 3, // 被检设备2 → 2个通道
+    '5': 2, // 被检设备3 → 2个通道
+    '7': 4  // 被检设备4 → 4个通道
+  }
+
+    // 每台设备的通道数量
+  const channelCounts2 = {
+    '2': 2, // 标准设备1 → 2个通道
+    '4': 1, // 标准设备2 → 1个通道
+  }
+
+  const yPosition = ref(25)
+  const yPosition2 = ref(25)
+const createNodes = () => {
+  const newNodes: any[] = []
+
+
+  // 存储每组被检/标准通道的垂直范围
+  const deviceChannelGroups: { deviceId: string; centerY: number; }[] = []
+  const standardChannelGroups: any[] = []
+ 
+  const deviceWidth = 0
+  const inputChannelX = 200
+  const outputChannelX = 800
+  const standardWidth = 950
+
+  // 添加被检通道
+  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' }
+      })
+      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' }
+      })
+     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) return
+      newNodes.push({
+        id: device.id,
+        data: { label: createLabel(device.name,device.deviceType) },
+        position: { x: deviceWidth, y: centerY },
+        class: 'no-handle-node',
+        style: { width: '200px', border: 'none', boxShadow: 'none' }
+      })
+    })
+
+    // 添加标准设备
+    standardChannelGroups.forEach(({ deviceId, centerY }) => {
+      const device = standardDevices.find(d => d.id === deviceId)
+      if (!device) return
+      newNodes.push({
+        id: device.id,
+        data: { label: createLabel(device.name,device.deviceType) },
+        position: { x: standardWidth, y: centerY },
+        class: 'no-handle-node',
+        style: { width: '200px', border: 'none', boxShadow: 'none' }
+      })
+    })
+
+  return newNodes
+}
+
+const inspectionDevices = [
+  { id: '1', name: '被检设备1', type: 'normal', deviceType: 'PQS-882B4' },
+  { id: '3', name: '被检设备2', type: 'normal', deviceType: 'PQS-883A2' },
+  { id: '5', name: '被检设备3', type: 'normal', deviceType: 'PQS-882B2' },
+  { id: '7', name: '被检设备4', type: 'normal', deviceType: 'PQS_883B' }
+]
+
+const standardDevices = [
+  { id: '2', name: '标准设备1', type: 'normal', deviceType: 'PQS-882A' },
+  { id: '4', name: '标准设备2', type: 'normal', deviceType: 'PQS-882B2' },
+]
+
+
+defineExpose({open})
+</script>
+
+<style>
+.flow-container {
+  display: flex;
+  flex-direction: column;
+  height: 800px;
+}
+
+.vue-flow__node.no-handle-node .vue-flow__handle {
+  display: none !important;
+}
+</style>

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

@@ -64,6 +64,10 @@
             >重置
             </el-button
             >
+             <el-button
+                type='primary'
+                :icon='Clock' @click="handleTest2">通道配对
+             </el-button>
             <!-- :disabled='!scope.isSelected' -->
             <el-button
                 type='primary'
@@ -233,6 +237,8 @@
     <SelectTestItemPopup ref="selectTestItemPopupRef" @openTestDialog="openTestDialog"></SelectTestItemPopup>
      <!--  省平台-填写温度湿度弹窗  -->
     <WriteTHPopup ref="writeTHPopupRef" @openTestDialog2="openTestDialog2"></WriteTHPopup>
+    <!--  比对模式-通道配对弹窗  -->
+    <DeviceConnectionPopup ref="deviceConnectionPopupRef" ></DeviceConnectionPopup>
 
   </div>
 </template>
@@ -272,7 +278,6 @@ import {onBeforeMount, onMounted, reactive, ref, watch} from 'vue'
 import {useDictStore} from '@/stores/modules/dict'
 import ChannelsTest from './channelsTest.vue'
 import {useModeStore,useAppSceneStore} from '@/stores/modules/mode' // 引入模式 store
-
 import {useCheckStore} from '@/stores/modules/check'
 import {CheckData} from '@/api/check/interface'
 import socketClient from '@/utils/webSocketClient'
@@ -285,7 +290,7 @@ import {getPqDev} from '@/api/device/device/index.ts'
 import {ResultEnum} from '@/enums/httpEnum'
 import SelectTestItemPopup from "@/views/home/components/selectTestItemPopup.vue";
 import WriteTHPopup from "@/views/home/components/writeTHPopup.vue";
-import { fa } from 'element-plus/es/locale'
+import DeviceConnectionPopup from '@/views/home/components/deviceConnectionPopup.vue' 
 
 const dictStore = useDictStore()
 const checkStore = useCheckStore()
@@ -303,7 +308,7 @@ const reportDialogVisible = ref(false)
 const dataCheckPopupRef = ref<InstanceType<typeof dataCheckPopup>>()
 const selectTestItemPopupRef = ref<InstanceType<typeof SelectTestItemPopup>>()
 const writeTHPopupRef = ref<InstanceType<typeof WriteTHPopup>>()
-
+const deviceConnectionPopupRef = ref<InstanceType<typeof DeviceConnectionPopup>>()
 const matchDialogVisible = ref(false)
 const dialogTitle = ref('手动检测')
 const checkStateTable = ref<number[]>([0, 1, 2])
@@ -531,7 +536,7 @@ const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
     sortable: true,
   },
   {
-    prop: 'reCheckNum',
+    prop: 'recheckNum',
     label: '检测次数',
     minWidth: 100,
     sortable: true,
@@ -597,10 +602,10 @@ const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
         return '不合格'
       } else if (scope.row.factorCheckResult === 1) {
         return '合格'
-      } else if (scope.row.factorCheckResult === 2) {
-        return '/'
+      } else {
+        return '未检'
       }
-      return ''
+     
     },
   },
   {prop: 'operation', label: '操作', fixed: 'right', minWidth: 200, isShow: operationShow},
@@ -845,6 +850,11 @@ const addDevice = (val: string) => {
   })
 }
 
+
+const handleTest2 =  () => {
+  deviceConnectionPopupRef.value?.open()
+}
+
 const handleTest = async (val: string) => {
 
   if (devNum == 0) {

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

@@ -28,10 +28,22 @@
       >
         <template #default='{ node, data }'>
           <span class='custom-tree-node' style='display: flex;align-items: center;'>
+             <!-- 父节点图标 -->
             <Platform v-if='!data.pid' style='width:18px;height: 18px;margin-right:8px;'
                       :style="{color:node.label=='未检'?'#fac858':node.label=='检测中'?'#ee6666':'#91cc75'}" />
+            <!-- 节点名称 -->
             <span>{{ node.label }}</span>
-            <!-- <Menu v-if="data.pid" @click.stop="detail(data)" style="width: 12px;margin-left: 8px;"/> -->
+           <!-- 子节点右侧图标 + tooltip -->
+            <el-tooltip 
+              v-if="data.pid" 
+              placement="top" 
+              :manual="true"
+              :content="'子计划信息'">
+              <Menu
+                @click.stop="detail()"
+                style="width: 16px; height: 16px; margin-left: 8px; cursor: pointer; color: var(--el-color-primary)"
+              />
+            </el-tooltip>
           </span>
         </template>
       </el-tree>