# 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 4. **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 5. **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 6. **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. 7. **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. 8. **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 9. **O que significa "Comunicação desatualizada"?** - Indica que o sistema perdeu contato com o veículo por um período superior ao esperado. 10. **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 4. **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. 5. **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. 6. **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 7. **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. 8. **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. 9. **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. 10. **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."