ZZ-Admin：气象监控运维平台前端工程复盘

项目状态：已归档。 ZZ-Admin 原业务服务和内网接口已经停止，本文不提供在线演示。文章只记录当前仓库中能够验证的前端功能与工程实现。

项目概览

ZZ-Admin 是一套面向气象业务的监控运维与值班管理前端。平台将基础设施监控、气象资料到报状态、异常告警、外部业务系统入口和日常值班流程集中在同一个后台中，帮助值班人员快速了解系统状态并完成工作记录。

项目基于 Vue 2 构建，包含可视化大屏和传统管理后台两种界面形态。当前保留的仓库只有前端代码，完整运行依赖气象业务后端、监控接口和内网系统。

查看 ZZ-Admin 前端源码

气象监控大屏

监控大屏承担平台的实时状态入口，将不同来源的运维数据组织在一张全屏页面中：

• 网络拓扑与各节点连接状态
• 链路流量变化趋势
• 主机总数、在线与离线数量
• 机房和 UPS 温湿度
• 国家站、区域站、雷达站等资料到报状态
• 外部监控系统快捷入口

气象监控大屏及数据异常告警弹窗。截图来自项目历史版本。

大屏使用 ECharts 绘制趋势图，通过 vis 展示网络节点关系，并结合定时请求更新各类监控指标。页面支持浏览器全屏，让大屏能够作为值班室的持续监控界面使用。

异常告警设计

当资料状态异常时，页面会展示告警弹窗并尝试播放提示音。值班人员可以确认告警，也可以选择延后再次提醒。

这一交互不仅需要处理接口状态，还需要考虑浏览器对自动播放音频的限制、弹窗重复出现、提醒时间保存和全屏状态下的交互反馈。页面因此将告警内容、音频播放和延后时间选择组合为一个完整流程。

值班管理流程

值班模块围绕日常交接和记录展开，包含：

1. 值班日志查询和筛选。
2. 签到、签出及值班班次记录。
3. 当前问题与遗留问题登记。
4. 值班日历和人员排班查看。
5. 值班数据汇总与导出。
6. 补签、轮班和值班表配置。

值班日志列表、筛选条件、签到签出状态和问题记录。

页面主要使用 Element UI 的表格、表单、日期选择器、分页和消息提示组件。筛选条件与分页参数组合后请求后端，操作完成后重新加载当前列表，形成常见但完整的后台管理闭环。

动态菜单与外部系统导航

气象运维工作通常需要进入多个独立系统。ZZ-Admin 从后端读取菜单配置，将这些系统组织到统一侧边栏中，并支持通过新窗口或 iframe 打开目标页面。

菜单管理页面提供查询、新增、编辑、删除和置顶操作，使业务入口可以在不重新发布前端的情况下调整。

动态菜单列表及新增、置顶、删除和编辑操作。截图中的地址为历史环境数据。

外部页面嵌入仍会受到目标站点 CSP、X-Frame-Options 和跨域策略影响，因此部署时需要同时确认目标系统是否允许被嵌入。

角色权限配置

平台按角色配置功能权限，覆盖查看全部日志、仅查看本人数据、导出、新建值班表、编辑、删除和菜单管理等操作。

按角色配置值班、排班和菜单操作权限。

前端根据权限数据决定操作入口是否显示，减少无关功能对普通用户的干扰。真正的数据访问控制仍需要后端校验，不能只依赖前端隐藏按钮。

前端技术架构

• Vue 2.6、Vue Router 3、Vuex 3
• Element UI 2.15、Sass
• ECharts 5、vis
• Axios
• mschedule
• screenfull
• Vue CLI 5、Babel、ESLint

项目使用 hash 路由和相对资源路径，可以部署在站点根目录或子目录。页面按路由进行异步加载，将监控大屏、菜单管理和值班模块拆分为不同代码块。

接口请求集中在 src/api 和 src/utils，主要覆盖用户、菜单、值班、权限、网络流量与资料到报数据。Vuex 保存用户及权限状态，公共组件负责菜单、日期和空状态等重复界面。

项目边界

当前源码仓库不包含：

• 气象业务后端和数据库
• 内网监控服务
• 外部业务系统
• 完整的登录认证流程
• 自动化测试环境

部分大屏数据提供本地备用或演示值，用户信息和部分签到参数也保留了历史联调配置。离开原有网络环境后，页面可以用于查看界面结构，但无法恢复完整业务数据。

如果今天重新实现

如果重新建设这套平台，我会重点改进以下部分：

• 使用 Vue 3、TypeScript 和组合式 API 重构页面状态与业务逻辑。
• 为接口响应、表格数据和权限项建立明确类型。
• 将大屏图表、轮询和告警状态拆成可复用组件与 composable。
• 增加请求取消、失败重试、加载骨架和统一错误反馈。
• 将内网地址、接口前缀和外部系统入口配置化。
• 增加全局路由守卫，并让前后端共同完成权限校验。
• 对值班流程、菜单配置和权限组合补充单元测试与端到端测试。
• 按需引入 Element UI，并进一步拆分较大的图片、GIF 和入口代码。

归档旧项目的意义不仅是保存页面，也是在真实业务上下文中复盘数据可视化、后台交互和工程边界。

总结

ZZ-Admin 同时覆盖了气象监控大屏和运维管理后台两类前端场景。它将网络拓扑、数据图表、异常告警、动态菜单、值班流程和角色权限整合在同一套应用中，是一个较完整的 Vue 2 后台工程案例。

虽然原业务服务已经停止，保留前端源码、历史截图和技术复盘，仍能准确呈现项目的功能范围以及复杂业务后台的实现经验。

仓库当前未声明开源许可证，因此这里使用“源码公开”而非“开源项目”。具体使用和分发权限以仓库后续许可证为准。