\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}。
