diff --git a/.claude/settings.local.json b/.claude/settings.local.json index e3c2811d..9e85a012 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -102,7 +102,12 @@ "Bash(do echo \"=== $file ===\")", "Bash(open http://localhost:3000/order-classes/food/)", "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": [], "ask": [], diff --git a/.serena/memories/09_项目完成度统计_202510.md b/.serena/memories/09_项目完成度统计_202510.md index 8d0aeb5d..f911a0ee 100644 --- a/.serena/memories/09_项目完成度统计_202510.md +++ b/.serena/memories/09_项目完成度统计_202510.md @@ -1,39 +1,40 @@ -# 项目完成度统计 (2025-10-03) +# 项目完成度统计 (2025-10-04) ## 📊 总体完成情况 ### 终端模拟 (exhibition-demo) - **总计划**: 12个订单班 -- **已完成**: 10个 (其中视觉设计缺少agent数据) -- **完成率**: 83.3% -- **待完成**: 化工、环保 +- **已完成**: 12个 ✅ +- **完成率**: 100% 🎉 +- **待完成**: 0个 ### 展示页面 (web_result) - **总计划**: 12个订单班页面 -- **已完成**: 2个 (文旅、食品) -- **完成率**: 16.7% -- **待完成**: 10个 +- **已完成**: 3个 (文旅、食品、财经商贸) +- **完成率**: 25% +- **待完成**: 9个 + +### 图片标准化处理 +- **总计划**: 12个订单班 +- **已完成**: 3个 (财经商贸、环保、化工) ✅ +- **完成率**: 25% +- **待完成**: 9个 ## 🎯 详细清单 -### ✅ 完全完成的订单班（9个） -终端模拟和agent数据都完整： -1. **文旅** (wenlu) - 终端模拟✅ + 展示页面✅ -2. **食品** (food) - 终端模拟✅ + 展示页面✅ -3. **财经商贸** (finance) - 终端模拟✅ + 展示页面❌ -4. **交通物流** (logistics/transportation) - 终端模拟✅ + 展示页面❌ -5. **智能制造** (manufacturing/intelligentManufacturing) - 终端模拟✅ + 展示页面❌ -6. **智能开发** (dev/developer) - 终端模拟✅ + 展示页面❌ -7. **土木水利** (civil/civilEngineering) - 终端模拟✅ + 展示页面❌ -8. **能源** (energy) - 终端模拟✅ + 展示页面❌ -9. **大健康** (health) - 终端模拟✅ + 展示页面❌ - -### ⚠️ 部分完成的订单班（1个） -10. **视觉设计** (design/visualDesign) - 终端模拟✅ + agent数据❌ + 展示页面❌ - -### ❌ 未开始的订单班（2个） -11. **化工** (chemical) - 终端模拟❌ + agent数据❌ + 展示页面❌ -12. **环保** (environment) - 终端模拟❌ + agent数据❌ + 展示页面❌ +### ✅ 完全完成的订单班（终端模拟+agent数据）(12个) +1. **文旅** (wenlu) - 终端模拟✅ + agent数据✅ + 展示页面✅ +2. **食品** (food) - 终端模拟✅ + agent数据✅ + 展示页面✅ +3. **财经商贸** (finance) - 终端模拟✅ + agent数据✅ + 展示页面✅ + 图片标准化✅ +4. **交通物流** (transportation) - 终端模拟✅ + agent数据✅ + 展示页面❌ +5. **智能制造** (intelligentManufacturing) - 终端模拟✅ + agent数据✅ + 展示页面❌ +6. **智能开发** (developer) - 终端模拟✅ + agent数据✅ + 展示页面❌ +7. **土木水利** (civilEngineering) - 终端模拟✅ + agent数据✅ + 展示页面❌ +8. **能源** (energy) - 终端模拟✅ + agent数据✅ + 展示页面❌ +9. **大健康** (health) - 终端模拟✅ + agent数据✅ + 展示页面❌ +10. **视觉设计** (visualDesign) - 终端模拟✅ + agent数据✅ + 展示页面❌ +11. **化工** (chemical) - 终端模拟✅ + agent数据✅ + 展示页面❌ + 图片标准化✅ +12. **环保** (environmental) - 终端模拟✅ + agent数据✅ + 展示页面❌ + 图片标准化✅ ## 📁 文件存在性验证 @@ -49,53 +50,107 @@ ✅ energy.ts ✅ health.ts ✅ visualDesign.ts -❌ chemical.ts (不存在) -❌ environment.ts (不存在) +✅ chemical.ts (2025-10-04新增) +✅ environmental.ts (2025-10-04新增) ``` ### web_result 展示页面目录 ``` ✅ /order-classes/wenlu/ ✅ /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 配置状态 - wenlu: completed ✅ - food: completed ✅ -- 其他10个: pending ⏳ +- finance: completed ✅ (2025-10-04更新) +- 其他9个: pending ⏳ -## 🔄 需要更新的记忆 +## 🎉 最新更新 (2025-10-04) -1. **03_订单班配置清单.md** - - 当前显示已完成9个，实际完全完成9个（正确） - - 但需要明确说明视觉设计缺少agent数据 - - 化工和环保确实未开始 +### 新增功能 +1. ✅ 完成化工订单班终端模拟 (chemical.ts) +2. ✅ 完成环保订单班终端模拟 (environmental.ts) +3. ✅ 完成财经商贸展示页面 (/order-classes/finance/) +4. ✅ 完成化工订单班图片标准化检查（8个图片，已全部符合标准） -2. **07_web_result项目架构.md** - - 需要添加完成度统计 - - 当前只有2个订单班有展示页面 - - 其余10个待开发 +### 项目记忆重组 +完成项目记忆文件的重新组织，采用00-09编号体系： +- 00_记忆索引和使用指南.md +- 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数据 -2. **优先级2**: 完成化工和环保的终端模拟 -3. **优先级3**: 为已完成终端模拟的7个订单班创建web_result展示页面 -4. **优先级4**: 完善routes.yaml配置，更新各订单班状态 +### 优先级1: 完成剩余9个订单班的展示页面 +按照以下顺序推进： +1. 交通物流 (transportation) +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. 验证处理结果 -注意文件命名不一致： -- 交通物流: logistics vs transportation -- 智能制造: manufacturing vs intelligentManufacturing -- 智能开发: dev vs developer -- 土木水利: civil vs civilEngineering -- 视觉设计: design vs visualDesign +### 优先级3: 更新routes.yaml配置 +将已完成的订单班状态从pending更新为completed -建议统一使用完整英文名称。 +## 📈 进度里程碑 + +- ✅ **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 -**记录者**: Claude Code \ No newline at end of file +**更新时间**: 2025-10-04 +**记录者**: Claude Code +**重要成就**: 🎉 终端模拟系统全部完成！(12/12) \ No newline at end of file diff --git a/.serena/memories/化工订单班图片处理完成记录_202510.md b/.serena/memories/化工订单班图片处理完成记录_202510.md new file mode 100644 index 00000000..e6c6fb28 --- /dev/null +++ b/.serena/memories/化工订单班图片处理完成记录_202510.md @@ -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 +![检测背景主图](image/检测背景主图.jpg) +![硅晶圆检测项目](image/硅晶圆检测项目.jpg) +![光学镜头检测硅晶圆示意图](image/光学镜头检测硅晶圆示意图.jpg) +![外观热力图（颗粒划痕腐蚀）](image/外观热力图（颗粒划痕腐蚀）.jpg) +![厚度分布图](image/厚度分布图.jpg) +![电学对比图](image/电学对比图.jpg) +![成分抽检卡片](image/成分抽检卡片.jpg) +![检测结果主图](image/检测结果主图.jpg) +``` + +## 验证结果 +✅ 所有图片文件名与alt text完全一致 +✅ 所有图片引用格式正确 +✅ 文档可正常渲染所有图片 +✅ 无需进行任何重命名操作 + +## 特点说明 +化工订单班的图片处理是最规范的，所有图片从一开始就使用了标准的描述性中文命名，展示了最佳实践： +- 使用专业术语：如"硅晶圆"、"光学镜头检测" +- 描述清晰：如"外观热力图（颗粒划痕腐蚀）"明确说明了热力图的具体内容 +- 功能明确：如"检测背景主图"、"检测结果主图"清晰区分主图用途 + +## 对比其他订单班 +- **财经商贸**：需要重命名21个（从hash名称、通用名称转换） +- **环保**：需要重命名22个（从hash名称、通用名称、Whisk系列转换） +- **化工**：0个需要重命名（已全部标准化）✨ + +## Git提交记录 +提交ID: c579dae9 +提交信息: "feat: 完成化工订单班图片处理和项目记忆重组" +提交时间: 2025-10-04 + +--- + +**最后更新**：2025-10-04 +**处理状态**：✅ 完成（无需操作） \ No newline at end of file diff --git a/web_frontend/web_result/order-classes/energy/agent-avatars b/web_frontend/web_result/order-classes/energy/agent-avatars new file mode 120000 index 00000000..af0f84be --- /dev/null +++ b/web_frontend/web_result/order-classes/energy/agent-avatars @@ -0,0 +1 @@ +../../../../../data/订单班文档资料/能源/agent头像 \ No newline at end of file diff --git a/web_frontend/web_result/order-classes/energy/css/styles.css b/web_frontend/web_result/order-classes/energy/css/styles.css new file mode 100644 index 00000000..9336539b --- /dev/null +++ b/web_frontend/web_result/order-classes/energy/css/styles.css @@ -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; +} diff --git a/web_frontend/web_result/order-classes/energy/images b/web_frontend/web_result/order-classes/energy/images new file mode 120000 index 00000000..882eb843 --- /dev/null +++ b/web_frontend/web_result/order-classes/energy/images @@ -0,0 +1 @@ +../../../../../data/订单班文档资料/能源/notion文稿/image \ No newline at end of file diff --git a/web_frontend/web_result/order-classes/energy/index.html b/web_frontend/web_result/order-classes/energy/index.html new file mode 100644 index 00000000..f75de92f --- /dev/null +++ b/web_frontend/web_result/order-classes/energy/index.html @@ -0,0 +1,790 @@ + + + + + + 光伏晶硅电池片印后AOI检测与分拣单元 - 能源订单班 + + + + + +
+ +
+ + +
+
+
⚡ 能源订单班
+

