fixing list errors
This commit is contained in:
parent
490469b4a8
commit
b8f4c9d231
BIN
public/moneyIcon2.png
Normal file
BIN
public/moneyIcon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
@ -79,8 +79,6 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, dataset1,
|
|||||||
|
|
||||||
const options: any = config(miniature)
|
const options: any = config(miniature)
|
||||||
|
|
||||||
console.log(chartData?.map(value => value.dad_estimado)?.includes(true))
|
|
||||||
|
|
||||||
const data: any = {
|
const data: any = {
|
||||||
labels,
|
labels,
|
||||||
datasets: chartData?.map(value => value.dad_estimado)?.includes(true) ? [
|
datasets: chartData?.map(value => value.dad_estimado)?.includes(true) ? [
|
||||||
@ -129,7 +127,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, dataset1,
|
|||||||
return parseInt(value.custo_cativo)
|
return parseInt(value.custo_cativo)
|
||||||
}),
|
}),
|
||||||
borderRadius: 8,
|
borderRadius: 8,
|
||||||
backgroundColor: pattern.draw('diagonal', '#C2D5FB'),
|
backgroundColor: pattern.draw('diagonal-right-left', '#C2D5FB'),
|
||||||
skipNull: chartData?.map(value => value.dad_estimado)?.includes(true)
|
skipNull: chartData?.map(value => value.dad_estimado)?.includes(true)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -140,7 +138,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, dataset1,
|
|||||||
return parseInt(value.custo_livre)
|
return parseInt(value.custo_livre)
|
||||||
}),
|
}),
|
||||||
borderRadius: 8,
|
borderRadius: 8,
|
||||||
backgroundColor: pattern.draw('diagonal', '#255488'),
|
backgroundColor: pattern.draw('diagonal-right-left', '#255488'),
|
||||||
skipNull: chartData?.map(value => value.dad_estimado)?.includes(true)
|
skipNull: chartData?.map(value => value.dad_estimado)?.includes(true)
|
||||||
}
|
}
|
||||||
] : [
|
] : [
|
||||||
|
|||||||
@ -42,9 +42,6 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
|
|||||||
|
|
||||||
const options: any = config(miniature)
|
const options: any = config(miniature)
|
||||||
|
|
||||||
console.log(data1)
|
|
||||||
console.log(data2)
|
|
||||||
|
|
||||||
const data = {
|
const data = {
|
||||||
labels,
|
labels,
|
||||||
datasets: [
|
datasets: [
|
||||||
|
|||||||
@ -58,6 +58,8 @@ export default function FatorPotenciaChart({ title, subtitle, data1, data2, labe
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
|
max: 1,
|
||||||
|
min: 0,
|
||||||
grid: {
|
grid: {
|
||||||
display: false
|
display: false
|
||||||
},
|
},
|
||||||
|
|||||||
@ -52,6 +52,8 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
|
|||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
stacked: false,
|
stacked: false,
|
||||||
|
max: Number.parseInt(dataProps.reduce((prev, current) => prev.economia_acumulada < current.economia_acumulada ? prev.economia_acumulada : current.economia_acumulada)) + 350,
|
||||||
|
min: 0,
|
||||||
grid: {
|
grid: {
|
||||||
display: false
|
display: false
|
||||||
},
|
},
|
||||||
@ -61,6 +63,9 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
},
|
||||||
|
axisY: {
|
||||||
|
|
||||||
},
|
},
|
||||||
series: {
|
series: {
|
||||||
downsample: {
|
downsample: {
|
||||||
@ -82,8 +87,7 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
|
|||||||
},
|
},
|
||||||
display: true,
|
display: true,
|
||||||
anchor: "end",
|
anchor: "end",
|
||||||
offset: !miniature? 0 : -5,
|
align: "end",
|
||||||
align: "start",
|
|
||||||
font: {
|
font: {
|
||||||
weight: 'bold',
|
weight: 'bold',
|
||||||
size: !miniature? window.innerWidth/80 : window.innerWidth/125,
|
size: !miniature? window.innerWidth/80 : window.innerWidth/125,
|
||||||
@ -105,11 +109,6 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
|
|||||||
const labels: string[] = label.filter(function(item, pos) {
|
const labels: string[] = label.filter(function(item, pos) {
|
||||||
return label.indexOf(item) == pos;
|
return label.indexOf(item) == pos;
|
||||||
});
|
});
|
||||||
//if (bruta) {
|
|
||||||
// labels = [`Até ${new Date().getFullYear()-1}`, `${new Date().getFullYear()}`]
|
|
||||||
//} else {
|
|
||||||
// labels = label;
|
|
||||||
//}
|
|
||||||
|
|
||||||
const data: any = {
|
const data: any = {
|
||||||
labels,
|
labels,
|
||||||
@ -121,6 +120,11 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
|
|||||||
data: dataProps.filter(value => value.dad_estimado === false).map((value, index) => {
|
data: dataProps.filter(value => value.dad_estimado === false).map((value, index) => {
|
||||||
return parseFloat(value.economia_acumulada)
|
return parseFloat(value.economia_acumulada)
|
||||||
}),
|
}),
|
||||||
|
datalabels: {
|
||||||
|
backgroundColor: '#255488',
|
||||||
|
borderRadius: 8,
|
||||||
|
opacity: .8,
|
||||||
|
},
|
||||||
borderRadius: 10,
|
borderRadius: 10,
|
||||||
backgroundColor: '#255488',
|
backgroundColor: '#255488',
|
||||||
},
|
},
|
||||||
@ -129,6 +133,14 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
|
|||||||
stacked: true,
|
stacked: true,
|
||||||
label: 'Estimado',
|
label: 'Estimado',
|
||||||
spanGaps: true,
|
spanGaps: true,
|
||||||
|
datalabels: {
|
||||||
|
offset: dataProps.filter(value => value.dad_estimado === true).map((value, index) => {
|
||||||
|
if (index === 1) {
|
||||||
|
return 30
|
||||||
|
}
|
||||||
|
return 0
|
||||||
|
})
|
||||||
|
},
|
||||||
data: [null].concat(dataProps.filter(value => value.dad_estimado === true).map((value, index) => {
|
data: [null].concat(dataProps.filter(value => value.dad_estimado === true).map((value, index) => {
|
||||||
if (value.dad_estimado)
|
if (value.dad_estimado)
|
||||||
return parseFloat(value.economia_acumulada)
|
return parseFloat(value.economia_acumulada)
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import React, { createContext, useState } from "react";
|
import React, { createContext, useState } from "react";
|
||||||
import Router from 'next/router'
|
import Router from 'next/router'
|
||||||
|
|
||||||
import { destroyCookie, setCookie } from "nookies";
|
import { destroyCookie, parseCookies, setCookie } from "nookies";
|
||||||
|
|
||||||
import { logout, signInRequest } from "../services/auth";
|
import { logout, signInRequest } from "../services/auth";
|
||||||
import { api } from "../services/api";
|
import { api } from "../services/api";
|
||||||
@ -37,6 +37,7 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
|
|||||||
destroyCookie(null, 'user-role')
|
destroyCookie(null, 'user-role')
|
||||||
destroyCookie(null, 'user-id')
|
destroyCookie(null, 'user-id')
|
||||||
destroyCookie(null, '@smartAuth-token')
|
destroyCookie(null, '@smartAuth-token')
|
||||||
|
destroyCookie(null, 'user-profile_picture')
|
||||||
|
|
||||||
logout()
|
logout()
|
||||||
}
|
}
|
||||||
@ -69,6 +70,11 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
|
|||||||
if (user.profile_picture)
|
if (user.profile_picture)
|
||||||
setCookie(undefined, 'user-profile_picture', user.profile_picture)
|
setCookie(undefined, 'user-profile_picture', user.profile_picture)
|
||||||
|
|
||||||
|
const { ['terms']: terms } = parseCookies()
|
||||||
|
|
||||||
|
if (!terms)
|
||||||
|
setCookie(undefined, 'terms', 'false')
|
||||||
|
|
||||||
api.defaults.headers['Authorization'] = `Bearer ${token}`
|
api.defaults.headers['Authorization'] = `Bearer ${token}`
|
||||||
|
|
||||||
if (!exception) {
|
if (!exception) {
|
||||||
|
|||||||
@ -8,7 +8,7 @@ import Header from '../../components/header/Header'
|
|||||||
import PageTitle from '../../components/pageTitle/PageTitle'
|
import PageTitle from '../../components/pageTitle/PageTitle'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
|
|
||||||
import { parseCookies } from 'nookies'
|
import { parseCookies, setCookie } from 'nookies'
|
||||||
import { GetServerSideProps } from 'next'
|
import { GetServerSideProps } from 'next'
|
||||||
import getAPIClient from '../../services/ssrApi'
|
import getAPIClient from '../../services/ssrApi'
|
||||||
import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart'
|
import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart'
|
||||||
@ -17,6 +17,25 @@ import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
|
|||||||
import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart'
|
import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart'
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle'
|
import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle'
|
||||||
|
import { format } from 'date-fns'
|
||||||
|
|
||||||
|
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 RenderIf from '../../utils/renderIf'
|
||||||
|
|
||||||
|
const style = {
|
||||||
|
position: 'absolute' as const,
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
width: '50%',
|
||||||
|
bgcolor: 'background.paper',
|
||||||
|
border: '2px solid #000',
|
||||||
|
boxShadow: 24,
|
||||||
|
p: 4,
|
||||||
|
};
|
||||||
|
|
||||||
export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName, costIndicator} : any) {
|
export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName, costIndicator} : any) {
|
||||||
const months = [
|
const months = [
|
||||||
@ -34,12 +53,20 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
|
|||||||
'Dez'
|
'Dez'
|
||||||
]
|
]
|
||||||
|
|
||||||
|
const { ['terms']: terms } = parseCookies()
|
||||||
|
|
||||||
const [lastDataBrutaMensalS, setLastDataBrutaMensal] = useState('')
|
const [lastDataBrutaMensalS, setLastDataBrutaMensal] = useState('')
|
||||||
const [lastDataBrutaAnualS, setLastDataBrutaAnual] = useState('')
|
const [lastDataBrutaAnualS, setLastDataBrutaAnual] = useState('')
|
||||||
|
|
||||||
|
const [open, setOpen] = useState(true);
|
||||||
|
const handleOpen = () => setOpen(true);
|
||||||
|
const handleClose = () => setOpen(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let lastDataMensal = '0'
|
let lastDataMensal = '0'
|
||||||
let lastDataAnual = '0'
|
let lastDataAnual = '0'
|
||||||
let index=0
|
let index=0
|
||||||
|
|
||||||
while (index < grossMensalGraph.length) {
|
while (index < grossMensalGraph.length) {
|
||||||
if (!grossMensalGraph[index].dad_estimado && grossMensalGraph[index].economia_acumulada!==null)
|
if (!grossMensalGraph[index].dad_estimado && grossMensalGraph[index].economia_acumulada!==null)
|
||||||
lastDataMensal=grossMensalGraph[index].economia_acumulada
|
lastDataMensal=grossMensalGraph[index].economia_acumulada
|
||||||
@ -66,7 +93,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
|
|||||||
|
|
||||||
<Link href='pld'>
|
<Link href='pld'>
|
||||||
<section className="cardsSection" >
|
<section className="cardsSection" >
|
||||||
<MapCard title='R$/MWh' subtitle='' date={`${new Date().getUTCMonth()+1}/${new Date().getUTCFullYear()}`} statistic='' imgSource='/moneyIcon.svg' />
|
<MapCard title='R$/MWh' subtitle='' date={`${format(new Date(), 'MM/yyyy')}`} statistic='' imgSource='/moneyIcon2.png' />
|
||||||
{
|
{
|
||||||
mapsInfo.map(value => {
|
mapsInfo.map(value => {
|
||||||
return <MapCard key={value.submarket} title='S' subtitle={value.submarket} statistic={parseFloat(value.value).toFixed(2)} imgSource='/SUL.svg' />
|
return <MapCard key={value.submarket} title='S' subtitle={value.submarket} statistic={parseFloat(value.value).toFixed(2)} imgSource='/SUL.svg' />
|
||||||
@ -92,7 +119,6 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
|
|||||||
<GrossMensalChart title='' subtitle=''
|
<GrossMensalChart title='' subtitle=''
|
||||||
data1={grossMensalGraph}
|
data1={grossMensalGraph}
|
||||||
data2={grossMensalGraph}
|
data2={grossMensalGraph}
|
||||||
//label={grossMensalGraph.map((value) => value.mes)}
|
|
||||||
label={months}
|
label={months}
|
||||||
miniature
|
miniature
|
||||||
/>
|
/>
|
||||||
@ -107,13 +133,44 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
|
|||||||
<GraphCard title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'>
|
<GraphCard title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'>
|
||||||
<CostIndicatorChart title='' subtitle=''
|
<CostIndicatorChart title='' subtitle=''
|
||||||
data1={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2021')).map(value => value?.custo_unit && !!parseInt(value?.custo_unit)? value.custo_unit : null)}
|
data1={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2021')).map(value => value?.custo_unit && !!parseInt(value?.custo_unit)? value.custo_unit : null)}
|
||||||
// data1={graphData}
|
|
||||||
data2={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2022')).map(value => value?.custo_unit && !!parseInt(value?.custo_unit)? value.custo_unit : null)}
|
data2={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2022')).map(value => value?.custo_unit && !!parseInt(value?.custo_unit)? value.custo_unit : null)}
|
||||||
label={months}
|
label={months}
|
||||||
miniature
|
miniature
|
||||||
/>
|
/>
|
||||||
</GraphCard>
|
</GraphCard>
|
||||||
</section>
|
</section>
|
||||||
|
<Modal
|
||||||
|
open={terms=='false'}
|
||||||
|
aria-labelledby="modal-modal-title"
|
||||||
|
aria-describedby="modal-modal-description"
|
||||||
|
>
|
||||||
|
<Box sx={style}>
|
||||||
|
<Typography id="modal-modal-title" variant="h6" component="h2">
|
||||||
|
Termos de uso
|
||||||
|
</Typography>
|
||||||
|
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
|
||||||
|
<p>
|
||||||
|
Bem-vindo a Plataforma Web – SMART ENERGIA!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Visualize os principais indicadores, dados de economia, resumo de operações, PLD, notícias além de acompanhar o consumo de energia em intervalos mínimos de 5 minutos.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Conforme nosso contrato de serviços vigente, todas as informações entregues são estritamente privadas, sendo seu sigilo protegido por lei, não podendo ser compartilhadas com terceiros.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
A divulgação não autorizada das informações adquiridas nesta plataforma (ou seu uso), de forma integral ou parcial, é proibida, não sendo permitido o compartilhamento dos acessos e senhas ou qualquer informação que tiver acesso junto a esta plataforma, sendo que o acesso a esta plataforma é restrito e individual.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Ressaltamos que os resultados informados são meramente indicativos.
|
||||||
|
</p>
|
||||||
|
<button onClick={() => {
|
||||||
|
setCookie(undefined, 'terms', 'true')
|
||||||
|
setOpen(false)
|
||||||
|
}}>Aceito os termos</button>
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Modal>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
</DashboardView>
|
</DashboardView>
|
||||||
|
|||||||
@ -77,7 +77,6 @@ export default function economy({userName, anual, years, brutaMensal, catLiv, cl
|
|||||||
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity === "default" ? unity : unity}
|
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity === "default" ? unity : unity}
|
||||||
]
|
]
|
||||||
}:{}).then(res => {
|
}:{}).then(res => {
|
||||||
console.log(res.data.data)
|
|
||||||
setCatLivDataState(res.data.data)
|
setCatLivDataState(res.data.data)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -38,7 +38,7 @@ interface pldInterface {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||||
const {pldMenu, setPldMenu} = useContext(MenuContext)
|
const { pldMenu, setPldMenu } = useContext(MenuContext)
|
||||||
|
|
||||||
const dateFormated = new Date()
|
const dateFormated = new Date()
|
||||||
|
|
||||||
|
|||||||
@ -158,7 +158,7 @@ export default function ResumoOperacao({tableData, clients, userName, clientMont
|
|||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article>
|
<article>
|
||||||
<BasicButton title='Baixar CSV' onClick={() => {
|
<BasicButton title='Download' onClick={() => {
|
||||||
const html = document.querySelector("table").outerHTML;
|
const html = document.querySelector("table").outerHTML;
|
||||||
htmlToCSV(html, "resumo_operacao.csv");
|
htmlToCSV(html, "resumo_operacao.csv");
|
||||||
}}/>
|
}}/>
|
||||||
|
|||||||
@ -46,13 +46,14 @@ export default function Telemetria({userName, clients}: any) {
|
|||||||
const [unity, setUnity] = useState(clients[0].codigo_scde);
|
const [unity, setUnity] = useState(clients[0].codigo_scde);
|
||||||
const [startDate, setStartDate] = useState(new Date());
|
const [startDate, setStartDate] = useState(new Date());
|
||||||
const [endDate, setEndDate] = useState(new Date());
|
const [endDate, setEndDate] = useState(new Date());
|
||||||
const [discretization, setDiscretization] = useState('5_min');
|
const [month, setMonth] = useState(new Date().getMonth()+1);
|
||||||
|
const [discretization, setDiscretization] = useState('1_hora');
|
||||||
|
|
||||||
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
|
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
|
||||||
const [openSnackError, setOpenSnackError] = useState<boolean>(false)
|
const [openSnackError, setOpenSnackError] = useState<boolean>(false)
|
||||||
const [openSnackFields, setOpenSnackFields] = useState<boolean>(false)
|
const [openSnackFields, setOpenSnackFields] = useState<boolean>(false)
|
||||||
|
|
||||||
const currentDate = new Date().toLocaleDateString().split('/').reverse().join('-')
|
const months=['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
|
||||||
|
|
||||||
const handleCloseSnack = (
|
const handleCloseSnack = (
|
||||||
event?: React.SyntheticEvent | Event,
|
event?: React.SyntheticEvent | Event,
|
||||||
@ -68,7 +69,13 @@ export default function Telemetria({userName, clients}: any) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function downloadCSVFile(csv, filename) {
|
function downloadCSVFile(csv, filename) {
|
||||||
const csv_file = new Blob([csv], {type: "text/csv"});
|
/*exemplo caso mudar o type do blob não resolva
|
||||||
|
|
||||||
|
var csvContent = 'éà; ça; 12\nà@€; çï; 13',
|
||||||
|
textEncoder = new TextEncoder('windows-1252');
|
||||||
|
*/
|
||||||
|
|
||||||
|
const csv_file = new Blob([csv], {type: "text/csv;charset=utf-8"});
|
||||||
|
|
||||||
const download_link = document.createElement("a");
|
const download_link = document.createElement("a");
|
||||||
|
|
||||||
@ -108,7 +115,6 @@ export default function Telemetria({userName, clients}: any) {
|
|||||||
|
|
||||||
const [showChart, setShowChart] = useState(false);
|
const [showChart, setShowChart] = useState(false);
|
||||||
|
|
||||||
const [exception, setException] = useState(false);
|
|
||||||
const [send, setSend] = useState(false);
|
const [send, setSend] = useState(false);
|
||||||
|
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
@ -120,35 +126,6 @@ export default function Telemetria({userName, clients}: any) {
|
|||||||
setEndDate(newValue)
|
setEndDate(newValue)
|
||||||
};
|
};
|
||||||
|
|
||||||
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)
|
|
||||||
setLoader(false)
|
|
||||||
htmlToCSV(html, "telemetria.csv")
|
|
||||||
console.log('then')
|
|
||||||
}).catch(res => {
|
|
||||||
setSend(false)
|
|
||||||
setLoader(false)
|
|
||||||
setException(true)
|
|
||||||
setOpenSnackError(true)
|
|
||||||
setOpenSnackSuccess(false)
|
|
||||||
console.log('catch')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const [fatorPotenciaData, setFatorPotenciaData] = useState([]);
|
const [fatorPotenciaData, setFatorPotenciaData] = useState([]);
|
||||||
const [demRegXDemCon, setDemRegXDemCon] = useState([]);
|
const [demRegXDemCon, setDemRegXDemCon] = useState([]);
|
||||||
@ -159,9 +136,11 @@ export default function Telemetria({userName, clients}: any) {
|
|||||||
}, [startDate, endDate])
|
}, [startDate, endDate])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const firstOfTheMonth = format(new Date(startDate).setDate(1), 'yyyy-MM-dd')
|
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')
|
const lastOfTheMonth = format(new Date(startDate.getFullYear(), startDate.getMonth() + 1, 0), 'yyyy-MM-dd')
|
||||||
|
|
||||||
|
setStartDate(new Date(firstOfTheMonth))
|
||||||
|
|
||||||
setLoader(true)
|
setLoader(true)
|
||||||
getDiscretization(unity, new Date(firstOfTheMonth), new Date(lastOfTheMonth), discretization)
|
getDiscretization(unity, new Date(firstOfTheMonth), new Date(lastOfTheMonth), discretization)
|
||||||
.then(result => {setDiscretizedConsumptionData(result); setSend(false); setLoader(false)})
|
.then(result => {setDiscretizedConsumptionData(result); setSend(false); setLoader(false)})
|
||||||
@ -169,12 +148,8 @@ export default function Telemetria({userName, clients}: any) {
|
|||||||
|
|
||||||
getDemand(unity, startDate, endDate, discretization)
|
getDemand(unity, startDate, endDate, discretization)
|
||||||
.then(result => {
|
.then(result => {
|
||||||
// const html = document.querySelector("table")?.outerHTML;
|
|
||||||
// htmlToCSV(html, "telemetria.csv")
|
|
||||||
|
|
||||||
setDemRegXDemCon(result);
|
setDemRegXDemCon(result);
|
||||||
setSend(false);
|
setSend(false);
|
||||||
console.log(result)
|
|
||||||
setTableData(result)
|
setTableData(result)
|
||||||
})
|
})
|
||||||
.catch(() => {setSend(false); setOpenSnackFields(true); setLoader(false)})
|
.catch(() => {setSend(false); setOpenSnackFields(true); setLoader(false)})
|
||||||
@ -304,6 +279,36 @@ export default function Telemetria({userName, clients}: any) {
|
|||||||
</Select>
|
</Select>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</div>
|
</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)
|
||||||
|
const lastOfTheMonth: Date = new Date(startDate.getFullYear(), firstOfTheMonth.getMonth() + 1, 0)
|
||||||
|
setStartDate(firstOfTheMonth)
|
||||||
|
setEndDate(lastOfTheMonth)
|
||||||
|
}}
|
||||||
|
sx={{height: 63, mb: 2}}
|
||||||
|
fullWidth
|
||||||
|
>
|
||||||
|
<MenuItem value="">
|
||||||
|
<em>Nenhum</em>
|
||||||
|
</MenuItem>
|
||||||
|
{
|
||||||
|
months.slice(0, new Date().getUTCMonth()+1).map(value => {
|
||||||
|
return <MenuItem key={value} value={months.indexOf(value)+1 as number}>{value}</MenuItem>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
:
|
||||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||||
<div className='datePicker'>
|
<div className='datePicker'>
|
||||||
<DesktopDatePicker
|
<DesktopDatePicker
|
||||||
@ -334,11 +339,12 @@ export default function Telemetria({userName, clients}: any) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</LocalizationProvider>
|
</LocalizationProvider>
|
||||||
|
}
|
||||||
<div className='select'>
|
<div className='select'>
|
||||||
<BasicButton title='Selecionar!' onClick={() => {
|
<BasicButton title='Selecionar!' onClick={() => {
|
||||||
setLoader(true)
|
setLoader(true)
|
||||||
getDiscretization(unity, startDate, endDate, discretization)
|
getDiscretization(unity, startDate, endDate, discretization)
|
||||||
.then(result => {setDiscretizedConsumptionData(result); setSend(false); setLoader(false)})
|
.then(result => {setDiscretizedConsumptionData(result); setSend(false); setLoader(false); setTableData(result)})
|
||||||
.catch(exception => {setSend(false); setOpenSnackFields(true); setLoader(false)})
|
.catch(exception => {setSend(false); setOpenSnackFields(true); setLoader(false)})
|
||||||
}}/>
|
}}/>
|
||||||
</div>
|
</div>
|
||||||
@ -527,7 +533,7 @@ export default function Telemetria({userName, clients}: any) {
|
|||||||
<BasicButton title='Selecionar!' onClick={() => {
|
<BasicButton title='Selecionar!' onClick={() => {
|
||||||
setLoader(true)
|
setLoader(true)
|
||||||
getPowerFactorData(unity, startDate, endDate, discretization)
|
getPowerFactorData(unity, startDate, endDate, discretization)
|
||||||
.then(result => {setFatorPotenciaData(result); setSend(false); setLoader(false)})
|
.then(result => {setFatorPotenciaData(result); setSend(false); setLoader(false); setTableData(result)})
|
||||||
.catch(exception => {setSend(false); setOpenSnackFields(true); setLoader(false)})
|
.catch(exception => {setSend(false); setOpenSnackFields(true); setLoader(false)})
|
||||||
}}/>
|
}}/>
|
||||||
</div>
|
</div>
|
||||||
@ -548,7 +554,86 @@ export default function Telemetria({userName, clients}: any) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</RenderIf>
|
</RenderIf>
|
||||||
<RenderIf isTrue={true}>
|
|
||||||
|
<RenderIf isTrue={menu===2}>
|
||||||
|
<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'>f_ref</th>
|
||||||
|
<th className='tg-8oo6'>Consumo</th>
|
||||||
|
<th className='tg-8oo6'>Reativa</th>
|
||||||
|
<th className='tg-8oo6'>fp</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{
|
||||||
|
fatorPotenciaData!==null?
|
||||||
|
fatorPotenciaData?.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.f_ref}</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>
|
||||||
|
<td key={index} className='tg-gceh'>{parseFloat(value.fp)}</td>
|
||||||
|
</tr>
|
||||||
|
</>
|
||||||
|
})
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</RenderIf>
|
||||||
|
<RenderIf isTrue={menu===1}>
|
||||||
|
<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> não temos */}
|
||||||
|
<th className='tg-8oo6'>Consumo</th>
|
||||||
|
<th className='tg-8oo6'>Reativa</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>
|
||||||
|
{
|
||||||
|
demRegXDemCon!==null?
|
||||||
|
demRegXDemCon?.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>
|
||||||
|
<td key={index} className='tg-gceh'>{value.dem_cont}</td>
|
||||||
|
<td key={index} className='tg-gceh'>{value.dem_reg}</td>
|
||||||
|
<td key={index} className='tg-gceh'>{value.dem_tolerancia}</td>
|
||||||
|
</tr>
|
||||||
|
</>
|
||||||
|
})
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</RenderIf>
|
||||||
|
<RenderIf isTrue={menu===0}>
|
||||||
<table className="tg">
|
<table className="tg">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -563,8 +648,8 @@ export default function Telemetria({userName, clients}: any) {
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{
|
{
|
||||||
tableData!==null?
|
discretizedConsumptionData!==null?
|
||||||
tableData?.map((value, index) => {
|
discretizedConsumptionData?.map((value, index) => {
|
||||||
return <>
|
return <>
|
||||||
<tr>
|
<tr>
|
||||||
<td key={index} className='tg-gceh'>{value.ponto}</td>
|
<td key={index} className='tg-gceh'>{value.ponto}</td>
|
||||||
@ -592,9 +677,8 @@ export default function Telemetria({userName, clients}: any) {
|
|||||||
{/* <GradientButton title='DADOS' description='CLIQUE AQUI PARA GERAR GRÁFICO DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} purple /> */}
|
{/* <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='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={() => {
|
<GradientButton title='DOWNLOADS' description={`CLIQUE AQUI PARA BAIXAR OS DADOS EM FORMATO EXCEL DO PERÍODO SELECIONADO`} green onClick={() => {
|
||||||
console.log(send)
|
|
||||||
const html = document.querySelector("table")?.outerHTML;
|
const html = document.querySelector("table")?.outerHTML;
|
||||||
htmlToCSV(html, "telemetria.csv");
|
htmlToCSV(html, `${menu === 2 ? 'fator_potencia' : menu === 1 ? 'demanda' : 'consumo_discretizado'}.csv`);
|
||||||
}}/>
|
}}/>
|
||||||
</Buttons>
|
</Buttons>
|
||||||
<p className='paragraph'>
|
<p className='paragraph'>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user