配送车辆调度系统 - 实时监管食材供应链
配送车辆调度系统，帮助您轻松管理食材供应链，实时监控配送车辆状态，优化配送效率。
功能介绍
- 选择日期，快速筛选需要调度的日期。
- 选择配送区域，针对不同区域进行车辆分配。
- 选择配送车辆，根据车辆类型和运力进行分配。
- 分配任务，将配送任务分配给指定的车辆。
- 查看已分配任务，实时了解车辆的任务进度。
使用说明
- 在"选择日期"输入框中选择需要调度的日期。
- 在"选择配送区域"下拉菜单中选择配送区域。
- 在"选择配送车辆"下拉菜单中选择配送车辆。
- 点击"调度车辆"按钮，将任务分配给选定的车辆。
- 在"已分配任务"列表中查看已分配给车辆的任务。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>配送车辆调度</title>
<link rel="stylesheet" href="./semantic.min.css">
<style>
.ui.container {
margin-top: 2rem;
}
</style>
</head>
<body>
<div class="ui container">
<h1 class="ui dividing header">配送车辆调度</h1>
<form class="ui form">
<div class="field">
<label>选择日期</label>
<input type="date" placeholder="选择日期" required>
</div>
<div class="field">
<label>选择配送区域</label>
<select class="ui dropdown" name="area" required>
<option value="">选择配送区域</option>
<option value="area1">区域1</option>
<option value="area2">区域2</option>
<option value="area3">区域3</option>
</select>
</div>
<div class="field">
<label>选择配送车辆</label>
<select class="ui dropdown" name="vehicle" required>
<option value="">选择配送车辆</option>
<option value="vehicle1">车辆1</option>
<option value="vehicle2">车辆2</option>
<option value="vehicle3">车辆3</option>
</select>
</div>
<button class="ui primary button" type="submit">调度车辆</button>
</form>
<div id="assignedTasks" style="display: none;">
<h2 class="ui dividing header">已分配任务</h2>
<!-- 根据已分配车辆动态创建任务列表 -->
</div>
<h2 class="ui dividing header">配送任务列表</h2>
<table class="ui celled table">
<thead>
<tr>
<th>配送单号</th>
<th>配送地址</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>地址1</td>
<td>备注1</td>
</tr>
<tr>
<td>002</td>
<td>地址2</td>
<td>备注2</td>
</tr>
<!-- 其他配送任务行 -->
</tbody>
</table>
</div>
<script src="./jquery.min.js"></script>
<script src="./semantic.min.js"></script>
<script>
$('.ui.dropdown').dropdown();
const form = document.querySelector('.ui.form');
const scheduleBtn = form.querySelector('.ui.primary.button');
const taskTable = form.nextElementSibling.querySelector('.ui.celled.table');
scheduleBtn.addEventListener('click', function(event) {
event.preventDefault();
const selectedDate = form.querySelector('input[type="date"]').value;
const selectedArea = form.querySelector('.ui.dropdown[name="area"]').value;
const selectedVehicle = form.querySelector('.ui.dropdown[name="vehicle"]').value;
if (!selectedDate || !selectedArea || !selectedVehicle) {
return;
}
// 执行配送车辆调度逻辑，将任务分配给选定的车辆
// 示例：将任务添加到已分配车辆的任务列表中
const tasks = Array.from(taskTable.querySelectorAll('tbody tr'));
const assignedTable = document.getElementById(selectedVehicle + '-table');
tasks.forEach(task => {
assignedTable.querySelector('tbody').appendChild(task.cloneNode(true));
});
const assignedTasks = document.getElementById('assignedTasks');
assignedTasks.style.display = 'block';
if (!assignedTable) {
const tableHtml = `
<table class="ui celled table" id="${selectedVehicle}-table">
<thead>
<tr>
<th>配送单号</th>
<th>配送地址</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<!-- 已分配任务行 -->
</tbody>
</table>
`;
assignedTasks.innerHTML += tableHtml;
}
form.reset();
});
</script>
</body>
</html>
联系我们
如果您有任何问题或建议，请随时联系我们。
免责声明
本系统仅供参考，实际使用时可能需要进行调整和优化。
原文地址: https://www.cveoy.top/t/topic/OoN 著作权归作者所有。请勿转载和采集!