1、立项原因：江西省高等级航道航标数量多、分布广，流量、水位、航标设标与告警、器材库存、维护作业等数据分散在各业务模块中。管理人员要掌握全省航道运行态势，需要逐个系统查询、人工汇总，信息滞后，难以及时发现水位异常、航标告警等风险。驾驶舱旨在把核心运行指标汇聚到一屏，解决"数据分散、态势不直观、异常发现慢"的问题。 2、行业场景、业务背景：面向省航道事务中心领导及各分中心管理人员，用于日常值守监控、调度会商和领导汇报展示。以大屏形式实时呈现全省航道流量水位、航标运行、告警处置、器材保障和维护工作情况，并支持按机构查看各分中心数据，辅助快速研判与决策。
1、功能模块：驾驶舱由顶部指标栏、左侧航标与船舶面板、中部江西省态势地图、底部周预报尺度、右侧水位与保障面板五部分组成。 2、主要功能描述： （1）顶部指标栏：实时展示全省总流量及各主要站点的流量、水位和涨落幅度，用箭头标出升降趋势；支持按机构树筛选，全屏数据随所选机构联动刷新。 （2）左侧面板：航标设标统计（航标总数、当前设标数、应装与实装终端数、遥测遥控覆盖率），用环形图展示；航标告警等级分布图表；船舶动态列表，展示船舶出航或停泊状态及所属单位。 （3）中部地图：基于江西省底图叠加航标实时位置和水位站点，区分正常与告警样式，图例可控制图层显隐；左侧展示今日与昨日的报警数量、报警率、确认率、平均恢复时长；配有实时时钟、指北针与雷达扫描动效。 （4）底部：周预报尺度图表，展示各航段未来一周的预报水深。 （5）右侧面板：水位预警数量统计，可选择水位站查看七日水位趋势曲线；器材在用与备用比例；维护工作情况统计。 （6）各面板数据定时自动刷新，保证大屏态势实时更新。
1、"我"负责的具体任务：负责驾驶舱页面的整体前端开发，包括大屏布局与视觉还原、顶部指标栏与机构筛选联动、左右各统计面板的 ECharts 图表开发、中部 OpenLayers 态势地图与航标、水位图层的封装，以及与后端流量、水位、航标设标、器材统计、七日水位等接口的联调。 2、技术栈与架构：Vue3 + TypeScript + Vite + Element Plus，图表使用 ECharts，地图使用 OpenLayers。页面按"顶栏 / 左 / 中 / 右"拆分为独立组件，由父组件统一下发所选机构 ID，实现全屏联动。地图图层按"数据源 + 图层 composable（useCockpitXxxLayer）"封装，各自负责数据加载、定时刷新、样式切换和显隐控制，便于后续扩展新图层。 3、亮点与难点： （1）地图不依赖在线瓦片：用江西省轮廓外接矩形配合静态图片图层作为底座，适合内网大屏部署，加载快且风格统一。 （2）大屏自适应：通过 ResizeObserver 监听容器变化，同步调整地图和各 ECharts 图表的尺寸，避免拉伸与错位。 （3）多面板定时轮询：统一刷新间隔，组件卸载时清理定时器、图表实例和监听，避免内存泄漏和重复请求。 （4）数据兜底：接口缺失或数据为空时统一显示占位符，涨落幅度自动换算成趋势箭头，保证大屏展示稳定。
评论