\chapter{预警可视化大屏系统}

本章介绍基于Flask后端和ECharts前端的Web可视化大屏系统的架构设计、核心API实现和前端面板设计。

\section{系统需求分析}

\subsection{功能需求}

系统面向三类用户（政府管理者、社区工作人员、公众），核心功能包括：

\begin{enumerate}
    \item \textbf{实时气象与风险展示}：以折线图展示近期温度变化趋势和未来多时间尺度的风险等级预测
    \item \textbf{多时间尺度覆盖}：同时呈现3天（操作决策）、7天（资源调配）和30天（季节性规划）三级预测
    \item \textbf{人口脆弱性可视化}：饼图展示老年人口比例，暴露-反应曲线展示温度-健康风险定量关系
    \item \textbf{历史数据回溯}：支持查看近90天历史温度和风险等级的时间序列
    \item \textbf{年度统计摘要}：各年份高温天数、平均温度汇总
    \item \textbf{自动刷新}：每30分钟自动更新数据，支持长时间无人值守运行
\end{enumerate}

\subsection{非功能需求}

\begin{itemize}
    \item 深色科技蓝视觉风格，适配LED大屏和普通显示器
    \item 首次加载<3秒（含所有6图表渲染）
    \item 支持1920×1080至4K分辨率
    \item 模型不可用时降级运行（fallback模式）
    \item 响应式布局，单文件部署（无外部构建工具依赖）
\end{itemize}

\section{系统架构}

系统采用经典B/S三层架构：

\begin{itemize}
    \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}

\subsection{数据流设计}

前端通过fetch API定时请求后端API → Flask路由匹配URL → 控制器函数加载数据/调用模型推理 → 数据封装为JSON → 返回前端 → ECharts根据option配置渲染图表。数据流完全异步，页面加载不阻塞。

\section{后端API实现}

Flask应用包含4个端点，代码文件约110行（app.py）：

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

\subsection{GET /api/stats —— 统计摘要}

返回年度汇总数据，包括：
\begin{itemize}
    \item \texttt{annual}：按年份组织的平均温度、热浪天数、最高温度数组
    \item \texttt{aging\_rate}：两城市固定老龄化率（焦作12.8\%，郑州11.6\%）
\end{itemize}

\subsection{GET / —— 主页}

直接返回index.html的完整内容（单文件应用，约24KB），无需额外的静态文件服务或模板引擎。

\section{前端可视化面板}

前端为单个HTML文件，使用CDN加载ECharts 5.5主库，无其他外部依赖。CSS Grid定义6面板响应式布局。

\subsection{面板1：温度趋势图}

双Y轴折线图——日均气温（蓝色实线）和体感温度（橙色虚线）共左Y轴（°C），右Y轴为风险等级。背景标注三条水平阈值线：绿色虚线（32°C，低→中）、黄色虚线（35°C，中→高）、红色虚线（38°C，高→严重）。X轴跨90天，支持ECharts dataZoom区域缩放。

\subsection{面板2：风险预警展示}

三列卡片式布局，每卡片对应一个时间尺度。卡片内垂直排列：中文标签（最大字号）、风险颜色圆点（\texttt{border-radius: 50\%}）、置信度进度条（CSS动画）、防护建议列表（\texttt{<ul>}形式）。三个卡片共用响应式flex布局。

\subsection{面板3：老年人口饼图}

饼图展示焦作和郑州各占一半的「65岁以上 vs 65岁以下」人口比例。中心使用ECharts graphic配置显示大字号老龄化率文本。颜色使用对比度高的蓝-橙配色以增强可读性。

\subsection{面板4：预警时间线柱状图}

12个月×4风险等级的堆叠柱状图。X轴为1-12月，柱高为该月的风险天数总数，颜色堆叠显示各等级分布。直观呈现6-8月高风险天数爆发的「夏季脉冲」模式。支持联动图例切换（点击图例可显示/隐藏某风险等级）。

\subsection{面板5：暴露-反应曲线}

基于Chen等（2018）中国多城市数据的13点离散暴露-反应映射表绘制。X轴为日平均温度（°C），Y轴为相对风险（RR）。标注RR=1.0基线（零风险）和最适温度参考线。使用ECharts的smooth折线渲染。

\subsection{面板6：历史数据表格}

最近7天×5列（日期/平均温度/体感温度/风险等级/热浪标识）的明细表格，行背景色根据风险等级动态着色（绿→黄→橙→红）。实现为HTML\texttt{<table>}而非ECharts，保持简单。

\section{视觉设计}

\subsection{配色方案（深色科技蓝）}

\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毛玻璃效果}

面板通过以下CSS属性实现毛玻璃（Glassmorphism）效果：
\begin{verbatim}
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}

\subsection{响应式布局策略}

使用CSS Grid的\texttt{grid-template-columns}定义3列等宽布局（每列约33\%），\texttt{grid-template-rows}定义2行自适应高度。面板高度使用\texttt{auto}和\texttt{min-height}约束，确保在不同分辨率下填充合理。

\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}。默认监听0.0.0.0（所有网络接口），支持局域网内其他设备访问。开发模式（debug=True）启用自动重载和详细错误页面。生产部署建议使用Waitress或Gunicorn WSGI容器。