fix(RealTimeInventory): 添加单元格点击事件防抖处理

防止快速双击时同时触发单击和双击事件，通过设置延时器和清除机制来区分单击和双击操作
2 months ago · 24268d7d2b
parent 8d1c853226
commit 24268d7d2b
1 changed files with 131 additions and 111 deletions
--- a/src/views/plan/RealTimeInventory.vue
+++ b/src/views/plan/RealTimeInventory.vue
@ -195,6 +195,10 @@ const transitionProbabilitiesMap = ref(new Map()) // 存储转移概率数据
 const transitionColorsMap = ref(new Map()) // 存储概率颜色映射
 const activeCells = ref(new Set()) // 存储当前激活的单元格键值

+// 事件防抖相关
+let clickTimeoutId = null; // 单击事件延时器
+const DBL_CLICK_DELAY = 250; // 双击延时（毫秒）
+
 // WMS对话框相关状态
 const wmsDialogVisible = ref(false)
 const currentWmsModel = ref('')
@ -892,129 +896,145 @@ const getDifferenceClass = (difference) => {
 };

 // 方法：处理单元格单击事件 - 获取转移概率数据
+// 处理单元格单击事件 - 获取转移概率数据（带防抖）
 const handleCellClick = async (row, column, cell, event) => {
-  const cellValue = row[column.property];
-  
-  // 检查单元格是否有值
-  if (!cellValue || cellValue === '-' || cellValue === null || cellValue === undefined) {
-    return;
-  }
-  
-  // 检查是否是规格列或总计列，这些列不需要获取转移概率
-  if (column.property === 'specification' || column.property === 'total') {
-    return;
-  }
-  
-  // 从列属性中提取model和wire_disc
-  const columnKey = column.property;
-  const hasWireDisc = columnKey.includes('::');
-  let model, wire_disc;
-  
-  if (hasWireDisc) {
-    [model, wire_disc] = columnKey.split('::');
-  } else {
-    model = columnKey;
-    wire_disc = null;
+  // 清除之前的延时器
+  if (clickTimeoutId) {
+    clearTimeout(clickTimeoutId);
+    clickTimeoutId = null;
  }
  
-  // 构建单元格键值
-  const keyWithSpec = `${columnKey}::${row.specification}`;
+  // 设置延时器，延迟执行单击逻辑
+  clickTimeoutId = setTimeout(async () => {
+    const cellValue = row[column.property];
    
-  console.log('单击事件参数:', {
-    columnKey,
-    model,
-    wire_disc,
-    specification: row.specification,
-    keyWithSpec
-  });
+    // 检查单元格是否有值
+    if (!cellValue || cellValue === '-' || cellValue === null || cellValue === undefined) {
+      return;
+    }
    
-  // 检查该单元格是否已经激活
-  if (activeCells.value.has(keyWithSpec)) {
-    // 如果已经激活，则取消激活状态
-    activeCells.value.delete(keyWithSpec);
-    console.log(`单元格 ${keyWithSpec} 已取消激活，恢复原始颜色`);
-    ElMessage.info('已取消概率颜色显示');
-    return;
-  }
+    // 检查是否是规格列或总计列，这些列不需要获取转移概率
+    if (column.property === 'specification' || column.property === 'total') {
+      return;
+    }
    
-  // 如果激活了其他单元格，先取消所有之前的激活状态（单选模式）
-  if (activeCells.value.size > 0) {
-    console.log('取消所有之前激活的单元格:', Array.from(activeCells.value));
-    activeCells.value.clear();
-  }
+    // 从列属性中提取model和wire_disc
+    const columnKey = column.property;
+    const hasWireDisc = columnKey.includes('::');
+    let model, wire_disc;
    
-  // 获取对应的机台信息和轴数
-  let equipmentCode = 'QB002'; // 默认值
-  let axleNumber = '左边'; // 默认值
+    if (hasWireDisc) {
+      [model, wire_disc] = columnKey.split('::');
+    } else {
+      model = columnKey;
+      wire_disc = null;
+    }
    
-  if (uidProductionStatusMap.value.has(keyWithSpec)) {
-    const status = uidProductionStatusMap.value.get(keyWithSpec);
-    equipmentCode = status.equipment_code || 'QB002';
-    axleNumber = status.axle_number || '左边';
-  }
+    // 构建单元格键值
+    const keyWithSpec = `${columnKey}::${row.specification}`;
    
-  console.log('获取转移概率参数:', {
-    equipmentCode,
-    axleNumber,
-    model,
-    specification: row.specification,
-    wireDisc: formatWireDisc(wire_disc || '')
-  });
+    console.log('单击事件参数:', {
+      columnKey,
+      model,
+      wire_disc,
+      specification: row.specification,
+      keyWithSpec
+    });
    
-  // 检查是否已经获取过该单元格的转移概率数据
-  if (transitionProbabilitiesMap.value.has(keyWithSpec)) {
-    console.log('该单元格的转移概率数据已存在，直接激活显示');
-    activeCells.value.add(keyWithSpec);
-    ElMessage.success('转移概率数据已显示');
-    return;
-  }
+    // 检查该单元格是否已经激活
+    if (activeCells.value.has(keyWithSpec)) {
+      // 如果已经激活，则取消激活状态
+      activeCells.value.delete(keyWithSpec);
+      console.log(`单元格 ${keyWithSpec} 已取消激活，恢复原始颜色`);
+      ElMessage.info('已取消概率颜色显示');
+      return;
+    }
    
-  // 获取转移概率数据
-  const transitionData = await fetchTransitionProbabilities(
-    equipmentCode,
-    axleNumber,
-    model,
-    row.specification,
-    formatWireDisc(wire_disc || '')
-  );
+    // 如果激活了其他单元格，先取消所有之前的激活状态（单选模式）
+    if (activeCells.value.size > 0) {
+      console.log('取消所有之前激活的单元格:', Array.from(activeCells.value));
+      activeCells.value.clear();
+    }
    
-  if (transitionData && transitionData.current_specification_transitions) {
-    // 存储转移概率数据
-    const transitionsKey = `${columnKey}::${row.specification}`;
-    transitionProbabilitiesMap.value.set(transitionsKey, transitionData);
+    // 获取对应的机台信息和轴数
+    let equipmentCode = 'QB002'; // 默认值
+    let axleNumber = '左边'; // 默认值
    
-    // 计算概率颜色
-    const probabilities = transitionData.current_specification_transitions;
-    const maxProbability = Math.max(...Object.values(probabilities).map(p => p.probability));
+    if (uidProductionStatusMap.value.has(keyWithSpec)) {
+      const status = uidProductionStatusMap.value.get(keyWithSpec);
+      equipmentCode = status.equipment_code || 'QB002';
+      axleNumber = status.axle_number || '左边';
+    }
    
-    Object.entries(probabilities).forEach(([targetSpec, data]) => {
-      const colorKey = `${transitionsKey}::${targetSpec}`;
-      const intensity = data.probability / maxProbability; // 0-1之间的强度值
+    console.log('获取转移概率参数:', {
+      equipmentCode,
+      axleNumber,
+      model,
+      specification: row.specification,
+      wireDisc: formatWireDisc(wire_disc || '')
+    });
    
-      // 获取机台的基础颜色
-      const keyWithSpec = `${columnKey}::${row.specification}`;
-      let baseColor = null;
+    // 检查是否已经获取过该单元格的转移概率数据
+    if (transitionProbabilitiesMap.value.has(keyWithSpec)) {
+      console.log('该单元格的转移概率数据已存在，直接激活显示');
+      activeCells.value.add(keyWithSpec);
+      ElMessage.success('转移概率数据已显示');
+      return;
+    }
    
-      if (uidProductionStatusMap.value.has(keyWithSpec)) {
-        const status = uidProductionStatusMap.value.get(keyWithSpec);
-        baseColor = status.equipment_color;
-      }
+    // 获取转移概率数据
+    const transitionData = await fetchTransitionProbabilities(
+      equipmentCode,
+      axleNumber,
+      model,
+      row.specification,
+      formatWireDisc(wire_disc || '')
+    );
+    
+    if (transitionData && transitionData.current_specification_transitions) {
+      // 存储转移概率数据
+      const transitionsKey = `${columnKey}::${row.specification}`;
+      transitionProbabilitiesMap.value.set(transitionsKey, transitionData);
+      
+      // 计算概率颜色
+      const probabilities = transitionData.current_specification_transitions;
+      const maxProbability = Math.max(...Object.values(probabilities).map(p => p.probability));
+      
+      Object.entries(probabilities).forEach(([targetSpec, data]) => {
+        const colorKey = `${transitionsKey}::${targetSpec}`;
+        const intensity = data.probability / maxProbability; // 0-1之间的强度值
+        
+        // 获取机台的基础颜色
+        const keyWithSpec = `${columnKey}::${row.specification}`;
+        let baseColor = null;
+        
+        if (uidProductionStatusMap.value.has(keyWithSpec)) {
+          const status = uidProductionStatusMap.value.get(keyWithSpec);
+          baseColor = status.equipment_color;
+        }
        
-      const color = getProbabilityColor(intensity, baseColor);
-      transitionColorsMap.value.set(colorKey, color);
-    });
+        const color = getProbabilityColor(intensity, baseColor);
+        transitionColorsMap.value.set(colorKey, color);
+      });
      
-    console.log('转移概率数据已存储:', transitionProbabilitiesMap.value);
-    console.log('概率颜色映射:', transitionColorsMap.value);
+      console.log('转移概率数据已存储:', transitionProbabilitiesMap.value);
+      console.log('概率颜色映射:', transitionColorsMap.value);
      
-    // 激活该单元格
-    activeCells.value.add(keyWithSpec);
-    ElMessage.success('转移概率数据已加载并显示');
-  }
+      // 激活该单元格
+      activeCells.value.add(keyWithSpec);
+      ElMessage.success('转移概率数据已加载并显示');
+    }
+  }, DBL_CLICK_DELAY);
 };

 // 方法：处理单元格双击事件 - 显示WMS详情
 const handleCellDblClick = (row, column, cell, event) => {
+  // 清除单击事件的延时器，防止双击时触发单击逻辑
+  if (clickTimeoutId) {
+    clearTimeout(clickTimeoutId);
+    clickTimeoutId = null;
+    console.log('双击事件已清除单击延时器');
+  }
  const cellValue = row[column.property];
  
  // 检查单元格是否有值