938 lines
34 KiB
TypeScript
938 lines
34 KiB
TypeScript
import { forwardRef, useEffect, useState } from 'react'
|
||
|
||
import FormControl from '@mui/material/FormControl'
|
||
import InputLabel from '@mui/material/InputLabel'
|
||
import MenuItem from '@mui/material/MenuItem'
|
||
import Select from '@mui/material/Select'
|
||
import Head from 'next/head'
|
||
import GradientButton from '../../components/buttons/gradientButton/GradientButton'
|
||
import Header from '../../components/header/Header'
|
||
import {
|
||
Buttons,
|
||
ChartFilters,
|
||
TableHeader,
|
||
TelemetriaView
|
||
} from '../../styles/layouts/Telemetria/TelemetriaView'
|
||
|
||
import MuiAlert, { AlertProps } from '@mui/material/Alert'
|
||
import Snackbar from '@mui/material/Snackbar'
|
||
import { GetServerSideProps } from 'next'
|
||
import { parseCookies } from 'nookies'
|
||
import { DemRegXDemConChart } from '../../components/graph/DemRegXDemConChart'
|
||
import getAPIClient from '../../services/ssrApi'
|
||
import RenderIf from '../../utils/renderIf'
|
||
|
||
import Tab from '@mui/material/Tab'
|
||
import Tabs from '@mui/material/Tabs'
|
||
|
||
import TextField from '@mui/material/TextField'
|
||
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
|
||
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'
|
||
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
|
||
import { format } from 'date-fns'
|
||
import BasicButton from '../../components/buttons/basicButton/BasicButton'
|
||
import { DiscretizedConsumptionChart } from '../../components/graph/DiscretizedConsumptionChart'
|
||
import FatorPotenciaChart from '../../components/graph/fatorPotenciaChart'
|
||
import PageTitle from '../../components/pageTitle/PageTitle'
|
||
import { getDemand } from '../../services/charts/telemetry/getDemand'
|
||
import { getDiscretization } from '../../services/charts/telemetry/getDiscretization'
|
||
import { getPowerFactorData } from '../../services/charts/telemetry/getPowerFactor'
|
||
|
||
const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
|
||
props,
|
||
ref
|
||
) {
|
||
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
|
||
})
|
||
|
||
const months = [
|
||
'Jan',
|
||
'Fev',
|
||
'Mar',
|
||
'Abr',
|
||
'Mai',
|
||
'Jun',
|
||
'Jul',
|
||
'Ago',
|
||
'Set',
|
||
'Out',
|
||
'Nov',
|
||
'Dez'
|
||
]
|
||
|
||
export default function Telemetria({ userName, clients }: any) {
|
||
const [unity, setUnity] = useState(clients[0]?.codigo_scde)
|
||
const [startDate, setStartDate] = useState(new Date())
|
||
const [endDate, setEndDate] = useState(new Date())
|
||
const [month, setMonth] = useState(new Date().getMonth())
|
||
const [endMonth, setEndMonth] = useState(new Date().getMonth() + 1)
|
||
const [discretization, setDiscretization] = useState('1_hora')
|
||
|
||
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
|
||
const [openSnackError, setOpenSnackError] = useState<boolean>(false)
|
||
const [openSnackFields, setOpenSnackFields] = useState<boolean>(false)
|
||
|
||
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;charset=utf-8' })
|
||
|
||
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(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 [loader, setLoader] = useState(false)
|
||
|
||
const [menu, setMenu] = useState(0)
|
||
|
||
const [showChart, setShowChart] = useState(false)
|
||
|
||
const [send, setSend] = useState(false)
|
||
|
||
const handleChangeStartDate = (newValue: Date | null) => {
|
||
setStartDate(newValue)
|
||
}
|
||
const handleChangeEndDate = (newValue: Date | null) => {
|
||
setEndDate(newValue)
|
||
}
|
||
|
||
const [fatorPotenciaData, setFatorPotenciaData] = useState([])
|
||
const [demRegXDemCon, setDemRegXDemCon] = useState([])
|
||
const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState(
|
||
[]
|
||
)
|
||
|
||
useEffect(() => {
|
||
setSend(false)
|
||
}, [startDate, endDate])
|
||
|
||
useEffect(() => {
|
||
const firstOfTheMonth = format(new Date(startDate).setDate(2), 'yyyy-MM-dd')
|
||
const lastOfTheMonth = format(
|
||
new Date(startDate.getFullYear(), startDate.getMonth() + 1, 0),
|
||
'yyyy-MM-dd'
|
||
)
|
||
|
||
setStartDate(new Date(firstOfTheMonth))
|
||
|
||
setLoader(true)
|
||
getDiscretization(
|
||
unity,
|
||
new Date(firstOfTheMonth),
|
||
new Date(lastOfTheMonth),
|
||
discretization
|
||
)
|
||
.then((result) => {
|
||
setDiscretizedConsumptionData(result)
|
||
setSend(false)
|
||
setLoader(false)
|
||
})
|
||
.catch(() => {
|
||
setSend(false)
|
||
setOpenSnackFields(true)
|
||
})
|
||
|
||
getDemand(unity, startDate, endDate, discretization)
|
||
.then((result) => {
|
||
setDemRegXDemCon(result)
|
||
setSend(false)
|
||
setTableData(result)
|
||
})
|
||
.catch(() => {
|
||
setSend(false)
|
||
setOpenSnackFields(true)
|
||
setLoader(false)
|
||
})
|
||
|
||
getPowerFactorData(unity, startDate, endDate, discretization)
|
||
.then((result) => {
|
||
setFatorPotenciaData(result)
|
||
setSend(false)
|
||
setLoader(false)
|
||
})
|
||
.catch(() => {
|
||
setSend(false)
|
||
setOpenSnackFields(true)
|
||
setLoader(false)
|
||
})
|
||
}, [])
|
||
|
||
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 possível pegar os dados!
|
||
</Alert>
|
||
</Snackbar>
|
||
|
||
<Snackbar
|
||
open={openSnackFields}
|
||
autoHideDuration={4000}
|
||
onClose={handleCloseSnack}
|
||
>
|
||
<Alert
|
||
onClose={handleCloseSnack}
|
||
severity="error"
|
||
sx={{ width: '100%' }}
|
||
>
|
||
Verifique os campos e tente novamente!
|
||
</Alert>
|
||
</Snackbar>
|
||
|
||
<Header name={userName}>
|
||
<PageTitle
|
||
title="Telemetria"
|
||
subtitle="Dados Coletados do Sistema de Coleta de Dados de Energia"
|
||
/>
|
||
</Header>
|
||
|
||
{typeof window === 'undefined' || typeof window === undefined ? null : (
|
||
<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' /> */}
|
||
<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 Potência" />
|
||
</Tabs>
|
||
</TableHeader>
|
||
|
||
{/* discretization chart */}
|
||
<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>
|
||
|
||
{clients.map(({ codigo_scde, unidade }) => (
|
||
<MenuItem key={codigo_scde} value={codigo_scde}>
|
||
{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>
|
||
|
||
{discretization === '1_mes' ? (
|
||
<>
|
||
<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={month}
|
||
label="Mês"
|
||
onChange={(value) => {
|
||
setMonth(value.target.value as number)
|
||
const firstOfTheMonth: Date = new Date(
|
||
startDate.getFullYear(),
|
||
(value.target.value as number) - 1,
|
||
1
|
||
)
|
||
setStartDate(firstOfTheMonth)
|
||
}}
|
||
sx={{ height: 63, mb: 2 }}
|
||
fullWidth
|
||
>
|
||
<MenuItem value="">
|
||
<em>Nenhum</em>
|
||
</MenuItem>
|
||
{months
|
||
.slice(0, new Date().getUTCMonth() + 1)
|
||
.map((value, index) => {
|
||
return (
|
||
<MenuItem key={value} value={(index + 1) as number}>
|
||
{value}
|
||
</MenuItem>
|
||
)
|
||
})}
|
||
</Select>
|
||
</FormControl>
|
||
{discretization === '1_mes' && (
|
||
<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={endMonth}
|
||
label="Mês"
|
||
onChange={(value) => {
|
||
setEndMonth(value.target.value as number)
|
||
const firstOfTheMonth: Date = new Date(
|
||
startDate.getFullYear(),
|
||
(value.target.value as number) - 1,
|
||
1
|
||
)
|
||
const lastOfTheMonth: Date = new Date(
|
||
startDate.getFullYear(),
|
||
firstOfTheMonth.getMonth() + 1,
|
||
0
|
||
)
|
||
setEndDate(lastOfTheMonth)
|
||
}}
|
||
sx={{ height: 63, mb: 2 }}
|
||
fullWidth
|
||
>
|
||
<MenuItem value="">
|
||
<em>Nenhum</em>
|
||
</MenuItem>
|
||
{months
|
||
.slice(0, new Date().getUTCMonth() + 1)
|
||
.map((value, index) => {
|
||
return (
|
||
<MenuItem
|
||
key={value}
|
||
value={(index + 1) as number}
|
||
>
|
||
{value}
|
||
</MenuItem>
|
||
)
|
||
})}
|
||
</Select>
|
||
</FormControl>
|
||
)}
|
||
</>
|
||
) : (
|
||
<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}
|
||
minDate={startDate}
|
||
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={() => {
|
||
setLoader(true)
|
||
getDiscretization(unity, startDate, endDate, discretization)
|
||
.then((result) => {
|
||
setDiscretizedConsumptionData(result)
|
||
setSend(false)
|
||
setLoader(false)
|
||
setTableData(result)
|
||
})
|
||
.catch((exception) => {
|
||
setSend(false)
|
||
setOpenSnackFields(true)
|
||
setLoader(false)
|
||
})
|
||
}}
|
||
/>
|
||
</div>
|
||
</ChartFilters>
|
||
|
||
<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
|
||
/>
|
||
</RenderIf>
|
||
|
||
{/* demand chart */}
|
||
<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>
|
||
|
||
{clients.map(({ codigo_scde, unidade }) => (
|
||
<MenuItem key={codigo_scde} value={codigo_scde}>
|
||
{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={() => {
|
||
setLoader(true)
|
||
getDemand(unity, startDate, endDate, discretization)
|
||
.then((result) => {
|
||
setDemRegXDemCon(result)
|
||
setSend(false)
|
||
setLoader(false)
|
||
setTableData(result)
|
||
})
|
||
.catch((exception) => {
|
||
setSend(false)
|
||
setOpenSnackFields(true)
|
||
setLoader(false)
|
||
})
|
||
}}
|
||
/>
|
||
</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>
|
||
|
||
{/* power factor chart */}
|
||
<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>
|
||
|
||
{clients.map(({ codigo_scde, unidade }) => (
|
||
<MenuItem key={codigo_scde} value={codigo_scde}>
|
||
{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={() => {
|
||
setLoader(true)
|
||
getPowerFactorData(
|
||
unity,
|
||
startDate,
|
||
endDate,
|
||
discretization
|
||
)
|
||
.then((result) => {
|
||
setFatorPotenciaData(result)
|
||
setSend(false)
|
||
setLoader(false)
|
||
setTableData(result)
|
||
})
|
||
.catch((exception) => {
|
||
setSend(false)
|
||
setOpenSnackFields(true)
|
||
setLoader(false)
|
||
})
|
||
}}
|
||
/>
|
||
</div>
|
||
</ChartFilters>
|
||
<FatorPotenciaChart
|
||
title="Fator de Potencia"
|
||
subtitle=""
|
||
data1={fatorPotenciaData}
|
||
data2={fatorPotenciaData}
|
||
dataset1="Fator de Potencia"
|
||
dataset2="Fator ref"
|
||
label={fatorPotenciaData.map((value) => value.day_formatted)}
|
||
/>
|
||
</RenderIf>
|
||
|
||
<RenderIf isTrue={loader}>
|
||
<div className="modal">
|
||
<div id="preloader_1">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
</RenderIf>
|
||
|
||
<table className="tg">
|
||
<thead>
|
||
<tr>
|
||
<th className="tg-8oo6">Unidade</th>
|
||
<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">f_ref</th>
|
||
<th className="tg-8oo6">Consumo</th>
|
||
<th className="tg-8oo6">Reativa</th>
|
||
<th className="tg-8oo6">fp</th>
|
||
<th className="tg-8oo6">dem contratada</th>
|
||
<th className="tg-8oo6">dem registrada</th>
|
||
<th className="tg-8oo6">dem tolerancia</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{fatorPotenciaData !== null
|
||
? fatorPotenciaData?.map((value, index) => {
|
||
return (
|
||
<tr key={index}>
|
||
<td className="tg-gceh">{unity}</td>
|
||
<td className="tg-gceh">{value?.ponto}</td>
|
||
<td className="tg-gceh">
|
||
{parseFloat(value?.dia_num)}
|
||
</td>
|
||
<td className="tg-uulg">{value?.day_formatted}</td>
|
||
<td className="tg-gceh">{value?.hora}</td>
|
||
<td className="tg-gceh">{value.minut}</td>
|
||
<td className="tg-gceh">{value?.f_ref}</td>
|
||
<td className="tg-uulg">
|
||
{parseFloat(value?.consumo).toLocaleString('pt-br', {
|
||
style: 'currency',
|
||
currency: 'BRL',
|
||
minimumFractionDigits: 2
|
||
})}
|
||
</td>
|
||
<td className="tg-gceh">
|
||
{parseFloat(value?.reativa).toLocaleString('pt-br', {
|
||
style: 'currency',
|
||
currency: 'BRL',
|
||
minimumFractionDigits: 2
|
||
})}
|
||
</td>
|
||
<td className="tg-gceh">{parseFloat(value?.fp)}</td>
|
||
<td className="tg-gceh">{value?.dem_cont}</td>
|
||
<td className="tg-gceh">{value?.dem_reg}</td>
|
||
<td className="tg-gceh">{value?.dem_tolerancia}</td>
|
||
</tr>
|
||
)
|
||
})
|
||
: null}
|
||
</tbody>
|
||
</table>
|
||
|
||
<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={() => {
|
||
htmlToCSV(
|
||
`${menu === 2
|
||
? 'fator_potencia'
|
||
: menu === 1
|
||
? 'demanda'
|
||
: 'consumo_discretizado'
|
||
}.csv`
|
||
)
|
||
}}
|
||
/>
|
||
</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
|
||
})
|
||
|
||
if (!token) {
|
||
return {
|
||
redirect: {
|
||
destination: '/',
|
||
permanent: false
|
||
}
|
||
}
|
||
}
|
||
|
||
return {
|
||
props: {
|
||
userName,
|
||
clients
|
||
}
|
||
}
|
||
}
|