海洋监测系统大屏产品系统Vibe Coding

本项目立项源于传统近海渔业资源衰退与粗放型养殖带来的生态压力，旨在解决海洋牧场“状态难感知、修复效果难量化、休闲活动与生态保护易冲突”的核心管理痛点。业务背景依托国家“蓝色粮仓”与“双碳”战略，在蝶支洲岛及西沙七连屿等典型热带珊瑚礁海域，构建以珊瑚礁修复为核心、资源养护增殖与休闲旅游有机融合的现代化海洋牧场示范区，推动渔业从“捕捞型”向“养护型”转型，并为政府监管、企业运营和科研监测提供统一的数字底座。

项目平台包含五大功能模块：实时监测大屏（集成多源传感器数据，展示水温、盐度、溶解氧、叶绿素浓度及气象参数）、预警管理模块（对风向突变、水温异常等阈值事件自动触发告警并记录发现时间）、数据接收与推送服务（支持无人机光学影像、雷达海上目标、卫星遥感海温/波浪及海基观测营养盐等多类数据的定时接入与主动推送）、历史与预报数据分析（以折线图展示水温、风速、叶绿素等要素在7天内的变化趋势，并叠加预报曲线）、牧场影像监测（结合水下摄像头与无人机航拍，远程查看珊瑚礁修复区和鱼礁资源养护区的实况视频）。主要功能围绕“数据汇聚—态势感知—预警推送—辅助决策”闭环，实现牧场生产、生态与安全的一体化监管。

在本项目中，“我”负责前端整体架构设计与所有可视化页面的开发落地。具体任务包括：基于 React + TypeScript 搭建工程化项目骨架，封装通用数据卡片、趋势折线图、预警列表、实时影像播放器等组件；集成高德地图 JS API，在地图上标注蝶支洲岛、西沙七连屿、广州万山、广西冠头岭等牧场关键点位，并通过自定义弹窗展示各站点的实时水温、盐度、溶解氧等快照数据；同时负责大屏自适应布局与视觉动效优化，确保在 4K 拼接屏上稳定运行。