IoT Dashboard - 智能家居监控系统

IoT Dashboard - 智能家居监控系统

一个基于 Vue 3 + MQTT + InfluxDB 的实时物联网数据可视化平台，用于监控家庭环境、PC 状态和天气信息。

📋 项目简介

本项目是一个完整的物联网前端解决方案，实现了以下核心功能：

• 实时数据采集：通过 MQTT 协议订阅设备消息，实现毫秒级数据更新
• 时序数据存储：使用 InfluxDB 存储历史环境数据（温度、湿度）
• 数据可视化：基于 ECharts 实现多维度图表展示
• 系统监控：实时监控 PC CPU、内存、磁盘使用情况
• 环境感知：室内温湿度、WiFi 信号强度、天气预警等信息展示

🛠️ 技术栈

类别	技术	版本
前端框架	Vue 3	^3.3.4
构建工具	Vite	^5.2.0
UI 组件库	Element Plus	^2.8.0
状态管理	Pinia	^2.1.7
路由	Vue Router	^4.2.5
MQTT 客户端	Paho MQTT	^1.1.0
时序数据库	InfluxDB Client	^1.34.0
图表库	ECharts	^5.4.3
时间处理	Moment.js	^2.30.1

🏗️ 项目结构

iot/
├── src/
│   ├── assets/          # 静态资源
│   │   ├── base.css
│   │   └── main.css
│   ├── components/      # 组件
│   │   └── Iot.vue      # 主仪表盘组件
│   ├── router/          # 路由配置
│   │   └── index.js
│   ├── views/           # 页面视图
│   │   └── IotView.vue
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
├── .env                 # 环境变量配置
├── index.html
├── package.json
└── vite.config.js

🚀 快速开始

安装依赖

npm install

配置环境变量

复制 .env 文件并修改相应配置：

# InfluxDB 配置
VITE_INFLUXDB_HOST=https://your-influxdb-host.com
VITE_INFLUXDB_TOKEN=your-token
VITE_INFLUXDB_ORG=your-org
VITE_INFLUXDB_BUCKET=your-bucket

# MQTT 配置
VITE_MQTT_HOST=your-mqtt-host
VITE_MQTT_PORT=8084
VITE_MQTT_PROTOCOL=wss
VITE_MQTT_ENDPOINT=/mqtt

启动开发服务器

npm run dev

构建生产版本

npm run build

预览生产构建

npm run preview

📊 功能特性

1. PC 系统监控

实时监控计算机运行状态：

• CPU 使用率：红色卡片展示当前 CPU 负载
• 内存使用率：蓝色卡片显示内存占用百分比
• 磁盘使用率：绿色卡片呈现存储空间使用情况
• 运行时间：黄色卡片记录系统启动时长

2. 网络设备状态

• WiFi 信号强度：实时 RSSI 值（dBm）
• 设备在线状态：MAC 地址与连接状态
• 设备运行时长：累计工作时长统计

3. 室内环境监测

• 温度监测：实时温度数据（°C）
• 湿度监测：相对湿度百分比
• 历史趋势：支持 1h/6h/12h/1d/3d/7d 时间范围查询

4. 天气信息展示

• 日温度曲线：最高/最低温度趋势图
• 小时温度曲线：精细化小时级温度变化
• 天气预警：实时气象警报信息

🔧 核心技术实现

MQTT 消息订阅

import PahoMQTT from 'paho-mqtt'

const client = new PahoMQTT.Client(connectUrl, clientId)
const options = {
  cleanSession: false,
  timeout: 5 * 1000,
  userName: 'admin',
  password: 'admin',
  keepAliveInterval: 20,
  useSSL: true,
  reconnect: true,
  onSuccess: function () {
    client.subscribe(topic.value, subscribe_option)
  }
}

client.onMessageArrived = function (message) {
  const msg = JSON.parse(message.payloadString)
  // 根据 topic 分发处理不同数据类型
}

InfluxDB 数据查询

import { InfluxDB, flux } from '@influxdata/influxdb-client'

const client = new InfluxDB({ url: host, token: token })
const queryApi = client.getQueryApi(org)

// Flux 查询语句
let fluxQuery = flux`from(bucket:"${bucket}")
  |> range(start: -${hours}h)
  |> filter(fn: (r) => r._measurement == "${measurement}")
  |> sort(columns: ["_time"], desc: false)`

const result = await queryApi.collectRows(fluxQuery)

ECharts 动态渲染

const option = {
  title: { text: '室内环境监控' },
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: timeList },
  yAxis: [
    { type: 'value', name: '温度' },
    { type: 'value', name: '湿度', gridIndex: 1 }
  ],
  series: [
    { type: 'line', name: '温度', data: tempData },
    { type: 'line', name: '湿度', data: humData, xAxisIndex: 1, yAxisIndex: 1 }
  ]
}
myChart.setOption(option)

🎨 UI/UX 设计亮点

1. 渐变背景：柔和的灰蓝色渐变营造科技感
2. 卡片悬停效果：优雅的 translateY 动画与阴影过渡
3. 色彩语义化：不同指标使用专属色系便于识别
4. 响应式布局：适配桌面与移动端屏幕
5. 加载动画：fadeInUp 入场动画提升用户体验

📝 MQTT Topic 规范

Topic	描述	数据格式
mqtt-topic/online_status	设备在线状态	JSON
mqtt-topic/home	室内环境数据	JSON
mqtt-topic/wifi_status	WiFi 状态信息	JSON
mqtt-topic/weather	天气预报数据	JSON

🔐 安全建议

1. 敏感信息加密：生产环境应使用密钥管理服务
2. MQTT 认证：启用 TLS 加密与强密码策略
3. API Token 保护：避免在前端硬编码敏感凭证
4. HTTPS 强制：所有通信使用加密传输

🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

iot-693s.onrender.com/

📄 许可证

MIT License

---