应急管理移动端 H5 方案：从"看得见"到"用得上"

一句话直答

这是一套面向省级应急管理单位的移动端 H5 方案，解决的问题是：已有的 Web 大屏"看得见"，但一线人员在现场"用不上"。方案的核心不是把大屏缩小到手机，而是按应急响应的真实动线，重做一遍信息架构。

阅读提示：本项目当前处于方案与原型设计阶段，未进入开发交付。以下呈现的是需求判断与设计思路，不含上线运行数据。

项目背景与挑战

客户是山东省某应急管理单位，已经建成一套 Web 大屏系统——以地图为底，浮窗叠加各类态势数据：安全生产风险监测、自然灾害风险监测、安全生产形势、综合态势等等。

这套大屏挂在指挥中心，是好看的，也确实高大上。

但它有个绕不开的错配：

大屏的使用姿势，是站在屏幕前从容研究。 而应急管理的真实场景，是随时随地收到预警、立刻赶到现场、一边指挥处置一边更新回传。

这两件事对界面的要求几乎相反。大屏追求"一屏铺满、全域可见"；现场需要的是"三秒定位、单手可操作、拨得通电话"。领导提出要移动端适配，本质上不是要一个小屏版大屏，而是要一套能在路上和现场用起来的作战工具。

难点也在这里：这不是响应式适配问题，是信息架构重设计问题。 而且客户在移动端的构思里还追加了不少大屏没有的内容——应急救援专题在原大屏中完全不存在，需要从零设计。

解决方案

我们把设计起点从"页面"换成"角色动线"，先把两类使用者的行为差异摊开：

角色	典型场景	使用频率	界面要求
**领导决策者**（省/市/区级局领导）	会议前快速过一遍全域态势、出差途中了解预警动态、汇报前查关键指标	每日 1-3 次，每次 1-3 分钟	入口浅、指标直给、异常突出
**一线应急人员**（区县应急科室、值班人员）	现场查企业与灾害点位、核实资源储备、接收处理预警、按区域行业下钻	每日多次，每次 3-10 分钟	可筛选、可下钻、能联络

同一套数据，两条完全不同的路径。据此拆出四个专题 + 一条处置闭环：

综合态势（首页）— 核心指标卡片横滑 + 全域 GIS 地图，叠加风险、资源、事件三类图层。领导 1 分钟看完全局，发现异常直接点卡片进专题。

安全生产 — 覆盖非煤矿山、铝加工、涉爆粉尘、危化、钢铁五类行业，安全生产形势指数(A)与风险监测指数(C)可视化，支持行业切换与区域筛选。

自然灾害 — 六灾种全覆盖（气象、地质、洪涝、森林火险、海洋灾害、地震），这是山东"有山有水有海"的地理特征决定的，灾害影响指数(B)与风险监测指数(D)并行呈现。

应急救援 — 大屏中不存在的全新模块。物资、队伍、避难所、设备四类资源分 Tab 管理，地图定位附近资源点，点开即见储备详情与联系人，支持一键拨号——这是移动端独有、大屏永远给不了的能力。

预警处置闭环 — 系统推送通知 → 点开进入预警列表（未读红点）→ 预警详情与处置建议 → 标记已阅 → 需要时跳转关联专题。这条链路是"应急"二字真正落地的地方。

几个关键设计取舍

图表下钻替代一屏铺满。 大屏可以把省、市、区县数据同时摊开，手机不行。改为点击区域柱状图逐级下钻（省→市→区县），图表与地图双向联动高亮。信息不是变少了，是变成了有的放矢。

双主题不是装饰。 应急值守大量发生在夜间和车内，暗色主题是使用场景的刚需，不是审美偏好。

平板适配单独设计。 指挥车与临时指挥点常用平板，卡片从单列变双列、地图区域放大、图表并排展示——不是简单拉伸。

实现与技术

• 前端：Vue3 + Vite，移动端 H5（手机竖屏 375×812 为设计基准 + 平板响应式）
• 地图：天地图 API（政务项目的标准选择）
• 信创适配：麒麟 V10 国产化环境
• 登录：政务平台 SSO 单点登录，权限在政务平台侧配置，不另建账号体系
• 权限模型：领导决策者可见全省数据，一线应急人员按辖区过滤

方案价值与阶段说明

必须说明：这个项目停留在方案与原型阶段，没有进入开发交付，因此没有上线数据可以呈现。

对接人找到我们时说"当天就要，领导着急看东西做决策"。我们当天出了原型和报价。后续领导手上有了别的事，节奏掉下来，最终由单位内部技术团队接手。这在政务项目里是常见节奏——要的时候是真急，节奏一掉基本就停。

我们仍然认为这套方案的判断是成立的：

• 移动端承接了原大屏的信息架构重设计，而不是简单缩放，这是这类项目最容易做错的地方
• 按角色分动线，让领导的 1 分钟和一线的 10 分钟各得其所
• 补齐了大屏缺失的应急救援模块，把"资源在哪、谁负责、怎么联系"变成可操作的闭环
• 一键拨号、随身携带、现场回传——这些是移动端独有的能力，也正是"应急救援管理"这几个字真正需要的

对我们而言，这个项目验证的是需求响应速度（当日出原型与报价）和跨端信息架构重构能力。

常见问题

Q：已经有 Web 大屏了，为什么还需要移动端？ 大屏的使用姿势是"站在屏幕前研究"，应急响应的真实场景是随时随地接警、赶赴现场、边处置边回传。两者对信息密度、操作方式、响应速度的要求完全不同，不是一套界面能同时满足的。

Q：移动端是把大屏内容缩小吗？ 不是。大屏一屏铺满全部信息，手机做不到也不该这么做。我们按角色重做信息架构：领导要"1-3 分钟看完全局"，一线要"3-10 分钟下钻到点位"，两条动线分别设计入口深度与信息层级。

Q：政务项目的信创适配怎么处理？ Vue3 + Vite + 天地图 API，适配麒麟 V10 国产化环境，登录走政务平台 SSO，权限在政务平台侧配置。

Q：这个案例处于什么阶段？ 方案与原型设计阶段，未进入开发交付。本文呈现的是需求响应速度与信息架构设计能力，不是运行数据。

Q：类似的应急管理移动端项目，一般多久能出方案？ 本项目从接到需求到产出完整原型与报价是当日完成。具体周期取决于已有系统的复杂度和数据接口情况。

关键术语

• 信息架构重设计：不改变数据本身，重新组织信息的层级、入口和呈现顺序，使之匹配新的使用场景
• 安全生产形势指数(A) / 自然灾害影响指数(B)：面向决策层的宏观态势指标
• 风险监测指数(C/D)：面向一线的细粒度监测指标，C 对应安全生产、D 对应自然灾害
• 图表下钻：点击图表中的某一数据项，展开其下级维度数据（省→市→区县），移动端替代"一屏铺满"的核心手段
• 信创适配：适配国产化软硬件环境，本项目指麒麟 V10 操作系统
• SSO 单点登录：政务平台统一身份认证，用户不需要为单个系统单独注册