戒酒的李白
543 lines
18 KiB
HTML
543 lines
18 KiB
HTML
<!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> |