Skip to main content

Avisos do Dia

Visão Geral da Interface

A interface apresentada é um sistema de monitoramento de veículos que integra uma listagem de avisos com visualização geográfica. O sistema exibe alertas relacionados aos veículos da frota, como desligamentos e falhas de comunicação, permitindo aos usuários acompanhar em tempo real o status dos veículos monitorados.

A interface é dividida em duas áreas principais: à esquerda, uma lista detalhada de avisos em ordem cronológica e à direita, um mapa interativo que mostra a localização geográfica dos eventos. Esta organização permite aos usuários visualizar simultaneamente os dados tabulares e sua representação espacial.

Elementos da Interface

Área de Filtros

  1. Seleção de Veículo

    • Campo tipo dropdown/select
    • Permite escolher um veículo específico (ex: "Honda CG 125 FAN - ODX-1939 - Ramylos")
    • Validação: Lista de veículos cadastrados no sistema

  2. Tipo de Aviso (opcional)

    • Campo dropdown/select
    • Permite filtrar por categorias específicas de avisos
    • Validação: Lista predefinida de tipos de avisos do sistema

  3. Intervalo de Data (opcional)

    • Dois campos de data (data inicial e data final)
    • Formato: DD-MM-YYYY
    • Exemplo: "02-03-2025" a "09-03-2025"
    • Validação: A data final deve ser posterior à data inicial

  4. Botão de Pesquisa

    • Botão com ícone de lupa
    • Executa a filtragem com base nos critérios selecionados

Lista de Avisos

  1. Tabela de Avisos

    • Mostra avisos organizados em ordem decrescente (mais recentes primeiro)
    • Cada aviso possui um número sequencial (ID)
    • Colunas:
      • Índice/Número (contador decrescente)
      • Ícone do tipo de aviso (código de cores)
      • Detalhes do aviso

  2. Elementos de cada Aviso

    • Tipo de aviso (ex: "Aviso de Veículo Desligado")
    • Nome do condutor (ex: "Ramylos")
    • Data e hora do aviso (formato: DD-MM-YYYY HH:MM:SS)
    • Localização/Endereço (ex: "Rua São João, Mangueira, Timon, Maranhão")
    • Email de contato (ex: "moises@concept.inf.br/ramylos@gmail.com")
    • Data de atualização (ex: "01.11 09/03/2025")
    • Vídeo do evento (quando disponível)
    • Botão para expandir vídeo

  3. Contador de Avisos

    • Exibe o número total de avisos na visualização atual

  4. Botão "Ver Todos"

    • Aparece quando um aviso está selecionado
    • Permite voltar à visualização completa

Mapa Interativo

  1. Mapa Google

    • Ocupa o lado direito da tela
    • Exibe a região do Nordeste brasileiro, centrado na região de Teresina
    • Mostra marcadores coloridos nas localizações dos eventos

  2. Marcadores

    • Cores diferentes para diferentes tipos de avisos:
      • Vermelho: avisos de veículo desligado
      • Verde: outros tipos de avisos
      • Cinza/Preto: comunicação desatualizada
    • Ao clicar em um marcador, o sistema exibe detalhes do aviso

  3. Controles do Mapa

    • Zoom in/out
    • Alternar entre visão de mapa e satélite
    • Opção de tela cheia

Modal de Visualização de Mídia

  1. Popup de Vídeo
    • Exibido ao clicar em "Abrir Vídeo"
    • Contém:
      • Título (tipo do aviso)
      • Subtítulo (modelo, placa e condutor)
      • Data e hora do evento
      • Player de vídeo com controles de reprodução

Fluxo de Trabalho

  1. Visualização Inicial

    • Ao entrar na tela, o usuário vê todos os avisos recentes e suas localizações no mapa
    • Os avisos são carregados da base de dados e exibidos em ordem cronológica inversa

  2. Filtragem de Dados

    • O usuário pode filtrar os avisos por:
      • Veículo específico
      • Tipo de aviso
      • Intervalo de datas

  3. Interação com Avisos

    • Ao clicar em um aviso na lista:
      • O mapa centraliza na localização do aviso
      • O zoom é ajustado para melhor visualização
      • Apenas o marcador relacionado permanece visível
    • Ao clicar em "Ver Todos", todos os marcadores voltam a ser exibidos

  4. Visualização de Mídia

    • Se um aviso tiver vídeo associado, o usuário pode:
      • Assistir a uma prévia na lista de avisos
      • Clicar em "Abrir Vídeo" para uma visualização expandida em popup

Instruções Passo a Passo

Como Filtrar Avisos

  1. Acesse a tela "Avisos do Dia" pelo menu lateral
  2. Utilize os campos de filtro na parte superior:
    • Selecione um veículo específico (opcional)
    • Escolha um tipo de aviso (opcional)
    • Defina um intervalo de datas (opcional)
  3. Clique no botão de pesquisa (ícone de lupa)
  4. A lista será atualizada mostrando apenas os avisos que correspondem aos critérios

