项目名称

动力港能源管理平台

项目简介

动力港能源管理平台是基于公司充电能源业务，结合互联网技术，实现网络化管理，与云平台实现数据共享和远程控制，使用更加便捷和智能化。便于公司对能源设备的集中管理和监测，优化充电结构，提高充电效率。

技术栈

• 前端：Vue3 + vue-router 4.x + pinia + TypeScript + Vite + element plus + axios + less + echarts + 高德地图api + TinyMCE富文本编辑器
• 后端：mock.js

项目的难点和亮点

• 第一个我认为比较难的点是我自己封装了快捷页签组件，组件本身的结构比较简单，但是这个组件需要和左侧菜单及路由联动，并且还需要控制不能重复添加还有要控制和菜单联动的高亮效果，并且菜单数据是动态返回的，存在pinia中。所以我考虑到数据需要共享，我在pinia的store中也维护了一个用户访问记录的数组，每次添加的时候要判断数组中存不存在。但是删除的时候比较麻烦，因为用户有可能删除的是高亮的，这个时候要动态设置前一位为高亮，还需要判断是不是剩下的唯一一项，那就不允许删除，并且还要考虑用户刷新的情况，因为访问记录数组存储在pinia中，刷新会丢失，这时候我从路由对象中获取当前路径，但是路径不足以渲染页签，我还要根据这个路径去菜单项store中遍历寻找对应的路由对象，然后再动态添加页签。整个功能需要考虑的点比较多，互相联动及相互影响和受用户操作影响的比较多，需要考虑的很全面，所以这个算一个比较复杂的功能。

• 第二个我觉得的是亮点的是我在项目中封装了多个自定义组合式函数和二次封装了组件，因为我们的项目很多页面功能类似，所以我封装了统一的查询表格的自定义组合式函数，自定义分页的组合式函数，每个页面只需要调用传参，不需要编写那些重复的逻辑了；还有就是项目中比较多的要用到分步表单，但是element plus没有提供这样的组件，所以我组合了它的抽屉和步骤条和表单组件，进行了二次封装，封装的过程中要考虑到多处的父子传值子父传值及插槽的使用，并要考虑到表单的校验和提交。极大的优化了项目的开发效率，并且自己对组件封装的原理有了更深的理解。

• 第三个我觉得权限分配功能算一个难点，因为这个要基于树形控件做递归渲染， 我需要获取所有的树形菜单以及获取当前用户权限的菜单去动态赋值，但是树形控件赋值只考虑需要勾选项的key，我们的权限菜单是一个复杂数组，我需要对数组进行转换，而且树形控件需要的key是一个一维数组，我还需要对我的菜单数据处理后进行数组扁平化，并且扁平化的同时要剔除树形控件的父节点，因为如果父节点被选中子节点默认就都被选中了，这样是错误的。我这里定义了闭包函数并结合了递归，处理了菜单并动态赋了值。逻辑复杂一些，所以我认为这是一个难点。

• 最后，当初在做的时候感觉项目中难的点和复杂的点是挺多的，但是通过自己的反复尝试和查阅资料解决，现在回过头看，其实感觉也都没有像当初认为的那样难了。所谓的难点无非就是遇到了自己之前没遇到的场景，或者考虑的情况需要更多一些而已。

项目登录说明

在接口中定义了两个用户，账号和密码分别是：

• admin角色：账号：admin 密码：admin666
• user角色：账号：user 密码：user666