|
|
<!DOCTYPE html> |
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="container mx-auto p-4"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4 mb-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">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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4"> |
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4"> |
|
|
|
|
|
<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"> |
|
|
|
|
|
<div class="absolute inset-0 bg-gray-100 rounded"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
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(); |
|
|
|
|
|
|
|
|
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' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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', |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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 |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
