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

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

@ -46,7 +46,14 @@
min-width="120"
>
<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">
{{ scope.row[column.prop] || '-' }}
</span>
@ -165,6 +172,7 @@ const differenceRecords = ref([])
// UID
const uidProductionStatus = ref([])
const uidProductionStatusMap = ref(new Map())
const equipmentCodeColors = ref(new Map()) // equipment_code
// WMS
const wmsDialogVisible = ref(false)
@ -356,18 +364,36 @@ const fetchUIDProductionStatus = async () => {
// model::wire_disc::specification
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 => {
const formattedWireDisc = formatWireDisc(record.wire_disc);
const key = `${record.model}::${formattedWireDisc}::${record.specification}`;
const equipmentColor = equipmentColors.get(record.equipment_code);
statusMap.set(key, {
wight_completion: record.wight_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;
equipmentCodeColors.value = equipmentColors;
console.log('UID生产状态映射:', uidProductionStatusMap.value);
console.log('设备代码颜色映射:', equipmentCodeColors.value);
} else {
console.error('获取UID生产状态数据失败:', result.message);
uidProductionStatus.value = [];
@ -394,24 +420,49 @@ const formatWireDisc = (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
const getCompletionStatus = (wight_completion) => {
if (wight_completion <= 0) {
return { percentage: 0, color: '#C0C4CC' }; //
}
//
// 100%
let percentage = 0;
if (wight_completion >= 100) {
percentage = 100; // 100%
} else if (wight_completion >= 75) {
percentage = 75; // 3/4
percentage = Math.min(75, wight_completion); // 3/4
} else if (wight_completion >= 50) {
percentage = 50; // 1/2
percentage = Math.min(50, wight_completion); // 1/2
} else if (wight_completion >= 25) {
percentage = 25; // 1/4
percentage = Math.min(25, wight_completion); // 1/4
} 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' }; // 绿
@ -440,7 +491,20 @@ const getProductionStatusTitle = (specification, columnProp) => {
}
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