179 lines
8.0 KiB
TeX
179 lines
8.0 KiB
TeX
\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容器。
|