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

fix(RealTimeInventory): 添加单元格点击事件防抖处理

Browse Source 
防止快速双击时同时触发单击和双击事件，通过设置延时器和清除机制来区分单击和双击操作
master
huangjinysf 2 months ago
parent 8d1c853226
commit 24268d7d2b
1 changed files with 131 additions and 111 deletions
Show Stats Download Patch File Download Diff File

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

@ -195,6 +195,10 @@ const transitionProbabilitiesMap = ref(new Map()) // 存储转移概率数据
const transitionColorsMap = ref(new Map()) // 存储概率颜色映射 const transitionColorsMap = ref(new Map()) // 存储概率颜色映射
const activeCells = ref(new Set()) // 存储当前激活的单元格键值 const activeCells = ref(new Set()) // 存储当前激活的单元格键值
// 事件防抖相关
let clickTimeoutId = null; // 单击事件延时器
const DBL_CLICK_DELAY = 250; // 双击延时（毫秒）
// WMS对话框相关状态 // WMS对话框相关状态
const wmsDialogVisible = ref(false) const wmsDialogVisible = ref(false)
const currentWmsModel = ref('') const currentWmsModel = ref('')
@ -892,129 +896,145 @@ const getDifferenceClass = (difference) => {
}; };
// 方法：处理单元格单击事件 - 获取转移概率数据 // 方法：处理单元格单击事件 - 获取转移概率数据
// 处理单元格单击事件 - 获取转移概率数据（带防抖）
const handleCellClick = async (row, column, cell, event) => { const handleCellClick = async (row, column, cell, event) => {
const cellValue = row[column.property]; // 清除之前的延时器
if (clickTimeoutId) {
// 检查单元格是否有值 clearTimeout(clickTimeoutId);
if (!cellValue || cellValue === '-' || cellValue === null || cellValue === undefined) { clickTimeoutId = null;
return;
}
// 检查是否是规格列或总计列，这些列不需要获取转移概率
if (column.property === 'specification' || column.property === 'total') {
return;
}
// 从列属性中提取model和wire_disc
const columnKey = column.property;
const hasWireDisc = columnKey.includes('::');
let model, wire_disc;
if (hasWireDisc) {
[model, wire_disc] = columnKey.split('::');
} else {
model = columnKey;
wire_disc = null;
} }
// 构建单元格键值 // 设置延时器，延迟执行单击逻辑
const keyWithSpec = `${columnKey}::${row.specification}`; clickTimeoutId = setTimeout(async () => {
const cellValue = row[column.property];
console.log('单击事件参数:', { // 检查单元格是否有值
columnKey, if (!cellValue || cellValue === '-' || cellValue === null || cellValue === undefined) {
model, return;
wire_disc, }
specification: row.specification,
keyWithSpec
});
// 检查该单元格是否已经激活 // 检查是否是规格列或总计列，这些列不需要获取转移概率
if (activeCells.value.has(keyWithSpec)) { if (column.property === 'specification' || column.property === 'total') {
// 如果已经激活，则取消激活状态 return;
activeCells.value.delete(keyWithSpec); }
console.log(`单元格 ${keyWithSpec} 已取消激活，恢复原始颜色`);
ElMessage.info('已取消概率颜色显示');
return;
}
// 如果激活了其他单元格，先取消所有之前的激活状态（单选模式） // 从列属性中提取model和wire_disc
if (activeCells.value.size > 0) { const columnKey = column.property;
console.log('取消所有之前激活的单元格:', Array.from(activeCells.value)); const hasWireDisc = columnKey.includes('::');
activeCells.value.clear(); let model, wire_disc;
}
// 获取对应的机台信息和轴数 if (hasWireDisc) {
let equipmentCode = 'QB002'; // 默认值 [model, wire_disc] = columnKey.split('::');
let axleNumber = '左边'; // 默认值 } else {
model = columnKey;
wire_disc = null;
}
if (uidProductionStatusMap.value.has(keyWithSpec)) { // 构建单元格键值
const status = uidProductionStatusMap.value.get(keyWithSpec); const keyWithSpec = `${columnKey}::${row.specification}`;
equipmentCode = status.equipment_code || 'QB002';
axleNumber = status.axle_number || '左边';
}
console.log('获取转移概率参数:', { console.log('单击事件参数:', {
equipmentCode, columnKey,
axleNumber, model,
model, wire_disc,
specification: row.specification, specification: row.specification,
wireDisc: formatWireDisc(wire_disc || '') keyWithSpec
}); });
// 检查是否已经获取过该单元格的转移概率数据 // 检查该单元格是否已经激活
if (transitionProbabilitiesMap.value.has(keyWithSpec)) { if (activeCells.value.has(keyWithSpec)) {
console.log('该单元格的转移概率数据已存在，直接激活显示'); // 如果已经激活，则取消激活状态
activeCells.value.add(keyWithSpec); activeCells.value.delete(keyWithSpec);
ElMessage.success('转移概率数据已显示'); console.log(`单元格 ${keyWithSpec} 已取消激活，恢复原始颜色`);
return; ElMessage.info('已取消概率颜色显示');
} return;
}
// 获取转移概率数据 // 如果激活了其他单元格，先取消所有之前的激活状态（单选模式）
const transitionData = await fetchTransitionProbabilities( if (activeCells.value.size > 0) {
equipmentCode, console.log('取消所有之前激活的单元格:', Array.from(activeCells.value));
axleNumber, activeCells.value.clear();
model, }
row.specification,
formatWireDisc(wire_disc || '')
);
if (transitionData && transitionData.current_specification_transitions) { // 获取对应的机台信息和轴数
// 存储转移概率数据 let equipmentCode = 'QB002'; // 默认值
const transitionsKey = `${columnKey}::${row.specification}`; let axleNumber = '左边'; // 默认值
transitionProbabilitiesMap.value.set(transitionsKey, transitionData);
// 计算概率颜色 if (uidProductionStatusMap.value.has(keyWithSpec)) {
const probabilities = transitionData.current_specification_transitions; const status = uidProductionStatusMap.value.get(keyWithSpec);
const maxProbability = Math.max(...Object.values(probabilities).map(p => p.probability)); equipmentCode = status.equipment_code || 'QB002';
axleNumber = status.axle_number || '左边';
}
Object.entries(probabilities).forEach(([targetSpec, data]) => { console.log('获取转移概率参数:', {
const colorKey = `${transitionsKey}::${targetSpec}`; equipmentCode,
const intensity = data.probability / maxProbability; // 0-1之间的强度值 axleNumber,
model,
specification: row.specification,
wireDisc: formatWireDisc(wire_disc || '')
});
// 获取机台的基础颜色 // 检查是否已经获取过该单元格的转移概率数据
const keyWithSpec = `${columnKey}::${row.specification}`; if (transitionProbabilitiesMap.value.has(keyWithSpec)) {
let baseColor = null; console.log('该单元格的转移概率数据已存在，直接激活显示');
activeCells.value.add(keyWithSpec);
ElMessage.success('转移概率数据已显示');
return;
}
if (uidProductionStatusMap.value.has(keyWithSpec)) { // 获取转移概率数据
const status = uidProductionStatusMap.value.get(keyWithSpec); const transitionData = await fetchTransitionProbabilities(
baseColor = status.equipment_color; equipmentCode,
} axleNumber,
model,
row.specification,
formatWireDisc(wire_disc || '')
);
if (transitionData && transitionData.current_specification_transitions) {
// 存储转移概率数据
const transitionsKey = `${columnKey}::${row.specification}`;
transitionProbabilitiesMap.value.set(transitionsKey, transitionData);
// 计算概率颜色
const probabilities = transitionData.current_specification_transitions;
const maxProbability = Math.max(...Object.values(probabilities).map(p => p.probability));
Object.entries(probabilities).forEach(([targetSpec, data]) => {
const colorKey = `${transitionsKey}::${targetSpec}`;
const intensity = data.probability / maxProbability; // 0-1之间的强度值
// 获取机台的基础颜色
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); const color = getProbabilityColor(intensity, baseColor);
transitionColorsMap.value.set(colorKey, color); transitionColorsMap.value.set(colorKey, color);
}); });
console.log('转移概率数据已存储:', transitionProbabilitiesMap.value); console.log('转移概率数据已存储:', transitionProbabilitiesMap.value);
console.log('概率颜色映射:', transitionColorsMap.value); console.log('概率颜色映射:', transitionColorsMap.value);
// 激活该单元格 // 激活该单元格
activeCells.value.add(keyWithSpec); activeCells.value.add(keyWithSpec);
ElMessage.success('转移概率数据已加载并显示'); ElMessage.success('转移概率数据已加载并显示');
} }
}, DBL_CLICK_DELAY);
}; };
// 方法：处理单元格双击事件 - 显示WMS详情 // 方法：处理单元格双击事件 - 显示WMS详情
const handleCellDblClick = (row, column, cell, event) => { const handleCellDblClick = (row, column, cell, event) => {
// 清除单击事件的延时器，防止双击时触发单击逻辑
if (clickTimeoutId) {
clearTimeout(clickTimeoutId);
clickTimeoutId = null;
console.log('双击事件已清除单击延时器');
}
const cellValue = row[column.property]; const cellValue = row[column.property];
// 检查单元格是否有值 // 检查单元格是否有值

Write Preview
Loading…
Cancel
Save