742 lines
30 KiB
TypeScript
742 lines
30 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
|
||
import Banner from '../../components/banner/Banner';
|
||
import { TelemetriaView, Buttons, TableHeader, ChartFilters} from '../../styles/layouts/Telemetria/TelemetriaView';
|
||
import GradientButton from '../../components/buttons/gradientButton/GradientButton'
|
||
import Header from '../../components/header/Header';
|
||
import MenuItem from '@mui/material/MenuItem';
|
||
import InputLabel from '@mui/material/InputLabel';
|
||
import FormControl from '@mui/material/FormControl';
|
||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||
import Head from 'next/head';
|
||
|
||
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';
|
||
import router from 'next/router';
|
||
import { DemRegXDemConChart } from '../../components/graph/DemRegXDemConChart';
|
||
|
||
import Tabs from '@mui/material/Tabs';
|
||
import Tab from '@mui/material/Tab';
|
||
|
||
import TextField from '@mui/material/TextField';
|
||
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
|
||
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
||
import BasicButton from '../../components/buttons/basicButton/BasicButton';
|
||
import { DiscretizedConsumptionChart } from '../../components/graph/DiscretizedConsumptionChart';
|
||
import DiscretizedConsumptionChartLine from '../../components/graph/DiscretizedConsumptionChartLine';
|
||
import FatorPotenciaChart from '../../components/graph/fatorPotenciaChart';
|
||
import { getDiscretization } from '../../services/charts/telemetry/getDiscretization';
|
||
import { getPowerFactorData } from '../../services/charts/telemetry/getPowerFactor';
|
||
import { getDemand } from '../../services/charts/telemetry/getDemand';
|
||
import PageTitle from '../../components/pageTitle/PageTitle';
|
||
|
||
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(new Date());
|
||
const [endDate, setEndDate] = useState(new Date());
|
||
const [discretization, setDiscretization] = useState('');
|
||
|
||
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
|
||
const [openSnackError, setOpenSnackError] = useState<boolean>(false)
|
||
const [openSnackFields, setOpenSnackFields] = useState<boolean>(false)
|
||
|
||
const currentDate = new Date().toLocaleDateString().split('/').reverse().join('-')
|
||
|
||
const handleCloseSnack = (
|
||
event?: React.SyntheticEvent | Event,
|
||
reason?: string
|
||
) => {
|
||
if (reason === 'clickaway') {
|
||
return
|
||
}
|
||
|
||
setOpenSnackError(false)
|
||
setOpenSnackSuccess(false)
|
||
setOpenSnackFields(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 [menu, setMenu] = useState(0);
|
||
|
||
const [showChart, setShowChart] = useState(false);
|
||
|
||
const [exception, setException] = useState(false);
|
||
const [send, setSend] = useState(false);
|
||
|
||
const [open, setOpen] = useState(false);
|
||
|
||
const handleChangeStartDate = (newValue: Date | null) => {
|
||
console.log(newValue)
|
||
setStartDate(newValue)
|
||
};
|
||
const handleChangeEndDate = (newValue: Date | null) => {
|
||
console.log(newValue)
|
||
setEndDate(newValue)
|
||
};
|
||
|
||
console.log(currentDate.slice(0, 8) + '01')
|
||
|
||
const [demRegXDemCon2, setDemRegXDemCon2] = useState([]);
|
||
|
||
async function getTableData() {
|
||
const html = document.querySelector("table")?.outerHTML;
|
||
if (startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && send)
|
||
setOpen(true)
|
||
await api.post('/telemetry/powerFactor', {
|
||
"type": discretization,
|
||
"filters": [
|
||
{"type" : "=", "field": "med_5min.ponto", "value": unity},
|
||
{"type" : "between", "field": "dia_num", "value": [currentDate.slice(0, 8) + '01', currentDate]}
|
||
]
|
||
}).then(res => {
|
||
setTableData(res.data.data)
|
||
setOpenSnackError(false)
|
||
setOpenSnackSuccess(true)
|
||
setOpen(false)
|
||
htmlToCSV(html, "telemetria.csv")
|
||
}).catch(res => {
|
||
setSend(false)
|
||
setException(true)
|
||
setOpenSnackError(true)
|
||
setOpenSnackSuccess(false)
|
||
})
|
||
}
|
||
|
||
function handleVerifyFields() {
|
||
if (unity != '' && startDate.toLocaleDateString() != '' && endDate.toLocaleDateString() != '' && discretization != '') {
|
||
router.push({
|
||
pathname: '/chartTelemetry',
|
||
query: {
|
||
'startDate': startDate.toLocaleDateString(),
|
||
'endDate': endDate.toLocaleDateString(),
|
||
discretization,
|
||
unity
|
||
},
|
||
})
|
||
return true
|
||
} else {
|
||
setOpenSnackFields(true)
|
||
return false
|
||
}
|
||
}
|
||
|
||
async function getChartData() {
|
||
const html = document.querySelector("table")?.outerHTML;
|
||
await api.post('/telemetry/demand', {
|
||
"type": discretization,
|
||
"filters": [
|
||
{"type" : "=", "field": "med_5min.ponto", "value": unity},
|
||
{"type" : "between", "field": "dia_num", "value": [currentDate.slice(0, 8) + '01', currentDate]}
|
||
]
|
||
}).then(res => {
|
||
setDemRegXDemCon2(res.data.data)
|
||
htmlToCSV(html, "telemetria.csv")
|
||
}).catch(res => {
|
||
// console.log(res)
|
||
// router.push('/telemetria')
|
||
})
|
||
}
|
||
|
||
const [filters, setFilters] = useState()
|
||
|
||
const [fatorPotenciaData, setFatorPotenciaData] = useState([]);
|
||
const [demRegXDemCon, setDemRegXDemCon] = useState([]);
|
||
const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState([]);
|
||
|
||
useEffect(() => {
|
||
setSend(false)
|
||
}, [startDate, endDate])
|
||
|
||
useEffect(() => {
|
||
if (send===true)
|
||
getChartData()
|
||
}, [send])
|
||
|
||
useEffect(() => {
|
||
// getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
|
||
// .then(result => setDiscretizedConsumptionData(result))
|
||
// .catch(exception => console.log(exception))
|
||
}, [discretization])
|
||
|
||
return(
|
||
<main style={{width: '100%'}}>
|
||
<Head>
|
||
<title>Smart Energia - Telemetria</title>
|
||
</Head>
|
||
<Snackbar
|
||
open={openSnackSuccess}
|
||
autoHideDuration={4000}
|
||
onClose={handleCloseSnack}
|
||
>
|
||
<Alert
|
||
onClose={handleCloseSnack}
|
||
severity="success"
|
||
sx={{ width: '100%' }}
|
||
>
|
||
Dados disponíveis para Visualização/Download!
|
||
</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>
|
||
|
||
<Snackbar
|
||
open={openSnackFields}
|
||
autoHideDuration={4000}
|
||
onClose={handleCloseSnack}
|
||
>
|
||
<Alert
|
||
onClose={handleCloseSnack}
|
||
severity="error"
|
||
sx={{ width: '100%' }}
|
||
>
|
||
Verifique os campos!
|
||
</Alert>
|
||
</Snackbar>
|
||
|
||
<Header name={userName}>
|
||
<PageTitle title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia'/>
|
||
</Header>
|
||
<TelemetriaView>
|
||
{/* <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' /> */}
|
||
|
||
<RenderIf isTrue={true}>
|
||
<TableHeader>
|
||
<Tabs value={menu} onChange={(e, nv) => setMenu(nv)} aria-label="">
|
||
<Tab label={
|
||
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
|
||
discretization==='15_min'? 'Consumo discretizado em 15 minutos' :
|
||
discretization==='1_hora'? 'Consumo discretizado em 1 hora' :
|
||
'Consumo discretizado em 1 dia'}/>
|
||
<Tab label="Demanda"/>
|
||
<Tab label="Fator Potencia"/>
|
||
<Tab label="Mês Atual"/>
|
||
</Tabs>
|
||
</TableHeader>
|
||
|
||
<RenderIf isTrue={menu===0}>
|
||
<ChartFilters>
|
||
<div className='input'>
|
||
<FormControl style={{ minWidth: 100, width: 200}} size="small">
|
||
<InputLabel>Unidade</InputLabel>
|
||
<Select
|
||
labelId="demo-select-small"
|
||
id="demo-select-small"
|
||
value={unity}
|
||
label="Unidade"
|
||
onChange={value => setUnity(value.target.value)}
|
||
sx={{height: 63, mb: 2}}
|
||
fullWidth
|
||
>
|
||
<MenuItem value="">
|
||
<em>Nenhum</em>
|
||
</MenuItem>
|
||
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
|
||
{
|
||
clients.map((value) => {
|
||
return <MenuItem key={1} value={value.codigo_scde}>{value.unidade}</MenuItem>
|
||
})
|
||
}
|
||
</Select>
|
||
</FormControl>
|
||
</div>
|
||
<div className='input'>
|
||
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
|
||
<InputLabel>Discretização</InputLabel>
|
||
<Select
|
||
labelId="demo-select-small"
|
||
id="demo-select-small"
|
||
value={discretization}
|
||
label="Discretização"
|
||
onChange={value => setDiscretization(value.target.value)}
|
||
sx={{height: 63, mb: 2}}
|
||
fullWidth
|
||
>
|
||
<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>
|
||
<MenuItem value="1_mes">1 mês</MenuItem> */}
|
||
</Select>
|
||
</FormControl>
|
||
</div>
|
||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||
<div className='datePicker'>
|
||
<DesktopDatePicker
|
||
label="Data inicial"
|
||
inputFormat="dd/MM/yyyy"
|
||
value={startDate}
|
||
onChange={handleChangeStartDate}
|
||
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
|
||
/>
|
||
</div>
|
||
<div className='datePicker' style={{marginRight: 10}}>
|
||
<DesktopDatePicker
|
||
label="Data final"
|
||
inputFormat="dd/MM/yyyy"
|
||
value={endDate}
|
||
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
|
||
:
|
||
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
|
||
:
|
||
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
|
||
:
|
||
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
|
||
:
|
||
new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
|
||
}
|
||
onChange={(newValue: any) => handleChangeEndDate(newValue)}
|
||
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
|
||
/>
|
||
</div>
|
||
</LocalizationProvider>
|
||
<div className='select'>
|
||
<BasicButton title='Selecionar!' onClick={() => {
|
||
getDiscretization(unity, startDate, endDate, discretization)
|
||
.then(result => setDiscretizedConsumptionData(result))
|
||
.catch(exception => console.log(exception))
|
||
}}/>
|
||
</div>
|
||
</ChartFilters>
|
||
{/* <RenderIf isTrue={discretization!=='1_dia' && discretization!=='1_mes'}> */}
|
||
<DiscretizedConsumptionChart title={
|
||
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
|
||
discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
|
||
} subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
|
||
{/* <p style={{alignSelf: 'center', textAlign: 'center'}}>{`Mês - ${startDate}`}</p> */}
|
||
{/* </RenderIf> */}
|
||
</RenderIf>
|
||
|
||
<RenderIf isTrue={menu===1}>
|
||
<ChartFilters>
|
||
<div className='input'>
|
||
<FormControl style={{ minWidth: 100, width: 200}} size="small">
|
||
<InputLabel>Unidade</InputLabel>
|
||
<Select
|
||
labelId="demo-select-small"
|
||
id="demo-select-small"
|
||
value={unity}
|
||
label="Unidade"
|
||
onChange={value => setUnity(value.target.value)}
|
||
sx={{height: 63, mb: 2}}
|
||
fullWidth
|
||
>
|
||
<MenuItem value="">
|
||
<em>Nenhum</em>
|
||
</MenuItem>
|
||
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
|
||
{
|
||
clients.map((value) => {
|
||
return <MenuItem key={1} value={value.codigo_scde}>{value.unidade}</MenuItem>
|
||
})
|
||
}
|
||
</Select>
|
||
</FormControl>
|
||
</div>
|
||
<div className='input'>
|
||
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
|
||
<InputLabel>Discretização</InputLabel>
|
||
<Select
|
||
labelId="demo-select-small"
|
||
id="demo-select-small"
|
||
value={discretization}
|
||
label="Discretização"
|
||
onChange={value => setDiscretization(value.target.value)}
|
||
sx={{height: 63, mb: 2}}
|
||
fullWidth
|
||
>
|
||
<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>
|
||
<MenuItem value="1_mes">1 mês</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
</div>
|
||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||
<div className='datePicker'>
|
||
<DesktopDatePicker
|
||
label="Data inicial"
|
||
inputFormat="dd/MM/yyyy"
|
||
value={startDate}
|
||
onChange={handleChangeStartDate}
|
||
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
|
||
/>
|
||
</div>
|
||
<div className='datePicker' style={{marginRight: 10}}>
|
||
<DesktopDatePicker
|
||
label="Data final"
|
||
inputFormat="dd/MM/yyyy"
|
||
value={endDate}
|
||
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
|
||
:
|
||
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
|
||
:
|
||
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
|
||
:
|
||
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
|
||
:
|
||
new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
|
||
}
|
||
onChange={(newValue: any) => handleChangeEndDate(newValue)}
|
||
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
|
||
/>
|
||
</div>
|
||
</LocalizationProvider>
|
||
<div className='select'>
|
||
<BasicButton title='Selecionar!' onClick={() => {
|
||
getDemand(unity, startDate, endDate, discretization)
|
||
.then(result => setDemRegXDemCon(result))
|
||
.catch(exception => console.log(exception))
|
||
}}/>
|
||
</div>
|
||
</ChartFilters>
|
||
<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/>
|
||
</RenderIf>
|
||
|
||
<RenderIf isTrue={menu===2}>
|
||
<ChartFilters>
|
||
<div className='input'>
|
||
<FormControl style={{ minWidth: 100, width: 200}} size="small">
|
||
<InputLabel>Unidade</InputLabel>
|
||
<Select
|
||
labelId="demo-select-small"
|
||
id="demo-select-small"
|
||
value={unity}
|
||
label="Unidade"
|
||
onChange={value => setUnity(value.target.value)}
|
||
sx={{height: 63, mb: 2}}
|
||
fullWidth
|
||
>
|
||
<MenuItem value="">
|
||
<em>Nenhum</em>
|
||
</MenuItem>
|
||
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
|
||
{
|
||
clients.map((value) => {
|
||
return <MenuItem key={1} value={value.codigo_scde}>{value.unidade}</MenuItem>
|
||
})
|
||
}
|
||
</Select>
|
||
</FormControl>
|
||
</div>
|
||
<div className='input'>
|
||
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
|
||
<InputLabel>Discretização</InputLabel>
|
||
<Select
|
||
labelId="demo-select-small"
|
||
id="demo-select-small"
|
||
value={discretization}
|
||
label="Discretização"
|
||
onChange={value => setDiscretization(value.target.value)}
|
||
sx={{height: 63, mb: 2}}
|
||
fullWidth
|
||
>
|
||
<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>
|
||
<MenuItem value="1_mes">1 mês</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
</div>
|
||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||
<div className='datePicker'>
|
||
<DesktopDatePicker
|
||
label="Data inicial"
|
||
inputFormat="dd/MM/yyyy"
|
||
value={startDate}
|
||
onChange={handleChangeStartDate}
|
||
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
|
||
/>
|
||
</div>
|
||
<div className='datePicker' style={{marginRight: 10}}>
|
||
<DesktopDatePicker
|
||
label="Data final"
|
||
inputFormat="dd/MM/yyyy"
|
||
value={endDate}
|
||
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
|
||
:
|
||
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
|
||
:
|
||
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
|
||
:
|
||
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
|
||
:
|
||
new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
|
||
}
|
||
onChange={(newValue: any) => handleChangeEndDate(newValue)}
|
||
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
|
||
/>
|
||
</div>
|
||
</LocalizationProvider>
|
||
<div className='select'>
|
||
<BasicButton title='Selecionar!' onClick={() => {
|
||
getPowerFactorData(unity, startDate, endDate, discretization)
|
||
.then(result => setFatorPotenciaData(result))
|
||
.catch(exception => console.log(exception))
|
||
}}/>
|
||
</div>
|
||
</ChartFilters>
|
||
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
|
||
data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => parseFloat(value.dia_num))} />
|
||
</RenderIf>
|
||
|
||
<RenderIf isTrue={menu===3}>
|
||
<ChartFilters>
|
||
<div className='input'>
|
||
<FormControl sx={{ minWidth: 100, width: 200 }} size="small">
|
||
<InputLabel>Unidade</InputLabel>
|
||
<Select
|
||
labelId="demo-select-small"
|
||
id="demo-select-small"
|
||
value={unity}
|
||
label="Unidade"
|
||
onChange={value => setUnity(value.target.value)}
|
||
sx={{height: 63, mb: 0.5}}
|
||
fullWidth
|
||
>
|
||
<MenuItem value="">
|
||
<em>Nenhum</em>
|
||
</MenuItem>
|
||
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
|
||
{
|
||
clients.map((value) => {
|
||
return <MenuItem key={1} value={value.codigo_scde}>{value.unidade}</MenuItem>
|
||
})
|
||
}
|
||
</Select>
|
||
</FormControl>
|
||
</div>
|
||
<div className='input'>
|
||
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
|
||
<InputLabel>Discretização</InputLabel>
|
||
<Select
|
||
labelId="demo-select-small"
|
||
id="demo-select-small"
|
||
value={discretization}
|
||
label="Discretização"
|
||
onChange={value => setDiscretization(value.target.value)}
|
||
sx={{height: 63, mb: 0.5}}
|
||
fullWidth
|
||
>
|
||
<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>
|
||
<MenuItem value="1_mes">1 mês</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
</div>
|
||
<div className='select'>
|
||
<BasicButton title='Selecionar!' onClick={() => {
|
||
getDemand(unity, startDate, endDate, discretization)
|
||
.then(result => setDiscretizedConsumptionData(result))
|
||
.catch(exception => console.log(exception))
|
||
}}/>
|
||
</div>
|
||
</ChartFilters>
|
||
<DemRegXDemConChart data1={demRegXDemCon2} data2={demRegXDemCon2}
|
||
dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'}
|
||
label={demRegXDemCon2?.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
|
||
</RenderIf>
|
||
</RenderIf>
|
||
|
||
<RenderIf isTrue={startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && 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={true}>
|
||
<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}>
|
||
<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/>
|
||
</RenderIf>
|
||
|
||
<Buttons>
|
||
{/* <GradientButton title='DADOS' description='CLIQUE AQUI PARA GERAR GRÁFICO DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} purple /> */}
|
||
{/* <GradientButton title='GRÁFICO' description='CLIQUE AQUI PARA GERAR GRÁFICO DO PERÍODO SELECIONADO' onClick={() => handleVerifyFields()} orange /> */}
|
||
<GradientButton title='DOWNLOADS' description={`CLIQUE AQUI PARA BAIXAR OS DADOS EM FORMATO EXCEL DO PERÍODO SELECIONADO`} green onClick={() => {
|
||
if (send) {
|
||
const html = document.querySelector("table")?.outerHTML;
|
||
htmlToCSV(html, "telemetria.csv");
|
||
}
|
||
else {
|
||
setSend(true)
|
||
getTableData()
|
||
}
|
||
}}/>
|
||
</Buttons>
|
||
<p className='paragraph'>
|
||
<i>
|
||
Fonte: Dados coletados do Sistema de Coleta de Dados
|
||
de Energia - SCDE da Câmara de Comercialização <br/>
|
||
Energia Elétrica – CCEE, sendo que as quantidades aqui
|
||
informadas são de responsabilidade <br/>do agente de
|
||
medição - Distribuidora.
|
||
</i>
|
||
</p>
|
||
|
||
</TelemetriaView>
|
||
</main>
|
||
)
|
||
}
|
||
|
||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||
const { ['user-name']: userName } = parseCookies(ctx)
|
||
const { ['user-client_id']: client_id } = parseCookies(ctx)
|
||
|
||
const apiClient = getAPIClient(ctx)
|
||
|
||
let clients = []
|
||
|
||
await apiClient.post('/units', {
|
||
"filters": [
|
||
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": client_id},
|
||
{"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]}
|
||
],
|
||
"fields": [
|
||
"unidade",
|
||
"cod_smart_unidade",
|
||
"codigo_scde"],
|
||
"distinct": true
|
||
}).then(res => {
|
||
console.log(res.data)
|
||
clients = res.data.data
|
||
}).catch(res => {
|
||
// console.log(res)
|
||
})
|
||
|
||
if (!token) {
|
||
return {
|
||
redirect: {
|
||
destination: '/',
|
||
permanent: false
|
||
}
|
||
}
|
||
}
|
||
|
||
return {
|
||
props: {
|
||
userName,
|
||
clients
|
||
}
|
||
}
|
||
}
|
||
|