diff --git a/src/views/plan/RealTimeInventory.vue b/src/views/plan/RealTimeInventory.vue index e88861e..1a9d5c5 100644 --- a/src/views/plan/RealTimeInventory.vue +++ b/src/views/plan/RealTimeInventory.vue @@ -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); - return `hsl(${hue}, ${saturation}%, ${lightness}%)`; + // 调整饱和度和亮度来反映概率强度 + 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)}%)`; +}; + +// 辅助函数：将十六进制颜色转换为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('转移概率数据已加载并显示'); } };