# ufly1000

**Repository Path**: ukiot/ufly1000

## Basic Information

- **Project Name**: ufly1000
- **Description**: UKIOT UFLY1000是一个功能完整的企业级物联网设备管理平台前端项目，提供设备接入、用户权限、数据管理等核心功能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-05
- **Last Updated**: 2025-11-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🌐 UKIOT UFLY100 物联网管理平台

> 企业级物联网设备管理平台前端 - 基于 Vue 3 + TypeScript + Element Plus

[![Vue](https://img.shields.io/badge/Vue-3.3+-brightgreen.svg)](https://vuejs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)
[![Element Plus](https://img.shields.io/badge/Element_Plus-2.4+-409EFF.svg)](https://element-plus.org/)
[![Vite](https://img.shields.io/badge/Vite-5.0+-646CFF.svg)](https://vitejs.dev/)

---

## 📖 项目简介

UKIOT UFLY1000是一个功能完整的企业级物联网设备管理平台前端项目，提供设备接入、用户权限、数据管理等核心功能。


![预览](images/预览.gif)
![预览](images/预览01.gif)


### ✨ 核心特性

- 🚀 **设备接入** - 10种协议支持、6种认证方式、完整的接入管理
- 🔐 **权限管理** - 基于RBAC的用户角色权限、数据权限、菜单权限
- 📊 **数据管理** - 产品管理、设备管理、物模型管理
- 📝 **日志审计** - 完整的操作日志记录和查询
- 🎨 **现代UI** - 基于Element Plus的美观界面
- 📱 **响应式** - 完美适配PC和平板设备

---

## 🎯 功能模块

### 核心业务模块

#### 1. 设备接入管理 🌟🌟🌟🌟🌟
- **协议管理**: MQTT、CoAP、Modbus、LwM2M、HTTP/HTTPS等
- **设备认证**: 证书、PSK、Token、设备密钥等
- **协议适配器**: 数据解析、编码、批量测试
- **网关管理**: 网关设备和子设备管理
- **接入监控**: 实时连接状态、消息统计
- **日志审计**: 完整的接入日志记录

#### 2. 用户权限管理 🌟🌟🌟🌟🌟
- **用户管理**: 完整CRUD、批量操作、密码重置
- **角色管理**: 权限树配置、数据权限、角色复制
- **部门管理**: 树形结构、拖拽排序
- **操作日志**: 多维度查询、详情查看

#### 3. 设备管理 🌟🌟🌟
- **设备列表**: 多类型设备统一管理
- **设备详情**: 实时数据、历史数据、控制面板
- **设备分组**: 灵活的分组管理

#### 4. 产品管理 🌟🌟🌟🌟
- **产品列表**: 产品信息管理
- **物模型**: 属性、服务、事件定义
- **固件管理**: 版本管理、OTA升级

#### 5. 系统管理 🌟🌟🌟🌟
- **数据字典**: 系统配置项管理
- **操作日志**: 审计追踪
- **系统配置**: 参数配置

---

## 🛠️ 技术栈

### 核心框架
- **Vue 3.3+** - 渐进式JavaScript框架
- **TypeScript 5.0+** - 类型安全
- **Vite 5.0+** - 极速构建工具

### UI框架
- **Element Plus 2.4+** - Vue 3组件库
- **SCSS** - CSS预处理器

### 状态管理
- **Pinia** - Vue状态管理

### 路由
- **Vue Router 4** - 官方路由管理器

### 工具库
- **Axios** - HTTP客户端
- **Day.js** - 日期处理
- **ECharts** - 数据可视化

---

## 📦 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0 或 pnpm >= 8.0.0

### 安装依赖

```bash
# 使用 npm
npm install

# 或使用 pnpm (推荐)
pnpm install
```

### 开发模式

```bash
npm run dev
```

访问 http://localhost:5173

### 构建生产

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

### 代码检查

```bash
npm run lint
```

---

## 📂 项目结构

```
src/
├── api/                    # API接口层
│   ├── device-access.ts    # 设备接入API (1100+行, 38个接口)
│   ├── product.ts          # 产品管理API
│   └── auth.ts            # 认证API
│
├── assets/                 # 静态资源
│   ├── styles/            # 全局样式
│   └── images/            # 图片资源
│
├── components/             # 公共组件
│   └── ...                # 各类复用组件
│
├── layout/                 # 布局组件
│   └── index.vue          # 主布局
│
├── router/                 # 路由配置
│   └── index.ts           # 路由定义
│
├── stores/                 # 状态管理
│   └── auth.ts            # 认证状态
│
├── types/                  # 类型定义
│   └── index.ts           # 主类型文件 (491行, 50+接口)
│
├── utils/                  # 工具函数
│   ├── request.ts         # axios封装
│   └── index.ts           # 通用工具
│
├── views/                  # 页面组件
│   ├── device-access/     # 设备接入 (12个文件) 🌟🌟🌟🌟🌟
│   │   ├── protocol/      # 协议管理
│   │   ├── auth/          # 设备认证
│   │   ├── adapter/       # 协议适配器 (960行)
│   │   ├── gateway/       # 网关管理
│   │   ├── monitor/       # 接入监控
│   │   └── ...            # 其他模块
│   │
│   ├── devices/           # 设备管理 (13个文件)
│   │   ├── index.vue      # 设备列表
│   │   ├── detail.vue     # 设备详情
│   │   └── ...
│   │
│   ├── products/          # 产品管理 (9个文件)
│   │   ├── list/          # 产品列表
│   │   ├── category/      # 产品分类
│   │   └── firmware/      # 固件管理
│   │
│   ├── system/            # 系统管理
│   │   ├── users/         # 用户管理 (690行) 🌟🌟🌟🌟🌟
│   │   ├── roles/         # 角色管理 (790行) 🌟🌟🌟🌟🌟
│   │   ├── departments/   # 部门管理 (663行) 🌟🌟🌟🌟
│   │   ├── dictionary/    # 数据字典 (600行) 🌟🌟🌟🌟
│   │   └── logs/          # 操作日志 (550行) 🌟🌟🌟🌟🌟
│   │
│   ├── dashboard/         # 首页仪表板
│   ├── login/            # 登录页
│   └── ...               # 其他页面
│
├── App.vue                # 根组件
└── main.ts               # 入口文件
```

---

## 🎨 核心功能展示

### 1. 设备接入管理

```typescript
// 支持10种协议
const protocols = [
  'MQTT', 'CoAP', 'Modbus', 'LwM2M', 
  'HTTP/HTTPS', 'WebSocket', 'TCP/UDP', 
  'OPC UA', 'BACnet', 'Zigbee'
]

// 6种认证方式
const authTypes = [
  'Certificate', 'PSK', 'Token',
  'Username/Password', 'DeviceSecret', 'DynamicRegistration'
]
```

### 2. 权限管理

```typescript
// 权限树结构
interface Permission {
  id: string
  name: string
  type: 'menu' | 'button'
  children?: Permission[]
}

// 数据权限
type DataScope = 'all' | 'custom' | 'dept' | 'dept_and_child' | 'self'
```

### 3. 操作日志

```typescript
interface OperationLog {
  username: string      // 操作用户
  module: string        // 操作模块
  action: string        // 操作类型
  content: string       // 操作内容
  ip: string           // IP地址
  browser: string      // 浏览器
  duration: number     // 耗时(ms)
  status: number       // 状态
  createTime: string   // 操作时间
}
```

---

## 🔧 配置说明

### 环境变量

创建 `.env.development` 文件：

```env
# 开发环境
VITE_APP_TITLE=IoT管理平台
VITE_APP_BASE_API=/api
VITE_APP_BASE_URL=http://localhost:8080
```

创建 `.env.production` 文件：

```env
# 生产环境
VITE_APP_TITLE=IoT管理平台
VITE_APP_BASE_API=/api
VITE_APP_BASE_URL=https://api.yourdomain.com
```

### 代理配置

`vite.config.ts`:

```typescript
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})
```

---

## 📖 使用指南

### 登录系统

默认账号：
- 用户名：`admin`
- 密码：`admin123`

### 设备接入流程

1. **创建协议配置** - 选择协议类型，配置参数
2. **添加设备认证** - 选择认证方式，配置凭证
3. **配置协议适配器** - 数据解析和编码规则
4. **设备上线测试** - 监控接入状态
5. **查看日志** - 审计接入记录

### 权限配置流程

1. **创建角色** - 定义角色名称和描述
2. **配置菜单权限** - 勾选权限树
3. **配置数据权限** - 选择数据范围
4. **分配用户** - 将用户关联到角色

---

## 📝 开发规范

### 命名规范

- **组件名**: PascalCase (如 `UserList.vue`)
- **文件名**: kebab-case (如 `user-list.vue`)
- **变量名**: camelCase (如 `userName`)
- **常量名**: UPPER_SNAKE_CASE (如 `API_BASE_URL`)

### 代码规范

- 使用TypeScript类型注解
- 遵循ESLint规则
- 组件Props定义类型
- API接口定义返回类型

### Git提交规范

```bash
feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式
refactor: 重构
perf: 性能优化
test: 测试
chore: 构建/工具
```

---

## 🚀 部署指南

### Nginx配置

```nginx
server {
    listen 80;
    server_name yourdomain.com;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://backend:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

### Docker部署

```dockerfile
FROM node:16-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

---

## 📚 文档资源

### 项目文档
- [项目审计报告](./PROJECT_AUDIT_REPORT.md) - 全面审计
- [优化执行方案](./OPTIMIZATION_PLAN.md) - 详细计划
- [项目总结](./PROJECT_SUMMARY.md) - 功能概览
- [交付清单](./DELIVERY_PACKAGE.md) - 交付物
- [优化完成报告](./OPTIMIZATION_COMPLETED.md) - 进度跟踪

### 设备接入文档
- [设备接入README](./DEVICE_ACCESS_README.md) - 功能说明
- [协议适配器优化](./ADAPTER_OPTIMIZATION.md) - 详细优化
- [适配器测试指南](./ADAPTER_TEST_GUIDE.md) - 测试方法
- [功能演示](./适配器功能演示.md) - 演示指南

### 技术文档
- [实现总结](./IMPLEMENTATION_SUMMARY.md) - 技术实现
- [快速开始](./QUICK_START.md) - 快速上手
- [交付检查清单](./DELIVERY_CHECKLIST.md) - 验收标准

---

## 🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

1. Fork本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启Pull Request

---

## 📄 许可证

本项目采用 MIT 许可证

---

## 🔗 相关链接

- [Vue.js 官方文档](https://vuejs.org/)
- [Element Plus 官方文档](https://element-plus.org/)
- [TypeScript 官方文档](https://www.typescriptlang.org/)
- [Vite 官方文档](https://vitejs.dev/)

---

## 📞 联系方式

- **项目负责人**: UKIOT
- **技术支持**: `UKIOT.group`

---

## 🎉 致谢

感谢所有为本项目做出贡献的开发者！

---

**最后更新**: 2024年10月31日  
**项目版本**: v1.2.0  
**文档版本**: v1.0.0