智慧园区后台管理系统产品系统

场景一：大型科技/工业园区的“综合物业运营”
这是最标准的“智慧园区”场景，比如软件园、高新科技园。
解决的核心痛点：
能耗黑洞：园区几十栋楼，水电费怎么算？哪里漏电？哪里浪费？以前靠人工抄表，现在靠系统。
招商与资产管理：哪些办公室租出去了？哪些空置？合同什么时候到期？
你的项目如何解决：
数据可视化（ECharts）：在大屏上展示“园区能耗趋势图”（水电气使用量）和“入驻率饼图”。物业经理一眼就能看到哪栋楼用电量异常（可能设备故障），或者哪个区域空置率高（需要加强招商）。
权限控制：物业保安只能看门禁数据，财务只能看租金报表，通过你做的“页面+按钮”权限控制，确保数据不泄露。
场景二：物流仓储基地的“安防与车辆调度”
如果这个园区是一个物流中心，那么重点就是“流动”的管理。
解决的核心痛点：
进出混乱：每天几百辆货车进出，排队拥堵，不知道哪辆车在哪个仓库卸货。
安全隐患：园区太大，保安巡逻不到位，发生火情或盗窃无法及时发现。
你的项目如何解决：
数据可视化：展示“实时车流热力图”或“今日入园车辆统计”。调度员可以看到当前园区内的车辆密度，避免拥堵。
多页签导航：调度员需要同时处理“车辆预约”、“月台分配”、“异常报警”多个任务，你的多页签系统让他们可以在不同任务间快速切换，不用反复刷新页面。
场景三：高档写字楼/商业综合体的“行政与服务”
针对CBD写字楼或商场后台。
解决的核心痛点：
报修响应慢：租户空调坏了、灯坏了，打电话给前台，前台再手写单子给工程部，效率极低且无法追踪进度。
人流统计难：商场想知道哪个楼层人最多，以便调整空调温度或安排保洁。
你的项目如何解决：
封装通用逻辑（useTable）：工程部使用你封装的高效表格组件，快速录入和处理“报修工单”，支持按状态（待处理、维修中、已完成）筛选，提升响应速度。
数据可视化：展示“分时段人流曲线”，帮助运营团队决定

【核心模块】
系统包含综合数据大屏、园区资产管理、能耗监控中心、安防巡更管理、用户权限配置及系统设置等核心模块。
【主要功能描述】
本项目旨在解决传统园区管理效率低、数据孤岛严重的问题。
可视化决策支持：通过 ECharts 集成动态图表，实时展示园区人流热力图、水电能耗趋势及车位使用率，辅助管理层快速决策。
精细化权限管控：实现了基于角色的访问控制（RBAC），支持菜单级与按钮级的双重权限隔离，确保不同岗位（如保安、财务、管理员）仅能操作对应功能，保障数据安全。
高效业务处理：提供标准化的资产录入、报修工单流转及巡更记录查询功能，支持多条件筛选与批量操作，大幅提升物业运营效率。
流畅交互体验：内置多页签导航系统，支持页面缓存（KeepAlive 思想），在切换不同业务模块时保持状态不丢失，实现类桌面应用的流畅体验。

【个人职责】
我作为前端核心开发，独立负责了从脚手架搭建到核心业务模块的全流程开发。具体包括：设计并实现动态路由权限体系、封装通用业务组件库、搭建 Redux 全局状态管理架构以及 ECharts 数据可视化大屏的开发。
【技术栈与难点攻克】
技术架构：采用 React 18 + TypeScript + Ant Design (antd) 构建企业级 SPA 应用，使用 React Router v6.4 进行路由管理，Redux Toolkit (RTK) 进行全局状态维护。
动态权限实现：设计了“后端返回树形菜单 -> 前端递归解析 -> 动态挂载路由”的方案，并结合自定义指令精确控制按钮显隐，解决了复杂组织架构下的权限安全问题。
组件化提效：针对高频场景封装了 useTable、usePagination 等自定义 Hooks，将分页、查询、Loading 状态逻辑复用，使业务代码量减少约 40%。
性能优化：实现了基于路由元信息的路由级缓存策略，解决了多页签切换时的重复渲染问题；对 Axios 进行二次封装，统一处理 Token 无感刷新与全局异常拦截，提升了系统的稳定性与用户体验。