197 lines
5.7 KiB
HTML
197 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
|
<link rel="stylesheet" href="../../../Css/padraouser.css">
|
|
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_Oeste_Pan.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<main class="Corpo">
|
|
<section class="Capitulos_1">
|
|
|
|
|
|
<div class="reação" onclick="togglePanelVisibility('panel1')">
|
|
<p>CFTV</p>
|
|
|
|
</div>
|
|
|
|
<div class="reação" onclick="togglePanelVisibility('panel2')">
|
|
|
|
<p>Firewall</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="reação" onclick="togglePanelVisibility('panel3')">
|
|
<p>Ramais</p>
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<script>
|
|
|
|
var temas = document.querySelectorAll('.reação')
|
|
|
|
function selectLink() {
|
|
temas.forEach((item) =>
|
|
item.classList.remove('ativo')
|
|
)
|
|
this.classList.add('ativo')
|
|
}
|
|
temas.forEach((item) =>
|
|
item.addEventListener('click', selectLink))
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<section class="Capitulos_2">
|
|
|
|
<article id="panel1" class="Matriz_CFTV_Oeste">
|
|
<section class="sub_tela_cftv_frame_1">
|
|
|
|
<iframe
|
|
src="http://grafana.itguys.com.br/d-solo/b47912ca-7938-4828-988d-8530619d2999/oeste-pan?orgId=1&theme=light&panelId=6"
|
|
frameborder="0" class="sub_tela_cftv_frame_1"></iframe>
|
|
|
|
</section>
|
|
</article>
|
|
|
|
|
|
<article id="panel2" class="Matriz_Firewall_Oeste">
|
|
|
|
<section class="capitulo_1">
|
|
|
|
<section class="Hardware">
|
|
|
|
<div class="sessao_1">
|
|
|
|
<div class="tela_har_1">
|
|
|
|
<iframe
|
|
src="http://grafana.itguys.com.br/d-solo/b47912ca-7938-4828-988d-8530619d2999/oeste-pan?orgId=1&theme=light&panelId=5"
|
|
frameborder="0"></iframe>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="sessao_2">
|
|
|
|
<div class="tela_har_2">
|
|
|
|
<iframe
|
|
src="http://grafana.itguys.com.br/d-solo/b47912ca-7938-4828-988d-8530619d2999/oeste-pan?orgId=1&theme=light&panelId=3"
|
|
frameborder="0"></iframe>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
|
|
<section class="capitulo_2">
|
|
|
|
<section class="trafegos">
|
|
<div class="tela_traf_1">
|
|
|
|
<iframe
|
|
src="http://grafana.itguys.com.br/d-solo/b47912ca-7938-4828-988d-8530619d2999/oeste-pan?orgId=1&theme=light&panelId=2"
|
|
frameborder="0"></iframe>
|
|
|
|
</div>
|
|
|
|
<div class="tela_traf_2">
|
|
|
|
<iframe
|
|
src="http://grafana.itguys.com.br/d-solo/b47912ca-7938-4828-988d-8530619d2999/oeste-pan?orgId=1&theme=light&panelId=1"
|
|
frameborder="0"></iframe>
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
<section class="speed_teste">
|
|
<div class="tela_spe_1">
|
|
|
|
<iframe class="tela_5"
|
|
src="http://grafana.itguys.com.br/d-solo/b47912ca-7938-4828-988d-8530619d2999/oeste-pan?orgId=1&theme=light&panelId=7"
|
|
frameborder="0"></iframe>
|
|
|
|
|
|
|
|
</div>
|
|
<div class="tela_spe_2">
|
|
|
|
<iframe class="tela_4"
|
|
src="http://grafana.itguys.com.br/d-solo/b47912ca-7938-4828-988d-8530619d2999/oeste-pan?orgId=1&theme=light&panelId=8"
|
|
frameborder="0"></iframe>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</section>
|
|
</article>
|
|
|
|
<article id="panel3" class="Matriz_Ramais_Oeste">
|
|
<section class="Subtela_ramais_1">
|
|
<iframe
|
|
src="http://grafana.itguys.com.br/d-solo/b47912ca-7938-4828-988d-8530619d2999/oeste-pan?orgId=1&theme=light&panelId=9"
|
|
frameborder="0" class="Subtela_Ramais_frame_1"></iframe>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
</main>
|
|
|
|
|
|
<script>
|
|
|
|
function togglePanelVisibility(panelId) {
|
|
var panel = document.getElementById(panelId);
|
|
var radio = document.querySelector('input[name="panelSelection"]:checked');
|
|
var allPanels = document.querySelectorAll('article');
|
|
|
|
if (panel.style.display === "none" || panel.style.display === "") {
|
|
// Exibe o painel clicado
|
|
panel.style.display = "flex";
|
|
|
|
// Oculta todos os outros painéis
|
|
allPanels.forEach(function (otherPanel) {
|
|
if (otherPanel.id !== panelId) {
|
|
otherPanel.style.display = "none";
|
|
}
|
|
});
|
|
} else {
|
|
// Se o botão de rádio não estiver selecionado, oculta o painel clicado
|
|
if (!radio) {
|
|
panel.style.display = "none";
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |