From 8d1c8532266145b4882b96c39eb63838f87d4978 Mon Sep 17 00:00:00 2001
From: huangjinysf <huangjinysf@163.com>
Date: Sun, 4 Jan 2026 14:52:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(RealTimeInventory):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=BD=AC=E7=A7=BB=E6=A6=82=E7=8E=87=E6=98=BE=E7=A4=BA=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=92=8C=E9=A2=9C=E8=89=B2=E8=AE=A1=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加新的背景颜色计算方法，将颜色样式从文字移动到容器，提高可读性
---
 src/views/plan/RealTimeInventory.vue | 55 +++++++++++++++++++++-------
 1 file changed, 42 insertions(+), 13 deletions(-)

diff --git a/src/views/plan/RealTimeInventory.vue b/src/views/plan/RealTimeInventory.vue
index 9c2eae0..654e77f 100644
--- a/src/views/plan/RealTimeInventory.vue
+++ b/src/views/plan/RealTimeInventory.vue
@@ -93,16 +93,14 @@
               <div 
                 v-if="getCellTransitionProbabilityData(scope.row.specification, column.prop)"
                 class="transition-probability-data"
-                style="margin-top: 4px; padding: 4px; background-color: rgba(255,255,255,0.1); border-radius: 3px; font-size: 11px;"
+                style="margin-top: 4px; padding: 4px; border-radius: 3px; font-size: 11px;"
+                :style="{ 
+                  backgroundColor: getProbabilityColorForDisplay(getCellTransitionProbabilityData(scope.row.specification, column.prop).probability, scope.row.specification, column.prop),
+                  color: '#000000',
+                  fontWeight: 'bold'
+                }"
               >
-                <div 
-                  :style="{ 
-                    color: getProbabilityColorForDisplay(getCellTransitionProbabilityData(scope.row.specification, column.prop).probability, scope.row.specification, column.prop),
-                    fontWeight: 'bold'
-                  }"
-                >
-                  {{ getCellTransitionProbabilityData(scope.row.specification, column.prop).displayText }}
-                </div>
+                {{ getCellTransitionProbabilityData(scope.row.specification, column.prop).displayText }}
               </div>
             </div>
           </template>
@@ -546,7 +544,38 @@ const generateLowSaturationColor = (index) => {
   return lowSaturationColors[index % lowSaturationColors.length];
 };
 
-// 方法：根据概率值获取颜色
+// 方法：根据概率值获取背景颜色（用于转移概率显示）
+const getProbabilityBackgroundColor = (intensity, baseColor) => {
+  // intensity 是 0-1 之间的值，表示概率的相对强度
+  // baseColor 是机台的基础颜色
+  
+  // 如果没有基础颜色，使用默认蓝色
+  if (!baseColor) {
+    const hue = 220; // 蓝色色调
+    const saturation = Math.round(50 + intensity * 50); // 50% 到 100% 饱和度
+    const lightness = Math.round(85 - intensity * 50); // 85% 到 35% 亮度
+    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+  }
+  
+  // 将基础颜色从十六进制转换为HSL
+  const rgb = hexToRgb(baseColor);
+  if (!rgb) {
+    const hue = 220;
+    const saturation = Math.round(50 + intensity * 50);
+    const lightness = Math.round(85 - intensity * 50);
+    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+  }
+  
+  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+  
+  // 为背景色调整饱和度和亮度，确保足够的对比度
+  const saturation = Math.min(hsl.s + intensity * 0.6, 1); // 增加饱和度，最大增加60%
+  const lightness = Math.max(hsl.l - intensity * 0.4, 0.2); // 降低亮度，最小保持20%
+  
+  return `hsl(${hsl.h}, ${Math.round(saturation * 100)}%, ${Math.round(lightness * 100)}%)`;
+};
+
+// 方法：根据概率值获取文字颜色（保留原有的 getProbabilityColor 方法用于兼容）
 const getProbabilityColor = (intensity, baseColor) => {
   // intensity 是 0-1 之间的值，表示概率的相对强度
   // baseColor 是机台的基础颜色
@@ -790,7 +819,7 @@ const getCellTransitionProbabilityData = (specification, columnProp) => {
   return null;
 };
 
-// 方法：获取概率显示颜色
+// 方法：获取概率显示背景颜色
 const getProbabilityColorForDisplay = (probability, specification, columnProp) => {
   // 查找源单元格的基础颜色
   let baseColor = null;
@@ -811,9 +840,9 @@ const getProbabilityColorForDisplay = (probability, specification, columnProp) =
     }
   }
   
-  // 使用已有的 getProbabilityColor 方法来获取颜色
+  // 使用新的背景色方法
   const intensity = probability; // probability 已经是 0-1 之间的值
-  return getProbabilityColor(intensity, baseColor);
+  return getProbabilityBackgroundColor(intensity, baseColor);
 };
 
 // 方法：获取单元格悬停提示