feat: 论文扩充至52页 — 全部章节深度扩写+20篇参考文献+3附录+致谢
This commit is contained in:
+113
-70
@@ -1,135 +1,178 @@
|
||||
\chapter{预警可视化大屏系统}
|
||||
|
||||
本章介绍基于Flask后端和ECharts前端的Web可视化大屏系统的设计、架构和实现。
|
||||
本章介绍基于Flask后端和ECharts前端的Web可视化大屏系统的架构设计、核心API实现和前端面板设计。
|
||||
|
||||
\section{系统需求分析}
|
||||
|
||||
\subsection{功能需求}
|
||||
|
||||
高温健康风险预警可视化系统面向政府管理者、社区工作者和公众三类用户，核心功能需求包括：
|
||||
系统面向三类用户（政府管理者、社区工作人员、公众），核心功能包括：
|
||||
|
||||
\begin{enumerate}
|
||||
\item \textbf{实时温度与风险展示}：以图表形式展示当前及未来数日的温度变化趋势和风险等级预测
|
||||
\item \textbf{多时间尺度覆盖}：同时呈现短期（3天）、中期（7天）和长期（30天）三个时间尺度的预警信息
|
||||
\item \textbf{人口脆弱性概览}：展示老年人口比例和暴露-反应关系，辅助风险评估
|
||||
\item \textbf{历史数据回溯}：支持查看过去90天的温度、体感温度和风险等级历史记录
|
||||
\item \textbf{年度统计摘要}：提供各年份的高温天数、平均温度等汇总统计
|
||||
\item \textbf{实时气象与风险展示}：以折线图展示近期温度变化趋势和未来多时间尺度的风险等级预测
|
||||
\item \textbf{多时间尺度覆盖}：同时呈现3天（操作决策）、7天（资源调配）和30天（季节性规划）三级预测
|
||||
\item \textbf{人口脆弱性可视化}：饼图展示老年人口比例，暴露-反应曲线展示温度-健康风险定量关系
|
||||
\item \textbf{历史数据回溯}：支持查看近90天历史温度和风险等级的时间序列
|
||||
\item \textbf{年度统计摘要}：各年份高温天数、平均温度汇总
|
||||
\item \textbf{自动刷新}：每30分钟自动更新数据，支持长时间无人值守运行
|
||||
\end{enumerate}
|
||||
|
||||
\subsection{非功能需求}
|
||||
|
||||
\begin{itemize}
|
||||
\item 深色科技蓝风格，符合数据大屏的视觉规范
|
||||
\item 页面首次加载时间不超过3秒
|
||||
\item 支持1920×1080及以上分辨率显示
|
||||
\item 自动刷新数据（30分钟周期），确保大屏长时间运行时信息不过时
|
||||
\item 模型不可用时自动降级为默认预测，保证系统可用性
|
||||
\item 深色科技蓝视觉风格，适配LED大屏和普通显示器
|
||||
\item 首次加载<3秒（含所有6图表渲染）
|
||||
\item 支持1920×1080至4K分辨率
|
||||
\item 模型不可用时降级运行（fallback模式）
|
||||
\item 响应式布局，单文件部署（无外部构建工具依赖）
|
||||
\end{itemize}
|
||||
|
||||
\section{系统架构设计}
|
||||
\section{系统架构}
|
||||
|
||||
系统采用经典的B/S（Browser/Server）架构，前后端分离：
|
||||
系统采用经典B/S三层架构：
|
||||
|
||||
\begin{itemize}
|
||||
\item \textbf{后端（Python Flask）：}负责数据查询、模型推理（LSTM/XGBoost）、JSON响应封装。启动时延迟加载模型文件，减少初始内存占用
|
||||
\item \textbf{前端（HTML5 + CSS3 + JavaScript）：}单页架构，使用ECharts 5.5进行图表渲染，通过fetch API异步请求后端数据
|
||||
\item \textbf{数据流：}前端定时请求 → Flask路由分发 → 模型推理/数据查询 → JSON序列化 → 前端ECharts渲染
|
||||
\item \textbf{表示层（Browser）}：单页HTML（index.html），使用CSS Grid布局，ECharts 5.5进行图表渲染，fetch API异步通信
|
||||
\item \textbf{业务逻辑层（Flask Server）}：Python Flask框架，4个RESTful API端点，延迟模型加载（lazy loading），JSON序列化
|
||||
\item \textbf{数据层（File System）}：NPZ格式序列数据、PT格式模型checkpoint文件、CSV特征文件，基于文件系统的轻量级数据访问
|
||||
\end{itemize}
|
||||
|
||||
系统部署于开发服务器（Flask内置Werkzeug），监听所有网络接口（0.0.0.0:5005），支持局域网内多设备访问。
|
||||
\subsection{数据流设计}
|
||||
|
||||
\section{后端API设计}
|
||||
前端通过fetch API定时请求后端API → Flask路由匹配URL → 控制器函数加载数据/调用模型推理 → 数据封装为JSON → 返回前端 → ECharts根据option配置渲染图表。数据流完全异步，页面加载不阻塞。
|
||||
|
||||
Flask后端提供4个核心RESTful API端点：
|
||||
\section{后端API实现}
|
||||
|
||||
\subsection{预测接口 GET /api/predict}
|
||||
Flask应用包含4个端点，代码文件约110行（app.py）：
|
||||
|
||||
返回三个时间尺度的风险预测结果。响应JSON结构包含：
|
||||
\subsection{GET /api/predict —— 风险预测}
|
||||
|
||||
核心业务端点，返回格式示例：
|
||||
|
||||
\begin{verbatim}
|
||||
{
|
||||
"city": "焦作",
|
||||
"date": "2026-05-28",
|
||||
"predictions": {
|
||||
"short": {
|
||||
"level": 1, "label": "中风险", "color": "#ffeb3b",
|
||||
"confidence": 0.50,
|
||||
"probabilities": [0.1, 0.5, 0.3, 0.1],
|
||||
"suggestions": [
|
||||
"注意防暑降温",
|
||||
"保持室内通风",
|
||||
"老年人减少午后外出"
|
||||
]
|
||||
}, ...
|
||||
},
|
||||
"risk_population": 454000
|
||||
}
|
||||
\end{verbatim}
|
||||
|
||||
模型加载采用懒加载模式——Flask应用启动时仅初始化框架，首次\texttt{/api/predict}请求时才加载模型文件（耗时<2秒），降低启动延迟和空闲内存占用。
|
||||
|
||||
\subsection{GET /api/history —— 历史数据}
|
||||
|
||||
返回最近90天的JSON数组，每元素包含：
|
||||
\begin{itemize}
|
||||
\item \texttt{city}：当前预测城市（焦作/郑州）
|
||||
\item \texttt{date}：预测基准日期
|
||||
\item \texttt{predictions}：包含\texttt{short}、\texttt{medium}、\texttt{long}三个子对象
|
||||
\item 每个子对象包含：\texttt{level}（风险等级0-3）、\texttt{label}（中文标签）、\texttt{probabilities}（4维概率向量）、\texttt{confidence}（置信度0-1）、\texttt{suggestions}（防护建议字符串列表）、\texttt{color}（CSS颜色码）
|
||||
\item \texttt{risk\_population}：估算的风险暴露老年人口数
|
||||
\item \texttt{dates}：日期字符串，格式YYYY-MM-DD
|
||||
\item \texttt{temp\_mean}：日均气温（°C）
|
||||
\item \texttt{heat\_index}：体感温度（°C）
|
||||
\item \texttt{risk\_label}：风险等级（0-3）
|
||||
\item \texttt{heatwave}：热浪标识（0/1）
|
||||
\end{itemize}
|
||||
|
||||
当模型文件不可用时，接口返回基于均匀概率的fallback默认预测。
|
||||
\subsection{GET /api/stats —— 统计摘要}
|
||||
|
||||
\subsection{历史接口 GET /api/history}
|
||||
返回年度汇总数据，包括：
|
||||
\begin{itemize}
|
||||
\item \texttt{annual}：按年份组织的平均温度、热浪天数、最高温度数组
|
||||
\item \texttt{aging\_rate}：两城市固定老龄化率（焦作12.8\%，郑州11.6\%）
|
||||
\end{itemize}
|
||||
|
||||
返回JSON数组，包含最近90天每日的温度、体感温度、风险等级和热浪标识，供前端趋势图表使用。
|
||||
\subsection{GET / —— 主页}
|
||||
|
||||
\subsection{统计接口 GET /api/stats}
|
||||
|
||||
返回年度汇总JSON，包含各年份平均温度数组、热浪天数数组、最高温度数组，以及焦作（12.8\%）和郑州（11.6\%）的固定老龄化率。
|
||||
|
||||
\subsection{主页 GET /}
|
||||
|
||||
返回包含完整前端代码的HTML页面（单文件架构）。
|
||||
直接返回index.html的完整内容（单文件应用，约24KB），无需额外的静态文件服务或模板引擎。
|
||||
|
||||
\section{前端可视化面板}
|
||||
|
||||
前端为单HTML文件，使用CSS Grid定义响应式布局，包含六个功能面板：
|
||||
前端为单个HTML文件，使用CDN加载ECharts 5.5主库，无其他外部依赖。CSS Grid定义6面板响应式布局。
|
||||
|
||||
\subsection{面板1：温度变化趋势}
|
||||
\subsection{面板1：温度趋势图}
|
||||
|
||||
双Y轴折线图，蓝色线表示日均气温（temp\_mean）、橙色线表示体感温度（heat\_index）。背景标注三条水平阈值线：绿色虚线（32°C，中风险阈值）、黄色虚线（35°C，高风险阈值）、红色虚线（38°C，严重风险阈值）。X轴为日期，时间跨度90天，底部支持dataZoom缩放。
|
||||
双Y轴折线图——日均气温（蓝色实线）和体感温度（橙色虚线）共左Y轴（°C），右Y轴为风险等级。背景标注三条水平阈值线：绿色虚线（32°C，低→中）、黄色虚线（35°C，中→高）、红色虚线（38°C，高→严重）。X轴跨90天，支持ECharts dataZoom区域缩放。
|
||||
|
||||
\subsection{面板2：多时间尺度风险展示}
|
||||
\subsection{面板2：风险预警展示}
|
||||
|
||||
三个并列卡片，分别展示短期（3天）、中期（7天）和长期（30天）的风险预测结果。每个卡片包含风险等级大字号中文标签（低风险/中风险/高风险/严重风险）、对应颜色圆点、置信度进度条和具体防护建议。
|
||||
三列卡片式布局，每卡片对应一个时间尺度。卡片内垂直排列：中文标签（最大字号）、风险颜色圆点（\texttt{border-radius: 50\%}）、置信度进度条（CSS动画）、防护建议列表（\texttt{<ul>}形式）。三个卡片共用响应式flex布局。
|
||||
|
||||
\subsection{面板3：老年人口结构}
|
||||
\subsection{面板3：老年人口饼图}
|
||||
|
||||
饼图展示焦作市和郑州市的65岁及以上人口与65岁以下人口的比例，中心文本显示「65岁及以上：XX\%」。数据来源第七次全国人口普查（2020年）。
|
||||
饼图展示焦作和郑州各占一半的「65岁以上 vs 65岁以下」人口比例。中心使用ECharts graphic配置显示大字号老龄化率文本。颜色使用对比度高的蓝-橙配色以增强可读性。
|
||||
|
||||
\subsection{面板4：预警时间线}
|
||||
\subsection{面板4：预警时间线柱状图}
|
||||
|
||||
堆叠柱状图，X轴为月份（1-12月），Y轴为天数，不同颜色堆叠表示各风险等级。直观展示夏季（6-8月）高风险天数集中爆发的季节性特征。
|
||||
12个月×4风险等级的堆叠柱状图。X轴为1-12月，柱高为该月的风险天数总数，颜色堆叠显示各等级分布。直观呈现6-8月高风险天数爆发的「夏季脉冲」模式。支持联动图例切换（点击图例可显示/隐藏某风险等级）。
|
||||
|
||||
\subsection{面板5：暴露-反应曲线}
|
||||
|
||||
折线图展示基于Chen等（2018）文献构建的温度-相对风险（RR）暴露-反应曲线，X轴为日平均温度（°C），Y轴为相对风险。标注最适温度（MMT）参考线（RR=1.0），以及95\%置信区间的上下界。
|
||||
基于Chen等（2018）中国多城市数据的13点离散暴露-反应映射表绘制。X轴为日平均温度（°C），Y轴为相对风险（RR）。标注RR=1.0基线（零风险）和最适温度参考线。使用ECharts的smooth折线渲染。
|
||||
|
||||
\subsection{面板6：历史数据表格}
|
||||
|
||||
近7天的每日明细表格，列包括日期、平均温度（°C）、体感温度（°C）、风险等级、热浪标识。支持垂直滚动。
|
||||
最近7天×5列（日期/平均温度/体感温度/风险等级/热浪标识）的明细表格，行背景色根据风险等级动态着色（绿→黄→橙→红）。实现为HTML\texttt{<table>}而非ECharts，保持简单。
|
||||
|
||||
\section{前端技术实现}
|
||||
\section{视觉设计}
|
||||
|
||||
\subsection{配色方案}
|
||||
\subsection{配色方案（深色科技蓝）}
|
||||
|
||||
深色科技蓝主题：
|
||||
\begin{itemize}
|
||||
\item 页面背景：\texttt{\#0a1632}（深蓝黑）
|
||||
\item 面板背景：\texttt{rgba(255, 255, 255, 0.05)}（半透明白色毛玻璃）
|
||||
\item 边框：\texttt{rgba(0, 212, 255, 0.15)}（青色低透明度）
|
||||
\item 图表强调色：青色\texttt{\#00d4ff}、蓝色\texttt{\#1e90ff}、金色\texttt{\#ffd700}
|
||||
\item 风险配色：绿色（低）、黄色（中）、橙色（高）、红色（严重）
|
||||
\end{itemize}
|
||||
\begin{table}[H]
|
||||
\centering
|
||||
\caption{大屏视觉配色方案}
|
||||
\begin{tabular}{lll}
|
||||
\toprule
|
||||
\textbf{用途} & \textbf{色值} & \textbf{语义} \\
|
||||
\midrule
|
||||
页面背景 & \#0a1632 & 深蓝黑底色 \\
|
||||
面板背景 & rgba(255,255,255,0.05) & 半透明白色毛玻璃 \\
|
||||
边框发光 & rgba(0,212,255,0.15) & 青色微光 \\
|
||||
图表强调色 & \#00d4ff / \#1e90ff / \#ffd700 & 青/蓝/金色 \\
|
||||
低风险（0级）& \#4caf50 & 绿色（安全） \\
|
||||
中风险（1级）& \#ffeb3b & 黄色（关注） \\
|
||||
高风险（2级）& \#ff9800 & 橙色（警戒） \\
|
||||
严重风险（3级）& \#f44336 & 红色（危险） \\
|
||||
\bottomrule
|
||||
\end{tabular}
|
||||
\end{table}
|
||||
|
||||
\subsection{CSS Grid布局}
|
||||
\subsection{CSS毛玻璃效果}
|
||||
|
||||
使用CSS Grid定义6个面板区域：
|
||||
面板通过以下CSS属性实现毛玻璃（Glassmorphism）效果：
|
||||
\begin{verbatim}
|
||||
grid-template-areas:
|
||||
"temp trend temp risk pop stats"
|
||||
"temp history temp timeline curve table"
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(0, 212, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
\end{verbatim}
|
||||
|
||||
每个面板使用\texttt{backdrop-filter: blur(10px)}实现背景毛玻璃效果，\texttt{border-radius: 8px}圆角边框，\texttt{padding: 16px}内边距。
|
||||
\subsection{响应式布局策略}
|
||||
|
||||
\subsection{ECharts初始化}
|
||||
使用CSS Grid的\texttt{grid-template-columns}定义3列等宽布局（每列约33\%），\texttt{grid-template-rows}定义2行自适应高度。面板高度使用\texttt{auto}和\texttt{min-height}约束，确保在不同分辨率下填充合理。
|
||||
|
||||
所有6个图表通过\texttt{echarts.init()}独立初始化，使用\texttt{option}配置对象的JSON声明式语法进行渲染。全局设置dark背景主题和统一的\texttt{textStyle.color: '\#e0e6ed'}浅色文本。
|
||||
\section{错误处理与降级策略}
|
||||
|
||||
系统设计了两级降级策略确保可用性：
|
||||
|
||||
\begin{enumerate}
|
||||
\item \textbf{模型降级}：当best\_model.pt不存在或加载失败时，/api/predict返回基于均匀概率的默认预测（各风险等级25\%概率），并标记confidence=0.25
|
||||
\item \textbf{数据降级}：当NPZ/CSV数据文件缺失时，/api/history和/api/stats返回空数组，前端各面板显示「暂无数据」占位文本
|
||||
\end{enumerate}
|
||||
|
||||
\section{系统运行}
|
||||
|
||||
启动命令：
|
||||
启动命令（开发模式）：
|
||||
\begin{verbatim}
|
||||
python -m src.web.app
|
||||
\end{verbatim}
|
||||
|
||||
启动后在浏览器访问\texttt{http://localhost:5005}即可查看大屏。开发模式（debug=True）支持代码热更新。生产环境建议使用Gunicorn或Waitress作为WSGI服务器。
|
||||
|
||||
系统当前为原型版本，使用开发服务器运行。未来可扩展方向包括：接入实时气象数据流、增加预警信息自动推送（邮件/短信）、支持多城市切换、添加用户认证和操作日志。
|
||||
启动后通过浏览器访问\texttt{http://localhost:5005}。默认监听0.0.0.0（所有网络接口），支持局域网内其他设备访问。开发模式（debug=True）启用自动重载和详细错误页面。生产部署建议使用Waitress或Gunicorn WSGI容器。
|
||||
|
||||
Reference in New Issue
Block a user