——辅助决策预案库—— 项目描述：辅助决策预案库是一个后台管理消防的各个支队的案件所建立的后台；工作台是收集各个支队的案件数量在图表上进行可视化，利用echart提供的option进行交互；管理员设置页面则是通过管理各级管理员数据以及对该系统操作的系统日志数据进行查询。 1）工作台（react hooks+ts+echart） 1.将echarts的option配置函数抽取出来使用useCallBack包裹，避免在执行useEffect的时候频繁执行 2）管理员设置（react hooks+ts+antd） 1.项目利用react+ts+antd，利用antd日期组件以及下拉select组件进行筛选查询

——单位值班表—— 2022.11 项目简述：通过点击视图左侧树节点懒加载该节点的列表的数据，通过点击 checkbox去勾选该节点并与客户端进行数据交互 1. 项目通过mobx构建数据store去进行交互，将公共数据、方法抽取在独立文件。 2.在后期增加全选的需求，由于客户端接口设计只能传输单个数据，为了减少工作量，前端采取全选预处理，通过Promise.allSettled方法先把全选的动作预先完成。 3.基于性能考虑，对组织树点击事件使用缓存以及懒加载，从而避免每次点击发起请求以及初次进入页面造成卡顿 4.由于数据过多，结合react-window第三方库实现虚拟列表功能降低渲染负担 5.后期项目优化，增加nginx中的gzip配置降低了前端js代码体积约30%

项目背景：商业购物中心后台系统需要有账号挂靠，该账号需要管理员配置相关权限才能查看各个模块，每个账号需要配置账密、角色类型和数据权限等，项目技术栈使用vue3 + element ui 项目难点： 传参问题：通过 element ui 的 tree 组件中 getHalfCheckedNodes 控制父子节点传参不关联； 节点删除：利用 filter 结合 includes 实现向上向下遍历去删除该节点的关联的所有父子节点； 编辑功能难点：由于父子节点不关联，数据回显需要通过返回的数据 id 去递归匹配整个组织树所对应项； 数据依赖：调试编辑信息功能过程中发现数据偶尔不回显等问题，经排查发现是接口返回顺序问题，通过 async/await 调整接口返回顺序解决