一、业务介绍
为航运业提供全生命周期可视化方案,整合多维度数据,服务航运公司、港口、海事机构,核心解决四大场景需求:
轮船实时监控(位置、油耗、设备状态);
港口调度(泊位分配、作业监控);
海事监管(违规预警、应急辅助);
运营分析(数据报表支撑决策)。
业务价值聚焦提效、降本、保安全、助智能决策。
二、功能介绍
基于大数据、GIS 等技术,核心功能分三大模块:
数据采集整合:接入多源数据,清洗预处理后分布式存储,保障数据质量与实时性;
核心可视化:电子海图定位(含历史轨迹)、设备状态监控(预警联动)、港口作业可视化、气象安全预警、运营数据多维度分析;
系统管理交互:角色权限管控、大屏布局自定义、数据导出与第三方系统对接。
一、核心技术选型
框架与库:用 React+TypeScript 构建基础架构,保障代码可维护性;借助 ECharts 实现运营数据图表(柱状图、折线图等),用 Cesium/GIS API 渲染电子海图与轮船定位。
数据交互:通过 WebSocket 实时接收轮船位置、设备状态等数据,Axios 请求历史数据与统计报表,确保数据实时性与稳定性。
二、关键功能实现
电子海图与定位:集成 GIS API 加载高精度海图,用动态图标标记轮船,绑定点击事件展示详情;通过定时器更新轮船坐标,实现轨迹实时刷新与历史回放。
设备监控与预警:用颜色区分设备状态(绿 / 黄 / 红),监听数据变化,超出阈值时触发弹窗 + 声光预警,同步推送提示至前端通知栏。
交互与布局:采用响应式布局适配不同大屏尺寸,提供拖拽组件自定义布局;基于角色控制按钮、数据查看权限,保障数据安全。