Agent-n8n/web_frontend/web_result

订单班AI生成方案展示系统

📁 项目结构

web_result/
├── order-classes/          # 12个订单班独立文件夹
│   ├── wenlu/             # 文旅订单班（已完成）
│   │   ├── index.html     # 主页
│   │   ├── overview.html  # 项目概览
│   │   ├── exhibition.html# 展会设计
│   │   ├── marketing.html # 市场营销
│   │   ├── operation.html # 运营管理
│   │   ├── budget.html    # 财务预算
│   │   ├── risk.html      # 风险控制
│   │   ├── css/           # 专属CSS文件
│   │   ├── js/            # 专属JS文件
│   │   └── data/          # 专属数据资源
│   │
│   ├── food/              # 食品订单班（已完成）
│   │   ├── index.html     # 轻食店铺经营方案
│   │   ├── css/           # 专属CSS文件
│   │   ├── js/            # 专属JS文件
│   │   └── data/          # 专属数据资源
│   │
│   ├── caijing/           # 财经商贸订单班（待开发）
│   ├── jiankang/          # 大健康订单班（待开发）
│   ├── huagong/           # 化工订单班（待开发）
│   ├── huanbao/           # 环保订单班（待开发）
│   ├── jiaotong/          # 交通物流订单班（待开发）
│   ├── nengyuan/          # 能源订单班（终端模拟已完成，网页待开发）
│   ├── shijue/            # 视觉设计订单班（待开发）
│   ├── tumu/              # 土木订单班（待开发）
│   ├── zhineng-dev/       # 智能开发订单班（待开发）
│   └── zhineng-mfg/       # 智能制造订单班（待开发）
│
├── app.js                 # Node.js Express服务器
├── routes.yaml            # 路由配置文件
├── package.json           # 项目依赖配置
├── start-router.sh        # 启动脚本
└── README.md              # 项目说明文档

🚀 快速启动

1. 安装依赖

npm install

2. 启动服务器

./start-router.sh
# 或
node app.js

3. 访问地址（端口4155）

• 首页：http://localhost:4155/
• 文旅订单班：http://localhost:4155/order-class/wenlu
• 食品订单班：http://localhost:4155/order-class/food

注：能源订单班终端模拟已完成，可在展示系统中查看Agent协作流程

📝 文件管理原则

重要原则

每个订单班的所有资源必须完全独立存放在其专属文件夹内

1. HTML文件：所有页面文件放在订单班根目录
2. CSS文件：所有样式文件放在 订单班/css/ 目录
3. JS文件：所有脚本文件放在 订单班/js/ 目录
4. 数据资源：所有数据、图片等放在 订单班/data/ 目录

示例结构

order-classes/wenlu/
├── index.html         # 主页
├── [其他页面].html    # 子页面
├── css/
│   ├── styles.css     # 主样式
│   └── animations.css # 动画样式
├── js/
│   ├── main.js        # 主脚本
│   └── [其他脚本].js  # 功能脚本
└── data/
    └── 会展策划/      # 数据资源
        └── image/     # 图片资源

🔧 路由配置

路由配置在 routes.yaml 文件中管理：

order_classes:
  wenlu:
    name: "文旅订单班"
    title: "2024长三角国际新能源汽车与智能交通产业博览会"
    path: "/order-classes/wenlu/"
    entry: "index.html"
    status: "completed"  # completed | pending
    agents: [...]

🎯 开发新订单班流程

1. 创建文件夹结构

mkdir -p order-classes/新订单班/{css,js,data}

2. 复制模板文件（可选）

cp -r order-classes/wenlu/* order-classes/新订单班/

3. 开发页面内容

• 创建 index.html 主页
• 添加所需的子页面
• 编写专属的CSS和JS

4. 更新路由配置 在 routes.yaml 中添加新订单班配置，并将 status 改为 "completed"

5. 测试访问 重启服务器后访问：http://localhost:4155/order-class/新订单班

⚠️ 注意事项

1. 端口必须是 4155（硬性要求）
2. 每个订单班完全独立，不共享资源
3. 所有路径使用相对路径
4. 保持文件结构整洁规范
5. 开发完成后更新 routes.yaml 的状态

📊 当前进度

网页展示进度

• ✅ 文旅订单班（100%完成）
• ✅ 食品订单班（100%完成）
• ⏳ 其他10个订单班（待开发）

终端模拟进度

• ✅ 文旅订单班（终端模拟已完成）
• ✅ 食品订单班（终端模拟已完成）
• ✅ 视觉设计订单班（终端模拟已完成）
• ✅ 土木订单班（终端模拟已完成）
• ✅ 大健康订单班（终端模拟已完成）
• ✅ 能源订单班（终端模拟已完成）← 最新完成
• ⏳ 其他6个订单班（终端模拟待开发）

🛠️ 技术栈

• Node.js + Express
• YAML配置管理
• Tailwind CSS
• 原生JavaScript
• Font Awesome图标

🖥️ 终端模拟系统

系统位置

终端模拟系统位于：web_frontend/exhibition-demo/src/data/terminalSimulations/

已完成的终端模拟

1. 文旅订单班 (wenlu.ts) - 2024长三角新能源汽车博览会
2. 食品订单班 (food.ts) - 青莳轻食店铺经营方案
3. 视觉设计订单班 (visualDesign.ts) - 非遗文化纪录片AIGC制作
4. 土木订单班 (civilEngineering.ts) - 物流输送线节拍优化PLC与机器人联调
5. 大健康订单班 (health.ts) - 心理咨询服务全流程方案
6. 能源订单班 (energy.ts) - 光伏晶硅电池片AOI检测与分拣单元 ← 最新完成

能源订单班特点

• 项目主题：光伏晶硅电池片印后AOI检测与分拣单元
• 核心技术：PLC控制 + 机器视觉深度学习 + 六轴机器人分拣 + 质量追溯
• Agent配置：4个工业自动化专家
  • ⚙️ PLC工程师（Siemens S7-1500控制系统设计）
  • 📷 机器视觉识别工程师（Cognex D900深度学习AOI检测）
  • 🔍 机器视觉识别技术员（系统调试与性能验收）
  • 🤖 机器人调试工程师（ABB IRB 1200智能分拣）
• 技术指标：节拍≥3600片/h，漏检≤0.3%，误检≤0.5%
• 创新亮点：
  • 深度学习缺陷分类（7类缺陷识别）
  • Ping-Pong双工位（提升30%产能）
  • 降级运行模式（相机异常时保证产线不停机）
  • 全程质量追溯（OPC UA实时上报MES）

终端模拟使用方法

在展示系统中选择对应订单班，即可查看完整的Agent协作流程动画演示。

📞 问题反馈

如有问题，请检查：

1. 端口是否为4155
2. 文件路径是否正确
3. routes.yaml配置是否正确
4. 依赖是否已安装
5. 终端模拟文件是否已正确导入到 index.ts