244 lines
9.4 KiB
TypeScript
244 lines
9.4 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { SingleBar } from '../components/graph/SingleBar'
|
|
import { ChatTelemetryView } from '../styles/layouts/ChatTelemetry/ChatTelemetryView'
|
|
// import router, { useRouter } from 'next/router'
|
|
|
|
import { FatorPotencia } from '../services/fatorPotencia'
|
|
import { ConsumoDecretizadoBar } from '../services/consumoDiscretizadoBar'
|
|
import { ConsumoDecretizadoLine } from '../services/consumoDiscretizadoLine'
|
|
import LineChart from '../components/graph/LineChart'
|
|
import { LineBarChart } from '../components/graph/LineBarChart'
|
|
import Header from '../components/header/Header'
|
|
import PageTitle from '../components/pageTitle/PageTitle'
|
|
import Head from 'next/head'
|
|
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import Typography from '@mui/material/Typography';
|
|
import Modal from '@mui/material/Modal';
|
|
import { GetServerSideProps } from 'next'
|
|
import { parseCookies } from 'nookies'
|
|
import getAPIClient from '../services/ssrApi'
|
|
import { api } from '../services/api'
|
|
import FatorPotenciaChart from '../components/graph/fatorPotenciaChart'
|
|
// import { DemRegXDemConChart } from '../components/graph/demRegXDemConChart'
|
|
import { DiscretizedConsumptionChart } from '../components/graph/DiscretizedConsumptionChart'
|
|
import DiscretizedConsumptionChartLine from '../components/graph/DiscretizedConsumptionChartLine'
|
|
import router, { useRouter } from 'next/router'
|
|
import { DemRegXDemConChart } from '../components/graph/DemRegXDemConChart'
|
|
|
|
const style = {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
position: 'absolute' as const,
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
width: '80%',
|
|
bgcolor: 'white',
|
|
p: 5,
|
|
};
|
|
|
|
export default function chartTelemetry({userName}) {
|
|
const [openFatorPotencia, setOpenFatorPotencia] = useState(false);
|
|
const handleCloseFatorPotencia = () => setOpenFatorPotencia(false);
|
|
|
|
const [openConsumoDiscretizado1, setOpenConsumoDiscretizado1] = useState(false);
|
|
const handleCloseConsumoDiscretizado1 = () => setOpenConsumoDiscretizado1(false);
|
|
|
|
const [openConsumoDiscretizado2, setOpenConsumoDiscretizado2] = useState(false);
|
|
const handleCloseConsumoDiscretizado2 = () => setOpenConsumoDiscretizado2(false);
|
|
|
|
const [openDemandaContratada, setOpenDemandaContratada] = useState(false);
|
|
const handleCloseDemandaContratada = () => setOpenDemandaContratada(false);
|
|
|
|
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
|
|
|
|
async function getChartsData() {
|
|
console.log(router.query)
|
|
await api.post('/telemetry/powerFactor', {
|
|
"filters": [
|
|
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
|
|
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
|
|
]
|
|
}).then(res => {
|
|
setFatorPotenciaData(res.data.data)
|
|
}).catch(res => {
|
|
console.log(res)
|
|
})
|
|
|
|
await api.post('/telemetry/discretization', {
|
|
"type": "5_min",
|
|
"filters": [
|
|
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
|
|
{"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
|
|
]
|
|
}).then(res => {
|
|
setDiscretizedConsumptionDataReativa(res.data.data)
|
|
}).catch(res => {
|
|
console.log(res)
|
|
})
|
|
|
|
await api.post('/telemetry/discretization', {
|
|
"type": "5_min",
|
|
"filters": [
|
|
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
|
|
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
|
|
]
|
|
}).then(res => {
|
|
setDiscretizedConsumptionData(res.data.data)
|
|
}).catch(res => {
|
|
console.log(res)
|
|
})
|
|
|
|
await api.post('/telemetry/demand', {
|
|
"filters": [
|
|
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
|
|
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
|
|
]
|
|
}).then(res => {
|
|
setDemRegXDemCon(res.data.data)
|
|
}).catch(res => {
|
|
console.log(res)
|
|
})
|
|
}
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
getChartsData()
|
|
console.log(fatorPotenciaData)
|
|
}, [])
|
|
|
|
return (
|
|
<ChatTelemetryView>
|
|
<Head>
|
|
<title>Smart Energia - Graficos Telemetria</title>
|
|
</Head>
|
|
<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={FatorPotencia.label1} />
|
|
</div>
|
|
<Modal
|
|
open={openFatorPotencia}
|
|
onClose={handleCloseFatorPotencia}
|
|
aria-labelledby="modal-modal-title"
|
|
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} />
|
|
</Box>
|
|
</Modal>
|
|
|
|
<div onClick={() => setOpenConsumoDiscretizado1(true)}>
|
|
<DiscretizedConsumptionChartLine title='Consumo discretizado em 1 hora' subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => parseFloat(data.reativa).toFixed(3))} />
|
|
</div>
|
|
<Modal
|
|
open={openConsumoDiscretizado1}
|
|
onClose={handleCloseConsumoDiscretizado1}
|
|
aria-labelledby="modal-modal-title"
|
|
aria-describedby="modal-modal-description"
|
|
>
|
|
<Box sx={style}>
|
|
<DiscretizedConsumptionChartLine title='Consumo discretizado em 1 hora' subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => data.reativa)} />
|
|
</Box>
|
|
</Modal>
|
|
|
|
<div onClick={() => setOpenConsumoDiscretizado2(true)}>
|
|
<DiscretizedConsumptionChart title='Consumo discretizado em 5 minutos' subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
|
|
</div>
|
|
<Modal
|
|
open={openConsumoDiscretizado2}
|
|
onClose={handleCloseConsumoDiscretizado2}
|
|
aria-labelledby="modal-modal-title"
|
|
aria-describedby="modal-modal-description"
|
|
>
|
|
<Box sx={style}>
|
|
<DiscretizedConsumptionChart title='Consumo discretizado em 5 minutos' subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
|
|
</Box>
|
|
</Modal>
|
|
|
|
<div onClick={() => setOpenDemandaContratada(true)}>
|
|
<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/>
|
|
</div>
|
|
<Modal
|
|
open={openDemandaContratada}
|
|
onClose={handleCloseDemandaContratada}
|
|
aria-labelledby="modal-modal-title"
|
|
aria-describedby="modal-modal-description"
|
|
>
|
|
<Box sx={style}>
|
|
<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>
|
|
)
|
|
}
|
|
|
|
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
|
const apiClient = getAPIClient(ctx)
|
|
|
|
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
|
const { ['user-name']: userName } = parseCookies(ctx)
|
|
const { ['user-cod_client']: cod_client } = parseCookies(ctx)
|
|
|
|
const fatorPotenciaChart = []
|
|
|
|
console.log('olha os query ai', ctx.query)
|
|
|
|
// await apiClient.post('/telemetry/powerFactor', {
|
|
// "filters": [
|
|
// {"type" : "=", "field": "med_5min.ponto", "value": cod_client},
|
|
// {"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
|
|
// ]
|
|
// }).then(res => {
|
|
// fatorPotenciaChart = res.data
|
|
// }).catch(res => {
|
|
// console.log(res)
|
|
// })
|
|
|
|
if (!token) {
|
|
return {
|
|
redirect: {
|
|
destination: '/',
|
|
permanent: false
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
props: {
|
|
userName,
|
|
fatorPotenciaChart
|
|
}
|
|
}
|
|
}
|