function displaySchedule() {
const tbody = document.querySelector('#scheduleTable tbody');
tbody.innerHTML = '';
// 按生产日期分组显示
const productionGroups = [...new Set(scheduleData.map(item => item.productionDate))].sort((a, b) =>
new Date(a) - new Date(b)
);
console.log("fest",productionGroups);
for (const productionDate of productionGroups) {
// 获取该生产日期的所有排产记录
const productions = scheduleData.filter(item => item.productionDate === productionDate);
// 检查该生产日期是否有超期订单
const hasLateOrders = productions.some(item => item.isLate);
// 添加生产日期标题行
const headerRow = document.createElement('tr');
headerRow.style.backgroundColor = '#f0f0f0';
headerRow.innerHTML = `
<td colspan="6">
<strong>生产日期: ${productionDate}</strong>
${hasLateOrders ? '<span class="warning"> (有超期订单)</span>' : '<span class="on-time"> (全部按时)</span>'}
</td>
`;
tbody.appendChild(headerRow);
// 添加该生产日期的所有排产记录
for (const production of productions) {
// 获取该生产记录对应的订单
const order = rawData.find(item =>
item.productId === production.productId &&
item.deliveryDate === production.deliveryDate
);
if (order) {
const row = document.createElement('tr');
if (production.isLate) {
row.classList.add('warning');
}
row.innerHTML = `
<td>${production.productId}</td>
<td>${production.quantity}</td>
<td>${production.deliveryDate}</td>
<td>${production.dailyMax}</td>
<td>${production.productionDate}</td>
<td>${production.isLate ? '是' : '否'}</td>
`;
tbody.appendChild(row);
}
}
}
}
调用API模块代码
function generateSchedule() {
const btn = document.getElementById('generateBtn');
const loading = document.getElementById('loading');
btn.disabled = true;
loading.style.display = 'inline';
setTimeout(() => {
try {
console.log("开始调用后端生成排产计划...");
if (rawData.length === 0) {
alert('请先导入Excel数据');
return;
}
const workers = parseInt(document.getElementById('workers').value) || 3;
const productivity = parseInt(document.getElementById('productivity').value) || 70;
const startDateStr = document.getElementById('startDate').value;
if (!startDateStr) {
alert('请设置排产开始日期');
return;
}
fetch('https://ytpmc.anhuihym.top/pmc/schedule.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
data: rawData,
workers: workers,
productivity: productivity,
startDate: startDateStr
})
})
.then(response => response.json())
.then(result => {
if (result.success) {
console.log("排产数据:", result.scheduleData);
console.log("预警数据:", result.warningData);
displaySchedule(result.scheduleData);
displayWarnings(result.warningData);
updateSummary();
// 5. 显示结果
displaySchedule();
displayWarnings();
updateSummary();
} else {
alert('排产失败: ' + result.message);
}
})
.catch(error => {
console.error("调用排产API出错:", error);
alert('调用排产API出错: ' + error.message);
})
.finally(() => {
btn.disabled = false;
loading.style.display = 'none';
});
} catch (error) {
console.error("生成排产计划时出错:", error);
alert('生成排产计划时出错: ' + error.message);
btn.disabled = false;
loading.style.display = 'none';
}
}, 100);
}
- 函数概述
displaySchedule() 函数负责将排产计划数据 scheduleData 显示在 HTML 表格中。它首先清空表格的 tbody 部分,然后根据生产日期对数据进行分组,并为每个组添加标题行和相应的排产记录行。 - 外部变量依赖
scheduleData:包含排产计划数据的数组。每个元素应包含 productionDate, productId, quantity, deliveryDate, dailyMax, 和 isLate 等属性。
rawData:包含原始订单数据的数组。每个元素应包含 productId 和 deliveryDate 等属性,用于与 scheduleData 中的记录进行匹配。 - 函数逻辑
清空表格:使用 tbody.innerHTML = ''; 清空表格的 tbody 部分。
按生产日期分组:使用 Set 和 map 方法获取唯一的生产日期列表,并按日期排序。
遍历每个生产日期:为每个生产日期创建一个标题行,并根据是否有超期订单添加相应的警告信息。
遍历该生产日期的所有排产记录:为每个排产记录创建一个表格行,并根据是否超期添加警告类。
匹配订单数据:在创建排产记录行时,从 rawData 中找到对应的订单数据,以获取更详细的信息(虽然在当前函数实现中并未直接使用这些信息,但可能是为了后续扩展)。
导致无法显示的主要原因是后端赋值时被全局变量作用域污染导致仍然时空数组、
修复后如下
if (result.success) {
// 深拷贝数据(如需独立性)
scheduleData = JSON.parse(JSON.stringify(result.scheduleData));
warningData = JSON.parse(JSON.stringify(result.warningData));
// 使用全局变量渲染
displaySchedule(scheduleData);
displayWarnings(warningData);
updateSummary();
}
评论 (0)