数据大屏

企业服务数据服务案例ID：236246

郝先生

7 年经验· 北京易油互联科技有限公司

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

该项目是油库数字化监管大屏，是我作为 Web 前端开发人员主导实现的油库仓储场景智能监控可视化系统，核心技术栈为 Vue.js + ECharts + Three.js，专为油库仓储场景打造。
核心功能（前端实现）
实时数据可视化：用 Three.js 构建 3D 动态罐体模型，实时渲染液位、温度、密度等核心数据；通过 ECharts 实现液位温度趋势曲线、出入库流量图等图表，支持按时间维度筛选与数据钻取。
多模块数据交互：开发指令记录、出入库记录、打尺记录等表格组件，实现了历史数据的分页查询、时间范围筛选和导出功能，满足业务追溯需求。
人员与作业监控：集成高德地图 API 实现人员实时定位，通过 Video.js 完成作业视频流的无缝接入与在线播放，支持画面缩放、暂停等操作。
告警与状态反馈：开发告警记录模块，实现异常指标的颜色预警、弹窗提示，并支持告警事件的一键溯源与详情查看，提升应急响应效率。
我在项目中负责的前端工作
作为Web 前端开发负责人，我全程参与了项目的前端技术选型、架构设计与功能落地：
基于 Vue3 + TypeScript 搭建项目工程化架构，封装了可复用的 3D 罐体组件、图表组件、数据表格组件，提升了开发效率和代码可维护性。
负责实时数据驱动的可视化渲染优化，通过 WebSocket 实现后端数据的实时推送，结合虚拟列表、按需渲染等技术，保障了大屏在高并发数据下的流畅性。
主导了地图定位、视频流接入等第三方 API 的前端适配与兼容性处理，解决了跨域、性能瓶颈等关键问题。
配合 UI/UX 团队完成了深色主题下的视觉优化，通过分层动效、渐变光影等设计，提升了大屏的科技感与交互体验。