cfae122685
Author: Yang Lu School: Liaoning Institute of Science and Technology Major: Computer Science and Technology Class: BZ246 Tech Stack: - Backend: Spring Boot 2.7.18 + JPA + MySQL - Frontend: HTML5 + CSS3 + JavaScript Features: - User Management (Admin/Staff/Customer roles) - Vehicle Archive Management - Service Order Management - Parts Inventory Management - Online Appointment Service - Data Statistics and Analysis Generated with Claude Code Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
301 lines
13 KiB
HTML
301 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>管理员仪表板 - 车管家4S店车辆维保管理系统</title>
|
|
<link rel="stylesheet" href="../css/common.css">
|
|
<link rel="stylesheet" href="../css/dashboard.css">
|
|
</head>
|
|
<body>
|
|
<div class="dashboard-container">
|
|
<!-- 侧边栏 -->
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>车管家系统</h2>
|
|
<p>管理员控制台</p>
|
|
</div>
|
|
<div class="sidebar-menu">
|
|
<div class="menu-item active" onclick="showSection('overview')">
|
|
<span class="menu-icon">📊</span>
|
|
<span>系统概览</span>
|
|
</div>
|
|
<div class="menu-item" onclick="showSection('users')">
|
|
<span class="menu-icon">👥</span>
|
|
<span>用户管理</span>
|
|
</div>
|
|
<div class="menu-item" onclick="showSection('vehicles')">
|
|
<span class="menu-icon">🚗</span>
|
|
<span>车辆管理</span>
|
|
</div>
|
|
<div class="menu-item" onclick="showSection('orders')">
|
|
<span class="menu-icon">📋</span>
|
|
<span>工单管理</span>
|
|
</div>
|
|
<div class="menu-item" onclick="showSection('parts')">
|
|
<span class="menu-icon">🔧</span>
|
|
<span>配件管理</span>
|
|
</div>
|
|
<div class="menu-item" onclick="showSection('appointments')">
|
|
<span class="menu-icon">📅</span>
|
|
<span>预约管理</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主内容区 -->
|
|
<div class="main-content">
|
|
<!-- 顶部导航 -->
|
|
<div class="top-nav">
|
|
<div class="top-nav-left">
|
|
<h1>管理员仪表板</h1>
|
|
</div>
|
|
<div class="top-nav-right">
|
|
<div class="user-info">
|
|
<div class="user-avatar" id="userAvatar">A</div>
|
|
<span class="user-name" id="userName">管理员</span>
|
|
</div>
|
|
<button class="btn-logout" onclick="utils.logout()">退出登录</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 系统概览 -->
|
|
<div id="overview-section" class="section">
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-icon blue">👥</div>
|
|
<div class="stat-info">
|
|
<h3 id="totalUsers">0</h3>
|
|
<p>用户总数</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon green">🚗</div>
|
|
<div class="stat-info">
|
|
<h3 id="totalVehicles">0</h3>
|
|
<p>车辆总数</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon orange">📋</div>
|
|
<div class="stat-info">
|
|
<h3 id="totalOrders">0</h3>
|
|
<p>工单总数</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon red">🔧</div>
|
|
<div class="stat-info">
|
|
<h3 id="lowStockParts">0</h3>
|
|
<p>库存预警</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-card">
|
|
<div class="content-header">
|
|
<h2>最近工单</h2>
|
|
</div>
|
|
<div class="content-body">
|
|
<table class="table" id="recentOrdersTable">
|
|
<thead>
|
|
<tr>
|
|
<th>工单编号</th>
|
|
<th>服务类型</th>
|
|
<th>车牌号</th>
|
|
<th>状态</th>
|
|
<th>创建时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="recentOrdersBody">
|
|
<tr><td colspan="5" class="empty-state">加载中...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 用户管理 -->
|
|
<div id="users-section" class="section" style="display: none;">
|
|
<div class="toolbar">
|
|
<div class="toolbar-left">
|
|
<button class="btn btn-primary" onclick="showAddUserModal()">添加用户</button>
|
|
</div>
|
|
<div class="search-box">
|
|
<input type="text" id="searchUser" placeholder="搜索用户..." onkeyup="searchUsers()">
|
|
<button>🔍</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-card">
|
|
<div class="content-body">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>用户名</th>
|
|
<th>真实姓名</th>
|
|
<th>手机号</th>
|
|
<th>角色</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="usersTableBody">
|
|
<tr><td colspan="7" class="empty-state">加载中...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 车辆管理 -->
|
|
<div id="vehicles-section" class="section" style="display: none;">
|
|
<div class="toolbar">
|
|
<div class="toolbar-left">
|
|
<button class="btn btn-primary" onclick="showAddVehicleModal()">添加车辆</button>
|
|
</div>
|
|
<div class="search-box">
|
|
<input type="text" id="searchVehicle" placeholder="搜索车辆..." onkeyup="searchVehicles()">
|
|
<button>🔍</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-card">
|
|
<div class="content-body">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>车牌号</th>
|
|
<th>品牌型号</th>
|
|
<th>颜色</th>
|
|
<th>里程数</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="vehiclesTableBody">
|
|
<tr><td colspan="6" class="empty-state">加载中...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 工单管理 -->
|
|
<div id="orders-section" class="section" style="display: none;">
|
|
<div class="toolbar">
|
|
<div class="toolbar-left">
|
|
<button class="btn btn-primary" onclick="showAddOrderModal()">创建工单</button>
|
|
<select id="orderStatusFilter" onchange="filterOrders()">
|
|
<option value="">全部状态</option>
|
|
<option value="pending">待处理</option>
|
|
<option value="appointed">已预约</option>
|
|
<option value="in_progress">进行中</option>
|
|
<option value="completed">已完成</option>
|
|
<option value="cancelled">已取消</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-card">
|
|
<div class="content-body">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>工单编号</th>
|
|
<th>服务类型</th>
|
|
<th>车牌号</th>
|
|
<th>总费用</th>
|
|
<th>状态</th>
|
|
<th>创建时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="ordersTableBody">
|
|
<tr><td colspan="7" class="empty-state">加载中...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 配件管理 -->
|
|
<div id="parts-section" class="section" style="display: none;">
|
|
<div class="toolbar">
|
|
<div class="toolbar-left">
|
|
<button class="btn btn-primary" onclick="showAddPartModal()">添加配件</button>
|
|
<button class="btn btn-warning" onclick="showLowStockParts()">库存预警</button>
|
|
</div>
|
|
<div class="search-box">
|
|
<input type="text" id="searchPart" placeholder="搜索配件..." onkeyup="searchParts()">
|
|
<button>🔍</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-card">
|
|
<div class="content-body">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>配件编号</th>
|
|
<th>配件名称</th>
|
|
<th>类别</th>
|
|
<th>库存数量</th>
|
|
<th>单价</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="partsTableBody">
|
|
<tr><td colspan="7" class="empty-state">加载中...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 预约管理 -->
|
|
<div id="appointments-section" class="section" style="display: none;">
|
|
<div class="toolbar">
|
|
<div class="toolbar-left">
|
|
<select id="appointmentStatusFilter" onchange="filterAppointments()">
|
|
<option value="">全部状态</option>
|
|
<option value="pending">待确认</option>
|
|
<option value="confirmed">已确认</option>
|
|
<option value="completed">已完成</option>
|
|
<option value="cancelled">已取消</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-card">
|
|
<div class="content-body">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>预约ID</th>
|
|
<th>服务类型</th>
|
|
<th>车牌号</th>
|
|
<th>预约时间</th>
|
|
<th>联系电话</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="appointmentsTableBody">
|
|
<tr><td colspan="7" class="empty-state">加载中...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../js/config.js"></script>
|
|
<script src="../js/api.js"></script>
|
|
<script src="../js/admin-dashboard.js"></script>
|
|
</body>
|
|
</html>
|