石油储气业务智能化管理平台-储气业务智能管理平台

立项背景和目标
石油行业储气业务涉及生产、库存、运输等多环节，数据分散、业务流程依赖人工线下流转，效率低且易出错。本平台旨在整合全链路数据，实现业务流数字化、标准化，提升整体办公效率与决策能力。

软件功能、核心功能模块

PC管理后台：生产计划管理、库存监控、运输调度、审批流程管理、数据可视化大屏、系统配置等。

移动端应用：现场数据采集、任务接收与反馈、审批处理、关键指标看板。

三维可视化模块：基于WebGL实现储气设施三维模型展示，支持交互查看与数据叠加。

业务流程、功能路径描述

业务发起 → 多级审批流转（支持条件分支、会签、转办）→ 任务执行（生产/运输/库存操作）→ 数据同步更新 → 可视化大屏实时展示 → 移动端现场反馈与闭环。

整体架构和设计思路

采用微服务架构（Spring Cloud）实现业务模块解耦，MyBatis作为ORM层，前端PC端使用Vue2全家桶+Element UI，移动端采用uni-app实现跨平台开发。

数据可视化大屏使用ECharts，三维模型通过WebGL（Three.js）加载与交互。

前后端分离，通过Axios进行API调用，Vuex管理全局状态，Webpack打包优化。

“我”的负责模块和结果

负责PC端前端页面开发、维护与优化，包括审批流程模块、可视化大屏、三维模型展示页面；

负责移动端前端页面开发，包括任务中心、审批处理、数据看板；

实现结果：

审批流程支持20+种节点类型，平均流转效率提升40%；

可视化大屏适配5种常见屏幕尺寸（1920x1080、1366x768、1440x900、3840x1080、移动端PAD）；

三维模型加载时间优化至2.5s以内，交互帧率稳定在30fps以上；

移动端页面加载速度提升30%，支持离线数据缓存。

“我”遇到的难点、坑，和解决方案

难点一：审批流节点多、流转逻辑复杂

问题：涉及多级审批、条件分支、会签、转办等，前端需要动态渲染审批操作按钮和状态，且后端返回的数据结构复杂。

解决方案：采用责任链模式设计前端审批状态机，封装通用审批组件，通过配置化方式驱动UI渲染，减少硬编码；与后端约定统一的状态码和操作接口，确保逻辑一致性。

难点二：可视化大屏适配多种尺寸

问题：大屏需投放到不同分辨率的显示设备，传统px单位无法自适应。

解决方案：使用rem+flexible方案进行基础适配，结合vw/vh进行弹性布局；针对关键图表，使用ECharts的resize方法动态重绘，并监听窗口变化实时调整。

难点三：三维模型WebGL的使用

问题：储气设施模型体量大（顶点数超100万），加载慢且交互卡顿。

解决方案：对模型进行轻量化处理（减面、纹理压缩），使用Three.js的LOD（细节层次）技术按距离加载不同精度模型；采用Web Worker并行处理数据解析，减少主线程阻塞。