光伏晶硅电池片
印后AOI检测与分拣单元

+

PLC控制 · 机器视觉 · 智能分拣

+

+ 西门子S7-1500 PLC控制系统
+ 康耐视In-Sight D900深度学习AOI
+ ABB IRB 1200六轴机器人分拣 +

+
+
+ + + + + +
+
+
+ 自动化控制工程师 +
+
+ 自动化控制工程师 +
+

项目概述与设备选型

+
+
+ +
+
+

项目背景

+

本项目为某光伏企业设计并实施了一套基于西门子S7-1500 PLC + 康耐视机器视觉 + ABB六轴机器人的晶硅电池片印后AOI检测与自动分拣单元。系统针对丝网印刷工序后的PERC/TopCon电池片,能够精准识别断栅、漏印、拖浆、脏污、划伤、崩边等7类缺陷,实现≥3600片/小时产能、≤0.5%误检率、≤0.3%漏检率的行业领先水平。

+
+ +
+
+
+ PLC控制系统 +
西门子S7-1500 PLC控制系统
+
+
+

PLC控制系统

+
+
+
    +
  • CPU: S7-1500 1512C-1 PN
    • +
  • 内存: 500KB程序/3MB数据
    • +
  • 通讯: Profinet/OPC UA
    • +
  • 防护: IP65工业级
    • +
