Download index.html from nmtalhp/Manufacturing-Data-Overview: direct link, hf CLI and curl.
- Browser
- Download file 53.2 kB
-
https://huggingface.co/spaces/nmtalhp/Manufacturing-Data-Overview/resolve/main/index.html
- Command line
-
hf download hf://spaces/nmtalhp/Manufacturing-Data-Overview/index.html
-
curl -L -o index.html https://huggingface.co/spaces/nmtalhp/Manufacturing-Data-Overview/resolve/main/index.html
53.2 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Factory Operations Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/luxon@3.0.1"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.2.0"></script> | |
| <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> | |
| <style> | |
| .alert-flash { | |
| animation: flash 2s infinite; | |
| } | |
| @keyframes flash { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .machine-error { | |
| animation: pulse 1s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(255,0,0,0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(255,0,0,0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(255,0,0,0); } | |
| } | |
| .grid-stack-item-content { | |
| background: white; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .kpi-card { | |
| transition: all 0.3s ease; | |
| } | |
| .kpi-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Alert Bar --> | |
| <div class="bg-red-600 text-white p-2 flex justify-between items-center alert-flash"> | |
| <div class="flex space-x-4"> | |
| <span><i class="fas fa-exclamation-triangle"></i> ALERT: MACHINE #12 OVERHEATING (215°C)</span> | |
| <span><i class="fas fa-exclamation-triangle"></i> WARNING: LINE B OUTPUT 15% BELOW TARGET</span> | |
| <span><i class="fas fa-info-circle"></i> INFO: PREVENTIVE MAINTENANCE DUE IN 2 HOURS</span> | |
| </div> | |
| <div class="text-sm"> | |
| <span id="live-clock" class="font-mono"></span> | |
| </div> | |
| </div> | |
| <!-- Dashboard Header --> | |
| <div class="bg-gray-800 text-white p-4 flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-2xl font-bold">FACTORY OPERATIONS DASHBOARD</h1> | |
| <p class="text-gray-300">Plant 3 - Assembly Line Complex | Shift B (14:00-22:00)</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded">Export Report</button> | |
| <button class="bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded">Settings</button> | |
| </div> | |
| </div> | |
| <!-- Filters --> | |
| <div class="bg-white p-3 shadow flex flex-wrap gap-2"> | |
| <div class="flex items-center"> | |
| <label class="mr-2 text-sm font-medium">Date Range:</label> | |
| <input type="date" class="border rounded p-1 text-sm" value="2023-11-15"> | |
| <span class="mx-2">to</span> | |
| <input type="date" class="border rounded p-1 text-sm" value="2023-11-22"> | |
| </div> | |
| <select class="border rounded p-1 text-sm"> | |
| <option>All Shifts</option> | |
| <option>Shift A (06:00-14:00)</option> | |
| <option selected>Shift B (14:00-22:00)</option> | |
| <option>Shift C (22:00-06:00)</option> | |
| </select> | |
| <select class="border rounded p-1 text-sm"> | |
| <option selected>All Production Lines</option> | |
| <option>Line A (Assembly)</option> | |
| <option>Line B (Painting)</option> | |
| <option>Line C (Testing)</option> | |
| </select> | |
| <select class="border rounded p-1 text-sm"> | |
| <option selected>All Products</option> | |
| <option>Model X-200</option> | |
| <option>Model Y-300</option> | |
| <option>Model Z-400</option> | |
| </select> | |
| <button class="bg-blue-600 text-white px-3 py-1 rounded text-sm">Apply Filters</button> | |
| <button class="bg-gray-200 px-3 py-1 rounded text-sm">Reset</button> | |
| </div> | |
| <!-- Main Dashboard Grid --> | |
| <div class="container mx-auto p-4"> | |
| <!-- Row 1: KPI Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4 mb-4"> | |
| <!-- KPI Card 1 --> | |
| <div class="bg-white rounded-lg shadow p-4 kpi-card"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Today's Output</p> | |
| <h3 class="text-2xl font-bold">1,842</h3> | |
| <p class="text-green-600 text-sm flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> +12% vs target | |
| </p> | |
| </div> | |
| <div class="bg-blue-100 p-2 rounded-full"> | |
| <i class="fas fa-boxes text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| <span>Target: 1,650</span> | | |
| <span>Yesterday: 1,723</span> | |
| </div> | |
| </div> | |
| <!-- KPI Card 2 --> | |
| <div class="bg-white rounded-lg shadow p-4 kpi-card"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Overall OEE</p> | |
| <h3 class="text-2xl font-bold">78.2%</h3> | |
| <div class="flex space-x-2 text-xs"> | |
| <span class="text-blue-600">A:82%</span> | |
| <span class="text-orange-600">P:75%</span> | |
| <span class="text-green-600">Q:85%</span> | |
| </div> | |
| </div> | |
| <div class="bg-green-100 p-2 rounded-full"> | |
| <i class="fas fa-tachometer-alt text-green-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| <span>Target: 85%</span> | | |
| <span>Week Avg: 76.5%</span> | |
| </div> | |
| </div> | |
| <!-- KPI Card 3 --> | |
| <div class="bg-white rounded-lg shadow p-4 kpi-card"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Scrap Rate</p> | |
| <h3 class="text-2xl font-bold">2.3%</h3> | |
| <p class="text-red-600 text-sm flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> +0.4% from target | |
| </p> | |
| </div> | |
| <div class="bg-red-100 p-2 rounded-full"> | |
| <i class="fas fa-trash text-red-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| <span>Target: 1.9%</span> | | |
| <span>Week Avg: 2.1%</span> | |
| </div> | |
| </div> | |
| <!-- KPI Card 4 --> | |
| <div class="bg-white rounded-lg shadow p-4 kpi-card"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Downtime</p> | |
| <h3 class="text-2xl font-bold">5.8%</h3> | |
| <p class="text-green-600 text-sm flex items-center"> | |
| <i class="fas fa-arrow-down mr-1"></i> -1.2% from avg | |
| </p> | |
| </div> | |
| <div class="bg-orange-100 p-2 rounded-full"> | |
| <i class="fas fa-clock text-orange-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| <span>MTTR: 23min</span> | | |
| <span>MTBF: 6.7h</span> | |
| </div> | |
| </div> | |
| <!-- KPI Card 5 --> | |
| <div class="bg-white rounded-lg shadow p-4 kpi-card"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm">First Pass Yield</p> | |
| <h3 class="text-2xl font-bold">94.7%</h3> | |
| <p class="text-green-600 text-sm flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> +1.1% from target | |
| </p> | |
| </div> | |
| <div class="bg-purple-100 p-2 rounded-full"> | |
| <i class="fas fa-check-circle text-purple-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| <span>Target: 93.6%</span> | | |
| <span>Week Avg: 93.9%</span> | |
| </div> | |
| </div> | |
| <!-- KPI Card 6 --> | |
| <div class="bg-white rounded-lg shadow p-4 kpi-card"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Energy Usage</p> | |
| <h3 class="text-2xl font-bold">1,245 kWh</h3> | |
| <p class="text-red-600 text-sm flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> +8% from target | |
| </p> | |
| </div> | |
| <div class="bg-yellow-100 p-2 rounded-full"> | |
| <i class="fas fa-bolt text-yellow-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| <span>Target: 1,150 kWh</span> | | |
| <span>Cost: $149.40</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Row 2: Machine Metrics --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4"> | |
| <!-- Output Trends --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-semibold">Production Output by Line (Last 7 Days)</h3> | |
| <div class="flex space-x-1"> | |
| <button class="bg-gray-200 px-2 py-1 rounded text-xs">Units</button> | |
| <button class="bg-blue-100 px-2 py-1 rounded text-xs">% Target</button> | |
| </div> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="outputTrendChart"></canvas> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500 flex justify-between"> | |
| <span>Line A: 12,540 units (102% of target)</span> | |
| <span>Line B: 11,230 units (93% of target)</span> | |
| <span>Line C: 12,890 units (105% of target)</span> | |
| </div> | |
| </div> | |
| <!-- Downtime Reasons --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-semibold">Downtime by Cause (Current Shift)</h3> | |
| <select class="border rounded p-1 text-xs"> | |
| <option>By Minutes</option> | |
| <option selected>By Percentage</option> | |
| </select> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="downtimeChart"></canvas> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| Total Downtime: 87 minutes (5.8% of shift) | |
| </div> | |
| </div> | |
| <!-- OEE Radar --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-semibold">OEE by Shift & Line</h3> | |
| <div class="flex space-x-1"> | |
| <button class="bg-blue-100 px-2 py-1 rounded text-xs">All Lines</button> | |
| </div> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="oeeRadarChart"></canvas> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500 flex justify-between"> | |
| <span>Shift A Avg: 82.3%</span> | |
| <span>Shift B Avg: 78.2%</span> | |
| <span>Shift C Avg: 74.6%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Row 3: Quality & Yield --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4"> | |
| <!-- Calendar Heatmap --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-semibold">Machine Failures Heatmap (November)</h3> | |
| <select class="border rounded p-1 text-xs"> | |
| <option selected>All Machines</option> | |
| <option>Line A Machines</option> | |
| <option>Line B Machines</option> | |
| </select> | |
| </div> | |
| <div class="h-64 flex items-center justify-center"> | |
| <div class="grid grid-cols-7 gap-1 text-xs"> | |
| <!-- This is a simplified representation - in a real app you'd use a proper heatmap library --> | |
| <div class="w-8 h-8 bg-green-100 rounded flex items-center justify-center">S</div> | |
| <div class="w-8 h-8 bg-green-100 rounded flex items-center justify-center">M</div> | |
| <div class="w-8 h-8 bg-green-100 rounded flex items-center justify-center">T</div> | |
| <div class="w-8 h-8 bg-green-100 rounded flex items-center justify-center">W</div> | |
| <div class="w-8 h-8 bg-green-100 rounded flex items-center justify-center">T</div> | |
| <div class="w-8 h-8 bg-green-100 rounded flex items-center justify-center">F</div> | |
| <div class="w-8 h-8 bg-green-100 rounded flex items-center justify-center">S</div> | |
| <!-- Week 1 --> | |
| <div class="w-8 h-8 bg-green-100 rounded flex items-center justify-center"></div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">1</div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">2</div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">3</div> | |
| <div class="w-8 h-8 bg-yellow-200 rounded flex items-center justify-center">4</div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">5</div> | |
| <div class="w-8 h-8 bg-green-100 rounded flex items-center justify-center">6</div> | |
| <!-- Week 2 --> | |
| <div class="w-8 h-8 bg-green-100 rounded flex items-center justify-center">7</div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">8</div> | |
| <div class="w-8 h-8 bg-orange-200 rounded flex items-center justify-center">9</div> | |
| <div class="w-8 h-8 bg-red-200 rounded flex items-center justify-center">10</div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">11</div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">12</div> | |
| <div class="w-8 h-8 bg-green-100 rounded flex items-center justify-center">13</div> | |
| <!-- Week 3 --> | |
| <div class="w-8 h-8 bg-green-100 rounded flex items-center justify-center">14</div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">15</div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">16</div> | |
| <div class="w-8 h-8 bg-yellow-200 rounded flex items-center justify-center">17</div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">18</div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">19</div> | |
| <div class="w-8 h-8 bg-green-100 rounded flex items-center justify-center">20</div> | |
| <!-- Week 4 --> | |
| <div class="w-8 h-8 bg-green-100 rounded flex items-center justify-center">21</div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">22</div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">23</div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">24</div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">25</div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">26</div> | |
| <div class="w-8 h-8 bg-green-100 rounded flex items-center justify-center">27</div> | |
| <!-- Week 5 --> | |
| <div class="w-8 h-8 bg-green-100 rounded flex items-center justify-center">28</div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">29</div> | |
| <div class="w-8 h-8 bg-green-200 rounded flex items-center justify-center">30</div> | |
| <div class="w-8 h-8 rounded flex items-center justify-center"></div> | |
| <div class="w-8 h-8 rounded flex items-center justify-center"></div> | |
| <div class="w-8 h-8 rounded flex items-center justify-center"></div> | |
| <div class="w-8 h-8 rounded flex items-center justify-center"></div> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500 flex justify-between"> | |
| <span class="flex items-center"><span class="w-3 h-3 bg-green-200 mr-1"></span> 0-1 failures</span> | |
| <span class="flex items-center"><span class="w-3 h-3 bg-yellow-200 mr-1"></span> 2-3 failures</span> | |
| <span class="flex items-center"><span class="w-3 h-3 bg-orange-200 mr-1"></span> 4-5 failures</span> | |
| <span class="flex items-center"><span class="w-3 h-3 bg-red-200 mr-1"></span> 5+ failures</span> | |
| </div> | |
| </div> | |
| <!-- Pareto Chart --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-semibold">Defect Pareto Analysis (Last 30 Days)</h3> | |
| <select class="border rounded p-1 text-xs"> | |
| <option selected>All Products</option> | |
| <option>Model X-200</option> | |
| <option>Model Y-300</option> | |
| </select> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="paretoChart"></canvas> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| Top 3 defects account for 78% of total quality issues | |
| </div> | |
| </div> | |
| <!-- Yield Waterfall --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-semibold">Yield Loss Breakdown (Current Shift)</h3> | |
| <div class="flex space-x-1"> | |
| <button class="bg-blue-100 px-2 py-1 rounded text-xs">Units</button> | |
| <button class="bg-gray-200 px-2 py-1 rounded text-xs">%</button> | |
| </div> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="waterfallChart"></canvas> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| Total Yield Loss: 97 units (5.3% of production) | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Row 4: Supply Chain & Energy --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4"> | |
| <!-- Machine Map --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-semibold">Plant Floor Machine Status</h3> | |
| <div class="flex space-x-1"> | |
| <button class="bg-blue-100 px-2 py-1 rounded text-xs">Refresh</button> | |
| </div> | |
| </div> | |
| <div class="h-64 relative"> | |
| <!-- Simplified plant floor representation --> | |
| <div class="absolute inset-0 bg-gray-100 rounded"> | |
| <!-- Line A --> | |
| <div class="absolute left-4 top-4 w-32 h-12 bg-green-100 rounded flex items-center justify-center border border-green-300"> | |
| <span class="text-xs">M1: Running</span> | |
| </div> | |
| <div class="absolute left-4 top-20 w-32 h-12 bg-green-100 rounded flex items-center justify-center border border-green-300"> | |
| <span class="text-xs">M2: Running</span> | |
| </div> | |
| <div class="absolute left-4 top-36 w-32 h-12 bg-red-100 rounded flex items-center justify-center border border-red-300 machine-error"> | |
| <span class="text-xs">M3: Error</span> | |
| </div> | |
| <!-- Line B --> | |
| <div class="absolute left-40 top-4 w-32 h-12 bg-yellow-100 rounded flex items-center justify-center border border-yellow-300"> | |
| <span class="text-xs">M4: Idle</span> | |
| </div> | |
| <div class="absolute left-40 top-20 w-32 h-12 bg-green-100 rounded flex items-center justify-center border border-green-300"> | |
| <span class="text-xs">M5: Running</span> | |
| </div> | |
| <div class="absolute left-40 top-36 w-32 h-12 bg-green-100 rounded flex items-center justify-center border border-green-300"> | |
| <span class="text-xs">M6: Running</span> | |
| </div> | |
| <!-- Line C --> | |
| <div class="absolute left-76 top-4 w-32 h-12 bg-green-100 rounded flex items-center justify-center border border-green-300"> | |
| <span class="text-xs">M7: Running</span> | |
| </div> | |
| <div class="absolute left-76 top-20 w-32 h-12 bg-gray-100 rounded flex items-center justify-center border border-gray-300"> | |
| <span class="text-xs">M8: Offline</span> | |
| </div> | |
| <div class="absolute left-76 top-36 w-32 h-12 bg-green-100 rounded flex items-center justify-center border border-green-300"> | |
| <span class="text-xs">M9: Running</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500 flex justify-between"> | |
| <span class="flex items-center"><span class="w-3 h-3 bg-green-100 mr-1"></span> Running</span> | |
| <span class="flex items-center"><span class="w-3 h-3 bg-yellow-100 mr-1"></span> Idle</span> | |
| <span class="flex items-center"><span class="w-3 h-3 bg-red-100 mr-1"></span> Error</span> | |
| <span class="flex items-center"><span class="w-3 h-3 bg-gray-100 mr-1"></span> Offline</span> | |
| </div> | |
| </div> | |
| <!-- Energy Usage --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-semibold">Energy Consumption by Area</h3> | |
| <select class="border rounded p-1 text-xs"> | |
| <option selected>Last 24 Hours</option> | |
| <option>Last 7 Days</option> | |
| <option>Last 30 Days</option> | |
| </select> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="energyChart"></canvas> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| Total Consumption: 1,245 kWh | Peak: 78 kW at 15:30 | |
| </div> | |
| </div> | |
| <!-- Cycle Time --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-semibold">Cycle Time vs Takt Time</h3> | |
| <select class="border rounded p-1 text-xs"> | |
| <option selected>Line A</option> | |
| <option>Line B</option> | |
| <option>Line C</option> | |
| </select> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="cycleTimeChart"></canvas> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500 flex justify-between"> | |
| <span>Avg Cycle: 42.3s</span> | |
| <span>Takt Time: 45.0s</span> | |
| <span>Efficiency: 94%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Row 5: Flow Diagrams + Tables --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4"> | |
| <!-- Sankey Diagram --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-semibold">Material Flow Across Stations</h3> | |
| <select class="border rounded p-1 text-xs"> | |
| <option selected>Model X-200</option> | |
| <option>Model Y-300</option> | |
| </select> | |
| </div> | |
| <div class="h-64 flex items-center justify-center bg-gray-50 rounded"> | |
| <p class="text-gray-400">Sankey Diagram Visualization</p> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| Total Input: 1,850 units | Final Output: 1,723 units (93.1% yield) | |
| </div> | |
| </div> | |
| <!-- Network Graph --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-semibold">Machine Dependencies</h3> | |
| <div class="flex space-x-1"> | |
| <button class="bg-blue-100 px-2 py-1 rounded text-xs">Show All</button> | |
| </div> | |
| </div> | |
| <div class="h-64 flex items-center justify-center bg-gray-50 rounded"> | |
| <p class="text-gray-400">Network Graph Visualization</p> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| 3 critical paths identified (highlighted in red) | |
| </div> | |
| </div> | |
| <!-- Parallel Coordinates --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-semibold">Process Parameter Correlations</h3> | |
| <select class="border rounded p-1 text-xs"> | |
| <option selected>Temperature</option> | |
| <option>Pressure</option> | |
| <option>Speed</option> | |
| </select> | |
| </div> | |
| <div class="h-64 flex items-center justify-center bg-gray-50 rounded"> | |
| <p class="text-gray-400">Parallel Coordinates Visualization</p> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| Showing 1,240 batches with quality outcomes | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Row 6: Data Tables --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4"> | |
| <!-- Batch Data --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-semibold">Recent Production Batches</h3> | |
| <div class="flex space-x-1"> | |
| <button class="bg-blue-100 px-2 py-1 rounded text-xs">Export</button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full text-xs"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-2 py-1 text-left">Batch ID</th> | |
| <th class="px-2 py-1 text-left">Product</th> | |
| <th class="px-2 py-1 text-left">Line</th> | |
| <th class="px-2 py-1 text-right">Quantity</th> | |
| <th class="px-2 py-1 text-right">Start</th> | |
| <th class="px-2 py-1 text-right">End</th> | |
| <th class="px-2 py-1 text-right">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-2 py-1">B-1123-456</td> | |
| <td class="px-2 py-1">X-200</td> | |
| <td class="px-2 py-1">A</td> | |
| <td class="px-2 py-1 text-right">250</td> | |
| <td class="px-2 py-1 text-right">14:30</td> | |
| <td class="px-2 py-1 text-right">16:45</td> | |
| <td class="px-2 py-1 text-right text-green-600">Completed</td> | |
| </tr> | |
| <tr> | |
| <td class="px-2 py-1">B-1123-457</td> | |
| <td class="px-2 py-1">Y-300</td> | |
| <td class="px-2 py-1">B</td> | |
| <td class="px-2 py-1 text-right">180</td> | |
| <td class="px-2 py-1 text-right">16:50</td> | |
| <td class="px-2 py-1 text-right">-</td> | |
| <td class="px-2 py-1 text-right text-blue-600">In Progress</td> | |
| </tr> | |
| <tr> | |
| <td class="px-2 py-1">B-1123-458</td> | |
| <td class="px-2 py-1">X-200</td> | |
| <td class="px-2 py-1">C</td> | |
| <td class="px-2 py-1 text-right">300</td> | |
| <td class="px-2 py-1 text-right">13:15</td> | |
| <td class="px-2 py-1 text-right">18:30</td> | |
| <td class="px-2 py-1 text-right text-green-600">Completed</td> | |
| </tr> | |
| <tr> | |
| <td class="px-2 py-1">B-1123-459</td> | |
| <td class="px-2 py-1">Z-400</td> | |
| <td class="px-2 py-1">A</td> | |
| <td class="px-2 py-1 text-right">200</td> | |
| <td class="px-2 py-1 text-right">18:45</td> | |
| <td class="px-2 py-1 text-right">-</td> | |
| <td class="px-2 py-1 text-right text-blue-600">In Progress</td> | |
| </tr> | |
| <tr> | |
| <td class="px-2 py-1">B-1123-460</td> | |
| <td class="px-2 py-1">Y-300</td> | |
| <td class="px-2 py-1">B</td> | |
| <td class="px-2 py-1 text-right">220</td> | |
| <td class="px-2 py-1 text-right">12:00</td> | |
| <td class="px-2 py-1 text-right">15:20</td> | |
| <td class="px-2 py-1 text-right text-green-600">Completed</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| Showing 5 of 12 batches today | |
| </div> | |
| </div> | |
| <!-- Sensor Data --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-semibold">Machine Sensor Readings</h3> | |
| <div class="flex space-x-1"> | |
| <button class="bg-blue-100 px-2 py-1 rounded text-xs">Live</button> | |
| <button class="bg-gray-200 px-2 py-1 rounded text-xs">Pause</button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full text-xs"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-2 py-1 text-left">Machine</th> | |
| <th class="px-2 py-1 text-right">Temp (°C)</th> | |
| <th class="px-2 py-1 text-right">Vibration</th> | |
| <th class="px-2 py-1 text-right">Pressure</th> | |
| <th class="px-2 py-1 text-right">Speed</th> | |
| <th class="px-2 py-1 text-right">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-2 py-1">M1</td> | |
| <td class="px-2 py-1 text-right">72.4</td> | |
| <td class="px-2 py-1 text-right">2.1</td> | |
| <td class="px-2 py-1 text-right">3.4</td> | |
| <td class="px-2 py-1 text-right">95%</td> | |
| <td class="px-2 py-1 text-right text-green-600">Normal</td> | |
| </tr> | |
| <tr> | |
| <td class="px-2 py-1">M2</td> | |
| <td class="px-2 py-1 text-right">68.7</td> | |
| <td class="px-2 py-1 text-right">1.8</td> | |
| <td class="px-2 py-1 text-right">3.2</td> | |
| <td class="px-2 py-1 text-right">92%</td> | |
| <td class="px-2 py-1 text-right text-green-600">Normal</td> | |
| </tr> | |
| <tr> | |
| <td class="px-2 py-1">M3</td> | |
| <td class="px-2 py-1 text-right text-red-600 font-bold">215.0</td> | |
| <td class="px-2 py-1 text-right text-red-600 font-bold">5.7</td> | |
| <td class="px-2 py-1 text-right text-red-600 font-bold">4.8</td> | |
| <td class="px-2 py-1 text-right">0%</td> | |
| <td class="px-2 py-1 text-right text-red-600 font-bold">Error</td> | |
| </tr> | |
| <tr> | |
| <td class="px-2 py-1">M4</td> | |
| <td class="px-2 py-1 text-right">45.2</td> | |
| <td class="px-2 py-1 text-right">0.5</td> | |
| <td class="px-2 py-1 text-right">1.0</td> | |
| <td class="px-2 py-1 text-right">0%</td> | |
| <td class="px-2 py-1 text-right text-yellow-600">Idle</td> | |
| </tr> | |
| <tr> | |
| <td class="px-2 py-1">M5</td> | |
| <td class="px-2 py-1 text-right">75.3</td> | |
| <td class="px-2 py-1 text-right">2.3</td> | |
| <td class="px-2 py-1 text-right">3.5</td> | |
| <td class="px-2 py-1 text-right">88%</td> | |
| <td class="px-2 py-1 text-right text-green-600">Normal</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| 3 anomalies detected in last 15 minutes | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Update live clock | |
| function updateClock() { | |
| const now = new Date(); | |
| const timeString = now.toLocaleTimeString('en-US', {hour12: false}); | |
| const dateString = now.toLocaleDateString('en-US', {year: 'numeric', month: 'short', day: 'numeric'}); | |
| document.getElementById('live-clock').textContent = `${dateString} ${timeString}`; | |
| } | |
| setInterval(updateClock, 1000); | |
| updateClock(); | |
| // Chart 1: Output Trends | |
| const outputTrendCtx = document.getElementById('outputTrendChart').getContext('2d'); | |
| const outputTrendChart = new Chart(outputTrendCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], | |
| datasets: [ | |
| { | |
| label: 'Line A', | |
| data: [1750, 1820, 1680, 1920, 1850, 1650, 1200], | |
| borderColor: 'rgba(59, 130, 246, 1)', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Line B', | |
| data: [1620, 1580, 1720, 1650, 1780, 1520, 1100], | |
| borderColor: 'rgba(249, 115, 22, 1)', | |
| backgroundColor: 'rgba(249, 115, 22, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Line C', | |
| data: [1850, 1920, 1780, 2020, 1950, 1750, 1300], | |
| borderColor: 'rgba(16, 185, 129, 1)', | |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false, | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| title: { | |
| display: true, | |
| text: 'Units Produced' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Chart 2: Downtime Reasons | |
| const downtimeCtx = document.getElementById('downtimeChart').getContext('2d'); | |
| const downtimeChart = new Chart(downtimeCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Mechanical', 'Electrical', 'Material Wait', 'Changeover', 'Cleaning', 'Other'], | |
| datasets: [{ | |
| label: 'Downtime Minutes', | |
| data: [32, 18, 15, 12, 7, 3], | |
| backgroundColor: [ | |
| 'rgba(239, 68, 68, 0.7)', | |
| 'rgba(249, 115, 22, 0.7)', | |
| 'rgba(234, 179, 8, 0.7)', | |
| 'rgba(59, 130, 246, 0.7)', | |
| 'rgba(139, 92, 246, 0.7)', | |
| 'rgba(6, 182, 212, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(239, 68, 68, 1)', | |
| 'rgba(249, 115, 22, 1)', | |
| 'rgba(234, 179, 8, 1)', | |
| 'rgba(59, 130, 246, 1)', | |
| 'rgba(139, 92, 246, 1)', | |
| 'rgba(6, 182, 212, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| const total = context.dataset.data.reduce((a, b) => a + b, 0); | |
| const percentage = Math.round((context.raw / total) * 100); | |
| return `${context.raw} min (${percentage}%)`; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| title: { | |
| display: true, | |
| text: 'Minutes' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Chart 3: OEE Radar | |
| const oeeRadarCtx = document.getElementById('oeeRadarChart').getContext('2d'); | |
| const oeeRadarChart = new Chart(oeeRadarCtx, { | |
| type: 'radar', | |
| data: { | |
| labels: ['Availability', 'Performance', 'Quality', 'Uptime', 'Speed', 'Yield'], | |
| datasets: [ | |
| { | |
| label: 'Shift A', | |
| data: [85, 82, 88, 87, 80, 86], | |
| backgroundColor: 'rgba(59, 130, 246, 0.2)', | |
| borderColor: 'rgba(59, 130, 246, 1)', | |
| borderWidth: 2, | |
| pointBackgroundColor: 'rgba(59, 130, 246, 1)' | |
| }, | |
| { | |
| label: 'Shift B', | |
| data: [80, 75, 85, 78, 72, 83], | |
| backgroundColor: 'rgba(16, 185, 129, 0.2)', | |
| borderColor: 'rgba(16, 185, 129, 1)', | |
| borderWidth: 2, | |
| pointBackgroundColor: 'rgba(16, 185, 129, 1)' | |
| }, | |
| { | |
| label: 'Shift C', | |
| data: [78, 70, 80, 75, 68, 78], | |
| backgroundColor: 'rgba(249, 115, 22, 0.2)', | |
| borderColor: 'rgba(249, 115, 22, 1)', | |
| borderWidth: 2, | |
| pointBackgroundColor: 'rgba(249, 115, 22, 1)' | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| r: { | |
| angleLines: { | |
| display: true | |
| }, | |
| suggestedMin: 50, | |
| suggestedMax: 100, | |
| ticks: { | |
| stepSize: 10 | |
| } | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| } | |
| } | |
| } | |
| }); | |
| // Chart 4: Pareto Chart | |
| const paretoCtx = document.getElementById('paretoChart').getContext('2d'); | |
| const paretoChart = new Chart(paretoCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Paint Defect', 'Dent', 'Misalignment', 'Scratch', 'Electrical', 'Other'], | |
| datasets: [ | |
| { | |
| label: 'Defect Count', | |
| data: [142, 98, 65, 43, 28, 32], | |
| backgroundColor: 'rgba(59, 130, 246, 0.7)', | |
| borderColor: 'rgba(59, 130, 246, 1)', | |
| borderWidth: 1, | |
| order: 1 | |
| }, | |
| { | |
| label: 'Cumulative %', | |
| data: [28.4, 48.0, 61.0, 69.6, 75.2, 81.6], | |
| type: 'line', | |
| borderColor: 'rgba(239, 68, 68, 1)', | |
| backgroundColor: 'rgba(239, 68, 68, 0.1)', | |
| borderWidth: 2, | |
| pointBackgroundColor: 'rgba(239, 68, 68, 1)', | |
| fill: false, | |
| yAxisID: 'y1', | |
| order: 0 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| title: { | |
| display: true, | |
| text: 'Defect Count' | |
| }, | |
| beginAtZero: true | |
| }, | |
| y1: { | |
| position: 'right', | |
| title: { | |
| display: true, | |
| text: 'Cumulative %' | |
| }, | |
| min: 0, | |
| max: 100, | |
| grid: { | |
| drawOnChartArea: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Chart 5: Waterfall Chart | |
| const waterfallCtx = document.getElementById('waterfallChart').getContext('2d'); | |
| const waterfallChart = new Chart(waterfallCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Input', 'Scrap', 'Rework', 'Test Fail', 'Final Output'], | |
| datasets: [{ | |
| label: 'Units', | |
| data: [1850, -42, -35, -20, 1753], | |
| backgroundColor: [ | |
| 'rgba(59, 130, 246, 0.7)', | |
| 'rgba(239, 68, 68, 0.7)', | |
| 'rgba(234, 179, 8, 0.7)', | |
| 'rgba(249, 115, 22, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(59, 130, 246, 1)', | |
| 'rgba(239, 68, 68, 1)', | |
| 'rgba(234, 179, 8, 1)', | |
| 'rgba(249, 115, 22, 1)', | |
| 'rgba(16, 185, 129, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return `${context.parsed.y} units`; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| title: { | |
| display: true, | |
| text: 'Units' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Chart 6: Energy Usage | |
| const energyCtx = document.getElementById('energyChart').getContext('2d'); | |
| const energyChart = new Chart(energyCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'], | |
| datasets: [ | |
| { | |
| label: 'Line A', | |
| data: [15, 18, 42, 65, 72, 38], | |
| borderColor: 'rgba(59, 130, 246, 1)', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Line B', | |
| data: [12, 15, 38, 58, 68, 32], | |
| borderColor: 'rgba(249, 115, 22, 1)', | |
| backgroundColor: 'rgba(249, 115, 22, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Line C', | |
| data: [18, 22, 48, 72, 78, 42], | |
| borderColor: 'rgba(16, 185, 129, 1)', | |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| title: { | |
| display: true, | |
| text: 'kW' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Chart 7: Cycle Time | |
| const cycleTimeCtx = document.getElementById('cycleTimeChart').getContext('2d'); | |
| const cycleTimeChart = new Chart(cycleTimeCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'], | |
| datasets: [ | |
| { | |
| label: 'Actual Cycle Time', | |
| data: [43.2, 42.8, 41.5, 42.1, 43.5, 42.9, 41.8], | |
| borderColor: 'rgba(59, 130, 246, 1)', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Takt Time', | |
| data: [45, 45, 45, 45, 45, 45, 45], | |
| borderColor: 'rgba(16, 185, 129, 1)', | |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', | |
| borderDash: [5, 5], | |
| tension: 0, | |
| fill: false | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| title: { | |
| display: true, | |
| text: 'Seconds' | |
| }, | |
| min: 40, | |
| max: 50 | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=nmtalhp/bio-research-datasheet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |