Grid

1. Visão Geral da Interface

A interface apresentada é um sistema de gerenciamento de frota veicular, projetado para monitorar em tempo real a localização, status e dados operacionais de uma frota de veículos. O painel principal apresenta uma visualização tabular dos veículos com informações detalhadas sobre cada um, utilizando códigos de cores para categorizar diferentes tipos ou estados dos veículos, e ícones que representam visualmente diferentes status operacionais.

2. Elementos da Interface

2.1 Painel Principal (Grid de Veículos)

Cabeçalho

Título da tela: "Grid" seguido de um contador numérico (21) que indica o número de veículos sendo exibidos
Botões de ação:
- Botão de impressão
- Menu de opções (três pontos)
- Botão de configurações (engrenagem)
Filtro por divisão: Dropdown para selecionar um departamento específico
Campo de pesquisa: Permite buscar por qualquer termo relacionado ao veículo
Botão de busca: Executa a pesquisa pelo termo inserido

Filtros

Checkbox Ligado: Exibe apenas veículos com ignição ligada
Checkbox Desligado: Exibe apenas veículos com ignição desligada
Checkbox Em Movimento: Exibe apenas veículos em deslocamento
Checkbox Parado: Exibe apenas veículos parados
- Campo numérico "min": Define o tempo mínimo de parada em minutos (disponível quando "Parado" está selecionado)
Checkbox Manutenção: Exibe apenas veículos em manutenção
Checkbox Alerta Parado: Exibe veículos com alertas de tempo de parada
Checkbox Sensor: Exibe apenas veículos com sensores instalados
Checkbox Desatualizado: Exibe veículos sem transmissão recente de dados

Colunas da Tabela

Veículo: Marca/modelo do veículo, com código de cores por divisão
Placa: Identificação do veículo, odômetro (KM) e horímetro (H)
Motorista: Nome do condutor atual
Km/h - Parado: Velocidade atual ou tempo de parada
Sensor: Status de bateria, sensores e voltagem
Localização: Endereço atual e data/hora da última atualização

Ícones de Status

Círculo verde: Veículo ligado e em movimento
Círculo amarelo: Veículo ligado e parado
Círculo vermelho: Veículo desligado
Ícone de cadeado: Indica se o veículo está bloqueado/desbloqueado
Ícone de ferramenta: Indica veículo em manutenção
Ícone de WiFi: Indica status de conexão (verde para conectado, vermelho para sem conexão)
Ícone de bateria: Indica nível de carga da bateria do módulo

Título: "Configurações"
Switch "Exibir o nome da cidade": Alterna entre exibir endereço completo ou apenas o nome da cidade
Lista de colunas exibidas: Checkboxes para selecionar quais colunas serão exibidas na tabela principal
Botões de ação:
- Marcar Todos: Seleciona todas as colunas
- Desmarcar Todos: Remove seleção de todas as colunas
- Gravar: Salva as configurações

Título: "Veículos por cidade"
Tabela: Lista de cidades e quantidade de veículos em cada uma
- Coluna Cidade: Nome da cidade
- Coluna Qtd: Número de veículos na cidade

2.4 Tela de Impressão

Cabeçalho: Informações da empresa e título do relatório
Tabela: Dados dos veículos formatados para impressão
Botões:
- Excel: Para exportar os dados
- Imprimir: Para enviar o relatório para a impressora

3. Propósito e Fluxo de Trabalho

O sistema tem como objetivo principal permitir o monitoramento em tempo real de uma frota de veículos. O fluxo de trabalho típico inclui:

Monitoramento: Visualização rápida do status atual de todos os veículos
Filtragem: Aplicação de filtros para localizar veículos com características específicas
Análise detalhada: Verificação de informações específicas de cada veículo
Geração de relatórios: Impressão ou exportação dos dados para análise posterior

O sistema atualiza automaticamente os dados a cada 10 segundos, permitindo o acompanhamento em tempo real do status dos veículos.

4. Instruções Passo a Passo

4.1 Como filtrar veículos

Na parte superior da tela, selecione um ou mais critérios de filtro:
- Marque "Ligado" para ver apenas veículos com ignição ligada
- Marque "Desligado" para ver apenas veículos com ignição desligada
- Marque "Em Movimento" para ver apenas veículos em deslocamento
- Marque "Parado" para ver veículos parados (defina o tempo mínimo de parada se necessário)
- Marque "Manutenção" para ver veículos em manutenção
- Marque "Alerta Parado" para ver veículos com alertas de tempo de parada
- Marque "Sensor" para ver veículos com sensores instalados
- Marque "Desatualizado" para ver veículos sem transmissão recente
Para filtrar por divisão, selecione uma opção no dropdown "Divisão"
Para pesquisar por um termo específico, digite no campo de busca e clique no ícone de lupa ou pressione Enter

4.2 Como configurar as colunas exibidas

Clique no ícone de engrenagem no cabeçalho da tabela
No modal de configurações que aparece:
- Use o switch para alternar entre exibir endereço completo ou apenas nome da cidade
- Marque ou desmarque as colunas que deseja exibir
- Use os botões "Marcar Todos" ou "Desmarcar Todos" para selecionar/remover todas as colunas
Clique em "Gravar" para salvar suas configurações

4.3 Como visualizar veículos por cidade

Clique no botão com ícone de três pontos horizontais
No modal "Veículos por cidade", você verá a lista de cidades e a quantidade de veículos em cada uma
Clique em uma cidade para filtrar a tabela principal e mostrar apenas os veículos daquela localidade

4.4 Como imprimir ou exportar dados

Clique no ícone de impressora no cabeçalho da tabela
Na tela de impressão:
- Clique em "Excel" para exportar os dados para uma planilha
- Clique em "Imprimir" para enviar o relatório à impressora

5. Regras de Negócio e Validações

5.1 Atualização de Dados

O sistema atualiza automaticamente os dados a cada 10 segundos (10000 milissegundos)
A atualização é feita de forma inteligente, modificando apenas os campos que tiveram alterações
São verificadas mudanças em todos os campos relevantes, incluindo:
- Posição (latitude/longitude)
- Estado da ignição
- Velocidade
- Tempo parado
- Status da conexão
- Nível de bateria
- Voltagem
- Sensores

5.2 Codificação Visual

Cores de fundo das linhas: Representam as diferentes cidades onde os veículos estão localizados
Status de ignição:
- Verde: Veículo ligado e em movimento
- Amarelo: Veículo ligado e parado
- Vermelho: Veículo desligado
Status de conexão:
- Ícone WiFi verde: Conexão ativa
- Ícone WiFi vermelho: Sem conexão
Status da bateria: Codificação por cores baseada no nível de carga

5.3 Filtros e Pesquisas

A pesquisa textual busca correspondências em:
- Marca
- Modelo
- Divisão
- Cidade atual
- Condutor
- Identificação do veículo
- Placa
Os filtros são aplicados cumulativamente (operadores lógicos "E")

6. Perguntas Frequentes

6.1 Básicas

P: Com que frequência os dados são atualizados?
R: Os dados são atualizados automaticamente a cada 10 segundos.

P: O que significa quando o círculo ao lado do veículo está vermelho, amarelo ou verde?
R: Verde indica veículo ligado e em movimento; amarelo indica veículo ligado mas parado; vermelho indica veículo desligado.

P: Como filtro por uma cidade específica?
R: Clique no ícone de três pontos horizontais, selecione a cidade na lista que aparece e depois clique nela.

P: Como configuro quais colunas são exibidas na tabela?
R: Clique no ícone de engrenagem, marque as colunas desejadas e clique em "Gravar".

6.2 Avançadas

P: O que significa quando o ícone WiFi está vermelho?
R: Indica que o veículo está sem transmissão de dados. O tempo sem transmissão é exibido ao passar o mouse sobre o ícone.

P: Como identifico veículos com bateria fraca?
R: Veículos com bateria abaixo de 40% mostrarão o ícone de bateria em vermelho na coluna de sensores.

P: O que é "Alerta Parado" e como identifico veículos com esse status?
R: "Alerta Parado" indica veículos que estão parados por um tempo maior que o aceitável. Estes veículos terão o ícone de mão piscando entre laranja e roxo.

P: É possível salvar minhas configurações de visualização para uso futuro?
R: Sim, ao clicar em "Gravar" no modal de configurações, suas preferências são salvas no sistema e serão mantidas em sessões futuras.

P: Como identifico veículos desatualizados?
R: Veículos desatualizados (sem transmissão por um longo período) exibirão um ícone de alerta (círculo com ponto de exclamação) e podem ser filtrados marcando o checkbox "Desatualizado".

7. Funcionamento do Sistema

O sistema é composto por uma interface front-end que se comunica com um servidor back-end para obter dados em tempo real dos veículos. A tela principal (Grid.vue) é responsável por exibir os dados em formato tabular e permitir a interação do usuário.

O componente principal realiza as seguintes operações:

Inicializa com as configurações salvas pelo usuário (colunas visíveis, preferências de exibição)
Estabelece uma conexão com o servidor para receber atualizações periódicas
Processa os dados recebidos, aplicando filtros e ordenações conforme solicitado pelo usuário
Renderiza a interface com os dados filtrados e formatados
Gerencia modais e interações de usuário (configurações, filtros, exportação)

A funcionalidade de impressão utiliza compressão GZIP e codificação Base64 para transmitir grandes volumes de dados de forma eficiente, e o sistema de impressão renderiza uma tabela HTML formatada com base nas configurações selecionadas pelo usuário.

O sistema implementa um mecanismo eficiente de atualização que modifica apenas os campos que mudaram, ao invés de recarregar toda a tabela, resultando em melhor desempenho e experiência do usuário.