Merge branch 'administativePages' into 'dev'
Administative pages See merge request kluppsoftware/smart-energia-web!84
This commit is contained in:
Alex Da Silva Santos
commit
95fab50500
@ -20,7 +20,7 @@ export const TableView = styled.main`
|
||||
border-radius: 16px;
|
||||
tr {
|
||||
th {
|
||||
font-family: 'poppins';
|
||||
font-family: 'Poppins';
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #6A707E;
|
||||
@ -28,13 +28,13 @@ export const TableView = styled.main`
|
||||
|
||||
td {
|
||||
:nth-child(3) {
|
||||
font-family: 'poppins';
|
||||
font-family: 'Poppins';
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #6A707E;
|
||||
}
|
||||
:nth-child(4) {
|
||||
font-family: 'poppins';
|
||||
font-family: 'Poppins';
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #828282;
|
||||
|
||||
@ -15,12 +15,12 @@ interface GradientButtonInterface {
|
||||
}
|
||||
|
||||
export default function GradientButton({ title, description, orange, purple, green, onClick }: GradientButtonInterface) {
|
||||
// function handleClick() {
|
||||
// onClick()
|
||||
// }
|
||||
function handleClick() {
|
||||
onClick()
|
||||
}
|
||||
|
||||
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>{description}</p>
|
||||
</GradientButtonView>
|
||||
|
||||
@ -11,7 +11,7 @@ export const LoginButtonView = styled.button`
|
||||
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%);
|
||||
|
||||
font-family: 'Nunito Sans';
|
||||
font-family: 'Poppins';
|
||||
font-weight: 700;
|
||||
font-size: calc(99.98% + 10px);
|
||||
line-height: 44px;
|
||||
|
||||
@ -56,7 +56,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel
|
||||
offset: -40,
|
||||
align: "start",
|
||||
font: {
|
||||
size: 10
|
||||
size: 12
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
|
||||
@ -29,7 +29,7 @@ export default function Header({name, admin}: headerInterface) {
|
||||
!admin && profile_picture?
|
||||
<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>
|
||||
)
|
||||
|
||||
@ -6,6 +6,8 @@ export const HeaderView = styled.header`
|
||||
|
||||
width: 100%;
|
||||
|
||||
margin-bottom: 40px;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -8,7 +8,7 @@ import PageTitle from '../../../components/pageTitle/PageTitle'
|
||||
import { IndustryInfoView } from '../../../styles/layouts/industryInfo/IndustryInfoView'
|
||||
import InputUploadPdf from '../../../components/inputUploadPdf/inputUpload';
|
||||
import { api } from '../../../services/api'
|
||||
import PdfThumbnail from 'react-pdf-thumbnail';
|
||||
// import PdfThumbnail from 'react-pdf-thumbnail';
|
||||
|
||||
import FormData from 'form-data';
|
||||
|
||||
@ -58,12 +58,12 @@ export default function industryInfo({userName}: any) {
|
||||
<IndustryInfoView>
|
||||
<Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
|
||||
<Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}>
|
||||
PDF Baixado com Sucesso!
|
||||
PDF enviado com Sucesso!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
<Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
|
||||
<Alert onClose={handleCloseSnack} severity="error" sx={{ width: '100%' }}>
|
||||
PDF não baixado!
|
||||
Falha ao enviar PDF!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
<Head>
|
||||
|
||||
@ -53,22 +53,22 @@ export default function chartTelemetry({userName}) {
|
||||
const [openDemandaContratada, setOpenDemandaContratada] = useState(false);
|
||||
const handleCloseDemandaContratada = () => setOpenDemandaContratada(false);
|
||||
|
||||
const [fatorPotenciaData, setFatorPotenciaData] = useState([]);
|
||||
const [demRegXDemCon, setDemRegXDemCon] = useState([]);
|
||||
const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState([]);
|
||||
const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState([]);
|
||||
const [fatorPotenciaData, setFatorPotenciaData] = useState(null);
|
||||
const [demRegXDemCon, setDemRegXDemCon] = useState(null);
|
||||
const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState(null);
|
||||
const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState(null);
|
||||
|
||||
const { ['user-cod_client']: cod_client } = parseCookies()
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const {startDate, endDate} = router.query
|
||||
const {startDate, endDate, unity, discretization} = router.query
|
||||
|
||||
async function getChartsData() {
|
||||
console.log(router.query)
|
||||
await api.post('/telemetry/powerFactor', {
|
||||
"filters": [
|
||||
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
|
||||
{"type" : "=", "field": discretization, "value": unity},
|
||||
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
|
||||
]
|
||||
}).then(res => {
|
||||
@ -77,13 +77,14 @@ export default function chartTelemetry({userName}) {
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
await api.post('/telemetry/demand', {
|
||||
await api.post('/telemetry/discretization', {
|
||||
"type": "5_min",
|
||||
"filters": [
|
||||
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
|
||||
{"type" : "=", "field": discretization, "value": unity},
|
||||
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
|
||||
]
|
||||
}).then(res => {
|
||||
setDemRegXDemCon(res.data.data)
|
||||
setDiscretizedConsumptionDataReativa(res.data.data)
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
@ -91,7 +92,7 @@ export default function chartTelemetry({userName}) {
|
||||
await api.post('/telemetry/discretization', {
|
||||
"type": "5_min",
|
||||
"filters": [
|
||||
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
|
||||
{"type" : "=", "field": discretization, "value": unity},
|
||||
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
|
||||
]
|
||||
}).then(res => {
|
||||
@ -100,14 +101,13 @@ export default function chartTelemetry({userName}) {
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
await api.post('/telemetry/discretization', {
|
||||
"type": "5_min",
|
||||
await api.post('/telemetry/demand', {
|
||||
"filters": [
|
||||
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
|
||||
{"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
|
||||
{"type" : "=", "field": discretization, "value": unity},
|
||||
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
|
||||
]
|
||||
}).then(res => {
|
||||
setDiscretizedConsumptionDataReativa(res.data.data)
|
||||
setDemRegXDemCon(res.data.data)
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
@ -115,6 +115,7 @@ export default function chartTelemetry({userName}) {
|
||||
|
||||
useEffect(() => {
|
||||
getChartsData()
|
||||
console.log(fatorPotenciaData)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
@ -125,8 +126,20 @@ export default function chartTelemetry({userName}) {
|
||||
<Header name={userName} />
|
||||
<PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
|
||||
<section className='chartContainer'>
|
||||
{
|
||||
demRegXDemCon==null?
|
||||
<div id="preloader_1">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
:
|
||||
<>
|
||||
<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>
|
||||
<Modal
|
||||
open={openFatorPotencia}
|
||||
@ -135,7 +148,8 @@ export default function chartTelemetry({userName}) {
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<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>
|
||||
</Modal>
|
||||
|
||||
@ -163,7 +177,7 @@ export default function chartTelemetry({userName}) {
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<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>
|
||||
</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/>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
}
|
||||
</section>
|
||||
</ChatTelemetryView>
|
||||
)
|
||||
|
||||
@ -64,3 +64,4 @@ export default function ForgotPassword() {
|
||||
</ForgotPasswordView>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -70,7 +70,7 @@ export default function Home() {
|
||||
}else{
|
||||
try {
|
||||
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)
|
||||
}
|
||||
})
|
||||
@ -91,8 +91,8 @@ export default function Home() {
|
||||
|
||||
useEffect(() => {
|
||||
setValues({
|
||||
password: null,
|
||||
showPassword: false,
|
||||
password: (''),
|
||||
showPassword: null,
|
||||
});
|
||||
setEmail("")
|
||||
}, [rota])
|
||||
|
||||
@ -2,6 +2,7 @@ import axios from 'axios';
|
||||
import { GetServerSideProps } from 'next';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link'
|
||||
import { Router } from 'next/router';
|
||||
import { parseCookies } from 'nookies';
|
||||
import React from 'react'
|
||||
|
||||
@ -27,17 +28,17 @@ export default function aboutUs({userName, news}: any) {
|
||||
|
||||
return <>
|
||||
<section>
|
||||
<h2 dangerouslySetInnerHTML={{__html: data.pubDate}} />
|
||||
<h2 dangerouslySetInnerHTML={{__html: data.pubDate.slice(0, -5)}} />
|
||||
<strong dangerouslySetInnerHTML={{__html: data.title}} />
|
||||
<strong>ANEEL APROVA REAJUSTE TARIFÁRIO ANUAL DA ENERGISA SERGIPE DE 16,46 % PARA O CONSUMIDOR RESIDENCIAL</strong>
|
||||
<br />
|
||||
<br />
|
||||
{
|
||||
<p dangerouslySetInnerHTML={{__html: data.description}} />
|
||||
<p dangerouslySetInnerHTML={{__html: data.description}} className='description'/>
|
||||
}
|
||||
<Button>
|
||||
<fieldset>
|
||||
<legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
|
||||
<legend> <BasicButton title='Ver Mais...' onClick={() => window.open(data.guid)}/></legend>
|
||||
</fieldset>
|
||||
</Button>
|
||||
</section>
|
||||
|
||||
@ -36,8 +36,24 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
|
||||
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) {
|
||||
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");
|
||||
|
||||
@ -63,7 +79,8 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
|
||||
row.push(cols[j].innerText);
|
||||
}
|
||||
|
||||
data.push(row.join(","));
|
||||
|
||||
data.push(row.join(";"));
|
||||
}
|
||||
|
||||
downloadCSVFile(data.join("\n"), filename);
|
||||
@ -95,8 +112,6 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
|
||||
} else {
|
||||
setTableDataState(tableData)
|
||||
}
|
||||
|
||||
console.log(month)
|
||||
}, [month, unidade])
|
||||
|
||||
return (
|
||||
@ -148,6 +163,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
|
||||
<table className="tg">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className='tg-8oo6'>Mês </th>
|
||||
<th className='tg-8oo6'>Unidade </th>
|
||||
<th className='tg-8oo6'>Operação</th>
|
||||
<th className='tg-8oo6'>Montante (MWh)</th>
|
||||
@ -161,6 +177,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
|
||||
tableDataState.map((value, index) => {
|
||||
return <>
|
||||
<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-uulg'>{value.operacao}</td>
|
||||
<td key={index} className='tg-gceh'>{parseFloat(value.montante_nf).toLocaleString('pt-br')}</td>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import router, { useRouter } from 'next/router'
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import Banner from '../components/banner/Banner';
|
||||
import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
|
||||
@ -17,26 +16,154 @@ import { FatorPotencia } from '../services/fatorPotencia';
|
||||
import RenderIf from '../utils/renderIf';
|
||||
import { GetServerSideProps } from 'next';
|
||||
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 [startDate, setStartDate] = useState('');
|
||||
const [endDate, setEndDate] = 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 [showChart, setShowChart] = useState(false);
|
||||
|
||||
const handleChange = (event: SelectChangeEvent) => {
|
||||
// setAge(event.target.value);
|
||||
};
|
||||
const [exception, setException] = useState(false);
|
||||
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(
|
||||
<TelemetriaView>
|
||||
<Head>
|
||||
<title>Smart Energia - Telemetria</title>
|
||||
</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} />
|
||||
<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,
|
||||
@ -59,24 +186,24 @@ export default function Telemetria({userName}: any) {
|
||||
<MenuItem value="">
|
||||
<em>Nenhum</em>
|
||||
</MenuItem>
|
||||
<MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem>
|
||||
|
||||
<MenuItem value={10}>Unidade 1</MenuItem>
|
||||
<MenuItem value={20}>Unidade 2</MenuItem>
|
||||
<MenuItem value={30}>Unidade 3</MenuItem>
|
||||
<MenuItem value={30}>Unidade 4</MenuItem>
|
||||
<MenuItem value={30}>Unidade 5</MenuItem>
|
||||
{
|
||||
clients.map((value) => {
|
||||
return <MenuItem key={1} value={value.codigo_scde}>{value.codigo_scde}</MenuItem>
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<div className='select'>
|
||||
<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 className='select'>
|
||||
<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)}/>
|
||||
</div>
|
||||
|
||||
@ -95,11 +222,66 @@ export default function Telemetria({userName}: any) {
|
||||
<MenuItem value="">
|
||||
<em>Nenhum</em>
|
||||
</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>
|
||||
</FormControl>
|
||||
</div>
|
||||
<button className='sendButton' onClick={() => {
|
||||
setSend(true)
|
||||
getTableData()
|
||||
}}>Enviar!</button>
|
||||
</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}>
|
||||
<LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data2} dataset1='Fator de Potencia' dataset2='Fator ref.' label={FatorPotencia.label1} />
|
||||
</RenderIf>
|
||||
@ -110,17 +292,20 @@ export default function Telemetria({userName}: any) {
|
||||
query: {
|
||||
startDate,
|
||||
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>
|
||||
<p>GRÁFICO</p>
|
||||
<p>Gerar gráficos com os dados selecionados</p>
|
||||
</button>
|
||||
</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 />
|
||||
<GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple onClick={() => {
|
||||
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 />
|
||||
</Buttons>
|
||||
<p className='paragraph'>
|
||||
@ -132,6 +317,7 @@ export default function Telemetria({userName}: any) {
|
||||
medição - Distribuidora.
|
||||
</i>
|
||||
</p>
|
||||
|
||||
</TelemetriaView>
|
||||
)
|
||||
}
|
||||
@ -139,6 +325,22 @@ export default function Telemetria({userName}: any) {
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const { ['@smartAuth-token']: token } = 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) {
|
||||
return {
|
||||
@ -151,7 +353,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
|
||||
return {
|
||||
props: {
|
||||
userName
|
||||
userName,
|
||||
clients
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,106 +19,3 @@
|
||||
align-items: center;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,14 +2,14 @@ import styled from "styled-components";
|
||||
|
||||
export const ChatTelemetryView = styled.main`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding-top: 0px!important;
|
||||
padding-top: 40px!important;
|
||||
|
||||
.chartContainer {
|
||||
display: flex;
|
||||
@ -18,4 +18,43 @@ export const ChatTelemetryView = styled.main`
|
||||
|
||||
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);}
|
||||
}
|
||||
`
|
||||
|
||||
@ -1,9 +1,67 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const TelemetriaView = styled.main`
|
||||
padding: 20px ;
|
||||
padding: 20px;
|
||||
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 {
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
@ -12,6 +70,105 @@ export const TelemetriaView = styled.main`
|
||||
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 {
|
||||
width: 15rem;
|
||||
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) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -5,6 +5,20 @@ export const NewsView = styled.main`
|
||||
|
||||
margin-bottom: 100px;
|
||||
|
||||
.description {
|
||||
a {
|
||||
display: none;
|
||||
}
|
||||
p {
|
||||
:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.read-more {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user