125a134902
详细说明: - 修复getProjectInfo函数中seq.agent()的类型错误 - 添加兼容性处理，支持函数和对象两种数据格式 - 解决选择订单班后点击按钮导致页面崩溃的问题 - 修改文件: WorkflowPageV4.tsx (第934行) - 影响模块: ResultModal数据显示系统 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1238 lines
65 KiB
HTML
1238 lines
65 KiB
HTML
<!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>
|
||
<!-- Mermaid 图表库 -->
|
||
<script type="module">
|
||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
|
||
mermaid.initialize({
|
||
startOnLoad: true,
|
||
theme: 'dark',
|
||
themeVariables: {
|
||
primaryColor: '#f59e0b',
|
||
primaryTextColor: '#e8f5e9',
|
||
primaryBorderColor: '#d97706',
|
||
lineColor: '#f59e0b',
|
||
secondaryColor: '#d97706',
|
||
tertiaryColor: '#0a1a0f',
|
||
background: '#0d1f13',
|
||
mainBkg: '#12231e',
|
||
secondBkg: '#1a352a',
|
||
border1: '#f59e0b',
|
||
border2: '#d97706',
|
||
note: '#1a352a',
|
||
text: '#e8f5e9',
|
||
critical: '#ef4444',
|
||
done: '#4a9d5f',
|
||
activeText: '#ffffff',
|
||
activeBorder: '#f59e0b',
|
||
activeBkg: '#d97706',
|
||
labelColor: '#e8f5e9',
|
||
errorBkgColor: '#ef4444',
|
||
errorTextColor: '#ffffff',
|
||
fontSize: '16px',
|
||
fontFamily: 'Inter, sans-serif'
|
||
}
|
||
});
|
||
|
||
// 监听主题切换
|
||
const updateMermaidTheme = (isDark) => {
|
||
const theme = isDark ? {
|
||
theme: 'dark',
|
||
themeVariables: {
|
||
primaryColor: '#f59e0b',
|
||
primaryTextColor: '#e8f5e9',
|
||
primaryBorderColor: '#d97706',
|
||
lineColor: '#f59e0b',
|
||
secondaryColor: '#d97706',
|
||
tertiaryColor: '#0a1a0f',
|
||
background: '#0d1f13',
|
||
mainBkg: '#12231e',
|
||
secondBkg: '#1a352a',
|
||
border1: '#f59e0b',
|
||
border2: '#d97706',
|
||
note: '#1a352a',
|
||
text: '#e8f5e9',
|
||
critical: '#ef4444',
|
||
done: '#4a9d5f',
|
||
activeText: '#ffffff',
|
||
activeBorder: '#f59e0b',
|
||
activeBkg: '#d97706',
|
||
labelColor: '#e8f5e9',
|
||
fontSize: '16px',
|
||
fontFamily: 'Inter, sans-serif'
|
||
}
|
||
} : {
|
||
theme: 'default',
|
||
themeVariables: {
|
||
primaryColor: '#f59e0b',
|
||
primaryTextColor: '#0a1a0f',
|
||
primaryBorderColor: '#d97706',
|
||
lineColor: '#f59e0b',
|
||
secondaryColor: '#d97706',
|
||
tertiaryColor: '#f8faf7',
|
||
background: '#ffffff',
|
||
mainBkg: '#f8faf7',
|
||
secondBkg: '#ffffff',
|
||
border1: '#f59e0b',
|
||
border2: '#d97706',
|
||
note: '#ffffff',
|
||
text: '#0a1a0f',
|
||
critical: '#ef4444',
|
||
done: '#4a9d5f',
|
||
activeText: '#0a1a0f',
|
||
activeBorder: '#f59e0b',
|
||
activeBkg: '#d97706',
|
||
labelColor: '#0a1a0f',
|
||
fontSize: '16px',
|
||
fontFamily: 'Inter, sans-serif'
|
||
}
|
||
};
|
||
|
||
mermaid.initialize(theme);
|
||
// 重新渲染所有 Mermaid 图表
|
||
document.querySelectorAll('.mermaid-container').forEach(container => {
|
||
const code = container.dataset.mermaidCode;
|
||
if (code) {
|
||
mermaid.render('mermaid-' + Date.now(), code).then(result => {
|
||
container.innerHTML = result.svg;
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
// 导出到全局以供主题切换使用
|
||
window.updateMermaidTheme = updateMermaidTheme;
|
||
</script>
|
||
<style>
|
||
.mermaid-interactive-container {
|
||
position: relative;
|
||
width: 100%;
|
||
min-height: 500px;
|
||
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);
|
||
padding: var(--spacing-lg);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.mermaid-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
position: relative;
|
||
}
|
||
|
||
.mermaid-container svg {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.mermaid-controls {
|
||
position: absolute;
|
||
top: var(--spacing-md);
|
||
right: var(--spacing-md);
|
||
display: flex;
|
||
gap: var(--spacing-sm);
|
||
z-index: 10;
|
||
}
|
||
|
||
.mermaid-control-btn {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border-light);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--spacing-sm);
|
||
cursor: pointer;
|
||
transition: all var(--transition-base);
|
||
color: var(--text-light);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
|
||
.mermaid-control-btn:hover {
|
||
background: var(--hover-bg);
|
||
border-color: var(--accent-gold);
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.mermaid-control-btn i {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.image-caption {
|
||
text-align: center;
|
||
margin-top: var(--spacing-md);
|
||
color: var(--text-gray);
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--font-medium);
|
||
}
|
||
</style>
|
||
</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">
|
||
<!-- 动态背景SVG -->
|
||
<svg class="hero-bg-svg" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:rgb(245,158,11);stop-opacity:0.1" />
|
||
<stop offset="100%" style="stop-color:rgb(217,119,6);stop-opacity:0.05" />
|
||
</linearGradient>
|
||
</defs>
|
||
<circle class="floating-circle" cx="200" cy="200" r="120" fill="url(#grad1)" />
|
||
<circle class="floating-circle" cx="1720" cy="300" r="80" fill="url(#grad1)" />
|
||
<circle class="floating-circle" cx="1600" cy="800" r="100" fill="url(#grad1)" />
|
||
<circle class="floating-circle" cx="300" cy="900" r="60" fill="url(#grad1)" />
|
||
</svg>
|
||
|
||
<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 class="hero-floating-cards">
|
||
<div class="hero-card">
|
||
<div class="hero-card-value">3600片/时</div>
|
||
<div class="hero-card-label">设计产能</div>
|
||
</div>
|
||
<div class="hero-card">
|
||
<div class="hero-card-value">99.7%</div>
|
||
<div class="hero-card-label">检出率</div>
|
||
</div>
|
||
<div class="hero-card">
|
||
<div class="hero-card-value">±0.02mm</div>
|
||
<div class="hero-card-label">定位精度</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 滚动提示 -->
|
||
<div class="scroll-indicator">
|
||
<i data-lucide="chevron-down"></i>
|
||
</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>
|
||
|
||
<!-- Bento Grid 布局 - 不等大小网格 -->
|
||
<div class="bento-grid">
|
||
<!-- 大卡片 - PLC控制系统 -->
|
||
<div class="card bento-large">
|
||
<div class="image-container">
|
||
<img data-src="data/订单班文档资料/能源/notion文稿/image/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 bento-medium">
|
||
<div class="image-container">
|
||
<img data-src="data/订单班文档资料/能源/notion文稿/image/工业机器人图片.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 bento-medium">
|
||
<div class="image-container">
|
||
<img data-src="data/订单班文档资料/能源/notion文稿/image/机器视觉相机图片.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="data/订单班文档资料/能源/notion文稿/image/输送与治具.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-enhanced" style="margin-top: var(--spacing-xl);">
|
||
<!-- 现代化图标统计 -->
|
||
<div class="stat-modern-item scroll-reveal-scale">
|
||
<div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);">
|
||
<i data-lucide="gauge" style="width: 32px; height: 32px; color: white;"></i>
|
||
</div>
|
||
<div class="stat-modern-value">3600<span class="stat-modern-unit">片/时</span></div>
|
||
<div class="stat-modern-label">设计产能</div>
|
||
</div>
|
||
|
||
<div class="stat-modern-item scroll-reveal-scale">
|
||
<div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);">
|
||
<i data-lucide="check-circle" style="width: 32px; height: 32px; color: white;"></i>
|
||
</div>
|
||
<div class="stat-modern-value">99.7<span class="stat-modern-unit">%</span></div>
|
||
<div class="stat-modern-label">检出率</div>
|
||
</div>
|
||
|
||
<div class="stat-modern-item scroll-reveal-scale">
|
||
<div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);">
|
||
<i data-lucide="alert-triangle" style="width: 32px; height: 32px; color: white;"></i>
|
||
</div>
|
||
<div class="stat-modern-value">0.5<span class="stat-modern-unit">%</span></div>
|
||
<div class="stat-modern-label">误检率</div>
|
||
</div>
|
||
|
||
<div class="stat-modern-item scroll-reveal-scale">
|
||
<div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);">
|
||
<i data-lucide="clock" style="width: 32px; height: 32px; color: white;"></i>
|
||
</div>
|
||
<div class="stat-modern-value">300<span class="stat-modern-unit">ms</span></div>
|
||
<div class="stat-modern-label">检测时间</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="split-layout">
|
||
<!-- 左侧图片 -->
|
||
<div class="split-layout-image scroll-reveal-left">
|
||
<img data-src="data/订单班文档资料/能源/notion文稿/image/PLC示意图.jpg" alt="PLC I/O配置" loading="lazy">
|
||
<div class="split-overlay">
|
||
<div class="split-badge">14路输入</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧内容 -->
|
||
<div class="split-layout-content scroll-reveal-right">
|
||
<h3 class="split-title"><i data-lucide="log-in"></i> 输入信号配置</h3>
|
||
<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="split-layout split-layout-reverse" style="margin-top: var(--spacing-2xl);">
|
||
<!-- 左侧内容 -->
|
||
<div class="split-layout-content scroll-reveal-left">
|
||
<h3 class="split-title"><i data-lucide="log-out"></i> 输出信号配置</h3>
|
||
<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>
|
||
|
||
<!-- 右侧Mermaid交互图表 -->
|
||
<div class="split-layout-image scroll-reveal-right" style="position: relative; overflow: visible;">
|
||
<div class="mermaid-interactive-container" style="height: 100%; margin: 0;">
|
||
<!-- Mermaid控制按钮 -->
|
||
<div class="mermaid-controls">
|
||
<button class="mermaid-control-btn" onclick="mermaidZoomIn(this)" title="放大">
|
||
<i data-lucide="zoom-in"></i>
|
||
</button>
|
||
<button class="mermaid-control-btn" onclick="mermaidZoomOut(this)" title="缩小">
|
||
<i data-lucide="zoom-out"></i>
|
||
</button>
|
||
<button class="mermaid-control-btn" onclick="mermaidReset(this)" title="重置">
|
||
<i data-lucide="refresh-cw"></i>
|
||
</button>
|
||
<button class="mermaid-control-btn" onclick="mermaidFullscreen(this)" title="全屏">
|
||
<i data-lucide="maximize"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Mermaid图表容器 -->
|
||
<div class="mermaid-container" data-mermaid-code="graph TB
|
||
Start([系统启动]) --> SafetyCheck{安全链检测<br/>FB100}
|
||
SafetyCheck -->|安全链OK| MaterialDetect[物料检测<br/>FB200<br/>I0.3-I0.5传感器]
|
||
SafetyCheck -->|安全链异常| ErrorHandle[异常处理<br/>FB600]
|
||
|
||
MaterialDetect -->|检测到物料| ConveyorControl[输送带控制<br/>Q0.0启动]
|
||
ConveyorControl --> PositionClamp[定位夹持<br/>Q0.1-Q0.2]
|
||
PositionClamp --> AOITrigger[AOI检测触发<br/>FB300<br/>Q0.3相机触发]
|
||
|
||
AOITrigger --> VisionProcess{视觉系统<br/>In-Sight D900}
|
||
VisionProcess -->|检测完成<br/>I0.6| ResultReceive[接收检测结果<br/>OK/RW/NG]
|
||
VisionProcess -->|检测异常<br/>I0.7| ErrorHandle
|
||
|
||
ResultReceive --> RobotInteract[机器人交互<br/>FB400<br/>Q0.5-Q0.7]
|
||
RobotInteract -->|等待机器人<br/>I1.0就绪| RobotGrab[机器人抓取<br/>I1.1完成]
|
||
RobotGrab --> MESUpload[MES数据上传<br/>FB500<br/>Q1.4握手]
|
||
|
||
MESUpload --> NextCycle{继续循环?}
|
||
NextCycle -->|是| MaterialDetect
|
||
NextCycle -->|否| End([流程结束])
|
||
|
||
ErrorHandle -->|报警<br/>Q1.3蜂鸣器| AlarmLight[故障指示<br/>Q1.1红灯]
|
||
AlarmLight --> ManualReset{手动复位?}
|
||
ManualReset -->|复位<br/>I1.5| SafetyCheck
|
||
ManualReset -->|急停<br/>I0.0-I0.2| EmergencyStop[紧急停止<br/>切断所有输出]
|
||
|
||
style Start fill:#4a9d5f,stroke:#2d7a3f,color:#fff
|
||
style End fill:#4a9d5f,stroke:#2d7a3f,color:#fff
|
||
style SafetyCheck fill:#f59e0b,stroke:#d97706,color:#fff
|
||
style VisionProcess fill:#f59e0b,stroke:#d97706,color:#fff
|
||
style NextCycle fill:#f59e0b,stroke:#d97706,color:#fff
|
||
style ManualReset fill:#f59e0b,stroke:#d97706,color:#fff
|
||
style ErrorHandle fill:#ef4444,stroke:#dc2626,color:#fff
|
||
style EmergencyStop fill:#ef4444,stroke:#dc2626,color:#fff
|
||
style AlarmLight fill:#ef4444,stroke:#dc2626,color:#fff">
|
||
<pre class="mermaid">
|
||
graph TB
|
||
Start([系统启动]) --> SafetyCheck{安全链检测<br/>FB100}
|
||
SafetyCheck -->|安全链OK| MaterialDetect[物料检测<br/>FB200<br/>I0.3-I0.5传感器]
|
||
SafetyCheck -->|安全链异常| ErrorHandle[异常处理<br/>FB600]
|
||
|
||
MaterialDetect -->|检测到物料| ConveyorControl[输送带控制<br/>Q0.0启动]
|
||
ConveyorControl --> PositionClamp[定位夹持<br/>Q0.1-Q0.2]
|
||
PositionClamp --> AOITrigger[AOI检测触发<br/>FB300<br/>Q0.3相机触发]
|
||
|
||
AOITrigger --> VisionProcess{视觉系统<br/>In-Sight D900}
|
||
VisionProcess -->|检测完成<br/>I0.6| ResultReceive[接收检测结果<br/>OK/RW/NG]
|
||
VisionProcess -->|检测异常<br/>I0.7| ErrorHandle
|
||
|
||
ResultReceive --> RobotInteract[机器人交互<br/>FB400<br/>Q0.5-Q0.7]
|
||
RobotInteract -->|等待机器人<br/>I1.0就绪| RobotGrab[机器人抓取<br/>I1.1完成]
|
||
RobotGrab --> MESUpload[MES数据上传<br/>FB500<br/>Q1.4握手]
|
||
|
||
MESUpload --> NextCycle{继续循环?}
|
||
NextCycle -->|是| MaterialDetect
|
||
NextCycle -->|否| End([流程结束])
|
||
|
||
ErrorHandle -->|报警<br/>Q1.3蜂鸣器| AlarmLight[故障指示<br/>Q1.1红灯]
|
||
AlarmLight --> ManualReset{手动复位?}
|
||
ManualReset -->|复位<br/>I1.5| SafetyCheck
|
||
ManualReset -->|急停<br/>I0.0-I0.2| EmergencyStop[紧急停止<br/>切断所有输出]
|
||
|
||
style Start fill:#4a9d5f,stroke:#2d7a3f,color:#fff
|
||
style End fill:#4a9d5f,stroke:#2d7a3f,color:#fff
|
||
style SafetyCheck fill:#f59e0b,stroke:#d97706,color:#fff
|
||
style VisionProcess fill:#f59e0b,stroke:#d97706,color:#fff
|
||
style NextCycle fill:#f59e0b,stroke:#d97706,color:#fff
|
||
style ManualReset fill:#f59e0b,stroke:#d97706,color:#fff
|
||
style ErrorHandle fill:#ef4444,stroke:#dc2626,color:#fff
|
||
style EmergencyStop fill:#ef4444,stroke:#dc2626,color:#fff
|
||
style AlarmLight fill:#ef4444,stroke:#dc2626,color:#fff
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="split-overlay" style="pointer-events: none;">
|
||
<div class="split-badge">交互式流程图</div>
|
||
</div>
|
||
</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" style="background-image: url('data/订单班文档资料/能源/notion文稿/image/工业机器人图片.jpg'); background-size: cover; background-position: center; background-attachment: fixed; position: relative;">
|
||
<!-- 半透明遮罩层 -->
|
||
<div style="position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10, 26, 15, 0.92) 0%, rgba(13, 31, 19, 0.88) 100%); backdrop-filter: blur(3px);"></div>
|
||
|
||
<div class="container" style="position: relative; z-index: 1;">
|
||
<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="robot-workflow-visual" style="margin-bottom: var(--spacing-2xl);">
|
||
<div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-xl);">
|
||
<!-- 步骤1 -->
|
||
<div class="workflow-step">
|
||
<div class="workflow-icon" style="background: linear-gradient(135deg, #4a9d5f, #2d7a3f);">
|
||
<i data-lucide="play" style="width: 32px; height: 32px;"></i>
|
||
</div>
|
||
<div class="workflow-number">01</div>
|
||
<h4>等待就绪</h4>
|
||
<p>DI1信号检测</p>
|
||
</div>
|
||
|
||
<!-- 步骤2 -->
|
||
<div class="workflow-step">
|
||
<div class="workflow-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);">
|
||
<i data-lucide="hand" style="width: 32px; height: 32px;"></i>
|
||
</div>
|
||
<div class="workflow-number">02</div>
|
||
<h4>移动拾取</h4>
|
||
<p>300mm/s速度</p>
|
||
</div>
|
||
|
||
<!-- 步骤3 -->
|
||
<div class="workflow-step">
|
||
<div class="workflow-icon" style="background: linear-gradient(135deg, #3b82f6, #2563eb);">
|
||
<i data-lucide="search" style="width: 32px; height: 32px;"></i>
|
||
</div>
|
||
<div class="workflow-number">03</div>
|
||
<h4>读取结果</h4>
|
||
<p>DI2-DI3编码</p>
|
||
</div>
|
||
|
||
<!-- 步骤4 -->
|
||
<div class="workflow-step">
|
||
<div class="workflow-icon" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed);">
|
||
<i data-lucide="git-branch" style="width: 32px; height: 32px;"></i>
|
||
</div>
|
||
<div class="workflow-number">04</div>
|
||
<h4>路径判断</h4>
|
||
<p>OK/RW/NG分支</p>
|
||
</div>
|
||
|
||
<!-- 步骤5 -->
|
||
<div class="workflow-step">
|
||
<div class="workflow-icon" style="background: linear-gradient(135deg, #ec4899, #db2777);">
|
||
<i data-lucide="box" style="width: 32px; height: 32px;"></i>
|
||
</div>
|
||
<div class="workflow-number">05</div>
|
||
<h4>精确放置</h4>
|
||
<p>±0.02mm精度</p>
|
||
</div>
|
||
|
||
<!-- 步骤6 -->
|
||
<div class="workflow-step">
|
||
<div class="workflow-icon" style="background: linear-gradient(135deg, #10b981, #059669);">
|
||
<i data-lucide="rotate-ccw" style="width: 32px; height: 32px;"></i>
|
||
</div>
|
||
<div class="workflow-number">06</div>
|
||
<h4>返回循环</h4>
|
||
<p>DO1反馈信号</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 安全策略卡片 -->
|
||
<div class="card scroll-reveal-scale" style="margin-top: var(--spacing-2xl);">
|
||
<div class="card-header">
|
||
<h3 class="card-title"><i data-lucide="shield"></i> 安全策略设计</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="grid grid-2" style="gap: var(--spacing-lg);">
|
||
<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>
|
||
</ul>
|
||
<ul class="feature-list">
|
||
<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="data/订单班文档资料/能源/notion文稿/image/光伏面板室外场景图片.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; background-image: url('https://images.unsplash.com/photo-1581092160562-40aa08e78837?w=800&q=80'); background-size: cover; background-position: center; position: relative; min-height: 200px; display: flex; align-items: center; justify-content: center;">
|
||
<div style="position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13, 71, 161, 0.92) 0%, rgba(25, 118, 210, 0.88) 100%); z-index: 0;"></div>
|
||
<h3 class="card-title" style="position: relative; z-index: 1; color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.3);">⚡ 核心技术</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; background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80'); background-size: cover; background-position: center; position: relative; min-height: 200px; display: flex; align-items: center; justify-content: center;">
|
||
<div style="position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 188, 212, 0.92) 0%, rgba(0, 151, 167, 0.88) 100%); z-index: 0;"></div>
|
||
<h3 class="card-title" style="position: relative; z-index: 1; color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.3);">📊 性能指标</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; background-image: url('https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=800&q=80'); background-size: cover; background-position: center; position: relative; min-height: 200px; display: flex; align-items: center; justify-content: center;">
|
||
<div style="position: absolute; inset: 0; background: linear-gradient(135deg, rgba(76, 175, 80, 0.92) 0%, rgba(46, 125, 50, 0.88) 100%); z-index: 0;"></div>
|
||
<h3 class="card-title" style="position: relative; z-index: 1; color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.3);">🎯 应用成果</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>
|
||
|
||
<!-- Mermaid交互控制脚本 -->
|
||
<script>
|
||
// Mermaid图表缩放控制
|
||
let mermaidScales = new Map();
|
||
|
||
function mermaidZoomIn(btn) {
|
||
const container = btn.closest('.mermaid-interactive-container');
|
||
const mermaidDiv = container.querySelector('.mermaid-container');
|
||
const currentScale = mermaidScales.get(mermaidDiv) || 1;
|
||
const newScale = Math.min(currentScale + 0.2, 3);
|
||
mermaidScales.set(mermaidDiv, newScale);
|
||
mermaidDiv.style.transform = `scale(${newScale})`;
|
||
mermaidDiv.style.transformOrigin = 'top left';
|
||
}
|
||
|
||
function mermaidZoomOut(btn) {
|
||
const container = btn.closest('.mermaid-interactive-container');
|
||
const mermaidDiv = container.querySelector('.mermaid-container');
|
||
const currentScale = mermaidScales.get(mermaidDiv) || 1;
|
||
const newScale = Math.max(currentScale - 0.2, 0.5);
|
||
mermaidScales.set(mermaidDiv, newScale);
|
||
mermaidDiv.style.transform = `scale(${newScale})`;
|
||
mermaidDiv.style.transformOrigin = 'top left';
|
||
}
|
||
|
||
function mermaidReset(btn) {
|
||
const container = btn.closest('.mermaid-interactive-container');
|
||
const mermaidDiv = container.querySelector('.mermaid-container');
|
||
mermaidScales.set(mermaidDiv, 1);
|
||
mermaidDiv.style.transform = 'scale(1)';
|
||
mermaidDiv.scrollTop = 0;
|
||
mermaidDiv.scrollLeft = 0;
|
||
}
|
||
|
||
function mermaidFullscreen(btn) {
|
||
const container = btn.closest('.mermaid-interactive-container');
|
||
if (!document.fullscreenElement) {
|
||
container.requestFullscreen().catch(err => {
|
||
console.log(`Error attempting to enable fullscreen: ${err.message}`);
|
||
});
|
||
btn.querySelector('i').setAttribute('data-lucide', 'minimize');
|
||
lucide.createIcons();
|
||
} else {
|
||
document.exitFullscreen();
|
||
btn.querySelector('i').setAttribute('data-lucide', 'maximize');
|
||
lucide.createIcons();
|
||
}
|
||
}
|
||
|
||
// 监听全屏变化事件
|
||
document.addEventListener('fullscreenchange', function() {
|
||
document.querySelectorAll('.mermaid-control-btn').forEach(btn => {
|
||
const icon = btn.querySelector('i');
|
||
if (btn.getAttribute('title') === '全屏') {
|
||
if (document.fullscreenElement) {
|
||
icon.setAttribute('data-lucide', 'minimize');
|
||
} else {
|
||
icon.setAttribute('data-lucide', 'maximize');
|
||
}
|
||
}
|
||
});
|
||
lucide.createIcons();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|