<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('审校统计')" />
    <!-- 修正日期选择器样式 -->
    <link rel="stylesheet" href="../static/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datetimepicker.css">
    <style>
        /* 保持原有的样式不变 */
        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }

        .statistics-container {
            padding: 20px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .filter-card, .stat-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
            margin-bottom: 24px;
            overflow: hidden;
        }

        .filter-header, .stat-header {
            padding: 16px 24px;
            border-bottom: 1px solid #ebeef5;
            font-size: 16px;
            color: #303133;
            display: flex;
            align-items: center;
            background-color: #f8fafc;
        }

        .filter-header i, .stat-header i {
            margin-right: 10px;
            font-size: 18px;
            color: #409EFF;
        }

        .filter-body {
            padding: 20px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

        .filter-item {
            margin-right: 20px;
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .filter-item label {
            margin-right: 10px;
            color: #606266;
            font-size: 14px;
            white-space: nowrap;
        }

        .stat-body {
            padding: 20px;
        }

        .highlight-text {
            font-size: 16px;
            margin-bottom: 15px;
            line-height: 1.6;
        }

        .highlight-number {
            color: #409EFF;
            font-weight: bold;
            font-size: 20px;
            padding: 0 4px;
        }

        .highlight-error {
            color: #F56C6C;
            font-weight: bold;
            font-size: 20px;
            padding: 0 4px;
        }

        .highlight-percent {
            color: #E6A23C;
            font-weight: bold;
            font-size: 20px;
            padding: 0 4px;
        }

        .summary-row {
            display: flex;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .summary-item {
            flex: 1;
            min-width: 150px;
            text-align: center;
            padding: 15px;
            border-radius: 6px;
            margin-right: 15px;
            margin-bottom: 15px;
            background-color: #f2f2f2;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .summary-item:last-child {
            margin-right: 0;
        }

        .summary-item.success {
            background-color: #f0f9eb;
            border: 1px solid #e1f3d8;
        }

        .summary-item.error {
            background-color: #deebfd;
            border: 1px solid #faecd8;
        }

        .summary-item.warning {
            background-color: #fdf6ec;
            border: 1px solid #faecd8;
        }

        .summary-item.info {
            background-color: #e8eaff;
            border: 1px solid #e9e9eb;
        }

        .summary-label {
            color: #909399;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .summary-value {
            font-size: 20px;
            font-weight: bold;
            color: #303133;
        }

        .success .summary-value {
            color: #67C23A;
        }

        .warning .summary-value {
            color: #E6A23C;
        }

        .info .summary-value {
            color: #909399;
        }

        .chart-container {
            margin-top: 20px;
            height: 300px;
            width: 100%;
        }

        .table-container {
            margin-top: 20px;
            max-height: 400px;
            overflow-y: auto;
        }

        .table-container table {
            width: 100%;
            border-collapse: collapse;
        }

        .table-container th, .table-container td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ebeef5;
        }

        .table-container th {
            background-color: #f8fafc;
            font-weight: 600;
            color: #606266;
        }

        .table-container tr:hover {
            background-color: #f5f7fa;
        }

        .badge-rank-1 {
            background-color: #f56c6c;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
        }
        .badge-rank-2 {
            background-color: #e6a23c;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
        }
        .badge-rank-3 {
            background-color: #67c23a;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
        }
        .badge {
            padding: 4px 8px;
            border-radius: 4px;
            background-color: #909399;
            color: white;
        }

        .tag {
            display: inline-block;
            padding: 0 10px;
            height: 32px;
            line-height: 30px;
            font-size: 12px;
            border-radius: 4px;
            box-sizing: border-box;
            white-space: nowrap;
            border: 1px solid;
        }

        .tag-info {
            background-color: #ecf5ff;
            border-color: #d9ecff;
            color: #409EFF;
        }

        .label-info {
            background-color: #67c23a;
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        /* 导出按钮样式 */
        .export-btn {
            margin-left: auto;
            margin-right: 15px;
        }

        @media (max-width: 768px) {
            .filter-body {
                flex-direction: column;
                align-items: flex-start;
            }

            .filter-item {
                margin-right: 0;
                width: 100%;
                margin-bottom: 15px;
            }

            .summary-item {
                min-width: calc(50% - 15px);
                margin-right: 15px;
            }

            .summary-item:nth-child(2n) {
                margin-right: 0;
            }
        }

        @media (max-width: 480px) {
            .summary-item {
                min-width: 100%;
                margin-right: 0;
            }
        }
    </style>
</head>
<body class="gray-bg">
<div class="statistics-container">
    <!-- 顶部筛选区域 -->
    <div class="filter-card">
        <div class="filter-header">
            <i class="fa fa-filter"></i>
            <span>筛选条件</span>
        </div>
        <div class="filter-body">
            <div class="filter-item">
                <label>时间范围：</label>
                <input type="text" class="time-input form-control date-picker" id="beginTime" placeholder="开始日期" autocomplete="off" style="width: 140px;"/>
                <span style="margin: 0 10px;">-</span>
                <input type="text" class="time-input form-control date-picker" id="endTime" placeholder="结束日期" autocomplete="off" style="width: 140px;"/>
            </div>
            <button type="button" class="btn btn-primary" onclick="search()" style="margin-left: auto;">
                <i class="fa fa-search"></i> 查询
            </button>
            <button type="button" class="btn btn-success" onclick="setLast30Days()" style="margin-left: 10px;">
                <i class="fa fa-calendar"></i> 最近30天
            </button>
            <button type="button" class="btn btn-default" onclick="resetSearch()" style="margin-left: 10px;">
                <i class="fa fa-refresh"></i> 重置
            </button>
        </div>
    </div>

    <!-- 总体活跃程度 -->
    <div class="stat-card">
        <div class="stat-header">
            <i class="fa fa-bar-chart"></i>
            <span>总体活跃程度</span>
        </div>
        <div class="stat-body">
            <div class="summary-row">
                <div class="summary-item">
                    <div class="summary-label">总审校日志数</div>
                    <div class="summary-value" id="totalLogCount">0</div>
                </div>
                <div class="summary-item error">
                    <div class="summary-label">总错误词数</div>
                    <div class="summary-value" id="totalWordCount">0</div>
                </div>
                <div class="summary-item success">
                    <div class="summary-label">活跃用户数</div>
                    <div class="summary-value" id="activeUserCount">0</div>
                </div>
                <div class="summary-item info">
                    <div class="summary-label">活跃部门数</div>
                    <div class="summary-value" id="activeDeptCount">0</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row" style="margin: 0 -10px;">
        <!-- 各盟市/部门活跃统计 -->
        <div class="col-sm-12" style="padding: 0 10px;">
            <div class="stat-card">
                <div class="stat-header">
                    <i class="fa fa-building"></i>
                    <span>各盟市/部门活跃统计</span>
                    <!-- 导出Excel按钮 -->
                    <button type="button" class="btn btn-success btn-sm export-btn" onclick="exportDeptStats()">
                        <i class="fa fa-file-excel-o"></i> 导出Excel
                    </button>
                    <!--<span class="label-info" style="margin-left: 15px;">包含所有下级部门数据</span>-->
                </div>
                <div class="stat-body">
                    <div class="table-container">
                        <table id="deptStatsTable">
                            <thead>
                            <tr>
                                <th>排名</th>
                                <th>部门名称</th>
                                <th>活跃用户数</th>
                                <th>校对次数</th>
                                <th>错误词数</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="deptStatsTableBody">
                            <tr><td colspan="6" style="text-align: center;">暂无数据</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 自定义词增加排行 -->
        <!--        <div class="col-sm-6" style="padding: 0 10px;">
                    <div class="stat-card">
                        <div class="stat-header">
                            <i class="fa fa-plus-circle"></i>
                            <span>自定义词增加排行</span>
                        </div>
                        <div class="stat-body">
                            <div class="table-container">
                                <table>
                                    <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>类型</th>
                                        <th>名称</th>
                                        <th>所属部门</th>
                                        <th>增加数量</th>
                                    </tr>
                                    </thead>
                                    <tbody id="customWordTable">
                                    <tr><td colspan="5" style="text-align: center;">暂无数据</td></tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>-->
    </div>

    <div class="row" style="margin: 0 -10px;">
        <!-- 错误类型占比 -->
        <div class="col-sm-12" style="padding: 0 10px;">
            <div class="stat-card">
                <div class="stat-header">
                    <i class="fa fa-pie-chart"></i>
                    <span>错误类型占比</span>
                </div>
                <div class="stat-body">
                    <div id="errorTypeChart" class="chart-container" style="height: 400px; width: 100%;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 部门详情模态框 -->
<div class="modal inmodal" id="deptDetailModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content animated fadeIn">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">部门活跃用户详情 - <span id="modalDeptName"></span></h4>
                <small>包含该部门及其所有下级部门的数据</small>
            </div>
            <div class="modal-body">
                <div class="table-container" style="max-height: 500px;">
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>登录名</th>
                            <th>用户名称</th>
                            <th>日志数</th>
                            <th>错误词数</th>
                        </tr>
                        </thead>
                        <tbody id="deptUsersTable">
                        <tr><td colspan="4" style="text-align: center;">暂无数据</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<script src="/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<!-- 使用项目中的 ECharts 库 -->
<script th:src="@{/ajax/libs/report/echarts/echarts-all.min.js?v=4.2.1}"></script>
<!-- 引入 SheetJS 用于导出 Excel -->
<script src="https://cdn.sheetjs.com/xlsx-0.20.2/package/dist/xlsx.full.min.js"></script>

<script th:inline="javascript">
    var errorTypeChart;
    var prefix = ctx + "project/stats";
    // 存储当前的部门统计数据，用于导出
    var currentDeptStats = [];

    $(function() {
        // 初始化日期选择器
        /*$('.date-picker').datepicker({
            format: 'yyyy-mm-dd',
            language: 'zh-CN',
            autoclose: true,
            todayHighlight: true
        });*/

        // 确保DOM完全加载后初始化图表
        initCharts();
        // 默认加载最近30天数据
        setLast30Days();
    });

    // 初始化图表
    function initCharts() {
        try {
            var chartElement = document.getElementById('errorTypeChart');
            if (!chartElement) {
                console.error('找不到errorTypeChart元素');
                return;
            }

            errorTypeChart = echarts.init(chartElement);
            console.log('错误类型图表初始化成功');

            // 设置默认空数据
            showChartNoData(errorTypeChart);

            // 添加窗口大小变化监听，使图表自适应
            window.addEventListener('resize', function() {
                if (errorTypeChart) {
                    errorTypeChart.resize();
                }
            });
        } catch (e) {
            console.error('图表初始化失败:', e);
        }
    }

    // 显示图表无数据
    function showChartNoData(chart) {
        if (!chart) return;
        try {
            chart.setOption({
                title: {
                    text: '暂无数据',
                    left: 'center',
                    top: 'center',
                    textStyle: {
                        color: '#909399',
                        fontSize: 14,
                        fontWeight: 'normal'
                    }
                },
                series: []
            });
        } catch (e) {
            console.error('设置图表空数据失败:', e);
        }
    }

    // 设置最近30天
    function setLast30Days() {
        var endDate = new Date();
        var beginDate = new Date();
        beginDate.setDate(beginDate.getDate() - 30);

        var beginStr = formatDate(beginDate);
        var endStr = formatDate(endDate);

        $('#beginTime').val(beginStr);
        $('#endTime').val(endStr);
        search();
    }

    // 格式化日期为 yyyy-mm-dd
    function formatDate(date) {
        var year = date.getFullYear();
        var month = (date.getMonth() + 1).toString().padStart(2, '0');
        var day = date.getDate().toString().padStart(2, '0');
        return year + '-' + month + '-' + day;
    }

    // 加载数据
    function loadData(params) {
        $.ajax({
            url: prefix + "/getStats",
            type: "POST",
            data: params,
            dataType: 'json',
            beforeSend: function() {
                $.blockUI({ message: '<h4>数据加载中...</h4>' });
            },
            success: function(res) {
                console.log('返回数据:', res);
                if (res && res.code == 0) {
                    if (res.data) {
                        renderData(res.data);
                    } else {
                        renderEmptyData();
                    }
                } else {
                    var msg = res ? (res.msg || '数据加载失败') : '数据加载失败';
                    $.modal.alertError(msg);
                    renderEmptyData();
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', status, error);
                $.modal.alertError("数据加载失败，请检查网络连接");
                renderEmptyData();
            },
            complete: function() {
                $.unblockUI();
            }
        });
    }

    // 渲染空数据
    function renderEmptyData() {
        $('#totalLogCount').text('0');
        $('#totalWordCount').text('0');
        $('#activeUserCount').text('0');
        $('#activeDeptCount').text('0');

        $('#deptStatsTableBody').html('<tr><td colspan="6" style="text-align: center;">暂无数据</td></tr>');
        $('#customWordTable').html('<tr><td colspan="5" style="text-align: center;">暂无数据</td></tr>');
        currentDeptStats = []; // 清空当前数据

        if (errorTypeChart) {
            showChartNoData(errorTypeChart);
        }
    }

    // 搜索函数
    function search() {
        var beginTime = $('#beginTime').val();
        var endTime = $('#endTime').val();

        if (beginTime && endTime && beginTime > endTime) {
            $.modal.alertWarning("开始时间不能晚于结束时间");
            return;
        }

        var params = {
            beginTime: beginTime,
            endTime: endTime
        };

        loadData(params);
    }

    // 重置搜索条件
    function resetSearch() {
        $('#beginTime').val('');
        $('#endTime').val('');
        search();
    }

    // 渲染数据
    function renderData(data) {
        if (!data) {
            renderEmptyData();
            return;
        }

        $('#totalLogCount').text(data.totalLogCount !== undefined ? data.totalLogCount : 0);
        $('#totalWordCount').text(data.totalWordCount !== undefined ? data.totalWordCount : 0);
        $('#activeUserCount').text(data.activeUserCount !== undefined ? data.activeUserCount : 0);
        $('#activeDeptCount').text(data.activeDeptCount !== undefined ? data.activeDeptCount : 0);

        renderDeptStats(data.deptStatsList);
        renderCustomWordRank(data.customWordRank);

        // 确保图表已初始化
        if (!errorTypeChart) {
            initCharts();
        }
        renderErrorTypeChart(data.errorTypeRatio);
    }

    // 渲染部门统计
    function renderDeptStats(deptList) {
        // 保存到全局变量，用于导出
        currentDeptStats = deptList || [];

        var html = '';
        if (deptList && deptList.length > 0) {
            $.each(deptList, function(index, item) {
                var rank = index + 1;
                var rankClass = rank <= 3 ? 'badge-rank-' + rank : 'badge';
                html += '<tr>';
                html += '<td><span class="' + rankClass + '">' + rank + '</span></td>';
                html += '<td>' + (item.deptName || '未知') + '</td>';
                html += '<td>' + (item.userCount !== undefined ? item.userCount : 0) + '</td>';
                html += '<td>' + (item.logCount !== undefined ? item.logCount : 0) + '</td>';
                html += '<td>' + (item.wordCount !== undefined ? item.wordCount : 0) + '</td>';
                html += '<td><button class="btn btn-xs btn-primary" onclick="showDeptDetail(' + (item.deptId || 0) + ',\'' + (item.deptName || '') + '\')">查看用户</button></td>';
                html += '</tr>';
            });
        } else {
            html += '<tr><td colspan="6" style="text-align: center;">暂无数据</td></tr>';
        }
        $('#deptStatsTableBody').html(html);
    }

    // 渲染自定义词排行
    function renderCustomWordRank(rankList) {
        var html = '';
        if (rankList && rankList.length > 0) {
            $.each(rankList, function(index, item) {
                var rank = index + 1;
                var rankClass = rank <= 3 ? 'badge-rank-' + rank : 'badge';
                var typeName = item.type == 'user' ? '<span class="tag tag-info">用户</span>' :
                    (item.type == 'dept' ? '<span class="tag tag-info">部门</span>' : '<span class="tag">未知</span>');
                var name = item.type == 'user' ? (item.name || item.loginName || '') : (item.name || '');

                html += '<tr>';
                html += '<td><span class="' + rankClass + '">' + rank + '</span></td>';
                html += '<td>' + typeName + '</td>';
                html += '<td>' + escapeHtml(name) + '</td>';
                html += '<td>' + escapeHtml(item.deptName || '') + '</td>';
                html += '<td><span style="color: #f56c6c; font-weight: bold;">' + (item.addCount !== undefined ? item.addCount : 0) + '</span></td>';
                html += '</tr>';
            });
        } else {
            html += '<tr><td colspan="5" style="text-align: center;">暂无数据</td></tr>';
        }
        $('#customWordTable').html(html);
    }

    function escapeHtml(text) {
        if (!text) return '';
        var map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };
        return text.replace(/[&<>"']/g, function(m) { return map[m]; });
    }

    // 渲染错误类型图表
    function renderErrorTypeChart(data) {
        if (!errorTypeChart) {
            console.error('errorTypeChart 未初始化');
            return;
        }

        if (!data || data.length === 0) {
            console.log('错误类型数据为空');
            showChartNoData(errorTypeChart);
            return;
        }

        console.log('错误类型数据:', data);

        // 过滤有效数据
        var chartData = [];
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
            if (item && item.errorType && item.count > 0) {
                chartData.push({
                    name: item.errorType,
                    value: item.count
                });
            }
        }

        if (chartData.length === 0) {
            showChartNoData(errorTypeChart);
            return;
        }

        // 按数量排序，取前10个主要类型
        chartData.sort(function(a, b) {
            return b.value - a.value;
        });

        var mainData = chartData.slice(0, 10);
        var otherCount = 0;
        for (var i = 10; i < chartData.length; i++) {
            otherCount += chartData[i].value;
        }
        if (otherCount > 0) {
            mainData.push({
                name: '其他',
                value: otherCount
            });
        }

        var option = {
            title: {
                text: '错误类型分布',
                left: 'center',
                top: 10,
                textStyle: {
                    fontSize: 16,
                    fontWeight: 'normal',
                    color: '#333'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 40,
                type: 'scroll',
                data: mainData.map(function(item) { return item.name; }),
                textStyle: {
                    fontSize: 12
                }
            },
            series: [{
                name: '错误类型',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['60%', '55%'],
                avoidLabelOverlap: true,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '12',
                        fontWeight: 'bold'
                    }
                },
                data: mainData
            }]
        };

        try {
            errorTypeChart.setOption(option, true);
            errorTypeChart.resize();
            console.log('错误类型图表渲染成功');
        } catch (e) {
            console.error('错误类型图表渲染失败:', e);
        }
    }

    // 显示部门详情
    function showDeptDetail(deptId, deptName) {
        if (!deptId) {
            $.modal.alertWarning("部门ID无效");
            return;
        }

        $('#modalDeptName').text(deptName || '未知部门');

        var beginTime = $('#beginTime').val();
        var endTime = $('#endTime').val();

        $.ajax({
            url: prefix + '/getDeptUsers',
            type: 'post',
            data: {
                deptId: deptId,
                beginTime: beginTime,
                endTime: endTime
            },
            dataType: 'json',
            beforeSend: function() {
                $.blockUI({ message: '<h4>加载中...</h4>' });
            },
            success: function(result) {
                if (result && result.code == 0) {
                    renderDeptUsers(result.data);
                    $('#deptDetailModal').modal('show');
                } else {
                    var msg = result ? (result.msg || '加载失败') : '加载失败';
                    $.modal.alertWarning(msg);
                }
            },
            error: function() {
                $.modal.alertError("加载失败，请检查网络连接");
            },
            complete: function() {
                $.unblockUI();
            }
        });
    }

    // 渲染部门用户列表
    function renderDeptUsers(userList) {
        var html = '';
        if (userList && userList.length > 0) {
            $.each(userList, function(index, item) {
                html += '<tr>';
                html += '<td>' + escapeHtml(item.loginName || '') + '</td>';
                html += '<td>' + escapeHtml(item.userName || '') + '</td>';
                html += '<td>' + (item.logCount !== undefined ? item.logCount : 0) + '</td>';
                html += '<td>' + (item.wordCount !== undefined ? item.wordCount : 0) + '</td>';
                html += '</tr>';
            });
        } else {
            html += '<tr><td colspan="4" style="text-align: center;">暂无数据</td></tr>';
        }
        $('#deptUsersTable').html(html);
    }

    // 导出部门统计到Excel
    function exportDeptStats() {
        if (!currentDeptStats || currentDeptStats.length === 0) {
            $.modal.alertWarning("没有数据可导出");
            return;
        }

        // 准备Excel数据
        var excelData = [];
        // 添加表头
        excelData.push(['排名', '部门名称', '活跃用户数', '校对次数', '错误词数']);

        // 添加数据行
        $.each(currentDeptStats, function(index, item) {
            excelData.push([
                (index + 1).toString(),
                item.deptName || '未知',
                (item.userCount !== undefined ? item.userCount : 0).toString(),
                (item.logCount !== undefined ? item.logCount : 0).toString(),
                (item.wordCount !== undefined ? item.wordCount : 0).toString()
            ]);
        });

        // 创建工作簿
        var wb = XLSX.utils.book_new();
        var ws = XLSX.utils.aoa_to_sheet(excelData);

        // 设置列宽
        ws['!cols'] = [
            { wch: 8 },  // 排名
            { wch: 30 }, // 部门名称
            { wch: 12 }, // 活跃用户数
            { wch: 10 }, // 校对词数
            { wch: 10 }  // 错误词数
        ];

        // 将工作表添加到工作簿
        XLSX.utils.book_append_sheet(wb, ws, '部门活跃统计');

        // 获取当前时间范围，用于文件名
        var beginTime = $('#beginTime').val() || 'all';
        var endTime = $('#endTime').val() || 'all';
        var fileName = '部门活跃统计_' + beginTime + '_至_' + endTime + '.xlsx';

        // 导出文件
        XLSX.writeFile(wb, fileName);
    }
</script>
</body>
</html>