# PLC梯形图设计及仿真软件 **Repository Path**: dfzp7777/plc ## Basic Information - **Project Name**: PLC梯形图设计及仿真软件 - **Description**: PLC编译器及梯形图设计 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 3 - **Created**: 2026-04-12 - **Last Updated**: 2026-04-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # PLC Integrated Development System 一个完整的 PLC 梯形图编程系统，包含前端编辑器、后端服务和原生 C++ 编译器。 ## 📋 目录 - [项目概述](#项目概述) - [系统架构](#系统架构) - [功能特性](#功能特性) - [技术栈](#技术栈) - [快速开始](#快速开始) - [使用说明](#使用说明) - [文档](#文档) ## 项目概述 PLC Integrated 是一个现代化的 PLC 编程开发环境，提供： - 🎨 **图形化编辑器**：直观的点击式梯形图编辑界面 - 📝 **列表编辑器**：详细的节点和连接管理 - ⚡ **实时编译**：C++ 原生编译器生成高效代码 - 🔐 **用户管理**：JWT 认证和权限控制 - 💾 **数据持久化**：MySQL 数据库存储 ## 系统架构 ``` ┌─────────────────┐ │ Frontend │ Vue 3 + TypeScript + SVG │ (图形编辑器) │ └────────┬────────┘ │ REST API ↓ ┌─────────────────┐ │ Backend │ Spring Boot + Java 17 │ (业务逻辑层) │ └────────┬────────┘ │ JNI ↓ ┌─────────────────┐ │ Native C++ │ C++20 编译器 │ (编译器) │ └─────────────────┘ ``` ### 三层架构 1. **前端层 (Frontend)** - 图形化梯形图编辑器 - 列表式节点编辑器 - 实时数据可视化 - 用户界面和交互 2. **服务层 (Backend)** - REST API 端点 - 用户认证和授权 - 数据持久化 - 业务逻辑处理 3. **编译层 (Native C++)** - 梯形图编译器 - IL 指令生成 - 运行时优化 - 代码生成 ## 功能特性 ### 🎨 图形化编辑器 (新) - **可视化界面**：SVG 图形化显示梯形图元件 - **点击放置**：选择工具 → 点击画布 → 自动创建节点 - **自动连接**：新元件自动连接到前一个元件 - **实时预览**：所见即所得的编辑体验 - **属性面板**：快速编辑节点属性 - **符号管理**：自动维护变量符号表 #### 支持的元件类型 | 元件 | 类型 | 可视化 | |------|------|--------| | 触点 (Contact) | NO/NC/P/N | 蓝色竖线 | | 线圈 (Coil) | Normal/Set/Reset | 绿色圆圈 | | 定时器 (Timer) | TON/TOF/TP | 蓝色矩形 | | 常量 (Const) | Int/Float | 紫色矩形 | | 汇合 (Merge) | AND/OR | 粉色框 | ### 📝 列表编辑器 - 表格形式显示所有节点和连接 - 手动管理节点属性 - 详细的调试信息 - JSON 导入导出 ### ⚡ C++ 编译器 - 高性能 IL 指令编译 - 图优化算法 - 多种数据类型支持 - 错误检测和报告 ## 技术栈 ### Frontend | 技术 | 版本 | 用途 | |------|------|------| | Vue 3 | 3.4+ | 响应式框架 | | TypeScript | 5.6+ | 类型安全 | | Vite | 5.4+ | 构建工具 | | Element Plus | 2.8+ | UI 组件库 | | Pinia | 2.2+ | 状态管理 | | Axios | 1.7+ | HTTP 客户端 | ### Backend | 技术 | 版本 | 用途 | |------|------|------| | Spring Boot | 3.5.6 | 应用框架 | | Java | 17+ | 编程语言 | | MySQL | 8.0+ | 数据库 | | JWT | 0.12.6 | 认证 | | Maven | 3.8+ | 构建工具 | ### Native C++ | 技术 | 版本 | 用途 | |------|------|------| | C++ | C++20 | 编程语言 | | CMake | 3.28+ | 构建系统 | | nlohmann/json | 3.11+ | JSON 解析 | ## 快速开始 ### 前置要求 - Node.js 18+ - Java 17+ - MySQL 8.0+ - CMake 3.28+ - C++20 编译器 (GCC/MSVC) ### 安装步骤 #### 1. 克隆仓库 ```bash git clone cd plc_integrated ``` #### 2. 启动后端 ```bash cd backend # 配置数据库 # 编辑 src/main/resources/application.properties # spring.datasource.url=jdbc:mysql://localhost:3306/plc_db # spring.datasource.username=your_username # spring.datasource.password=your_password # 构建并运行 ./mvnw clean install ./mvnw spring-boot:run ``` 后端将在 `http://localhost:8080` 启动 #### 3. 编译 C++ 编译器 ```bash cd backend/native mkdir build && cd build # Linux/Mac cmake -DCMAKE_BUILD_TYPE=Release .. make # Windows cmake -DCMAKE_BUILD_TYPE=Release .. cmake --build . --config Release ``` 编译器位于 `build/bin/LC` #### 4. 启动前端 ```bash cd frontend # 安装依赖 npm install # 开发模式 npm run dev # 生产构建 npm run build ``` 前端将在 `http://localhost:5173` 启动 ### 验证安装 1. 访问 `http://localhost:5173` 2. 注册新用户或使用测试账号登录 3. 创建新项目 4. 使用图形编辑器添加元件 5. 保存并编译 ## 使用说明 ### 创建第一个梯形图程序 #### 方法 1：图形编辑器（推荐） 1. **添加 Rung** - 点击顶部"添加 Rung"按钮 - 输入 Rung 名称（如 "MotorControl"） 2. **添加触点** - 选择工具栏中的"触点"工具 - 在画布左侧点击 - 输入标签名称（如 "I0.0"） - 选择类型（常开 NO） 3. **添加线圈** - 选择工具栏中的"线圈"工具 - 在触点右侧点击 - 输入标签名称（如 "Q0.0"） - 自动创建连接！ 4. **保存和编译** - 点击"保存梯形图" - 点击"编译程序" - 查看编译结果 #### 方法 2：列表编辑器 1. 切换到"列表编辑器"模式 2. 点击"添加节点" 3. 手动设置节点属性 4. 点击"添加连接" 5. 管理边的连接关系 ### 示例：电机自保持电路 **目标**：按下启动按钮，电机运行；松开按钮，电机继续运行；按下停止按钮，电机停止。 **梯形图**： ``` I0.0 (启动) Q0.0 (自保持) I0.1 (停止) Q0.0 (电机) ──┤├────────────┤├──────────────┤/├────────────( )── ``` **使用图形编辑器创建**： 1. 添加 Rung "MotorControl" 2. 点击"触点"工具，添加 I0.0 (常开) 3. 继续添加触点 Q0.0 (常开) - 自动连接 4. 添加触点 I0.1 (常闭) - 自动连接 5. 点击"线圈"工具，添加 Q0.0 - 自动连接 6. 完成！ **生成的数据**： ```json { "rungs": [{ "id": 1, "name": "MotorControl", "nodes": [ { "id": 1, "kind": 0, "payload": { "label": "I0.0", "mode": 0 } }, { "id": 2, "kind": 0, "payload": { "label": "Q0.0", "mode": 0 } }, { "id": 3, "kind": 0, "payload": { "label": "I0.1", "mode": 1 } }, { "id": 4, "kind": 1, "payload": { "label": "Q0.0", "mode": 0 } } ], "edges": [ { "src": 1, "src_pin": 0, "dst": 2, "dst_pin": 0 }, { "src": 2, "src_pin": 0, "dst": 3, "dst_pin": 0 }, { "src": 3, "src_pin": 0, "dst": 4, "dst_pin": 0 } ] }] } ``` ### 数据格式 项目使用节点-边图结构，完全兼容 C++ 编译器的 test.json 格式。 #### 核心概念 - **Node（节点）**：梯形图元件（触点、线圈、定时器等） - **Edge（边）**：节点之间的连接 - **Pin（引脚）**：节点的输入/输出端口 - **Symbol（符号）**：变量定义（I/O、内存等） #### 示例数据 详见：[数据格式文档](frontend/docs/DATA_FORMAT.md) ### API 端点 #### 认证 ```http POST /api/auth/register POST /api/auth/login ``` #### 梯形图 ```http GET /api/ladder/{id} POST /api/ladder PUT /api/ladder/{id} DELETE /api/ladder/{id} ``` #### 编译 ```http POST /api/compile ``` 请求体： ```json { "id": 1, "name": "Program", "symbols": {...}, "task": {...}, "rungs": [...] } ``` 响应： ```json { "success": true, "message": "Compilation successful", "output": "..." } ``` ## 文档 ### 用户文档 - 📘 [图形编辑器使用指南](frontend/docs/VISUAL_EDITOR_GUIDE.md) - 图形编辑器详细教程 - 📗 [数据格式说明](frontend/docs/DATA_FORMAT.md) - 数据结构和格式 - 📙 [API 文档](frontend/docs/API.md) - REST API 参考 ### 开发文档 - 🔧 [前端更新说明](frontend/VISUAL_EDITOR_UPDATE.md) - 最新功能说明 - 🔨 [修改记录](frontend/CHANGES.md) - 代码修改历史 - 📐 [架构设计](backend/native/Arch.puml) - 系统架构图 - 🔍 [编译流程](backend/native/CompileSeq.puml) - 编译序列图 ### C++ 编译器 - 📜 [编译提示](backend/native/COMPILE_TIP.MD) - 🚀 [运行提示](backend/native/RUNTIME_TIP.MD) - ❌ [错误处理](backend/native/ERROR_HANDLING.MD) - 📊 [IR 描述](backend/native/Headers/IRDescription.md) ## 项目结构 ``` plc_integrated/ ├── frontend/ # Vue 3 前端 │ ├── src/ │ │ ├── components/ │ │ │ └── ladder/ │ │ │ ├── VisualLadderEditor.vue # 图形编辑器 ⭐ │ │ │ └── LadderEditor.vue # 列表编辑器 │ │ ├── views/ │ │ │ └── Home.vue # 主界面 │ │ ├── store/ │ │ │ └── ladder.ts # Pinia 状态管理 │ │ ├── types/ │ │ │ └── index.ts # TypeScript 类型定义 │ │ └── utils/ │ │ └── ladderBuilder.ts # 工具函数 │ ├── docs/ │ │ ├── VISUAL_EDITOR_GUIDE.md # 使用指南 ⭐ │ │ └── DATA_FORMAT.md # 数据格式 │ └── VISUAL_EDITOR_UPDATE.md # 更新说明 ⭐ │ ├── backend/ # Spring Boot 后端 │ ├── src/main/java/ │ │ └── org/eai/plc_integrated/ │ │ ├── controller/ │ │ ├── service/ │ │ ├── model/ │ │ └── config/ │ ├── native/ # C++ 编译器 │ │ ├── Compiler/ # 编译器实现 │ │ ├── core/ # 核心功能 │ │ ├── Graph/ # 图算法 │ │ └── CMakeLists.txt │ └── pom.xml │ └── README.md # 本文件 ``` ## 开发路线图 ### ✅ 已完成 - [x] 图形化编辑器 - [x] 自动连接功能 - [x] 拓扑排序布局 - [x] 列表编辑器 - [x] 数据格式兼容 - [x] 编辑器模式切换 - [x] 完整文档 ### 🚧 进行中 - [ ] 后端 API 实现 - [ ] 节点拖拽功能 - [ ] 并联电路可视化 ### 📝 计划中 - [ ] 撤销/重做 - [ ] 更多节点类型 - [ ] Counter（计数器） - [ ] Compare（比较） - [ ] Math（运算） - [ ] 复制/粘贴 - [ ] 批量操作 - [ ] 键盘快捷键 - [ ] 导出图片 ## 常见问题 ### Q: 如何切换编辑器模式？ A: 在主界面顶部工具栏，使用"图形编辑器 / 列表编辑器"切换按钮。 ### Q: 节点自动连接的规则是什么？ A: 新添加的节点会自动连接到前一个节点的输出端口。连接规则： - 触点.OUT → 触点.IN - 触点.OUT → 线圈.IN - 触点.OUT → 定时器.IN ### Q: 如何创建并联电路？ A: 目前主要支持串联。并联需要： 1. 切换到列表编辑器 2. 手动添加 Merge 节点 3. 配置输入/输出连接 或等待后续版本的可视化并联编辑功能。 ### Q: 生成的数据格式是什么？ A: 完全兼容 C++ 编译器的 test.json 格式，使用节点-边图结构。详见 [DATA_FORMAT.md](frontend/docs/DATA_FORMAT.md)。 ### Q: 如何调试编译错误？ A: 1. 检查编译器输出日志 2. 验证 JSON 格式是否正确 3. 使用列表编辑器查看详细的节点和连接信息 4. 参考 [ERROR_HANDLING.MD](backend/native/ERROR_HANDLING.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 ## 许可证 [待添加] ## 联系方式 [待添加] ## 致谢 - Vue.js 团队 - Spring Boot 团队 - Element Plus 团队 - nlohmann/json 作者 --- **更新日期**: 2024 **版本**: 1.0.0 (图形编辑器版本) ⭐ 新功能！查看 [图形编辑器指南](frontend/docs/VISUAL_EDITOR_GUIDE.md) 了解最新的可视化编辑功能！