1、多云管控系统
技术栈: vue 全家桶、 Axios 、mockjs、less 、Echarts 、 element-ui 、vue Composition API 等
项目描述:
1. 基于 vue 全家桶开发的多云管控项目,该项目共有三个客户端分别是:管理端、用户端、店铺端
2. 多云管控主要面向企业用户,提供弹性云服务器、云硬盘、云硬盘备份、对象存储服务、文件存储服务、 云服务器备份、弹性负钱均衡、VPN 服务、云监控服务等。
3. 主要负责多云管控项目的中的 mysql 数据库和网络监控模块
4. 实现了数据库备份,数据库还原,文件流下载,二次封装 element-UI 组件,echarts 组件
项目要点:
1. 基于 ECharts 二次封装平台风格的图表库,将其复杂 json 配置进行包装为易用 UI 配置。
2. 未开发的业务接口进行统一管理,对外只暴露调用方法,解耦数据流与事务强耦合的逻辑。封装了一套 业务 API,降低了后续开发活动的时间成本
3. 使用动态路由,根据权限动态加载数据库不同的状态,并对其进行拆分、封装逻辑使其变为独立通用的 组件。
4. 修改echarts首次加载不成功的问题,给echarts组件加上key,每次数据变化都去修改key值让echarts 组件进行重新渲染
5. 通过全局导航守卫配合用户合法路由表鉴权,实现管理控制各级用户的路由访问权限
6. 使用 axios 进行网络请求,并实现了对网络请求部分的完全封装,使用请求拦截器阻止重复请求,使用 响应拦截器处理解构成功请求,优化返回格式,处理失败请求,优化全局错误捕获机制。
7. 完成了以下性能优化:使用路由懒加载、图片懒加载、抽离公共的逻辑代码,webpack 打包时使用树 摇优化减少打包体积,使用骨架屏优化用户体验
8. 封装公用 Echarts 图例,例如饼图,折线图,柱状图等图例组件,配置 props 收参,并结合 transition 动画,达到优秀的动画效果。
2、分布式光伏大屏
项目角色:项目前端开发负责人
技术栈: Vue 全家桶、Axios、Echarts、websocket、momentJS 等 项目描述:
1. 该项目主要是监控河南省 18 个地市内的分布式光伏系统的运行效果,并能实时监测重载和过载的数据 情况,同时还具备对出力和过载数据进行预测的能力。
2. 该项目分为省级和市级,它们下面又有预测分析、调控能力建设、重/过载监测、重/过载 TOP10、各个地市台区电站详情等模块 项目要点: 1. 负责该项目从 0 到 1 的搭建、开发、上线整个流程 2. 根据 UI 图高质量的还原 Echarts 样式
3. 使用 ESLint 对代码对项目组提交代码进行规范化,并组织定期 Code Review 以保障代码质量
4. 根据项目需求,对 Echarts 进行样式定制,对项目页面进行响应式处理,封装字体大小自适应工具方法 等以适应大屏尺寸
5. 通过 websocket 实现所有模块数据进行即时更新,通过心跳机制定期发送请求来保持服务器与客户端 之间的连接,确保服务器可以及时地将更新推送给客户端。
6. 实现 Echarts 地图组件下钻功能,时间轴播放功能,因为 各个地市数据量过大,实现播放时动态插入 数据