Atualização 10 - Tela de home e Monitoramento
This commit is contained in:
daivid.alves
parent
6e85995c21
commit
4669a6ed2b
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
|
|
@ -49,7 +49,9 @@
|
|||
.capitulo_1 .painel,
|
||||
.capitulo_2 .painel,
|
||||
.capitulo_3 .painel {
|
||||
width: 40vw;
|
||||
width: 46vw;
|
||||
border-radius: 2vw;
|
||||
|
||||
padding: 2vh;
|
||||
background-color: var(--Cor_Segundaria_5_1);
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -29,6 +29,7 @@
|
|||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
|
||||
gap: 1vw;
|
||||
background-color: var(--Cor_Segundaria_2_1);
|
||||
|
|
@ -37,7 +38,7 @@
|
|||
|
||||
.dashbord .dash_painel .dash_subpaneis {
|
||||
width: 10vw;
|
||||
height: 15vh;
|
||||
height: 10vh;
|
||||
padding: 0.4vw;
|
||||
background-color: var(--Matriz);
|
||||
display: flex;
|
||||
|
|
@ -70,10 +71,9 @@
|
|||
|
||||
.OFF {
|
||||
color: red;
|
||||
|
||||
}
|
||||
|
||||
.ON {
|
||||
color: var(--Cor_Segundaria_2_1);
|
||||
}
|
||||
|
||||
.dashbord .dash_painel .dash_subpaneis .grafico {}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import url(../../../global/import.css);
|
||||
@import url(./sec_cap_1.css);
|
||||
@import url(./sec_cap_2.css);
|
||||
|
|
@ -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;
|
||||
|
||||
}
|
||||
129
html/Home.html
129
html/Home.html
|
|
@ -17,7 +17,25 @@
|
|||
<div class="titulo">
|
||||
<h2>Gráficos mais importantes</h2>
|
||||
</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 class="capitulo_2">
|
||||
|
|
@ -36,7 +54,7 @@
|
|||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
<div class="grafico"></div><!--prenchivel-->
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
|
|
@ -45,7 +63,7 @@
|
|||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
<div class="grafico"></div><!--prenchivel-->
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
|
|
@ -54,7 +72,7 @@
|
|||
</div>
|
||||
<div class="sub_status ON" id="sub_status ">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
<div class="grafico"></div><!--prenchivel-->
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
|
|
@ -63,7 +81,7 @@
|
|||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
<div class="grafico"></div><!--prenchivel-->
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
|
|
@ -72,7 +90,7 @@
|
|||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
<div class="grafico"></div><!--prenchivel-->
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
|
|
@ -81,7 +99,7 @@
|
|||
</div>
|
||||
<div class="sub_status OFF" id="sub_status">OFF</div><!--prenchivel-->
|
||||
</div>
|
||||
<div class="grafico"></div><!--prenchivel-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -96,7 +114,7 @@
|
|||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
<div class="grafico"></div><!--prenchivel-->
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
|
|
@ -105,7 +123,7 @@
|
|||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
<div class="grafico"></div><!--prenchivel-->
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
|
|
@ -114,7 +132,7 @@
|
|||
</div>
|
||||
<div class="sub_status ON" id="sub_status ">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
<div class="grafico"></div><!--prenchivel-->
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
|
|
@ -123,7 +141,7 @@
|
|||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
<div class="grafico"></div><!--prenchivel-->
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
|
|
@ -132,7 +150,7 @@
|
|||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
<div class="grafico"></div><!--prenchivel-->
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
|
|
@ -141,7 +159,7 @@
|
|||
</div>
|
||||
<div class="sub_status OFF" id="sub_status">OFF</div><!--prenchivel-->
|
||||
</div>
|
||||
<div class="grafico"></div><!--prenchivel-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -150,16 +168,97 @@
|
|||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="seguimento">
|
||||
<section class="capitulo_3">
|
||||
<section class="capitulo_3"> <!--Painel de relatorios-->
|
||||
<div class="titulo">
|
||||
<h2>Detalhes da semana</h2>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<script src="../js/Ambiente/Home/RelatorioCeu.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -5,13 +5,74 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Monitoramento</title>
|
||||
<link id="conexao" rel="stylesheet" href="">
|
||||
<link rel="stylesheet" href="../Css/page/Ambiente/Monitoramento/Monitor.css">
|
||||
</head>
|
||||
|
||||
<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>
|
||||
|
||||
</html>
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue