feat(RealTimeInventory): 添加UID生产状态指示器及数据获取功能

添加UID生产状态指示器组件,用于实时显示生产进度
新增fetchUIDProductionStatus方法获取生产状态数据
实现生产状态映射和格式化功能
添加相关样式和交互效果
master
huangjinysf 2 months ago
parent 21cbd0b457
commit 34419d8652

@ -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>
Loading…
Cancel
Save