redecomep:clientes:sarah:start
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision | |||
|
redecomep:clientes:sarah:start [2025/10/07 16:01] admin |
redecomep:clientes:sarah:start [2025/10/07 18:27] (current) paulo.cruz [HOSPITAL SARAH] |
||
|---|---|---|---|
| Line 4: | Line 4: | ||
| <html> | <html> | ||
| - | <img id="grafico-prodemge" src="https://librenms.dcc.ufmg.br//graph.php?height=100&width=512&id=13982&type=port_bits&legend=yes"/> | + | <div class="grafico-container"> |
| + | <img src="https://librenms.dcc.ufmg.br//graph.php?height=100&width=500&id=14122&type=port_bits&legend=yes"/> | ||
| + | <div style="font-size: 12px; color: #555;"> | ||
| + | Última atualização: <span class="timestamp"></span> | ||
| + | </div> | ||
| + | </div> | ||
| + | </html> | ||
| - | <div style="font-size: 12px; color: #555;"> | ||
| - | Última atualização: <span id="ultima-atualizacao"></span> | ||
| - | </div> | ||
| - | <script> | + | <html> |
| - | // Função que será executada repetidamente | + | <script> |
| - | function atualizarDados() { | + | function atualizarTodosOsGraficos() { |
| - | // --- Parte da Imagem (código que você já tinha) --- | + | const todosOsGraficos = document.querySelectorAll('.grafico-container'); |
| - | var imagem = document.getElementById('grafico-prodemge'); | + | const agora = new Date(); |
| - | var baseUrl = "https://librenms.dcc.ufmg.br//graph.php?height=100&width=512&id=12616&type=port_bits&legend=yes"; | + | const textoFormatado = agora.toLocaleString('pt-BR'); |
| - | imagem.src = baseUrl + '&d=' + new Date().getTime(); | + | |
| - | // --- 2. Parte da Data e Hora (código novo) --- | + | todosOsGraficos.forEach(grafico => { |
| - | // Pega o elemento do timestamp pelo ID | + | const imagem = grafico.querySelector('img'); |
| - | var spanTimestamp = document.getElementById('ultima-atualizacao'); | + | const spanTimestamp = grafico.querySelector('.timestamp'); |
| - | + | const baseUrl = imagem.src.split('?d=')[0]; | |
| - | // Cria um objeto com a data e hora atuais | + | |
| - | var agora = new Date(); | + | |
| - | + | ||
| - | // Formata a data para o padrão brasileiro (dd/mm/aaaa, hh:mm:ss) | + | |
| - | var formatado = agora.toLocaleString('pt-BR'); | + | |
| - | + | ||
| - | // Atualiza o texto do elemento span com a hora formatada | + | |
| - | spanTimestamp.innerHTML = formatado; | + | |
| - | } | + | |
| - | // Executa a função pela primeira vez imediatamente ao carregar a página | + | // Remove o // duplo da URL para evitar problemas |
| - | atualizarDados(); | + | const cleanBaseUrl = baseUrl.replace(/([^:]\/)\/+/g, "$1"); |
| + | |||
| + | imagem.src = cleanBaseUrl + '?d=' + agora.getTime(); | ||
| + | spanTimestamp.innerHTML = textoFormatado; | ||
| + | }); | ||
| + | } | ||
| - | // Configura para executar a função a cada 10 segundos | + | // Espera a página carregar completamente antes de rodar o script |
| - | setInterval(atualizarDados, 10000); // 10000 ms = 10 segundos | + | document.addEventListener('DOMContentLoaded', function() { |
| - | </script> | + | atualizarTodosOsGraficos(); |
| + | setInterval(atualizarTodosOsGraficos, 10000); // 10 segundos | ||
| + | }); | ||
| + | </script> | ||
| </html> | </html> | ||
| + | |||
redecomep/clientes/sarah/start.txt · Last modified: 2025/10/07 18:27 by paulo.cruz
Page Tools
