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

Telemetry finished

Browse Source
This commit is contained in:
Alex Santos 2022-05-11 12:49:21 -03:00
parent 967701b500
commit 06640aceb6
5 changed files with 34 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
pages/telemetria.tsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import Banner from '../src/components/banner/Banner';
import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
import GradientButton from '../src/components/buttons/gradientButton/GradientButton'
import Header from '../src/components/header/Header';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
@ -21,14 +23,14 @@ export default function Telemetria() {
return(
<TelemetriaView>
<Header name='' />
<Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
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' />
<FormControl size="small" sx={{ width: 240, mt:10 , pl:4 }} style={{}}>
<FormControl size="small" sx={{ width: 300, mt:10 , pl:7 }} style={{}}>
<p className='title'>Unidade</p>
<Select
value={age}
@ -46,7 +48,7 @@ export default function Telemetria() {
</FormControl>
<FormControl size="small" sx={{ width: 260, mt:10 , pl:5}} >
<FormControl size="small" sx={{ width: 300, mt:10 , pl:7}} >
<p className='title'>Data Inicial</p>
<Select
value={age}
@ -63,7 +65,7 @@ export default function Telemetria() {
</Select>
</FormControl>
<FormControl size="small" sx={{ width: 260, mt:10 , pl:5, }} >
<FormControl size="small" sx={{ width: 300, mt:10 , pl:7, }} >
<p className='title'>Data Final</p>
<Select
value={age}
@ -80,7 +82,7 @@ export default function Telemetria() {
</Select>
</FormControl>
<FormControl size="small" sx={{ width: 270, mt:10 , pl:5}} >
<FormControl size="small" sx={{ width: 280, mt:10 , pl:5}} >
<p className='title'>Discretização</p>
<Select
value={age}
@ -98,9 +100,9 @@ export default function Telemetria() {
</FormControl>
<Buttons>
<button className='btnGrafico'> <p className='btnTitle'>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>
<GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange />
<GradientButton title='DOWNLOADS' description='Gerar gráficos com os dados selecionados' purple />
<GradientButton title='DADOS' description='Gerar gráficos com os dados selecionados' green />
</Buttons>
</TelemetriaView>
)

11
src/components/banner/BannerView.ts
View File

@ -18,13 +18,16 @@ export const BannerView = styled.div`
.text {
position: relative;
margin: 82px 0 0 20px;
margin: 90px 30px;
font-family: 'Poppins';
font-size:19px;
font-style: normal;
color: white;
padding-top:45px;
z-index: 2;
}
`

2
src/components/buttons/basicButton/BasicButtonView.ts
View File

@ -7,7 +7,7 @@ export const BasicButtonView = styled.button`
width: 120px;
height: 45px;
cursor: pointer;
background: #254F7F;
border-radius: 8px;
border-style: none;

9
src/components/buttons/gradientButton/GradientButtonView.ts
View File

@ -6,16 +6,19 @@ export const GradientButtonView = styled.button`
align-items: center;
flex-direction: column;
border-radius: 2px;
width: 30%;
height: 150px;
width: 25%;
height: 110px;
margin-bottom: 25px;
font-family: 'Poppins';
font-size: 10px;
color: #FFFFFF;
background: ${ props => props.color==='orange'?
'linear-gradient(200.86deg, #F48665 8.03%, #F48665 91.97%, #FDA23F 91.97%), #FFFFFF'
'linear-gradient(200.86deg, #F48665 8.03%, #F48665 91.97%), #FFFFFF'
:
props.color === 'purple'?
'linear-gradient(200.69deg, #9A56FF 8.53%, #D78AFD 91.47%), #FFFFFF'

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

@ -37,10 +37,11 @@ export const Buttons = styled.div`
min-width: 10rem;
cursor: pointer;
margin-top: 5rem;
padding: 1px 60px;
justify-content: space-around;
flex-direction: row;
height: 6rem;
/* flex-direction: column; */
/*
.btnSucess{
font-size: 10px;
@ -49,7 +50,7 @@ export const Buttons = styled.div`
border: none;
} */
.btnGrafico {
/* .btnGrafico {
box-shadow:inset 0px 34px 0px -15px #F48665;
background-color:#F48665;
border:none;
@ -110,7 +111,7 @@ p{
.myButton:active {
position:relative;
/* justify-content: space-between; */
top:1px;
/* top:1px;
}
@ -119,8 +120,8 @@ p{
box-shadow:inset 100% #23BDB8;
background-color:#23BDB8;
border:none;
border-radius: 2px;
display:inline-block;
border-radius: 2px; */
/* display:inline-block;
width: 17rem;
cursor:pointer;
color:#ffffff;
@ -140,9 +141,9 @@ p{
}
.myButton:active {
position:relative;
/* justify-content: space-between; */
justify-content: space-between;
top:1px;
}
} */
`;