系统介绍
一个基于 MQTT over WebSocket 的前端监控页面,用于实时展示温度、湿度、风速和光照等环境数据。通过与物联网传感器网络对接,实时监测校园环境中的关键指标。
主要功能
- 📊 多维度数据展示 - 温度、湿度、风速、光照、PM2.5、紫外线
- 📈 实时数据图表 - 支持多选数据叠加展示,可交互式缩放和拖拽
- 🎨 数据可视化 - 卡片式展示+趋势图表,支持最大值/最小值对比
- ⚙️ 灵活的设置系统 - 图表平滑、缩放控制、历史时间范围调整
- 💾 数据导出功能 - 支持监控数据导出为多种格式
- 🤖 AI智能分析 - 基于当前环境数据的自动分析和建议
核心特性
- ✅ MQTT 实时连接 - 支持 WebSocket Secure (wss://) 协议
- ✅ 动态数据图表 - 使用 ECharts 5.4.3 进行实时绘制
- ✅ 响应式设计 - 完美支持桌面、平板、手机设备
- ✅ 现代化 UI - 渐变设计、流畅动画、专业视觉
- ✅ AI 智能助手 - 基于大模型的环境数据分析
- ✅ 安全防护 - 严格的内容安全策略(CSP)
技术架构
前端采用 HTML5 + CSS3 + JavaScript 原生开发,无外部UI框架依赖。数据通信基于 WebSocket 实现的 MQTT 协议,确保低延迟的实时数据传输。图表可视化采用 ECharts 库提供强大的数据展示能力。AI 分析功能基于火山方舟豆包大模型。
快速开始
- 用户登录
打开右上角菜单 → "用户中心",填入用户名和密码,完成登录。
- 启用AI助手
点击右下角 AI 助手按钮(🤖),在侧边栏中点击设置(⚙️)配置豆包 API,支持通过 MQTT 获取 API Key。配置完成后即可使用 AI 分析功能。