猿急送>

杭州前端兼职程序员

ID：391004

henry

中级前端程序员

公司信息：
杭州雅格纳科技有限公司

工作经验：
4年

兼职日薪：
600元/8小时

兼职时间：
可工作日远程

所在区域：
杭州
余杭

技术能力

1. 承担团队技术选型工作，注重前端标准化，在部门内部推行Eslint Commitlint 以及落地规范
2. 有独立前端开发项目经验，喜欢把事情做到极致，兼任过前端负责人，完成多个本地项目快速从0到1并满足交付。
3. 深入理解React,Vue,并研究过其源码实现。
4. 有小程序（uni-app）开发经验（船务纵横），有发布线上经验。
5. 擅长在当前业务环境和技术环境下，发现痛点，并且沉淀出完整的技术产品解决方案。
6. 熟练使用内部海图组件库实现定位、比例尺，放大、缩小、测量、标注、绘制多边形、圆等功能。
7. 熟练使用Echarts实现数据可视化，如航行里程对比（横向柱状图）、健康度决策权重（雷达图）、设备耗油分布的嵌套
饼图等。
8. 热爱技术并为公司搭建拓展组件库及常用的公共函数，或者按照UI惯用的设计风格封装可复用的组件。
9. 喜欢分享，推动团队在前端内部群中进行技术分享。工作认真负责注重效率和结果，及时排查并处理现场问题。

项目经验

项目内容：该管理后台系统是基于Ant Design Pro 结合umi开发的React项目，它是一个融合了RBAC(权限管理)、船务系
统、监测系统、视频监控系统、供应商系统的比较大的saas平台,多人参与该平台的开发工作，负责的模块有消息管理、审批
管理、质量反馈、费用管理、系统配置、综合大屏、综合动态、航行动态、航行避碰、正午报、数据记录(根据客户定制化需
求含5个不同的版本)等20+。该平台涵盖的业务基本都比较复杂，攻克的技术难点也比较多。目前主要服务于浙海航运集团
等船舶单位使用。
项目职责：
· 团队协作（React组件设计、跨平台开发）
· 负责框架的技术选型，注重前端标准化开发，优化了前端的启动、打包速度，系统业务的不断增加，静态资源的增多及其
加载方式使项目启动或打包效率明显下降，观察启动静态资源的加载后，将静态资源图require引入方式全部改为import
引入方式，启动或打包速度由10s缩减到1s以内左右。
· 参与项目业务迭代评审会议，每周开周例会，制定工作明细表记录任务名称、负责人、完成情况等内容，可以帮助团队更
好的管理和跟踪任务进展，提高工作效率。
· 负责消息管理模块(消息配置、消息通知)的开发，消息通知需根据燃润料、厂修、航修等10+的申请类型根据业务Id结合
查询该审批单是否审批，如若已经审批完成，跳至该单据的审批详情，否则跳转至其审批，跳转逻辑经过封装通过枚举和
关联的业务id匹配，符合则跳转至对对应的审批或审批详情页面，封装的逻辑函数可服用在全局的小铃铛处跳转至对应的
审批页面。
· 负责体系文件管理模块(体系文件、体系记录、体系档案、体系文件审批、体系审批历史)的开发，研读畅写的开发文档，
封装PDF、Word、EXCEL、PPT文档预览组件，指定文档的唯一key、类型、标题、路径、token、打开模式、回调保存
文档（需要和后端交互）等，研究处理编辑后没有及时保存成功的问题，需要强制保存文档，触发保存回调。新建文档支
持本地新建和在线新建。
· 负责的综合大屏使用CSS弹性布局结合百分比进行布局，满足不同1300*800以上的所有屏幕显示效果都一致，且不会因
为高度变小出现滚动现象。
· 负责的航行避碰涵盖了船舶动态、综合动态等航次相关的所有功能点
1.利用内部海图组件库用Marker 或Markers在海图上呈现实现本船及周边ais船舶，默认选中本船，点击某条ais船舶，
给点击的船舶添加选中的标识。
2. 海图上默认图层层级11级以下显示小绿点，11级以上则根据不同类型的ais船舶显示对应的船舶图标，研究处理缩放
海图船舶重影的问题，监听缩放的层级，移除重影Marker标记，此处不可用clearMap()直接清除，否则海图上绘制的圆、多
边形等覆盖物都会被清除。
3. 通过Websocket实时数据推送技术，在前端展示采集器采集的通导数据，如气象仪(风速、温度、湿度、能见度)、光
纤罗经、四角吃水(船艏、船尾、左舷、右舷吃水)、Gps或北斗、倾斜仪(横倾、纵倾)、舵角等，需要结合Echarts或者结合
UI涉及自定义封装的公共组件实现。
4. 避碰监测和后端交互通过WebSocket推送的经纬度、半径、覆盖物类型在海图上绘制，中心点处使用CSS实现闪烁效
果，将碰撞物、碰撞船舶、即将碰撞的点用线在海图上绘制出来。通过查询是否存在移位报警及小飞机模拟的UDP数据，绘
制移位报警轨迹。通过判断是否满足配置的区域超速条件，在海图上绘制显示超速区域。
5. 报警设备窗体实现可拖拽，使用蜂鸣器实现报警，和后台交互实现一键消音的功能。
· 负责视频监控的开发，使用jessibuca,默认引用的是根目录下面的decoder.js文件，decoder.js 与 decoder.wasm文件
必须是放在同一个目录下面。实现监控视频的播放。

船务大屏

项目内容：该系统是基于 Vuex状态管理机制开发的Vue项目供海事局等政府单位更直观的看到Echarts实现的可视化数据。
将船务系统中较为重要的数据信息：燃油统计、航行统计、船务统计、船舶信息、船舶动态、船舶信息用Echarts展示在大屏
中，组织机构、船舶绘制在百度地图上。
项目职责:
· 根据后端接口数据结构的变化，梳理Vuex状态管理机制处理的数据结合新的数据重新解构处理独立完成实现基于高德地
图的业务需求迭代。
· 使用CSS实现跑马等效果。
· 基于Element UI 下拉组件将组织机构和船舶下拉数据联动，扁平化组织机构,并且记录对应关系，找出组织机构和其下船
舶的对应关系并绘制线将他们串联起来。
· 使用Echarts实现可视化数据，

案例展示

商船平台

项目内容：该管理后台系统是基于Ant Design Pro 结合umi开发的React项目，它是一个融合了RBAC(权限管理)、船务系统、监测系统、视频监控系统、供应商系统的比较大的saas平台,多人参与该平台的开发工作，负责的模块有消息管理、审批管理、质量反馈、费用管理
船务纵横（小程序）

项目内容：船务纵横(小程序)包含船舶动态、单据审批、单据处理、我的四个模块，为海事局等船舶单位的客户审批、比价、查看船舶动态提供了方便。它使用uni-app结合Vue开发的项目。项目职责： · 参与小程序需求迭代评审，开发过程中遇到问题及时和产品、后端等小伙伴沟通。