Serendipity
07468266b4
- LSTM-Attention模型(983K参数) + XGBoost基线 - Flask API后端(4端点) + ECharts可视化大屏(6面板) - LaTeX学位论文完整框架(7章+参考文献) - ERA5下载脚本(CDS逐月并行下载) - README项目文档 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
76 lines
3.4 KiB
TeX
76 lines
3.4 KiB
TeX
\chapter{预警可视化系统设计与实现}
|
||
|
||
\section{系统需求分析}
|
||
|
||
\subsection{功能需求}
|
||
|
||
高温健康风险预警可视化系统的主要功能需求包括：实时气象数据展示、温度变化趋势分析、多时间尺度风险预警展示、人口与健康数据概览、历史数据查询和预警发布管理。
|
||
|
||
\subsection{非功能需求}
|
||
|
||
系统应具备以下非功能特性：（1）响应式布局，适配不同尺寸的显示设备；（2）数据更新延迟不超过5分钟；（3）可视化渲染流畅，页面加载时间不超过3秒；（4）界面采用深色科技蓝风格，符合数据大屏的视觉规范。
|
||
|
||
\section{系统架构设计}
|
||
|
||
系统采用B/S（Browser/Server）架构，分为三层：
|
||
|
||
\begin{itemize}
|
||
\item \textbf{数据层}：负责气象数据、人口数据和模型预测结果的存储与管理
|
||
\item \textbf{服务层}：基于Flask框架的Web后端，提供RESTful API，包括数据查询、模型推理和预警推送
|
||
\item \textbf{展示层}：基于HTML+CSS+JavaScript的Web前端，使用ECharts进行数据可视化
|
||
\end{itemize}
|
||
|
||
\section{后端实现}
|
||
|
||
\subsection{Flask应用结构}
|
||
|
||
Flask应用采用蓝图（Blueprint）模块化组织，主要模块包括：
|
||
\begin{itemize}
|
||
\item \texttt{api/data}：气象和人口数据接口
|
||
\item \texttt{api/predict}：模型预测与预警接口
|
||
\item \texttt{api/history}：历史数据查询接口
|
||
\end{itemize}
|
||
|
||
\subsection{数据接口设计}
|
||
|
||
API采用JSON格式进行数据交互，统一响应格式为：
|
||
\begin{verbatim}
|
||
{
|
||
"code": 200,
|
||
"message": "success",
|
||
"data": { ... }
|
||
}
|
||
\end{verbatim}
|
||
|
||
主要API端点包括：获取当前温度数据、获取温度历史趋势、获取风险预警等级、获取人口统计数据、获取高温天数统计等。
|
||
|
||
\subsection{模型部署与推理}
|
||
|
||
训练完成的PyTorch模型导出为TorchScript格式，在Flask应用启动时加载。推理请求到达时，将输入数据预处理后传入模型，获取预测结果并返回前端。
|
||
|
||
\section{前端实现}
|
||
|
||
\subsection{页面布局}
|
||
|
||
可视化大屏采用典型的4+1布局方案：上方为标题栏，中部左侧为温度变化趋势图，中部右侧为风险预警面板，下部左侧为人口数据概览，下部右侧为高温天数统计，中央区域展示关键预警信息。
|
||
|
||
\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}。
|