Initial commit with security updates and UI improvements
This commit is contained in:
713
RELATORIO.html
Normal file
713
RELATORIO.html
Normal file
@@ -0,0 +1,713 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Plano de Corte - Ferro Redondo 1/2" ASTM A36</title>
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: #1a6b8f;
|
||||
--color-primary-light: #2d8bb0;
|
||||
--color-success: #27ae60;
|
||||
--color-warning: #e67e22;
|
||||
--color-bg: #ffffff;
|
||||
--color-surface: #ffffff;
|
||||
--color-text: #2c3e50;
|
||||
--color-text-light: #7f8c8d;
|
||||
--color-border: #bdc3c7;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
line-height: 1.3;
|
||||
width: 210mm;
|
||||
height: 297mm;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 210mm;
|
||||
height: 297mm;
|
||||
margin: 0 auto;
|
||||
padding: 10mm;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header {
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
|
||||
color: white;
|
||||
padding: 10mm 8mm;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 6mm;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 14pt;
|
||||
margin-bottom: 2mm;
|
||||
}
|
||||
|
||||
header p {
|
||||
font-size: 8pt;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 4mm;
|
||||
margin-bottom: 6mm;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
background: var(--color-surface);
|
||||
padding: 6mm;
|
||||
border-radius: 2px;
|
||||
border-left: 2px solid var(--color-primary);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.summary-card h3 {
|
||||
font-size: 7pt;
|
||||
color: var(--color-text-light);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 3mm;
|
||||
}
|
||||
|
||||
.summary-card .value {
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.summary-card.success {
|
||||
border-left-color: var(--color-success);
|
||||
}
|
||||
|
||||
.summary-card.success .value {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.summary-card.warning {
|
||||
border-left-color: var(--color-warning);
|
||||
}
|
||||
|
||||
.summary-card.warning .value {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.cutting-plan {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4mm;
|
||||
margin-bottom: 4mm;
|
||||
}
|
||||
|
||||
.bar-section {
|
||||
background: var(--color-surface);
|
||||
padding: 6mm;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 4mm;
|
||||
padding-bottom: 2mm;
|
||||
border-bottom: 1px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.bar-title {
|
||||
font-size: 9pt;
|
||||
font-weight: bold;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.bar-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1mm;
|
||||
font-size: 7pt;
|
||||
}
|
||||
|
||||
.bar-stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2mm;
|
||||
}
|
||||
|
||||
.bar-stat-label {
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.bar-stat-value {
|
||||
font-weight: bold;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 35mm;
|
||||
border: 0.5px solid var(--color-border);
|
||||
border-radius: 2px;
|
||||
background: #fafafa;
|
||||
margin-bottom: 2mm;
|
||||
}
|
||||
|
||||
.piece-label {
|
||||
font-size: 8px;
|
||||
font-weight: bold;
|
||||
text-anchor: middle;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.waste-label {
|
||||
font-size: 7px;
|
||||
font-weight: bold;
|
||||
text-anchor: middle;
|
||||
fill: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.piece-dimension {
|
||||
font-size: 7px;
|
||||
text-anchor: middle;
|
||||
fill: var(--color-text);
|
||||
}
|
||||
|
||||
.pieces-table {
|
||||
width: 100%;
|
||||
font-size: 7pt;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 2mm;
|
||||
}
|
||||
|
||||
.pieces-table th {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
padding: 2mm;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pieces-table td {
|
||||
padding: 1.5mm;
|
||||
border-bottom: 0.5px solid var(--color-border);
|
||||
}
|
||||
|
||||
.pieces-table tr:nth-child(even) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.efficiency-bar {
|
||||
width: 100%;
|
||||
height: 8mm;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.efficiency-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--color-success) 0%, var(--color-primary-light) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 7pt;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: var(--color-surface);
|
||||
padding: 4mm;
|
||||
border-radius: 2px;
|
||||
border-top: 2px solid var(--color-primary);
|
||||
text-align: center;
|
||||
font-size: 7pt;
|
||||
color: var(--color-text-light);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@media print {
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 210mm;
|
||||
height: 297mm;
|
||||
}
|
||||
.container {
|
||||
margin: 0;
|
||||
padding: 8mm;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>📊 Plano de Corte Otimizado</h1>
|
||||
<p>Ferro Redondo 1/2" (Ø 12,7 mm) | Aço Carbono ASTM A36 | Barras de 6.000 mm</p>
|
||||
</header>
|
||||
|
||||
<div class="summary">
|
||||
<div class="summary-card success">
|
||||
<h3>Total de Peças</h3>
|
||||
<div class="value">28</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<h3>Barras Utilizadas</h3>
|
||||
<div class="value">4</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<h3>Comprimento Total Necessário</h3>
|
||||
<div class="value">20.730 mm</div>
|
||||
</div>
|
||||
<div class="summary-card warning">
|
||||
<h3>Sobra Total</h3>
|
||||
<div class="value">3.270 mm</div>
|
||||
</div>
|
||||
<div class="summary-card success">
|
||||
<h3>Eficiência de Corte</h3>
|
||||
<div class="value">86,38%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cutting-plan">
|
||||
<!-- BARRA 1 -->
|
||||
<div class="bar-section">
|
||||
<div class="bar-header">
|
||||
<div class="bar-title">📌 BARRA 1</div>
|
||||
<div class="bar-stats">
|
||||
<div class="bar-stat">
|
||||
<span class="bar-stat-label">Comprimento Usado:</span>
|
||||
<span class="bar-stat-value">5.975 mm</span>
|
||||
</div>
|
||||
<div class="bar-stat">
|
||||
<span class="bar-stat-label">Sobra:</span>
|
||||
<span class="bar-stat-value" style="color: #e67e22;">25 mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg viewBox="0 0 6200 120" height="50">
|
||||
<!-- Fundo da barra -->
|
||||
<rect x="0" y="10" width="6000" height="60" fill="#ecf0f1" stroke="#34495e" stroke-width="1.5"/>
|
||||
|
||||
<!-- Peça 1090mm (primeira) -->
|
||||
<rect x="0" y="10" width="1090" height="60" fill="#3498db" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="1090" y1="10" x2="1090" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="545" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">1090</text>
|
||||
|
||||
<!-- Peça 1090mm (segunda) -->
|
||||
<rect x="1090" y="10" width="1090" height="60" fill="#3498db" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="2180" y1="10" x2="2180" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="1635" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">1090</text>
|
||||
|
||||
<!-- Peça 1090mm (terceira) -->
|
||||
<rect x="2180" y="10" width="1090" height="60" fill="#3498db" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="3270" y1="10" x2="3270" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="2725" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">1090</text>
|
||||
|
||||
<!-- Peça 1070mm (primeira) -->
|
||||
<rect x="3270" y="10" width="1070" height="60" fill="#2ecc71" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="4340" y1="10" x2="4340" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="3805" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">1070</text>
|
||||
|
||||
<!-- Peça 1070mm (segunda) -->
|
||||
<rect x="4340" y="10" width="1070" height="60" fill="#2ecc71" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="5410" y1="10" x2="5410" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="4875" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">1070</text>
|
||||
|
||||
<!-- Peça 565mm -->
|
||||
<rect x="5410" y="10" width="565" height="60" fill="#9b59b6" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="5975" y1="10" x2="5975" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="5692.5" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">565</text>
|
||||
|
||||
<!-- Sobra -->
|
||||
<rect x="5975" y="10" width="25" height="60" fill="#e74c3c" stroke="#c0392b" stroke-width="1.5" stroke-dasharray="3,3"/>
|
||||
<text x="5987.5" y="48" style="font-size: 9px; font-weight: bold; text-anchor: middle; fill: white;">25</text>
|
||||
</svg>
|
||||
|
||||
<table class="pieces-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="padding: 1mm;">Peça</th>
|
||||
<th style="padding: 1mm;">mm</th>
|
||||
<th style="padding: 1mm;">Qtd</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding: 0.8mm;">#1-3</td>
|
||||
<td style="padding: 0.8mm;">1090</td>
|
||||
<td style="padding: 0.8mm;">3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 0.8mm;">#4-5</td>
|
||||
<td style="padding: 0.8mm;">1070</td>
|
||||
<td style="padding: 0.8mm;">2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 0.8mm;">#6</td>
|
||||
<td style="padding: 0.8mm;">565</td>
|
||||
<td style="padding: 0.8mm;">1</td>
|
||||
</tr>
|
||||
<tr style="background: #ffe6e6;">
|
||||
<td style="padding: 0.8mm;"><strong>SOBRA</strong></td>
|
||||
<td style="padding: 0.8mm;">25</td>
|
||||
<td style="padding: 0.8mm;">mm</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="efficiency-bar" style="height: 6mm;">
|
||||
<div class="efficiency-fill" style="width: 99.58%; font-size: 6pt;">99,58%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BARRA 2 -->
|
||||
<div class="bar-section">
|
||||
<div class="bar-header">
|
||||
<div class="bar-title">📌 BARRA 2</div>
|
||||
<div class="bar-stats">
|
||||
<div class="bar-stat">
|
||||
<span class="bar-stat-label">Comprimento Usado:</span>
|
||||
<span class="bar-stat-value">5.705 mm</span>
|
||||
</div>
|
||||
<div class="bar-stat">
|
||||
<span class="bar-stat-label">Sobra:</span>
|
||||
<span class="bar-stat-value" style="color: #e67e22;">295 mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg viewBox="0 0 6200 120" height="50">
|
||||
<!-- Fundo da barra -->
|
||||
<rect x="0" y="10" width="6000" height="60" fill="#ecf0f1" stroke="#34495e" stroke-width="1.5"/>
|
||||
|
||||
<!-- Peça 1040mm -->
|
||||
<rect x="0" y="10" width="1040" height="60" fill="#3498db" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="1040" y1="10" x2="1040" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="520" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">1040</text>
|
||||
|
||||
<!-- Peça 1035mm (primeira) -->
|
||||
<rect x="1040" y="10" width="1035" height="60" fill="#2ecc71" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="2075" y1="10" x2="2075" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="1557.5" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">1035</text>
|
||||
|
||||
<!-- Peça 1035mm (segunda) -->
|
||||
<rect x="2075" y="10" width="1035" height="60" fill="#2ecc71" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="3110" y1="10" x2="3110" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="2592.5" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">1035</text>
|
||||
|
||||
<!-- Peça 1035mm (terceira) -->
|
||||
<rect x="3110" y="10" width="1035" height="60" fill="#2ecc71" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="4145" y1="10" x2="4145" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="3627.5" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">1035</text>
|
||||
|
||||
<!-- Peça 1020mm -->
|
||||
<rect x="4145" y="10" width="1020" height="60" fill="#9b59b6" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="5165" y1="10" x2="5165" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="4655" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">1020</text>
|
||||
|
||||
<!-- Peça 540mm -->
|
||||
<rect x="5165" y="10" width="540" height="60" fill="#f39c12" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="5705" y1="10" x2="5705" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="5435" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">540</text>
|
||||
|
||||
<!-- Sobra -->
|
||||
<rect x="5705" y="10" width="295" height="60" fill="#e74c3c" stroke="#c0392b" stroke-width="1.5" stroke-dasharray="3,3"/>
|
||||
<text x="5852.5" y="48" style="font-size: 9px; font-weight: bold; text-anchor: middle; fill: white;">295</text>
|
||||
</svg>
|
||||
|
||||
<table class="pieces-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="padding: 1mm;">Peça</th>
|
||||
<th style="padding: 1mm;">mm</th>
|
||||
<th style="padding: 1mm;">Qtd</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding: 0.8mm;">#1</td>
|
||||
<td style="padding: 0.8mm;">1040</td>
|
||||
<td style="padding: 0.8mm;">1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 0.8mm;">#2-4</td>
|
||||
<td style="padding: 0.8mm;">1035</td>
|
||||
<td style="padding: 0.8mm;">3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 0.8mm;">#5</td>
|
||||
<td style="padding: 0.8mm;">1020</td>
|
||||
<td style="padding: 0.8mm;">1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 0.8mm;">#6</td>
|
||||
<td style="padding: 0.8mm;">540</td>
|
||||
<td style="padding: 0.8mm;">1</td>
|
||||
</tr>
|
||||
<tr style="background: #ffe6e6;">
|
||||
<td style="padding: 0.8mm;"><strong>SOBRA</strong></td>
|
||||
<td style="padding: 0.8mm;">295</td>
|
||||
<td style="padding: 0.8mm;">mm</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="efficiency-bar" style="height: 6mm;">
|
||||
<div class="efficiency-fill" style="width: 95.08%; font-size: 6pt;">95,08%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BARRA 3 -->
|
||||
<div class="bar-section">
|
||||
<div class="bar-header">
|
||||
<div class="bar-title">📌 BARRA 3</div>
|
||||
<div class="bar-stats">
|
||||
<div class="bar-stat">
|
||||
<span class="bar-stat-label">Comprimento Usado:</span>
|
||||
<span class="bar-stat-value">5.940 mm</span>
|
||||
</div>
|
||||
<div class="bar-stat">
|
||||
<span class="bar-stat-label">Sobra:</span>
|
||||
<span class="bar-stat-value" style="color: #e67e22;">60 mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg viewBox="0 0 6200 120" height="50">
|
||||
<!-- Fundo da barra -->
|
||||
<rect x="0" y="10" width="6000" height="60" fill="#ecf0f1" stroke="#34495e" stroke-width="1.5"/>
|
||||
|
||||
<!-- Peça 1020mm -->
|
||||
<rect x="0" y="10" width="1020" height="60" fill="#3498db" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="1020" y1="10" x2="1020" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="510" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">1020</text>
|
||||
|
||||
<!-- Peça 990mm -->
|
||||
<rect x="1020" y="10" width="990" height="60" fill="#2ecc71" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="2010" y1="10" x2="2010" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="1515" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">990</text>
|
||||
|
||||
<!-- Peça 980mm -->
|
||||
<rect x="2010" y="10" width="980" height="60" fill="#9b59b6" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="2990" y1="10" x2="2990" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="2500" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">980</text>
|
||||
|
||||
<!-- Peça 515mm (primeira) -->
|
||||
<rect x="2990" y="10" width="515" height="60" fill="#f39c12" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="3505" y1="10" x2="3505" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="3247.5" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">515</text>
|
||||
|
||||
<!-- Peça 515mm (segunda) -->
|
||||
<rect x="3505" y="10" width="515" height="60" fill="#f39c12" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="4020" y1="10" x2="4020" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="3762.5" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">515</text>
|
||||
|
||||
<!-- Peça 485mm (primeira) -->
|
||||
<rect x="4020" y="10" width="485" height="60" fill="#1abc9c" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="4505" y1="10" x2="4505" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="4252.5" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">485</text>
|
||||
|
||||
<!-- Peça 485mm (segunda) -->
|
||||
<rect x="4505" y="10" width="485" height="60" fill="#1abc9c" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="4990" y1="10" x2="4990" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="4737.5" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">485</text>
|
||||
|
||||
<!-- Peça 475mm (primeira) -->
|
||||
<rect x="4990" y="10" width="475" height="60" fill="#e74c3c" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="5465" y1="10" x2="5465" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="5227.5" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">475</text>
|
||||
|
||||
<!-- Peça 475mm (segunda) -->
|
||||
<rect x="5465" y="10" width="475" height="60" fill="#e74c3c" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="5940" y1="10" x2="5940" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="5702.5" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">475</text>
|
||||
|
||||
<!-- Sobra -->
|
||||
<rect x="5940" y="10" width="60" height="60" fill="#e74c3c" stroke="#c0392b" stroke-width="1.5" stroke-dasharray="3,3"/>
|
||||
<text x="5970" y="48" style="font-size: 9px; font-weight: bold; text-anchor: middle; fill: white;">60</text>
|
||||
</svg>
|
||||
|
||||
<table class="pieces-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="padding: 1mm;">Peça</th>
|
||||
<th style="padding: 1mm;">mm</th>
|
||||
<th style="padding: 1mm;">Qtd</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding: 0.8mm;">#1</td>
|
||||
<td style="padding: 0.8mm;">1020</td>
|
||||
<td style="padding: 0.8mm;">1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 0.8mm;">#2</td>
|
||||
<td style="padding: 0.8mm;">990</td>
|
||||
<td style="padding: 0.8mm;">1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 0.8mm;">#3</td>
|
||||
<td style="padding: 0.8mm;">980</td>
|
||||
<td style="padding: 0.8mm;">1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 0.8mm;">#4-5</td>
|
||||
<td style="padding: 0.8mm;">515</td>
|
||||
<td style="padding: 0.8mm;">2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 0.8mm;">#6-7</td>
|
||||
<td style="padding: 0.8mm;">485</td>
|
||||
<td style="padding: 0.8mm;">2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 0.8mm;">#8-9</td>
|
||||
<td style="padding: 0.8mm;">475</td>
|
||||
<td style="padding: 0.8mm;">2</td>
|
||||
</tr>
|
||||
<tr style="background: #ffe6e6;">
|
||||
<td style="padding: 0.8mm;"><strong>SOBRA</strong></td>
|
||||
<td style="padding: 0.8mm;">60</td>
|
||||
<td style="padding: 0.8mm;">mm</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="efficiency-bar" style="height: 6mm;">
|
||||
<div class="efficiency-fill" style="width: 99.00%; font-size: 6pt;">99,00%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BARRA 4 -->
|
||||
<div class="bar-section">
|
||||
<div class="bar-header">
|
||||
<div class="bar-title">📌 BARRA 4</div>
|
||||
<div class="bar-stats">
|
||||
<div class="bar-stat">
|
||||
<span class="bar-stat-label">Comprimento Usado:</span>
|
||||
<span class="bar-stat-value">3.110 mm</span>
|
||||
</div>
|
||||
<div class="bar-stat">
|
||||
<span class="bar-stat-label">Sobra:</span>
|
||||
<span class="bar-stat-value" style="color: #e67e22;">2.890 mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg viewBox="0 0 6200 120" height="50">
|
||||
<!-- Fundo da barra -->
|
||||
<rect x="0" y="10" width="6000" height="60" fill="#ecf0f1" stroke="#34495e" stroke-width="1.5"/>
|
||||
|
||||
<!-- Peça 475mm (primeira) -->
|
||||
<rect x="0" y="10" width="475" height="60" fill="#3498db" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="475" y1="10" x2="475" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="237.5" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">475</text>
|
||||
|
||||
<!-- Peça 475mm (segunda) -->
|
||||
<rect x="475" y="10" width="475" height="60" fill="#3498db" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="950" y1="10" x2="950" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="712.5" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">475</text>
|
||||
|
||||
<!-- Peça 460mm -->
|
||||
<rect x="950" y="10" width="460" height="60" fill="#2ecc71" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="1410" y1="10" x2="1410" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="1180" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">460</text>
|
||||
|
||||
<!-- Peça 435mm (primeira) -->
|
||||
<rect x="1410" y="10" width="435" height="60" fill="#9b59b6" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="1845" y1="10" x2="1845" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="1627.5" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">435</text>
|
||||
|
||||
<!-- Peça 435mm (segunda) -->
|
||||
<rect x="1845" y="10" width="435" height="60" fill="#9b59b6" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="2280" y1="10" x2="2280" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="2062.5" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">435</text>
|
||||
|
||||
<!-- Peça 415mm (primeira) -->
|
||||
<rect x="2280" y="10" width="415" height="60" fill="#f39c12" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="2695" y1="10" x2="2695" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="2487.5" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">415</text>
|
||||
|
||||
<!-- Peça 415mm (segunda) -->
|
||||
<rect x="2695" y="10" width="415" height="60" fill="#f39c12" stroke="#34495e" stroke-width="1.5"/>
|
||||
<line x1="3110" y1="10" x2="3110" y2="70" stroke="#000" stroke-width="1"/>
|
||||
<text x="2902.5" y="48" style="font-size: 11px; font-weight: bold; text-anchor: middle; fill: white;">415</text>
|
||||
|
||||
<!-- Sobra -->
|
||||
<rect x="3110" y="10" width="2890" height="60" fill="#e74c3c" stroke="#c0392b" stroke-width="1.5" stroke-dasharray="3,3"/>
|
||||
<text x="4555" y="48" style="font-size: 9px; font-weight: bold; text-anchor: middle; fill: white;">2890</text>
|
||||
</svg>
|
||||
|
||||
<table class="pieces-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="padding: 1mm;">Peça</th>
|
||||
<th style="padding: 1mm;">mm</th>
|
||||
<th style="padding: 1mm;">Qtd</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding: 0.8mm;">#1-2</td>
|
||||
<td style="padding: 0.8mm;">475</td>
|
||||
<td style="padding: 0.8mm;">2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 0.8mm;">#3</td>
|
||||
<td style="padding: 0.8mm;">460</td>
|
||||
<td style="padding: 0.8mm;">1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 0.8mm;">#4-5</td>
|
||||
<td style="padding: 0.8mm;">435</td>
|
||||
<td style="padding: 0.8mm;">2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 0.8mm;">#6-7</td>
|
||||
<td style="padding: 0.8mm;">415</td>
|
||||
<td style="padding: 0.8mm;">2</td>
|
||||
</tr>
|
||||
<tr style="background: #ffe6e6;">
|
||||
<td style="padding: 0.8mm;"><strong>SOBRA</strong></td>
|
||||
<td style="padding: 0.8mm;">2890</td>
|
||||
<td style="padding: 0.8mm;">mm</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="efficiency-bar" style="height: 6mm;">
|
||||
<div class="efficiency-fill" style="width: 51.83%; font-size: 6pt;">51,83%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<strong>Material:</strong> Ferro Redondo 1/2" ASTM A36 | <strong>28 peças</strong> | 20.730 mm | Eficiência 86,38% | Sobras: B1=25mm | B2=295mm | B3=60mm | B4=2.890mm
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user