+
+
+ +
+
+ ABB工业机器人 +
ABB IRB 1200六轴工业机器人
+
+
+

六轴机器人

+
+
+
    +
  • 型号: ABB IRB 1200-7/0.7
    • +
  • 负载: 7kg/工作半径700mm
    • +
  • 精度: ±0.02mm重复定位
    • +
  • 编程: RAPID + RobotStudio
    • +
+
+
+ +
+
+ 机器视觉相机 +
康耐视In-Sight D900视觉系统
+
+
+

机器视觉系统

+
+
+
    +
  • 相机: In-Sight D900 500万像素
    • +
  • 算法: ViDi深度学习 + PatMax
    • +
  • 光源: LED环形+同轴光
    • +
  • 镜头: 25-35mm远心镜头
    • +
+
+
+
+ +
+ 输送线与治具系统 +
双边夹持缓存输送线与伺服定心机构
+
+ +
+
+
+

技术指标

+
+
+
    +
  • 产能: ≥3600片/小时(≤1秒/片)
    • +
  • 误检率: ≤0.5%(≤18片/3600片)
    • +
  • 漏检率: ≤0.3%(≤11片/3600片)
    • +
  • 拍照+判断: ≤300ms(含传输)
    • +
  • 电池片尺寸: 158.75×158.75mm(M6)
    • +
  • 检测精度: 0.05mm缺陷可检出
    • +
