Files
Agent-n8n/web_frontend/web_result/order-classes/transportation/index.html
Yep_Q 6c172673e7 feat: 为12个订单班添加专属SVG图标
详细说明:
- 为每个订单班创建专属的SVG favicon图标
- 每个图标使用渐变色和专属图形设计
- 在所有订单班的index.html中添加favicon引用
- 图标设计:
  * wenlu(文旅): 紫蓝渐变 + 地图标记
  * food(食品): 橙红渐变 + 厨师帽
  * visual-design(视觉设计): 粉紫渐变 + 画笔
  * civil(土木): 灰蓝渐变 + 建筑
  * health(大健康): 绿青渐变 + 医疗十字
  * energy(能源): 黄橙渐变 + 闪电
  * transportation(交通物流): 蓝色渐变 + 卡车
  * manufacturing(智能制造): 深蓝银色渐变 + 齿轮
  * developer(智能开发): 青绿渐变 + 代码符号
  * finance(财经商贸): 金蓝渐变 + 上升图表
  * environmental(环保): 绿蓝渐变 + 叶子
  * chemical(化工): 蓝紫渐变 + 烧杯
- 修改文件: 12个favicon.svg文件 + 12个index.html文件
- 影响模块: 所有订单班网页的视觉标识系统

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-10 17:12:22 +08:00

616 lines
31 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百车级AGV全局交通管制与充电调度系统 - 交通物流订单班</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<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">百车级AGV全局交通管制<br>与充电调度系统</h1>
<h2 class="hero-subtitle">冷链智慧共配中心智能化升级</h2>
<p class="hero-description">
<i data-lucide="truck"></i> 120台AGV协同作业<br>
<i data-lucide="zap"></i> 智能充电调度管理<br>
<i data-lucide="git-branch"></i> 全局路径优化规划
</p>
</div>
</section>
<!-- 导航栏 -->
<nav class="nav">
<div class="nav-container">
<div class="nav-item active">
<i data-lucide="target"></i>
<span>项目概述</span>
</div>
<div class="nav-item">
<i data-lucide="layers"></i>
<span>技术架构</span>
</div>
<div class="nav-item">
<i data-lucide="cpu"></i>
<span>关键模块</span>
</div>
<div class="nav-item">
<i data-lucide="settings"></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="briefcase"></i> 项目经理
</div>
<h2 class="section-title">项目背景与目标</h2>
</div>
</div>
<div class="section-content">
<div class="expert-intro">
<h3><i data-lucide="alert-circle"></i> 项目背景</h3>
<p>随着国内医药冷链物流需求的快速增长智能化、自动化已成为提升运营效率、降低人力成本和保障药品温控安全的关键手段。预计到2025年相关药房数量将增至3,000家物流中心日出件量将达到18万件配送压力大幅增加。在冷链作业环境下人工拣选效率仅为常温区的55%,且员工离职率高,导致人力成本居高不下,稳定性差,亟需引入自动化系统。</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="thermometer"></i> 低温环境:作业温度-25℃,设备适应性要求高</li>
<li><i data-lucide="users"></i> 人力成本:冷链拣选效率仅为常温区55%</li>
<li><i data-lucide="traffic-cone"></i> 交通管制:单一导航方式导致高峰期效率下降</li>
<li><i data-lucide="battery"></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="truck"></i> 支持120台多车型AGV流畅运行</li>
<li><i data-lucide="route"></i> 全局路径优化,减少拥堵与冲突</li>
<li><i data-lucide="zap"></i> 智能充电调度,保障续航与效率</li>
<li><i data-lucide="shield"></i> 低温环境稳定性与安全防护</li>
</ul>
</div>
</div>
</div>
<div class="stats" style="margin-top: var(--spacing-xl);">
<div class="stat-item">
<div class="stat-label">AGV车辆数</div>
<div class="stat-value agv-count">0台</div>
</div>
<div class="stat-item">
<div class="stat-label">日出件量</div>
<div class="stat-value daily-output">0万件</div>
</div>
<div class="stat-item">
<div class="stat-label">工作温度</div>
<div class="stat-value">-25℃</div>
</div>
<div class="stat-item">
<div class="stat-label">药房数量</div>
<div class="stat-value pharmacy-count">0家</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 2: 技术架构设计 -->
<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="layers"></i> 系统架构师
</div>
<h2 class="section-title">六层技术架构设计</h2>
</div>
</div>
<div class="section-content">
<div class="expert-intro">
<h3><i data-lucide="box"></i> 架构总览</h3>
<p>为确保120台AGV流畅、高效、安全运行,系统架构具备高度可扩展性、高并发处理能力、智能化调度与路径优化能力。架构分为六层:接入层、业务层、调度层、设备层、算法平台、仿真平台,各模块协同工作确保系统高效运行。</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-3">
<div class="card">
<div class="card-header">
<h3 class="card-title">1. 接入层</h3>
</div>
<div class="card-body">
<p><strong>功能:</strong> 接收外部数据并传递至下游系统</p>
<ul class="feature-list">
<li><i data-lucide="server"></i> ERP/MES系统对接</li>
<li><i data-lucide="database"></i> WMS/TMS任务分配</li>
<li><i data-lucide="workflow"></i> 数据流动与传递</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">2. 业务层</h3>
</div>
<div class="card-body">
<p><strong>功能:</strong> 管理仓库、任务和设备调度</p>
<ul class="feature-list">
<li><i data-lucide="package"></i> IWMS智能仓储管理</li>
<li><i data-lucide="git-branch"></i> TMS交通管理系统</li>
<li><i data-lucide="activity"></i> 路径规划与优化</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">3. 调度层</h3>
</div>
<div class="card-body">
<p><strong>功能:</strong> 实时任务调度与设备协调</p>
<ul class="feature-list">
<li><i data-lucide="calendar"></i> RCS设备调度系统</li>
<li><i data-lucide="radio"></i> WCS设备控制系统</li>
<li><i data-lucide="link"></i> PLC实时通讯</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">4. 设备层</h3>
</div>
<div class="card-body">
<p><strong>功能:</strong> AGV执行与充电管理</p>
<ul class="feature-list">
<li><i data-lucide="truck"></i> 多车型AGV混行</li>
<li><i data-lucide="map-pin"></i> 激光SLAM导航</li>
<li><i data-lucide="battery-charging"></i> 智能充电管理</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">5. 算法平台</h3>
</div>
<div class="card-body">
<p><strong>功能:</strong> 路径优化与充电算法</p>
<ul class="feature-list">
<li><i data-lucide="trending-up"></i> MILP全局优化</li>
<li><i data-lucide="bezier-curve"></i> B-spline平滑规划</li>
<li><i data-lucide="zap"></i> 充电调度算法</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">6. 仿真平台</h3>
</div>
<div class="card-body">
<p><strong>功能:</strong> 策略验证与优化</p>
<ul class="feature-list">
<li><i data-lucide="play"></i> 路径仿真验证</li>
<li><i data-lucide="bar-chart"></i> 充电策略仿真</li>
<li><i data-lucide="check-circle"></i> 方案可行性验证</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>
</div>
</section>
<!-- Section 3: 关键技术模块 -->
<section class="section">
<div class="container">
<div class="section-header">
<img src="agent-avatars/AGV算法与调度工程师.jpg" alt="AGV算法工程师" class="agent-avatar">
<div class="agent-info">
<div class="agent-name">
<i data-lucide="cpu"></i> AGV算法与调度工程师
</div>
<h2 class="section-title">关键技术模块实现</h2>
</div>
</div>
<div class="section-content">
<div class="expert-intro">
<h3><i data-lucide="blocks"></i> 核心模块</h3>
<p>系统包含AGV定位导航、路径规划调度、交通管制(TMS)、充电管理(CMS)、冷链环境适配、安全应急响应等关键模块。各模块协同工作,确保AGV系统顺畅高效运行。</p>
</div>
<div class="grid grid-4" style="margin-bottom: var(--spacing-xl);">
<div class="card">
<div class="image-container">
<img data-src="images/AGV逻辑图.jpg" alt="AGV逻辑图" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">AGV定位导航</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="radar"></i> 激光SLAM 360°扫描</li>
<li><i data-lucide="compass"></i> IMU惯性测量</li>
<li><i data-lucide="qr-code"></i> 二维码+磁钉导航</li>
<li><i data-lucide="crosshair"></i> 精度±10mm</li>
</ul>
</div>
</div>
<div class="card">
<div class="image-container">
<img data-src="images/系统控制架构图.jpg" alt="系统控制架构" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">路径规划调度</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="route"></i> MILP全局优化</li>
<li><i data-lucide="bezier-curve"></i> B-spline平滑路径</li>
<li><i data-lucide="alert-triangle"></i> 冲突实时检测</li>
<li><i data-lucide="refresh-cw"></i> 1.8秒路径重排</li>
</ul>
</div>
</div>
<div class="card">
<div class="image-container">
<img data-src="images/交通管制系统逻辑图.jpg" alt="交通管制系统" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">交通管制TMS</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="traffic-cone"></i> 红绿灯软信号</li>
<li><i data-lucide="clock"></i> 信号周期≤3秒</li>
<li><i data-lucide="arrow-right"></i> 优先级调度</li>
<li><i data-lucide="shield"></i> 路口安全控制</li>
</ul>
</div>
</div>
<div class="card">
<div class="image-container">
<img data-src="images/充电管理系统逻辑图.jpg" alt="充电管理系统" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">充电管理CMS</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="battery"></i> 电量实时监控</li>
<li><i data-lucide="zap"></i> 快充1.5C/慢充0.5C</li>
<li><i data-lucide="timer"></i> 30分钟充满70%</li>
<li><i data-lucide="percent"></i> 电量<30%自动充电</li>
</ul>
</div>
</div>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>技术模块</th>
<th>关键参数</th>
<th>性能指标</th>
<th>技术特点</th>
</tr>
</thead>
<tbody>
<tr>
<td>激光SLAM</td>
<td>Hokuyo URG-04LX</td>
<td>360°扫描,精度±10mm</td>
<td>20Hz更新,100ms定位周期</td>
</tr>
<tr>
<td>IMU传感器</td>
<td>Xsens MTi-30</td>
<td>3轴加速+陀螺+磁力</td>
<td>200Hz更新,温度补偿</td>
</tr>
<tr>
<td>路径规划</td>
<td>MILP + B-spline</td>
<td>平滑误差≤0.1mm</td>
<td>任务波动30%时1.8秒重排</td>
</tr>
<tr>
<td>交通信号</td>
<td>红绿灯软控制</td>
<td>信号周期≤3秒</td>
<td>OPC UA协议,动态调整</td>
</tr>
<tr>
<td>充电系统</td>
<td>24快充+8慢充</td>
<td>30分钟充70%电量</td>
<td>优先级调度,负载均衡</td>
</tr>
<tr>
<td>低温适配</td>
<td>-25℃工作环境</td>
<td>速度限制1.2m/s</td>
<td>低温轮胎+IP65防护</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">±10mm</div>
</div>
<div class="stat-item">
<div class="stat-label">路径重排</div>
<div class="stat-value path-replan">0秒</div>
</div>
<div class="stat-item">
<div class="stat-label">充电工位</div>
<div class="stat-value charging-stations">0个</div>
</div>
<div class="stat-item">
<div class="stat-label">工作速度</div>
<div class="stat-value">1.2m/s</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 4: 运维与支持方案 -->
<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="life-buoy"></i> 运维保障</h3>
<p>提供全面运维与支持服务,覆盖系统持续监控、故障排除、定期维护、软件升级等,确保AGV系统高效、安全、稳定运行,提供长期技术保障。</p>
</div>
<div class="grid grid-3" style="margin-bottom: var(--spacing-xl);">
<div class="card">
<div class="image-container">
<img data-src="images/后台监控与管理.jpg" alt="后台监控" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">系统监控</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="monitor"></i> 数字孪生实时监控</li>
<li><i data-lucide="activity"></i> 健康状态检查</li>
<li><i data-lucide="bar-chart-2"></i> 性能数据采集</li>
<li><i data-lucide="bell"></i> 多级报警机制</li>
</ul>
</div>
</div>
<div class="card">
<div class="image-container">
<img data-src="images/AGV故障排查检修.jpg" alt="故障排查" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">故障响应</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="clock"></i> 7×24小时服务</li>
<li><i data-lucide="zap"></i> 4小时到场响应</li>
<li><i data-lucide="search"></i> 远程故障诊断</li>
<li><i data-lucide="package"></i> 备件库存保障</li>
</ul>
</div>
</div>
<div class="card">
<div class="image-container">
<img data-src="images/技术支持与指导.jpg" alt="技术支持" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">技术支持</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="users"></i> 专业支持团队</li>
<li><i data-lucide="book-open"></i> 定期培训学习</li>
<li><i data-lucide="database"></i> 知识库文档</li>
<li><i data-lucide="trending-up"></i> 系统升级培训</li>
</ul>
</div>
</div>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>运维项目</th>
<th>服务内容</th>
<th>响应时间</th>
<th>保障措施</th>
</tr>
</thead>
<tbody>
<tr>
<td>实时监控</td>
<td>数字孪生平台,Web/3D大屏可视化</td>
<td>实时</td>
<td>电量/温度/任务/路径全方位监控</td>
</tr>
<tr>
<td>健康检查</td>
<td>电池/电机/传感器/导航系统定期检查</td>
<td>每周</td>
<td>预防性维护,提前预警</td>
</tr>
<tr>
<td>故障响应</td>
<td>7×24小时运维服务</td>
<td>≤4小时</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="image-container" style="margin-top: var(--spacing-xl);">
<img data-src="images/周期实施计划.jpg" alt="实施计划" loading="lazy">
<div class="image-caption">项目实施周期计划</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="truck"></i> 120台AGV协同作业</li>
<li><i data-lucide="package"></i> 日出件量18万件</li>
<li><i data-lucide="map"></i> 六层架构体系</li>
<li><i data-lucide="cpu"></i> MILP全局优化</li>
<li><i data-lucide="git-branch"></i> 1.8秒路径重排</li>
<li><i data-lucide="battery-charging"></i> 24快充+8慢充</li>
<li><i data-lucide="thermometer"></i> -25℃低温适配</li>
<li><i data-lucide="shield"></i> 3分钟紧急撤离</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="crosshair"></i> 定位精度±10mm</li>
<li><i data-lucide="activity"></i> 100ms定位周期</li>
<li><i data-lucide="bezier-curve"></i> 路径误差≤0.1mm</li>
<li><i data-lucide="traffic-cone"></i> 信号周期≤3秒</li>
<li><i data-lucide="zap"></i> 30分钟充70%</li>
<li><i data-lucide="gauge"></i> 工作速度1.2m/s</li>
<li><i data-lucide="shield-check"></i> IP65防护等级</li>
<li><i data-lucide="clock"></i> 4小时故障响应</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="layers"></i> 多层架构设计</li>
<li><i data-lucide="brain"></i> 智能算法平台</li>
<li><i data-lucide="route"></i> 全局路径优化</li>
<li><i data-lucide="git-merge"></i> 多车型混行</li>
<li><i data-lucide="battery"></i> 智能充电调度</li>
<li><i data-lucide="snowflake"></i> 低温环境适配</li>
<li><i data-lucide="life-buoy"></i> 7×24运维保障</li>
<li><i data-lucide="trending-up"></i> 持续优化升级</li>
</ul>
</div>
</div>
</div>
<div class="text-center" style="margin-top: var(--spacing-2xl); color: var(--text-gray);">
<p>🚛 百车级AGV全局交通管制与充电调度系统项目圆满完成!</p>
<p style="margin-top: var(--spacing-sm);">© 2024 交通物流订单班 | 智能物流解决方案</p>
</div>
</div>
</section>
<script src="js/main.js"></script>
</body>
</html>