438 lines
22 KiB
HTML
438 lines
22 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>CRM客户管理系统</title>
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="app-container">
|
||
<!-- Sidebar -->
|
||
<aside class="sidebar">
|
||
<div class="sidebar-header">
|
||
<div class="logo">
|
||
<svg width="24" height="24" viewBox="0 0 50 43" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M30.8799 0.0634766C32.1561 0.191098 35.0914 0.25518 40.1953 3.12598C46.9838 7.51557 49.4463 14.7383 49.8291 17.8008C50.297 20.8846 50.084 28.5324 45.4902 34.4531C40.8966 40.3736 33.8362 42.194 30.8799 42.3643H9.95215V31.1357C4.45541 31.1354 0 26.6803 0 21.1836C2.62861e-05 15.6869 4.45542 11.2308 9.95215 11.2305V0H30.8799V0.0634766ZM30.8799 11.3564C28.7219 11.1986 15.882 11.302 11.4531 11.3428C16.2383 12.0662 19.9062 16.1966 19.9062 21.1836C19.9062 26.1365 16.288 30.2432 11.5508 31.0078H30.8799C33.2407 30.4973 39.1744 27.7535 38.6641 20.2891C38.2557 14.3174 33.3045 11.8457 30.8799 11.3564Z"
|
||
fill="currentColor"></path>
|
||
</svg>
|
||
<span>CRM系统</span>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="sidebar-nav">
|
||
<a href="#" class="nav-item active" data-section="customer">
|
||
<i class="fas fa-user-plus"></i>
|
||
<span>客户信息管理</span>
|
||
</a>
|
||
<a href="#" class="nav-item" data-section="dashboard">
|
||
<i class="fas fa-chart-line"></i>
|
||
<span>数据仪表板</span>
|
||
</a>
|
||
</nav>
|
||
|
||
<div class="sidebar-footer">
|
||
<div class="user-info">
|
||
<i class="fas fa-user-circle"></i>
|
||
<span>管理员</span>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main Content -->
|
||
<div class="main-content">
|
||
<!-- Top Header -->
|
||
<header class="top-header">
|
||
<div class="header-left">
|
||
<button class="menu-toggle" id="menuToggle">
|
||
<i class="fas fa-bars"></i>
|
||
</button>
|
||
<h1 id="pageTitle">客户信息管理</h1>
|
||
</div>
|
||
<div class="header-right">
|
||
<div class="search-box">
|
||
<i class="fas fa-search"></i>
|
||
<input type="text" id="customerSearchInput" placeholder="搜索客户...">
|
||
</div>
|
||
<button class="icon-btn">
|
||
<i class="fas fa-bell"></i>
|
||
</button>
|
||
<button class="icon-btn">
|
||
<i class="fas fa-cog"></i>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Content Area -->
|
||
<main class="content-area">
|
||
<!-- Customer Management Section -->
|
||
<section id="customerSection" class="content-section active">
|
||
<div class="action-bar">
|
||
<button id="addCustomerBtn" class="btn-primary">
|
||
<i class="fas fa-plus"></i>
|
||
添加客户
|
||
</button>
|
||
<button id="importBtn" class="btn-secondary">
|
||
<i class="fas fa-file-import"></i>
|
||
导入CSV
|
||
</button>
|
||
<div class="filter-group">
|
||
<label for="customerFilter">筛选客户：</label>
|
||
<select id="customerFilter" class="filter-select">
|
||
<option value="">全部客户</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Customer List -->
|
||
<div class="card table-card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-list"></i> 客户进度</h3>
|
||
<div class="table-actions">
|
||
<button id="refreshCustomersBtn" class="icon-btn" title="刷新">
|
||
<i class="fas fa-sync-alt"></i>
|
||
</button>
|
||
<button id="exportCustomersBtn" class="icon-btn" title="导出">
|
||
<i class="fas fa-download"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table id="customerTable">
|
||
<thead>
|
||
<tr>
|
||
<th>客户</th>
|
||
<th>版本</th>
|
||
<th>描述</th>
|
||
<th>解决方案</th>
|
||
<th>类型</th>
|
||
<th>模块</th>
|
||
<th>状态与进度</th>
|
||
<th>报告人</th>
|
||
<th>时间</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="customerTableBody">
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<div class="pagination">
|
||
<div class="pagination-info">
|
||
<span id="paginationInfo">显示 0-0 共 0 条</span>
|
||
</div>
|
||
<div class="pagination-controls">
|
||
<button id="firstPage" class="pagination-btn" disabled>
|
||
<i class="fas fa-angle-double-left"></i>
|
||
</button>
|
||
<button id="prevPage" class="pagination-btn" disabled>
|
||
<i class="fas fa-angle-left"></i>
|
||
</button>
|
||
<div id="pageNumbers" class="page-numbers">
|
||
</div>
|
||
<button id="nextPage" class="pagination-btn" disabled>
|
||
<i class="fas fa-angle-right"></i>
|
||
</button>
|
||
<button id="lastPage" class="pagination-btn" disabled>
|
||
<i class="fas fa-angle-double-right"></i>
|
||
</button>
|
||
</div>
|
||
<div class="pagination-size">
|
||
<select id="pageSizeSelect">
|
||
<option value="10">10条/页</option>
|
||
<option value="20">20条/页</option>
|
||
<option value="50">50条/页</option>
|
||
<option value="100">100条/页</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Dashboard Section -->
|
||
<section id="dashboardSection" class="content-section">
|
||
<div class="dashboard-stats">
|
||
<div class="stat-card">
|
||
<div class="stat-icon">
|
||
<i class="fas fa-users"></i>
|
||
</div>
|
||
<div class="stat-info">
|
||
<h3 id="totalCustomers">0</h3>
|
||
<p>总客户数</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">
|
||
<i class="fas fa-user-plus"></i>
|
||
</div>
|
||
<div class="stat-info">
|
||
<h3 id="newCustomers">0</h3>
|
||
<p>本月新增</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">
|
||
<i class="fas fa-box"></i>
|
||
</div>
|
||
<div class="stat-info">
|
||
<h3 id="totalProducts">0</h3>
|
||
<p>产品数</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">
|
||
<i class="fas fa-check-circle"></i>
|
||
</div>
|
||
<div class="stat-info">
|
||
<h3 id="completedTasks">0</h3>
|
||
<p>已完成</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dashboard-filters">
|
||
<div class="filter-group">
|
||
<label>日期范围:</label>
|
||
<input type="date" id="startDate">
|
||
<span>至</span>
|
||
<input type="date" id="endDate">
|
||
<button id="applyFilters" class="btn-primary">
|
||
<i class="fas fa-filter"></i>
|
||
应用筛选
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dashboard-grid">
|
||
<div class="card chart-card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-chart-pie"></i> 数据分布</h3>
|
||
<div class="chart-controls">
|
||
<select id="chartFieldSelect" class="chart-field-select">
|
||
<option value="intendedProduct">客户</option>
|
||
<option value="type">类型</option>
|
||
<option value="module">模块</option>
|
||
<option value="reporter">报告人</option>
|
||
</select>
|
||
<input type="text" id="statusChartTitle" class="chart-title-input"
|
||
placeholder="自定义标题" value="数据分布">
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<canvas id="statusChart"></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="card chart-card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-chart-doughnut"></i> 客户类型</h3>
|
||
<div class="chart-controls">
|
||
<select id="typeChartFieldSelect" class="chart-field-select">
|
||
<option value="intendedProduct">客户</option>
|
||
<option value="type">类型</option>
|
||
<option value="module">模块</option>
|
||
<option value="reporter">报告人</option>
|
||
</select>
|
||
<input type="text" id="typeChartTitle" class="chart-title-input" placeholder="自定义标题"
|
||
value="客户类型">
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<canvas id="typeChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal for creating customer -->
|
||
<div id="createModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3><i class="fas fa-user-plus"></i> 添加新客户</h3>
|
||
<span class="close">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="createCustomerForm">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="createIntendedProduct">日期</label>
|
||
<input type="date" id="createIntendedProduct" name="intendedProduct">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="createCustomerName">客户名称</label>
|
||
<input type="text" id="createCustomerName" name="customerName" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="createVersion">版本</label>
|
||
<input type="text" id="createVersion" name="version">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="createType">类型</label>
|
||
<input type="text" id="createType" name="type">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="createDescription">描述</label>
|
||
<textarea id="createDescription" name="description" rows="3"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="createSolution">解决方案</label>
|
||
<textarea id="createSolution" name="solution" rows="3"></textarea>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="createModule">模块</label>
|
||
<select id="createModule" name="module">
|
||
<option value="">请选择模块</option>
|
||
<option value="数据生成">数据生成</option>
|
||
<option value="数据集">数据集</option>
|
||
<option value="数据空间">数据空间</option>
|
||
<option value="模型工坊">模型工坊</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="createStatusProgress">状态与进度</label>
|
||
<input type="text" id="createStatusProgress" name="statusProgress">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="createReporter">报告人</label>
|
||
<input type="text" id="createReporter" name="reporter">
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn-primary">
|
||
<i class="fas fa-save"></i>
|
||
创建客户
|
||
</button>
|
||
<button type="button" class="btn-secondary cancel-create">
|
||
<i class="fas fa-times"></i>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal for importing customers -->
|
||
<div id="importModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3><i class="fas fa-file-import"></i> 导入客户</h3>
|
||
<span class="close">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="importFileForm" enctype="multipart/form-data">
|
||
<div class="form-group">
|
||
<label for="importFile">选择文件（支持CSV和XLSX）</label>
|
||
<div class="file-upload">
|
||
<i class="fas fa-cloud-upload-alt"></i>
|
||
<input type="file" id="importFile" name="file" accept=".csv,.xlsx" required>
|
||
<span id="fileName">选择文件...</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn-primary">
|
||
<i class="fas fa-upload"></i>
|
||
导入
|
||
</button>
|
||
<button type="button" class="btn-secondary cancel-import">
|
||
<i class="fas fa-times"></i>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal for editing customer -->
|
||
<div id="editModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3><i class="fas fa-edit"></i> 编辑客户</h3>
|
||
<span class="close">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="editCustomerForm">
|
||
<input type="hidden" id="editCustomerId">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="editIntendedProduct">日期</label>
|
||
<input type="date" id="editIntendedProduct" name="intendedProduct">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editCustomerName">客户名称</label>
|
||
<input type="text" id="editCustomerName" name="customerName">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="editVersion">版本</label>
|
||
<input type="text" id="editVersion" name="version">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editType">类型</label>
|
||
<input type="text" id="editType" name="type">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editDescription">描述</label>
|
||
<textarea id="editDescription" name="description" rows="3"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editSolution">解决方案</label>
|
||
<textarea id="editSolution" name="solution" rows="3"></textarea>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="editModule">模块</label>
|
||
<select id="editModule" name="module">
|
||
<option value="">请选择模块</option>
|
||
<option value="数据生成">数据生成</option>
|
||
<option value="数据集">数据集</option>
|
||
<option value="数据空间">数据空间</option>
|
||
<option value="模型工坊">模型工坊</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editStatusProgress">状态与进度</label>
|
||
<input type="text" id="editStatusProgress" name="statusProgress">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editReporter">报告人</label>
|
||
<input type="text" id="editReporter" name="reporter">
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn-primary">
|
||
<i class="fas fa-save"></i>
|
||
更新客户
|
||
</button>
|
||
<button type="button" class="btn-secondary cancel-edit">
|
||
<i class="fas fa-times"></i>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/js/main.js"></script>
|
||
</body>
|
||
|
||
</html> |