+
+
+ +
+
+

检测缺陷类型

+
+
+
    +
  • 断栅(broken grid): 主栅/细栅断裂
    • +
  • 漏印(missing print): 栅线缺失
    • +
  • 拖浆(dragging): 浆料拖尾
    • +
  • 脏污(contamination): 异物/污渍
    • +
  • 划伤(scratch): 表面划痕
    • +
  • 崩边(chipping): 边角破损
    • +
  • 色差(color variation): 颜色不均
    • +
+
+
+
+ +
+
+
设计产能
+
3600片/时
+
+
+
误检率
+
≤0.5%
+
+
+
漏检率
+
≤0.3%
+
+
+
检测时间
+
0ms
+
+
+
+
+
+ + +
+
+
+ PLC工程师 +
+
+ PLC工程师 +
+

PLC控制逻辑与I/O配置

+
+
+ +
+
+

控制架构设计

+

采用西门子TIA Portal V17开发,基于IEC 61131-3标准的SCL+梯形图混合编程。系统划分为6个核心功能模块:启动安全链、物料检测、AOI检测触发、机器人抓取交互、MES数据上传、异常处理。使用DB块结构化数据存储,通过Profinet实时通讯(500ms循环周期)实现PLC-机器人-视觉系统的无缝协同。

+
+ +
+ 控制流程图 +
系统控制流程Mermaid图
+
+ +
+
+
+

输入信号配置(14路)

+
+
+
    +
  • I0.0~I0.2: 急停/安全门/光栅(安全链)
    • +
  • I0.3~I0.5: 来料/到位/离开传感器
    • +
  • I0.6~I0.7: 相机触发完成/异常信号
    • +
  • I1.0~I1.2: 机器人就绪/抓取完成/报警
    • +
  • I1.3~I1.4: 温度/湿度监测
    • +
  • I1.5: 手动/自动模式切换
    • +
+
+
+ +
+
+

输出信号配置(13路)

+
+
+
    +
  • Q0.0: 输送电机启动(变频器使能)
    • +
  • Q0.1~Q0.2: 定位气缸/夹持气缸
    • +
  • Q0.3~Q0.4: 相机触发/光源控制
    • +
  • Q0.5~Q0.7: 机器人启动/结果1/结果2
    • +
  • Q1.0~Q1.2: 指示灯(运行/故障/待机)
    • +
  • Q1.3: 蜂鸣器报警输出
    • +
  • Q1.4: MES数据上传握手信号
    • +
