北京国际机场T3行李运维平台开发记录

说明

该项目是一个后台管理型网站项目,供北京国际机场T3航站楼行李调度运维部门使用,开发时间一个半月,我负责所有的前端开发、后端开发、API接口文档设计与编写、服务部署和交付。

整个网站具备的功能有:

  • 员工管理
  • 员工审批权限管理
  • 部门管理
  • 部门浏览权限管理
  • 五种《申请单》在线申请
  • 《申请单》多流程及复杂流程审批
  • 设备管理,可详细配置检查时间、频率
  • 根据后端发来的设备数据,自动生成六种《设备巡视检查单》,员工可根据巡视结果修改数据
  • 交接班记录、行李查询记录、异常行李记录等记录表格
  • 排班表,可详细配置每天的值班班组
  • 平台公告与文件分享
  • 值班员工列表与设备状态可视化

项目技术栈使用nodejs + webpack + react + ice + koa2。

项目截图

北京国际机场T3行李运维平台开发记录_第1张图片
首页
北京国际机场T3行李运维平台开发记录_第2张图片
排班表
北京国际机场T3行李运维平台开发记录_第3张图片
行李查询单、破损行李记录单等
北京国际机场T3行李运维平台开发记录_第4张图片
《设备巡视检查单》列表
北京国际机场T3行李运维平台开发记录_第5张图片
《每日设备巡视检查单》
北京国际机场T3行李运维平台开发记录_第6张图片
《每周设备巡视检查单》
北京国际机场T3行李运维平台开发记录_第7张图片
申请书列表
北京国际机场T3行李运维平台开发记录_第8张图片
审批申请书列表
北京国际机场T3行李运维平台开发记录_第9张图片
批复流程中申请单页面(不同权限用户所见内容不同)
北京国际机场T3行李运维平台开发记录_第10张图片
设备管理页面(设备详情)
北京国际机场T3行李运维平台开发记录_第11张图片
部门管理页面(浏览权限设置)
北京国际机场T3行李运维平台开发记录_第12张图片
个人管理页面(审批权限设置)

项目要点记录

这个项目做的时候,能够记忆尤新的难点有

  • 六种《设备巡视检查单》的表格的行和列,都是根据用户后台配置的设备数据自动生成的,有些检查单还需要二级列头,当时花了很多时间去Debug。Bug排除完成后,《设备巡视检查单》可以跟随设备数据的改变而改变,这个功能客户还是很满意的。
  • 五种《申请单》的审批流程都不同,有些申请单比如《变更申请单》还需要二次回顾申请。最初做的“申请单页面详情React组件”是通用的,后期发现有很多场景需要特殊处理,情况复杂,就向通用模块里加了很多特殊情况判断与处理代码。组件完成后,无论是用户见到的“申请单详情页面”,还是审批员见到的“申请单详情页面”,用的都是同一个React组件,只不过传入的json配置数据不同,这一点我作为开发者是很满意的,因为这让我后期维护非常方便。

自我感觉做的比较好的地方有:

  • 将六种《设备巡视检查单》的表单结构json化,传入json数据不同,页面显示内容不同,React组件不需要改变
  • 将《五种申请单》的表单结构和审批流程json化,传入json数据不同,页面显示内容不同,不需要更改React组件代码
  • 将《交接班记录》、《行李查询记录》、《异常行李记录》、《破损记录》四种记录表的结构json化,四种记录表共用一套React组件
  • 后端的申请单的审批流程设计还是比较靠谱的,能够适应特殊情况,没有出现很多Bug

可以改进之处有:

  • 很多页面的结构是相同的,可以使用同一套布局,但是我一开始就太懒,不愿意动脑子,选择了直接将layout组件复制给每一个页面。后期客户要求更换页面UI的时候,发现最初设计的DOM结构需要改变,就每个页面都改了一遍,事倍功半。所以,项目刚开始的时候该提取layout的就提取layout,该做通用组件就做通用组件,开发时偷的懒,到项目后期全都要还回来!
  • 整套网站加载js和css是一次性的,而js文件和css文件很大,能达到5MB的大小,这样的网站架构适合内网小网站,对于互联网网站和大型网站来说,显然是不适用的!

你可能感兴趣的:(北京国际机场T3行李运维平台开发记录)