teste
/
testes
Template
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

Atualização 10 - Tela de home e Monitoramento

This commit is contained in:
daivid.alves 2024-10-22 17:56:52 -03:00
parent 6e85995c21
commit 4669a6ed2b
13 changed files with 499 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Acessts/Imagens/Iconis/Thumbs.db
View File

Binary file not shown.

BIN
Acessts/Imagens/Iconis/relatorio.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

4
Css/page/Ambiente/Home/root_Home.css
View File

@ -49,7 +49,9 @@
.capitulo_1 .painel, .capitulo_1 .painel,
.capitulo_2 .painel, .capitulo_2 .painel,
.capitulo_3 .painel { .capitulo_3 .painel {
width: 40vw; width: 46vw;
border-radius: 2vw;
padding: 2vh; padding: 2vh;
background-color: var(--Cor_Segundaria_5_1); background-color: var(--Cor_Segundaria_5_1);

27
Css/page/Ambiente/Home/sec_cap_1.css
View File

@ -0,0 +1,27 @@
.corpo_controler {
width: 100%;
display: flex;
flex-direction: row;
}
.seguimento_1,
.seguimento_2 {
display: flex;
flex-direction: column;
width: 50%;
gap: 2vw;
}
.dashbord_user_1 {
width: 18vw;
height: 20vh;
background-color: var(--Matriz);
}
.dashbord_user_2,
.dashbord_user_3 {
width: 20vw;
height: 8vh;
background-color: var(--Matriz);
}

8
Css/page/Ambiente/Home/sec_cap_2.css
View File

@ -29,6 +29,7 @@
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
align-content: center;
gap: 1vw; gap: 1vw;
background-color: var(--Cor_Segundaria_2_1); background-color: var(--Cor_Segundaria_2_1);
@ -37,7 +38,7 @@
.dashbord .dash_painel .dash_subpaneis { .dashbord .dash_painel .dash_subpaneis {
width: 10vw; width: 10vw;
height: 15vh; height: 10vh;
padding: 0.4vw; padding: 0.4vw;
background-color: var(--Matriz); background-color: var(--Matriz);
display: flex; display: flex;
@ -70,10 +71,9 @@
.OFF { .OFF {
color: red; color: red;
} }
.ON { .ON {
color: var(--Cor_Segundaria_2_1); color: var(--Cor_Segundaria_2_1);
} }
.dashbord .dash_painel .dash_subpaneis .grafico {}

149
Css/page/Ambiente/Home/sec_cap_3.css
View File

@ -0,0 +1,149 @@
.subCapitulo_1 {
width: 100%;
height: 20vh;
}
.subCapitulo_1 .carrossel_host {
width: 100%;
height: 20vh;
display: flex;
align-items: center;
position: relative;
}
.subCapitulo_1 .carrossel_host .list {
overflow: hidden;
width: 100%;
height: 15vh;
scroll-behavior: smooth;
padding: 1vw;
display: flex;
align-items: center;
gap: 2vw;
}
.subCapitulo_1 .carrossel_host .list .item button {
background: none;
border: none;
outline: none;
border-radius: 2vw;
background-color: var(--Matriz);
padding: 2.5vw;
color: var(--Cor_Segundaria_5_1);
font-family: var(--font_titulo);
}
.subCapitulo_1 .carrossel_host .button button {
background: none;
outline: none;
border: none;
padding: 0.5vw;
border-radius: 0.5vw;
backdrop-filter: blur(2px);
background-color: #00000070;
}
.subCapitulo_1 .carrossel_host .button img {
width: 2vw;
}
#next {
position: absolute;
right: 0;
top: 8vh;
}
#prev {
position: absolute;
left: 0;
top: 8vh;
}
.subCapitulo_2 {
width: 100%;
padding-bottom: 2vh;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.subCapitulo_2 .titulo_Sub_cap {
font-family: var(--font_titulo);
font-size: 1vw;
color: var(--Matriz);
width: 90%;
display: flex;
justify-content: start;
}
.subCapitulo_2 .relatorio {
margin-top: 2vh;
padding-top: 1vh;
width: 40vw;
display: flex;
flex-direction: row;
gap: 0.5vw;
}
.subCapitulo_2 .relatorio .icon img {
width: 3vw;
padding: 0.5vw;
background-color: var(--Cor_Segundaria_2_1);
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
}
.subCapitulo_2 .relatorio .painel_Ren {
width: 20vw;
height: 8vh;
padding: 0.5vw;
background-color: var(--Cor_Segundaria_2_1);
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.subCapitulo_2 .relatorio .painel_Ren .cabecario {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 1vw;
gap: 1vw;
font-family: var(--font_titulo);
color: var(--Cor_Segundaria_5_1);
background-color: var(--Matriz);
font-size: 0.7vw;
}
.subCapitulo_2 .relatorio .painel_Ren .cabecario button {
background: none;
border: none;
outline: none;
border-radius: 2vw;
background-color: var(--Cor_Segundaria_5_1);
width: 6vw;
height: 4vh;
color: var(--Matriz);
font-family: var(--font_titulo);
font-size: 1vw;
}

3
Css/page/Ambiente/Monitoramento/Monitor.css Normal file
View File

@ -0,0 +1,3 @@
@import url(../../../global/import.css);
@import url(./sec_cap_1.css);
@import url(./sec_cap_2.css);

68
Css/page/Ambiente/Monitoramento/sec_cap_1.css Normal file
View File

@ -0,0 +1,68 @@
.carrossel_host {
width: 100%;
height: 20vh;
display: flex;
align-items: center;
position: relative;
}
.carrossel_host .list {
overflow: hidden;
width: 100%;
height: 15vh;
scroll-behavior: smooth;
padding: 1vw;
display: flex;
align-items: center;
gap: 2vw;
}
.carrossel_host .list .item button {
background: none;
border: none;
outline: none;
width: 12vw;
height: 5vh;
display: flex;
justify-content: center;
align-items: center;
border-radius: 2vw;
background-color: var(--Cor_Segundaria_5_1);
padding: 2vw;
color: var(--Matriz);
font-family: var(--font_titulo);
font-size: 1vw;
}
.carrossel_host .button button {
background: none;
outline: none;
border: none;
padding: 0.5vw;
border-radius: 0.5vw;
backdrop-filter: blur(2px);
background-color: #00000070;
}
.carrossel_host .button img {
width: 2vw;
}
#next {
position: absolute;
right: 1vw;
top: 15vh;
}
#prev {
position: absolute;
left: 1vw;
top: 15vh;
}

0
Css/page/Ambiente/Monitoramento/sec_cap_2.css Normal file
View File

129
html/Home.html
View File

@ -17,7 +17,25 @@
<div class="titulo"> <div class="titulo">
<h2>Gráficos mais importantes</h2> <h2>Gráficos mais importantes</h2>
</div> </div>
<div class="painel"></div> <div class="painel">
<!--Editavel pelo usuário e capacidade de inserir graficos das outras dasbords-->
<div class="corpo_controler">
<div class="seguimento_1">
<div class="dashbord_user_1">
<div class="grafico"></div>
</div>
</div>
<div class="seguimento_2">
<div class="dashbord_user_2">
<div class="grafico"></div>
</div>
<div class="dashbord_user_3">
<div class="grafico"></div>
</div>
</div>
</div>
</div>
</section> </section>
<section class="capitulo_2"> <section class="capitulo_2">
@ -36,7 +54,7 @@
</div> </div>
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel--> <div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
</div> </div>
<div class="grafico"></div><!--prenchivel-->
</div> </div>
<div class="dash_subpaneis"> <div class="dash_subpaneis">
<div class="sub_titulo"> <div class="sub_titulo">
@ -45,7 +63,7 @@
</div> </div>
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel--> <div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
</div> </div>
<div class="grafico"></div><!--prenchivel-->
</div> </div>
<div class="dash_subpaneis"> <div class="dash_subpaneis">
<div class="sub_titulo"> <div class="sub_titulo">
@ -54,7 +72,7 @@
</div> </div>
<div class="sub_status ON" id="sub_status ">ON</div><!--prenchivel--> <div class="sub_status ON" id="sub_status ">ON</div><!--prenchivel-->
</div> </div>
<div class="grafico"></div><!--prenchivel-->
</div> </div>
<div class="dash_subpaneis"> <div class="dash_subpaneis">
<div class="sub_titulo"> <div class="sub_titulo">
@ -63,7 +81,7 @@
</div> </div>
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel--> <div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
</div> </div>
<div class="grafico"></div><!--prenchivel-->
</div> </div>
<div class="dash_subpaneis"> <div class="dash_subpaneis">
<div class="sub_titulo"> <div class="sub_titulo">
@ -72,7 +90,7 @@
</div> </div>
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel--> <div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
</div> </div>
<div class="grafico"></div><!--prenchivel-->
</div> </div>
<div class="dash_subpaneis"> <div class="dash_subpaneis">
<div class="sub_titulo"> <div class="sub_titulo">
@ -81,7 +99,7 @@
</div> </div>
<div class="sub_status OFF" id="sub_status">OFF</div><!--prenchivel--> <div class="sub_status OFF" id="sub_status">OFF</div><!--prenchivel-->
</div> </div>
<div class="grafico"></div><!--prenchivel-->
</div> </div>
</div> </div>
</div> </div>
@ -96,7 +114,7 @@
</div> </div>
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel--> <div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
</div> </div>
<div class="grafico"></div><!--prenchivel-->
</div> </div>
<div class="dash_subpaneis"> <div class="dash_subpaneis">
<div class="sub_titulo"> <div class="sub_titulo">
@ -105,7 +123,7 @@
</div> </div>
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel--> <div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
</div> </div>
<div class="grafico"></div><!--prenchivel-->
</div> </div>
<div class="dash_subpaneis"> <div class="dash_subpaneis">
<div class="sub_titulo"> <div class="sub_titulo">
@ -114,7 +132,7 @@
</div> </div>
<div class="sub_status ON" id="sub_status ">ON</div><!--prenchivel--> <div class="sub_status ON" id="sub_status ">ON</div><!--prenchivel-->
</div> </div>
<div class="grafico"></div><!--prenchivel-->
</div> </div>
<div class="dash_subpaneis"> <div class="dash_subpaneis">
<div class="sub_titulo"> <div class="sub_titulo">
@ -123,7 +141,7 @@
</div> </div>
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel--> <div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
</div> </div>
<div class="grafico"></div><!--prenchivel-->
</div> </div>
<div class="dash_subpaneis"> <div class="dash_subpaneis">
<div class="sub_titulo"> <div class="sub_titulo">
@ -132,7 +150,7 @@
</div> </div>
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel--> <div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
</div> </div>
<div class="grafico"></div><!--prenchivel-->
</div> </div>
<div class="dash_subpaneis"> <div class="dash_subpaneis">
<div class="sub_titulo"> <div class="sub_titulo">
@ -141,7 +159,7 @@
</div> </div>
<div class="sub_status OFF" id="sub_status">OFF</div><!--prenchivel--> <div class="sub_status OFF" id="sub_status">OFF</div><!--prenchivel-->
</div> </div>
<div class="grafico"></div><!--prenchivel-->
</div> </div>
</div> </div>
</div> </div>
@ -150,16 +168,97 @@
</section> </section>
</div> </div>
<div class="seguimento"> <div class="seguimento">
<section class="capitulo_3"> <section class="capitulo_3"> <!--Painel de relatorios-->
<div class="titulo"> <div class="titulo">
<h2>Detalhes da semana</h2> <h2>Detalhes da semana</h2>
</div> </div>
<div class="painel"></div>
<div class="painel">
<div class="subCapitulo_1">
<div class="carrossel_host">
<div class="list" id="list">
<div class="item"><!--Preenchivem com os servidores da empresa-->
<button>Host 1</button>
</div>
<div class="item">
<button>Host 2</button>
</div>
<div class="item">
<button>Host 3</button>
</div>
<div class="item">
<button>Host 4</button>
</div>
<div class="item">
<button>Host 5</button>
</div>
<div class="item">
<button>Host 6</button>
</div>
<div class="item">
<button>Host 7</button>
</div>
<div class="item">
<button>Host 8</button>
</div>
<div class="item">
<button>Host 9</button>
</div>
</div>
<div class="button">
<button id="next">
<img src="../Acessts/Imagens/Iconis/seta-direita.png" alt="">
</button>
<button id="prev">
<img src="../Acessts/Imagens/Iconis/seta-esquerda.png" alt="">
</button>
</div>
</div>
</div>
<div class="subCapitulo_2">
<div class="titulo_Sub_cap">
<h2>Relatorios</h2>
</div>
<div class="relatorio">
<!--Estrutura de conexão do relatorio com a ferramenta do João que cospe pdfs-->
<div class="icon">
<img src="../Acessts/Imagens/Iconis/relatorio.png" alt="">
</div>
<div class="painel_Ren">
<div class="cabecario">
<h2>25/10/2024</h2>
<button>PDF</button>
</div>
</div>
</div>
<div class="relatorio">
<div class="icon">
<img src="../Acessts/Imagens/Iconis/relatorio.png" alt="">
</div>
<div class="painel_Ren">
<div class="cabecario">
<h2>24/10/2024</h2>
<button>PDF</button>
</div>
</div>
</div>
</div>
</div>
</section> </section>
</div> </div>
</div> </div>
</main> </main>
<script src="../js/Ambiente/Home/RelatorioCeu.js"></script>
</body> </body>
</html> </html>

65
html/Monitoramento.html
View File

@ -5,13 +5,74 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monitoramento</title> <title>Monitoramento</title>
<link id="conexao" rel="stylesheet" href=""> <link rel="stylesheet" href="../Css/page/Ambiente/Monitoramento/Monitor.css">
</head> </head>
<body> <body>
<h2>Aqui vão aparecer os graficos do influx e do Zabix</h2> <main>
<section class="capitulo_1">
<div class="carrossel_host">
<div class="list" id="list">
<div class="item"><!--Preenchivem com os servidores da empresa-->
<button>Padrão 1</button>
</div>
<div class="item">
<button>Padrão 2</button>
</div>
<div class="item">
<button>Padrão 3</button>
</div>
<div class="item">
<button>Padrão 4</button>
</div>
<div class="item">
<button>Padrão 5</button>
</div>
<div class="item">
<button>Padrão 6</button>
</div>
<div class="item">
<button>Padrão 7</button>
</div>
<div class="item">
<button>Padrão 8</button>
</div>
<div class="item">
<button>Padrão 9</button>
</div>
<div class="item">
<button>Padrão 9</button>
</div>
<div class="item">
<button>Padrão 9</button>
</div>
<div class="item">
<button>Padrão 9</button>
</div>
<div class="item">
<button>Padrão 9</button>
</div>
<div class="item">
<button>Padrão 9</button>
</div>
</div>
<div class="button">
<button id="next">
<img src="../Acessts/Imagens/Iconis/seta-direita.png" alt="">
</button>
<button id="prev">
<img src="../Acessts/Imagens/Iconis/seta-esquerda.png" alt="">
</button>
</div>
</div>
</section>
<section class="capitulo_2">
</section>
</main>
<script src="../js/Ambiente/Monitoramento/monitorCeu.js"></script>
</body> </body>
</html> </html>

34
js/Ambiente/Home/RelatorioCeu.js Normal file
View File

@ -0,0 +1,34 @@
document.addEventListener('DOMContentLoaded', () => {
const productContainer3 = document.querySelector('#list');
const nxtBtn3 = document.getElementById('next');
const preBtn3 = document.getElementById('prev');
const atualizarDimensoesContainer = () => {
const dimensoesContainer3 = productContainer3.getBoundingClientRect();
return dimensoesContainer3.width;
};
let larguraContainer3 = atualizarDimensoesContainer();
nxtBtn3.addEventListener('click', () => {
productContainer3.scrollLeft += larguraContainer3;
// Verificação de limite
if (productContainer3.scrollLeft + larguraContainer3 >= productContainer3.scrollWidth) {
productContainer3.scrollLeft = productContainer3.scrollWidth; // Para no final
}
});
preBtn3.addEventListener('click', () => {
productContainer3.scrollLeft -= larguraContainer3;
// Verificação de limite
if (productContainer3.scrollLeft < 0) {
productContainer3.scrollLeft = 0; // Para no início
}
});
// Recalcula a largura do container se necessário (por exemplo, ao redimensionar a janela)
window.addEventListener('resize', () => {
larguraContainer3 = atualizarDimensoesContainer();
});
});

34
js/Ambiente/Monitoramento/monitorCeu.js Normal file
View File

@ -0,0 +1,34 @@
document.addEventListener('DOMContentLoaded', () => {
const productContainer3 = document.querySelector('#list');
const nxtBtn3 = document.getElementById('next');
const preBtn3 = document.getElementById('prev');
const atualizarDimensoesContainer = () => {
const dimensoesContainer3 = productContainer3.getBoundingClientRect();
return dimensoesContainer3.width;
};
let larguraContainer3 = atualizarDimensoesContainer();
nxtBtn3.addEventListener('click', () => {
productContainer3.scrollLeft += larguraContainer3;
// Verificação de limite
if (productContainer3.scrollLeft + larguraContainer3 >= productContainer3.scrollWidth) {
productContainer3.scrollLeft = productContainer3.scrollWidth; // Para no final
}
});
preBtn3.addEventListener('click', () => {
productContainer3.scrollLeft -= larguraContainer3;
// Verificação de limite
if (productContainer3.scrollLeft < 0) {
productContainer3.scrollLeft = 0; // Para no início
}
});
// Recalcula a largura do container se necessário (por exemplo, ao redimensionar a janela)
window.addEventListener('resize', () => {
larguraContainer3 = atualizarDimensoesContainer();
});
});