🌍 物联网仪表盘 (IoT Dashboard)

室内环境实时监控系统 (Indoor Environment Real-time Monitoring System)

这是一个基于 Next.js 构建的现代化物联网（IoT）环境监控控制台。它提供了深色科技主题的精美 UI，支持实时数据可视化、设备远程控制以及多语言切换功能。

✨ 主要功能 (Features)

• 📊 实时/历史数据双屏模式：支持室内温度、CPU 温度、光照强度（Lux）等指标的实时动态曲线与历史时序数据查询。
• 🕹️ 设备双向控制：
  • 远程实时切换 LED 指示灯及蜂鸣器的工作状态。
  • 向下位机设备发送串口字符 Payload 数据。
• 🔌 实时流信 (MQTT)：前端基于 WebSocket 实时接收传感器上报的 MQTT 遥测数据。
• 🗄️ 持久化存储 (InfluxDB)：集成 InfluxDB 时序数据库存储历史传感器数据，支持按多重时间范围（1分钟~24小时）快速检索。
• 🌐 国际化 (i18n)：内置简体中文与英文无缝切换，数据状态自适应翻译。
• 🎨 现代化 UI：全站使用 Tailwind CSS，实现高级的玻璃拟物深色风格（Dark Mode）与完美的多端响应式适配。

🛠️ 技术栈 (Tech Stack)

• 应用框架：Next.js (App Router) + React
• 样式方案：Tailwind CSS
• 时序数据库：InfluxDB (v2)
• 物联网通信：MQTT (通过 mqtt 库实现 WebSocket 实时订阅)

📁 核心目录结构 (Directory Structure)

📦 iot-dashboard
 ┣ 📂 app
 ┃ ┣ 📂 api               # Next.js 服务端路由 (传感器数据读取、设备控制指令下发)
 ┃ ┣ 📂 dashboard         # 仪表盘主视图与拆分化重用组件
 ┃ ┃ ┣ 📂 components      # 核心 UI 组件 (Header面板, 图表, 状态卡片, 控制卡片)
 ┃ ┃ ┣ 📂 hooks           # 自定义 React Hooks (如 useMqtt)
 ┃ ┃ ┗ 📜 locales.ts      # 多语言 (i18n) 字典文件
 ┃ ┣ 📂 lib               # 服务端公共与核心功能模块 (如 InfluxDB 实例封装)
 ┃ ┗ 📜 globals.css       # Tailwind CSS 全局样式
 ┣ 📜 next.config.ts      # Next.js 构建配置文件
 ┣ 📜 package.json        # 依赖与脚本定义
 ┗ 📜 tsconfig.json       # TypeScript 配置文件

🚀 快速开始 (Getting Started)

1. 环境准备

确保您的开发环境已安装 Node.js (建议 v18+)，并准备好可用的 MQTT Broker (如 EMQX) 和 InfluxDB 服务。

2. 安装依赖

npm install
# 或者
yarn install
# 或者
pnpm install

3. 配置环境变量

在项目根目录复制或创建 .env.local 文件，补全您的后端与数据库访问凭证组合：

# ====== InfluxDB 时序数据库配置 ======
INFLUX_URL=http://your_influxdb_host:8181
INFLUX_TOKEN=your_influxdb_token
INFLUX_DATABASE=iot_data

# ====== 前端 MQTT 客户端配置 (WebSocket，仅需只读订阅权限) ======
NEXT_PUBLIC_MQTT_HOST=wss://your_mqtt_broker:8084/mqtt
NEXT_PUBLIC_MQTT_USER=emqx_test
NEXT_PUBLIC_MQTT_PASS=emqx_test

# ====== 服务端 MQTT 配置 (可选，用于 /api/control 下发控制) ======
# 若不填写，默认使用 NEXT_PUBLIC_MQTT_*；建议配置具有 publish 权限的独立账号
MQTT_SERVER_USER=api_server
MQTT_SERVER_PASS=your_server_password

🔐 安全建议与 ACL 规则：请查阅 EMQX_ACL.md 查看如何针对前端账号配置只读规则（订阅 device/esp32s3/data，禁止发布 device/esp32s3/control）。

4. InfluxDB 时序数据库与表结构规范 (重要 ⚠️)

为了使「历史时序数据查询」正常出图，请确保 InfluxDB 中已创建或通过数据采集服务（如 EMQX 规则引擎 / Telegraf）写入了对应的数据表：

• 目标数据库 (Database)：由环境变量 INFLUX_DATABASE 指定（默认为 iot_data）。
• 传感器数据表 (Measurement)：room_temp（支持通过环境变量 INFLUX_TABLE 自定义）。
• 字段规范 (Fields)：

  字段名 (Field)	类型 (Type)	单位 / 说明
  temperature	Float / Double	室内环境温度 (°C)
  cputemp	Float / Double	CPU 芯片温度 (°C)
  lux	Float / Double	光照强度 (Lux)
  beep	Boolean	蜂鸣器状态 (可选)
  led	Boolean	LED 指示灯状态 (可选)
  time	Timestamp	时间戳 (UTC 时间戳)

📌 说明：

1. InfluxDB (v3 IOx 引擎) 会在第一条数据写入时自动建表与确定字段类型。在尚未写入任何数据时，系统会自动优雅返回空数组，避免页面崩溃。
2. 控制指令审计表为 web_control_led，下发 LED 控制指令时会自动由服务端记录。

5. 启动开发服务器

npm run dev

启动成功后，浏览器访问 http://localhost:3000即可进入物联网仪表盘面板。

📄 协议 (License)

本项目采用 MIT License 协议。