+
+
+
+ +
+
+
+

核心功能块

+
+
+
    +
  • FB100: 安全链监控(SIL2)
    • +
  • FB200: 输送带伺服控制
    • +
  • FB300: 视觉系统接口
    • +
  • FB400: 机器人交互逻辑
    • +
  • FB500: MES数据上传
    • +
  • FB600: 异常诊断与报警
    • +
+
+
+ +
+
+

数据块结构

+
+
+
    +
  • DB1: 系统配置参数
    • +
  • DB2: 生产统计数据
    • +
  • DB3: 检测结果缓存(FIFO)
    • +
  • DB4: 批次追溯信息
    • +
  • DB5: 报警历史记录
    • +
  • DB6: 配方参数库
    • +
+
+
+ +
+
+

通讯配置

+
+
+
    +
  • Profinet IO: 机器人控制器
    • +
  • TCP/IP: In-Sight D900相机
    • +
  • OPC UA: MES系统对接
    • +
  • Modbus TCP: 变频器/伺服
    • +
  • HTTP: HMI触摸屏(WinCC)
    • +
  • 500ms循环周期 + 事件触发
    • +
+
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
控制模式触发条件执行动作预期结果
自动模式来料传感器ON + 安全链OK输送带启动→定位夹持→触发相机获得检测结果,触发机器人
手动模式操作员按下启动按钮单步执行各动作(调试用)逐步验证各环节功能
复位模式报警发生后按复位键清除报警→回零位→等待启动系统恢复至初始状态
急停模式急停按钮按下/安全门打开立即切断所有输出→保持状态设备安全停止,等待复位
+
+ +
+
+
输入信号数
+
0路
+
+
+
输出信号数
+
0路
+
+
+
功能块数
+
6个
+
+
+
通讯协议
+
5种
+
+
+
+
+
+ + +
+
+
+ 机器人调试工程师 +
+
+ 机器人调试工程师 +
+

机器人编程与分拣逻辑

+
+
+ +
+
+

RAPID编程实现

+

基于ABB RobotStudio离线编程,使用RAPID语言开发拾取-判断-分拣主程序。系统通过真空吸盘拾取电池片(负压-60kPa),根据PLC传输的检测结果(OK/RW/NG)执行对应分拣路径。采用多点轨迹规划优化节拍(单次循环≤0.8秒),使用WorldZone碰撞检测保障安全,通过TCP精度补偿实现±0.02mm重复定位精度。

+
+ +
+ 光伏面板分拣场景 +
机器人分拣路径三维仿真
+
+ +
+
+
+

分拣逻辑流程

+
+
+
    +
  • 1. 等待PLC就绪信号(DI1=1)
    • +
  • 2. 移动至拾取点→开启真空→检测吸附
    • +
  • 3. 读取检测结果(DI2-DI3编码)
    • +
  • 4. 分支判断: OK→托盘1, RW→托盘2, NG→废料箱
    • +
  • 5. 到达目标位置→关闭真空→等待释放
    • +
  • 6. 返回原点→发送完成信号(DO1=1)→循环
    • +
+
+
+ +
+
+

安全策略设计

+
+
+
    +
  • 工作区域: 4个WorldZone限制区域
    • +
  • 急停响应: ≤50ms安全断电
    • +
  • 碰撞检测: 力矩阈值80%触发保护
    • +
  • 示教模式: 速度限制250mm/s
    • +
  • 负载监控: 超7kg触发报警
    • +
  • 安全评级: PL=d / SIL=2
    • +
+
+
+
+ +
+
+
+

轨迹优化参数

