제목 없음

Source: Dev.to

번역을 진행하려면 번역이 필요한 전체 텍스트를 제공해 주시겠어요? 텍스트를 보내주시면 그대로 마크다운 형식과 코드 블록, URL 등을 유지하면서 한국어로 번역해 드리겠습니다.

  Cadastro de Produção PCP - Paris Atacado
  
    /* CSS is included in the CSS section below */
  

  
    Salvar Lote
    📥 Exportar para Excel (.csv)
    Limpar Todo o Banco
  

  
    
      
### 📋 Tabela de Produção Real-Time

      
        
          
            Lote
            Produto
            Qtd
            Oficina
            Data
            Status
          
        
        
      
    
  

  
  

  
    // JavaScript is included in the JS section below

CSS

.btn-group { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
button { cursor: pointer; border: none; border-radius: 5px; padding: 12px; font-weight: bold; color: white; transition: 0.3s; }
.btn-add { background: var(--green); }
.btn-export { background: #21262d; border: 1px solid var(--border); }
.btn-clear { background: var(--red); font-size: 0.7rem; opacity: 0.7; }
button:hover { filter: brightness(1.2); }

/* Área de Dados e Gráficos */
.main-content { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card { background: var(--card); padding: 20px; border-radius: 8px; border: 1px solid var(--border); }

table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
th { background: #21262d; color: var(--blue); text-align: left; padding: 12px; border-bottom: 2px solid var(--border); }
td { padding: 10px; border-bottom: 1px solid var(--border); }
.status-badge { padding: 4px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: bold; }

자바스크립트

let registros = JSON.parse(localStorage.getItem('paris_pcp_db')) || [];

function init() {
    renderCharts();
    atualizarTela();
}

function adicionarLote() {
    const novo = {
        lote: document.getElementById('lote').value,
        sku: document.getElementById('sku').value,
        qtd: parseInt(document.getElementById('qtd').value) || 0,
        oficina: document.getElementById('oficina').value,
        status: document.getElementById('status').value,
        data: document.getElementById('data').value
    };

    if (!novo.lote || !novo.qtd) return alert("Preencha Lote e Quantidade!");

    registros.push(novo);
    localStorage.setItem('paris_pcp_db', JSON.stringify(registros));
    atualizarTela();
    document.getElementById('lote').value = '';
    document.getElementById('qtd').value = '';
}

function atualizarTela() {
    const lista = document.getElementById('listaLotes');
    lista.innerHTML = '';

    let dadosOficina = {};
    let dadosMix = {};

    registros.forEach(r => {
        lista.innerHTML += `
            
                #${r.lote}
                ${r.sku}
                ${r.qtd}
                ${r.oficina}
                ${r.data}
                ${r.status}
            `;

        dadosOficina[r.oficina] = (dadosOficina[r.oficina] || 0) + r.qtd;
        dadosMix[r.sku] = (dadosMix[r.sku] || 0) + r.qtd;
    });

    chart1.data.labels = Object.keys(dadosOficina);
    chart1.data.datasets[0].data = Object.values(dadosOficina);
    chart1.update();

    chart2.data.labels = Object.keys(dadosMix);
    chart2.data.datasets[0].data = Object.values(dadosMix);
    chart2.update();
}

function renderCharts() {
    Chart.defaults.color = '#8b949e';
    chart1 = new Chart(document.getElementById('chartOficina'), {
        type: 'bar',
        data: {
            labels: [],
            datasets: [{ label: 'Peças', data: [], backgroundColor: '#58a6ff' }]
        }
    });
    chart2 = new Chart(document.getElementById('chartMix'), {
        type: 'doughnut',
        data: {
            labels: [],
            datasets: [{ data: [], backgroundColor: ['#238636', '#8957e5', '#d29922', '#1f6feb'] }]
        }
    });
}

function exportarCSV() {
    let csv = "\uFEFFLote;Produto;Quantidade;Oficina;Data;Status\n";
    registros.forEach(r => {
        csv += `${r.lote};${r.sku};${r.qtd};${r.oficina};${r.data};${r.status}\n`;
    });
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = "producao_paris_atacado.csv";
    link.click();
}

function limparTudo() {
    if (confirm("Apagar tudo?")) {
        localStorage.clear();
        registros = [];
        atualizarTela();
    }
}

window.onload = init;