feat(RealTimeInventory): 为设备代码添加颜色标识以区分不同设备

添加设备代码到颜色的映射功能,为表格中的不同设备数据添加背景色标识,提高数据可视化效果。包括生成低饱和度颜色算法和颜色映射逻辑。
master
huangjinysf 2 months ago
parent 465dae5122
commit 00019f9f24

@ -46,7 +46,14 @@
min-width="120" min-width="120"
> >
<template #default="scope"> <template #default="scope">
<div class="cell-content"> <div
class="cell-content"
:style="{
backgroundColor: getEquipmentCodeColor(scope.row.specification, column.prop) || 'transparent',
padding: '8px 0',
transition: 'background-color 0.3s ease'
}"
>
<span v-if="!showDifference"> <span v-if="!showDifference">
{{ scope.row[column.prop] || '-' }} {{ scope.row[column.prop] || '-' }}
</span> </span>
@ -165,6 +172,7 @@ const differenceRecords = ref([])
// UID // UID
const uidProductionStatus = ref([]) const uidProductionStatus = ref([])
const uidProductionStatusMap = ref(new Map()) const uidProductionStatusMap = ref(new Map())
const equipmentCodeColors = ref(new Map()) // equipment_code
// WMS // WMS
const wmsDialogVisible = ref(false) const wmsDialogVisible = ref(false)
@ -356,18 +364,36 @@ const fetchUIDProductionStatus = async () => {
// model::wire_disc::specification // model::wire_disc::specification
const statusMap = new Map(); const statusMap = new Map();
const equipmentColors = new Map();
// equipment_code
const uniqueEquipmentCodes = [...new Set(uidProductionStatus.value.map(record => record.equipment_code))];
console.log('唯一设备代码:', uniqueEquipmentCodes);
// equipment_code
uniqueEquipmentCodes.forEach((equipmentCode, index) => {
equipmentColors.set(equipmentCode, generateLowSaturationColor(index));
console.log(`设备代码 ${equipmentCode} 分配颜色: ${generateLowSaturationColor(index)}`);
});
uidProductionStatus.value.forEach(record => { uidProductionStatus.value.forEach(record => {
const formattedWireDisc = formatWireDisc(record.wire_disc); const formattedWireDisc = formatWireDisc(record.wire_disc);
const key = `${record.model}::${formattedWireDisc}::${record.specification}`; const key = `${record.model}::${formattedWireDisc}::${record.specification}`;
const equipmentColor = equipmentColors.get(record.equipment_code);
statusMap.set(key, { statusMap.set(key, {
wight_completion: record.wight_completion, wight_completion: record.wight_completion,
degree_of_completion: record.degree_of_completion, degree_of_completion: record.degree_of_completion,
status: record.status status: record.status,
equipment_code: record.equipment_code,
equipment_color: equipmentColor
}); });
}); });
uidProductionStatusMap.value = statusMap; uidProductionStatusMap.value = statusMap;
equipmentCodeColors.value = equipmentColors;
console.log('UID生产状态映射:', uidProductionStatusMap.value); console.log('UID生产状态映射:', uidProductionStatusMap.value);
console.log('设备代码颜色映射:', equipmentCodeColors.value);
} else { } else {
console.error('获取UID生产状态数据失败:', result.message); console.error('获取UID生产状态数据失败:', result.message);
uidProductionStatus.value = []; uidProductionStatus.value = [];
@ -394,24 +420,49 @@ const formatWireDisc = (wireDisc) => {
return wireDisc; return wireDisc;
}; };
//
const generateLowSaturationColor = (index) => {
// 绿
const lowSaturationColors = [
'#E8F4F8', //
'#F0F4E8', // 绿
'#F8F0E8', //
'#E8F0F8', //
'#F0E8F4', //
'#E8F8F0', //
'#F4F0E8', //
'#E8E8F4', //
'#F0F0E8', //
'#E8F4F0', // 绿
'#F4E8F0', //
'#E8F0F0', //
'#F0E8E8', //
'#E8E8F0', //
'#F0F4F0' // 绿
];
return lowSaturationColors[index % lowSaturationColors.length];
};
// wight_completion // wight_completion
const getCompletionStatus = (wight_completion) => { const getCompletionStatus = (wight_completion) => {
if (wight_completion <= 0) { if (wight_completion <= 0) {
return { percentage: 0, color: '#C0C4CC' }; // return { percentage: 0, color: '#C0C4CC' }; //
} }
// // 100%
let percentage = 0; let percentage = 0;
if (wight_completion >= 100) { if (wight_completion >= 100) {
percentage = 100; // 100% percentage = 100; // 100%
} else if (wight_completion >= 75) { } else if (wight_completion >= 75) {
percentage = 75; // 3/4 percentage = Math.min(75, wight_completion); // 3/4
} else if (wight_completion >= 50) { } else if (wight_completion >= 50) {
percentage = 50; // 1/2 percentage = Math.min(50, wight_completion); // 1/2
} else if (wight_completion >= 25) { } else if (wight_completion >= 25) {
percentage = 25; // 1/4 percentage = Math.min(25, wight_completion); // 1/4
} else { } else {
percentage = Math.max(10, Math.floor(wight_completion / 2.5) * 2.5); // 10%2.5% // 25%使
percentage = Math.min(wight_completion, 20); // 20%
} }
return { percentage, color: '#67C23A' }; // 绿 return { percentage, color: '#67C23A' }; // 绿
@ -440,7 +491,20 @@ const getProductionStatusTitle = (specification, columnProp) => {
} }
const status = uidProductionStatusMap.value.get(keyWithSpec); const status = uidProductionStatusMap.value.get(keyWithSpec);
return `重量完成度: ${status.wight_completion.toFixed(2)/100}%`; return `重量完成度: ${(status.wight_completion/100).toFixed(2)}%`;
};
//
const getEquipmentCodeColor = (specification, columnProp) => {
// key
const keyWithSpec = `${columnProp}::${specification}`;
if (!uidProductionStatusMap.value.has(keyWithSpec)) {
return null;
}
const status = uidProductionStatusMap.value.get(keyWithSpec);
return status.equipment_color;
}; };
// //

Loading…
Cancel
Save