Kamixitong/app/web/templates/dashboard.html

{% extends "base.html" %}

{% block title %}仪表板 - 软件授权管理系统{% endblock %}

{% block page_title %}仪表板{% endblock %}

{% block content %}
<!-- 统计卡片 -->
<div class="row mb-4">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card card-stats">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <h5 class="card-title text-uppercase text-muted mb-0">产品总数</h5>
                        <span class="h2 font-weight-bold mb-0" id="total-products">-</span>
                    </div>
                    <div class="col-auto">
                        <div class="icon icon-shape bg-white text-primary rounded-circle shadow">
                            <i class="fas fa-box"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card card-stats">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <h5 class="card-title text-uppercase text-muted mb-0">活跃卡密</h5>
                        <span class="h2 font-weight-bold mb-0" id="active-licenses">-</span>
                    </div>
                    <div class="col-auto">
                        <div class="icon icon-shape bg-white text-warning rounded-circle shadow">
                            <i class="fas fa-key"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card card-stats">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <h5 class="card-title text-uppercase text-muted mb-0">在线设备</h5>
                        <span class="h2 font-weight-bold mb-0" id="online-devices">-</span>
                    </div>
                    <div class="col-auto">
                        <div class="icon icon-shape bg-white text-success rounded-circle shadow">
                            <i class="fas fa-desktop"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card card-stats">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <h5 class="card-title text-uppercase text-muted mb-0">今日激活</h5>
                        <span class="h2 font-weight-bold mb-0" id="today-activations">-</span>
                    </div>
                    <div class="col-auto">
                        <div class="icon icon-shape bg-white text-info rounded-circle shadow">
                            <i class="fas fa-user-plus"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 图表区域 -->
<div class="row mb-4">
    <div class="col-lg-8">
        <div class="card shadow">
            <div class="card-header bg-white">
                <h6 class="m-0 font-weight-bold">激活趋势（最近7天）</h6>
            </div>
            <div class="card-body">
                <canvas id="activationChart" height="300"></canvas>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card shadow">
            <div class="card-header bg-white">
                <h6 class="m-0 font-weight-bold">卡密类型分布</h6>
            </div>
            <div class="card-body">
                <canvas id="licenseTypeChart" height="300"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- 快捷操作 -->
<div class="row">
    <div class="col-lg-12">
        <div class="card shadow">
            <div class="card-header bg-white">
                <h6 class="m-0 font-weight-bold">快捷操作</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <a href="{{ url_for('web.create_product') }}" class="btn btn-outline-primary w-100">
                            <i class="fas fa-plus me-2"></i>
                            创建产品
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{{ url_for('web.generate_license') }}" class="btn btn-outline-success w-100">
                            <i class="fas fa-key me-2"></i>
                            生成卡密
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{{ url_for('web.create_version') }}" class="btn btn-outline-info w-100">
                            <i class="fas fa-code-branch me-2"></i>
                            发布版本
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{{ url_for('web.import_license') }}" class="btn btn-outline-warning w-100">
                            <i class="fas fa-file-import me-2"></i>
                            导入卡密
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 最近活动 -->
<div class="row mt-4">
    <div class="col-lg-6">
        <div class="card shadow">
            <div class="card-header bg-white">
                <h6 class="m-0 font-weight-bold">最近激活的卡密</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>卡密</th>
                                <th>产品</th>
                                <th>激活时间</th>
                            </tr>
                        </thead>
                        <tbody id="recent-activations">
                            <tr>
                                <td colspan="3" class="text-center text-muted">加载中...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card shadow">
            <div class="card-header bg-white">
                <h6 class="m-0 font-weight-bold">待处理工单</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>标题</th>
                                <th>优先级</th>
                                <th>创建时间</th>
                            </tr>
                        </thead>
                        <tbody id="pending-tickets">
                            <tr>
                                <td colspan="3" class="text-center text-muted">加载中...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let activationChart, licenseTypeChart;

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    loadDashboardData();
    initCharts();
});

