283 lines
12 KiB
HTML
283 lines
12 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>数据交易平台运营分析</title>
|
|
<link rel="stylesheet" href="../../../assets/css/style.css">
|
|
<link rel="stylesheet" href="../../../assets/css/pages/mods/mod4-ops/doc-menu.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="dashboard-container">
|
|
<!-- 顶部卡片区域 -->
|
|
<div class="stats-cards">
|
|
<div class="stat-card">
|
|
<div class="stat-icon customer-icon">
|
|
<i class="bi bi-people"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>总用户数</h3>
|
|
<div class="stat-number">102,890</div>
|
|
<div class="stat-trend positive">
|
|
<span>+40%</span>
|
|
<small>本月</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon revenue-icon">
|
|
<i class="bi bi-currency-dollar"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>总收入</h3>
|
|
<div class="stat-number">¥56,562</div>
|
|
<div class="stat-trend positive">
|
|
<span>+25%</span>
|
|
<small>本月</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon conversion-icon">
|
|
<i class="bi bi-graph-up"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>转化率</h3>
|
|
<div class="stat-number">12.08%</div>
|
|
<div class="stat-trend negative">
|
|
<span>-12%</span>
|
|
<small>本月</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon deals-icon">
|
|
<i class="bi bi-bag-check"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>总交易数</h3>
|
|
<div class="stat-number">2,543</div>
|
|
<div class="stat-trend positive">
|
|
<span>+19%</span>
|
|
<small>本月</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主要内容区域 -->
|
|
<div class="dashboard-content">
|
|
<!-- 左侧内容 -->
|
|
<div class="content-left">
|
|
<!-- 热门交易 -->
|
|
<div class="panel top-deals">
|
|
<div class="panel-header">
|
|
<h2>热门交易</h2>
|
|
<button class="more-btn">查看全部</button>
|
|
</div>
|
|
<div class="deals-list">
|
|
<div class="deal-item">
|
|
<img src="../../../assets/images/avatar/1.jpg" alt="用户头像" class="deal-avatar">
|
|
<div class="deal-info">
|
|
<div class="deal-name">张三科技</div>
|
|
<div class="deal-email">zhangsan@example.com</div>
|
|
</div>
|
|
<div class="deal-amount">¥2,893</div>
|
|
</div>
|
|
<div class="deal-item">
|
|
<img src="../../../assets/images/avatar/2.jpg" alt="用户头像" class="deal-avatar">
|
|
<div class="deal-info">
|
|
<div class="deal-name">李四数据</div>
|
|
<div class="deal-email">lisi@example.com</div>
|
|
</div>
|
|
<div class="deal-amount">¥4,289</div>
|
|
</div>
|
|
<div class="deal-item">
|
|
<img src="../../../assets/images/avatar/3.jpg" alt="用户头像" class="deal-avatar">
|
|
<div class="deal-info">
|
|
<div class="deal-name">王五科技</div>
|
|
<div class="deal-email">wangwu@example.com</div>
|
|
</div>
|
|
<div class="deal-amount">¥6,347</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 收益分析图表 -->
|
|
<div class="panel revenue-chart">
|
|
<div class="panel-header">
|
|
<h2>收益分析</h2>
|
|
<div class="chart-controls">
|
|
<button class="control-btn active">日</button>
|
|
<button class="control-btn">周</button>
|
|
<button class="control-btn">月</button>
|
|
<button class="control-btn">年</button>
|
|
</div>
|
|
</div>
|
|
<canvas id="revenueChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧内容 -->
|
|
<div class="content-right">
|
|
<!-- 数据来源分布 -->
|
|
<div class="panel source-distribution">
|
|
<div class="panel-header">
|
|
<h2>数据来源分布</h2>
|
|
</div>
|
|
<canvas id="sourceChart"></canvas>
|
|
<div class="source-stats">
|
|
<div class="stat-item">
|
|
<span class="stat-label">金融机构</span>
|
|
<span class="stat-value">1,624</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">电商平台</span>
|
|
<span class="stat-value">1,267</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">政务部门</span>
|
|
<span class="stat-value">1,153</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">其他来源</span>
|
|
<span class="stat-value">679</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 交易状态 -->
|
|
<div class="panel deals-status">
|
|
<div class="panel-header">
|
|
<h2>交易状态</h2>
|
|
<div class="status-total">
|
|
4,289
|
|
<span class="status-trend">+102 较上周</span>
|
|
</div>
|
|
</div>
|
|
<div class="status-list">
|
|
<div class="status-item">
|
|
<div class="status-info">
|
|
<span class="status-dot success"></span>
|
|
<span class="status-name">成功交易</span>
|
|
<span class="status-count">987笔</span>
|
|
</div>
|
|
<div class="status-bar">
|
|
<div class="bar-fill success" style="width: 35%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="status-item">
|
|
<div class="status-info">
|
|
<span class="status-dot pending"></span>
|
|
<span class="status-name">待处理</span>
|
|
<span class="status-count">1,073笔</span>
|
|
</div>
|
|
<div class="status-bar">
|
|
<div class="bar-fill pending" style="width: 28%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="status-item">
|
|
<div class="status-info">
|
|
<span class="status-dot rejected"></span>
|
|
<span class="status-name">已拒绝</span>
|
|
<span class="status-count">1,674笔</span>
|
|
</div>
|
|
<div class="status-bar">
|
|
<div class="bar-fill rejected" style="width: 22%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="status-item">
|
|
<div class="status-info">
|
|
<span class="status-dot upcoming"></span>
|
|
<span class="status-name">即将到期</span>
|
|
<span class="status-count">921笔</span>
|
|
</div>
|
|
<div class="status-bar">
|
|
<div class="bar-fill upcoming" style="width: 15%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 收益分析图表
|
|
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
|
|
new Chart(revenueCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
datasets: [{
|
|
label: '收入',
|
|
data: [300, 450, 320, 480, 650, 580, 420, 380, 430, 550, 480, 520],
|
|
borderColor: '#7c3aed',
|
|
tension: 0.4,
|
|
fill: false
|
|
}, {
|
|
label: '支出',
|
|
data: [200, 350, 280, 400, 520, 450, 380, 320, 390, 450, 400, 440],
|
|
borderColor: '#60a5fa',
|
|
tension: 0.4,
|
|
fill: false
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
align: 'end'
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: '#f1f5f9'
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// 数据来源分布图表
|
|
const sourceCtx = document.getElementById('sourceChart').getContext('2d');
|
|
new Chart(sourceCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['金融机构', '电商平台', '政务部门', '其他来源'],
|
|
datasets: [{
|
|
data: [1624, 1267, 1153, 679],
|
|
backgroundColor: ['#7c3aed', '#60a5fa', '#fbbf24', '#34d399']
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: {
|
|
boxWidth: 12,
|
|
padding: 15
|
|
}
|
|
}
|
|
},
|
|
cutout: '70%'
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |