huangjin
/
huaerda-front-test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(RealTimeInventory): 添加单元格激活状态和概率颜色增强

Browse Source 
- 引入activeCells状态管理激活单元格
- 增强getProbabilityColor方法支持基于基础颜色的概率着色
- 添加hexToRgb和rgbToHsl辅助函数
- 修改handleCellClick实现单元格激活/取消激活功能
master
huangjinysf 2 months ago
parent c1a1c894e3
commit e6cfd5075e
1 changed files with 115 additions and 24 deletions
Show Stats Download Patch File Download Diff File

139
src/views/plan/RealTimeInventory.vue
Unescape Escape View File

@ -179,6 +179,7 @@ const equipmentCodeColors = ref(new Map()) // equipment_code到颜色的映射
// 转移概率数据
const transitionProbabilitiesMap = ref(new Map()) // 存储转移概率数据
const transitionColorsMap = ref(new Map()) // 存储概率颜色映射
const activeCells = ref(new Set()) // 存储当前激活的单元格键值
// WMS对话框相关状态
const wmsDialogVisible = ref(false)
@ -530,13 +531,74 @@ const generateLowSaturationColor = (index) => {
};
// 方法：根据概率值获取颜色
const getProbabilityColor = (intensity) => {
const getProbabilityColor = (intensity, baseColor) => {
// intensity 是 0-1 之间的值，表示概率的相对强度
const hue = 220; // 蓝色色调
const saturation = Math.round(30 + intensity * 70); // 30% 到 100% 饱和度
const lightness = Math.round(85 - intensity * 30); // 85% 到 55% 亮度
// baseColor 是机台的基础颜色
// 如果没有基础颜色，回退到默认蓝色
if (!baseColor) {
const hue = 220; // 蓝色色调
const saturation = Math.round(30 + intensity * 70); // 30% 到 100% 饱和度
const lightness = Math.round(85 - intensity * 30); // 85% 到 55% 亮度
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}
// 将基础颜色从十六进制转换为HSL，然后调整饱和度和亮度
const rgb = hexToRgb(baseColor);
if (!rgb) {
// 如果转换失败，使用默认逻辑
const hue = 220;
const saturation = Math.round(30 + intensity * 70);
const lightness = Math.round(85 - intensity * 30);
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}
const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
// 调整饱和度和亮度来反映概率强度
const saturation = Math.min(hsl.s + intensity * 0.4, 1); // 增加饱和度，最大增加40%
const lightness = Math.max(hsl.l - intensity * 0.2, 0.1); // 降低亮度，最小保持10%
return `hsl(${hsl.h}, ${Math.round(saturation * 100)}%, ${Math.round(lightness * 100)}%)`;
};
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
// 辅助函数：将十六进制颜色转换为RGB
const hexToRgb = (hex) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
};
// 辅助函数：将RGB转换为HSL
const rgbToHsl = (r, g, b) => {
r /= 255;
g /= 255;
b /= 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0; // achromatic
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return {
h: Math.round(h * 360),
s: s,
l: l
};
};
// 方法：根据wight_completion获取完成度状态
@ -594,24 +656,27 @@ const getEquipmentCodeColor = (specification, columnProp) => {
// 构建包含规格的key
const keyWithSpec = `${columnProp}::${specification}`;
// 首先检查是否有转移概率数据
if (transitionProbabilitiesMap.value.has(keyWithSpec)) {
const transitionData = transitionProbabilitiesMap.value.get(keyWithSpec);
if (transitionData && transitionData.prediction && transitionData.prediction.most_likely_next_spec) {
const mostLikelySpec = transitionData.prediction.most_likely_next_spec;
const probability = transitionData.prediction.probability;
// 构建颜色键来查找概率颜色
const colorKey = `${keyWithSpec}::${mostLikelySpec}`;
if (transitionColorsMap.value.has(colorKey)) {
const baseColor = transitionColorsMap.value.get(colorKey);
console.log(`为单元格 ${keyWithSpec} 应用转移概率颜色: ${baseColor}, 概率: ${(probability * 100).toFixed(1)}%`);
return baseColor;
// 检查该单元格是否处于激活状态
if (activeCells.value.has(keyWithSpec)) {
// 如果激活状态，首先检查是否有转移概率数据
if (transitionProbabilitiesMap.value.has(keyWithSpec)) {
const transitionData = transitionProbabilitiesMap.value.get(keyWithSpec);
if (transitionData && transitionData.prediction && transitionData.prediction.most_likely_next_spec) {
const mostLikelySpec = transitionData.prediction.most_likely_next_spec;
const probability = transitionData.prediction.probability;
// 构建颜色键来查找概率颜色
const colorKey = `${keyWithSpec}::${mostLikelySpec}`;
if (transitionColorsMap.value.has(colorKey)) {
const baseColor = transitionColorsMap.value.get(colorKey);
console.log(`为激活单元格 ${keyWithSpec} 应用转移概率颜色: ${baseColor}, 概率: ${(probability * 100).toFixed(1)}%`);
return baseColor;
}
}
}
}
// 如果没有转移概率数据，回退到设备代码颜色
// 如果没有激活或者没有转移概率数据，回退到设备代码颜色
if (!uidProductionStatusMap.value.has(keyWithSpec)) {
return null;
}
@ -721,15 +786,27 @@ const handleCellClick = async (row, column, cell, event) => {
wire_disc = null;
}
// 构建单元格键值
const keyWithSpec = `${columnKey}::${row.specification}`;
console.log('单击事件参数:', {
columnKey,
model,
wire_disc,
specification: row.specification
specification: row.specification,
keyWithSpec
});
// 检查该单元格是否已经激活
if (activeCells.value.has(keyWithSpec)) {
// 如果已经激活，则取消激活状态
activeCells.value.delete(keyWithSpec);
console.log(`单元格 ${keyWithSpec} 已取消激活，恢复原始颜色`);
ElMessage.info('已取消概率颜色显示');
return;
}
// 获取对应的机台信息和轴数
const keyWithSpec = `${columnKey}::${row.specification}`;
let equipmentCode = 'QB002'; // 默认值
let axleNumber = '左边'; // 默认值
@ -749,7 +826,9 @@ const handleCellClick = async (row, column, cell, event) => {
// 检查是否已经获取过该单元格的转移概率数据
if (transitionProbabilitiesMap.value.has(keyWithSpec)) {
console.log('该单元格的转移概率数据已存在，跳过API调用');
console.log('该单元格的转移概率数据已存在，直接激活显示');
activeCells.value.add(keyWithSpec);
ElMessage.success('转移概率数据已显示');
return;
}
@ -774,14 +853,26 @@ const handleCellClick = async (row, column, cell, event) => {
Object.entries(probabilities).forEach(([targetSpec, data]) => {
const colorKey = `${transitionsKey}::${targetSpec}`;
const intensity = data.probability / maxProbability; // 0-1之间的强度值
const color = getProbabilityColor(intensity);
// 获取机台的基础颜色
const keyWithSpec = `${columnKey}::${row.specification}`;
let baseColor = null;
if (uidProductionStatusMap.value.has(keyWithSpec)) {
const status = uidProductionStatusMap.value.get(keyWithSpec);
baseColor = status.equipment_color;
}
const color = getProbabilityColor(intensity, baseColor);
transitionColorsMap.value.set(colorKey, color);
});
console.log('转移概率数据已存储:', transitionProbabilitiesMap.value);
console.log('概率颜色映射:', transitionColorsMap.value);
ElMessage.success('转移概率数据已加载');
// 激活该单元格
activeCells.value.add(keyWithSpec);
ElMessage.success('转移概率数据已加载并显示');
}
};

Write Preview
Loading…
Cancel
Save