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

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

@ -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);
};
//

Loading…
Cancel
Save