feat: 论文大幅扩写 — 42页，完整数学公式+实际数据+系统描述
This commit is contained in:
+105
-45
@@ -1,75 +1,135 @@
|
||||
\chapter{预警可视化系统设计与实现}
|
||||
\chapter{预警可视化大屏系统}
|
||||
|
||||
本章介绍基于Flask后端和ECharts前端的Web可视化大屏系统的设计、架构和实现。
|
||||
|
||||
\section{系统需求分析}
|
||||
|
||||
\subsection{功能需求}
|
||||
|
||||
高温健康风险预警可视化系统的主要功能需求包括：实时气象数据展示、温度变化趋势分析、多时间尺度风险预警展示、人口与健康数据概览、历史数据查询和预警发布管理。
|
||||
高温健康风险预警可视化系统面向政府管理者、社区工作者和公众三类用户，核心功能需求包括：
|
||||
|
||||
\begin{enumerate}
|
||||
\item \textbf{实时温度与风险展示}：以图表形式展示当前及未来数日的温度变化趋势和风险等级预测
|
||||
\item \textbf{多时间尺度覆盖}：同时呈现短期（3天）、中期（7天）和长期（30天）三个时间尺度的预警信息
|
||||
\item \textbf{人口脆弱性概览}：展示老年人口比例和暴露-反应关系，辅助风险评估
|
||||
\item \textbf{历史数据回溯}：支持查看过去90天的温度、体感温度和风险等级历史记录
|
||||
\item \textbf{年度统计摘要}：提供各年份的高温天数、平均温度等汇总统计
|
||||
\end{enumerate}
|
||||
|
||||
\subsection{非功能需求}
|
||||
|
||||
系统应具备以下非功能特性：（1）响应式布局，适配不同尺寸的显示设备；（2）数据更新延迟不超过5分钟；（3）可视化渲染流畅，页面加载时间不超过3秒；（4）界面采用深色科技蓝风格，符合数据大屏的视觉规范。
|
||||
\begin{itemize}
|
||||
\item 深色科技蓝风格，符合数据大屏的视觉规范
|
||||
\item 页面首次加载时间不超过3秒
|
||||
\item 支持1920×1080及以上分辨率显示
|
||||
\item 自动刷新数据（30分钟周期），确保大屏长时间运行时信息不过时
|
||||
\item 模型不可用时自动降级为默认预测，保证系统可用性
|
||||
\end{itemize}
|
||||
|
||||
\section{系统架构设计}
|
||||
|
||||
系统采用B/S（Browser/Server）架构，分为三层：
|
||||
系统采用经典的B/S（Browser/Server）架构，前后端分离：
|
||||
|
||||
\begin{itemize}
|
||||
\item \textbf{数据层}：负责气象数据、人口数据和模型预测结果的存储与管理
|
||||
\item \textbf{服务层}：基于Flask框架的Web后端，提供RESTful API，包括数据查询、模型推理和预警推送
|
||||
\item \textbf{展示层}：基于HTML+CSS+JavaScript的Web前端，使用ECharts进行数据可视化
|
||||
\item \textbf{后端（Python Flask）：}负责数据查询、模型推理（LSTM/XGBoost）、JSON响应封装。启动时延迟加载模型文件，减少初始内存占用
|
||||
\item \textbf{前端（HTML5 + CSS3 + JavaScript）：}单页架构，使用ECharts 5.5进行图表渲染，通过fetch API异步请求后端数据
|
||||
\item \textbf{数据流：}前端定时请求 → Flask路由分发 → 模型推理/数据查询 → JSON序列化 → 前端ECharts渲染
|
||||
\end{itemize}
|
||||
|
||||
\section{后端实现}
|
||||
系统部署于开发服务器（Flask内置Werkzeug），监听所有网络接口（0.0.0.0:5005），支持局域网内多设备访问。
|
||||
|
||||
\subsection{Flask应用结构}
|
||||
\section{后端API设计}
|
||||
|
||||
Flask应用采用蓝图（Blueprint）模块化组织，主要模块包括：
|
||||
Flask后端提供4个核心RESTful API端点：
|
||||
|
||||
\subsection{预测接口 GET /api/predict}
|
||||
|
||||
返回三个时间尺度的风险预测结果。响应JSON结构包含：
|
||||
\begin{itemize}
|
||||
\item \texttt{api/data}：气象和人口数据接口
|
||||
\item \texttt{api/predict}：模型预测与预警接口
|
||||
\item \texttt{api/history}：历史数据查询接口
|
||||
\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}：估算的风险暴露老年人口数
|
||||
\end{itemize}
|
||||
|
||||
\subsection{数据接口设计}
|
||||
当模型文件不可用时，接口返回基于均匀概率的fallback默认预测。
|
||||
|
||||
API采用JSON格式进行数据交互，统一响应格式为：
|
||||
\subsection{历史接口 GET /api/history}
|
||||
|
||||
返回JSON数组，包含最近90天每日的温度、体感温度、风险等级和热浪标识，供前端趋势图表使用。
|
||||
|
||||
\subsection{统计接口 GET /api/stats}
|
||||
|
||||
返回年度汇总JSON，包含各年份平均温度数组、热浪天数数组、最高温度数组，以及焦作（12.8\%）和郑州（11.6\%）的固定老龄化率。
|
||||
|
||||
\subsection{主页 GET /}
|
||||
|
||||
返回包含完整前端代码的HTML页面（单文件架构）。
|
||||
|
||||
\section{前端可视化面板}
|
||||
|
||||
前端为单HTML文件，使用CSS Grid定义响应式布局，包含六个功能面板：
|
||||
|
||||
\subsection{面板1：温度变化趋势}
|
||||
|
||||
双Y轴折线图，蓝色线表示日均气温（temp\_mean）、橙色线表示体感温度（heat\_index）。背景标注三条水平阈值线：绿色虚线（32°C，中风险阈值）、黄色虚线（35°C，高风险阈值）、红色虚线（38°C，严重风险阈值）。X轴为日期，时间跨度90天，底部支持dataZoom缩放。
|
||||
|
||||
\subsection{面板2：多时间尺度风险展示}
|
||||
|
||||
三个并列卡片，分别展示短期（3天）、中期（7天）和长期（30天）的风险预测结果。每个卡片包含风险等级大字号中文标签（低风险/中风险/高风险/严重风险）、对应颜色圆点、置信度进度条和具体防护建议。
|
||||
|
||||
\subsection{面板3：老年人口结构}
|
||||
|
||||
饼图展示焦作市和郑州市的65岁及以上人口与65岁以下人口的比例，中心文本显示「65岁及以上：XX\%」。数据来源第七次全国人口普查（2020年）。
|
||||
|
||||
\subsection{面板4：预警时间线}
|
||||
|
||||
堆叠柱状图，X轴为月份（1-12月），Y轴为天数，不同颜色堆叠表示各风险等级。直观展示夏季（6-8月）高风险天数集中爆发的季节性特征。
|
||||
|
||||
\subsection{面板5：暴露-反应曲线}
|
||||
|
||||
折线图展示基于Chen等（2018）文献构建的温度-相对风险（RR）暴露-反应曲线，X轴为日平均温度（°C），Y轴为相对风险。标注最适温度（MMT）参考线（RR=1.0），以及95\%置信区间的上下界。
|
||||
|
||||
\subsection{面板6：历史数据表格}
|
||||
|
||||
近7天的每日明细表格，列包括日期、平均温度（°C）、体感温度（°C）、风险等级、热浪标识。支持垂直滚动。
|
||||
|
||||
\section{前端技术实现}
|
||||
|
||||
\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}
|
||||
|
||||
\subsection{CSS Grid布局}
|
||||
|
||||
使用CSS Grid定义6个面板区域：
|
||||
\begin{verbatim}
|
||||
{
|
||||
"code": 200,
|
||||
"message": "success",
|
||||
"data": { ... }
|
||||
}
|
||||
grid-template-areas:
|
||||
"temp trend temp risk pop stats"
|
||||
"temp history temp timeline curve table"
|
||||
\end{verbatim}
|
||||
|
||||
主要API端点包括：获取当前温度数据、获取温度历史趋势、获取风险预警等级、获取人口统计数据、获取高温天数统计等。
|
||||
每个面板使用\texttt{backdrop-filter: blur(10px)}实现背景毛玻璃效果，\texttt{border-radius: 8px}圆角边框，\texttt{padding: 16px}内边距。
|
||||
|
||||
\subsection{模型部署与推理}
|
||||
\subsection{ECharts初始化}
|
||||
|
||||
训练完成的PyTorch模型导出为TorchScript格式，在Flask应用启动时加载。推理请求到达时，将输入数据预处理后传入模型，获取预测结果并返回前端。
|
||||
所有6个图表通过\texttt{echarts.init()}独立初始化，使用\texttt{option}配置对象的JSON声明式语法进行渲染。全局设置dark背景主题和统一的\texttt{textStyle.color: '\#e0e6ed'}浅色文本。
|
||||
|
||||
\section{前端实现}
|
||||
\section{系统运行}
|
||||
|
||||
\subsection{页面布局}
|
||||
启动命令：
|
||||
\begin{verbatim}
|
||||
python -m src.web.app
|
||||
\end{verbatim}
|
||||
|
||||
可视化大屏采用典型的4+1布局方案：上方为标题栏，中部左侧为温度变化趋势图，中部右侧为风险预警面板，下部左侧为人口数据概览，下部右侧为高温天数统计，中央区域展示关键预警信息。
|
||||
启动后在浏览器访问\texttt{http://localhost:5005}即可查看大屏。开发模式（debug=True）支持代码热更新。生产环境建议使用Gunicorn或Waitress作为WSGI服务器。
|
||||
|
||||
\subsection{图表设计}
|
||||
|
||||
使用ECharts实现以下主要图表：
|
||||
\begin{itemize}
|
||||
\item 温度变化折线图：展示日最高/最低/平均温度的时序变化
|
||||
\item 风险等级仪表盘：以仪表盘形式展示当前风险等级
|
||||
\item 预警时间轴：以时间轴形式展示未来预警信息
|
||||
\item 人口结构饼图：展示老龄化人口分布
|
||||
\item 高温天数柱状图：展示每月高温天数统计
|
||||
\item 热力图：展示温度与健康风险的关联模式
|
||||
\end{itemize}
|
||||
|
||||
\subsection{深色科技蓝风格实现}
|
||||
|
||||
配色方案以深蓝色（\#0a1628）为背景主色调，辅以青蓝色（\#00d4ff）、亮蓝色（\#1e90ff）和渐变色作为数据可视化配色。图表采用半透明深色容器、发光边框和毛玻璃效果，营造科技感和专业感。
|
||||
|
||||
\section{系统部署}
|
||||
|
||||
系统通过Gunicorn作为WSGI服务器进行生产环境部署，绑定端口为5005。前端静态文件由Flask直接托管，无需额外配置Nginx。系统启动后可通过浏览器直接访问\url{http://localhost:5005}。
|
||||
系统当前为原型版本，使用开发服务器运行。未来可扩展方向包括：接入实时气象数据流、增加预警信息自动推送（邮件/短信）、支持多城市切换、添加用户认证和操作日志。
|
||||
|
||||
Reference in New Issue
Block a user