feat(RealTimeInventory): 添加单元格激活状态和概率颜色增强

- 引入activeCells状态管理激活单元格
- 增强getProbabilityColor方法支持基于基础颜色的概率着色
- 添加hexToRgb和rgbToHsl辅助函数
- 修改handleCellClick实现单元格激活/取消激活功能

src/views/plan/RealTimeInventory.vue

@@ -179,6 +179,7 @@ const equipmentCodeColors = ref(new Map()) // equipment_code到颜色的映射
 // 转移概率数据
 const transitionProbabilitiesMap = ref(new Map()) // 存储转移概率数据
 const transitionColorsMap = ref(new Map()) // 存储概率颜色映射
+const activeCells = ref(new Set()) // 存储当前激活的单元格键值
 
 // WMS对话框相关状态
 const wmsDialogVisible = ref(false)
@@ -530,13 +531,74 @@ const generateLowSaturationColor = (index) => {
 };
 
 // 方法：根据概率值获取颜色
-const getProbabilityColor = (intensity) => {
+const getProbabilityColor = (intensity, baseColor) => {
   // intensity 是 0-1 之间的值，表示概率的相对强度
-  const hue = 220; // 蓝色色调
+  // baseColor 是机台的基础颜色
-  const saturation = Math.round(30 + intensity * 70); // 30% 到 100% 饱和度
+  
-  const lightness = Math.round(85 - intensity * 30); // 85% 到 55% 亮度
+  // 如果没有基础颜色，回退到默认蓝色
+  if (!baseColor) {
+    const hue = 220; // 蓝色色调
+    const saturation = Math.round(30 + intensity * 70); // 30% 到 100% 饱和度
+    const lightness = Math.round(85 - intensity * 30); // 85% 到 55% 亮度
+    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+  }
+  
+  // 将基础颜色从十六进制转换为HSL，然后调整饱和度和亮度
+  const rgb = hexToRgb(baseColor);
+  if (!rgb) {
+    // 如果转换失败，使用默认逻辑
+    const hue = 220;
+    const saturation = Math.round(30 + intensity * 70);
+    const lightness = Math.round(85 - intensity * 30);
+    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+  }
+  
+  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
   
-  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+  // 调整饱和度和亮度来反映概率强度
+  const saturation = Math.min(hsl.s + intensity * 0.4, 1); // 增加饱和度，最大增加40%
+  const lightness = Math.max(hsl.l - intensity * 0.2, 0.1); // 降低亮度，最小保持10%
+  
+  return `hsl(${hsl.h}, ${Math.round(saturation * 100)}%, ${Math.round(lightness * 100)}%)`;
+};
+
+// 辅助函数：将十六进制颜色转换为RGB
+const hexToRgb = (hex) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+};
+
+// 辅助函数：将RGB转换为HSL
+const rgbToHsl = (r, g, b) => {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h, s, l = (max + min) / 2;
+
+  if (max === min) {
+    h = s = 0; // achromatic
+  } else {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+      case g: h = (b - r) / d + 2; break;
+      case b: h = (r - g) / d + 4; break;
+    }
+    h /= 6;
+  }
+
+  return {
+    h: Math.round(h * 360),
+    s: s,
+    l: l
+  };
 };
 
 // 方法：根据wight_completion获取完成度状态
