195 lines
8.4 KiB
HTML
195 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pt-BR">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="icon" href="/logo.png" type="image/png">
|
||
<title>Otimizador de Corte - TSCUT</title>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1><img src="/logo.png" alt="Logo" class="app-logo">Otimizador de Plano de Corte</h1>
|
||
<p>Barras Lineares | Algoritmo FFD Avançado | Otimização com Múltiplas Barras</p>
|
||
<button id="themeToggle" class="theme-toggle-btn" onclick="toggleTheme()" title="Alternar Tema">🌙</button>
|
||
</header>
|
||
|
||
<div class="layout">
|
||
<!-- PAINEL DE ENTRADA -->
|
||
<div class="panel">
|
||
<h2>📥 Dados de Entrada</h2>
|
||
|
||
<div class="form-group job-title-group">
|
||
<label for="jobTitle" class="job-title-label">Título do Trabalho</label>
|
||
<input type="text" id="jobTitle" placeholder="Ex: Estrutura Galpão A" class="job-title-input">
|
||
<div class="job-actions">
|
||
<button class="btn-primary btn-small" onclick="saveJob()">💾 Salvar
|
||
Trabalho</button>
|
||
<button class="btn-primary btn-small btn-secondary"
|
||
onclick="document.getElementById('jobImport').click()">📂 Abrir Trabalho</button>
|
||
<input type="file" id="jobImport" accept=".csv" class="hidden" onchange="loadJob()"
|
||
title="Importar Trabalho">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PROCESSO DE CORTE -->
|
||
<div class="process-section">
|
||
<label class="section-label">🔥 Processo de Corte</label>
|
||
<div class="process-options">
|
||
<label class="process-option">
|
||
<input type="radio" name="cuttingProcess" value="plasma" checked onchange="updateProcess()">
|
||
<span class="process-name">Plasma (3mm)</span>
|
||
</label>
|
||
<label class="process-option">
|
||
<input type="radio" name="cuttingProcess" value="saw" onchange="updateProcess()">
|
||
<span class="process-name">Serra/Disco (2mm)</span>
|
||
</label>
|
||
<label class="process-option">
|
||
<input type="radio" name="cuttingProcess" value="oxy" onchange="updateProcess()">
|
||
<span class="process-name">Oxicorte (5mm)</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="section-divider">
|
||
|
||
<!-- BARRAS DISPONÍVEIS -->
|
||
<h3 class="section-title">📦 Barras Disponíveis</h3>
|
||
|
||
<div class="form-group">
|
||
<label for="barDesc">Descrição</label>
|
||
<input type="text" id="barDesc" placeholder="Ex: Cantoneira L3x1/4 A36">
|
||
</div>
|
||
|
||
<div class="grid-2-col">
|
||
<div class="form-group">
|
||
<label for="barQty">Quantidade</label>
|
||
<input type="number" id="barQty" value="1" min="1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="barLength">Comp. (mm)</label>
|
||
<input type="number" id="barLength" value="6000" min="100">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="barWeight">Peso (kg)</label>
|
||
<input type="number" id="barWeight" value="45" min="0.1" step="0.1">
|
||
</div>
|
||
|
||
<div class="action-row">
|
||
<button id="btnAddBar" class="btn-primary" onclick="addBar()">➕ Adicionar Barra</button>
|
||
<button id="btnCancelBarEdit" class="btn-danger hidden" onclick="cancelBarEdit()">🚫
|
||
Cancelar</button>
|
||
</div>
|
||
|
||
<div class="list-container mt-10" id="barsList">
|
||
<div class="no-data">Nenhuma barra adicionada</div>
|
||
</div>
|
||
|
||
<hr class="section-divider">
|
||
|
||
<!-- PEÇAS -->
|
||
<h3 class="section-title">✂️ Peças (Demanda)</h3>
|
||
|
||
<div class="action-row mb-10">
|
||
<button class="btn-primary import-btn" onclick="document.getElementById('fileImport').click()">📁
|
||
Importar Arquivo</button>
|
||
<input type="file" id="fileImport" accept=".xlsx,.xls,.csv" class="hidden" onchange="importFile()"
|
||
title="Importar Arquivo de Peças">
|
||
</div>
|
||
<div id="importFeedback" class="feedback-msg">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="pieceTag">TAG/Identificação</label>
|
||
<input type="text" id="pieceTag" placeholder="Ex: B101-2-15">
|
||
</div>
|
||
|
||
<div class="grid-2-col">
|
||
<div class="form-group">
|
||
<label for="pieceLength">Comp. (mm)</label>
|
||
<input type="number" id="pieceLength" placeholder="Ex: 3450" min="1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="pieceQty">Quantidade</label>
|
||
<input type="number" id="pieceQty" value="1" min="1">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="action-row">
|
||
<button id="btnAddPiece" class="btn-primary" onclick="addPiece()">➕ Adicionar Peça</button>
|
||
<button id="btnCancelEdit" class="btn-danger hidden" onclick="cancelEdit()">🚫
|
||
Cancelar</button>
|
||
</div>
|
||
|
||
<div class="list-container mt-10" id="piecesList">
|
||
<div class="no-data">Nenhuma peça adicionada</div>
|
||
</div>
|
||
|
||
<hr class="section-divider">
|
||
|
||
<button class="btn-success btn-calc" onclick="calculateOptimization()">🔄 Calcular
|
||
Otimização</button>
|
||
<button class="btn-danger btn-clear" onclick="clearAll()">🗑️
|
||
Limpar Tudo</button>
|
||
</div>
|
||
|
||
<!-- PAINEL DE RESULTADOS -->
|
||
<div>
|
||
<div class="panel">
|
||
<h2>📊 Resumo</h2>
|
||
<div class="results" id="summaryResults">
|
||
<div class="no-data grid-full-col">Calcule a otimização para ver os resultados
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel mt-20">
|
||
<h2>📌 Peças Demandadas</h2>
|
||
<div class="pieces-balloons" id="piecesBalloons">
|
||
<div class="no-data full-width">Nenhuma peça adicionada</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="export-buttons">
|
||
<button class="btn-primary" onclick="exportHTML()">📄 Exportar</button>
|
||
<button class="btn-primary" onclick="printReport()">🖨️ Imprimir</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PLANO DE CORTE -->
|
||
<div class="panel">
|
||
<h2>✂️ Plano de Corte Otimizado</h2>
|
||
<div class="bars-container" id="barsContainer">
|
||
<div class="no-data">Resultados aparecerão após o cálculo</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TOAST CONTAINER -->
|
||
<div id="toastContainer" class="toast-container"></div>
|
||
|
||
<!-- CONFIRM MODAL -->
|
||
<div id="confirmModal" class="modal-overlay">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<div class="modal-title" id="modalTitle">Confirmação</div>
|
||
</div>
|
||
<div class="modal-body" id="modalMessage">
|
||
Deseja confirmar esta ação?
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button class="modal-btn modal-btn-cancel" onclick="closeModal()">Cancelar</button>
|
||
<button class="modal-btn modal-btn-confirm" id="modalConfirmBtn">Confirmar</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="/src/main.js"></script>
|
||
</body>
|
||
|
||
</html> |