// 加载仪表板数据
function loadDashboardData() {
    // 加载总览统计
    apiRequest('/api/v1/statistics/overview')
        .then(data => {
            if (data.success) {
                const stats = data.data;
                document.getElementById('total-products').textContent = stats.products.total;
                document.getElementById('active-licenses').textContent = stats.licenses.active;
                document.getElementById('online-devices').textContent = stats.devices.online;
                document.getElementById('today-activations').textContent = stats.activations.today;

                // 更新卡密类型图表
                if (licenseTypeChart) {
                    licenseTypeChart.data.datasets[0].data = [
                        stats.licenses.trial,
                        stats.licenses.formal
                    ];
                    licenseTypeChart.update();
                }
            }
        })
        .catch(error => {
            console.error('Failed to load dashboard data:', error);
        });

    // 加载激活趋势
    apiRequest('/api/v1/statistics/activations?days=7')
        .then(data => {
            if (data.success && activationChart) {
                const labels = data.data.activations.map(item => {
                    const date = new Date(item.date);
                    return `${date.getMonth() + 1}/${date.getDate()}`;
                });
                const counts = data.data.activations.map(item => item.count);

                activationChart.data.labels = labels;
                activationChart.data.datasets[0].data = counts;
                activationChart.update();
            }
        })
        .catch(error => {
            console.error('Failed to load activation trend:', error);
        });

    // 加载最近激活
    loadRecentActivations();

    // 加载待处理工单
    loadPendingTickets();
}

// 初始化图表
function initCharts() {
    // 激活趋势图表
    const activationCtx = document.getElementById('activationChart').getContext('2d');
    activationChart = new Chart(activationCtx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: '激活数',
                data: [],
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.1)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });

    // 卡密类型分布图表
    const licenseTypeCtx = document.getElementById('licenseTypeChart').getContext('2d');
    licenseTypeChart = new Chart(licenseTypeCtx, {
        type: 'doughnut',
        data: {
            labels: ['试用卡密', '正式卡密'],
            datasets: [{
                data: [0, 0],
                backgroundColor: [
                    'rgba(255, 206, 86, 0.8)',
                    'rgba(54, 162, 235, 0.8)'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
}

// 加载最近激活
function loadRecentActivations() {
    apiRequest('/api/v1/licenses?status=1&per_page=5')
        .then(data => {
            if (data.success) {
                const tbody = document.getElementById('recent-activations');
                tbody.innerHTML = '';

                if (data.data.licenses.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted">暂无数据</td></tr>';
                    return;
                }

                data.data.licenses.forEach(license => {
                    const row = `
                        <tr>
                            <td><code>${license.license_key.substring(0, 8)}...</code></td>
                            <td>${license.product_name || '-'}</td>
                            <td>${formatDate(license.activate_time)}</td>
                        </tr>
                    `;
                    tbody.innerHTML += row;
                });
            }
        })
        .catch(error => {
            console.error('Failed to load recent activations:', error);
        });
}

// 加载待处理工单
function loadPendingTickets() {
    apiRequest('/api/v1/tickets?status=0&per_page=5')
        .then(data => {
            if (data.success) {
                const tbody = document.getElementById('pending-tickets');
                tbody.innerHTML = '';

                if (data.data.tickets.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted">暂无数据</td></tr>';
                    return;
                }

                data.data.tickets.forEach(ticket => {
                    const priorityBadge = {
                        0: '<span class="badge bg-secondary">低</span>',
                        1: '<span class="badge bg-warning">中</span>',
                        2: '<span class="badge bg-danger">高</span>'
                    };

                    const row = `
                        <tr>
                            <td>
                                <a href="/tickets/${ticket.ticket_id}" class="text-decoration-none">
                                    ${ticket.title}
                                </a>
                            </td>
                            <td>${priorityBadge[ticket.priority]}</td>
                            <td>${formatDate(ticket.create_time)}</td>
                        </tr>
                    `;
                    tbody.innerHTML += row;
                });
            }
        })
        .catch(error => {
            console.error('Failed to load pending tickets:', error);
        });
}

// 定期刷新数据
setInterval(loadDashboardData, 60000); // 每分钟刷新一次
</script>
{% endblock %}