- 前端框架: React 18
- 类型系统: TypeScript
- UI组件库: Ant Design
- 路由管理: React Router DOM
- 构建工具: Create React App
- 样式方案: CSS + Ant Design样式
- 3D可视化: three.js 基于JavaScript的开源Web图形引擎
- 仓库地址 gitee ： gitee.com/yupeng24522…
🧭 页面结构
- 仪表盘 - 系统概览、数据统计、运行状态
- 3D可视化 - 酷炫的楼宇展示,智能监控。
- 报警管理 - 完整的报警处理功能
- 📋 报警列表 - 实时报警监控、搜索筛选、状态处理
- 📊 报警统计 - 趋势图表、系统分布、设备排行
- ⚙️ 报警规则 - 规则配置、启用禁用、阈值设置
- 子系统管理 - 子系统列表、状态管理
- 设备管理 - 设备列表、状态监控
- 统计分析 - 数据报表、趋势分析
- 系统管理 - 用户管理、系统设置
首页设计
展示3d 酷炫可视化效果
点击建筑物可显示设备信息 和 楼层信息
每个楼层入住率使用不同颜色状态显示
点击数据管理可以看总的楼层信息 设备信息
three.js 组件部分代码 import * as THREE from 'three'; 导入 three.js import { OrbitControls } from 'three-stdlib'; 导入 OrbitControls
// 组件挂载时初始化场景 useEffect(() => { if (mountRef.current) { const cleanup = initScene(); setIsLoading(false); return cleanup; } }, [initScene]);
渲染设备信息模态框
楼宇详细信息模态框
处理报警信息和电梯系统管理
电梯系统能够控制楼层，设备维护紧急停止等安全措施
集合了停车系统 设备运行状态 能耗分析 告警事件 设备维护等功能
感谢大家观赏！ 源码地址 ： gitee.com/yupeng24522…
