118 lines
4.7 KiB
HTML
118 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>车辆管理系统</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>🚗 车辆管理系统</h1>
|
|
<p class="subtitle">Vehicle Management System</p>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- 统计卡片 -->
|
|
<section class="stats">
|
|
<div class="stat-card">
|
|
<span class="stat-num">{{ stats.total }}</span>
|
|
<span class="stat-label">车辆总数</span>
|
|
</div>
|
|
<div class="stat-card">
|
|
<span class="stat-num">{{ stats.by_status.get('available', 0) }}</span>
|
|
<span class="stat-label">可用</span>
|
|
</div>
|
|
<div class="stat-card">
|
|
<span class="stat-num">{{ stats.by_status.get('in_use', 0) }}</span>
|
|
<span class="stat-label">使用中</span>
|
|
</div>
|
|
<div class="stat-card">
|
|
<span class="stat-num">{{ stats.by_status.get('maintenance', 0) }}</span>
|
|
<span class="stat-label">维修中</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 搜索栏 -->
|
|
<section class="toolbar">
|
|
<form method="get" action="/" class="search-form">
|
|
<input type="text" name="q" placeholder="搜索车牌 / 品牌 / 型号" value="{{ keyword }}">
|
|
<button type="submit">搜索</button>
|
|
{% if keyword %}
|
|
<a class="btn btn-clear" href="/">清除</a>
|
|
{% endif %}
|
|
</form>
|
|
<button class="btn btn-primary" onclick="openAddModal()">+ 添加车辆</button>
|
|
</section>
|
|
|
|
<!-- 车辆列表 -->
|
|
<section class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>车牌</th>
|
|
<th>品牌</th>
|
|
<th>型号</th>
|
|
<th>年份</th>
|
|
<th>颜色</th>
|
|
<th>状态</th>
|
|
<th>车主</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% if vehicles %}
|
|
{% for v in vehicles %}
|
|
<tr>
|
|
<td>{{ v.id }}</td>
|
|
<td><strong>{{ v.plate }}</strong></td>
|
|
<td>{{ v.brand }}</td>
|
|
<td>{{ v.model }}</td>
|
|
<td>{{ v.year or '-' }}</td>
|
|
<td>{{ v.color or '-' }}</td>
|
|
<td><span class="badge badge-{{ v.status }}">{{ status_text(v.status) }}</span></td>
|
|
<td>{{ v.owner or '-' }}</td>
|
|
<td class="actions">
|
|
<a class="btn btn-sm" href="/edit/{{ v.id }}">编辑</a>
|
|
<button class="btn btn-sm btn-danger" onclick="deleteVehicle({{ v.id }})">删除</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% else %}
|
|
<tr><td colspan="9" class="empty">暂无车辆数据</td></tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- 添加车辆弹窗 -->
|
|
<div id="addModal" class="modal">
|
|
<div class="modal-content">
|
|
<h2>添加车辆</h2>
|
|
<form id="addForm" onsubmit="submitAdd(event)">
|
|
<label>车牌号 *<input type="text" name="plate" required></label>
|
|
<label>品牌 *<input type="text" name="brand" required></label>
|
|
<label>型号 *<input type="text" name="model" required></label>
|
|
<label>年份<input type="number" name="year" min="1900" max="2100"></label>
|
|
<label>颜色<input type="text" name="color"></label>
|
|
<label>状态
|
|
<select name="status">
|
|
<option value="available">可用</option>
|
|
<option value="in_use">使用中</option>
|
|
<option value="maintenance">维修中</option>
|
|
</select>
|
|
</label>
|
|
<label>车主<input type="text" name="owner"></label>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn" onclick="closeAddModal()">取消</button>
|
|
<button type="submit" class="btn btn-primary">保存</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/script.js"></script>
|
|
</body>
|
|
</html>
|