838 lines
20 KiB
Plaintext
838 lines
20 KiB
Plaintext
<template>
|
|
<view class="admin-dashboard">
|
|
<!-- 顶部统计卡片 -->
|
|
<view class="stats-cards">
|
|
<view class="stat-card">
|
|
<view class="stat-icon users">
|
|
<image src="/static/icons/users.png" />
|
|
</view>
|
|
<view class="stat-info">
|
|
<text class="stat-value">{{ statsData.totalUsers }}</text>
|
|
<text class="stat-label">总用户数</text>
|
|
<text class="stat-change positive">+{{ statsData.userGrowth }}%</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="stat-card">
|
|
<view class="stat-icon transactions">
|
|
<image src="/static/icons/transaction.png" />
|
|
</view>
|
|
<view class="stat-info">
|
|
<text class="stat-value">{{ statsData.todayTransactions }}</text>
|
|
<text class="stat-label">今日交易</text>
|
|
<text class="stat-change" :class="{ 'positive': statsData.transactionGrowth > 0 }">
|
|
{{ statsData.transactionGrowth > 0 ? '+' : '' }}{{ statsData.transactionGrowth }}%
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="stat-card">
|
|
<view class="stat-icon revenue">
|
|
<image src="/static/icons/revenue.png" />
|
|
</view>
|
|
<view class="stat-info">
|
|
<text class="stat-value">￥{{ statsData.todayRevenue }}</text>
|
|
<text class="stat-label">今日营收</text>
|
|
<text class="stat-change positive">+{{ statsData.revenueGrowth }}%</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="stat-card">
|
|
<view class="stat-icon devices">
|
|
<image src="/static/icons/devices.png" />
|
|
</view>
|
|
<view class="stat-info">
|
|
<text class="stat-value">{{ statsData.onlineDevices }}/{{ statsData.totalDevices }}</text>
|
|
<text class="stat-label">在线设备</text>
|
|
<text class="stat-change" :class="{ 'negative': deviceOfflineRate > 10 }">
|
|
{{ (100 - deviceOfflineRate).toFixed(1) }}%
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 系统状态监控 -->
|
|
<view class="system-status">
|
|
<view class="section-header">
|
|
<text class="section-title">系统状态</text>
|
|
<text class="last-update">更新时间: {{ formatTime(lastUpdateTime) }}</text>
|
|
</view>
|
|
|
|
<view class="status-grid">
|
|
<view class="status-item" v-for="service in systemServices" :key="service.name">
|
|
<view class="service-info">
|
|
<view class="service-status" :class="service.status">
|
|
<view class="status-dot"></view>
|
|
</view>
|
|
<text class="service-name">{{ service.name }}</text>
|
|
</view>
|
|
<view class="service-metrics">
|
|
<text class="metric-item">CPU: {{ service.cpu }}%</text>
|
|
<text class="metric-item">内存: {{ service.memory }}%</text>
|
|
<text class="metric-item">响应: {{ service.responseTime }}ms</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 实时告警 -->
|
|
<view class="alerts-section" v-if="alerts.length > 0">
|
|
<view class="section-header">
|
|
<text class="section-title">实时告警</text>
|
|
<text class="alert-count">{{ alerts.length }}条未处理</text>
|
|
</view>
|
|
|
|
<view class="alerts-list">
|
|
<view class="alert-item"
|
|
v-for="alert in alerts"
|
|
:key="alert.id"
|
|
:class="alert.level"
|
|
@click="handleAlert(alert)">
|
|
<view class="alert-icon">
|
|
<image :src="getAlertIcon(alert.level)" />
|
|
</view>
|
|
<view class="alert-content">
|
|
<text class="alert-title">{{ alert.title }}</text>
|
|
<text class="alert-desc">{{ alert.description }}</text>
|
|
<text class="alert-time">{{ formatTime(alert.time) }}</text>
|
|
</view>
|
|
<view class="alert-actions">
|
|
<button class="action-btn" @click.stop="resolveAlert(alert.id)">处理</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 快速操作 -->
|
|
<view class="quick-operations">
|
|
<view class="section-title">快速操作</view>
|
|
<view class="operations-grid">
|
|
<view class="operation-item" @click="goToUserManagement">
|
|
<image class="operation-icon" src="/static/icons/user-manage.png" />
|
|
<text class="operation-text">用户管理</text>
|
|
</view>
|
|
<view class="operation-item" @click="goToCardManagement">
|
|
<image class="operation-icon" src="/static/icons/card-manage.png" />
|
|
<text class="operation-text">卡片管理</text>
|
|
</view>
|
|
<view class="operation-item" @click="goToFinancialManagement">
|
|
<image class="operation-icon" src="/static/icons/finance.png" />
|
|
<text class="operation-text">财务管理</text>
|
|
</view>
|
|
<view class="operation-item" @click="goToDeviceManagement">
|
|
<image class="operation-icon" src="/static/icons/device-manage.png" />
|
|
<text class="operation-text">设备管理</text>
|
|
</view>
|
|
<view class="operation-item" @click="goToReports">
|
|
<image class="operation-icon" src="/static/icons/reports.png" />
|
|
<text class="operation-text">数据报表</text>
|
|
</view>
|
|
<view class="operation-item" @click="goToSystemConfig">
|
|
<image class="operation-icon" src="/static/icons/settings.png" />
|
|
<text class="operation-text">系统配置</text>
|
|
</view>
|
|
<view class="operation-item" @click="goToSecurityMonitor">
|
|
<image class="operation-icon" src="/static/icons/security.png" />
|
|
<text class="operation-text">安全监控</text>
|
|
</view>
|
|
<view class="operation-item emergency" @click="goToEmergencyControl">
|
|
<image class="operation-icon" src="/static/icons/emergency.png" />
|
|
<text class="operation-text">应急控制</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 数据概览图表 -->
|
|
<view class="charts-section">
|
|
<view class="section-title">数据概览</view>
|
|
|
|
<view class="chart-container">
|
|
<view class="chart-header">
|
|
<text class="chart-title">交易趋势</text>
|
|
<view class="chart-filters">
|
|
<text class="filter-item"
|
|
:class="{ 'active': chartPeriod === 'day' }"
|
|
@click="changeChartPeriod('day')">今日</text>
|
|
<text class="filter-item"
|
|
:class="{ 'active': chartPeriod === 'week' }"
|
|
@click="changeChartPeriod('week')">本周</text>
|
|
<text class="filter-item"
|
|
:class="{ 'active': chartPeriod === 'month' }"
|
|
@click="changeChartPeriod('month')">本月</text>
|
|
</view>
|
|
</view>
|
|
<canvas canvas-id="transactionChart" class="chart-canvas"></canvas>
|
|
</view>
|
|
|
|
<view class="mini-charts">
|
|
<view class="mini-chart">
|
|
<text class="mini-chart-title">消费分布</text>
|
|
<canvas canvas-id="consumptionChart" class="mini-chart-canvas"></canvas>
|
|
</view>
|
|
<view class="mini-chart">
|
|
<text class="mini-chart-title">设备状态</text>
|
|
<canvas canvas-id="deviceChart" class="mini-chart-canvas"></canvas>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 系统信息 -->
|
|
<view class="system-info">
|
|
<view class="section-title">系统信息</view>
|
|
<view class="info-grid">
|
|
<view class="info-item">
|
|
<text class="info-label">系统版本</text>
|
|
<text class="info-value">v2.1.0</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">数据库</text>
|
|
<text class="info-value">PostgreSQL 14.2</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">在线时长</text>
|
|
<text class="info-value">{{ systemUptime }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">存储使用</text>
|
|
<text class="info-value">{{ storageUsage }}%</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
statsData: {
|
|
totalUsers: 1247,
|
|
userGrowth: 12.5,
|
|
todayTransactions: 3652,
|
|
transactionGrowth: 8.3,
|
|
todayRevenue: '45,680',
|
|
revenueGrowth: 15.2,
|
|
onlineDevices: 285,
|
|
totalDevices: 310
|
|
},
|
|
systemServices: [
|
|
{
|
|
name: '核心服务',
|
|
status: 'healthy',
|
|
cpu: 35,
|
|
memory: 68,
|
|
responseTime: 120
|
|
},
|
|
{
|
|
name: 'NFC服务',
|
|
status: 'healthy',
|
|
cpu: 28,
|
|
memory: 45,
|
|
responseTime: 95
|
|
},
|
|
{
|
|
name: '支付服务',
|
|
status: 'warning',
|
|
cpu: 78,
|
|
memory: 82,
|
|
responseTime: 350
|
|
},
|
|
{
|
|
name: '门禁服务',
|
|
status: 'healthy',
|
|
cpu: 22,
|
|
memory: 38,
|
|
responseTime: 85
|
|
}
|
|
],
|
|
alerts: [
|
|
{
|
|
id: 1,
|
|
level: 'warning',
|
|
title: '支付服务响应缓慢',
|
|
description: '支付服务平均响应时间超过300ms',
|
|
time: new Date(Date.now() - 300000)
|
|
},
|
|
{
|
|
id: 2,
|
|
level: 'error',
|
|
title: '设备离线',
|
|
description: '饭堂POS机#003失去连接',
|
|
time: new Date(Date.now() - 600000)
|
|
}
|
|
],
|
|
lastUpdateTime: new Date(),
|
|
chartPeriod: 'day',
|
|
systemUptime: '15天8小时',
|
|
storageUsage: 67
|
|
}
|
|
},
|
|
computed: {
|
|
deviceOfflineRate() {
|
|
return ((this.statsData.totalDevices - this.statsData.onlineDevices) / this.statsData.totalDevices * 100)
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.initDashboard()
|
|
},
|
|
onPullDownRefresh() {
|
|
this.refreshDashboard()
|
|
},
|
|
methods: {
|
|
initDashboard() {
|
|
this.loadStatsData()
|
|
this.loadSystemStatus()
|
|
this.loadAlerts()
|
|
this.initCharts()
|
|
this.startRealTimeUpdate()
|
|
},
|
|
loadStatsData() {
|
|
uni.request({
|
|
url: '/api/v1/admin/dashboard-stats',
|
|
success: (res) => {
|
|
this.statsData = res.data
|
|
}
|
|
})
|
|
},
|
|
loadSystemStatus() {
|
|
uni.request({
|
|
url: '/api/v1/admin/system-status',
|
|
success: (res) => {
|
|
this.systemServices = res.data
|
|
}
|
|
})
|
|
},
|
|
loadAlerts() {
|
|
uni.request({
|
|
url: '/api/v1/admin/alerts',
|
|
success: (res) => {
|
|
this.alerts = res.data
|
|
}
|
|
})
|
|
},
|
|
refreshDashboard() {
|
|
Promise.all([
|
|
this.loadStatsData(),
|
|
this.loadSystemStatus(),
|
|
this.loadAlerts()
|
|
]).then(() => {
|
|
this.lastUpdateTime = new Date()
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
},
|
|
startRealTimeUpdate() {
|
|
// 每30秒更新一次数据
|
|
setInterval(() => {
|
|
this.loadStatsData()
|
|
this.loadSystemStatus()
|
|
this.lastUpdateTime = new Date()
|
|
}, 30000)
|
|
},
|
|
initCharts() {
|
|
// 初始化图表
|
|
this.drawTransactionChart()
|
|
this.drawConsumptionChart()
|
|
this.drawDeviceChart()
|
|
},
|
|
drawTransactionChart() {
|
|
// 绘制交易趋势图
|
|
const ctx = uni.createCanvasContext('transactionChart', this)
|
|
// 这里实现具体的图表绘制逻辑
|
|
ctx.draw()
|
|
},
|
|
drawConsumptionChart() {
|
|
// 绘制消费分布图
|
|
const ctx = uni.createCanvasContext('consumptionChart', this)
|
|
// 实现饼图或柱状图
|
|
ctx.draw()
|
|
},
|
|
drawDeviceChart() {
|
|
// 绘制设备状态图
|
|
const ctx = uni.createCanvasContext('deviceChart', this)
|
|
// 实现状态分布图
|
|
ctx.draw()
|
|
},
|
|
changeChartPeriod(period) {
|
|
this.chartPeriod = period
|
|
this.drawTransactionChart()
|
|
},
|
|
handleAlert(alert) {
|
|
uni.navigateTo({
|
|
url: `/pages/mall/nfc/admin/alert-detail?id=${alert.id}`
|
|
})
|
|
},
|
|
resolveAlert(alertId) {
|
|
uni.request({
|
|
url: '/api/v1/admin/resolve-alert',
|
|
method: 'POST',
|
|
data: { alertId },
|
|
success: () => {
|
|
this.alerts = this.alerts.filter(alert => alert.id !== alertId)
|
|
uni.showToast({
|
|
title: '告警已处理',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getAlertIcon(level) {
|
|
const icons = {
|
|
info: '/static/icons/info.png',
|
|
warning: '/static/icons/warning.png',
|
|
error: '/static/icons/error.png',
|
|
critical: '/static/icons/critical.png'
|
|
}
|
|
return icons[level] || icons.info
|
|
},
|
|
// 导航方法
|
|
goToUserManagement() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/admin/user-management' })
|
|
},
|
|
goToCardManagement() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/admin/card-management' })
|
|
},
|
|
goToFinancialManagement() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/admin/financial-management' })
|
|
},
|
|
goToDeviceManagement() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/admin/device-management' })
|
|
},
|
|
goToReports() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/admin/data-reports' })
|
|
},
|
|
goToSystemConfig() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/admin/system-config' })
|
|
},
|
|
goToSecurityMonitor() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/admin/security-monitor' })
|
|
},
|
|
goToEmergencyControl() {
|
|
uni.showModal({
|
|
title: '应急控制',
|
|
content: '即将进入应急控制模式，请确认您有相应权限',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/admin/emergency-control' })
|
|
}
|
|
}
|
|
})
|
|
},
|
|
formatTime(time) {
|
|
const now = new Date()
|
|
const diff = now - time
|
|
const minutes = Math.floor(diff / 60000)
|
|
|
|
if (minutes < 1) return '刚刚'
|
|
if (minutes < 60) return `${minutes}分钟前`
|
|
|
|
const hours = Math.floor(minutes / 60)
|
|
if (hours < 24) return `${hours}小时前`
|
|
|
|
return time.toLocaleDateString()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.admin-dashboard {
|
|
padding: 20rpx;
|
|
background-color: #f8f9fa;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.stats-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.stat-icon {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.stat-icon.users {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.stat-icon.transactions {
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
}
|
|
|
|
.stat-icon.revenue {
|
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
}
|
|
|
|
.stat-icon.devices {
|
|
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
|
}
|
|
|
|
.stat-icon image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.stat-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.stat-change {
|
|
font-size: 20rpx;
|
|
padding: 4rpx 8rpx;
|
|
border-radius: 8rpx;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.stat-change.positive {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.stat-change.negative {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.system-status, .alerts-section, .quick-operations,
|
|
.charts-section, .system-info {
|
|
background: white;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.last-update {
|
|
font-size: 20rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.alert-count {
|
|
font-size: 24rpx;
|
|
color: #dc3545;
|
|
background: #f8d7da;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.status-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.status-item {
|
|
padding: 20rpx;
|
|
border: 1rpx solid #eee;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.service-info {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.service-status {
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
border-radius: 50%;
|
|
margin-right: 12rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.service-status.healthy {
|
|
background: #28a745;
|
|
}
|
|
|
|
.service-status.warning {
|
|
background: #ffc107;
|
|
}
|
|
|
|
.service-status.error {
|
|
background: #dc3545;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.2);
|
|
opacity: 0.7;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.service-name {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.service-metrics {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.metric-item {
|
|
font-size: 20rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.alerts-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.alert-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
border-radius: 12rpx;
|
|
border-left: 6rpx solid;
|
|
}
|
|
|
|
.alert-item.warning {
|
|
background: #fff3cd;
|
|
border-left-color: #ffc107;
|
|
}
|
|
|
|
.alert-item.error {
|
|
background: #f8d7da;
|
|
border-left-color: #dc3545;
|
|
}
|
|
|
|
.alert-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.alert-icon image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.alert-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.alert-title {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.alert-desc {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.alert-time {
|
|
font-size: 20rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.alert-actions {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.action-btn {
|
|
background: #007AFF;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8rpx;
|
|
padding: 12rpx 20rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.operations-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.operation-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 30rpx 20rpx;
|
|
border: 1rpx solid #eee;
|
|
border-radius: 12rpx;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.operation-item:hover {
|
|
border-color: #007AFF;
|
|
background: #f8f9ff;
|
|
}
|
|
|
|
.operation-item.emergency {
|
|
border-color: #dc3545;
|
|
background: #fff5f5;
|
|
}
|
|
|
|
.operation-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.operation-text {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
|
|
.chart-container {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.chart-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.chart-title {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.chart-filters {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.filter-item {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 8rpx;
|
|
border: 1rpx solid #ddd;
|
|
}
|
|
|
|
.filter-item.active {
|
|
background: #007AFF;
|
|
color: white;
|
|
border-color: #007AFF;
|
|
}
|
|
|
|
.chart-canvas {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
}
|
|
|
|
.mini-charts {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.mini-chart {
|
|
text-align: center;
|
|
}
|
|
|
|
.mini-chart-title {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
margin-bottom: 16rpx;
|
|
display: block;
|
|
}
|
|
|
|
.mini-chart-canvas {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
}
|
|
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
border: 1rpx solid #eee;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|