前端 React · TypeScript · Ant Design · ECharts · Google Maps JavaScript API
后端 Java · MySQL
前端采用 Ant Design 搭建企业级布局(侧栏导航、表格、表单、筛选器);业务指标与趋势分析使用 ECharts;设备 / 网络地理分布与「地图模式」使用 Google Maps 承载;全链路 TypeScript 强类型以降低协作成本。后端 Java 提供鉴权、设备与网络元数据、日志与告警等 REST/JSON 接口,MySQL 持久化设备状态、拓扑关系与审计记录,支撑高并发查询与分页统计。
(1)统一身份与登录门户:支持企业邮箱密码登录,并可对接 Google、Facebook 等社交账号,满足全球化团队与不同租户域的接入习惯。(2)远程控制(Remote Control):以网络/设备实例为核心维度,提供可检索、可筛选的数据表格(网络名称、标签、连接状态、成员在线概况、国家/地区、MAC、固件版本、最后在线时间等),支持批量选择与大规模列表下的横向信息浏览;集成「地图视图」入口,结合 Google Maps 将网络或设备地理分布可视化,辅助区域化排障与容量规划。(3)管理(Admin):面向管理员提供「绑定网络」等关键操作入口,支持按管理员维度过滤网络列表,维护只读用户、主管理员与固件信息,实现多租户下的权限分层与网络纳管。(4)日志与审计(Logs):记录登录成功、配置变更、告警触发等事件,支持按详情关键词、日志类型、严重级别筛选,满足安全审计与故障追溯。(5)统计分析与告警:在表格与 ECharts 图表中呈现在线率、离线分布、版本收敛度等指标(具体图表页可按项目实际补充);与告警引擎联动,对大规模断连、版本异常等场景进行分级通知,支撑「数万台设备」级监控 SLA。