feat: 完成能源订单班光伏AOI检测展示页面
详细说明: - 创建光伏晶硅电池片印后AOI检测与分拣单元展示页面 - 橙黄色太阳能主题设计(#f59e0b主色橙, #d97706琥珀色强调) - 4个核心模块: * 自动化控制工程师 - 项目概述与设备选型 * PLC工程师 - PLC控制逻辑与I/O配置(14输入/13输出) * 机器人调试工程师 - 机器人编程与分拣逻辑(RAPID, ≤0.8秒节拍) * 机器视觉识别工程师 - 视觉标定与性能验证(ViDi深度学习, 7类缺陷) - 技术栈: 西门子S7-1500 PLC + ABB IRB 1200六轴机器人 + 康耐视In-Sight D900视觉系统 - 性能指标: ≥3600片/时产能, 99.7%检出率, ≤0.3%漏检率, ≤300ms检测时间 - 检测缺陷类型: 断栅/漏印/拖浆/脏污/划伤/崩边/色差 - 完成化工订单班图片处理记录归档 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yep_Q
@@ -102,7 +102,12 @@
|
|||||||
"Bash(do echo \"=== $file ===\")",
|
"Bash(do echo \"=== $file ===\")",
|
||||||
"Bash(open http://localhost:3000/order-classes/food/)",
|
"Bash(open http://localhost:3000/order-classes/food/)",
|
||||||
"Bash(test:*)",
|
"Bash(test:*)",
|
||||||
"Bash(readlink:*)"
|
"Bash(readlink:*)",
|
||||||
|
"Bash(wc:*)",
|
||||||
|
"Bash(if [ -f \"/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/web_result/order-classes/chemical/images/$img\" ])",
|
||||||
|
"Bash(then)",
|
||||||
|
"Bash(else)",
|
||||||
|
"Bash(xxd:*)"
|
||||||
],
|
],
|
||||||
"deny": [],
|
"deny": [],
|
||||||
"ask": [],
|
"ask": [],
|
||||||
|
|||||||
@@ -1,39 +1,40 @@
|
|||||||
# 项目完成度统计 (2025-10-03)
|
# 项目完成度统计 (2025-10-04)
|
||||||
|
|
||||||
## 📊 总体完成情况
|
## 📊 总体完成情况
|
||||||
|
|
||||||
### 终端模拟 (exhibition-demo)
|
### 终端模拟 (exhibition-demo)
|
||||||
- **总计划**: 12个订单班
|
- **总计划**: 12个订单班
|
||||||
- **已完成**: 10个 (其中视觉设计缺少agent数据)
|
- **已完成**: 12个 ✅
|
||||||
- **完成率**: 83.3%
|
- **完成率**: 100% 🎉
|
||||||
- **待完成**: 化工、环保
|
- **待完成**: 0个
|
||||||
|
|
||||||
### 展示页面 (web_result)
|
### 展示页面 (web_result)
|
||||||
- **总计划**: 12个订单班页面
|
- **总计划**: 12个订单班页面
|
||||||
- **已完成**: 2个 (文旅、食品)
|
- **已完成**: 3个 (文旅、食品、财经商贸)
|
||||||
- **完成率**: 16.7%
|
- **完成率**: 25%
|
||||||
- **待完成**: 10个
|
- **待完成**: 9个
|
||||||
|
|
||||||
|
### 图片标准化处理
|
||||||
|
- **总计划**: 12个订单班
|
||||||
|
- **已完成**: 3个 (财经商贸、环保、化工) ✅
|
||||||
|
- **完成率**: 25%
|
||||||
|
- **待完成**: 9个
|
||||||
|
|
||||||
## 🎯 详细清单
|
## 🎯 详细清单
|
||||||
|
|
||||||
### ✅ 完全完成的订单班（9个）
|
### ✅ 完全完成的订单班（终端模拟+agent数据）(12个)
|
||||||
终端模拟和agent数据都完整：
|
1. **文旅** (wenlu) - 终端模拟✅ + agent数据✅ + 展示页面✅
|
||||||
1. **文旅** (wenlu) - 终端模拟✅ + 展示页面✅
|
2. **食品** (food) - 终端模拟✅ + agent数据✅ + 展示页面✅
|
||||||
2. **食品** (food) - 终端模拟✅ + 展示页面✅
|
3. **财经商贸** (finance) - 终端模拟✅ + agent数据✅ + 展示页面✅ + 图片标准化✅
|
||||||
3. **财经商贸** (finance) - 终端模拟✅ + 展示页面❌
|
4. **交通物流** (transportation) - 终端模拟✅ + agent数据✅ + 展示页面❌
|
||||||
4. **交通物流** (logistics/transportation) - 终端模拟✅ + 展示页面❌
|
5. **智能制造** (intelligentManufacturing) - 终端模拟✅ + agent数据✅ + 展示页面❌
|
||||||
5. **智能制造** (manufacturing/intelligentManufacturing) - 终端模拟✅ + 展示页面❌
|
6. **智能开发** (developer) - 终端模拟✅ + agent数据✅ + 展示页面❌
|
||||||
6. **智能开发** (dev/developer) - 终端模拟✅ + 展示页面❌
|
7. **土木水利** (civilEngineering) - 终端模拟✅ + agent数据✅ + 展示页面❌
|
||||||
7. **土木水利** (civil/civilEngineering) - 终端模拟✅ + 展示页面❌
|
8. **能源** (energy) - 终端模拟✅ + agent数据✅ + 展示页面❌
|
||||||
8. **能源** (energy) - 终端模拟✅ + 展示页面❌
|
9. **大健康** (health) - 终端模拟✅ + agent数据✅ + 展示页面❌
|
||||||
9. **大健康** (health) - 终端模拟✅ + 展示页面❌
|
10. **视觉设计** (visualDesign) - 终端模拟✅ + agent数据✅ + 展示页面❌
|
||||||
|
11. **化工** (chemical) - 终端模拟✅ + agent数据✅ + 展示页面❌ + 图片标准化✅
|
||||||
### ⚠️ 部分完成的订单班（1个）
|
12. **环保** (environmental) - 终端模拟✅ + agent数据✅ + 展示页面❌ + 图片标准化✅
|
||||||
10. **视觉设计** (design/visualDesign) - 终端模拟✅ + agent数据❌ + 展示页面❌
|
|
||||||
|
|
||||||
### ❌ 未开始的订单班（2个）
|
|
||||||
11. **化工** (chemical) - 终端模拟❌ + agent数据❌ + 展示页面❌
|
|
||||||
12. **环保** (environment) - 终端模拟❌ + agent数据❌ + 展示页面❌
|
|
||||||
|
|
||||||
## 📁 文件存在性验证
|
## 📁 文件存在性验证
|
||||||
|
|
||||||
@@ -49,53 +50,107 @@
|
|||||||
✅ energy.ts
|
✅ energy.ts
|
||||||
✅ health.ts
|
✅ health.ts
|
||||||
✅ visualDesign.ts
|
✅ visualDesign.ts
|
||||||
❌ chemical.ts (不存在)
|
✅ chemical.ts (2025-10-04新增)
|
||||||
❌ environment.ts (不存在)
|
✅ environmental.ts (2025-10-04新增)
|
||||||
```
|
```
|
||||||
|
|
||||||
### web_result 展示页面目录
|
### web_result 展示页面目录
|
||||||
```
|
```
|
||||||
✅ /order-classes/wenlu/
|
✅ /order-classes/wenlu/
|
||||||
✅ /order-classes/food/
|
✅ /order-classes/food/
|
||||||
❌ 其他10个订单班目录未创建
|
✅ /order-classes/finance/ (2025-10-04新增)
|
||||||
|
❌ 其他9个订单班目录未创建
|
||||||
|
```
|
||||||
|
|
||||||
|
### 图片标准化处理记录
|
||||||
|
```
|
||||||
|
✅ 财经商贸 - 21个图片重命名完成 (2025-10-03)
|
||||||
|
✅ 环保 - 26个图片重命名完成 (2025-10-03)
|
||||||
|
✅ 化工 - 8个图片已标准化，无需重命名 (2025-10-04)
|
||||||
|
❌ 其他9个订单班待处理
|
||||||
```
|
```
|
||||||
|
|
||||||
### routes.yaml 配置状态
|
### routes.yaml 配置状态
|
||||||
- wenlu: completed ✅
|
- wenlu: completed ✅
|
||||||
- food: completed ✅
|
- food: completed ✅
|
||||||
- 其他10个: pending ⏳
|
- finance: completed ✅ (2025-10-04更新)
|
||||||
|
- 其他9个: pending ⏳
|
||||||
|
|
||||||
## 🔄 需要更新的记忆
|
## 🎉 最新更新 (2025-10-04)
|
||||||
|
|
||||||
1. **03_订单班配置清单.md**
|
### 新增功能
|
||||||
- 当前显示已完成9个，实际完全完成9个（正确）
|
1. ✅ 完成化工订单班终端模拟 (chemical.ts)
|
||||||
- 但需要明确说明视觉设计缺少agent数据
|
2. ✅ 完成环保订单班终端模拟 (environmental.ts)
|
||||||
- 化工和环保确实未开始
|
3. ✅ 完成财经商贸展示页面 (/order-classes/finance/)
|
||||||
|
4. ✅ 完成化工订单班图片标准化检查（8个图片，已全部符合标准）
|
||||||
|
|
||||||
2. **07_web_result项目架构.md**
|
### 项目记忆重组
|
||||||
- 需要添加完成度统计
|
完成项目记忆文件的重新组织，采用00-09编号体系：
|
||||||
- 当前只有2个订单班有展示页面
|
- 00_记忆索引和使用指南.md
|
||||||
- 其余10个待开发
|
- 01_项目概述和架构.md
|
||||||
|
- 02_终端模拟开发指南.md
|
||||||
|
- 03_订单班配置清单.md
|
||||||
|
- 04_SuperDesign工作流.md
|
||||||
|
- 05_运行命令和部署.md
|
||||||
|
- 06_问题解决和优化.md
|
||||||
|
- 07_web_result项目架构和订单班展示系统.md
|
||||||
|
- 08_项目维护和更新原则.md
|
||||||
|
- 09_项目完成度统计_202510.md
|
||||||
|
|
||||||
|
### Git提交
|
||||||
|
- 提交ID: c579dae9
|
||||||
|
- 提交信息: "feat: 完成化工订单班图片处理和项目记忆重组"
|
||||||
|
- 变更统计: 172个文件，11104行新增，11323行删除
|
||||||
|
|
||||||
## 📋 下一步建议
|
## 📋 下一步建议
|
||||||
|
|
||||||
1. **优先级1**: 补充视觉设计的agent数据
|
### 优先级1: 完成剩余9个订单班的展示页面
|
||||||
2. **优先级2**: 完成化工和环保的终端模拟
|
按照以下顺序推进：
|
||||||
3. **优先级3**: 为已完成终端模拟的7个订单班创建web_result展示页面
|
1. 交通物流 (transportation)
|
||||||
4. **优先级4**: 完善routes.yaml配置，更新各订单班状态
|
2. 智能制造 (intelligentManufacturing)
|
||||||
|
3. 智能开发 (developer)
|
||||||
|
4. 土木水利 (civilEngineering)
|
||||||
|
5. 能源 (energy)
|
||||||
|
6. 大健康 (health)
|
||||||
|
7. 视觉设计 (visualDesign)
|
||||||
|
8. 化工 (chemical)
|
||||||
|
9. 环保 (environmental)
|
||||||
|
|
||||||
## 🏷️ 命名规范问题
|
### 优先级2: 完成剩余9个订单班的图片标准化
|
||||||
|
按照已有流程处理：
|
||||||
|
1. 分析markdown文档中的图片引用
|
||||||
|
2. 检查image文件夹中的图片文件
|
||||||
|
3. 创建重命名映射关系（如需要）
|
||||||
|
4. 执行重命名脚本
|
||||||
|
5. 更新markdown文档引用
|
||||||
|
6. 验证处理结果
|
||||||
|
|
||||||
注意文件命名不一致：
|
### 优先级3: 更新routes.yaml配置
|
||||||
- 交通物流: logistics vs transportation
|
将已完成的订单班状态从pending更新为completed
|
||||||
- 智能制造: manufacturing vs intelligentManufacturing
|
|
||||||
- 智能开发: dev vs developer
|
|
||||||
- 土木水利: civil vs civilEngineering
|
|
||||||
- 视觉设计: design vs visualDesign
|
|
||||||
|
|
||||||
建议统一使用完整英文名称。
|
## 📈 进度里程碑
|
||||||
|
|
||||||
|
- ✅ **2025-10-03**: 完成能源订单班图片处理
|
||||||
|
- ✅ **2025-10-03**: 完成财经商贸和环保订单班图片处理
|
||||||
|
- ✅ **2025-10-04**: 完成化工和环保终端模拟
|
||||||
|
- ✅ **2025-10-04**: 完成财经商贸展示页面
|
||||||
|
- ✅ **2025-10-04**: 完成化工订单班图片标准化检查
|
||||||
|
- ✅ **2025-10-04**: 完成项目记忆重组
|
||||||
|
- ✅ **2025-10-04**: 终端模拟系统100%完成 🎉
|
||||||
|
|
||||||
|
## 🏷️ 命名规范说明
|
||||||
|
|
||||||
|
终端模拟文件使用完整英文名称（已统一）：
|
||||||
|
- ✅ transportation (交通物流)
|
||||||
|
- ✅ intelligentManufacturing (智能制造)
|
||||||
|
- ✅ developer (智能开发)
|
||||||
|
- ✅ civilEngineering (土木水利)
|
||||||
|
- ✅ visualDesign (视觉设计)
|
||||||
|
- ✅ chemical (化工)
|
||||||
|
- ✅ environmental (环保)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
**更新时间**: 2025-10-03
|
**更新时间**: 2025-10-04
|
||||||
**记录者**: Claude Code
|
**记录者**: Claude Code
|
||||||
|
**重要成就**: 🎉 终端模拟系统全部完成！(12/12)
|
||||||
65
.serena/memories/化工订单班图片处理完成记录_202510.md
Normal file
65
.serena/memories/化工订单班图片处理完成记录_202510.md
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
# 化工订单班图片处理完成记录 (2025-10-04)
|
||||||
|
|
||||||
|
## 任务内容
|
||||||
|
- 订单班：化工
|
||||||
|
- 文档：半导体ai综合检测项目 281d463fce518050869ac4e6fd58a861.md
|
||||||
|
- 任务：检查图片文件命名是否符合标准
|
||||||
|
|
||||||
|
## 处理结果
|
||||||
|
|
||||||
|
### 文件统计
|
||||||
|
- 图片总数：8个
|
||||||
|
- 重命名文件：0个（已全部标准化）
|
||||||
|
- 保持原名：8个（已是描述性中文名）
|
||||||
|
|
||||||
|
### 图片清单（已标准化）
|
||||||
|
|
||||||
|
#### 已符合标准的描述性中文名 (8个)
|
||||||
|
1. 检测背景主图.jpg
|
||||||
|
2. 硅晶圆检测项目.jpg
|
||||||
|
3. 光学镜头检测硅晶圆示意图.jpg
|
||||||
|
4. 外观热力图（颗粒划痕腐蚀）.jpg
|
||||||
|
5. 厚度分布图.jpg
|
||||||
|
6. 电学对比图.jpg
|
||||||
|
7. 成分抽检卡片.jpg
|
||||||
|
8. 检测结果主图.jpg
|
||||||
|
|
||||||
|
### Markdown文档引用检查
|
||||||
|
所有8个图片引用已经完全符合标准：
|
||||||
|
```markdown
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## 验证结果
|
||||||
|
✅ 所有图片文件名与alt text完全一致
|
||||||
|
✅ 所有图片引用格式正确
|
||||||
|
✅ 文档可正常渲染所有图片
|
||||||
|
✅ 无需进行任何重命名操作
|
||||||
|
|
||||||
|
## 特点说明
|
||||||
|
化工订单班的图片处理是最规范的，所有图片从一开始就使用了标准的描述性中文命名，展示了最佳实践：
|
||||||
|
- 使用专业术语：如"硅晶圆"、"光学镜头检测"
|
||||||
|
- 描述清晰：如"外观热力图（颗粒划痕腐蚀）"明确说明了热力图的具体内容
|
||||||
|
- 功能明确：如"检测背景主图"、"检测结果主图"清晰区分主图用途
|
||||||
|
|
||||||
|
## 对比其他订单班
|
||||||
|
- **财经商贸**：需要重命名21个（从hash名称、通用名称转换）
|
||||||
|
- **环保**：需要重命名22个（从hash名称、通用名称、Whisk系列转换）
|
||||||
|
- **化工**：0个需要重命名（已全部标准化）✨
|
||||||
|
|
||||||
|
## Git提交记录
|
||||||
|
提交ID: c579dae9
|
||||||
|
提交信息: "feat: 完成化工订单班图片处理和项目记忆重组"
|
||||||
|
提交时间: 2025-10-04
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**最后更新**：2025-10-04
|
||||||
|
**处理状态**：✅ 完成（无需操作）
|
||||||
1
web_frontend/web_result/order-classes/energy/agent-avatars
Symbolic link
1
web_frontend/web_result/order-classes/energy/agent-avatars
Symbolic link
@@ -0,0 +1 @@
|
|||||||
|
../../../../../data/订单班文档资料/能源/agent头像
|
||||||
961
web_frontend/web_result/order-classes/energy/css/styles.css
Normal file
961
web_frontend/web_result/order-classes/energy/css/styles.css
Normal file
@@ -0,0 +1,961 @@
|
|||||||
|
/* 光伏晶硅电池片印后AOI检测与分拣单元 - 能源订单班橙黄太阳能设计系统 */
|
||||||
|
|
||||||
|
/* ========== 设计变量 ========== */
|
||||||
|
:root {
|
||||||
|
/* 橙黄太阳能主题 - 能源风格 */
|
||||||
|
--bg-dark: #fffbeb; /* 浅黄背景 */
|
||||||
|
--bg-semi-dark: rgba(255, 251, 235, 0.95); /* 半透明浅黄 */
|
||||||
|
--bg-overlay: rgba(255, 255, 255, 0.85); /* 白色遮罩 */
|
||||||
|
--bg-card: rgba(255, 255, 255, 0.9); /* 卡片背景 */
|
||||||
|
--primary-dark: #78350f; /* 主色深橙 */
|
||||||
|
--primary-orange: #f59e0b; /* 主色橙 - 能源专业 */
|
||||||
|
--accent-amber: #d97706; /* 琥珀色强调 - 太阳能主题 */
|
||||||
|
--accent-amber-light: #fbbf24; /* 浅琥珀色 */
|
||||||
|
--text-light: #78350f; /* 深色文字 */
|
||||||
|
--text-gray: #6b7280; /* 灰色文字 */
|
||||||
|
--border-light: rgba(245, 158, 11, 0.2); /* 橙色边框 */
|
||||||
|
--hover-bg: rgba(245, 158, 11, 0.15); /* 悬停背景 */
|
||||||
|
--active-bg: rgba(245, 158, 11, 0.2); /* 激活背景 */
|
||||||
|
|
||||||
|
/* 间距系统 - 针对大屏幕优化 */
|
||||||
|
--spacing-xs: 0.75rem; /* 12px */
|
||||||
|
--spacing-sm: 1.25rem; /* 20px */
|
||||||
|
--spacing-md: 2rem; /* 32px */
|
||||||
|
--spacing-lg: 3rem; /* 48px */
|
||||||
|
--spacing-xl: 4rem; /* 64px */
|
||||||
|
--spacing-2xl: 6rem; /* 96px */
|
||||||
|
--spacing-3xl: 8rem; /* 128px */
|
||||||
|
|
||||||
|
/* 字体系统 */
|
||||||
|
--font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
--font-display: 'Inter', sans-serif;
|
||||||
|
|
||||||
|
/* 字体大小 - 针对大屏幕优化 */
|
||||||
|
--text-xs: 0.875rem; /* 14px */
|
||||||
|
--text-sm: 1rem; /* 16px */
|
||||||
|
--text-base: 1.125rem; /* 18px */
|
||||||
|
--text-lg: 1.375rem; /* 22px */
|
||||||
|
--text-xl: 1.625rem; /* 26px */
|
||||||
|
--text-2xl: 2rem; /* 32px */
|
||||||
|
--text-3xl: 2.5rem; /* 40px */
|
||||||
|
--text-4xl: 3rem; /* 48px */
|
||||||
|
--text-5xl: 4rem; /* 64px */
|
||||||
|
|
||||||
|
/* 字重 */
|
||||||
|
--font-light: 300;
|
||||||
|
--font-normal: 400;
|
||||||
|
--font-medium: 500;
|
||||||
|
--font-semibold: 600;
|
||||||
|
--font-bold: 700;
|
||||||
|
|
||||||
|
/* 圆角 */
|
||||||
|
--radius-sm: 0.375rem;
|
||||||
|
--radius-md: 0.5rem;
|
||||||
|
--radius-lg: 0.75rem;
|
||||||
|
--radius-xl: 1rem;
|
||||||
|
--radius-2xl: 1.5rem;
|
||||||
|
--radius-full: 9999px;
|
||||||
|
|
||||||
|
/* 阴影 - 轻盈专业主题 */
|
||||||
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
||||||
|
--shadow-md: 0 2px 4px rgba(0,0,0,0.08);
|
||||||
|
--shadow-lg: 0 4px 8px rgba(0,0,0,0.1);
|
||||||
|
--shadow-xl: 0 8px 16px rgba(0,0,0,0.12);
|
||||||
|
--shadow-orange: 0 2px 8px rgba(245, 158, 11, 0.15);
|
||||||
|
|
||||||
|
/* 过渡 */
|
||||||
|
--transition-fast: 150ms ease;
|
||||||
|
--transition-base: 250ms ease;
|
||||||
|
--transition-slow: 350ms ease;
|
||||||
|
|
||||||
|
/* 布局 */
|
||||||
|
--container-max: 1600px; /* 增加最大宽度适配1920屏幕 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 深色主题 - 深邃橙黄配色 ========== */
|
||||||
|
body.dark-theme {
|
||||||
|
--bg-dark: #78350f; /* 深邃橙黑背景 */
|
||||||
|
--bg-semi-dark: rgba(120, 53, 15, 0.95); /* 深橙半透明 */
|
||||||
|
--bg-overlay: rgba(217, 119, 6, 0.85); /* 深橙遮罩层 */
|
||||||
|
--bg-card: rgba(245, 158, 11, 0.9); /* 深橙卡片背景 */
|
||||||
|
--primary-dark: #78350f; /* 深邃橙黑 */
|
||||||
|
--primary-orange: #fbbf24; /* 明亮橙 */
|
||||||
|
--accent-amber: #fcd34d; /* 亮琥珀色 */
|
||||||
|
--accent-amber-light: #fde68a; /* 超亮琥珀色 */
|
||||||
|
--text-light: #fffbeb; /* 浅色文字 */
|
||||||
|
--text-gray: #fde68a; /* 灰色文字 */
|
||||||
|
--border-light: rgba(251, 191, 36, 0.25); /* 橙色边框 */
|
||||||
|
--hover-bg: rgba(245, 158, 11, 0.15); /* 悬停背景 */
|
||||||
|
--active-bg: rgba(251, 191, 36, 0.2); /* 激活背景 */
|
||||||
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
|
||||||
|
--shadow-md: 0 2px 4px rgba(0,0,0,0.5);
|
||||||
|
--shadow-lg: 0 4px 8px rgba(0,0,0,0.6);
|
||||||
|
--shadow-xl: 0 8px 16px rgba(0,0,0,0.7);
|
||||||
|
--shadow-orange: 0 2px 8px rgba(245, 158, 11, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 重置样式 ========== */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
font-size: var(--text-base);
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--text-light);
|
||||||
|
background-color: var(--bg-dark);
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== Hero 区域 - 全屏图片背景 ========== */
|
||||||
|
.hero {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 0.95) 100%),
|
||||||
|
url('../images/光伏面板生成画面.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 深色主题下的Hero渐变 */
|
||||||
|
body.dark-theme .hero {
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(120, 53, 15, 0.9) 0%, rgba(217, 119, 6, 0.8) 100%),
|
||||||
|
url('../images/光伏面板生成画面.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image:
|
||||||
|
radial-gradient(circle at 20% 50%, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
|
||||||
|
radial-gradient(circle at 80% 80%, rgba(217, 119, 6, 0.05) 0%, transparent 50%);
|
||||||
|
pointer-events: none;
|
||||||
|
animation: glow 8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glow {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.6; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-light);
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
max-width: 900px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: var(--spacing-md) var(--spacing-xl);
|
||||||
|
background: rgba(245, 158, 11, 0.15);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
margin-bottom: var(--spacing-xl);
|
||||||
|
border: 3px solid var(--primary-orange);
|
||||||
|
box-shadow: var(--shadow-orange);
|
||||||
|
text-transform: uppercase;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-badge:hover {
|
||||||
|
background: rgba(245, 158, 11, 0.25);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: clamp(3.5rem, 10vw, 6.5rem);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
margin-bottom: var(--spacing-lg);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
line-height: 1.1;
|
||||||
|
color: var(--accent-amber-light);
|
||||||
|
text-shadow: 0 6px 30px rgba(0,0,0,0.8), 0 0 60px rgba(245, 158, 11, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
||||||
|
font-weight: var(--font-light);
|
||||||
|
opacity: 0.95;
|
||||||
|
margin-bottom: var(--spacing-xl);
|
||||||
|
color: var(--text-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-description {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
opacity: 0.85;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 导航 - 深色玻璃态 ========== */
|
||||||
|
.nav {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: var(--bg-semi-dark);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border-bottom: 1px solid var(--border-light);
|
||||||
|
padding: var(--spacing-md) 0;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 0 var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
padding: var(--spacing-sm) var(--spacing-lg);
|
||||||
|
background: var(--bg-overlay);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid var(--border-light);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
color: var(--text-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item i {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item span {
|
||||||
|
font-size: var(--text-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:hover {
|
||||||
|
background: var(--hover-bg);
|
||||||
|
color: var(--primary-orange);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--shadow-orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item.active {
|
||||||
|
background: var(--active-bg);
|
||||||
|
color: var(--primary-orange);
|
||||||
|
border-color: var(--primary-orange);
|
||||||
|
box-shadow: var(--shadow-orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 内容区块 - 图片背景 ========== */
|
||||||
|
.section {
|
||||||
|
padding: var(--spacing-2xl) 0;
|
||||||
|
background: var(--bg-dark);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 浅色图片背景 - 每个区块使用不同图片 */
|
||||||
|
.section:nth-child(1) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
|
||||||
|
url('../images/PLC示意图.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section:nth-child(2) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
|
||||||
|
url('../images/Mermaid流程图.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section:nth-child(3) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
|
||||||
|
url('../images/工业机器人图片.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section:nth-child(4) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
|
||||||
|
url('../images/机器视觉相机图片.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 通用奇偶区块(当超过4个section时) */
|
||||||
|
.section:nth-child(n+5):nth-child(odd) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
|
||||||
|
url('../images/光伏面板室外场景图片.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section:nth-child(n+5):nth-child(even) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
|
||||||
|
url('../images/输送与治具.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 深色主题下的区块背景 - 每个区块使用对应图片 */
|
||||||
|
body.dark-theme .section:nth-child(1) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(120, 53, 15, 0.92) 0%, rgba(217, 119, 6, 0.88) 100%),
|
||||||
|
url('../images/PLC示意图.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .section:nth-child(2) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(217, 119, 6, 0.90) 0%, rgba(120, 53, 15, 0.88) 100%),
|
||||||
|
url('../images/Mermaid流程图.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .section:nth-child(3) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(120, 53, 15, 0.92) 0%, rgba(217, 119, 6, 0.88) 100%),
|
||||||
|
url('../images/工业机器人图片.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .section:nth-child(4) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(217, 119, 6, 0.90) 0%, rgba(120, 53, 15, 0.88) 100%),
|
||||||
|
url('../images/机器视觉相机图片.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 通用奇偶区块(当超过4个section时) */
|
||||||
|
body.dark-theme .section:nth-child(n+5):nth-child(odd) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(120, 53, 15, 0.92) 0%, rgba(217, 119, 6, 0.88) 100%),
|
||||||
|
url('../images/光伏面板室外场景图片.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .section:nth-child(n+5):nth-child(even) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(217, 119, 6, 0.90) 0%, rgba(120, 53, 15, 0.88) 100%),
|
||||||
|
url('../images/输送与治具.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 深色主题下的特定元素调整 */
|
||||||
|
body.dark-theme .stat-item {
|
||||||
|
background: rgba(245, 158, 11, 0.8);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .stat-item:hover {
|
||||||
|
background: rgba(251, 191, 36, 0.15);
|
||||||
|
border-color: var(--primary-orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .stat-value {
|
||||||
|
color: var(--accent-amber-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme th {
|
||||||
|
background: rgba(251, 191, 36, 0.12);
|
||||||
|
color: var(--accent-amber-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme tr:hover {
|
||||||
|
background: rgba(251, 191, 36, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: var(--container-max);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-lg);
|
||||||
|
margin-bottom: var(--spacing-xl);
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
background: var(--bg-card);
|
||||||
|
backdrop-filter: blur(15px);
|
||||||
|
-webkit-backdrop-filter: blur(15px);
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
border: 2px solid var(--border-light);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-avatar {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
object-fit: cover;
|
||||||
|
border: 3px solid var(--primary-orange);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-avatar:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
border-color: var(--accent-amber);
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-name {
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
color: var(--primary-orange);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: var(--text-4xl);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
color: var(--text-light);
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
text-shadow: none;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 180px;
|
||||||
|
height: 4px;
|
||||||
|
background: linear-gradient(90deg, var(--primary-orange), transparent);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-content {
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expert-intro {
|
||||||
|
background: var(--bg-card);
|
||||||
|
backdrop-filter: blur(15px);
|
||||||
|
-webkit-backdrop-filter: blur(15px);
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
margin-bottom: var(--spacing-xl);
|
||||||
|
border: 2px solid var(--border-light);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expert-intro h3 {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
color: var(--primary-orange);
|
||||||
|
margin-bottom: var(--spacing-lg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expert-intro p {
|
||||||
|
color: var(--text-gray);
|
||||||
|
line-height: 1.8;
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 网格布局 - 针对大屏幕优化,更大气的布局 ========== */
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--spacing-2xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-2 {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-3 {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-4 {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 卡片 - 图片优先布局 ========== */
|
||||||
|
.card {
|
||||||
|
background: var(--bg-card);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
border-radius: var(--radius-2xl);
|
||||||
|
overflow: hidden;
|
||||||
|
border: 2px solid var(--border-light);
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
transform: translateY(-8px);
|
||||||
|
box-shadow: var(--shadow-xl), var(--shadow-orange);
|
||||||
|
border-color: var(--primary-orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
background: var(--bg-semi-dark);
|
||||||
|
border-bottom: 2px solid var(--border-light);
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
color: var(--primary-orange);
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
order: 3;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 图片容器 - 突出展示 - 超大气布局 ========== */
|
||||||
|
.image-container {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 3/2;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
position: relative;
|
||||||
|
box-shadow: none;
|
||||||
|
border: none;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
order: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform var(--transition-slow);
|
||||||
|
filter: brightness(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container:hover img {
|
||||||
|
transform: scale(1.1);
|
||||||
|
filter: brightness(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-caption {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
|
||||||
|
color: var(--text-light);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
text-align: center;
|
||||||
|
transform: translateY(100%);
|
||||||
|
transition: transform var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container:hover .image-caption {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 列表 ========== */
|
||||||
|
.feature-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-list li {
|
||||||
|
padding: var(--spacing-sm) 0;
|
||||||
|
border-bottom: 1px solid var(--border-light);
|
||||||
|
color: var(--text-gray);
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-list li:hover {
|
||||||
|
color: var(--primary-orange);
|
||||||
|
padding-left: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-list li:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 统计数据 ========== */
|
||||||
|
.stats {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
background: var(--bg-overlay);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
border: 1px solid var(--border-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item:hover {
|
||||||
|
background: var(--hover-bg);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: var(--border-light);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--text-gray);
|
||||||
|
margin-bottom: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
color: var(--primary-orange);
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 表格 ========== */
|
||||||
|
.table-container {
|
||||||
|
overflow-x: auto;
|
||||||
|
margin: var(--spacing-xl) 0;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
background: var(--bg-card);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background: var(--active-bg);
|
||||||
|
color: var(--primary-orange);
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
text-align: left;
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
border-bottom: 2px solid var(--primary-orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
border-bottom: 1px solid var(--border-light);
|
||||||
|
color: var(--text-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:last-child td {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:hover {
|
||||||
|
background: var(--hover-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 响应式 ========== */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
:root {
|
||||||
|
--spacing-sm: 0.75rem;
|
||||||
|
--spacing-md: 1rem;
|
||||||
|
--spacing-lg: 1.5rem;
|
||||||
|
--spacing-xl: 2rem;
|
||||||
|
--spacing-2xl: 3rem;
|
||||||
|
--spacing-3xl: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
background-attachment: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section:nth-child(odd),
|
||||||
|
.section:nth-child(even) {
|
||||||
|
background-attachment: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
padding: var(--spacing-xs) var(--spacing-md);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: var(--spacing-2xl) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-2,
|
||||||
|
.grid-3,
|
||||||
|
.grid-4 {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 动画 ========== */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% {
|
||||||
|
background-position: -1000px 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 1000px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
animation: fadeIn 0.6s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-in {
|
||||||
|
animation: slideIn 0.6s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 工具类 ========== */
|
||||||
|
.text-center { text-align: center; }
|
||||||
|
.text-left { text-align: left; }
|
||||||
|
.text-right { text-align: right; }
|
||||||
|
|
||||||
|
.mt-sm { margin-top: var(--spacing-sm); }
|
||||||
|
.mt-md { margin-top: var(--spacing-md); }
|
||||||
|
.mt-lg { margin-top: var(--spacing-lg); }
|
||||||
|
.mt-xl { margin-top: var(--spacing-xl); }
|
||||||
|
|
||||||
|
.mb-sm { margin-bottom: var(--spacing-sm); }
|
||||||
|
.mb-md { margin-bottom: var(--spacing-md); }
|
||||||
|
.mb-lg { margin-bottom: var(--spacing-lg); }
|
||||||
|
.mb-xl { margin-bottom: var(--spacing-xl); }
|
||||||
|
|
||||||
|
.hidden { display: none; }
|
||||||
|
.block { display: block; }
|
||||||
|
.flex { display: flex; }
|
||||||
|
.grid { display: grid; }
|
||||||
|
|
||||||
|
.gap-sm { gap: var(--spacing-sm); }
|
||||||
|
.gap-md { gap: var(--spacing-md); }
|
||||||
|
.gap-lg { gap: var(--spacing-lg); }
|
||||||
|
|
||||||
|
/* ========== 图片加载状态 ========== */
|
||||||
|
img {
|
||||||
|
transition: opacity var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
img.loaded {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.error {
|
||||||
|
opacity: 0.5;
|
||||||
|
filter: grayscale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== SVG图标尺寸统一管理 ========== */
|
||||||
|
.hero-description i[data-lucide] {
|
||||||
|
width: 24px !important;
|
||||||
|
height: 24px !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
margin-right: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-name i[data-lucide] {
|
||||||
|
width: 20px !important;
|
||||||
|
height: 20px !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
margin-right: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expert-intro h3 i[data-lucide] {
|
||||||
|
width: 40px !important;
|
||||||
|
height: 40px !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
margin-right: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-list li i[data-lucide] {
|
||||||
|
width: 18px !important;
|
||||||
|
height: 18px !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
margin-right: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item i[data-lucide] {
|
||||||
|
width: 20px !important;
|
||||||
|
height: 20px !important;
|
||||||
|
display: block !important;
|
||||||
|
margin: 0 auto 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 主题切换按钮 ========== */
|
||||||
|
.theme-toggle {
|
||||||
|
position: fixed;
|
||||||
|
top: 24px;
|
||||||
|
right: 24px;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-btn {
|
||||||
|
position: relative;
|
||||||
|
width: 64px;
|
||||||
|
height: 32px;
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 2px solid var(--border-light);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 6px;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-btn:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-btn:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-icon {
|
||||||
|
width: 18px !important;
|
||||||
|
height: 18px !important;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
color: var(--text-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
body:not(.dark-theme) .theme-icon-light {
|
||||||
|
color: var(--primary-orange);
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
body:not(.dark-theme) .theme-icon-dark {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .theme-icon-dark {
|
||||||
|
color: var(--primary-orange);
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .theme-icon-light {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
1
web_frontend/web_result/order-classes/energy/images
Symbolic link
1
web_frontend/web_result/order-classes/energy/images
Symbolic link
@@ -0,0 +1 @@
|
|||||||
|
../../../../../data/订单班文档资料/能源/notion文稿/image
|
||||||
790
web_frontend/web_result/order-classes/energy/index.html
Normal file
790
web_frontend/web_result/order-classes/energy/index.html
Normal file
@@ -0,0 +1,790 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>光伏晶硅电池片印后AOI检测与分拣单元 - 能源订单班</title>
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body class="dark-theme">
|
||||||
|
<!-- 主题切换按钮 -->
|
||||||
|
<div class="theme-toggle">
|
||||||
|
<button id="themeToggleBtn" class="theme-toggle-btn">
|
||||||
|
<i data-lucide="sun" class="theme-icon theme-icon-light"></i>
|
||||||
|
<i data-lucide="moon" class="theme-icon theme-icon-dark"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hero 区域 -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="hero-badge">⚡ 能源订单班</div>
|
||||||
|
<h1 class="hero-title">光伏晶硅电池片<br>印后AOI检测与分拣单元</h1>
|
||||||
|
<h2 class="hero-subtitle">PLC控制 · 机器视觉 · 智能分拣</h2>
|
||||||
|
<p class="hero-description">
|
||||||
|
<i data-lucide="cpu"></i> 西门子S7-1500 PLC控制系统<br>
|
||||||
|
<i data-lucide="camera"></i> 康耐视In-Sight D900深度学习AOI<br>
|
||||||
|
<i data-lucide="bot"></i> ABB IRB 1200六轴机器人分拣
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="nav">
|
||||||
|
<div class="nav-container">
|
||||||
|
<div class="nav-item active">
|
||||||
|
<i data-lucide="layout-dashboard"></i>
|
||||||
|
<span>系统概述</span>
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<i data-lucide="cpu"></i>
|
||||||
|
<span>PLC控制</span>
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<i data-lucide="bot"></i>
|
||||||
|
<span>机器人编程</span>
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<i data-lucide="camera"></i>
|
||||||
|
<span>视觉检测</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Section 1: 项目概述与设备选型 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<img src="agent-avatars/自动化控制工程师.jpg" alt="自动化控制工程师" class="agent-avatar">
|
||||||
|
<div class="agent-info">
|
||||||
|
<div class="agent-name">
|
||||||
|
<i data-lucide="settings"></i> 自动化控制工程师
|
||||||
|
</div>
|
||||||
|
<h2 class="section-title">项目概述与设备选型</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-content">
|
||||||
|
<div class="expert-intro">
|
||||||
|
<h3><i data-lucide="lightbulb"></i> 项目背景</h3>
|
||||||
|
<p>本项目为某光伏企业设计并实施了一套基于西门子S7-1500 PLC + 康耐视机器视觉 + ABB六轴机器人的晶硅电池片印后AOI检测与自动分拣单元。系统针对丝网印刷工序后的PERC/TopCon电池片,能够精准识别断栅、漏印、拖浆、脏污、划伤、崩边等7类缺陷,实现≥3600片/小时产能、≤0.5%误检率、≤0.3%漏检率的行业领先水平。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-3">
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/PLC示意图.jpg" alt="PLC控制系统" loading="lazy">
|
||||||
|
<div class="image-caption">西门子S7-1500 PLC控制系统</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">PLC控制系统</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="cpu"></i> CPU: S7-1500 1512C-1 PN</li>
|
||||||
|
<li><i data-lucide="zap"></i> 内存: 500KB程序/3MB数据</li>
|
||||||
|
<li><i data-lucide="network"></i> 通讯: Profinet/OPC UA</li>
|
||||||
|
<li><i data-lucide="shield"></i> 防护: IP65工业级</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/工业机器人图片.jpg" alt="ABB工业机器人" loading="lazy">
|
||||||
|
<div class="image-caption">ABB IRB 1200六轴工业机器人</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">六轴机器人</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="bot"></i> 型号: ABB IRB 1200-7/0.7</li>
|
||||||
|
<li><i data-lucide="maximize"></i> 负载: 7kg/工作半径700mm</li>
|
||||||
|
<li><i data-lucide="crosshair"></i> 精度: ±0.02mm重复定位</li>
|
||||||
|
<li><i data-lucide="code"></i> 编程: RAPID + RobotStudio</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/机器视觉相机图片.jpg" alt="机器视觉相机" loading="lazy">
|
||||||
|
<div class="image-caption">康耐视In-Sight D900视觉系统</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">机器视觉系统</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="camera"></i> 相机: In-Sight D900 500万像素</li>
|
||||||
|
<li><i data-lucide="brain"></i> 算法: ViDi深度学习 + PatMax</li>
|
||||||
|
<li><i data-lucide="lightbulb"></i> 光源: LED环形+同轴光</li>
|
||||||
|
<li><i data-lucide="gauge"></i> 镜头: 25-35mm远心镜头</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="image-container" style="margin-top: var(--spacing-xl);">
|
||||||
|
<img data-src="images/输送与治具.jpg" alt="输送线与治具系统" loading="lazy">
|
||||||
|
<div class="image-caption">双边夹持缓存输送线与伺服定心机构</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-2" style="margin-top: var(--spacing-xl);">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">技术指标</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="gauge"></i> 产能: ≥3600片/小时(≤1秒/片)</li>
|
||||||
|
<li><i data-lucide="check-circle"></i> 误检率: ≤0.5%(≤18片/3600片)</li>
|
||||||
|
<li><i data-lucide="alert-triangle"></i> 漏检率: ≤0.3%(≤11片/3600片)</li>
|
||||||
|
<li><i data-lucide="clock"></i> 拍照+判断: ≤300ms(含传输)</li>
|
||||||
|
<li><i data-lucide="maximize"></i> 电池片尺寸: 158.75×158.75mm(M6)</li>
|
||||||
|
<li><i data-lucide="minimize"></i> 检测精度: 0.05mm缺陷可检出</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">检测缺陷类型</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="grid-2x2"></i> 断栅(broken grid): 主栅/细栅断裂</li>
|
||||||
|
<li><i data-lucide="droplet"></i> 漏印(missing print): 栅线缺失</li>
|
||||||
|
<li><i data-lucide="move"></i> 拖浆(dragging): 浆料拖尾</li>
|
||||||
|
<li><i data-lucide="circle-dot"></i> 脏污(contamination): 异物/污渍</li>
|
||||||
|
<li><i data-lucide="slash"></i> 划伤(scratch): 表面划痕</li>
|
||||||
|
<li><i data-lucide="corner-down-right"></i> 崩边(chipping): 边角破损</li>
|
||||||
|
<li><i data-lucide="palette"></i> 色差(color variation): 颜色不均</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">设计产能</div>
|
||||||
|
<div class="stat-value">3600片/时</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">误检率</div>
|
||||||
|
<div class="stat-value">≤0.5%</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">漏检率</div>
|
||||||
|
<div class="stat-value">≤0.3%</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">检测时间</div>
|
||||||
|
<div class="stat-value detection-time">0ms</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Section 2: PLC控制逻辑与I/O配置 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<img src="agent-avatars/PLC工程师.jpg" alt="PLC工程师" class="agent-avatar">
|
||||||
|
<div class="agent-info">
|
||||||
|
<div class="agent-name">
|
||||||
|
<i data-lucide="cpu"></i> PLC工程师
|
||||||
|
</div>
|
||||||
|
<h2 class="section-title">PLC控制逻辑与I/O配置</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-content">
|
||||||
|
<div class="expert-intro">
|
||||||
|
<h3><i data-lucide="git-branch"></i> 控制架构设计</h3>
|
||||||
|
<p>采用西门子TIA Portal V17开发,基于IEC 61131-3标准的SCL+梯形图混合编程。系统划分为6个核心功能模块:启动安全链、物料检测、AOI检测触发、机器人抓取交互、MES数据上传、异常处理。使用DB块结构化数据存储,通过Profinet实时通讯(500ms循环周期)实现PLC-机器人-视觉系统的无缝协同。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
|
||||||
|
<img data-src="images/Mermaid流程图.jpg" alt="控制流程图" loading="lazy">
|
||||||
|
<div class="image-caption">系统控制流程Mermaid图</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-2">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">输入信号配置(14路)</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="shield"></i> I0.0~I0.2: 急停/安全门/光栅(安全链)</li>
|
||||||
|
<li><i data-lucide="target"></i> I0.3~I0.5: 来料/到位/离开传感器</li>
|
||||||
|
<li><i data-lucide="camera"></i> I0.6~I0.7: 相机触发完成/异常信号</li>
|
||||||
|
<li><i data-lucide="bot"></i> I1.0~I1.2: 机器人就绪/抓取完成/报警</li>
|
||||||
|
<li><i data-lucide="thermometer"></i> I1.3~I1.4: 温度/湿度监测</li>
|
||||||
|
<li><i data-lucide="toggle-left"></i> I1.5: 手动/自动模式切换</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">输出信号配置(13路)</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="play"></i> Q0.0: 输送电机启动(变频器使能)</li>
|
||||||
|
<li><i data-lucide="maximize"></i> Q0.1~Q0.2: 定位气缸/夹持气缸</li>
|
||||||
|
<li><i data-lucide="camera"></i> Q0.3~Q0.4: 相机触发/光源控制</li>
|
||||||
|
<li><i data-lucide="bot"></i> Q0.5~Q0.7: 机器人启动/结果1/结果2</li>
|
||||||
|
<li><i data-lucide="lightbulb"></i> Q1.0~Q1.2: 指示灯(运行/故障/待机)</li>
|
||||||
|
<li><i data-lucide="bell"></i> Q1.3: 蜂鸣器报警输出</li>
|
||||||
|
<li><i data-lucide="power"></i> Q1.4: MES数据上传握手信号</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-3" style="margin-top: var(--spacing-xl);">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">核心功能块</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="shield-check"></i> FB100: 安全链监控(SIL2)</li>
|
||||||
|
<li><i data-lucide="play-circle"></i> FB200: 输送带伺服控制</li>
|
||||||
|
<li><i data-lucide="camera"></i> FB300: 视觉系统接口</li>
|
||||||
|
<li><i data-lucide="bot"></i> FB400: 机器人交互逻辑</li>
|
||||||
|
<li><i data-lucide="database"></i> FB500: MES数据上传</li>
|
||||||
|
<li><i data-lucide="alert-triangle"></i> FB600: 异常诊断与报警</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">数据块结构</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="database"></i> DB1: 系统配置参数</li>
|
||||||
|
<li><i data-lucide="bar-chart"></i> DB2: 生产统计数据</li>
|
||||||
|
<li><i data-lucide="check-square"></i> DB3: 检测结果缓存(FIFO)</li>
|
||||||
|
<li><i data-lucide="package"></i> DB4: 批次追溯信息</li>
|
||||||
|
<li><i data-lucide="alert-circle"></i> DB5: 报警历史记录</li>
|
||||||
|
<li><i data-lucide="settings"></i> DB6: 配方参数库</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">通讯配置</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="network"></i> Profinet IO: 机器人控制器</li>
|
||||||
|
<li><i data-lucide="ethernet-port"></i> TCP/IP: In-Sight D900相机</li>
|
||||||
|
<li><i data-lucide="cloud"></i> OPC UA: MES系统对接</li>
|
||||||
|
<li><i data-lucide="link"></i> Modbus TCP: 变频器/伺服</li>
|
||||||
|
<li><i data-lucide="wifi"></i> HTTP: HMI触摸屏(WinCC)</li>
|
||||||
|
<li><i data-lucide="repeat"></i> 500ms循环周期 + 事件触发</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-container" style="margin-top: var(--spacing-xl);">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>控制模式</th>
|
||||||
|
<th>触发条件</th>
|
||||||
|
<th>执行动作</th>
|
||||||
|
<th>预期结果</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>自动模式</td>
|
||||||
|
<td>来料传感器ON + 安全链OK</td>
|
||||||
|
<td>输送带启动→定位夹持→触发相机</td>
|
||||||
|
<td>获得检测结果,触发机器人</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>手动模式</td>
|
||||||
|
<td>操作员按下启动按钮</td>
|
||||||
|
<td>单步执行各动作(调试用)</td>
|
||||||
|
<td>逐步验证各环节功能</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>复位模式</td>
|
||||||
|
<td>报警发生后按复位键</td>
|
||||||
|
<td>清除报警→回零位→等待启动</td>
|
||||||
|
<td>系统恢复至初始状态</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>急停模式</td>
|
||||||
|
<td>急停按钮按下/安全门打开</td>
|
||||||
|
<td>立即切断所有输出→保持状态</td>
|
||||||
|
<td>设备安全停止,等待复位</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">输入信号数</div>
|
||||||
|
<div class="stat-value io-inputs">0路</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">输出信号数</div>
|
||||||
|
<div class="stat-value io-outputs">0路</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">功能块数</div>
|
||||||
|
<div class="stat-value">6个</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">通讯协议</div>
|
||||||
|
<div class="stat-value">5种</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Section 3: 机器人编程与分拣逻辑 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<img src="agent-avatars/机器人调试工程师.jpg" alt="机器人调试工程师" class="agent-avatar">
|
||||||
|
<div class="agent-info">
|
||||||
|
<div class="agent-name">
|
||||||
|
<i data-lucide="bot"></i> 机器人调试工程师
|
||||||
|
</div>
|
||||||
|
<h2 class="section-title">机器人编程与分拣逻辑</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-content">
|
||||||
|
<div class="expert-intro">
|
||||||
|
<h3><i data-lucide="code"></i> RAPID编程实现</h3>
|
||||||
|
<p>基于ABB RobotStudio离线编程,使用RAPID语言开发拾取-判断-分拣主程序。系统通过真空吸盘拾取电池片(负压-60kPa),根据PLC传输的检测结果(OK/RW/NG)执行对应分拣路径。采用多点轨迹规划优化节拍(单次循环≤0.8秒),使用WorldZone碰撞检测保障安全,通过TCP精度补偿实现±0.02mm重复定位精度。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
|
||||||
|
<img data-src="images/光伏面板生成画面.jpg" alt="光伏面板分拣场景" loading="lazy">
|
||||||
|
<div class="image-caption">机器人分拣路径三维仿真</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-2">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">分拣逻辑流程</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="play"></i> 1. 等待PLC就绪信号(DI1=1)</li>
|
||||||
|
<li><i data-lucide="hand"></i> 2. 移动至拾取点→开启真空→检测吸附</li>
|
||||||
|
<li><i data-lucide="search"></i> 3. 读取检测结果(DI2-DI3编码)</li>
|
||||||
|
<li><i data-lucide="git-branch"></i> 4. 分支判断: OK→托盘1, RW→托盘2, NG→废料箱</li>
|
||||||
|
<li><i data-lucide="box"></i> 5. 到达目标位置→关闭真空→等待释放</li>
|
||||||
|
<li><i data-lucide="rotate-ccw"></i> 6. 返回原点→发送完成信号(DO1=1)→循环</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">安全策略设计</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="shield"></i> 工作区域: 4个WorldZone限制区域</li>
|
||||||
|
<li><i data-lucide="zap"></i> 急停响应: ≤50ms安全断电</li>
|
||||||
|
<li><i data-lucide="alert-triangle"></i> 碰撞检测: 力矩阈值80%触发保护</li>
|
||||||
|
<li><i data-lucide="user-x"></i> 示教模式: 速度限制250mm/s</li>
|
||||||
|
<li><i data-lucide="gauge"></i> 负载监控: 超7kg触发报警</li>
|
||||||
|
<li><i data-lucide="shield-check"></i> 安全评级: PL=d / SIL=2</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-3" style="margin-top: var(--spacing-xl);">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">轨迹优化参数</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="gauge"></i> 拾取速度: 300mm/s(V100)</li>
|
||||||
|
<li><i data-lucide="zap"></i> 空载速度: 800mm/s(V300)</li>
|
||||||
|
<li><i data-lucide="move"></i> 负载速度: 500mm/s(V200)</li>
|
||||||
|
<li><i data-lucide="corner-down-right"></i> 转角区: Zone10(精确定位)</li>
|
||||||
|
<li><i data-lucide="trending-up"></i> 加速度: 80%最大值</li>
|
||||||
|
<li><i data-lucide="clock"></i> 单次节拍: ≤0.8秒</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">末端工具配置</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="disc"></i> 吸盘类型: 硅胶平面吸盘×4</li>
|
||||||
|
<li><i data-lucide="wind"></i> 真空度: -60kPa(可调-50~-80)</li>
|
||||||
|
<li><i data-lucide="thermometer"></i> 检测方式: 真空开关+模拟量反馈</li>
|
||||||
|
<li><i data-lucide="package"></i> TCP偏移: X+50 Y+0 Z+120mm</li>
|
||||||
|
<li><i data-lucide="weight"></i> 工具重量: 1.2kg(含快换盘)</li>
|
||||||
|
<li><i data-lucide="settings"></i> 负载数据: LoadData配置校准</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">I/O信号映射</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="log-in"></i> DI1: PLC允许抓取信号</li>
|
||||||
|
<li><i data-lucide="check-circle"></i> DI2-DI3: 检测结果编码(2bit)</li>
|
||||||
|
<li><i data-lucide="alert-circle"></i> DI4: 急停联锁信号</li>
|
||||||
|
<li><i data-lucide="log-out"></i> DO1: 抓取完成反馈</li>
|
||||||
|
<li><i data-lucide="power"></i> DO2: 真空吸盘控制</li>
|
||||||
|
<li><i data-lucide="bell"></i> DO3: 报警输出</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-container" style="margin-top: var(--spacing-xl);">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>检测结果</th>
|
||||||
|
<th>DI2-DI3编码</th>
|
||||||
|
<th>分拣目标</th>
|
||||||
|
<th>坐标位置</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>OK(良品)</td>
|
||||||
|
<td>00</td>
|
||||||
|
<td>OK托盘(8×10排列)</td>
|
||||||
|
<td>X-300 Y+200 Z+50</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>RW(返工)</td>
|
||||||
|
<td>01</td>
|
||||||
|
<td>RW托盘(待复检)</td>
|
||||||
|
<td>X-300 Y-200 Z+50</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>NG(废品)</td>
|
||||||
|
<td>10</td>
|
||||||
|
<td>废料箱(统一收集)</td>
|
||||||
|
<td>X-500 Y+0 Z+100</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>异常</td>
|
||||||
|
<td>11</td>
|
||||||
|
<td>暂存区(等待人工处理)</td>
|
||||||
|
<td>X+0 Y+0 Z+150</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">单次节拍</div>
|
||||||
|
<div class="stat-value robot-cycle">0秒</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">重复定位精度</div>
|
||||||
|
<div class="stat-value">±0.02mm</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">安全等级</div>
|
||||||
|
<div class="stat-value">PL=d/SIL=2</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">工作区域数</div>
|
||||||
|
<div class="stat-value robot-zones">0个</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Section 4: 视觉标定与性能验证 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<img src="agent-avatars/机器视觉识别工程师.jpeg" alt="机器视觉识别工程师" class="agent-avatar">
|
||||||
|
<div class="agent-info">
|
||||||
|
<div class="agent-name">
|
||||||
|
<i data-lucide="camera"></i> 机器视觉识别工程师
|
||||||
|
</div>
|
||||||
|
<h2 class="section-title">视觉标定与性能验证</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-content">
|
||||||
|
<div class="expert-intro">
|
||||||
|
<h3><i data-lucide="search"></i> 深度学习AOI实现</h3>
|
||||||
|
<p>采用康耐视In-Sight D900智能相机,搭载ViDi Suite深度学习库。使用Red Analyze工具检测表面缺陷(划伤/脏污/色差),Blue Locate工具定位栅线特征,Green Classify工具分类缺陷类型。通过500张OK样本+200张NG样本训练模型,实现99.7%检出率、0.3%误检率。配合25-35mm远心镜头+LED环形光+同轴光,保证0.05mm缺陷可检出。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
|
||||||
|
<img data-src="images/光伏面板室外场景图片.jpg" alt="光伏检测场景" loading="lazy">
|
||||||
|
<div class="image-caption">AOI检测工位实景</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-2">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">光源与镜头配置</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="lightbulb"></i> 主光源: LED环形白光(12000lm可调)</li>
|
||||||
|
<li><i data-lucide="sun"></i> 辅助光: 同轴光(消除反光)</li>
|
||||||
|
<li><i data-lucide="gauge"></i> 镜头: 25-35mm远心镜头F2.8</li>
|
||||||
|
<li><i data-lucide="maximize"></i> 视野: 200×200mm(覆盖全片)</li>
|
||||||
|
<li><i data-lucide="focus"></i> 景深: ±2mm(适应厚度波动)</li>
|
||||||
|
<li><i data-lucide="sliders"></i> 分辨率: 0.04mm/pixel(500万像素)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">标定流程</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="grid"></i> 1. 几何标定: 使用标准棋盘格板</li>
|
||||||
|
<li><i data-lucide="sun"></i> 2. 光源调试: 亮度/角度/均匀性优化</li>
|
||||||
|
<li><i data-lucide="focus"></i> 3. 对焦校准: 激光测距仪辅助</li>
|
||||||
|
<li><i data-lucide="database"></i> 4. 模型训练: 500 OK + 200 NG样本</li>
|
||||||
|
<li><i data-lucide="sliders"></i> 5. 阈值调优: ROC曲线分析</li>
|
||||||
|
<li><i data-lucide="check-circle"></i> 6. 验收测试: 1000片实测验证</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-3" style="margin-top: var(--spacing-xl);">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">ViDi深度学习工具</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="search"></i> Red Analyze: 表面缺陷检测</li>
|
||||||
|
<li><i data-lucide="crosshair"></i> Blue Locate: 栅线特征定位</li>
|
||||||
|
<li><i data-lucide="grid-3x3"></i> Green Classify: 缺陷类型分类</li>
|
||||||
|
<li><i data-lucide="package"></i> Blue Read: OCR识别(批次号)</li>
|
||||||
|
<li><i data-lucide="layers"></i> 模型融合: 多工具组合决策</li>
|
||||||
|
<li><i data-lucide="trending-up"></i> 持续学习: 定期迭代优化</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">通讯协议</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="ethernet-port"></i> TCP/IP: 与PLC主控(Port 23)</li>
|
||||||
|
<li><i data-lucide="arrow-right-left"></i> 触发方式: 硬件触发(I/O信号)</li>
|
||||||
|
<li><i data-lucide="send"></i> 结果输出: JSON格式(OK/RW/NG)</li>
|
||||||
|
<li><i data-lucide="image"></i> 图像存储: FTP上传(NG图片)</li>
|
||||||
|
<li><i data-lucide="clock"></i> 处理时间: ≤200ms(拍照+判断)</li>
|
||||||
|
<li><i data-lucide="signal"></i> 握手机制: Request-Response模式</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">性能指标</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="check-circle"></i> 检出率: 99.7%(≤3漏检/1000片)</li>
|
||||||
|
<li><i data-lucide="alert-triangle"></i> 误检率: 0.3%(≤3误报/1000片)</li>
|
||||||
|
<li><i data-lucide="minimize"></i> 最小缺陷: 0.05mm可检出</li>
|
||||||
|
<li><i data-lucide="gauge"></i> 重复精度: σ≤0.02mm(定位)</li>
|
||||||
|
<li><i data-lucide="clock"></i> 单次耗时: 150ms拍照+50ms判断</li>
|
||||||
|
<li><i data-lucide="trending-up"></i> 产能适配: ≥3600片/小时</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-container" style="margin-top: var(--spacing-xl);">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>缺陷类型</th>
|
||||||
|
<th>检测方法</th>
|
||||||
|
<th>判定标准</th>
|
||||||
|
<th>检出率</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>断栅</td>
|
||||||
|
<td>Blue Locate + 边缘检测</td>
|
||||||
|
<td>栅线连续性中断>0.5mm</td>
|
||||||
|
<td>99.9%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>漏印</td>
|
||||||
|
<td>Blue Locate + 灰度统计</td>
|
||||||
|
<td>栅线缺失面积>2mm²</td>
|
||||||
|
<td>99.8%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>拖浆</td>
|
||||||
|
<td>Red Analyze异常检测</td>
|
||||||
|
<td>浆料拖尾长度>1mm</td>
|
||||||
|
<td>99.5%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>脏污</td>
|
||||||
|
<td>Red Analyze + 对比学习</td>
|
||||||
|
<td>异物面积>0.3mm²</td>
|
||||||
|
<td>99.6%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>划伤</td>
|
||||||
|
<td>Red Analyze纹理分析</td>
|
||||||
|
<td>划痕深度>0.05mm</td>
|
||||||
|
<td>99.4%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>崩边</td>
|
||||||
|
<td>Blue Locate边缘定位</td>
|
||||||
|
<td>边角缺损>0.5mm</td>
|
||||||
|
<td>99.9%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>色差</td>
|
||||||
|
<td>Green Classify颜色分类</td>
|
||||||
|
<td>色差ΔE>10(Lab空间)</td>
|
||||||
|
<td>99.3%</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">总检出率</div>
|
||||||
|
<div class="stat-value detection-rate">0%</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">总误检率</div>
|
||||||
|
<div class="stat-value">0.3%</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">最小缺陷尺寸</div>
|
||||||
|
<div class="stat-value">0.05mm</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">检测缺陷类型</div>
|
||||||
|
<div class="stat-value defect-types">0类</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer: 项目成果总结 -->
|
||||||
|
<section class="section" style="background: var(--bg-semi-dark); padding: var(--spacing-3xl) 0;">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title text-center" style="margin-bottom: var(--spacing-2xl);">
|
||||||
|
<i data-lucide="award"></i> 项目成果总结
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="grid grid-3">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" style="order: 1;">
|
||||||
|
<h3 class="card-title">⚡ 核心技术</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" style="order: 2;">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="cpu"></i> 西门子S7-1500 PLC控制系统</li>
|
||||||
|
<li><i data-lucide="bot"></i> ABB IRB 1200六轴工业机器人</li>
|
||||||
|
<li><i data-lucide="camera"></i> 康耐视In-Sight D900深度学习AOI</li>
|
||||||
|
<li><i data-lucide="network"></i> Profinet/OPC UA工业通讯</li>
|
||||||
|
<li><i data-lucide="brain"></i> ViDi Suite深度学习算法</li>
|
||||||
|
<li><i data-lucide="code"></i> TIA Portal + RAPID混合编程</li>
|
||||||
|
<li><i data-lucide="database"></i> MES系统数据追溯对接</li>
|
||||||
|
<li><i data-lucide="shield"></i> SIL2/PLd功能安全设计</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" style="order: 1;">
|
||||||
|
<h3 class="card-title">📊 性能指标</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" style="order: 2;">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="gauge"></i> 产能: ≥3600片/小时(≤1秒/片)</li>
|
||||||
|
<li><i data-lucide="check-circle"></i> 检出率: 99.7%(≤3漏检/1000片)</li>
|
||||||
|
<li><i data-lucide="alert-triangle"></i> 误检率: 0.3%(≤3误报/1000片)</li>
|
||||||
|
<li><i data-lucide="crosshair"></i> 定位精度: ±0.02mm(机器人)</li>
|
||||||
|
<li><i data-lucide="minimize"></i> 最小缺陷: 0.05mm可检出</li>
|
||||||
|
<li><i data-lucide="clock"></i> 检测时间: ≤300ms(含传输)</li>
|
||||||
|
<li><i data-lucide="bot"></i> 分拣节拍: ≤0.8秒/片</li>
|
||||||
|
<li><i data-lucide="package"></i> 批次追溯: 100%可追溯</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" style="order: 1;">
|
||||||
|
<h3 class="card-title">🎯 应用成果</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" style="order: 2;">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="trending-up"></i> 产能提升: 人工1800→自动3600片/时</li>
|
||||||
|
<li><i data-lucide="shield-check"></i> 质量提升: 漏检率3%→0.3%</li>
|
||||||
|
<li><i data-lucide="users-minus"></i> 人力节省: 减少4人/班次</li>
|
||||||
|
<li><i data-lucide="clock"></i> 回报周期: 设备投资18个月回本</li>
|
||||||
|
<li><i data-lucide="check-square"></i> 稳定性: 连续运行>6000小时无故障</li>
|
||||||
|
<li><i data-lucide="database"></i> 数据价值: 完整质量追溯链</li>
|
||||||
|
<li><i data-lucide="award"></i> 行业认可: 客户复购3条线</li>
|
||||||
|
<li><i data-lucide="zap"></i> 技术积累: 形成标准化解决方案</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center" style="margin-top: var(--spacing-2xl); color: var(--text-gray);">
|
||||||
|
<p>⚡ 光伏晶硅电池片印后AOI检测与分拣单元圆满交付!</p>
|
||||||
|
<p style="margin-top: var(--spacing-sm);">© 2024 能源订单班 | 智能制造解决方案</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
269
web_frontend/web_result/order-classes/energy/js/main.js
Normal file
269
web_frontend/web_result/order-classes/energy/js/main.js
Normal file
@@ -0,0 +1,269 @@
|
|||||||
|
// 光伏晶硅电池片印后AOI检测与分拣单元 - 主要JavaScript逻辑
|
||||||
|
|
||||||
|
// 页面初始化
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
console.log('⚡ 能源订单班光伏AOI检测页面加载完成');
|
||||||
|
|
||||||
|
// 初始化Lucide图标
|
||||||
|
if (typeof lucide !== 'undefined') {
|
||||||
|
lucide.createIcons();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化组件
|
||||||
|
initNavigation();
|
||||||
|
initAnimations();
|
||||||
|
initLazyLoading();
|
||||||
|
initSmoothScroll();
|
||||||
|
updateStats();
|
||||||
|
initThemeToggle();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 导航功能
|
||||||
|
function initNavigation() {
|
||||||
|
const navItems = document.querySelectorAll('.nav-item');
|
||||||
|
const sections = document.querySelectorAll('.section');
|
||||||
|
|
||||||
|
// 点击导航项滚动到对应区块
|
||||||
|
navItems.forEach((item, index) => {
|
||||||
|
item.addEventListener('click', () => {
|
||||||
|
// 移除所有活跃状态
|
||||||
|
navItems.forEach(nav => nav.classList.remove('active'));
|
||||||
|
// 添加当前活跃状态
|
||||||
|
item.classList.add('active');
|
||||||
|
|
||||||
|
// 滚动到对应区块
|
||||||
|
if (sections[index]) {
|
||||||
|
const targetSection = sections[index];
|
||||||
|
const offsetTop = targetSection.offsetTop - 100;
|
||||||
|
|
||||||
|
window.scrollTo({
|
||||||
|
top: offsetTop,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 滚动时更新导航活跃状态
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
let current = '';
|
||||||
|
sections.forEach((section, index) => {
|
||||||
|
const sectionTop = section.offsetTop - 150;
|
||||||
|
if (scrollY >= sectionTop) {
|
||||||
|
current = index;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
navItems.forEach((item, index) => {
|
||||||
|
item.classList.remove('active');
|
||||||
|
if (index === current) {
|
||||||
|
item.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 动画初始化
|
||||||
|
function initAnimations() {
|
||||||
|
// 使用 Intersection Observer 实现滚动动画
|
||||||
|
const observerOptions = {
|
||||||
|
root: null,
|
||||||
|
rootMargin: '0px',
|
||||||
|
threshold: 0.1
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('fade-in');
|
||||||
|
observer.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
// 观察所有需要动画的元素
|
||||||
|
const animatedElements = document.querySelectorAll('.card, .expert-intro');
|
||||||
|
animatedElements.forEach(el => {
|
||||||
|
el.style.opacity = '0';
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图片懒加载
|
||||||
|
function initLazyLoading() {
|
||||||
|
const images = document.querySelectorAll('img[data-src]');
|
||||||
|
|
||||||
|
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
const img = entry.target;
|
||||||
|
const src = img.getAttribute('data-src');
|
||||||
|
|
||||||
|
// 创建新图片对象来预加载
|
||||||
|
const tempImg = new Image();
|
||||||
|
tempImg.onload = function() {
|
||||||
|
img.src = src;
|
||||||
|
img.classList.add('loaded');
|
||||||
|
};
|
||||||
|
tempImg.onerror = function() {
|
||||||
|
// 如果图片加载失败，使用橙色主题占位图
|
||||||
|
img.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23fffbeb"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%23f59e0b"%3E图片加载中%3C/text%3E%3C/svg%3E';
|
||||||
|
img.classList.add('error');
|
||||||
|
};
|
||||||
|
tempImg.src = src;
|
||||||
|
|
||||||
|
img.removeAttribute('data-src');
|
||||||
|
observer.unobserve(img);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
images.forEach(img => {
|
||||||
|
imageObserver.observe(img);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 平滑滚动
|
||||||
|
function initSmoothScroll() {
|
||||||
|
// 为所有锚点链接添加平滑滚动
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const targetId = this.getAttribute('href');
|
||||||
|
if (targetId === '#') return;
|
||||||
|
|
||||||
|
const target = document.querySelector(targetId);
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新统计数据 - 光伏AOI检测数据
|
||||||
|
function updateStats() {
|
||||||
|
// 动画数字增长效果 - 光伏AOI相关数据
|
||||||
|
const stats = [
|
||||||
|
{ selector: '.detection-time', value: 300, suffix: 'ms' },
|
||||||
|
{ selector: '.io-inputs', value: 14, suffix: '路' },
|
||||||
|
{ selector: '.io-outputs', value: 13, suffix: '路' },
|
||||||
|
{ selector: '.robot-cycle', value: 0.8, suffix: '秒' },
|
||||||
|
{ selector: '.robot-zones', value: 4, suffix: '个' },
|
||||||
|
{ selector: '.detection-rate', value: 99.7, suffix: '%' },
|
||||||
|
{ selector: '.defect-types', value: 7, suffix: '类' }
|
||||||
|
];
|
||||||
|
|
||||||
|
stats.forEach(stat => {
|
||||||
|
const element = document.querySelector(stat.selector);
|
||||||
|
if (element) {
|
||||||
|
animateValue(element, 0, stat.value, 2000, stat.suffix);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数字动画函数
|
||||||
|
function animateValue(element, start, end, duration, suffix = '') {
|
||||||
|
const startTime = performance.now();
|
||||||
|
|
||||||
|
function update(currentTime) {
|
||||||
|
const elapsed = currentTime - startTime;
|
||||||
|
const progress = Math.min(elapsed / duration, 1);
|
||||||
|
|
||||||
|
// 使用缓动函数
|
||||||
|
const easeOutQuad = progress * (2 - progress);
|
||||||
|
let current;
|
||||||
|
|
||||||
|
// 处理小数值
|
||||||
|
if (end < 10 && end % 1 !== 0) {
|
||||||
|
current = (start + (end - start) * easeOutQuad).toFixed(1);
|
||||||
|
} else {
|
||||||
|
current = Math.floor(start + (end - start) * easeOutQuad);
|
||||||
|
}
|
||||||
|
|
||||||
|
element.textContent = current + suffix;
|
||||||
|
|
||||||
|
if (progress < 1) {
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 错误处理
|
||||||
|
window.addEventListener('error', function(e) {
|
||||||
|
if (e.target.tagName === 'IMG') {
|
||||||
|
console.warn('图片加载失败:', e.target.src);
|
||||||
|
e.target.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23fffbeb"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%23f59e0b"%3E图片暂时无法显示%3C/text%3E%3C/svg%3E';
|
||||||
|
e.target.classList.add('error');
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
|
||||||
|
// 移动端优化
|
||||||
|
if ('ontouchstart' in window) {
|
||||||
|
document.body.classList.add('touch-device');
|
||||||
|
|
||||||
|
// 移动端点击优化
|
||||||
|
let touchStartTime;
|
||||||
|
document.addEventListener('touchstart', () => {
|
||||||
|
touchStartTime = Date.now();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('touchend', (e) => {
|
||||||
|
const touchEndTime = Date.now();
|
||||||
|
if (touchEndTime - touchStartTime < 200) {
|
||||||
|
// 快速点击
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 性能监控
|
||||||
|
if (window.performance && window.performance.timing) {
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const timing = window.performance.timing;
|
||||||
|
const loadTime = timing.loadEventEnd - timing.navigationStart;
|
||||||
|
console.log(`页面加载时间: ${loadTime}ms`);
|
||||||
|
|
||||||
|
// 如果加载时间过长，提示用户
|
||||||
|
if (loadTime > 3000) {
|
||||||
|
console.warn('页面加载时间较长，可能需要优化');
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主题切换功能
|
||||||
|
function initThemeToggle() {
|
||||||
|
const themeToggleBtn = document.getElementById('themeToggleBtn');
|
||||||
|
|
||||||
|
// 从localStorage读取用户的主题偏好
|
||||||
|
const savedTheme = localStorage.getItem('theme');
|
||||||
|
// 如果没有保存的偏好，默认使用暗色主题
|
||||||
|
if (savedTheme === 'dark' || savedTheme === null) {
|
||||||
|
document.body.classList.add('dark-theme');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击切换主题
|
||||||
|
if (themeToggleBtn) {
|
||||||
|
themeToggleBtn.addEventListener('click', () => {
|
||||||
|
document.body.classList.toggle('dark-theme');
|
||||||
|
|
||||||
|
// 保存用户偏好
|
||||||
|
if (document.body.classList.contains('dark-theme')) {
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
} else {
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重新初始化图标以确保正确显示
|
||||||
|
if (typeof lucide !== 'undefined') {
|
||||||
|
lucide.createIcons();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user