|
|
|
|
@ -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);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 方法:获取单元格悬停提示
|
|
|
|
|
|