Files
SteelBase/public/docs-historicos/DIAGRAMA-SISTEMA.md

465 lines
20 KiB
Markdown

# 📊 Diagrama Visual do Sistema de Banco de Dados
## 🏗️ Arquitetura Geral
```
┌─────────────────────────────────────────────────────────────┐
│ APLICAÇÃO WEB │
│ (index.html) │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ SISTEMA DE SCRIPTS │
├─────────────────────────────────────────────────────────────┤
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Data Manager │ │Perfis Loader │ │ Admin Panel │ │
│ │ (Core) │ │ (UI Logic) │ │ (Admin) │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │ │ │ │
│ └──────────────────┴──────────────────┘ │
│ │ │
└────────────────────────────┼─────────────────────────────────┘
┌───────────┴───────────┐
│ │
▼ ▼
┌──────────────┐ ┌──────────────┐
│ localStorage │ │ CSV Files │
│ (Cache) │ │ (BD/perfis) │
└──────────────┘ └──────────────┘
```
---
## 🔄 Fluxo de Dados Completo
```
INICIALIZAÇÃO
═════════════
1. Página Carrega
├─> Carrega data-manager.js
│ │
│ └─> new DataManager()
│ │
│ └─> init()
│ │
│ ├─> getMetadata()
│ │ │
│ │ ├─> Cache existe? ──YES──> Dados prontos ✅
│ │ │
│ │ └─> NO ──> updateAllData()
│ │ │
│ │ ├─> loadCSV('cantoneiras')
│ │ ├─> loadCSV('barras_redondas')
│ │ ├─> loadCSV('tubos_circulares')
│ │ ├─> ... (10 tipos)
│ │ │
│ │ └─> saveToCache()
│ │ │
│ │ └─> localStorage.setItem()
│ │
│ └─> Dados prontos ✅
├─> Carrega perfis-loader.js
│ └─> Funções disponíveis
└─> Carrega admin-panel.js
└─> Funções disponíveis
CARREGAMENTO DE CATÁLOGO
═════════════════════════
2. Usuário Acessa Catálogo
└─> showSection('catalogo-perfis')
└─> getCantoneirasContent()
└─> HTML renderizado
└─> carregarCantoneiras()
└─> carregarCantoneirasV2()
├─> dataManager.getData('cantoneiras')
│ │
│ ├─> loadFromCache()
│ │ │
│ │ ├─> Cache existe? ──YES──> Retorna dados ⚡
│ │ │
│ │ └─> NO ──> loadCSV()
│ │ │
│ │ └─> saveToCache()
│ │
│ └─> Retorna dados
└─> exibirCantoneirasV2(dados)
└─> Tabela preenchida ✅
FILTROS E BUSCAS
════════════════
3. Usuário Aplica Filtro
└─> filtrarCantoneirasV2()
├─> Obter valores dos filtros
│ ├─> Tamanho
│ ├─> Peso máximo
│ └─> Busca por nome
├─> dataManager.filterData(dados, filtros)
│ └─> Filtra em memória ⚡
├─> dataManager.searchData(dados, busca)
│ └─> Busca em memória ⚡
└─> exibirCantoneirasV2(filtrados)
└─> Tabela atualizada ✅
ADMINISTRAÇÃO
═════════════
4. Usuário Abre Painel Admin
└─> abrirPainelDados()
├─> getCacheStats()
│ │
│ ├─> getMetadata()
│ └─> loadFromCache() para cada tipo
├─> Renderiza modal com:
│ ├─> Status do sistema
│ ├─> Tabela de tipos
│ ├─> Botões de ação
│ └─> Log de atividades
└─> Modal exibido ✅
5. Usuário Atualiza Dados
└─> atualizarTodosDados()
└─> dataManager.updateAllData()
├─> Para cada tipo:
│ ├─> loadCSV()
│ └─> saveToCache()
└─> updateMetadata()
└─> Dados atualizados ✅
```
---
## 💾 Estrutura do Cache (localStorage)
```
localStorage
├─ acoCalcPro_metadata
│ └─ {
│ version: "1.0.0",
│ lastUpdate: 1234567890,
│ results: { success: [...], errors: [...] },
│ totalTypes: 10,
│ successCount: 10,
│ errorCount: 0
│ }
├─ acoCalcPro_cache_cantoneiras
│ └─ [
│ {
│ id: "CANT001",
│ nome: "L25x25x3",
│ lado_mm: 25,
│ espessura_mm: 3,
│ peso_kg_m: 1.11,
│ area_cm2: 1.42,
│ momento_inercia_cm4: 0.48,
│ raio_giracao_cm: 0.58,
│ tipo: "Pequena",
│ _metadata: {
│ source: "BD/perfis/cantoneiras_brasil_completo.csv",
│ loadedAt: "2025-01-01T12:00:00.000Z",
│ version: "1.0.0"
│ }
│ },
│ ...
│ ]
├─ acoCalcPro_cache_barras_redondas
│ └─ [...]
├─ acoCalcPro_cache_tubos_circulares
│ └─ [...]
└─ ... (outros tipos)
```
---
## 🔍 Fluxo de Decisão do Cache
```
getData(tipo)
loadFromCache(tipo)
├─ Cache existe?
│ │
│ ├─ SIM ──> Retorna dados ⚡ (50ms)
│ │
│ └─ NÃO ──> loadCSV(config)
│ │
│ ├─ fetch(csv)
│ │ │
│ │ ├─ Sucesso ──> Processa CSV
│ │ │ │
│ │ │ ├─ Parse linhas
│ │ │ ├─ Converte tipos
│ │ │ ├─ Adiciona metadata
│ │ │ │
│ │ │ └─> saveToCache()
│ │ │ │
│ │ │ └─> Retorna dados ✅ (500ms)
│ │ │
│ │ └─ Erro ──> throw Error ❌
│ │
│ └─ Retorna dados
└─ Retorna dados
```
---
## ⏱️ Timeline de Performance
```
PRIMEIRA CARGA (Sem Cache)
═══════════════════════════
0ms ├─ Página carrega
50ms ├─ Data Manager inicializa
100ms ├─ Verifica cache (vazio)
150ms ├─ Inicia carregamento de CSVs
200ms ├─ Fetch cantoneiras.csv
300ms ├─ Processa CSV
400ms ├─ Salva no cache
500ms └─ Dados prontos ✅
SEGUNDA CARGA (Com Cache)
══════════════════════════
0ms ├─ Página carrega
50ms ├─ Data Manager inicializa
60ms ├─ Verifica cache (existe!)
70ms ├─ Carrega do localStorage
80ms └─ Dados prontos ✅ (10x mais rápido!)
FILTROS (Em Memória)
════════════════════
0ms ├─ Usuário aplica filtro
5ms ├─ filterData() processa
10ms └─ Tabela atualizada ✅ (instantâneo!)
```
---
## 🎯 Componentes e Responsabilidades
```
┌─────────────────────────────────────────────────────────────┐
│ DATA MANAGER │
├─────────────────────────────────────────────────────────────┤
│ Responsabilidades: │
│ • Gerenciar cache (localStorage) │
│ • Carregar e processar CSVs │
│ • Validar e normalizar dados │
│ • Filtrar e buscar dados │
│ • Controlar versionamento │
│ • Gerenciar TTL (24 horas) │
│ │
│ Métodos Principais: │
│ • getData(tipo) │
│ • filterData(dados, filtros) │
│ • searchData(dados, termo) │
│ • updateAllData() │
│ • clearCache() │
│ • getCacheStats() │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ PERFIS LOADER │
├─────────────────────────────────────────────────────────────┤
│ Responsabilidades: │
│ • Carregar dados via Data Manager │
│ • Exibir dados na interface │
│ • Gerenciar estado da UI (loading, erro) │
│ • Aplicar filtros e buscas │
│ • Atualizar contadores │
│ │
│ Funções Principais: │
│ • carregarCantoneirasV2() │
│ • exibirCantoneirasV2(dados) │
│ • filtrarCantoneirasV2() │
│ • limparFiltrosCantoneirasV2() │
│ • atualizarDadosCantoneiras() │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ ADMIN PANEL │
├─────────────────────────────────────────────────────────────┤
│ Responsabilidades: │
│ • Interface de administração │
│ • Visualizar status do sistema │
│ • Executar ações de manutenção │
│ • Exibir logs e estatísticas │
│ • Exportar dados │
│ │
│ Funções Principais: │
│ • abrirPainelDados() │
│ • atualizarTodosDados() │
│ • limparCacheCompleto() │
│ • verificarIntegridade() │
│ • exportarDados() │
└─────────────────────────────────────────────────────────────┘
```
---
## 🔄 Ciclo de Vida dos Dados
```
CRIAÇÃO
═══════
CSV criado/atualizado
└─> Armazenado em BD/perfis/
CARREGAMENTO
════════════
Primeira vez ou cache expirado
├─> fetch(csv)
├─> parse()
├─> validate()
├─> normalize()
└─> saveToCache()
CACHE
═════
Dados em localStorage
├─> Válido por 24 horas
├─> Versionado
└─> Pode ser limpo manualmente
USO
═══
Aplicação usa dados
├─> getData() ──> loadFromCache()
├─> filterData()
└─> searchData()
ATUALIZAÇÃO
═══════════
Manual ou automática (TTL)
├─> clearCache()
├─> loadCSV()
└─> saveToCache()
EXPIRAÇÃO
═════════
Após 24 horas ou mudança de versão
└─> needsUpdate() ──> true
└─> updateAllData()
```
---
## 📊 Métricas de Performance
```
OPERAÇÃO TEMPO MELHORIA
═══════════════════════════════════════════════════
Primeira carga 500ms Baseline
Segunda carga (cache) 50ms 10x ⚡
Filtro por tipo 10ms 50x ⚡
Busca por nome 10ms 50x ⚡
Limpar filtros 5ms 100x ⚡
Atualizar dados 500ms N/A
Limpar cache 50ms N/A
Verificar integridade 100ms N/A
Exportar dados 200ms N/A
```
---
## 🎨 Interface Visual
```
┌─────────────────────────────────────────────────────────────┐
│ HEADER [🗄️] [🌙] │
├─────────────────────────────────────────────────────────────┤
│ SIDEBAR │ MAIN CONTENT │
│ │ │
│ 📐 MATERIAIS │ ┌────────────────────────────────────┐ │
│ ├─ Catálogo ◄───┼──┤ 📐 Cantoneiras - Catálogo │ │
│ ├─ CEV │ │ │ │
│ └─ Seletor │ │ 🔍 Filtros │ │
│ │ │ ┌──────────────────────────────┐ │ │
│ 🔩 CONEXÕES │ │ │ Tamanho: [Todos ▼] │ │ │
│ ├─ Parafusos │ │ │ Peso Max: [____] │ │ │
│ └─ Furação │ │ │ Busca: [____] │ │ │
│ │ │ └──────────────────────────────┘ │ │
│ 🔥 SOLDAGEM │ │ │ │
│ ├─ Pré-aquec. │ │ 📊 Tabela (39 modelos) │ │
│ └─ Consumo │ │ ┌──────────────────────────────┐ │ │
│ │ │ │ Nome │ Lado │ Esp │ Peso ... │ │ │
│ 🔬 ENSAIOS │ │ ├──────────────────────────────┤ │ │
│ ├─ Dureza │ │ │ L25 │ 25 │ 3 │ 1.11 ... │ │ │
│ └─ Charpy │ │ │ L25 │ 25 │ 4 │ 1.42 ... │ │ │
│ │ │ │ ... │ │ │
│ 🎨 PINTURA │ │ └──────────────────────────────┘ │ │
│ └─ Consumo │ │ │ │
│ │ │ Total: 39 modelos │ │
│ 💰 ORÇAMENTO │ └────────────────────────────────────┘ │
│ └─ Detalhado │ │
│ │ │
└───────────────────┴──────────────────────────────────────────┘
[🗄️ FAB]
```
---
**Sistema completo e documentado! 🎉**