项目描述:
智慧云上园区系统是一个数字化工程管理项目,包括后台管理和可视化大屏两个部分,该项目是企业的管理系统,进行集团内部的信息化办公,无纸化办公的转型,包含登录、首页数据可视化、人员管理、项目管理、材料设备管理、工程进度管。
技术栈:vue2/vue3+vue-router+vuex+axios+js-cookie+echarts+three.js+elementUI+微前端
项目职责:
1.登录功能中需要保存token到本地和Vuex中,所有需要token的位置需要通过Vuex来进行获取,Vuex的获取速度要比本地块,有利于性能优化,在请求拦截器中进行拼接token,在响应拦截器中进行判断token是否失效
2.首页用到了echarts进行数据可视化,对公司的工程项目数据进行展示,不同角色可以看到的图表也略有不同
3.通过动态设置的路由来设置用户的可见页面,将可见页面的路由保存到Vuex中可以使左侧边栏响应式的展示
4.RBAC权限解决方案,不同角色拥有不同权限,对不同权限的角色分配不同的可见页面,对于都可见的页面分配不同的按钮权限,不同角色可以操作的功能不同
5.材料管理系统,对材料出入库单进行打印和上传复印件,可以导出盘点表Excel
6.使用路由懒加载,降低第一次加载时的压力。
7.封装axios请求,包含请求拦截器、响应拦截器等,提高代码的可维护性。
8.使用three.js进行3D大屏的可视化
项目难点:
1.404页面的处理,因为404页面在静态的页面内,每次刷新都会加载一个404页面影响用户体验,而又不能直接删除,因为有时路由跳转错误需要进行提示
2.状态按钮设置,后台返回数据1表示成功,2表示失败,3表示等待中,前端需要转化为汉字
项目亮点:模拟车辆行进路线,并到园区门口时模拟闸机抬杆
解决:1. 借助 CatmullRomCurve3 传入关键建模师给到的路径规划坐标点,它会帮我们连成一条曲线
2. 曲线 getPoints(分段数),获取 n + 1 个坐标点数组集合
3. 基于渲染循环,不断累积索引下标,从坐标点数组里取出下一个坐标给物体设置位置就形成了物体按照路径移动
4.判断到达指定路径坐标点后,旋转闸机抬杆模型