136 lines
6.8 KiB
TeX
136 lines
6.8 KiB
TeX
\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{非功能需求}
|
||
|
||
\begin{itemize}
|
||
\item 深色科技蓝风格，符合数据大屏的视觉规范
|
||
\item 页面首次加载时间不超过3秒
|
||
\item 支持1920×1080及以上分辨率显示
|
||
\item 自动刷新数据（30分钟周期），确保大屏长时间运行时信息不过时
|
||
\item 模型不可用时自动降级为默认预测，保证系统可用性
|
||
\end{itemize}
|
||
|
||
\section{系统架构设计}
|
||
|
||
系统采用经典的B/S（Browser/Server）架构，前后端分离：
|
||
|
||
\begin{itemize}
|
||
\item \textbf{后端（Python Flask）：}负责数据查询、模型推理（LSTM/XGBoost）、JSON响应封装。启动时延迟加载模型文件，减少初始内存占用
|
||
\item \textbf{前端（HTML5 + CSS3 + JavaScript）：}单页架构，使用ECharts 5.5进行图表渲染，通过fetch API异步请求后端数据
|
||
\item \textbf{数据流：}前端定时请求 → Flask路由分发 → 模型推理/数据查询 → JSON序列化 → 前端ECharts渲染
|
||
\end{itemize}
|
||
|
||
系统部署于开发服务器（Flask内置Werkzeug），监听所有网络接口（0.0.0.0:5005），支持局域网内多设备访问。
|
||
|
||
\section{后端API设计}
|
||
|
||
Flask后端提供4个核心RESTful API端点：
|
||
|
||
\subsection{预测接口 GET /api/predict}
|
||
|
||
返回三个时间尺度的风险预测结果。响应JSON结构包含：
|
||
\begin{itemize}
|
||
\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}
|
||
|
||
当模型文件不可用时，接口返回基于均匀概率的fallback默认预测。
|
||
|
||
\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}
|
||
grid-template-areas:
|
||
"temp trend temp risk pop stats"
|
||
"temp history temp timeline curve table"
|
||
\end{verbatim}
|
||
|
||
每个面板使用\texttt{backdrop-filter: blur(10px)}实现背景毛玻璃效果，\texttt{border-radius: 8px}圆角边框，\texttt{padding: 16px}内边距。
|
||
|
||
\subsection{ECharts初始化}
|
||
|
||
所有6个图表通过\texttt{echarts.init()}独立初始化，使用\texttt{option}配置对象的JSON声明式语法进行渲染。全局设置dark背景主题和统一的\texttt{textStyle.color: '\#e0e6ed'}浅色文本。
|
||
|
||
\section{系统运行}
|
||
|
||
启动命令：
|
||
\begin{verbatim}
|
||
python -m src.web.app
|
||
\end{verbatim}
|
||
|
||
启动后在浏览器访问\texttt{http://localhost:5005}即可查看大屏。开发模式（debug=True）支持代码热更新。生产环境建议使用Gunicorn或Waitress作为WSGI服务器。
|
||
|
||
系统当前为原型版本，使用开发服务器运行。未来可扩展方向包括：接入实时气象数据流、增加预警信息自动推送（邮件/短信）、支持多城市切换、添加用户认证和操作日志。
|