614 行
22 KiB
HTML
可执行文件
614 行
22 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">
|
|
|
|
<!-- Bootstrap 5 CSS -->
|
|
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
|
|
<!-- Chart.js for modern charts -->
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
|
|
|
|
<!-- jQuery and other scripts -->
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<style>
|
|
:root {
|
|
--primary-color: #3b82f6;
|
|
--secondary-color: #64748b;
|
|
--success-color: #10b981;
|
|
--warning-color: #f59e0b;
|
|
--danger-color: #ef4444;
|
|
--info-color: #06b6d4;
|
|
--light-bg: #f8fafc;
|
|
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
--border-radius: 12px;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--light-bg);
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
}
|
|
|
|
/* 现代化卡片样式 */
|
|
.modern-card {
|
|
background: white;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--card-shadow);
|
|
border: 1px solid #e2e8f0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.modern-card:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* 统计卡片 */
|
|
.stats-card {
|
|
padding: 24px;
|
|
border-left: 4px solid var(--primary-color);
|
|
}
|
|
|
|
.stats-card.success {
|
|
border-left-color: var(--success-color);
|
|
}
|
|
|
|
.stats-card.warning {
|
|
border-left-color: var(--warning-color);
|
|
}
|
|
|
|
.stats-card.danger {
|
|
border-left-color: var(--danger-color);
|
|
}
|
|
|
|
.stats-card.info {
|
|
border-left-color: var(--info-color);
|
|
}
|
|
|
|
.stats-number {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stats-label {
|
|
color: #6b7280;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.stats-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
color: white;
|
|
}
|
|
|
|
.stats-icon.primary { background: var(--primary-color); }
|
|
.stats-icon.success { background: var(--success-color); }
|
|
.stats-icon.warning { background: var(--warning-color); }
|
|
.stats-icon.danger { background: var(--danger-color); }
|
|
.stats-icon.info { background: var(--info-color); }
|
|
|
|
/* 图表容器 */
|
|
.chart-container {
|
|
position: relative;
|
|
height: 300px;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* 快捷操作按钮 */
|
|
.quick-action {
|
|
padding: 20px;
|
|
text-align: center;
|
|
border-radius: var(--border-radius);
|
|
background: linear-gradient(135deg, var(--primary-color), #1d4ed8);
|
|
color: white;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
display: block;
|
|
}
|
|
|
|
.quick-action:hover {
|
|
color: white;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.quick-action i {
|
|
font-size: 2rem;
|
|
margin-bottom: 12px;
|
|
display: block;
|
|
}
|
|
|
|
/* 最近活动列表 */
|
|
.activity-item {
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.activity-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.activity-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 16px;
|
|
font-size: 16px;
|
|
color: white;
|
|
}
|
|
|
|
.activity-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.activity-title {
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.activity-time {
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.stats-number {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.chart-container {
|
|
height: 250px;
|
|
padding: 15px;
|
|
}
|
|
}
|
|
|
|
/* 页面标题 */
|
|
.page-header {
|
|
background: white;
|
|
border-radius: var(--border-radius);
|
|
padding: 24px;
|
|
margin-bottom: 24px;
|
|
box-shadow: var(--card-shadow);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 1.875rem;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.page-subtitle {
|
|
color: #6b7280;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* 加载动画 */
|
|
.loading-spinner {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 3px solid #f3f3f3;
|
|
border-top: 3px solid var(--primary-color);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid p-4">
|
|
<!-- 页面标题 -->
|
|
<div class="page-header">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h1 class="page-title">仪表盘</h1>
|
|
<p class="page-subtitle">欢迎回来，{$user.name}！今天是 <span id="currentDate"></span></p>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<button class="btn btn-outline-primary" onclick="refreshData()">
|
|
<i class="bi bi-arrow-clockwise"></i> 刷新数据
|
|
</button>
|
|
<button class="btn btn-primary" onclick="exportReport()">
|
|
<i class="bi bi-download"></i> 导出报告
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 统计卡片 -->
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="modern-card stats-card">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<div class="stats-number" id="totalOrders">0</div>
|
|
<div class="stats-label">今日订单</div>
|
|
</div>
|
|
<div class="stats-icon primary">
|
|
<i class="bi bi-cart-check"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="modern-card stats-card success">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<div class="stats-number" id="totalRevenue">¥0</div>
|
|
<div class="stats-label">今日营收</div>
|
|
</div>
|
|
<div class="stats-icon success">
|
|
<i class="bi bi-currency-yen"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="modern-card stats-card warning">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<div class="stats-number" id="totalUsers">0</div>
|
|
<div class="stats-label">新增用户</div>
|
|
</div>
|
|
<div class="stats-icon warning">
|
|
<i class="bi bi-people"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="modern-card stats-card info">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<div class="stats-number" id="totalProducts">0</div>
|
|
<div class="stats-label">商品总数</div>
|
|
</div>
|
|
<div class="stats-icon info">
|
|
<i class="bi bi-box-seam"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<!-- 销售趋势图表 -->
|
|
<div class="col-xl-8">
|
|
<div class="modern-card">
|
|
<div class="card-header bg-transparent border-0 p-4 pb-0">
|
|
<h5 class="card-title mb-0">销售趋势</h5>
|
|
<small class="text-muted">最近30天的销售数据</small>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="salesChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 快捷操作 -->
|
|
<div class="col-xl-4">
|
|
<div class="modern-card p-4">
|
|
<h5 class="card-title mb-4">快捷操作</h5>
|
|
<div class="row g-3">
|
|
<div class="col-6">
|
|
<a href="javascript:void(0)" class="quick-action" onclick="addProduct()">
|
|
<i class="bi bi-plus-circle"></i>
|
|
<div>添加商品</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-6">
|
|
<a href="javascript:void(0)" class="quick-action" onclick="viewOrders()" style="background: linear-gradient(135deg, var(--success-color), #059669);">
|
|
<i class="bi bi-list-check"></i>
|
|
<div>查看订单</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-6">
|
|
<a href="javascript:void(0)" class="quick-action" onclick="manageUsers()" style="background: linear-gradient(135deg, var(--warning-color), #d97706);">
|
|
<i class="bi bi-person-gear"></i>
|
|
<div>用户管理</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-6">
|
|
<a href="javascript:void(0)" class="quick-action" onclick="viewReports()" style="background: linear-gradient(135deg, var(--info-color), #0891b2);">
|
|
<i class="bi bi-graph-up"></i>
|
|
<div>数据报告</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 mt-2">
|
|
<!-- 订单状态分布 -->
|
|
<div class="col-xl-6">
|
|
<div class="modern-card">
|
|
<div class="card-header bg-transparent border-0 p-4 pb-0">
|
|
<h5 class="card-title mb-0">订单状态分布</h5>
|
|
<small class="text-muted">今日订单状态统计</small>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="orderStatusChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 最近活动 -->
|
|
<div class="col-xl-6">
|
|
<div class="modern-card">
|
|
<div class="card-header bg-transparent border-0 p-4 pb-0">
|
|
<h5 class="card-title mb-0">最近活动</h5>
|
|
<small class="text-muted">系统最新动态</small>
|
|
</div>
|
|
<div class="p-4">
|
|
<div id="recentActivities">
|
|
<div class="activity-item">
|
|
<div class="activity-icon" style="background: var(--success-color);">
|
|
<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" style="background: var(--primary-color);">
|
|
<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" style="background: var(--warning-color);">
|
|
<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" style="background: var(--info-color);">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 初始化页面
|
|
$(document).ready(function() {
|
|
updateCurrentDate();
|
|
loadDashboardData();
|
|
initCharts();
|
|
});
|
|
|
|
// 更新当前日期
|
|
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() {
|
|
// 模拟数据加载
|
|
setTimeout(() => {
|
|
animateNumber('totalOrders', 156);
|
|
animateNumber('totalRevenue', 28650, '¥');
|
|
animateNumber('totalUsers', 89);
|
|
animateNumber('totalProducts', 234);
|
|
}, 500);
|
|
}
|
|
|
|
// 数字动画效果
|
|
function animateNumber(elementId, targetValue, prefix = '') {
|
|
const element = document.getElementById(elementId);
|
|
const duration = 1000;
|
|
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');
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
datasets: [{
|
|
label: '销售额',
|
|
data: [12000, 19000, 15000, 25000, 22000, 30000, 28000, 35000, 32000, 38000, 42000, 45000],
|
|
borderColor: 'rgb(59, 130, 246)',
|
|
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
|
borderWidth: 3,
|
|
fill: true,
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.05)'
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 订单状态分布图表
|
|
function initOrderStatusChart() {
|
|
const ctx = document.getElementById('orderStatusChart').getContext('2d');
|
|
new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['已完成', '处理中', '待付款', '已取消'],
|
|
datasets: [{
|
|
data: [65, 20, 10, 5],
|
|
backgroundColor: [
|
|
'rgb(16, 185, 129)',
|
|
'rgb(59, 130, 246)',
|
|
'rgb(245, 158, 11)',
|
|
'rgb(239, 68, 68)'
|
|
],
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: {
|
|
padding: 20,
|
|
usePointStyle: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 快捷操作函数
|
|
function addProduct() {
|
|
// 这里可以调用父页面的方法或跳转到相应页面
|
|
if (parent && parent.MenuApp) {
|
|
parent.MenuApp.swapUrl('/Retail/Goods/goodsList', 1);
|
|
}
|
|
}
|
|
|
|
function viewOrders() {
|
|
if (parent && parent.MenuApp) {
|
|
parent.MenuApp.swapUrl('/Retail/Order/orderList', 1);
|
|
}
|
|
}
|
|
|
|
function manageUsers() {
|
|
if (parent && parent.MenuApp) {
|
|
parent.MenuApp.swapUrl('/Retail/User/userList', 1);
|
|
}
|
|
}
|
|
|
|
function viewReports() {
|
|
if (parent && parent.MenuApp) {
|
|
parent.MenuApp.swapUrl('/Retail/Report/index', 1);
|
|
}
|
|
}
|
|
|
|
// 刷新数据
|
|
function refreshData() {
|
|
const btn = event.target.closest('button');
|
|
const originalText = btn.innerHTML;
|
|
btn.innerHTML = '<span class="loading-spinner"></span> 刷新中...';
|
|
btn.disabled = true;
|
|
|
|
setTimeout(() => {
|
|
loadDashboardData();
|
|
btn.innerHTML = originalText;
|
|
btn.disabled = false;
|
|
|
|
// 显示成功提示
|
|
showToast('数据已刷新', 'success');
|
|
}, 2000);
|
|
}
|
|
|
|
// 导出报告
|
|
function exportReport() {
|
|
showToast('报告导出功能开发中...', 'info');
|
|
}
|
|
|
|
// 显示提示消息
|
|
function showToast(message, type = 'info') {
|
|
const toast = document.createElement('div');
|
|
toast.className = `alert alert-${type} position-fixed`;
|
|
toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
|
|
toast.innerHTML = `
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-${type === 'success' ? 'check-circle' : type === 'error' ? 'x-circle' : 'info-circle'} me-2"></i>
|
|
${message}
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(toast);
|
|
|
|
setTimeout(() => {
|
|
toast.remove();
|
|
}, 3000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |