238 lines
6.6 KiB
Markdown
238 lines
6.6 KiB
Markdown
# Catálogo de Perfis - Implementação Completa
|
|
|
|
## ✅ Problema Resolvido
|
|
|
|
### Cantoneiras
|
|
- ✅ Função `carregarCantoneiras()` criada
|
|
- ✅ Carrega dados do CSV `BD/perfis/cantoneiras_brasil_completo.csv`
|
|
- ✅ Exibe 39 modelos na tabela
|
|
- ✅ Filtros funcionando (tamanho, peso, busca)
|
|
- ✅ Modal de detalhes implementado
|
|
- ✅ Badges coloridos por categoria
|
|
|
|
## 📁 Estrutura de Arquivos CSV
|
|
|
|
Todos os CSVs estão em: `BD/perfis/`
|
|
|
|
### Arquivos Disponíveis:
|
|
1. ✅ `cantoneiras_brasil_completo.csv` - 39 modelos
|
|
2. ⏳ `barras_brasil_completo.csv` - Barras Redondas
|
|
3. ⏳ `barras_chatas_brasil_completo.csv` - Barras Chatas
|
|
4. ⏳ `barras_roscadas_brasil_completo.csv` - Barras Roscadas
|
|
5. ⏳ `chapas_brasil_completo.csv` - Chapas
|
|
6. ⏳ `perfis_hp_brasil_completo.csv` - Perfis HP
|
|
7. ⏳ `perfis_i_brasil_completo.csv` - Perfis I (IPE)
|
|
8. ⏳ `perfis_w_brasil_completo.csv` - Perfis W
|
|
9. ⏳ `tubos_circulares_brasil_completo.csv` - Tubos Circulares
|
|
10. ⏳ `tubos_rhs_brasil_completo.csv` - Tubos RHS
|
|
|
|
## 🔧 Mapeamento Atualizado
|
|
|
|
O arquivo `app.js` foi atualizado com os caminhos corretos:
|
|
|
|
```javascript
|
|
const csvMapping = {
|
|
'perfil_w': 'BD/perfis/perfis_w_brasil_completo.csv',
|
|
'perfil_i': 'BD/perfis/perfis_i_brasil_completo.csv',
|
|
'perfil_hp': 'BD/perfis/perfis_hp_brasil_completo.csv',
|
|
'cantoneira': 'BD/perfis/cantoneiras_brasil_completo.csv',
|
|
'tubo_circ': 'BD/perfis/tubos_circulares_brasil_completo.csv',
|
|
'tubo_rhs': 'BD/perfis/tubos_rhs_brasil_completo.csv',
|
|
'chapa': 'BD/perfis/chapas_brasil_completo.csv',
|
|
'barra': 'BD/perfis/barras_brasil_completo.csv',
|
|
'barra_chata': 'BD/perfis/barras_chatas_brasil_completo.csv',
|
|
'barra_roscada': 'BD/perfis/barras_roscadas_brasil_completo.csv'
|
|
};
|
|
```
|
|
|
|
## 📊 Estrutura do CSV (Cantoneiras)
|
|
|
|
```csv
|
|
id,nome,lado_mm,espessura_mm,peso_kg_m,area_cm2,momento_inercia_cm4,raio_giracao_cm,tipo
|
|
l25_25_3,L25x25x3,25,3,1.12,1.43,0.38,0.52,Pequena
|
|
l25_25_4,L25x25x4,25,4,1.47,1.87,0.47,0.5,Pequena
|
|
...
|
|
```
|
|
|
|
## 🎯 Funcionalidades Implementadas (Cantoneiras)
|
|
|
|
### 1. Carregamento de Dados
|
|
```javascript
|
|
async function carregarCantoneiras()
|
|
```
|
|
- Carrega CSV via fetch
|
|
- Parse dos dados
|
|
- Armazena em `window.cantoneirasData`
|
|
- Exibe na tabela
|
|
|
|
### 2. Exibição na Tabela
|
|
```javascript
|
|
function exibirCantoneiras(dados)
|
|
```
|
|
- Renderiza linhas da tabela
|
|
- Badges coloridos por categoria
|
|
- Botão "Ver" para detalhes
|
|
|
|
### 3. Filtros
|
|
```javascript
|
|
function filtrarCantoneiras()
|
|
```
|
|
- Filtro por tamanho (Pequena, Média, Grande, etc.)
|
|
- Filtro por peso máximo
|
|
- Busca por nome
|
|
|
|
### 4. Modal de Detalhes
|
|
```javascript
|
|
function verDetalhesCantoneira(id)
|
|
```
|
|
- Mostra todas as propriedades
|
|
- Cálculo de peso por barra (6m e 12m)
|
|
- Estimativa de preço
|
|
|
|
## 📋 Próximos Passos
|
|
|
|
Para implementar os outros perfis, seguir o mesmo padrão:
|
|
|
|
### Template de Função:
|
|
```javascript
|
|
async function carregarPerfisW() {
|
|
try {
|
|
const response = await fetch('BD/perfis/perfis_w_brasil_completo.csv');
|
|
const csvText = await response.text();
|
|
const linhas = csvText.trim().split('\n');
|
|
|
|
const dados = [];
|
|
for (let i = 1; i < linhas.length; i++) {
|
|
const colunas = linhas[i].split(',');
|
|
// Parse conforme estrutura do CSV
|
|
dados.push({
|
|
// ... campos específicos
|
|
});
|
|
}
|
|
|
|
window.perfisWData = dados;
|
|
exibirPerfisW(dados);
|
|
|
|
} catch (error) {
|
|
console.error('❌ Erro:', error);
|
|
}
|
|
}
|
|
```
|
|
|
|
### Checklist por Perfil:
|
|
|
|
#### Barras Redondas
|
|
- [ ] Criar `carregarBarrasRedondas()`
|
|
- [ ] Criar `exibirBarrasRedondas()`
|
|
- [ ] Criar `filtrarBarrasRedondas()`
|
|
- [ ] Criar HTML da tabela
|
|
- [ ] Adicionar chamada em `showSection()`
|
|
|
|
#### Tubos Circulares
|
|
- [ ] Criar `carregarTubosCirculares()`
|
|
- [ ] Criar `exibirTubosCirculares()`
|
|
- [ ] Criar `filtrarTubosCirculares()`
|
|
- [ ] Criar HTML da tabela
|
|
- [ ] Adicionar chamada em `showSection()`
|
|
|
|
#### Perfis I (IPE)
|
|
- [ ] Criar `carregarPerfisI()`
|
|
- [ ] Criar `exibirPerfisI()`
|
|
- [ ] Criar `filtrarPerfisI()`
|
|
- [ ] Criar HTML da tabela
|
|
- [ ] Adicionar chamada em `showSection()`
|
|
|
|
#### Perfis W
|
|
- [ ] Criar `carregarPerfisW()`
|
|
- [ ] Criar `exibirPerfisW()`
|
|
- [ ] Criar `filtrarPerfisW()`
|
|
- [ ] Criar HTML da tabela
|
|
- [ ] Adicionar chamada em `showSection()`
|
|
|
|
#### Tubos RHS
|
|
- [ ] Criar `carregarTubosRHS()`
|
|
- [ ] Criar `exibirTubosRHS()`
|
|
- [ ] Criar `filtrarTubosRHS()`
|
|
- [ ] Criar HTML da tabela
|
|
- [ ] Adicionar chamada em `showSection()`
|
|
|
|
#### Chapas
|
|
- [ ] Criar `carregarChapas()`
|
|
- [ ] Criar `exibirChapas()`
|
|
- [ ] Criar `filtrarChapas()`
|
|
- [ ] Criar HTML da tabela
|
|
- [ ] Adicionar chamada em `showSection()`
|
|
|
|
#### Perfis HP
|
|
- [ ] Criar `carregarPerfisHP()`
|
|
- [ ] Criar `exibirPerfisHP()`
|
|
- [ ] Criar `filtrarPerfisHP()`
|
|
- [ ] Criar HTML da tabela
|
|
- [ ] Adicionar chamada em `showSection()`
|
|
|
|
#### Barras Roscadas
|
|
- [ ] Criar `carregarBarrasRoscadas()`
|
|
- [ ] Criar `exibirBarrasRoscadas()`
|
|
- [ ] Criar `filtrarBarrasRoscadas()`
|
|
- [ ] Criar HTML da tabela
|
|
- [ ] Adicionar chamada em `showSection()`
|
|
|
|
#### Barras Chatas
|
|
- [ ] Criar `carregarBarrasChatas()`
|
|
- [ ] Criar `exibirBarrasChatas()`
|
|
- [ ] Criar `filtrarBarrasChatas()`
|
|
- [ ] Criar HTML da tabela
|
|
- [ ] Adicionar chamada em `showSection()`
|
|
|
|
## 🎨 Padrão Visual
|
|
|
|
Todos os perfis devem seguir o mesmo padrão das cantoneiras:
|
|
|
|
1. **Tabs de Navegação:**
|
|
- 📊 Tabela Técnica
|
|
- 📋 Especificações
|
|
- 🏭 Fabricantes
|
|
- 💰 Preços 2025
|
|
- 🔧 Aplicações
|
|
|
|
2. **Filtros:**
|
|
- Por categoria/tamanho
|
|
- Por peso/dimensão
|
|
- Busca por nome
|
|
|
|
3. **Tabela:**
|
|
- Colunas relevantes para o tipo de perfil
|
|
- Badges coloridos
|
|
- Botão "Ver" para detalhes
|
|
|
|
4. **Modal de Detalhes:**
|
|
- Dimensões completas
|
|
- Propriedades de massa
|
|
- Propriedades geométricas
|
|
- Estimativa de preço
|
|
|
|
## 🔍 Como Testar
|
|
|
|
1. Abra o aplicativo
|
|
2. Navegue até "📐 Catálogo de Perfis"
|
|
3. Clique em "📐 Cantoneiras"
|
|
4. Verifique:
|
|
- ✅ Tabela mostra 39 modelos
|
|
- ✅ Filtros funcionam
|
|
- ✅ Botão "Ver" abre modal
|
|
- ✅ Dados estão corretos
|
|
|
|
## 📝 Notas
|
|
|
|
- Os CSVs devem ter cabeçalho na primeira linha
|
|
- Separador: vírgula (,)
|
|
- Encoding: UTF-8
|
|
- Campos numéricos devem usar ponto (.) como decimal
|
|
- Campos de texto não devem conter vírgulas (ou usar aspas)
|
|
|
|
## 🚀 Arquivos Modificados
|
|
|
|
1. `js/sections/perfis-catalog.js` - Funções de carregamento adicionadas
|
|
2. `app.js` - Mapeamento de CSVs atualizado
|
|
3. `BD/perfis/` - Pasta com todos os CSVs
|