1021 行
34 KiB
HTML
可执行文件
1021 行
34 KiB
HTML
可执行文件
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<title>{$logoinfo.name}后台管理系统</title>
|
||
<link href="{$logoinfo['icourl']}" type="image/x-icon" rel="shortcut icon">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<!-- Bootstrap 5 CSS -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||
<!-- Bootstrap Icons -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
||
<!-- Chart.js -->
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
|
||
<!-- jQuery -->
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||
|
||
<style>
|
||
:root {
|
||
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
--success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
||
--warning-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
--info-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||
--danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
||
|
||
--primary-color: #667eea;
|
||
--success-color: #11998e;
|
||
--warning-color: #f5576c;
|
||
--info-color: #4facfe;
|
||
--danger-color: #fa709a;
|
||
|
||
--bg-light: #f8fafc;
|
||
--bg-white: #ffffff;
|
||
--text-dark: #2d3748;
|
||
--text-muted: #718096;
|
||
--border-color: #e2e8f0;
|
||
|
||
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||
|
||
--radius-sm: 6px;
|
||
--radius-md: 12px;
|
||
--radius-lg: 16px;
|
||
--radius-xl: 20px;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
background: var(--bg-light);
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
color: var(--text-dark);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 现代化容器 */
|
||
.dashboard-container {
|
||
padding: 2rem;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* 页面头部 */
|
||
.dashboard-header {
|
||
background: var(--bg-white);
|
||
border-radius: var(--radius-lg);
|
||
padding: 2rem;
|
||
margin-bottom: 2rem;
|
||
box-shadow: var(--shadow-sm);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
.welcome-section {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.welcome-text h1 {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
color: var(--text-dark);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.welcome-text p {
|
||
color: var(--text-muted);
|
||
font-size: 1rem;
|
||
margin: 0;
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.btn-modern {
|
||
padding: 0.75rem 1.5rem;
|
||
border-radius: var(--radius-md);
|
||
font-weight: 500;
|
||
font-size: 0.875rem;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.btn-primary-modern {
|
||
background: var(--primary-gradient);
|
||
color: white;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.btn-primary-modern:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
color: white;
|
||
}
|
||
|
||
.btn-outline-modern {
|
||
background: transparent;
|
||
color: var(--primary-color);
|
||
border: 2px solid var(--border-color);
|
||
}
|
||
|
||
.btn-outline-modern:hover {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
border-color: var(--primary-color);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* 统计卡片网格 */
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 1.5rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.stats-card {
|
||
background: var(--bg-white);
|
||
border-radius: var(--radius-lg);
|
||
padding: 2rem;
|
||
box-shadow: var(--shadow-sm);
|
||
border: 1px solid var(--border-color);
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.stats-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.stats-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: var(--primary-gradient);
|
||
}
|
||
|
||
.stats-card.success::before { background: var(--success-gradient); }
|
||
.stats-card.warning::before { background: var(--warning-gradient); }
|
||
.stats-card.info::before { background: var(--info-gradient); }
|
||
.stats-card.danger::before { background: var(--danger-gradient); }
|
||
|
||
.stats-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.stats-info h3 {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
color: var(--text-dark);
|
||
margin-bottom: 0.5rem;
|
||
line-height: 1;
|
||
}
|
||
|
||
.stats-info p {
|
||
color: var(--text-muted);
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
margin: 0;
|
||
}
|
||
|
||
.stats-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: var(--radius-lg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.75rem;
|
||
color: white;
|
||
background: var(--primary-gradient);
|
||
}
|
||
|
||
.stats-icon.success { background: var(--success-gradient); }
|
||
.stats-icon.warning { background: var(--warning-gradient); }
|
||
.stats-icon.info { background: var(--info-gradient); }
|
||
.stats-icon.danger { background: var(--danger-gradient); }
|
||
|
||
/* 主要内容区域 */
|
||
.main-content {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr;
|
||
gap: 2rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.content-card {
|
||
background: var(--bg-white);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
border: 1px solid var(--border-color);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card-header {
|
||
padding: 1.5rem 2rem;
|
||
border-bottom: 1px solid var(--border-color);
|
||
background: rgba(102, 126, 234, 0.02);
|
||
}
|
||
|
||
.card-header h5 {
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
color: var(--text-dark);
|
||
margin: 0;
|
||
}
|
||
|
||
.card-header small {
|
||
color: var(--text-muted);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.card-body {
|
||
padding: 2rem;
|
||
}
|
||
|
||
/* 图表容器 */
|
||
.chart-container {
|
||
position: relative;
|
||
height: 350px;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 快捷操作网格 */
|
||
.quick-actions {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1rem;
|
||
}
|
||
|
||
.quick-action {
|
||
background: var(--primary-gradient);
|
||
color: white;
|
||
padding: 1.5rem;
|
||
border-radius: var(--radius-md);
|
||
text-decoration: none;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.quick-action:hover {
|
||
color: white;
|
||
transform: translateY(-3px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.quick-action i {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.quick-action span {
|
||
font-weight: 500;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.quick-action.success { background: var(--success-gradient); }
|
||
.quick-action.warning { background: var(--warning-gradient); }
|
||
.quick-action.info { background: var(--info-gradient); }
|
||
|
||
/* 底部内容区域 */
|
||
.bottom-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 2rem;
|
||
}
|
||
|
||
/* 活动列表 */
|
||
.activity-list {
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.activity-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 1rem 0;
|
||
border-bottom: 1px solid var(--border-color);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.activity-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.activity-item:hover {
|
||
background: rgba(102, 126, 234, 0.02);
|
||
margin: 0 -2rem;
|
||
padding-left: 2rem;
|
||
padding-right: 2rem;
|
||
}
|
||
|
||
.activity-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 1rem;
|
||
font-size: 1.125rem;
|
||
color: white;
|
||
background: var(--primary-gradient);
|
||
}
|
||
|
||
.activity-icon.success { background: var(--success-gradient); }
|
||
.activity-icon.warning { background: var(--warning-gradient); }
|
||
.activity-icon.info { background: var(--info-gradient); }
|
||
|
||
.activity-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.activity-title {
|
||
font-weight: 600;
|
||
color: var(--text-dark);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.activity-time {
|
||
font-size: 0.875rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* 加载动画 */
|
||
.loading-spinner {
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||
border-top: 2px solid white;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* 提示消息 */
|
||
.toast-container {
|
||
position: fixed;
|
||
top: 2rem;
|
||
right: 2rem;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.toast-modern {
|
||
background: var(--bg-white);
|
||
border-radius: var(--radius-md);
|
||
box-shadow: var(--shadow-xl);
|
||
border: 1px solid var(--border-color);
|
||
padding: 1rem 1.5rem;
|
||
margin-bottom: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
min-width: 320px;
|
||
animation: slideIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
transform: translateX(100%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.toast-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.875rem;
|
||
color: white;
|
||
}
|
||
|
||
.toast-icon.success { background: var(--success-color); }
|
||
.toast-icon.info { background: var(--info-color); }
|
||
.toast-icon.warning { background: var(--warning-color); }
|
||
.toast-icon.error { background: var(--danger-color); }
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 1200px) {
|
||
.main-content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.dashboard-container {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.dashboard-header {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.welcome-section {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.welcome-text h1 {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.stats-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.stats-info h3 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.bottom-content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.quick-actions {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.chart-container {
|
||
height: 250px;
|
||
}
|
||
}
|
||
|
||
/* 滚动条样式 */
|
||
.activity-list::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.activity-list::-webkit-scrollbar-track {
|
||
background: var(--bg-light);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.activity-list::-webkit-scrollbar-thumb {
|
||
background: var(--border-color);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.activity-list::-webkit-scrollbar-thumb:hover {
|
||
background: var(--text-muted);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="dashboard-container">
|
||
<!-- 页面头部 -->
|
||
<div class="dashboard-header">
|
||
<div class="welcome-section">
|
||
<div class="welcome-text">
|
||
<h1>欢迎回来,{$user.name}!</h1>
|
||
<p>今天是 <span id="currentDate"></span>,祝您工作愉快</p>
|
||
</div>
|
||
<div class="header-actions">
|
||
<button class="btn-outline-modern" onclick="refreshData()">
|
||
<i class="bi bi-arrow-clockwise"></i>
|
||
<span>刷新数据</span>
|
||
</button>
|
||
<button class="btn-primary-modern" onclick="exportReport()">
|
||
<i class="bi bi-download"></i>
|
||
<span>导出报告</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计卡片 -->
|
||
<div class="stats-grid">
|
||
<div class="stats-card">
|
||
<div class="stats-content">
|
||
<div class="stats-info">
|
||
<h3 id="totalOrders">0</h3>
|
||
<p>今日订单</p>
|
||
</div>
|
||
<div class="stats-icon">
|
||
<i class="bi bi-cart-check"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stats-card success">
|
||
<div class="stats-content">
|
||
<div class="stats-info">
|
||
<h3 id="totalRevenue">¥0</h3>
|
||
<p>今日营收</p>
|
||
</div>
|
||
<div class="stats-icon success">
|
||
<i class="bi bi-currency-yen"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stats-card warning">
|
||
<div class="stats-content">
|
||
<div class="stats-info">
|
||
<h3 id="totalUsers">0</h3>
|
||
<p>新增用户</p>
|
||
</div>
|
||
<div class="stats-icon warning">
|
||
<i class="bi bi-people"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stats-card info">
|
||
<div class="stats-content">
|
||
<div class="stats-info">
|
||
<h3 id="totalProducts">0</h3>
|
||
<p>商品总数</p>
|
||
</div>
|
||
<div class="stats-icon info">
|
||
<i class="bi bi-box-seam"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<div class="main-content">
|
||
<!-- 销售趋势图表 -->
|
||
<div class="content-card">
|
||
<div class="card-header">
|
||
<h5>销售趋势分析</h5>
|
||
<small>最近12个月的销售数据走势</small>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="chart-container">
|
||
<canvas id="salesChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快捷操作 -->
|
||
<div class="content-card">
|
||
<div class="card-header">
|
||
<h5>快捷操作</h5>
|
||
<small>常用功能快速入口</small>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="quick-actions">
|
||
<a href="javascript:void(0)" class="quick-action" onclick="addProduct()">
|
||
<i class="bi bi-plus-circle"></i>
|
||
<span>添加商品</span>
|
||
</a>
|
||
<a href="javascript:void(0)" class="quick-action success" onclick="viewOrders()">
|
||
<i class="bi bi-list-check"></i>
|
||
<span>查看订单</span>
|
||
</a>
|
||
<a href="javascript:void(0)" class="quick-action warning" onclick="manageUsers()">
|
||
<i class="bi bi-person-gear"></i>
|
||
<span>用户管理</span>
|
||
</a>
|
||
<a href="javascript:void(0)" class="quick-action info" onclick="viewReports()">
|
||
<i class="bi bi-graph-up"></i>
|
||
<span>数据报告</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部内容区域 -->
|
||
<div class="bottom-content">
|
||
<!-- 订单状态分布 -->
|
||
<div class="content-card">
|
||
<div class="card-header">
|
||
<h5>订单状态分布</h5>
|
||
<small>今日订单状态统计分析</small>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="chart-container">
|
||
<canvas id="orderStatusChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 最近活动 -->
|
||
<div class="content-card">
|
||
<div class="card-header">
|
||
<h5>最近活动</h5>
|
||
<small>系统最新动态和重要事件</small>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="activity-list" id="recentActivities">
|
||
<div class="activity-item">
|
||
<div class="activity-icon success">
|
||
<i class="bi bi-check-circle"></i>
|
||
</div>
|
||
<div class="activity-content">
|
||
<div class="activity-title">新订单已生成</div>
|
||
<div class="activity-time">2分钟前</div>
|
||
</div>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-icon">
|
||
<i class="bi bi-person-plus"></i>
|
||
</div>
|
||
<div class="activity-content">
|
||
<div class="activity-title">新用户注册</div>
|
||
<div class="activity-time">5分钟前</div>
|
||
</div>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-icon warning">
|
||
<i class="bi bi-exclamation-triangle"></i>
|
||
</div>
|
||
<div class="activity-content">
|
||
<div class="activity-title">库存预警提醒</div>
|
||
<div class="activity-time">10分钟前</div>
|
||
</div>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-icon info">
|
||
<i class="bi bi-gear"></i>
|
||
</div>
|
||
<div class="activity-content">
|
||
<div class="activity-title">系统设置更新</div>
|
||
<div class="activity-time">1小时前</div>
|
||
</div>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-icon success">
|
||
<i class="bi bi-truck"></i>
|
||
</div>
|
||
<div class="activity-content">
|
||
<div class="activity-title">订单已发货</div>
|
||
<div class="activity-time">2小时前</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提示消息容器 -->
|
||
<div class="toast-container" id="toastContainer"></div>
|
||
|
||
<script>
|
||
// 页面初始化
|
||
$(document).ready(function() {
|
||
updateCurrentDate();
|
||
loadDashboardData();
|
||
initCharts();
|
||
|
||
// 定时更新数据
|
||
setInterval(updateCurrentDate, 60000); // 每分钟更新时间
|
||
setInterval(loadDashboardData, 300000); // 每5分钟更新数据
|
||
});
|
||
|
||
// 更新当前日期
|
||
function updateCurrentDate() {
|
||
const now = new Date();
|
||
const options = {
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric',
|
||
weekday: 'long'
|
||
};
|
||
document.getElementById('currentDate').textContent = now.toLocaleDateString('zh-CN', options);
|
||
}
|
||
|
||
// 加载仪表盘数据
|
||
function loadDashboardData() {
|
||
// 模拟API调用
|
||
setTimeout(() => {
|
||
// 使用动画效果更新数字
|
||
animateNumber('totalOrders', Math.floor(Math.random() * 200) + 100);
|
||
animateNumber('totalRevenue', Math.floor(Math.random() * 50000) + 20000, '¥');
|
||
animateNumber('totalUsers', Math.floor(Math.random() * 100) + 50);
|
||
animateNumber('totalProducts', Math.floor(Math.random() * 300) + 200);
|
||
}, 500);
|
||
}
|
||
|
||
// 数字动画效果
|
||
function animateNumber(elementId, targetValue, prefix = '') {
|
||
const element = document.getElementById(elementId);
|
||
const duration = 1500;
|
||
const startValue = 0;
|
||
const increment = targetValue / (duration / 16);
|
||
let currentValue = startValue;
|
||
|
||
const timer = setInterval(() => {
|
||
currentValue += increment;
|
||
if (currentValue >= targetValue) {
|
||
currentValue = targetValue;
|
||
clearInterval(timer);
|
||
}
|
||
element.textContent = prefix + Math.floor(currentValue).toLocaleString();
|
||
}, 16);
|
||
}
|
||
|
||
// 初始化图表
|
||
function initCharts() {
|
||
initSalesChart();
|
||
initOrderStatusChart();
|
||
}
|
||
|
||
// 销售趋势图表
|
||
function initSalesChart() {
|
||
const ctx = document.getElementById('salesChart').getContext('2d');
|
||
|
||
// 创建渐变
|
||
const gradient = ctx.createLinearGradient(0, 0, 0, 400);
|
||
gradient.addColorStop(0, 'rgba(102, 126, 234, 0.3)');
|
||
gradient.addColorStop(1, 'rgba(102, 126, 234, 0.05)');
|
||
|
||
new Chart(ctx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||
datasets: [{
|
||
label: '销售额 (¥)',
|
||
data: [15000, 22000, 18000, 28000, 25000, 35000, 32000, 42000, 38000, 45000, 48000, 52000],
|
||
borderColor: '#667eea',
|
||
backgroundColor: gradient,
|
||
borderWidth: 3,
|
||
fill: true,
|
||
tension: 0.4,
|
||
pointBackgroundColor: '#667eea',
|
||
pointBorderColor: '#ffffff',
|
||
pointBorderWidth: 3,
|
||
pointRadius: 6,
|
||
pointHoverRadius: 8
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
display: false
|
||
},
|
||
tooltip: {
|
||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||
titleColor: '#ffffff',
|
||
bodyColor: '#ffffff',
|
||
borderColor: '#667eea',
|
||
borderWidth: 1,
|
||
cornerRadius: 8,
|
||
displayColors: false
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
grid: {
|
||
color: 'rgba(0, 0, 0, 0.05)',
|
||
drawBorder: false
|
||
},
|
||
ticks: {
|
||
color: '#718096',
|
||
callback: function(value) {
|
||
return '¥' + value.toLocaleString();
|
||
}
|
||
}
|
||
},
|
||
x: {
|
||
grid: {
|
||
display: false
|
||
},
|
||
ticks: {
|
||
color: '#718096'
|
||
}
|
||
}
|
||
},
|
||
interaction: {
|
||
intersect: false,
|
||
mode: 'index'
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 订单状态分布图表
|
||
function initOrderStatusChart() {
|
||
const ctx = document.getElementById('orderStatusChart').getContext('2d');
|
||
|
||
new Chart(ctx, {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['已完成', '处理中', '待付款', '已取消'],
|
||
datasets: [{
|
||
data: [65, 20, 10, 5],
|
||
backgroundColor: [
|
||
'#11998e',
|
||
'#667eea',
|
||
'#f5576c',
|
||
'#fa709a'
|
||
],
|
||
borderWidth: 0,
|
||
hoverOffset: 8
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
position: 'bottom',
|
||
labels: {
|
||
padding: 20,
|
||
usePointStyle: true,
|
||
pointStyle: 'circle',
|
||
color: '#718096',
|
||
font: {
|
||
size: 14,
|
||
weight: '500'
|
||
}
|
||
}
|
||
},
|
||
tooltip: {
|
||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||
titleColor: '#ffffff',
|
||
bodyColor: '#ffffff',
|
||
cornerRadius: 8,
|
||
displayColors: true,
|
||
callbacks: {
|
||
label: function(context) {
|
||
return context.label + ': ' + context.parsed + '%';
|
||
}
|
||
}
|
||
}
|
||
},
|
||
cutout: '60%'
|
||
}
|
||
});
|
||
}
|
||
|
||
// 快捷操作函数
|
||
function addProduct() {
|
||
if (parent && parent.MenuApp) {
|
||
parent.MenuApp.swapUrl('/index.php/Retail/Goods/goodsList', 1, '商品管理');
|
||
} else {
|
||
showToast('跳转到商品管理页面', 'info');
|
||
}
|
||
}
|
||
|
||
function viewOrders() {
|
||
if (parent && parent.MenuApp) {
|
||
parent.MenuApp.swapUrl('/index.php/Retail/Order/orderList', 1, '订单管理');
|
||
} else {
|
||
showToast('跳转到订单管理页面', 'info');
|
||
}
|
||
}
|
||
|
||
function manageUsers() {
|
||
if (parent && parent.MenuApp) {
|
||
parent.MenuApp.swapUrl('/index.php/Retail/User/userList', 1, '用户管理');
|
||
} else {
|
||
showToast('跳转到用户管理页面', 'info');
|
||
}
|
||
}
|
||
|
||
function viewReports() {
|
||
if (parent && parent.MenuApp) {
|
||
parent.MenuApp.swapUrl('/index.php/Retail/Report/index', 1, '数据报告');
|
||
} else {
|
||
showToast('跳转到数据报告页面', 'info');
|
||
}
|
||
}
|
||
|
||
// 刷新数据
|
||
function refreshData() {
|
||
const btn = event.target.closest('button');
|
||
const originalHTML = btn.innerHTML;
|
||
|
||
btn.innerHTML = '<div class="loading-spinner"></div><span>刷新中...</span>';
|
||
btn.disabled = true;
|
||
|
||
setTimeout(() => {
|
||
loadDashboardData();
|
||
btn.innerHTML = originalHTML;
|
||
btn.disabled = false;
|
||
showToast('数据已成功刷新', 'success');
|
||
}, 2000);
|
||
}
|
||
|
||
// 导出报告
|
||
function exportReport() {
|
||
showToast('报告导出功能正在开发中...', 'info');
|
||
}
|
||
|
||
// 显示提示消息
|
||
function showToast(message, type = 'info') {
|
||
const container = document.getElementById('toastContainer');
|
||
const toast = document.createElement('div');
|
||
toast.className = 'toast-modern';
|
||
|
||
const iconMap = {
|
||
success: 'check-circle',
|
||
error: 'x-circle',
|
||
warning: 'exclamation-triangle',
|
||
info: 'info-circle'
|
||
};
|
||
|
||
toast.innerHTML = `
|
||
<div class="toast-icon ${type}">
|
||
<i class="bi bi-${iconMap[type]}"></i>
|
||
</div>
|
||
<div class="toast-content">
|
||
<div style="font-weight: 500; color: var(--text-dark);">${message}</div>
|
||
</div>
|
||
`;
|
||
|
||
container.appendChild(toast);
|
||
|
||
// 自动移除
|
||
setTimeout(() => {
|
||
toast.style.animation = 'slideIn 0.3s ease reverse';
|
||
setTimeout(() => {
|
||
if (toast.parentNode) {
|
||
toast.parentNode.removeChild(toast);
|
||
}
|
||
}, 300);
|
||
}, 3000);
|
||
}
|
||
|
||
// 模拟实时数据更新
|
||
function simulateRealTimeUpdates() {
|
||
setInterval(() => {
|
||
// 随机更新活动列表
|
||
const activities = [
|
||
{ icon: 'success', iconClass: 'check-circle', title: '新订单已生成', time: '刚刚' },
|
||
{ icon: 'primary', iconClass: 'person-plus', title: '新用户注册', time: '1分钟前' },
|
||
{ icon: 'warning', iconClass: 'exclamation-triangle', title: '库存预警', time: '3分钟前' },
|
||
{ icon: 'info', iconClass: 'gear', title: '系统更新', time: '5分钟前' },
|
||
{ icon: 'success', iconClass: 'truck', title: '订单已发货', time: '8分钟前' }
|
||
];
|
||
|
||
const randomActivity = activities[Math.floor(Math.random() * activities.length)];
|
||
const activityList = document.getElementById('recentActivities');
|
||
|
||
// 添加新活动到顶部
|
||
const newActivity = document.createElement('div');
|
||
newActivity.className = 'activity-item';
|
||
newActivity.innerHTML = `
|
||
<div class="activity-icon ${randomActivity.icon}">
|
||
<i class="bi bi-${randomActivity.iconClass}"></i>
|
||
</div>
|
||
<div class="activity-content">
|
||
<div class="activity-title">${randomActivity.title}</div>
|
||
<div class="activity-time">${randomActivity.time}</div>
|
||
</div>
|
||
`;
|
||
|
||
activityList.insertBefore(newActivity, activityList.firstChild);
|
||
|
||
// 保持最多显示10个活动
|
||
if (activityList.children.length > 10) {
|
||
activityList.removeChild(activityList.lastChild);
|
||
}
|
||
}, 30000); // 每30秒更新一次
|
||
}
|
||
|
||
// 启动实时更新
|
||
setTimeout(simulateRealTimeUpdates, 5000);
|
||
</script>
|
||
|
||
<!-- Bootstrap 5 JS -->
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
||
</body>
|
||
</html> |