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 @@
-
- {{ getCellTransitionProbabilityData(scope.row.specification, column.prop).displayText }} -
+ {{ getCellTransitionProbabilityData(scope.row.specification, column.prop).displayText }}
@@ -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); }; // 方法:获取单元格悬停提示