feat(RealTimeInventory): 优化转移概率显示样式和颜色计算

添加新的背景颜色计算方法,将颜色样式从文字移动到容器,提高可读性
master
huangjinysf 2 months ago
parent 5ca05cceab
commit 8d1c853226

@ -93,16 +93,14 @@
<div <div
v-if="getCellTransitionProbabilityData(scope.row.specification, column.prop)" v-if="getCellTransitionProbabilityData(scope.row.specification, column.prop)"
class="transition-probability-data" 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 {{ getCellTransitionProbabilityData(scope.row.specification, column.prop).displayText }}
: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>
</div> </div>
</div> </div>
</template> </template>
@ -546,7 +544,38 @@ const generateLowSaturationColor = (index) => {
return lowSaturationColors[index % lowSaturationColors.length]; 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) => { const getProbabilityColor = (intensity, baseColor) => {
// intensity 0-1 // intensity 0-1
// baseColor // baseColor
@ -790,7 +819,7 @@ const getCellTransitionProbabilityData = (specification, columnProp) => {
return null; return null;
}; };
// //
const getProbabilityColorForDisplay = (probability, specification, columnProp) => { const getProbabilityColorForDisplay = (probability, specification, columnProp) => {
// //
let baseColor = null; let baseColor = null;
@ -811,9 +840,9 @@ const getProbabilityColorForDisplay = (probability, specification, columnProp) =
} }
} }
// 使 getProbabilityColor // 使
const intensity = probability; // probability 0-1 const intensity = probability; // probability 0-1
return getProbabilityColor(intensity, baseColor); return getProbabilityBackgroundColor(intensity, baseColor);
}; };
// //

Loading…
Cancel
Save