final_report_武汉大学舆情分析_20250826_121457.html 17.5 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>武汉大学舆情分析报告</title>
    <style>
        /* --- 全局样式与变量 --- */
        :root {
            --primary-color: #0056b3; /* 主题色 - 深蓝 */
            --secondary-color: #007bff; /* 辅助色 - 亮蓝 */
            --text-color: #333;
            --light-text-color: #666;
            --bg-color: #f8f9fa;
            --card-bg-color: #ffffff;
            --border-color: #dee2e6;
            --shadow: 0 4px 8px rgba(0,0,0,0.05);
            --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

            /* 情感与风险颜色 */
            --positive-color: #28a745;
            --neutral-color: #6c757d;
            --negative-color: #dc3545;
            --medium-risk-color: #fd7e14;
            --high-risk-color: #dc3545;
            --low-risk-color: #17a2b8;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            line-height: 1.6;
            font-size: 16px;
        }

        /* --- 容器与布局 --- */
        .report-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
        }

        .grid-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        @media (min-width: 992px) {
            .grid-container {
                grid-template-columns: repeat(2, 1fr);
            }
            .grid-col-span-2 {
                grid-column: span 2;
            }
        }

        /* --- 卡片样式 --- */
        .card {
            background-color: var(--card-bg-color);
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 25px;
            border: 1px solid var(--border-color);
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        }

        .card-header {
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 15px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card-header h2 {
            margin: 0;
            font-size: 1.5em;
            color: var(--primary-color);
        }

        .card-header .icon {
            font-size: 1.5em;
            color: var(--primary-color);
        }

        /* --- 报告头部 --- */
        .report-header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            border-radius: 8px;
            position: relative;
        }

        .report-header h1 {
            margin: 0;
            font-size: 2.5em;
            font-weight: 600;
        }

        .report-header p {
            margin: 5px 0 0;
            font-size: 1.1em;
            opacity: 0.9;
        }

        .print-button {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid white;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .print-button:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }

        /* --- 特定模块样式 --- */
        /* 执行摘要 */
        .executive-summary p {
            font-size: 1.1em;
            color: var(--light-text-color);
        }

        /* 关键发现 */
        .finding-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            padding: 15px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .finding-item:last-child {
            border-bottom: none;
        }
        .finding-importance {
            flex-shrink: 0;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-top: 8px;
        }
        .importance-medium { background-color: var(--medium-risk-color); }
        .importance-high { background-color: var(--high-risk-color); }
        .importance-low { background-color: var(--low-risk-color); }

        .finding-content h3 {
            margin: 0 0 5px 0;
            font-size: 1.1em;
        }
        .finding-content p {
            margin: 0;
            color: var(--light-text-color);
        }
        .finding-source {
            font-size: 0.8em;
            color: #999;
            font-style: italic;
        }

        /* 情感分析 */
        .sentiment-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        @media (min-width: 768px) {
            .sentiment-container {
                flex-direction: row;
                align-items: center;
            }
        }
        .sentiment-chart {
            flex: 1;
            min-height: 250px;
            position: relative;
        }
        .sentiment-details {
            flex: 1;
        }
        .sentiment-details .overall {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .sentiment-details .overall-value-neutral { color: var(--neutral-color); }
        .sentiment-details .overall-value-positive { color: var(--positive-color); }
        .sentiment-details .overall-value-negative { color: var(--negative-color); }

        .sentiment-details ul {
            list-style-type: none;
            padding-left: 0;
            margin: 0;
        }
        .sentiment-details li {
            background-color: #f1f3f5;
            padding: 8px 12px;
            border-radius: 4px;
            margin-bottom: 8px;
        }

        /* 风险评估 */
        .risk-level {
            font-size: 1.5em;
            font-weight: bold;
            text-align: center;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .risk-level.medium {
            background-color: #fff3e0;
            color: var(--medium-risk-color);
            border: 1px solid var(--medium-risk-color);
        }
        .risk-assessment-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }
        @media (min-width: 576px) {
            .risk-assessment-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
        .risk-assessment-grid h3 {
            font-size: 1.1em;
            color: var(--secondary-color);
            margin-top: 0;
        }
        .risk-assessment-grid ul {
            padding-left: 20px;
            margin: 0;
        }

        /* 建议措施 */
        .recommendations-table {
            width: 100%;
            border-collapse: collapse;
        }
        .recommendations-table th, .recommendations-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        .recommendations-table th {
            background-color: #f8f9fa;
            font-weight: 600;
        }
        .recommendations-table tbody tr:hover {
            background-color: #f1f3f5;
        }
        .priority-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.85em;
            color: white;
            font-weight: 500;
        }
        .priority-medium { background-color: var(--medium-risk-color); }
        .priority-high { background-color: var(--high-risk-color); }
        .priority-low { background-color: var(--low-risk-color); }

        /* 附录 */
        .appendix {
            margin-top: 30px;
            text-align: center;
            font-size: 0.9em;
            color: var(--light-text-color);
        }

        /* --- 打印样式 --- */
        @media print {
            body {
                background-color: #fff;
                font-size: 12pt;
                color: #000;
            }
            .report-container {
                width: 100%;
                margin: 0;
                padding: 0;
                box-shadow: none;
            }
            .card {
                box-shadow: none;
                border: 1px solid #ccc;
                page-break-inside: avoid;
            }
            .report-header {
                background: #eee;
                color: #000;
                padding: 15px;
                border-radius: 0;
            }
            .report-header h1 {
                font-size: 2em;
            }
            .print-button {
                display: none;
            }
            .grid-container {
                grid-template-columns: 1fr !important;
            }
            .sentiment-container {
                flex-direction: column !important;
            }
            .sentiment-chart {
                max-width: 500px;
                margin: 0 auto;
            }
            a {
                text-decoration: none;
                color: #000;
            }
        }
    </style>
</head>
<body>

    <div class="report-container">
        <header class="report-header">
            <button class="print-button" onclick="window.print()">🖨️ 打印/导出PDF</button>
            <h1>武汉大学舆情分析报告</h1>
            <p id="generation-time"></p>
        </header>

        <main class="grid-container">
            <!-- 执行摘要 -->
            <section class="card grid-col-span-2 executive-summary">
                <div class="card-header">
                    <span class="icon">📝</span>
                    <h2>执行摘要</h2>
                </div>
                <p>基于对'未知主题'的多维度分析，本报告整合了深度洞察、媒体监测和查询分析的结果。</p>
            </section>

            <!-- 关键发现 -->
            <section class="card grid-col-span-2">
                <div class="card-header">
                    <span class="icon">💡</span>
                    <h2>关键发现</h2>
                </div>
                <div id="key-findings-list">
                    <div class="finding-item">
                        <div class="finding-importance importance-medium"></div>
                        <div class="finding-content">
                            <h3>数据收集完成</h3>
                            <p>成功收集了来自三个分析引擎的数据</p>
                            <span class="finding-source">来源: 系统</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 情感分析 -->
            <section class="card grid-col-span-2">
                <div class="card-header">
                    <span class="icon">📊</span>
                    <h2>情感分析</h2>
                </div>
                <div class="sentiment-container">
                    <div class="sentiment-chart">
                        <canvas id="sentimentChart" aria-label="情感分布饼图" role="img"></canvas>
                    </div>
                    <div class="sentiment-details">
                        <p class="overall">
                            整体情感倾向: <span class="overall-value-neutral">中性</span>
                        </p>
                        <h3>关键情感驱动因素:</h3>
                        <ul>
                            <li>数据分析</li>
                            <li>系统处理</li>
                        </ul>
                    </div>
                </div>
            </section>

            <!-- 风险评估 -->
            <section class="card">
                <div class="card-header">
                    <span class="icon">⚠️</span>
                    <h2>风险评估</h2>
                </div>
                <div class="risk-level medium">
                    风险等级: 中等
                </div>
                <div class="risk-assessment-grid">
                    <div>
                        <h3>主要风险因素</h3>
                        <ul>
                            <li>数据处理限制</li>
                        </ul>
                    </div>
                    <div>
                        <h3>缓解建议</h3>
                        <ul>
                            <li>建议人工复核分析结果</li>
                        </ul>
                    </div>
                </div>
            </section>

            <!-- 建议措施 -->
            <section class="card">
                <div class="card-header">
                    <span class="icon">🚀</span>
                    <h2>建议措施</h2>
                </div>
                <table class="recommendations-table">
                    <thead>
                        <tr>
                            <th>类别</th>
                            <th>建议</th>
                            <th>优先级</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>数据质量</td>
                            <td>建议对分析结果进行人工验证</td>
                            <td><span class="priority-badge priority-medium">中</span></td>
                        </tr>
                    </tbody>
                </table>
            </section>

            <!-- 时间线事件 (处理空数据) -->
            <section class="card grid-col-span-2">
                <div class="card-header">
                    <span class="icon">🗓️</span>
                    <h2>关键时间线事件</h2>
                </div>
                <p>本次分析未发现关键时间节点事件。</p>
            </section>

        </main>

        <footer class="appendix">
            <p>本报告由自动化分析系统生成。数据来源：内部数据引擎。© 2024</p>
        </footer>
    </div>

    <!-- 引入Chart.js库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // 动态设置报告生成时间
        document.getElementById('generation-time').textContent = `报告生成于: ${new Date().toLocaleString('zh-CN')}`;

        // 等待DOM加载完成后执行图表渲染
        document.addEventListener('DOMContentLoaded', function () {
            // 从输入数据中获取情感分析结果
            const sentimentData = {
                positive: 0.33,
                neutral: 0.34,
                negative: 0.33
            };

            const ctx = document.getElementById('sentimentChart').getContext('2d');

            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['积极', '中性', '消极'],
                    datasets: [{
                        label: '情感分布',
                        data: [
                            sentimentData.positive * 100,
                            sentimentData.neutral * 100,
                            sentimentData.negative * 100
                        ],
                        backgroundColor: [
                            '#28a745', // 积极 (绿色)
                            '#6c757d', // 中性 (灰色)
                            '#dc3545'  // 消极 (红色)
                        ],
                        borderColor: '#ffffff',
                        borderWidth: 3,
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '60%',
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 20,
                                usePointStyle: true,
                                pointStyle: 'circle'
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.parsed !== null) {
                                        label += context.parsed.toFixed(2) + '%';
                                    }
                                    return label;
                                }
                            }
                        },
                        title: {
                            display: true,
                            text: '情感倾向分布',
                            font: {
                                size: 16
                            },
                            padding: {
                                top: 10,
                                bottom: 20
                            }
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>