From 00019f9f24100b1caa34b8a1d1112ced2f5001ba Mon Sep 17 00:00:00 2001
From: huangjinysf <huangjinysf@163.com>
Date: Sun, 4 Jan 2026 13:20:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(RealTimeInventory):=20=E4=B8=BA=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E4=BB=A3=E7=A0=81=E6=B7=BB=E5=8A=A0=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E6=A0=87=E8=AF=86=E4=BB=A5=E5=8C=BA=E5=88=86=E4=B8=8D=E5=90=8C?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加设备代码到颜色的映射功能，为表格中的不同设备数据添加背景色标识，提高数据可视化效果。包括生成低饱和度颜色算法和颜色映射逻辑。
---
 src/views/plan/RealTimeInventory.vue | 80 +++++++++++++++++++++++++---
 1 file changed, 72 insertions(+), 8 deletions(-)

diff --git a/src/views/plan/RealTimeInventory.vue b/src/views/plan/RealTimeInventory.vue
index 5f3ddb5..d71d7c2 100644
--- a/src/views/plan/RealTimeInventory.vue
+++ b/src/views/plan/RealTimeInventory.vue
@@ -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;
 };
 
 // 方法：刷新数据