基本信息

案例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动态添加的属性不具响应式能力。

发布任务

企业点击发布任务,工程师会在任务下报名,招聘专员也会在1小时内与您联系,1小时内精准确定人才

微信接收人才推送

关注猿急送微信平台,接收实时人才推送

接收人才推送
联系需求方端客服
联系需求方端客服