# UKyBlock

**Repository Path**: openwcs/uky-block

## Basic Information

- **Project Name**: UKyBlock
- **Description**: 机器人控制流程可视化流程控制系统，专为企业自动化设备控制而设计。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-09-25
- **Last Updated**: 2025-10-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# UKy机器人自动流程控制系统

基于Vue3 + TypeScript + Blockly构建的可视化流程控制系统，专为企业自动化设备控制而设计。


![预览](images/preview.png)
![预览](images/预览.gif)

## 🚀 项目特性

- **可视化编程**: 基于Blockly的拖拽式编程界面，降低自动化编程门槛
- **设备控制**: 支持AGV、机器人、密集架、柜门等多种设备的智能控制
- **实时监控**: 实时显示设备状态、任务执行进度和系统性能
- **流程模板**: 内置丰富的流程模板库，支持自定义模板的创建和共享
- **代码生成**: 自动生成标准的控制命令串，支持导出和下发执行
- **数据分析**: 提供详细的执行统计和性能分析报告
- **导入导出**: 支持流程的保存、导入、导出功能
- **企业级UI**: 现代化的界面设计，响应式布局，适配各种屏幕尺寸

## 🛠 技术栈

- **前端框架**: Vue 3.4 + TypeScript
- **UI组件库**: Element Plus
- **可视化编程**: Blockly 10.4
- **状态管理**: Pinia
- **构建工具**: Vite 5.0
- **图表库**: 支持集成 ECharts 等图表库
- **文件处理**: FileSaver.js

## 📦 安装和运行

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0 或 yarn >= 1.22.0

### 安装依赖

```bash
npm install
# 或
yarn install
```

### 开发环境运行

```bash
npm run dev
# 或
yarn dev
```

项目将在 `http://localhost:3000` 启动

### 生产环境构建

```bash
npm run build
# 或
yarn build
```

### 类型检查

```bash
npm run type-check
# 或
yarn type-check
```

## 🎯 功能模块

### 1. 流程编辑器

- **可视化编程**: 拖拽式块编程界面
- **丰富的控制块**: 
  - 系统控制：任务循环、列循环、站点切换
  - AGV控制：导航、移动、地图切换、重定位
  - 机器人控制：机械臂运动、夹爪控制、相机操作
  - IRACK控制：密集架开关、等待操作
  - 柜门控制：开关门、状态等待
  - 逻辑控制：条件判断、循环、变量操作
- **代码生成**: 实时生成JSON格式的控制命令
- **项目管理**: 保存、加载、导入、导出流程项目

### 2. 设备控制面板

- **实时状态监控**: 
  - 机器人工作状态
  - 各子系统状态（AGV、机械臂、摄像头等）
  - 电池电量和充电状态
  - 位置信息和任务进度
- **远程控制**:
  - 系统控制（复位、挂起、取消）
  - 自定义命令下发
  - 任务管理和配置
- **实时图像**: 机器人视角的实时图像显示
- **充电管理**: 充电状态监控和控制

### 3. 流程模板管理

- **模板分类**: 按设备类型和应用场景分类
- **模板库**: 内置常用的流程模板
- **自定义模板**: 创建、编辑、删除自定义模板
- **模板共享**: 导入、导出模板文件
- **使用统计**: 模板使用次数和热度统计

### 4. 数据分析

- **执行统计**: 任务总数、成功率、平均执行时间
- **趋势分析**: 任务执行趋势图表
- **设备利用率**: 各设备的使用情况分析
- **错误分析**: 错误类型统计和分析
- **性能监控**: 系统性能指标监控
- **执行记录**: 详细的任务执行日志

## 🔧 配置说明

### API配置

在系统设置中配置机器人设备的API地址：

```
默认地址: http://192.168.1.100:8080
超时时间: 5000ms
```

### 开发模式

开发环境下自动启用Mock API，模拟真实的设备响应。可通过以下方式切换：

```typescript
// 在浏览器控制台执行
localStorage.setItem('use-mock-api', 'true')  // 启用Mock API
localStorage.setItem('use-mock-api', 'false') // 禁用Mock API
```

## 📚 API接口说明

### 控制接口

#### 发送控制命令
```
POST /api/control
Content-Type: application/json

{
  "cmd": "reset|cancel|suspend|remote",
  "value": null|0|1|{...}
}
```

#### 查询设备状态
```
POST /api/query_state
Content-Type: application/json

{
  "is_snap": 0|1  // 是否返回图像
}
```

#### 下发任务
```
POST /api/send_task
Content-Type: application/json

{
  "current_time": "Wed Sep  6 21:04:36 2023\n",
  "task_sn": "123456789",
  "task_num": 2,
  "task_dir": "off|into|both",
  "task_list": [...]
}
```

### 响应格式

所有接口返回统一格式：
```json
{
  "result": 0  // 0-成功 其他-失败
}
```

状态查询返回详细的设备状态信息，包括：
- 机器人状态
- 各子系统状态
- 位置信息
- 电量信息
- 当前动作
- 充电状态

## 🎨 自定义开发

### 添加新的控制块

1. 在 `src/utils/blockly-blocks.ts` 中定义新的块：

```typescript
Blockly.Blocks['custom_block'] = {
  init: function() {
    this.appendDummyInput()
        .appendField("自定义块");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour('#ff6b6b');
    this.setTooltip("这是一个自定义控制块");
  }
};
```

2. 在 `src/utils/blockly-generators.ts` 中添加代码生成器：

```typescript
ukCodeGenerator.forBlock['custom_block'] = function(block: Blockly.Block, generator: Blockly.Generator) {
  const actionData: UKActionData = {
    type: 'custom_action' as any,
    param: {},
    comment: '自定义动作'
  }
  return JSON.stringify(actionData) + '\n'
}
```

3. 在 `src/utils/blockly-config.ts` 的工具箱中添加新块。

### 扩展设备类型

1. 在 `src/types/uk-action.types.ts` 中添加新的动作类型和参数接口
2. 更新相关的控制块和代码生成器
3. 在设备控制面板中添加新设备的状态显示和控制功能

## 🔍 故障排除

### 常见问题

1. **设备连接失败**
   - 检查API地址配置是否正确
   - 确认设备网络连通性
   - 查看浏览器控制台错误信息

2. **代码生成失败**
   - 检查控制块是否正确配置参数
   - 确认所有必需的输入框都已填写
   - 查看控制台是否有JavaScript错误

3. **模板导入失败**
   - 确认JSON格式正确
   - 检查模板版本兼容性
   - 验证模板数据完整性

4. **图表显示异常**
   - 确认图表容器尺寸正确
   - 检查数据格式是否符合要求
   - 查看是否有图表库加载错误

### 调试模式

开启浏览器开发者工具，在控制台中可以看到：
- API请求和响应日志
- Blockly工作区事件
- 状态更新信息
- 错误堆栈信息

## 📄 许可证

本项目基于 MIT 许可证开源。

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进项目。

### 开发流程

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

### 代码规范

- 使用 TypeScript 进行类型检查
- 遵循 Vue 3 Composition API 规范
- 使用 ESLint 和 Prettier 进行代码格式化
- 添加适当的注释和文档

## 📞 联系支持

UKIOT.group
---

如有问题或建议，请通过以下方式联系：

- 发送邮件至项目维护者

---

**UKy机器人流程控制系统** - 让自动化编程更简单、更高效！