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

Merge branch 'administativePages' into 'dev'

Browse Source 
Administative pages

See merge request kluppsoftware/smart-energia-web!84
This commit is contained in:
Alex Da Silva Santos 2022-06-28 19:41:27 +00:00
commit 95fab50500
17 changed files with 623 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/administrativeTables/TableView.ts
View File

@ -20,7 +20,7 @@ export const TableView = styled.main`
border-radius: 16px; border-radius: 16px;
tr { tr {
th { th {
font-family: 'poppins'; font-family: 'Poppins';
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
color: #6A707E; color: #6A707E;
@ -28,13 +28,13 @@ export const TableView = styled.main`
td { td {
:nth-child(3) { :nth-child(3) {
font-family: 'poppins'; font-family: 'Poppins';
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
color: #6A707E; color: #6A707E;
} }
:nth-child(4) { :nth-child(4) {
font-family: 'poppins'; font-family: 'Poppins';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
color: #828282; color: #828282;

8
src/components/buttons/gradientButton/GradientButton.tsx
View File

@ -15,12 +15,12 @@ interface GradientButtonInterface {
} }
export default function GradientButton({ title, description, orange, purple, green, onClick }: GradientButtonInterface) { export default function GradientButton({ title, description, orange, purple, green, onClick }: GradientButtonInterface) {
// function handleClick() { function handleClick() {
// onClick() onClick()
// } }
return ( return (
<GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange' } > <GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange'} onClick={() => handleClick()}>
<p>{title}</p> <p>{title}</p>
<p>{description}</p> <p>{description}</p>
</GradientButtonView> </GradientButtonView>

2
src/components/buttons/loginButton/LoginButtonView.ts
View File

@ -11,7 +11,7 @@ export const LoginButtonView = styled.button`
background: rgb(2,0,36); background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(37,79,127,1) 35%, rgba(136,136,136,1) 100%); background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(37,79,127,1) 35%, rgba(136,136,136,1) 100%);
font-family: 'Nunito Sans'; font-family: 'Poppins';
font-weight: 700; font-weight: 700;
font-size: calc(99.98% + 10px); font-size: calc(99.98% + 10px);
line-height: 44px; line-height: 44px;

2
src/components/graph/SingleBar.tsx
View File

@ -56,7 +56,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel
offset: -40, offset: -40,
align: "start", align: "start",
font: { font: {
size: 10 size: 12
} }
}, },
legend: { legend: {

2
src/components/header/Header.tsx
View File

@ -29,7 +29,7 @@ export default function Header({name, admin}: headerInterface) {
!admin && profile_picture? !admin && profile_picture?
<Image src={profile_picture} height={50} width={75}/> <Image src={profile_picture} height={50} width={75}/>
: :
null <Image src='https://kluppdevelopment.s3.sa-east-1.amazonaws.com/avatars/zcgw6O0FxZgxRmIs97WMcUddKurQJcIqSxBLStSc.png' height={50} width={75}/>
} }
</HeaderView> </HeaderView>
) )

2
src/components/header/HeaderView.ts
View File

@ -6,6 +6,8 @@ export const HeaderView = styled.header`
width: 100%; width: 100%;
margin-bottom: 40px;
.icon { .icon {
display: flex; display: flex;
align-items: center; align-items: center;

6
src/pages/administrative/industryInfo/index.tsx
View File

@ -8,7 +8,7 @@ import PageTitle from '../../../components/pageTitle/PageTitle'
import { IndustryInfoView } from '../../../styles/layouts/industryInfo/IndustryInfoView' import { IndustryInfoView } from '../../../styles/layouts/industryInfo/IndustryInfoView'
import InputUploadPdf from '../../../components/inputUploadPdf/inputUpload'; import InputUploadPdf from '../../../components/inputUploadPdf/inputUpload';
import { api } from '../../../services/api' import { api } from '../../../services/api'
import PdfThumbnail from 'react-pdf-thumbnail'; // import PdfThumbnail from 'react-pdf-thumbnail';
import FormData from 'form-data'; import FormData from 'form-data';
@ -58,12 +58,12 @@ export default function industryInfo({userName}: any) {
<IndustryInfoView> <IndustryInfoView>
<Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}> <Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
<Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}> <Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}>
PDF Baixado com Sucesso! PDF enviado com Sucesso!
</Alert> </Alert>
</Snackbar> </Snackbar>
<Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}> <Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
<Alert onClose={handleCloseSnack} severity="error" sx={{ width: '100%' }}> <Alert onClose={handleCloseSnack} severity="error" sx={{ width: '100%' }}>
PDF não baixado! Falha ao enviar PDF!
</Alert> </Alert>
</Snackbar> </Snackbar>
<Head> <Head>

52
src/pages/chartTelemetry.tsx
View File

@ -53,22 +53,22 @@ export default function chartTelemetry({userName}) {
const [openDemandaContratada, setOpenDemandaContratada] = useState(false); const [openDemandaContratada, setOpenDemandaContratada] = useState(false);
const handleCloseDemandaContratada = () => setOpenDemandaContratada(false); const handleCloseDemandaContratada = () => setOpenDemandaContratada(false);
const [fatorPotenciaData, setFatorPotenciaData] = useState([]); const [fatorPotenciaData, setFatorPotenciaData] = useState(null);
const [demRegXDemCon, setDemRegXDemCon] = useState([]); const [demRegXDemCon, setDemRegXDemCon] = useState(null);
const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState([]); const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState(null);
const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState([]); const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState(null);
const { ['user-cod_client']: cod_client } = parseCookies() const { ['user-cod_client']: cod_client } = parseCookies()
const router = useRouter() const router = useRouter()
const {startDate, endDate} = router.query const {startDate, endDate, unity, discretization} = router.query
async function getChartsData() { async function getChartsData() {
console.log(router.query) console.log(router.query)
await api.post('/telemetry/powerFactor', { await api.post('/telemetry/powerFactor', {
"filters": [ "filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}, {"type" : "=", "field": discretization, "value": unity},
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]} {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
] ]
}).then(res => { }).then(res => {
@ -77,13 +77,14 @@ export default function chartTelemetry({userName}) {
console.log(res) console.log(res)
}) })
await api.post('/telemetry/demand', { await api.post('/telemetry/discretization', {
"type": "5_min",
"filters": [ "filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}, {"type" : "=", "field": discretization, "value": unity},
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]} {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
] ]
}).then(res => { }).then(res => {
setDemRegXDemCon(res.data.data) setDiscretizedConsumptionDataReativa(res.data.data)
}).catch(res => { }).catch(res => {
console.log(res) console.log(res)
}) })
@ -91,7 +92,7 @@ export default function chartTelemetry({userName}) {
await api.post('/telemetry/discretization', { await api.post('/telemetry/discretization', {
"type": "5_min", "type": "5_min",
"filters": [ "filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}, {"type" : "=", "field": discretization, "value": unity},
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]} {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
] ]
}).then(res => { }).then(res => {
@ -100,14 +101,13 @@ export default function chartTelemetry({userName}) {
console.log(res) console.log(res)
}) })
await api.post('/telemetry/discretization', { await api.post('/telemetry/demand', {
"type": "5_min",
"filters": [ "filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}, {"type" : "=", "field": discretization, "value": unity},
{"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]} {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
] ]
}).then(res => { }).then(res => {
setDiscretizedConsumptionDataReativa(res.data.data) setDemRegXDemCon(res.data.data)
}).catch(res => { }).catch(res => {
console.log(res) console.log(res)
}) })
@ -115,6 +115,7 @@ export default function chartTelemetry({userName}) {
useEffect(() => { useEffect(() => {
getChartsData() getChartsData()
console.log(fatorPotenciaData)
}, []) }, [])
return ( return (
@ -125,8 +126,20 @@ export default function chartTelemetry({userName}) {
<Header name={userName} /> <Header name={userName} />
<PageTitle title='Telemetria - Graficos' subtitle='Gráficos' /> <PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
<section className='chartContainer'> <section className='chartContainer'>
{
demRegXDemCon==null?
<div id="preloader_1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
:
<>
<div onClick={() => setOpenFatorPotencia(true)}> <div onClick={() => setOpenFatorPotencia(true)}>
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData} data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => value.hora)} /> <FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={FatorPotencia.label1} />
</div> </div>
<Modal <Modal
open={openFatorPotencia} open={openFatorPotencia}
@ -135,7 +148,8 @@ export default function chartTelemetry({userName}) {
aria-describedby="modal-modal-description" aria-describedby="modal-modal-description"
> >
<Box sx={style}> <Box sx={style}>
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData} data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={FatorPotencia.label1} /> <FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={FatorPotencia.label1} />
</Box> </Box>
</Modal> </Modal>
@ -163,7 +177,7 @@ export default function chartTelemetry({userName}) {
aria-describedby="modal-modal-description" aria-describedby="modal-modal-description"
> >
<Box sx={style}> <Box sx={style}>
<SingleBar title='Consumo discretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'}/> <DiscretizedConsumptionChart title='Consumo discretizado em 5 minutos' subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
</Box> </Box>
</Modal> </Modal>
@ -180,6 +194,8 @@ export default function chartTelemetry({userName}) {
<DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/> <DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
</Box> </Box>
</Modal> </Modal>
</>
}
</section> </section>
</ChatTelemetryView> </ChatTelemetryView>
) )

1
src/pages/forgotPassword.tsx
View File

@ -64,3 +64,4 @@ export default function ForgotPassword() {
</ForgotPasswordView> </ForgotPasswordView>
) )
} }

6
src/pages/index.tsx
View File

@ -70,7 +70,7 @@ export default function Home() {
}else{ }else{
try { try {
await signIn({email, password}).then((res: any) => { await signIn({email, password}).then((res: any) => {
if (res.response.status === 422 || res.response.status === 401) { if (res.response.status === 422 || res.response.status === 401 || res.response.status === 500 ) {
setOpenSnackError(true) setOpenSnackError(true)
} }
}) })
@ -91,8 +91,8 @@ export default function Home() {
useEffect(() => { useEffect(() => {
setValues({ setValues({
password: null, password: (''),
showPassword: false, showPassword: null,
}); });
setEmail("") setEmail("")
}, [rota]) }, [rota])

7
src/pages/news.tsx
View File

@ -2,6 +2,7 @@ import axios from 'axios';
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import Head from 'next/head'; import Head from 'next/head';
import Link from 'next/link' import Link from 'next/link'
import { Router } from 'next/router';
import { parseCookies } from 'nookies'; import { parseCookies } from 'nookies';
import React from 'react' import React from 'react'
@ -27,17 +28,17 @@ export default function aboutUs({userName, news}: any) {
return <> return <>
<section> <section>
<h2 dangerouslySetInnerHTML={{__html: data.pubDate}} /> <h2 dangerouslySetInnerHTML={{__html: data.pubDate.slice(0, -5)}} />
<strong dangerouslySetInnerHTML={{__html: data.title}} /> <strong dangerouslySetInnerHTML={{__html: data.title}} />
<strong>ANEEL APROVA REAJUSTE TARIFÁRIO ANUAL DA ENERGISA SERGIPE DE 16,46 % PARA O CONSUMIDOR RESIDENCIAL</strong> <strong>ANEEL APROVA REAJUSTE TARIFÁRIO ANUAL DA ENERGISA SERGIPE DE 16,46 % PARA O CONSUMIDOR RESIDENCIAL</strong>
<br /> <br />
<br /> <br />
{ {
<p dangerouslySetInnerHTML={{__html: data.description}} /> <p dangerouslySetInnerHTML={{__html: data.description}} className='description'/>
} }
<Button> <Button>
<fieldset> <fieldset>
<legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend> <legend> <BasicButton title='Ver Mais...' onClick={() => window.open(data.guid)}/></legend>
</fieldset> </fieldset>
</Button> </Button>
</section> </section>

25
src/pages/resumoOperacao.tsx
View File

@ -36,8 +36,24 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
setUnidade(event.target.value); setUnidade(event.target.value);
}; };
function stringToBytes(text) {
const length = text.length;
const result = new Uint8Array(length);
for (let i = 0; i < length; i++) {
const code = text.charCodeAt(i);
const byte = code > 255 ? 32 : code;
result[i] = byte;
}
return result;
}
// const originalString = 'ååå';
// const bytes = stringToBytes(originalString);
// const blob = new Blob([bytes.buffer], { type: 'text/plain; charset=ISO-8859-1' });
function downloadCSVFile(csv, filename) { function downloadCSVFile(csv, filename) {
const csv_file = new Blob([csv], {type: "text/csv"});
const csv_file = new Blob(["\ufeff",csv], {type: "text/csv"});
const download_link = document.createElement("a"); const download_link = document.createElement("a");
@ -63,7 +79,8 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
row.push(cols[j].innerText); row.push(cols[j].innerText);
} }
data.push(row.join(","));
data.push(row.join(";"));
} }
downloadCSVFile(data.join("\n"), filename); downloadCSVFile(data.join("\n"), filename);
@ -95,8 +112,6 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
} else { } else {
setTableDataState(tableData) setTableDataState(tableData)
} }
console.log(month)
}, [month, unidade]) }, [month, unidade])
return ( return (
@ -148,6 +163,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
<table className="tg"> <table className="tg">
<thead> <thead>
<tr> <tr>
<th className='tg-8oo6'>Mês </th>
<th className='tg-8oo6'>Unidade </th> <th className='tg-8oo6'>Unidade </th>
<th className='tg-8oo6'>Operação</th> <th className='tg-8oo6'>Operação</th>
<th className='tg-8oo6'>Montante (MWh)</th> <th className='tg-8oo6'>Montante (MWh)</th>
@ -161,6 +177,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
tableDataState.map((value, index) => { tableDataState.map((value, index) => {
return <> return <>
<tr> <tr>
<td key={index} className='tg-gceh'>{value.mes}</td>
<td key={index} className='tg-gceh'>{value.cod_smart_unidade}</td> <td key={index} className='tg-gceh'>{value.cod_smart_unidade}</td>
<td key={index} className='tg-uulg'>{value.operacao}</td> <td key={index} className='tg-uulg'>{value.operacao}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.montante_nf).toLocaleString('pt-br')}</td> <td key={index} className='tg-gceh'>{parseFloat(value.montante_nf).toLocaleString('pt-br')}</td>

239
src/pages/telemetria.tsx
View File

@ -1,5 +1,4 @@
import React, { useState } from 'react'; import React, { useEffect, useState } from 'react';
import router, { useRouter } from 'next/router'
import Banner from '../components/banner/Banner'; import Banner from '../components/banner/Banner';
import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView'; import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
@ -17,26 +16,154 @@ import { FatorPotencia } from '../services/fatorPotencia';
import RenderIf from '../utils/renderIf'; import RenderIf from '../utils/renderIf';
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import { parseCookies } from 'nookies'; import { parseCookies } from 'nookies';
import { api } from '../services/api';
import Snackbar from '@mui/material/Snackbar'
import MuiAlert, { AlertProps } from '@mui/material/Alert'
import getAPIClient from '../services/ssrApi';
export default function Telemetria({userName}: any) { const style = {
position: 'absolute' as const,
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
};
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
props,
ref
) {
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
})
export default function Telemetria({userName, clients}: any) {
const [unity, setUnity] = useState(''); const [unity, setUnity] = useState('');
const [startDate, setStartDate] = useState(''); const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState(''); const [endDate, setEndDate] = useState('');
const [discretization, setDiscretization] = useState(''); const [discretization, setDiscretization] = useState('');
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
const [openSnackError, setOpenSnackError] = useState<boolean>(false)
const handleCloseSnack = (
event?: React.SyntheticEvent | Event,
reason?: string
) => {
if (reason === 'clickaway') {
return
}
setOpenSnackError(false)
setOpenSnackSuccess(false)
}
function downloadCSVFile(csv, filename) {
const csv_file = new Blob([csv], {type: "text/csv"});
const download_link = document.createElement("a");
download_link.download = filename;
download_link.href = window.URL.createObjectURL(csv_file);
download_link.style.display = "none";
document.body.appendChild(download_link);
download_link.click();
}
function htmlToCSV(html, filename) {
const data = [];
const rows = document.querySelectorAll("table tr");
for (let i = 0; i < rows.length; i++) {
const row = [], cols: any = rows[i].querySelectorAll("td, th");
for (let j = 0; j < cols.length; j++) {
row.push(cols[j].innerText);
}
data.push(row.join(","));
}
downloadCSVFile(data.join("\n"), filename);
}
const [tableData, setTableData] = useState(null)
const [date, setDate] = useState(''); const [date, setDate] = useState('');
const [showChart, setShowChart] = useState(false); const [showChart, setShowChart] = useState(false);
const handleChange = (event: SelectChangeEvent) => { const [exception, setException] = useState(false);
// setAge(event.target.value); const [send, setSend] = useState(false);
};
const [open, setOpen] = useState(false);
async function getTableData() {
if (startDate!=='' && endDate!=='' && send)
setOpen(true)
await api.post('/telemetry/powerFactor', {
"type": "15_min",
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
{"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
]
}).then(res => {
setTableData(res.data.data)
setOpenSnackError(false)
setOpenSnackSuccess(true)
setOpen(false)
}).catch(res => {
setException(true)
setSend(false)
setOpenSnackError(true)
setOpenSnackSuccess(false)
console.log(res)
})
}
useEffect(() => {
setSend(false)
}, [startDate, endDate])
return( return(
<TelemetriaView> <TelemetriaView>
<Head> <Head>
<title>Smart Energia - Telemetria</title> <title>Smart Energia - Telemetria</title>
</Head> </Head>
<Snackbar
open={openSnackSuccess}
autoHideDuration={4000}
onClose={handleCloseSnack}
>
<Alert
onClose={handleCloseSnack}
severity="success"
sx={{ width: '100%' }}
>
Dados coletados com sucesso com Sucesso!
</Alert>
</Snackbar>
<Snackbar
open={openSnackError}
autoHideDuration={4000}
onClose={handleCloseSnack}
>
<Alert
onClose={handleCloseSnack}
severity="error"
sx={{ width: '100%' }}
>
Não foi possivel pegar os dados!
</Alert>
</Snackbar>
<Header name={userName} /> <Header name={userName} />
<Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia - <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, SCDE da Câmara de Comercialização de Energia Elétrica - CCEE,
@ -59,24 +186,24 @@ export default function Telemetria({userName}: any) {
<MenuItem value=""> <MenuItem value="">
<em>Nenhum</em> <em>Nenhum</em>
</MenuItem> </MenuItem>
<MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem>
<MenuItem value={10}>Unidade 1</MenuItem> {
<MenuItem value={20}>Unidade 2</MenuItem> clients.map((value) => {
<MenuItem value={30}>Unidade 3</MenuItem> return <MenuItem key={1} value={value.codigo_scde}>{value.codigo_scde}</MenuItem>
<MenuItem value={30}>Unidade 4</MenuItem> })
<MenuItem value={30}>Unidade 5</MenuItem> }
</Select> </Select>
</FormControl> </FormControl>
</div> </div>
<div className='select'> <div className='select'>
<p className='title' >Data inicial</p> <p className='title' >Data inicial</p>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={startDate} onChange={(value) => setStartDate(value.target.value)}/> <input type="date" data-date="" data-date-format="DD MMMM YYYY" value={startDate} onChange={(value) => setStartDate(value.target.value)} onSelect={value => console.log(value)}/>
</div> </div>
<div className='select'> <div className='select'>
<p className='title' >Data final</p> <p className='title' >Data final</p>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={endDate} onChange={(value) => setEndDate(value.target.value)}/> <input type="date" data-date="" data-date-format="DD MMMM YYYY" value={endDate} onChange={(value) => setEndDate(value.target.value)}/>
</div> </div>
@ -95,11 +222,66 @@ export default function Telemetria({userName}: any) {
<MenuItem value=""> <MenuItem value="">
<em>Nenhum</em> <em>Nenhum</em>
</MenuItem> </MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
</Select> </Select>
</FormControl> </FormControl>
</div> </div>
<button className='sendButton' onClick={() => {
setSend(true)
getTableData()
}}>Enviar!</button>
</section> </section>
<RenderIf isTrue={startDate!=='' && endDate!=='' && tableData===null && exception === false && send}>
<div className='modal'>
<div id="preloader_1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</RenderIf>
<RenderIf isTrue={startDate!=='' && endDate!=='' && tableData!==null}>
<table className="tg">
<thead>
<tr>
<th className='tg-8oo6'>Ponto</th>
<th className='tg-8oo6'>Numero do dia</th>
<th className='tg-8oo6'>Dia formatado</th>
<th className='tg-8oo6'>Hora</th>
<th className='tg-8oo6'>Minuto</th>
<th className='tg-8oo6'>Consumo</th>
<th className='tg-8oo6'>Reativa</th>
</tr>
</thead>
<tbody>
{
tableData!==null?
tableData?.map((value, index) => {
return <>
<tr>
<td key={index} className='tg-gceh'>{value.ponto}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td>
<td key={index} className='tg-uulg'>{value.day_formatted}</td>
<td key={index} className='tg-gceh'>{value.hora}</td>
<td key={index} className='tg-gceh'>{value.minut}</td>
<td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
</tr>
</>
})
:
null
}
</tbody>
</table>
</RenderIf>
<RenderIf isTrue={showChart}> <RenderIf isTrue={showChart}>
<LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data2} dataset1='Fator de Potencia' dataset2='Fator ref.' label={FatorPotencia.label1} /> <LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data2} dataset1='Fator de Potencia' dataset2='Fator ref.' label={FatorPotencia.label1} />
</RenderIf> </RenderIf>
@ -110,17 +292,20 @@ export default function Telemetria({userName}: any) {
query: { query: {
startDate, startDate,
endDate, endDate,
discretization discretization: discretization==='5_min'? 'med_5min.ponto' : discretization==='15_min'? '15min.ponto' : discretization==='1_hora'? 'med_1hora.ponto' : discretization==='1_dia'? 'med_1dia.ponto' : 'med_5min.ponto',
unity
}, },
}} > }} >
{/* <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange/> */}
<button> <button>
<p>GRÁFICO</p> <p>GRÁFICO</p>
<p>Gerar gráficos com os dados selecionados</p> <p>Gerar gráficos com os dados selecionados</p>
</button> </button>
</Link> </Link>
{/* <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange onClick={() => router.replace('/chartTelemetry')}/> */} <GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple onClick={() => {
<GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple /> const html = document.querySelector("table").outerHTML;
htmlToCSV(html, "telemetria.csv");
console.log('clicando')
}}/>
<GradientButton title='DADOS' description='hORÁRIOS DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} green /> <GradientButton title='DADOS' description='hORÁRIOS DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} green />
</Buttons> </Buttons>
<p className='paragraph'> <p className='paragraph'>
@ -132,6 +317,7 @@ export default function Telemetria({userName}: any) {
medição - Distribuidora. medição - Distribuidora.
</i> </i>
</p> </p>
</TelemetriaView> </TelemetriaView>
) )
} }
@ -139,6 +325,22 @@ export default function Telemetria({userName}: any) {
export const getServerSideProps: GetServerSideProps = async (ctx) => { export const getServerSideProps: GetServerSideProps = async (ctx) => {
const { ['@smartAuth-token']: token } = parseCookies(ctx) const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx) const { ['user-name']: userName } = parseCookies(ctx)
const { ['user-client_id']: id } = parseCookies(ctx)
const apiClient = getAPIClient(ctx)
let clients = []
await apiClient.post('/units', {
"filters": [
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": id}
],
"fields": ["cod_smart_unidade", "codigo_scde"],
"distinct": true
}).then(res => {
clients = res.data.data
}).catch(res => {
console.log(res)
})
if (!token) { if (!token) {
return { return {
@ -151,7 +353,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
return { return {
props: { props: {
userName userName,
clients
} }
} }
} }

103
src/styles/Home.module.css
View File

@ -19,106 +19,3 @@
align-items: center; align-items: center;
font-family: 'Poppins'; font-family: 'Poppins';
} }
.footer {
display: flex;
flex: 1;
padding: 2rem 0;
border-top: 1px solid #eaeaea;
justify-content: center;
align-items: center;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.title a {
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
margin: 4rem 0;
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
}
.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}
.card h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
margin-left: 0.5rem;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}

43
src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts
View File

@ -2,14 +2,14 @@ import styled from "styled-components";
export const ChatTelemetryView = styled.main` export const ChatTelemetryView = styled.main`
display: flex; display: flex;
justify-content: center; justify-content: flex-start;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
padding-top: 0px!important; padding-top: 40px!important;
.chartContainer { .chartContainer {
display: flex; display: flex;
@ -18,4 +18,43 @@ export const ChatTelemetryView = styled.main`
width: 100%; width: 100%;
} }
#preloader_1{
position:absolute;
top: 50%;
left: 50%;
}
#preloader_1 span{
display:block;
bottom:0px;
width: 9px;
height: 5px;
background:#254F7F;
position:absolute;
animation: preloader_1 1.5s infinite ease-in-out;
}
#preloader_1 span:nth-child(2){
left:11px;
animation-delay: .2s;
}
#preloader_1 span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@keyframes preloader_1 {
0% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
25% {height:30px;transform:translateY(15px);background:#254F7F;}
50% {height:5px;transform:translateY(0px);background:rgb(231,153,47);}
100% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
}
` `

208
src/styles/layouts/Telemetria/TelemetriaView.ts
View File

@ -4,6 +4,64 @@ export const TelemetriaView = styled.main`
padding: 20px; padding: 20px;
width: 100%; width: 100%;
.modal {
position: absolute;
background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 999;
}
#preloader_1{
position:absolute;
top: 50%;
left: 50%;
}
#preloader_1 span{
display:block;
bottom:0px;
width: 9px;
height: 5px;
background:#254F7F;
position:absolute;
animation: preloader_1 1.5s infinite ease-in-out;
}
#preloader_1 span:nth-child(2){
left:11px;
animation-delay: .2s;
}
#preloader_1 span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@keyframes preloader_1 {
0% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
25% {height:30px;transform:translateY(15px);background:#254F7F;}
50% {height:5px;transform:translateY(0px);background:rgb(231,153,47);}
100% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
}
.title { .title {
color: black; color: black;
font-weight: 600; font-weight: 600;
@ -12,6 +70,105 @@ export const TelemetriaView = styled.main`
margin: 0 0 0 10px; margin: 0 0 0 10px;
} }
.sendButton {
width: 60px;
height: 40px;
background:#254F7F;
color: white;
border: none;
border-radius: 8px;
font-family: 'Poppins';
font-size: 14px;
color: #FFFFFF;
margin-top: 20px;
}
table {
display: none;
}
.tg{
border-collapse:collapse;
border-spacing:0;
font-family:Poppins;
width: 100%;
}
.tg td{
border-color:#DDDFE1;
border-style:solid;
border-width:1px;
font-family:Poppins;
font-size: 10px;
overflow:hidden;
padding:17px 30px;
word-break:normal;
}
.tg th{
border-color:#DDDFE1;
border-style:solid;
border-width:1px;
font-family:Poppins;
font-size:10px;
font-weight:500;
overflow:hidden;
padding:10px 5px;
word-break:normal;
}
.tg .tg-8oo6{
color:#464a53;
font-size:13px;
text-align:center;
vertical-align:top;
padding: 10px 18px;
text-align: center;
}
.tg .tg-uulg{
background-color:#efefef;
color:#abafb3;
font-size:14px;
text-align:center;
vertical-align:top
}
.tg .tg-gceh{
background-color:#efefef;
color:#6a707e;
font-size:14px;
text-align:center;
vertical-align:top
}
.tg .tg-0tzy{
color:#abafb3;
font-size:14px;
text-align:center;
vertical-align:top
}
.tg .tg-hq65{color:#6a707e;
font-size:14px;
text-align:center;
vertical-align:top
}
.tg .tg-baqh{
text-align:center;
vertical-align:top
}
.tg .tg-0lax{
text-align:left;
vertical-align:top
}
.tg .tg-womg{
background-color:#dddfe1;
text-align:center;
vertical-align:top
}
input { input {
width: 15rem; width: 15rem;
height: 2.5rem; height: 2.5rem;
@ -132,6 +289,57 @@ export const Buttons = styled.div`
} }
} }
#preloader_1{
position:absolute;
top: 50%;
left: 50%;
}
#preloader_1 span{
display:block;
bottom:0px;
width: 9px;
height: 5px;
background:#254F7F;
position:absolute;
animation: preloader_1 1.5s infinite ease-in-out;
}
#preloader_1 span:nth-child(2){
left:11px;
animation-delay: .2s;
}
#preloader_1 span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@keyframes preloader_1 {
0% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
25% {height:30px;transform:translateY(15px);background:#254F7F;}
50% {height:5px;transform:translateY(0px);background:rgb(231,153,47);}
100% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
}
.loadingTable {
position: relative;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
z-index: 9999999;
background-color: #FFFFFF;
}
@media (max-width: 942px) { @media (max-width: 942px) {
align-items: center; align-items: center;
justify-content: center; justify-content: center;

14
src/styles/layouts/news/NewsView.ts
View File

@ -5,6 +5,20 @@ export const NewsView = styled.main`
margin-bottom: 100px; margin-bottom: 100px;
.description {
a {
display: none;
}
p {
:last-child {
display: none;
}
}
.read-more {
display: none;
}
}
p { p {
font-family: 'Poppins'; font-family: 'Poppins';
font-style: normal; font-style: normal;