@@ -594,24 +656,27 @@ const getEquipmentCodeColor = (specification, columnProp) => {
   // 构建包含规格的key
   const keyWithSpec = `${columnProp}::${specification}`;
   
-  // 首先检查是否有转移概率数据
+  // 检查该单元格是否处于激活状态
-  if (transitionProbabilitiesMap.value.has(keyWithSpec)) {
+  if (activeCells.value.has(keyWithSpec)) {
-    const transitionData = transitionProbabilitiesMap.value.get(keyWithSpec);
+    // 如果激活状态，首先检查是否有转移概率数据
-    if (transitionData && transitionData.prediction && transitionData.prediction.most_likely_next_spec) {
+    if (transitionProbabilitiesMap.value.has(keyWithSpec)) {
-      const mostLikelySpec = transitionData.prediction.most_likely_next_spec;
+      const transitionData = transitionProbabilitiesMap.value.get(keyWithSpec);
-      const probability = transitionData.prediction.probability;
+      if (transitionData && transitionData.prediction && transitionData.prediction.most_likely_next_spec) {
-      
+        const mostLikelySpec = transitionData.prediction.most_likely_next_spec;
-      // 构建颜色键来查找概率颜色
+        const probability = transitionData.prediction.probability;
-      const colorKey = `${keyWithSpec}::${mostLikelySpec}`;
+        
-      if (transitionColorsMap.value.has(colorKey)) {
+        // 构建颜色键来查找概率颜色
-        const baseColor = transitionColorsMap.value.get(colorKey);
+        const colorKey = `${keyWithSpec}::${mostLikelySpec}`;
-        console.log(`为单元格 ${keyWithSpec} 应用转移概率颜色: ${baseColor}, 概率: ${(probability * 100).toFixed(1)}%`);
+        if (transitionColorsMap.value.has(colorKey)) {
-        return baseColor;
+          const baseColor = transitionColorsMap.value.get(colorKey);
+          console.log(`为激活单元格 ${keyWithSpec} 应用转移概率颜色: ${baseColor}, 概率: ${(probability * 100).toFixed(1)}%`);
+          return baseColor;
+        }
       }
     }
   }
   
-  // 如果没有转移概率数据，回退到设备代码颜色
+  // 如果没有激活或者没有转移概率数据，回退到设备代码颜色
   if (!uidProductionStatusMap.value.has(keyWithSpec)) {
     return null;
   }
@@ -721,15 +786,27 @@ const handleCellClick = async (row, column, cell, event) => {
     wire_disc = null;
   }
   
+  // 构建单元格键值
+  const keyWithSpec = `${columnKey}::${row.specification}`;
+  
   console.log('单击事件参数:', {
     columnKey,
     model,
     wire_disc,
-    specification: row.specification
+    specification: row.specification,
+    keyWithSpec
   });
   
+  // 检查该单元格是否已经激活
+  if (activeCells.value.has(keyWithSpec)) {
+    // 如果已经激活，则取消激活状态
+    activeCells.value.delete(keyWithSpec);
+    console.log(`单元格 ${keyWithSpec} 已取消激活，恢复原始颜色`);
+    ElMessage.info('已取消概率颜色显示');
+    return;
+  }
+  
   // 获取对应的机台信息和轴数
-  const keyWithSpec = `${columnKey}::${row.specification}`;
   let equipmentCode = 'QB002'; // 默认值
   let axleNumber = '左边'; // 默认值
   
@@ -749,7 +826,9 @@ const handleCellClick = async (row, column, cell, event) => {
   
   // 检查是否已经获取过该单元格的转移概率数据
   if (transitionProbabilitiesMap.value.has(keyWithSpec)) {
-    console.log('该单元格的转移概率数据已存在，跳过API调用');
+    console.log('该单元格的转移概率数据已存在，直接激活显示');
+    activeCells.value.add(keyWithSpec);
+    ElMessage.success('转移概率数据已显示');
     return;
   }
   
@@ -774,14 +853,26 @@ const handleCellClick = async (row, column, cell, event) => {
     Object.entries(probabilities).forEach(([targetSpec, data]) => {
       const colorKey = `${transitionsKey}::${targetSpec}`;
       const intensity = data.probability / maxProbability; // 0-1之间的强度值
-      const color = getProbabilityColor(intensity);
+      
+      // 获取机台的基础颜色
+      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);
     });
     
     console.log('转移概率数据已存储:', transitionProbabilitiesMap.value);
     console.log('概率颜色映射:', transitionColorsMap.value);
     
-    ElMessage.success('转移概率数据已加载');
+    // 激活该单元格
+    activeCells.value.add(keyWithSpec);
+    ElMessage.success('转移概率数据已加载并显示');
   }
 };