jc-wangh20
/
OnlineEducation-teacher-front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>资源库统计分析</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1, h2, h3 {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .chart-container {
            margin-bottom: 40px;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 30px;
        }
        .col {
            flex: 1;
            min-width: 300px;
        }
        .summary-box {
            background-color: #ecf0f1;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
        }
        .summary-box h3 {
            margin: 0 0 10px 0;
            color: #2c3e50;
        }
        .summary-box p {
            margin: 0;
            font-size: 24px;
            font-weight: bold;
            color: #3498db;
        }
        .filters {
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f1f8ff;
            border-radius: 8px;
        }
        .filters label {
            margin-right: 15px;
            font-weight: bold;
        }
        .filters select {
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        footer {
            text-align: center;
            margin-top: 40px;
            color: #7f8c8d;
            font-size: 14px;
        }
        .storage-info {
            background-color: #e8f4fc;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .storage-info h3 {
            margin: 0 0 10px 0;
            color: #2980b9;
        }
        .storage-info p {
            margin: 0;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>资源库统计分析</h1>

        <!-- 摘要信息 -->
        <div class="row">
            <div class="col summary-box">
                <h3>总资源数</h3>
                <p id="total-resources">1,247</p>
            </div>
            <div class="col summary-box">
                <h3>总存储空间</h3>
                <p id="total-storage">4.2 TB</p>
            </div>
            <div class="col summary-box">
                <h3>总观看人数</h3>
                <p id="total-views">89,532</p>
            </div>
            <div class="col summary-box">
                <h3>总收藏人数</h3>
                <p id="total-favorites">15,678</p>
            </div>
        </div>

        <!-- 存储空间信息 -->
        <div class="storage-info">
            <h3>资源库存储空间使用情况</h3>
            <p>当前资源库总容量：10 TB | 已使用：4.2 TB | 使用率：42%</p>
        </div>

        <!-- 筛选器 -->
        <div class="filters">
            <label for="department-filter">筛选单位:</label>
            <select id="department-filter">
                <option value="all">全部单位</option>
                <option value="aviation">航空学院</option>
                <option value="military">军事管理系</option>
                <option value="politics">政治工作部</option>
                <option value="maintenance">地面维修中心</option>
                <option value="other">其他部门</option>
            </select>

            <label for="time-filter">时间范围:</label>
            <select id="time-filter">
                <option value="all">全部时间</option>
                <option value="30">最近30天</option>
                <option value="90">最近90天</option>
                <option value="180">最近180天</option>
                <option value="365">最近1年</option>
            </select>
        </div>

        <!-- 资源类型分布 -->
        <div class="chart-container">
            <h2>资源类型分布</h2>
            <div class="row">
                <div class="col">
                    <canvas id="typeChart"></canvas>
                </div>
                <div class="col">
                    <canvas id="departmentChart"></canvas>
                </div>
            </div>
        </div>

        <!-- 资源可见性与热度 -->
        <div class="chart-container">
            <h2>资源可见性与热度</h2>
            <div class="row">
                <div class="col">
                    <canvas id="visibilityChart"></canvas>
                </div>
                <div class="col">
                    <canvas id="hotnessChart"></canvas>
                </div>
            </div>
        </div>

        <!-- 文件格式分布 -->
        <div class="chart-container">
            <h2>文件格式分布</h2>
            <div class="row">
                <div class="col">
                    <canvas id="formatChart"></canvas>
                </div>
                <div class="col">
                    <canvas id="storageChart"></canvas>
                </div>
            </div>
        </div>

        <!-- 资源使用情况分析 -->
        <div class="chart-container">
            <h2>资源使用情况分析</h2>
            <div class="row">
                <div class="col">
                    <canvas id="viewsChart"></canvas>
                </div>
                <div class="col">
                    <canvas id="engagementChart"></canvas>
                </div>
            </div>
        </div>

        <!-- 时间趋势分析 -->
        <div class="chart-container">
            <h2>上传与访问时间趋势</h2>
            <canvas id="trendChart"></canvas>
        </div>

        <footer>
            <p>数据更新时间: 2025年8月18日 | 资源库统计分析系统</p>
        </footer>
    </div>

    <script>
        // 模拟数据 - 包含文件数量和存储空间数据
        const mockData = {
            // 资源类型数据
            types: ['航空教学', '部队管理', '政治工作', '地面维修', '其他'],
            typeCounts: [345, 278, 192, 231, 201],
            typeStorage: [1.2, 0.8, 0.6, 0.9, 0.7], // TB

            // 院系数据
            departments: ['航空学院', '军事管理系', '政治工作部', '地面维修中心', '其他部门'],
            departmentCounts: [412, 289, 176, 223, 147],
            departmentStorage: [1.5, 0.9, 0.5, 0.8, 0.5], // TB

            // 可见性数据
            visibility: ['公开', '非公开'],
            visibilityCounts: [987, 260],

            // 热度数据
            hotness: ['热门', '非热门'],
            hotnessCounts: [312, 935],
            recommended: ['已推荐', '未推荐'],
            recommendedCounts: [187, 1060],

            // 文件格式数据 - 包含文件数量和平均文件大小
            formats: ['mp4', 'pdf', 'docx', 'pptx', 'xlsx', 'jpg', 'avi', 'wmv', 'mkv', 'other'],
            formatCounts: [320, 312, 135, 189, 98, 167, 56, 67, 41, 163],
            formatStorage: [2.1, 0.3, 0.15, 0.25, 0.1, 0.08, 0.4, 0.3, 0.2, 0.12], // TB
            formatAvgSize: ['6.6GB', '960MB', '1.1MB', '1.3MB', '1.0MB', '500KB', '7.1GB', '4.5GB', '4.9GB', '750KB'],

            // 用户参与度数据
            engagement: ['观看', '收藏', '分享'],
            engagementCounts: [89532, 15678, 7892],

            // 时间趋势数据
            trendLabels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
            uploadTrend: [120, 95, 140, 110, 135, 150, 130, 80],
            viewTrend: [8500, 7200, 9800, 9200, 10500, 11200, 10800, 12300]
        };

        // 资源类型分布图
        new Chart(document.getElementById('typeChart'), {
            type: 'pie',
            data: {
                labels: mockData.types,
                datasets: [{
                    data: mockData.typeCounts,
                    backgroundColor: [
                        '#3498db', '#e74c3c', '#2ecc71', '#f39c12', '#9b59b6'
                    ],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: '按资源类型分类 (数量)'
                    },
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });

        // 院系分布图
        new Chart(document.getElementById('departmentChart'), {
            type: 'doughnut',
            data: {
                labels: mockData.departments,
                datasets: [{
                    data: mockData.departmentCounts,
                    backgroundColor: [
                        '#1abc9c', '#3498db', '#8e44ad', '#e67e22', '#e74c3c'
                    ],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: '按单位分布 (数量)'
                    },
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });

        // 可见性分析
        new Chart(document.getElementById('visibilityChart'), {
            type: 'bar',
            data: {
                labels: mockData.visibility,
                datasets: [{
                    label: '资源数量',
                    data: mockData.visibilityCounts,
                    backgroundColor: [
                        'rgba(46, 204, 113, 0.8)',
                        'rgba(231, 76, 60, 0.8)'
                    ],
                    borderColor: [
                        '#2ecc71', '#e74c3c'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '资源数量'
                        }
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        text: '资源公开情况'
                    }
                }
            }
        });

        // 热度分析
        new Chart(document.getElementById('hotnessChart'), {
            type: 'polarArea',
            data: {
                labels: ['热门资源', '推荐资源', '热门且推荐'],
                datasets: [{
                    label: '资源数量',
                    data: [312, 187, 89],
                    backgroundColor: [
                        'rgba(231, 76, 60, 0.7)',
                        'rgba(52, 152, 219, 0.7)',
                        'rgba(155, 89, 182, 0.7)'
                    ],
                    borderColor: [
                        'rgba(231, 76, 60, 1)',
                        'rgba(52, 152, 219, 1)',
                        'rgba(155, 89, 182, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: '资源热度分析'
                    }
                }
            }
        });

        // 文件数量分布 - 水平条形图
        new Chart(document.getElementById('formatChart'), {
            type: 'bar',
            data: {
                labels: mockData.formats,
                datasets: [{
                    label: '文件数量',
                    data: mockData.formatCounts,
                    backgroundColor: 'rgba(52, 73, 94, 0.7)',
                    borderColor: 'rgba(52, 73, 94, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                scales: {
                    x: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '文件数量'
                        }
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        text: '不同文件格式的数量分布'
                    }
                }
            }
        });

        // 存储空间占用分布 - 饼图
        new Chart(document.getElementById('storageChart'), {
            type: 'pie',
            data: {
                labels: mockData.formats,
                datasets: [{
                    label: '存储空间 (TB)',
                    data: mockData.formatStorage,
                    backgroundColor: [
                        '#e74c3c', '#3498db', '#2ecc71', '#f39c12',
                        '#9b59b6', '#1abc9c', '#34495e', '#d35400',
                        '#8e44ad', '#7f8c8d'
                    ],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: '不同文件格式的存储空间占用'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.parsed;
                                const count = mockData.formatCounts[context.dataIndex];
                                const avgSize = mockData.formatAvgSize[context.dataIndex];
                                return [
                                    `${label}: ${value} TB`,
                                    `文件数量: ${count}`,
                                    `平均大小: ${avgSize}`
                                ];
                            }
                        }
                    }
                }
            }
        });

        // 观看情况分析
        new Chart(document.getElementById('viewsChart'), {
            type: 'bar',
            data: {
                labels: mockData.types,
                datasets: [{
                    label: '平均观看人数',
                    data: [1250, 890, 620, 980, 450],
                    backgroundColor: 'rgba(41, 128, 185, 0.7)',
                    borderColor: 'rgba(41, 128, 185, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '平均观看人数'
                        }
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        text: '各类资源平均观看人数'
                    }
                }
            }
        });

        // 用户参与度分析
        new Chart(document.getElementById('engagementChart'), {
            type: 'bar',
            data: {
                labels: ['观看人数', '收藏人数', '分享次数'],
                datasets: [{
                    label: '用户参与度',
                    data: mockData.engagementCounts,
                    backgroundColor: 'rgba(155, 89, 182, 0.7)',
                    borderColor: 'rgba(155, 89, 182, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '数量'
                        }
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        text: '资源使用情况统计'
                    }
                }
            }
        });

        // 时间趋势分析
        new Chart(document.getElementById('trendChart'), {
            type: 'line',
            data: {
                labels: mockData.trendLabels,
                datasets: [
                    {
                        label: '资源上传数量',
                        data: mockData.uploadTrend,
                        borderColor: '#3498db',
                        backgroundColor: 'rgba(52, 152, 219, 0.1)',
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: '资源观看人数',
                        data: mockData.viewTrend,
                        borderColor: '#e74c3c',
                        backgroundColor: 'rgba(231, 76, 60, 0.1)',
                        fill: true,
                        tension: 0.4
                    }
                ]
            },
            options: {
                responsive: true,
                interaction: {
                    mode: 'index',
                    intersect: false
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '数量'
                        }
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        text: '资源上传与访问趋势 (2025年)'
                    }
                }
            }
        });

        // 筛选器交互功能
        document.getElementById('department-filter').addEventListener('change', function() {
            console.log('筛选院系:', this.value);
        });

        document.getElementById('time-filter').addEventListener('change', function() {
            console.log('时间范围:', this.value);
        });
    </script>
</body>
</html>