Opções de Submenus do Menu Avisos


Avisos do Dia

1. Avisos do Dia

1.0 Menu

Menu Avisos e sub-menu Avisos do Dia

1.1. 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.

1.2. Elementos da Interface

1.2.1. Á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

1.2.2. 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

1.2.3. 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

1.2.4. 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

1.3. 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

1.4. Instruções Passo a Passo

1.4.1. 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

1.4.2. 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"

1.4.3. 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

1.4.4. 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

1.5. 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)

1.6. Perguntas Frequentes

1.6.1. 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.

1.6.2. 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.

1.6.3. 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.

1.6.4. 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.

1.7. 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.

Avisos por Data

1. Avisos por Data

1.0 Menu

Menu Avisos e sub-menu Avisos por Data

1.1. Descrição Geral

A interface "Avisos" é parte de um sistema de gerenciamento de frota que permite monitorar e visualizar alertas associados a veículos rastreados. O sistema apresenta uma interface dividida em duas seções principais: um painel de filtros e controles à esquerda, e um mapa interativo à direita que exibe a localização geográfica dos eventos.

Na área de listagem, o sistema apresenta alertas relacionados aos veículos monitorados, como desligamentos, problemas de comunicação e outros eventos importantes. Cada alerta contém informações detalhadas como tipo de evento, veículo, condutor, data/hora, localização e detalhes de contato.

O mapa interativo exibe marcadores coloridos que representam a localização dos eventos, utilizando um sistema de cores para diferenciar os tipos de alertas (vermelho para alertas críticos e verde para informações normais).

1.2. Elementos da Interface

1.2.1. Seção de Filtros

  1. Seleção de Veículo

    • Campo: Dropdown com busca
    • Exemplo preenchido: "Honda CG 125 FAN - ODX-1939 - Ramylos"
    • Obrigatório: Sim
    • Funcionalidade: Permite filtragem por veículo específico
    • Validação: Requer seleção para ativar a pesquisa
  2. Tipo de Aviso

    • Campo: Dropdown de seleção múltipla
    • Opcional: Sim
    • Valores possíveis: Lista extensa de tipos de alertas (Abastecimento, Abertura Capô, Aceleração Brusca, etc.)
    • Funcionalidade: Filtra alertas por categorias específicas
  3. Período de Data

    • Campos: Dois seletores de data (início e fim)
    • Formato: DD-MM-YYYY
    • Exemplo: "02-03-2025" a "09-03-2025"
    • Opcional: Sim
    • Funcionalidade: Limita resultados ao intervalo de datas especificado
    • Validação: Data final deve ser posterior à data inicial
  4. Botão de Pesquisa

    • Funcionalidade: Executa a busca com os critérios selecionados
    • Estado: Ativo somente quando veículo selecionado
  5. Botão "Todos"

    • Funcionalidade: Exibe todos os alertas novamente após uma filtragem
    • Visibilidade: Aparece somente quando um alerta específico está selecionado

1.2.2. Seção de Resultados

  1. Lista de Avisos

    • Exibição: Tabela com múltiplas linhas de alertas
    • Ordenação: Por data/hora decrescente (mais recente primeiro)
    • Selecionar: Clicável para visualizar detalhes no mapa
    • Informações por alerta:
      • Índice numérico (contador decrescente)
      • Ícone do tipo de alerta
      • Título do aviso (Ex: "Aviso de Veículo Desligado")
      • Nome do condutor
      • Data/hora do evento (formato: DD-MM-YYYY HH:MM:SS)
      • Localização/endereço
      • Informações de contato (email)
      • Detalhes adicionais específicos do evento
  2. Mensagem de Ausência de Dados

    • Exibição: Alerta vermelho quando não há resultados
    • Mensagem: "Não existem dados para os parâmetros informados."
    • Visibilidade: Somente quando pesquisa não retorna resultados

1.2.3. Mapa Interativo

  1. Visualização Cartográfica
    • Tipo: Google Maps
    • Controles: Zoom, alternar entre mapa e satélite
    • Marcadores: Indicam localização dos eventos
      • Vermelho: Alertas críticos/negativos (Ex: desligamentos, problemas)
      • Verde: Informações normais/positivas
    • Interatividade: Centraliza e amplia ao clicar em um alerta na lista
    • Função "Ver Todos": Reexibe todos os marcadores após filtro individual

1.2.4. Modal de Mídia

  1. Popup de Visualização de Vídeo
    • Funcionalidade: Exibe vídeos associados aos alertas
    • Elementos:
      • Título (tipo de aviso)
      • Subtítulo (condutor)
      • Data/hora
      • Player de vídeo
    • Controles: Reproduzir, pausar, controle de volume

1.3. Fluxo de Trabalho

  1. Início

    • O usuário acessa a tela de Avisos
    • Por padrão, é necessário selecionar um veículo para iniciar a pesquisa
    • O período de 7 dias anteriores é pré-selecionado
  2. Filtragem

    • Usuário seleciona um veículo específico
    • Opcionalmente define tipos de avisos específicos
    • Opcionalmente ajusta o período de datas
    • Clica no botão de pesquisa (ícone de lupa)
  3. Visualização de Resultados

    • Sistema exibe lista de avisos correspondentes aos filtros
    • Marcadores são exibidos no mapa para cada evento
    • Zoom do mapa é ajustado para mostrar todos os pontos
  4. Interação com Alertas

    • Ao clicar em um alerta na lista:
      • O mapa centraliza neste ponto
      • O zoom é aumentado
      • Outros marcadores são ocultados
    • O botão "Todos" aparece, permitindo voltar à visualização completa
  5. Visualização de Mídias

    • Para alertas com vídeos associados:
      • Miniatura do vídeo é exibida na lista
      • Usuário pode clicar em "Abrir Vídeo"
      • Um popup é exibido com o player de vídeo

1.4. Instruções Passo a Passo

1.4.1. Como Pesquisar Avisos

  1. Na seção "1. Selecione o veículo:", clique no dropdown e selecione o veículo desejado

    • Você pode digitar para filtrar a lista de veículos
    • Informações como marca, modelo, placa e condutor são exibidas
  2. (Opcional) Em "2. Escolha o tipo do aviso:", selecione um ou mais tipos de alertas específicos

    • Você pode selecionar múltiplos tipos mantendo a lista aberta
  3. (Opcional) Em "3. Informe a Data:", defina o período desejado:

    • Clique no primeiro campo para definir a data inicial
    • Clique no segundo campo para definir a data final
    • Por padrão, o sistema usa os últimos 7 dias
  4. Clique no botão de pesquisa (ícone de lupa) para executar a busca

1.4.2. Como Interagir com os Resultados

  1. Após a pesquisa, analise a lista de avisos exibida:

    • Verifique o tipo de aviso, data/hora e local
    • Observe os marcadores correspondentes no mapa
  2. Para focalizar um aviso específico:

    • Clique em qualquer linha da tabela de avisos
    • O mapa centralizará e ampliará o ponto selecionado
    • Apenas o marcador selecionado permanecerá visível
  3. Para retornar à visualização de todos os pontos:

    • Clique no botão "Todos" que aparece após selecionar um aviso

1.4.3. Como Visualizar Vídeos Associados

  1. Para avisos com vídeos disponíveis:

    • Uma miniatura do vídeo será exibida na linha do aviso
    • Clique em "Abrir Vídeo" ao lado da miniatura
  2. No popup de vídeo:

    • Visualize as informações do evento (título, condutor, data)
    • Use os controles do player para reproduzir o vídeo
    • Feche o popup quando terminar a visualização

1.5. Regras de Negócio

  1. Acesso a Dados

    • O sistema mostra apenas veículos associados ao cliente autenticado
    • Caso a sessão expire, o usuário é redirecionado para a tela de login
  2. Filtragem de Avisos

    • É necessário selecionar pelo menos um veículo para realizar a pesquisa
    • Filtros de tipo e data são opcionais
    • Pesquisas podem ser feitas por data única ou por período
  3. Exibição de Dados

    • Alertas são ordenados por data (mais recente primeiro)
    • Cada tipo de aviso tem um ícone específico para fácil identificação
    • Diferentes cores de marcadores indicam diferentes categorias de eventos
  4. Tratamento de Endereços

    • O sistema exibe o endereço aproximado baseado nas coordenadas do evento
    • Quando não é possível determinar o endereço, são exibidas apenas as coordenadas
  5. Comunicação com Dispositivos

    • Sistema verifica conexão com dispositivos e gera alertas de "Comunicação desatualizada"
    • Eventos como desligamento do veículo são reportados em tempo real

1.6. Perguntas Frequentes

1.6.1. Geral

  1. Como sei se um aviso é crítico?

    • Os avisos críticos geralmente aparecem com marcadores vermelhos no mapa e com ícones de alerta na listagem.
  2. O que significa "Comunicação desatualizada"?

    • Indica que o sistema não conseguiu comunicação com o dispositivo do veículo pelo tempo especificado. Isso pode ocorrer por diversos motivos, incluindo problemas de sinal, dispositivo desligado ou falha no equipamento.
  3. Posso exportar a lista de avisos?

    • A exportação não está disponível diretamente nesta tela. Para relatórios completos, acesse a seção "Relatórios" no menu principal.

1.6.2. Filtros e Pesquisa

  1. Por que o botão de pesquisa está desativado?

    • O botão só fica ativo após a seleção de um veículo. Verifique se você selecionou um veículo na lista dropdown.
  2. Como pesquiso por vários tipos de avisos ao mesmo tempo?

    • No dropdown "Tipo de Aviso", mantenha a lista aberta e selecione múltiplos itens clicando em cada um deles.
  3. Qual o período máximo que posso visualizar?

    • Não há limite técnico para o período, mas períodos muito longos podem resultar em muitos dados e afetar o desempenho.

1.6.3. Visualização de Dados

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

    • Geralmente, vermelho indica alertas críticos ou eventos negativos, enquanto verde indica estados normais ou positivos.
  2. Por que não consigo ver vídeos para todos os avisos?

    • Apenas alguns tipos de eventos capturam vídeos, dependendo da configuração do dispositivo e da natureza do evento.
  3. Como vejo mais detalhes sobre um local específico?

    • Clique no aviso na lista para centralizar o mapa naquele ponto. Você também pode utilizar os controles do Google Maps para alternar entre visualizações de mapa e satélite.
  4. O que acontece se não houver avisos no período selecionado?

    • O sistema exibirá uma mensagem alertando que "Não existem dados para os parâmetros informados."