|
|
|
|
@ -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;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 方法:刷新数据
|
|
|
|
|
|