Como Visualizar Detalhes de um Aviso Específico

  1. Localize o aviso desejado na lista à esquerda
  2. Clique no aviso para selecioná-lo
  3. O mapa à direita será automaticamente centrado na localização do evento
  4. Apenas o marcador correspondente permanecerá visível no mapa
  5. Para retornar à visualização completa, clique no botão "Ver Todos"

Como Assistir ao Vídeo de um Evento

  1. Identifique avisos que possuem mídia associada (exibem miniatura de vídeo)
  2. Para uma pré-visualização:
    • Use os controles de vídeo na miniatura exibida na lista
  3. Para visualização expandida:
    • Clique em "Abrir Vídeo" ao lado da miniatura
    • Um popup será aberto com o vídeo em tamanho maior
    • Use os controles de vídeo para reproduzir, pausar ou ajustar o volume

Como Ajustar a Visualização do Mapa

  1. Utilize os controles de zoom (+ e -) no canto superior esquerdo
  2. Para alternar entre visualização de mapa e satélite:
    • Clique no botão "Satellite" no canto superior direito
  3. Para visualizar o mapa em tela cheia:
    • Clique no ícone de tela cheia no canto superior direito

Regras de Negócio

  1. Exibição de Avisos

    • Os avisos são carregados do estado da aplicação (store)
    • São exibidos em ordem decrescente (mais recentes primeiro)
    • Cada aviso possui um identificador único

  2. Tipos de Avisos

    • Aviso de Veículo Desligado: indica que um veículo foi desligado
    • Comunicação Desatualizada: indica problemas de conexão com o veículo
    • Outros tipos podem estar disponíveis conforme configuração do sistema

  3. Marcadores no Mapa

    • Diferentes cores indicam diferentes tipos de avisos
    • A posição é determinada pelas coordenadas de latitude e longitude
    • Ao selecionar um aviso, apenas seu marcador permanece visível
    • Ao usar "Ver Todos", todos os marcadores são exibidos novamente

  4. Visualização de Mídia

    • Os vídeos são armazenados em servidor externo (Amazon S3)
    • O caminho completo é construído dinamicamente baseado no arquivo de mídia
    • O player de vídeo suporta controles de reprodução, pausa e volume

  5. Comportamento do Mapa

    • Ao selecionar um aviso, o mapa centraliza nas coordenadas e aumenta o zoom
    • Ao usar "Ver Todos", o zoom é ajustado para mostrar todos os marcadores
    • O mapa inicia centrado nas coordenadas -5, -42 (região nordeste do Brasil)

Perguntas Frequentes

Sobre Filtros e Visualização

  1. Como posso ver apenas os avisos de um veículo específico?

    • Use o primeiro campo dropdown para selecionar o veículo desejado e clique no botão de pesquisa.

  2. É possível filtrar avisos por período?

    • Sim. Defina as datas inicial e final nos campos de data e clique no botão de pesquisa.

  3. Como retorno à visualização de todos os avisos após selecionar um específico?

    • Clique no botão "Ver Todos" que aparece quando um aviso está selecionado.

Sobre o Mapa e Localização

  1. O que significam as diferentes cores dos marcadores no mapa?

    • Vermelho: avisos de veículo desligado
    • Verde: outros tipos de situações
    • Cinza/Preto: comunicação desatualizada

  2. Como faço para centralizar o mapa em um aviso específico?

    • Basta clicar no aviso desejado na lista à esquerda.

Sobre Vídeos e Mídia

  1. Os vídeos são salvos automaticamente?

    • Sim, os vídeos são capturados automaticamente quando ocorre um evento relevante e são armazenados no servidor.

  2. Posso baixar os vídeos dos eventos?

    • Embora o sistema não ofereça um botão de download direto, você pode usar os recursos do navegador para salvar o vídeo.

  3. Por que alguns avisos não têm vídeo?

    • Nem todos os tipos de avisos geram gravação de vídeo, ou pode ter ocorrido algum problema na captura.

Problemas Comuns

  1. O que significa "Comunicação desatualizada"?

    • Indica que o sistema perdeu contato com o veículo por um período superior ao esperado.

  2. Por que o mapa não está exibindo alguns marcadores?

    • Se você selecionou um aviso específico, apenas o marcador correspondente ficará visível. Clique em "Ver Todos" para exibir todos os marcadores novamente.

Considerações Adicionais

Este sistema foi desenvolvido para monitoramento em tempo real de uma frota de veículos, com foco especial em alertas de segurança e operação. A integração entre a lista de avisos e o mapa geográfico permite uma rápida identificação e resposta a eventos, como desligamentos não autorizados de veículos.

O sistema utiliza a API do Google Maps para visualização geográfica e oferece funcionalidades de filtragem para facilitar a análise de eventos específicos. Os vídeos associados aos eventos são armazenados em servidor externo e podem ser acessados diretamente pela interface.

A estrutura da interface prioriza a eficiência operacional, permitindo aos gestores de frota monitorar diversos veículos simultaneamente e identificar rapidamente situações que requerem atenção.

Back to top