说明

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

整个网站具备的功能有:

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

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

项目截图

首页

排班表

行李查询单、破损行李记录单等

《设备巡视检查单》列表

《每日设备巡视检查单》

《每周设备巡视检查单》

申请书列表

审批申请书列表

批复流程中申请单页面(不同权限用户所见内容不同)

设备管理页面(设备详情)

部门管理页面(浏览权限设置)

个人管理页面(审批权限设置)

项目要点记录

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

  • 六种《设备巡视检查单》的表格的行和列,都是根据用户后台配置的设备数据自动生成的,有些检查单还需要二级列头,当时花了很多时间去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行李运维平台开发记录的更多相关文章

  1. OMS自动化运维平台部署

    OMS自动化运维平台部署 一.基础环境安装 yum -y install mariadb mariadb-devel mariadb-server wget epel-release python-d ...

  2. (1)Linux常用的运维平台和工具

    运维工程师使用的运维平台和工具包括: Web服务器:apache.tomcat.nginx.lighttpd 监控:nagios.ganglia.cacti.zabbix 自动部署:ansible.s ...

  3. 实战:阿里巴巴 DevOps 转型后的运维平台建设

    导读:阿里巴巴DevOps转型之后,运维平台是如何建设的?阿里巴巴高级技术专家陈喻结合运维自身的理解,业务场景的分析和业界方法论的一些思考,得出来一些最佳实践分享给大家.   前言   “我是这个应用 ...

  4. 用友iuap云运维平台支持基于K8s的微服务架构

    什么是微服务架构? 微服务(MicroServices)架构是当前互联网业界的一个技术热点,业内各公司也都纷纷开展微服务化体系建设.微服务架构的本质,是用一些功能比较明确.业务比较精练的服务去解决更大 ...

  5. 阿里巴巴 DevOps 转型后的运维平台建设

    原文:http://www.sohu.com/a/156724220_262549 本文转载自公众号「DevOps 时代」,高效运维社区致力于陪伴您的职业生涯,与您一起愉快的成长. 作者简介: 陈喻( ...

  6. devops 运维平台相关知识

    1.https://choerodon.io/zh/community/ (代码 https://github.com/choerodon/choerodon) 猪齿鱼 2.https://www.o ...

  7. 【I·M·U_Ops】------Ⅰ------ IMU自动化运维平台设想

    说明本脚本仅作为学习使用,请勿用于任何商业用途.本文为原创,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. #A 搞这个平台的初心 由于之前呆的单位所有IT相关硬件资源都要我们 ...

  8. (4)Linux常用的运维平台和工具

    运维工程师使用的运维平台和工具包括: Web服务器:apache.tomcat.nginx.lighttpd 监控:nagios.ganglia.cacti.zabbix 自动部署:ansible.s ...

  9. 分享4个运维平台工具OSSIM、Ansible的学习思路

    对于当今企业安全来说,真正价值不在于亡羊补牢,也不在于一个或多个高危漏洞.企业在乎的是如何防患于未然,如何快速定位攻击,如何快速解决安全问题.OSSIM作为开源的安全信息管理平台,对于企业的需求来说毋 ...

随机推荐

  1. 转。http,状态码详解

    转自konglingbinHTTP状态码详解:https://www.cnblogs.com/klb561/p/9205867.html HTTP状态码(HTTP Status Code)是用以表示网 ...

  2. ASP.NET Core +Highchart+ajax绘制动态柱状图

    一.项目介绍利用前端Highchart,以及ajax向后台获取数据,绘制动态柱状图.hightchart其他实例可查看官网文档.[Highchart](https://www.highcharts.c ...

  3. C#异步案例一则

    场景 生产者和消费者队列, 生产者有多个, 消费者也有多个, 生产到消费需要异步. 下面用一个Asp.NetCore Web-API项目来模拟 创建两个API, 一个Get(), 一个Set(), G ...

  4. js消除小游戏(极简版)

    js小游戏极简版 (1) 基础布局 <div class = "box"> <p></p> <div class="div&qu ...

  5. PAT乙级练习(1001)

    1001 害死人不偿命的(3n+1)猜想 卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把 (3n + 1) 砍掉一半.这样一直反复砍下去,最 ...

  6. OC循环方法推荐-块循环遍历(比for循环好用)

    最近在看一本书<Effective OC 2.0>,今天看到有个tip是OC适中循环各自优劣性,作者最终推荐此块循环. 阅读时思考了下块循环是否方便实现内部循环终止外部循环的问题. 于是做 ...

  7. 小白学 Python 爬虫(14):urllib 基础使用(四)

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

  8. markdown使用方法介绍

    markdown使用方法介绍 最近在更新微信公众号的时候发现有很多格式无法编辑尤其是涉及到代码的,每次都要截图贴上去,费时费力.穷则生变,研究了markdown格式,果然豁然开朗,一片新的天地瞬间打开 ...

  9. 洛谷 题解 P4613 【[COCI2017-2018#5] Olivander】

    我又双叒叕被包菜辣! P4613 [COCI2017-2018#5] Olivander 首先,不知道为什么这题无法提交翻译: 所以,我先放个翻译: 哈利波特在与伏地魔的战斗中损坏了他的魔杖.他决定在 ...

  10. go基础之服务退出问题

    最近学习公司微服务的代码,看到每一个微服务的main函数都阻塞在那里,然后里面起的goroutine一直在哪里运行. package main import( "fmt" &quo ...