凤凰智慧园区

企业服务数据服务案例ID：235275

启航

2 年经验· 上海魁鲸

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

项目描述：该系统是一个数字化园区管理项目，包括后台管理和可视化大屏两个部分，不同角色员工可查看内容不同,可实现对园区内的楼宇、企业、员工、车辆和一体杆等进行数字化管理,以及通过园区3D模型实时展示园区概况。通过
模块化将该程序分成角色管理,员工信息,企业管理,泊车管理,楼宇信息,设备管理等
技术栈：vue3全家桶、vue2全家桶、echarts 、scss
负责模块：员工信息,角色管理,权限应用,企业管理,泊车管理等。
技术要点：
1. 封装cookies实现本地存储token
2. 通过自定义组件permission.js配置路由前置守卫,进行访问拦截处理
3.使用NProgress插件展示页面跳转时的浏览器顶部进度条
4.使用Vuex实现组件之间数据共享，并单独抽离getters对数据封装提取,来简化代码,提高开发效率
5. 通过@splinetool/runtime拉取3d模型加交互，并通过v-scale-screen插件进行大屏适配
6. 基于quankun插件实现微前端聚合园区管理与大屏可视化,对旧项目进行扩展,突破技术栈限制
7.使用RBAC思想实现对员工模块权限访问控制
8. 项目优化：防抖节流、骨架屏、路由懒加载、按需引入第三方库等技术手段
项目亮点：
按钮实现通过quankun(乾坤）插件实现微前端聚合能力。首先需主应用改造（后台管理），通过registerMicroApps方法配置子
应用名字、运行服务地址、装载子应用结构的容器、激活子应用的路由地址,这里要保证主应用跳转路由与子应用路由对应,同时需要和子应用的路由名称对应。
RBAC权限思想：
基于RBAC的思想去实现。给员工分配角色,和角色分配权限,基于角色分配权限。进行静动态拆分路由并通过filter和includes进行动态路由筛选,通过router.addRouter()方法进行添加到路由表中,最后进行菜单渲染和按钮权限处理。
行内编辑：
通过el-tab表格组件进行实现,使得我们可以在表格内直接进行编辑。当用户点击编辑按钮,表格状态从文本变为表单,通过forEach给每一行动态添加isEdit和备份数据,使用this.$set()解决vue2动态添加的属性不具响应式能力。