智能配送车辆调度系统
<!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>
<pre><code><form class="ui form">
<div class="field">
<label>选择日期</label>
<input type="date" placeholder="选择日期" required>
</div>
<div class="field">
<label>选择配送区域</label>
<select class="ui dropdown" id="quyu" name="area" required>
<option value="">选择配送区域</option>
<option value="区域1">区域1</option>
<option value="区域2">区域2</option>
<option value="区域3">区域3</option>
</select>
</div>
<div class="field">
<label>选择配送车辆</label>
<select class="ui dropdown" id="cheliang" name="vehicle" required>
<option value="">选择配送车辆</option>
<option value="车辆1">车辆1</option>
<option value="车辆2">车辆2</option>
<option value="车辆3">车辆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>
</code></pre>
</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');
scheduleBtn.addEventListener('click', function(event) {
event.preventDefault();
const selectedDate = form.querySelector('input[type="date"]');
const selectedDateValue = selectedDate.value;
const selectedAreaValue = $("#quyu").val();
const selectedVehicleValue = $("#cheliang").val();
// 创建任务表格
const taskTable = form.nextElementSibling.querySelector('.ui.celled.table');
// 执行配送车辆调度逻辑，将任务分配给选定的车辆
// 示例：将任务添加到已分配车辆的任务列表中
const tasks = Array.from(taskTable.querySelectorAll('tbody tr'));
let assignedTable = document.getElementById(selectedVehicleValue + '-table');
tasks.forEach(task => {
if (assignedTable && assignedTable.querySelector('tbody')){
assignedTable.querySelector('tbody').appendChild(task.cloneNode(true));
task.parentNode.removeChild(task);
}
});
const assignedTasks = document.getElementById('assignedTasks');
assignedTasks.style.display = 'block';
if (!assignedTable) {
const tableHtml = `
<table class="ui celled table" id="${selectedVehicleValue}-table">
<thead>
<tr>
<th>配送单号</th>
<th>配送地址</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<!-- 已分配任务行 -->
</tbody>
</table>
`;
assignedTasks.innerHTML += tableHtml;
assignedTable = document.getElementById(selectedVehicleValue + '-table');
}
form.reset();
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/O7p 著作权归作者所有。请勿转载和采集!