n8n_Demo/web_frontend/web_result/README.md

# 订单班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. 安装依赖
```bash
npm install
```

### 2. 启动服务器
```bash
./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` 文件中管理：

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

## 🎯 开发新订单班流程

1. **创建文件夹结构**
```bash
mkdir -p order-classes/新订单班/{css,js,data}
```

2. **复制模板文件**（可选）
```bash
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`