+
+
+
    +
  • 拾取速度: 300mm/s(V100)
    • +
  • 空载速度: 800mm/s(V300)
    • +
  • 负载速度: 500mm/s(V200)
    • +
  • 转角区: Zone10(精确定位)
    • +
  • 加速度: 80%最大值
    • +
  • 单次节拍: ≤0.8秒
    • +
+
+
+ +
+
+

末端工具配置

+
+
+
    +
  • 吸盘类型: 硅胶平面吸盘×4
    • +
  • 真空度: -60kPa(可调-50~-80)
    • +
  • 检测方式: 真空开关+模拟量反馈
    • +
  • TCP偏移: X+50 Y+0 Z+120mm
    • +
  • 工具重量: 1.2kg(含快换盘)
    • +
  • 负载数据: LoadData配置校准
    • +
+
+
+ +
+
+

I/O信号映射

+
+
+
    +
  • DI1: PLC允许抓取信号
    • +
  • DI2-DI3: 检测结果编码(2bit)
    • +
  • DI4: 急停联锁信号
    • +
  • DO1: 抓取完成反馈
    • +
  • DO2: 真空吸盘控制
    • +
  • DO3: 报警输出
    • +
+
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
检测结果DI2-DI3编码分拣目标坐标位置
OK(良品)00OK托盘(8×10排列)X-300 Y+200 Z+50
RW(返工)01RW托盘(待复检)X-300 Y-200 Z+50
NG(废品)10废料箱(统一收集)X-500 Y+0 Z+100
异常11暂存区(等待人工处理)X+0 Y+0 Z+150
+
+ +
+
+
单次节拍
+
0秒
+
+
+
重复定位精度
+
±0.02mm
+
+
+
安全等级
+
PL=d/SIL=2
+
+
+
工作区域数
+
0个
+
+
+
+
+
+ + +
+
+
+ 机器视觉识别工程师 +
+
+ 机器视觉识别工程师 +
+

视觉标定与性能验证

+
+
+ +
+
+

深度学习AOI实现

+

采用康耐视In-Sight D900智能相机,搭载ViDi Suite深度学习库。使用Red Analyze工具检测表面缺陷(划伤/脏污/色差),Blue Locate工具定位栅线特征,Green Classify工具分类缺陷类型。通过500张OK样本+200张NG样本训练模型,实现99.7%检出率、0.3%误检率。配合25-35mm远心镜头+LED环形光+同轴光,保证0.05mm缺陷可检出。

+
+ +
+ 光伏检测场景 +
AOI检测工位实景
+
+ +
+
+
+

光源与镜头配置

+
+
+
    +
  • 主光源: LED环形白光(12000lm可调)
    • +
  • 辅助光: 同轴光(消除反光)
    • +
  • 镜头: 25-35mm远心镜头F2.8
    • +
  • 视野: 200×200mm(覆盖全片)
    • +
  • 景深: ±2mm(适应厚度波动)
    • +
  • 分辨率: 0.04mm/pixel(500万像素)
    • +
+
+
+ +
+
+

标定流程

+
+
+
    +
  • 1. 几何标定: 使用标准棋盘格板
    • +
  • 2. 光源调试: 亮度/角度/均匀性优化
    • +
  • 3. 对焦校准: 激光测距仪辅助
    • +
  • 4. 模型训练: 500 OK + 200 NG样本
    • +
  • 5. 阈值调优: ROC曲线分析
    • +
  • 6. 验收测试: 1000片实测验证
    • +
+
+
+
+ +
+
+
+

ViDi深度学习工具

+
+
+
    +
  • Red Analyze: 表面缺陷检测
    • +
  • Blue Locate: 栅线特征定位
    • +
  • Green Classify: 缺陷类型分类
    • +
  • Blue Read: OCR识别(批次号)
    • +
  • 模型融合: 多工具组合决策
    • +
  • 持续学习: 定期迭代优化
    • +
+
+
+ +
+
+

通讯协议

