Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Implementação tela de telemetria

Browse Source
This commit is contained in:
Alex Santos 2022-05-10 15:07:33 -03:00
parent 0a9db132e3
commit ff53d07abf
2 changed files with 211 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
pages/telemetria.tsx
View File

@ -1,30 +1,113 @@
import React from 'react'; import React from 'react';
import Image from 'next/image';
import BasicButton from '../src/components/buttons/basicButton/BasicButton'
import { TelemetriaView} from '../styles/layouts/telemetria/TelemetriaView'; import Banner from '../src/components/banner/Banner';
import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
import MenuItem from '@mui/material/MenuItem';
import FormHelperText from '@mui/material/FormHelperText';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
export default function Telemetria() { export default function Telemetria() {
const [age, setAge] = React.useState('');
const handleChange = (event: SelectChangeEvent) => {
setAge(event.target.value);
};
return( return(
<TelemetriaView> <TelemetriaView>
<section className="container"> <Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
<Image src='/assets/graphical.png' width={970} height={200} layout='fixed'/> SCDE da Câmara de Comercialização de Energia Elétrica - CCEE,
sendo que as quantidades aqui informadas são de responsabilidade do agente de medição
- Distribuidora.' imgSource='/assets/graphical.png' />
</section> <FormControl sx={{ width: 250, mt:10 , pl:8}} style={{}}>
<BasicButton title='texto'/> <FormHelperText style={{}}>Unidade</FormHelperText>
<Select
value={age}
onChange={handleChange}
displayEmpty
inputProps={{ 'aria-label': 'Without label' }}
>
<MenuItem value="">
<em>Filial 3</em>
</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
<FormControl sx={{ width: 240, mt:10 , pl:8}} >
<FormHelperText>Data Final</FormHelperText>
<Select
value={age}
onChange={handleChange}
displayEmpty
inputProps={{ 'aria-label': 'Without label' }}
>
<MenuItem value="">
<em>07/09/2021</em>
</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
<FormControl sx={{ width: 240, mt:10 , pl:8}} >
<FormHelperText>Data Final</FormHelperText>
<Select
value={age}
onChange={handleChange}
displayEmpty
inputProps={{ 'aria-label': 'Without label' }}
>
<MenuItem value="">
<em>07/09/2021</em>
</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
<FormControl sx={{ width: 240, mt:10 , pl:8}} >
<FormHelperText >Discretização</FormHelperText>
<Select
value={age}
onChange={handleChange}
displayEmpty
inputProps={{ 'aria-label': 'Without label' }}
>
<MenuItem value="">
<em>60 min</em>
</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
<Buttons>
<button className='btnGrafico'> <p>GRÁFICOS</p> <br /> GERAR GRÁFICOS COM OS DADOS SELECIONADOS</button>
<button className='btndownload'> <p>DOWNLOADS</p> <br /> DADOS BRUTOS SELECIONADOS</button>
<button className='btnDados'> <p>DADOS</p> <br /> HORÁRIOS DO MÊS ATUAL</button>
</Buttons>
</TelemetriaView> </TelemetriaView>
) )
} }

149
styles/layouts/Telemetria/TelemetriaView.ts
View File

@ -2,41 +2,124 @@
import styled from 'styled-components'; import styled from 'styled-components';
export const TelemetriaView = styled.div` export const TelemetriaView = styled.main`
display: flex; padding: 20px ;
padding-left: 11rem;
align-items: center;
justify-content: flex-start;
background-color: #000;
height: 100vh;
width: 100%; width: 100%;
.container{
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-image: linear-gradient(to right, #254F7F 10%, #888888 100%);
width: 60rem;
}
.main{
display: flex;
justify-content: flex-start;
width: 70%;
margin-top: 25rem;
}
`; `;
export const Buttons = styled.div`
display: flex;
min-width: 10rem;
cursor: pointer;
margin-top: 8rem;
justify-content: space-around;
flex-direction: row;
height: 6rem;
/* flex-direction: column; */
/*
.btnSucess{
font-size: 10px;
cursor: pointer;
background-color: #F48665;
border: none;
} */
.btnGrafico {
box-shadow:inset 0px 34px 0px -15px #F48665;
background-color:#F48665;
border:none;
border-radius: 2px;
max-width: 17rem;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:8px;
font-weight:900;
padding:9px 20px;
text-decoration:none;
text-shadow:0px -1px 0px #7a2a1d;
}
p{
font-size:20px;
}
.myButton:hover {
background-color:#F48665;
}
.myButton:active {
position:relative;
top:1px;
}
.btndownload{
box-shadow:inset 0px 34px 0px -15px #9A56FF;
background-color:#9A56FF;
border:none;
border-radius: 2px;
display:inline-block;
cursor:pointer;
width: 17rem;
color:#ffffff;
font-family:Arial;
font-size:9px;
font-weight:900;
padding:9px 20px;
text-decoration:none;
text-shadow:0px -1px 0px #7a2a1d;
}
p{
font-size: 12px;
}
.myButton:hover {
background-color:#D78AFD;
}
.myButton:active {
position:relative;
/* justify-content: space-between; */
top:1px;
}
.btnDados{
box-shadow:inset 100% #23BDB8;
background-color:#23BDB8;
border:none;
border-radius: 2px;
display:inline-block;
width: 17rem;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:9px;
font-weight:900;
padding:9px 20px;
text-decoration:none;
text-shadow:0px -1px 0px #7a2a1d;
}
p{
font-size: 12px;
}
.myButton:hover {
background-color:#23BDB8;
}
.myButton:active {
position:relative;
/* justify-content: space-between; */
top:1px;
}
`;