From 34419d8652ff8837324ca6876960082c3388896a Mon Sep 17 00:00:00 2001
From: huangjinysf <huangjinysf@163.com>
Date: Sun, 4 Jan 2026 11:48:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(RealTimeInventory):=20=E6=B7=BB=E5=8A=A0UI?=
 =?UTF-8?q?D=E7=94=9F=E4=BA=A7=E7=8A=B6=E6=80=81=E6=8C=87=E7=A4=BA?=
 =?UTF-8?q?=E5=99=A8=E5=8F=8A=E6=95=B0=E6=8D=AE=E8=8E=B7=E5=8F=96=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加UID生产状态指示器组件，用于实时显示生产进度
新增fetchUIDProductionStatus方法获取生产状态数据
实现生产状态映射和格式化功能
添加相关样式和交互效果
---
 src/views/plan/RealTimeInventory.vue | 127 +++++++++++++++++++++++++++
 1 file changed, 127 insertions(+)

diff --git a/src/views/plan/RealTimeInventory.vue b/src/views/plan/RealTimeInventory.vue
index 927ff62..3b3d252 100644
--- a/src/views/plan/RealTimeInventory.vue
+++ b/src/views/plan/RealTimeInventory.vue
@@ -62,6 +62,22 @@
                 <span v-else class="no-data" style="margin-left: 5px; font-size: 12px;">
                   (-)
                 </span>
+                
+                <!-- UID生产状态指示器 -->
+                <span 
+                  v-if="getProductionStatusIndicator(scope.row.specification, column.prop)"
+                  :title="getProductionStatusTitle(scope.row.specification, column.prop)"
+                  class="production-status-indicator"
+                  :style="{ 
+                    width: '12px', 
+                    height: '12px', 
+                    borderRadius: '50%', 
+                    display: 'inline-block', 
+                    marginLeft: '5px',
+                    backgroundColor: getProductionStatusIndicator(scope.row.specification, column.prop).color,
+                    background: `conic-gradient(#67C23A 0deg ${getProductionStatusIndicator(scope.row.specification, column.prop).percentage * 3.6}deg, #C0C4CC ${getProductionStatusIndicator(scope.row.specification, column.prop).percentage * 3.6}deg 360deg)`
+                  }"
+                ></span>
               </span>
             </div>
           </template>
@@ -146,6 +162,10 @@ const loading = ref(false)
 const records = ref([])
 const differenceRecords = ref([])
 
+// UID生产状态数据
+const uidProductionStatus = ref([])
+const uidProductionStatusMap = ref(new Map())
+
 // WMS对话框相关状态
 const wmsDialogVisible = ref(false)
 const currentWmsModel = ref('')
@@ -321,6 +341,99 @@ const fetchDifferenceData = async () => {
   }
 };
 
+// 方法：获取UID生产状态数据
+const fetchUIDProductionStatus = async () => {
+  try {
+    console.log('正在请求UID生产状态API:', `${API_CONFIG.BASE_URL}/api/plan/mes/uid/production-status`);
+    const response = await fetch(`${API_CONFIG.BASE_URL}/api/plan/mes/uid/production-status`);
+    const result = await response.json();
+    
+    console.log('UID生产状态API返回结果:', result);
+    
+    if (result.code === 200 && result.data && result.data.uid_records) {
+      uidProductionStatus.value = result.data.uid_records;
+      console.log('设置UID生产状态records:', uidProductionStatus.value);
+      
+      // 构建model::wire_disc::specification格式的映射
+      const statusMap = new Map();
+      uidProductionStatus.value.forEach(record => {
+        const formattedWireDisc = formatWireDisc(record.wire_disc);
+        const key = `${record.model}::${formattedWireDisc}::${record.specification}`;
+        statusMap.set(key, {
+          wight_completion: record.wight_completion,
+          degree_of_completion: record.degree_of_completion,
+          status: record.status
+        });
+      });
+      
+      uidProductionStatusMap.value = statusMap;
+      console.log('UID生产状态映射:', uidProductionStatusMap.value);
+    } else {
+      console.error('获取UID生产状态数据失败:', result.message);
+      uidProductionStatus.value = [];
+      uidProductionStatusMap.value = new Map();
+    }
+  } catch (error) {
+    console.error('UID生产状态API调用失败:', error);
+    uidProductionStatus.value = [];
+    uidProductionStatusMap.value = new Map();
+  }
+};
+
+// 方法：格式化wire_disc
+const formatWireDisc = (wireDisc) => {
+  if (!wireDisc) return '';
+  
+  // 提取PT和数字部分，去掉汉字
+  const ptMatch = wireDisc.match(/PT(\d+)/);
+  if (ptMatch) {
+    return `PT-${ptMatch[1]}`;
+  }
+  
+  // 如果没有找到PT格式，返回原始值
+  return wireDisc;
+};
+
+// 方法：根据wight_completion获取完成度状态
+const getCompletionStatus = (wight_completion) => {
+  if (wight_completion > 0) {
+    // 有进度时根据具体数值计算填充百分比
+    let percentage = 25; // 默认25%
+    if (wight_completion >= 100) percentage = 100;
+    else if (wight_completion >= 75) percentage = 75;
+    else if (wight_completion >= 25) percentage = 25;
+    
+    return { percentage, color: '#67C23A' }; // 绿色
+  }
+  return { percentage: 0, color: '#C0C4CC' }; // 灰色（无进度）
+};
+
+// 方法：获取生产状态指示器
+const getProductionStatusIndicator = (specification, columnProp) => {
+  // 构建包含规格的key
+  const keyWithSpec = `${columnProp}::${specification}`;
+  
+  if (!uidProductionStatusMap.value.has(keyWithSpec)) {
+    return null;
+  }
+  
+  const status = uidProductionStatusMap.value.get(keyWithSpec);
+  return getCompletionStatus(status.wight_completion);
+};
+
+// 方法：获取生产状态标题
+const getProductionStatusTitle = (specification, columnProp) => {
+  // 构建包含规格的key
+  const keyWithSpec = `${columnProp}::${specification}`;
+  
+  if (!uidProductionStatusMap.value.has(keyWithSpec)) {
+    return '无生产状态数据';
+  }
+  
+  const status = uidProductionStatusMap.value.get(keyWithSpec);
+  return `重量完成度: ${status.wight_completion.toFixed(2)}%`;
+};
+
 // 方法：刷新数据
 const refreshData = () => {
   fetchData();
@@ -968,6 +1081,8 @@ onMounted(() => {
   if (showDifference.value) {
     fetchDifferenceData();
   }
+  // 获取UID生产状态数据
+  fetchUIDProductionStatus();
 });
 </script>
 
@@ -1120,4 +1235,16 @@ onMounted(() => {
   width: 100%;
   min-height: 350px;
 }
+
+/* UID生产状态指示器样式 */
+.production-status-indicator {
+  border: 1px solid #dcdfe6;
+  cursor: help;
+  transition: all 0.3s ease;
+}
+
+.production-status-indicator:hover {
+  transform: scale(1.2);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
 </style>
\ No newline at end of file