+
+
+
    +
  • TCP/IP: 与PLC主控(Port 23)
    • +
  • 触发方式: 硬件触发(I/O信号)
    • +
  • 结果输出: JSON格式(OK/RW/NG)
    • +
  • 图像存储: FTP上传(NG图片)
    • +
  • 处理时间: ≤200ms(拍照+判断)
    • +
  • 握手机制: Request-Response模式
    • +
+
+
+ +
+
+

性能指标

+
+
+
    +
  • 检出率: 99.7%(≤3漏检/1000片)
    • +
  • 误检率: 0.3%(≤3误报/1000片)
    • +
  • 最小缺陷: 0.05mm可检出
    • +
  • 重复精度: σ≤0.02mm(定位)
    • +
  • 单次耗时: 150ms拍照+50ms判断
    • +
  • 产能适配: ≥3600片/小时
    • +
+
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
缺陷类型检测方法判定标准检出率
断栅Blue Locate + 边缘检测栅线连续性中断>0.5mm99.9%
漏印Blue Locate + 灰度统计栅线缺失面积>2mm²99.8%
拖浆Red Analyze异常检测浆料拖尾长度>1mm99.5%
脏污Red Analyze + 对比学习异物面积>0.3mm²99.6%
划伤Red Analyze纹理分析划痕深度>0.05mm99.4%
崩边Blue Locate边缘定位边角缺损>0.5mm99.9%
色差Green Classify颜色分类色差ΔE>10(Lab空间)99.3%
+
+ +
+
+
总检出率
+
0%
+
+
+
总误检率
+
0.3%
+
+
+
最小缺陷尺寸
+
0.05mm
+
+
+
检测缺陷类型
+
0类
+
+
+
+
+
+ + +
+
+

+ 项目成果总结 +

+ +
+
+
+

⚡ 核心技术

+
+
+
    +
  • 西门子S7-1500 PLC控制系统
    • +
  • ABB IRB 1200六轴工业机器人
    • +
  • 康耐视In-Sight D900深度学习AOI
    • +
  • Profinet/OPC UA工业通讯
    • +
  • ViDi Suite深度学习算法
    • +
  • TIA Portal + RAPID混合编程
    • +
  • MES系统数据追溯对接
    • +
  • SIL2/PLd功能安全设计
    • +
+
+
+ +
+
+

📊 性能指标

+
+
+
    +
  • 产能: ≥3600片/小时(≤1秒/片)
    • +
  • 检出率: 99.7%(≤3漏检/1000片)
    • +
  • 误检率: 0.3%(≤3误报/1000片)
    • +
  • 定位精度: ±0.02mm(机器人)
    • +
  • 最小缺陷: 0.05mm可检出
    • +
  • 检测时间: ≤300ms(含传输)
    • +
  • 分拣节拍: ≤0.8秒/片
    • +
  • 批次追溯: 100%可追溯
    • +
+
+
+ +
+
+

🎯 应用成果

+
+
+
    +
  • 产能提升: 人工1800→自动3600片/时
    • +
  • 质量提升: 漏检率3%→0.3%
    • +
  • 人力节省: 减少4人/班次
    • +
  • 回报周期: 设备投资18个月回本
    • +
  • 稳定性: 连续运行>6000小时无故障
    • +
  • 数据价值: 完整质量追溯链
    • +
  • 行业认可: 客户复购3条线
    • +
  • 技术积累: 形成标准化解决方案
    • +
+
+
+
+ +
+

⚡ 光伏晶硅电池片印后AOI检测与分拣单元圆满交付!

+

© 2024 能源订单班 | 智能制造解决方案

+
+
+
+ + + + diff --git a/web_frontend/web_result/order-classes/energy/js/main.js b/web_frontend/web_result/order-classes/energy/js/main.js new file mode 100644 index 00000000..1abfdc84 --- /dev/null +++ b/web_frontend/web_result/order-classes/energy/js/main.js @@ -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(); + } + }); + } +}