# iot-web

**Repository Path**: etccq/iot-web

## Basic Information

- **Project Name**: iot-web
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-11
- **Last Updated**: 2026-04-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 工业物联网监控平台

一个基于Vue 3的工业物联网监控平台系统，采用多页面架构设计，提供设备监控、室内环境监测、车位引导等多种物联网应用场景。

## 项目简介

本项目是一个现代化的工业物联网监控平台，采用Vue 3 + Vue Router实现多页面架构，支持场景化功能模块。系统包含入口页面、设备列表、室内监控、车位引导和监控大屏等多个功能模块，采用统一的深色主题设计，提供直观的数据展示和实时监控功能。

## 功能架构

### 页面模块

1. **入口页面 (Home)**
   - 场景选择门户
   - 功能模块卡片展示
   - 系统运行状态概览
   - 统计数据实时显示

2. **设备列表 (DeviceList)**
   - 设备统计概览
   - 设备搜索和筛选
   - 设备状态实时监控
   - 设备详情查看
   - 设备增删改管理
   - 分页显示

3. **室内监控 (IndoorMonitor)**
   - 多区域环境监控
   - 实时环境数据（温度、湿度、PM2.5、CO₂）
   - 数据趋势图表分析
   - 区域设备管理
   - 告警状态显示

4. **车位引导 (ParkingGuide)**
   - 停车场统计概览
   - 多停车场切换管理
   - 可视化车位分布图
   - 车位状态实时更新
   - 实时进出记录
   - 车位详情查询

5. **监控大屏 (IotDashboard)**
   - 综合数据可视化
   - 设备状态监控
   - 生产数据趋势分析
   - 能耗分布图表
   - 告警信息管理
   - 系统状态统计

## 技术栈

- **前端框架**: Vue 3.5.13
- **路由管理**: Vue Router 4.5.0
- **构建工具**: Vite 6.0.1
- **数据可视化**: ECharts 5.5.1
- **UI组件库**: Ant Design Vue 4.2.5
- **开发语言**: JavaScript (ES6+)

## 项目结构

```
iot-web/
├── index.html              # 项目入口HTML文件
├── package.json            # 项目配置和依赖管理
├── vite.config.js         # Vite构建配置
├── src/
│   ├── main.js            # Vue应用入口
│   ├── App.vue            # 路由入口组件
│   ├── router/
│   │   └── index.js       # 路由配置文件
│   └── views/
│       ├── Home.vue           # 入口页面
│       ├── DeviceList.vue     # 设备列表页面
│       ├── IndoorMonitor.vue  # 室内监控页面
│       ├── ParkingGuide.vue   # 车位引导页面
│       └── IotDashboard.vue   # 监控大屏页面
└── dist/                  # 构建输出目录
```

## 路由配置

| 路径 | 页面 | 功能说明 |
|------|------|----------|
| `/` | Home | 系统入口，场景选择 |
| `/devices` | DeviceList | 设备列表管理 |
| `/indoor` | IndoorMonitor | 室内环境监控 |
| `/parking` | ParkingGuide | 车位引导管理 |
| `/dashboard` | IotDashboard | 综合监控大屏 |

## 安装步骤

### 环境要求

- Node.js 16.x 或更高版本
- npm 或 yarn 包管理器

### 安装依赖

```bash
npm install
```

## 运行项目

### 开发模式

启动开发服务器，支持热更新：

```bash
npm run dev
```

开发服务器将在 `http://localhost:3000` 启动。

### 生产构建

构建生产版本：

```bash
npm run build
```

构建完成后，生成的文件将输出到 `dist` 目录。

### 预览生产版本

预览构建后的生产版本：

```bash
npm run preview
```

## 扩展新场景

项目采用模块化设计，方便扩展新的监控场景。添加新场景的步骤：

1. 在 `src/views/` 目录下创建新的页面组件
2. 在 `src/router/index.js` 中添加新的路由配置
3. 在入口页面的模块网格中添加新的功能入口卡片

### 路由配置示例

```javascript
// src/router/index.js
{
  path: '/new-scenario',
  name: 'NewScenario',
  component: () => import('../views/NewScenario.vue'),
  meta: {
    title: '新场景名称'
  }
}
```

## 数据结构

### 设备数据结构

```javascript
{
  id: 'DEV001',           // 设备ID
  name: '温度传感器A1',   // 设备名称
  location: '车间A',      // 设备位置
  temperature: 25,        // 温度值
  humidity: 60,           // 湿度值
  status: 'online',       // 状态：online/warning/error/offline
  statusText: '运行正常',  // 状态描述
  lastUpdate: '2分钟前'    // 最后更新时间
}
```

### 环境数据结构

```javascript
{
  temperature: 24,        // 温度 (°C)
  humidity: 58,           // 湿度 (%)
  pm25: 35,              // PM2.5指数
  co2: 450               // CO₂浓度 (ppm)
}
```

### 车位数据结构

```javascript
{
  id: 'A01',             // 车位ID
  number: 'A-01',        // 车位编号
  status: 'available',    // 状态：available/occupied/reserved/disabled
  type: '普通'            // 车位类型
}
```

## 界面特点

- 现代化深色主题设计
- 统一的页面布局和导航风格
- 响应式设计，适配不同屏幕尺寸
- 平滑的动画效果和交互体验
- 清晰的信息层次结构
- 统一的色彩体系和图标风格

## 浏览器兼容性

- Chrome (推荐)
- Firefox
- Safari
- Edge

## 开发说明

### 代码规范

- 使用ES6+语法
- 遵循Vue 3组合式API规范
- 组件化开发，提高代码复用性
- 统一的命名规范和代码风格

### 扩展功能建议

- 添加WebSocket实时数据推送
- 实现用户权限管理
- 添加数据导出功能
- 支持多语言切换
- 增加历史数据查询功能
- 集成真实的后端API

## 许可证

本项目仅供学习和参考使用。

## 联系方式

如有问题或建议，请联系项目维护者。

---

© 2026 工业物联网监控平台 | 版本 v2.0.0