基本信息 Link to 基本信息
姓名 : 毛杭飞 性别 : 男
电话 : 15796899087 工作经验 : 四年
邮箱 : mhf.work@qq.com
工作技能 Link to 工作技能
- Web 开发: 对 W3C 标准有深入的理解，熟悉 HTML、CSS、JavaScript 等前端技术。能够熟练地运用响应式布局、弹性盒布局和百分比自适应布局，以确保网页在不同设备和屏幕尺寸上的良好表现。同时，熟悉 H5、CSS3、ES6 等新特性，并能在项目中灵活应用。
- 前端框架: 熟练运用 Vue2、Vue3 前端框架，对模块化开发、路由实现、数据交互、状态管理有一定的了解。
- UI 框架: 熟练使用 ElementUI、Element Plus、Uview 等主流 UI 框架，能够快速地构建出符合项目需求的用户界面；能利用 ECharts、UCharts 等工具实现数据可视化，提升数据的展示效果；能熟练应用 Animate.css 动画库，为网页增添流畅且吸引人的动画效果。
- 数据交互: 熟悉 Ajax、Axios 等数据请求技术，能够熟练地进行前后端数据交互。在性能优化方面，我掌握了一些基本的优化策略，如列表渲染优化、图片懒加载、组件懒加载等，以提高网页的加载速度和用户体验。
- CSS 预编译: 熟悉 Sass 等 CSS 预编译工具，提升 CSS 的开发效率和可维护性。
- 版本管理: 熟练使用 Git 进行版本管理，并熟悉团队协作的流程和规范。我能够高效地与团队成员进行代码合并、冲突解决等操作，确保项目的顺利进行。
- 其他: 具备一定的多媒体设计基础，能够使用 PS、PR、AI 等软件制作简单的图片和视频素材。同时，我也具备一点审美能力，能够为项目提供合适的视觉设计方案。
工作经历 Link to 工作经历
浙江**信息技术有限公司 Link to 浙江**信息技术有限公司
| 时间 | 部门 | 职位 |
|---|---|---|
| 2023.02.01 – 至今 | 软件研发部 | 前端开发工程师 |
工作职责：
- 负责前端项目的整体进度管理，确保项目按时交付。根据客户需求和反馈，及时调整产品功能，优化用户体验。定期组织项目复盘，总结经验教训，提升团队整体的项目管理能力。监控产品性能，及时修复 Bug，确保产品的稳定性和可用性。
- 精确理解 UI 设计师的设计意图，将设计图转化为高性能的 Web 界面。深入优化代码，确保页面加载迅速，响应流畅，提升用户体验。承担 Web 前端设计、开发工作，确保前端页面的视觉和交互效果与设计一致。
- 深入理解产品需求和用户行为，实现符合用户习惯的 UI 效果和交互逻辑。引入创新的前端技术，打造独特且吸引人的用户体验。关注前端设计趋势，及时将新元素融入产品中，提升产品的竞争力。
- 与后端开发人员紧密合作，确保前后端数据交互的准确性和有效性。协调前后端接口定义，优化数据传输效率，减少不必要的性能损耗。对接口调用进行异常处理，确保用户在使用产品时获得稳定的服务。
- 持续优化前端框架，确保框架的先进性、稳定性和可维护性。制定并推广整洁良好的代码规范，提升团队整体代码质量。
- 制定严格的质量控制流程，确保前端代码的质量和稳定性。对前端项目进行风险评估，提前发现并解决潜在的技术问题。监控前端技术的最新动态，及时评估新技术对项目的影响，确保项目的先进性。
杭州**科技有限公司 Link to 杭州**科技有限公司
| 时间 | 部门 | 职位 |
|---|---|---|
| 2021.04.21 - 2022.10.20 | 技术部 | 前端开发工程师 |
工作职责：
- 通过 UI 设计师提供的设计图，实现精准的 Web 界面，优化代码，提高性能，承担 Web 前端设计、开发工作。
- 实现产品的 UI 效果和交互方面的开发需求，确保产品具有优质的用户体验。
- 与后端人员配合进行数据交互，实现产品的界面和功能。
- 项目维护，根据客户的需求更改代码，添加移除网页特效，改进用户体验，优化开发细节。
项目经验 Link to 项目经验
浙江**信息技术有限公司 Link to 浙江**信息技术有限公司
项目 1-1：乌兰察布 G335 智慧公路平台（PC 端大屏、PC 管理系统、H5） Link to 项目 1-1：乌兰察布 G335 智慧公路平台（PC 端大屏、PC 管理系统、H5）
项目介绍： 本项目整合了多个子系统，每个子系统拥有独立的部门与角色数据，但所有用户数据均由主系统统一维护。这些子系统包括信息发布系统、资产管理系统、养护管理系统及一张图系统，它们共同构建了一个全面、智能的公路管理平台。
责任描述： 主要参与了主系统、信息发布系统以及一张图系统的页面构建与维护工作，确保用户界面的流畅性与功能性。
技术要点：
- 单点登录（SSO）实现：鉴于各子系统部署环境的差异，我们巧妙地利用地址栏传输 Token 和 ProjectId 的方式，实现了类似 QQ 邮箱的无缝跳转与免登录体验。
- 实时数据展示：借助轻量级的 MQTT 物联网通信协议，我们实时接收雷达设备传来的车辆运行状态数据，为用户呈现最新、最准确的交通信息。
- 视频与摄像头控制：我们采用了海康视频播放插件与 VideoJs 插件，不仅实现了高清视频的流畅播放，还赋予了用户控制摄像头旋转、聚焦及截图的功能。
- 动态数据展示：通过 DataV 组件库，我们为用户带来了表格中数据滚动展示的动态效果，使数据呈现更为生动与直观。
- 地图交互功能：结合 GL 版百度地图，我们为用户提供了点位、路段、区域的绘制功能，支持其图的点击事件响应，增强了用户的交互体验。
- 第三方小程序联调：主要将子系统（养护管理系统 H5）嵌入到第三方微信小程序中，实现小程序进入系统可以免登录的效果。
项目 1-2：智慧叉车监控平台（PC 端大屏、PC 管理系统、H5） Link to 项目 1-2：智慧叉车监控平台（PC 端大屏、PC 管理系统、H5）
项目介绍： 本项目专注于实现工厂叉车的全方位监控管理，涵盖数据的精准录入以及叉车实时位置的实时监控，为工厂运营效率与安全性提供了强有力的支持。
责任描述： 我深度参与了该项目的前端开发工作，从设计到实现，确保了用户界面的高效性与易用性。
技术要点：
- 车辆轨迹回放：为了精确呈现叉车的运行轨迹，我们采取了将设备传来的实时地球坐标系（WGS84）坐标数据转换成百度坐标系（BD-09）的方法，确保了在百度地图上能够准确无误地回放叉车的行驶路径，为管理者提供了直观、清晰的车辆活动记录。
- 点聚合技术：针对大量叉车在地图上产生的密集点位，我们运用了点聚合技术，有效解决了点位重叠、难以区分的问题。通过智能聚合，不仅提高了地图的清晰度和可读性，还大大提升了用户体验。
项目 1-3：丽水市山区公路应急联动平台（PC 端大屏、PC 管理系统、浙政钉 H5、App） Link to 项目 1-3：丽水市山区公路应急联动平台（PC 端大屏、PC 管理系统、浙政钉 H5、App）
项目介绍： 鉴于丽水市山区公路事故频发，为提升应急响应效率和事故处理能力，我们精心打造了这一应急联动平台。
责任描述： 我深度参与了该项目的前端开发工作，从设计到实现，确保了用户界面的高效性与易用性。
技术要点：
- 浙政钉环境下的用户免登。
- PC 端浙政钉扫码登录。
- 精准数据埋点：平台集成了稳定性监控代码（Emas）和流量分析代码(A+)，以全面监控平台运行状况和用户行为。
- Leaflet 离线地图应用：利用 Leaflet 地图库实现离线地图功能，确保在客户无网络的环境中能正常使用。支持在地图上打点、画线、绘制区域，为用户提供直观的地理信息展示。
- 高效数据加载与展示：针对应急事件、物资、设备设施等上万个点位，采用懒加载技术。通过将左下角和右上角的坐标传递给后端，仅加载可视区域内的坐标点，极大提升了数据加载效率和用户体验。
项目 1-4：都江堰市工业企业信息化综合服务平台（PC 端大屏、PC 管理系统、PC 门户系统、H5） Link to 项目 1-4：都江堰市工业企业信息化综合服务平台（PC 端大屏、PC 管理系统、PC 门户系统、H5）
项目介绍： 该项目旨在通过构建一个综合服务平台，以更好地管理和统计都江堰市工业企业的数据，进而提升行业主管部门对工业企业的信息化管理及服务水平。平台涵盖了 PC 端大屏展示、PC 管理系统、PC 门户系统以及 H5 移动端适配等多个方面，为工业企业提供一站式的管理和服务。
责任描述： 我深度参与了该项目的前端开发工作，从设计到实现，全程跟进并确保了用户界面的高效性与易用性。在开发过程中，我专注于提升用户体验，优化界面交互，并确保各前端组件与后端服务的顺畅对接。
技术要点：
- 单点登录【部署在同一个服务器上，域名协议相同端口号不同但共享 Cookie】
- 门户动态标题栏与动态路由：门户系统的标题栏被设计为动态的，能够根据用户当前访问的页面或功能自动调整显示内容。与菜单管理相似，我们实现了动态路由功能，使得前端路由能够灵活适应后端业务逻辑的变化。这些设计提升了用户体验，使用户能够更直观地了解当前所处的页面和功能模块。
- 自定义富文本编辑器：基于 UEditor 进行了二次开发，创建了一个自定义的富文本编辑器。该编辑器支持添加图片、视频（包括外部链接）和地图等多媒体内容，为用户提供了丰富的文本编辑和排版功能。通过整合这些功能，我们极大地提升了用户在编辑和发布内容时的灵活性和便利性。
项目 1-5：智慧桥梁管理系统（PC 端大屏、PC 管理系统、H5） Link to 项目 1-5：智慧桥梁管理系统（PC 端大屏、PC 管理系统、H5）
项目介绍： 智慧桥梁管理系统是一个综合性的管理平台，旨在实现对各地桥梁的高效、智能管理。通过集成多种先进技术和功能，该系统能够实时观测桥梁的水位、水深等关键数据，为桥梁的安全管理和维护提供有力支持。同时，系统还支持 PC 端大屏、PC 管理系统和 H5 移动端等多种访问方式，以满足不同用户的需求。
责任描述： 我深度参与了该项目的前端开发工作，从设计到实现，全程跟进并确保了用户界面的高效性与易用性。在开发过程中，我专注于提升用户体验，优化界面交互，并确保各前端组件与后端服务的顺畅对接。
技术要点：
- Cesium3D 数字平台的使用：通过 Cesium，我们可以直观地展示桥梁的地理位置、结构和周边环境，为用户提供一个全面的视角。结合 Cesium 的 API 和工具，我们实现了对桥梁的 3D 模型进行打点、标注和查询等功能，方便用户快速定位和获取关键信息。
- 通过集成前端图标库 UCharts，我们实现了水位、水深等数据的图表化展示。用户可以通过 H5 移动端随时查看这些图表，了解桥梁的实时状况和历史趋势。
杭州**科技有限公司 Link to 杭州**科技有限公司
项目 2-1：杭州城投房产大屏展示系统（PC 端大屏） Link to 项目 2-1：杭州城投房产大屏展示系统（PC 端大屏）
项目介绍： 这是一款为杭州城投房产定制的个性化大屏展示系统。可以为不同用户登录大屏以展示不同的数据，大屏主要分为设备情况、工程情况和地图交互三部分。其中，地图上实现了打点功能，可以更方便的查看设备的分布情况。
责任描述： 此项目为本人独立开发项目，主要实现功能有用户登录、大屏展示两个部分以及后期代码的更新和维护。
技术要点：
- 使用 Vue 框架、Vue-Router 搭建项目路由。
- 项目使用 Vue-Cli 快速搭建开发环境，并且整个项目采用组件化开发。
- 引用了 Echarts 内的图表，实现页面的动态效果。
- 引用了 DataV 组件库来实现表格中数据滚动效果。
- 使用了 ElementUI 组件库，并在原有基础上修改了样式以实现客户所需的 UI 效果。
- 引用了天地图并实现打点和打开详情弹窗的功能。
项目 2-2：棋安盾后台管理系统（PC 管理系统） Link to 项目 2-2：棋安盾后台管理系统（PC 管理系统）
项目介绍： 该项目是一款企业级后台管理系统，旨在为水务集团提供全面的信息化管理解决方案。系统涵盖多个核心功能模块，包括企业概况、外派维修、考试答题、设备管理、巡检管理、工单记录、工单管理、企业管理等，实现了从设备监控到人员管理的全流程数字化管理，显著提升了企业的运营效率和管理水平。
责任描述： 团队项目，本人主要负责主页企业概况模块数据可视化的呈现，考勤管理模块下（补卡审核、考勤记录、排班信息、考勤统计、排班方案）等页面的表格、树状图等一些效果的实现。
技术要点：
- 使用 Vue-cli 脚手架搭建项目。
- 使用 ElementUi 搭建部分页面布局。
- 通过 Params 传参方式在路由跳转中进行传递。
- 通过路由的懒加载，图片以及一些静态资源的设置对项目性能进行优化。
- 封装 Axios 对数据交互和请求拦截。
自我评价 Link to 自我评价
我是一名具备四年经验的前端开发工程师，拥有扎实的技术功底和丰富的项目实战经验。自学能力强，能够快速掌握新技术并灵活应用于实际工作中，善于独立分析和解决复杂问题。在团队协作中，我具备优秀的沟通能力和团队合作精神，能够与团队成员高效配合，共同推动项目顺利完成。
我对工作充满热情，责任感强，能够在高压环境下保持冷静，展现出色的执行力和抗压能力。性格开朗随和，善于与人沟通，同时具备较强的创造力和学习能力，始终秉持持续学习的态度，致力于不断提升自己的专业素养和综合能力。