fix changes
This commit is contained in:
joseCorte-exe
parent
4f51a893d5
commit
4d308ba445
@ -23,6 +23,7 @@
|
||||
"@hookform/resolvers": "^2.9.1",
|
||||
"@material-ui/core": "^4.12.4",
|
||||
"@material-ui/icons": "^4.11.3",
|
||||
"@material-ui/pickers": "^3.3.10",
|
||||
"@mui/icons-material": "^5.8.2",
|
||||
"@mui/material": "^5.6.4",
|
||||
"@mui/x-data-grid": "^5.11.0",
|
||||
@ -35,9 +36,11 @@
|
||||
"axios": "^0.27.2",
|
||||
"chart.js": "^3.7.1",
|
||||
"chartjs-plugin-datalabels": "^2.0.0",
|
||||
"date-fns": "^2.28.0",
|
||||
"eslint-plugin-react": "^7.29.4",
|
||||
"eslit": "^6.0.0",
|
||||
"faker": "5.5.3",
|
||||
"form-data": "^4.0.0",
|
||||
"fs-extra": "^10.1.0",
|
||||
"install": "^0.13.0",
|
||||
"next": "12.1.6",
|
||||
|
||||
BIN
public/assets/banners/faq.jpg
Normal file
BIN
public/assets/banners/faq.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
public/assets/banners/faq1.png
Normal file
BIN
public/assets/banners/faq1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 394 KiB |
BIN
public/assets/banners/infoSetorial.jpg
Normal file
BIN
public/assets/banners/infoSetorial.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
public/assets/banners/notificacoes.jpg
Normal file
BIN
public/assets/banners/notificacoes.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@ -90,7 +90,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
|
||||
{
|
||||
label: dataset1? dataset1 : '2021',
|
||||
data: data1.map(value => value.custo_unit),
|
||||
backgroundColor: '#255488'
|
||||
backgroundColor: '#C2d5fb'
|
||||
// backgroundColor: (value, ctx) => {
|
||||
// return data1[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
|
||||
// },
|
||||
@ -98,7 +98,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
|
||||
{
|
||||
label: dataset2? dataset2 : '2022',
|
||||
data: data2.map(value => value.custo_unit),
|
||||
backgroundColor: '#255488'
|
||||
backgroundColor: '#C2d5fb'
|
||||
// backgroundColor: (value, ctx) => {
|
||||
// return data2[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
|
||||
// },
|
||||
|
||||
@ -64,7 +64,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
|
||||
sum += data;
|
||||
});
|
||||
const percentage = data1[ctx.dataIndex].econ_percentual? (data1[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%" : '';
|
||||
const result = ` ${parseInt(value)!=0? parseInt(value).toLocaleString('pt-br') : ''}\n ${parseInt(value)!=0? percentage : ''}`
|
||||
const result = ` ${parseInt(value)!=0? percentage : ''}\n ${parseInt(value)!=0? parseInt(value).toLocaleString('pt-br') : ''}`
|
||||
|
||||
return value==null? null : result
|
||||
},
|
||||
@ -72,7 +72,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
|
||||
offset: 0,
|
||||
align: "end",
|
||||
font: {
|
||||
size: !miniature? 15 : 10,
|
||||
size: !miniature? 18 : 10,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
@ -104,6 +104,18 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
|
||||
// backgroundColor: (value, ctx) => {
|
||||
// return data2[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
|
||||
// },
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
label: 'Acumulado',
|
||||
backgroundColor: '#255488',
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
label: 'Estimado',
|
||||
backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
|
||||
data: [],
|
||||
}
|
||||
],
|
||||
}
|
||||
|
||||
@ -105,7 +105,7 @@ export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red
|
||||
dataArr.map(data => {
|
||||
sum += data;
|
||||
});
|
||||
const result = `${parseInt(value).toLocaleString('pt-br')}`
|
||||
const result = `${(parseInt(value)/1000).toLocaleString('pt-br')}`
|
||||
|
||||
return value==null? null : result
|
||||
}
|
||||
@ -129,11 +129,13 @@ export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red
|
||||
borderColor: red?
|
||||
'#f00' : '#0c9200',
|
||||
datalabels: {
|
||||
backgroundColor: 'white'
|
||||
backgroundColor: 'white',
|
||||
borderRadius: 8,
|
||||
opacity: .8
|
||||
},
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
data: data1.map(value => value.economia_mensal),
|
||||
data: data1.map(value => value.economia_mensal/1000),
|
||||
},
|
||||
{
|
||||
type: 'bar' as const,
|
||||
@ -141,7 +143,7 @@ export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red
|
||||
backgroundColor: (value, ctx) => {
|
||||
return hashurado? data1[value.dataIndex]?.dad_estimado == false? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
|
||||
},
|
||||
data: data3.map(value => value.custo_cativo),
|
||||
data: data3.map(value => value.custo_cativo/1000),
|
||||
},
|
||||
{
|
||||
type: 'bar' as const,
|
||||
@ -150,8 +152,20 @@ export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red
|
||||
backgroundColor: (value, ctx) => {
|
||||
return hashurado? data1[value.dataIndex]?.dad_estimado == false? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
|
||||
},
|
||||
data: data2.map(value => value.custo_livre),
|
||||
data: data2.map(value => value.custo_livre/1000),
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
label: 'Acumulado',
|
||||
backgroundColor: '#255488',
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
label: 'Estimado',
|
||||
backgroundColor: pattern.draw('diagonal-right-left', '#C2d5fb'),
|
||||
data: [],
|
||||
}
|
||||
],
|
||||
} : {
|
||||
labels,
|
||||
|
||||
@ -32,6 +32,9 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
font: {
|
||||
size: 20
|
||||
},
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
@ -58,10 +61,10 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel
|
||||
display: true,
|
||||
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
|
||||
anchor: "end",
|
||||
offset: -40,
|
||||
offset: -60,
|
||||
align: "start",
|
||||
font: {
|
||||
size: !miniature? 15 : 10
|
||||
size: !miniature? 22 : 10
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
|
||||
@ -21,7 +21,7 @@ export const HeaderView = styled.header`
|
||||
|
||||
padding: 14px;
|
||||
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
|
||||
p{
|
||||
color: white;
|
||||
|
||||
@ -20,7 +20,7 @@ export default function aboutUs({userName, text}) {
|
||||
|
||||
<section dangerouslySetInnerHTML={{__html: text[0].about}}/>
|
||||
<article>
|
||||
<aside style={{alignSelf: 'flex-end'}}>
|
||||
<aside>
|
||||
<h2>Apoio a projetos sociais</h2>
|
||||
<div>
|
||||
<Image src='/assets/stamps/whiteStamp.png' width={200} height={200} />
|
||||
|
||||
@ -32,7 +32,7 @@ export default function AccumulatedSavings({graphData, years, userName}: any) {
|
||||
<title>Smart Energia - Economia Bruta Mensal</title>
|
||||
</Head>
|
||||
<Header name={userName}>
|
||||
<PageTitle title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ mil' />
|
||||
<PageTitle title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil' />
|
||||
</Header>
|
||||
<section>
|
||||
<Chart2 title='' subtitle=''
|
||||
|
||||
@ -11,6 +11,7 @@ import FormData from 'form-data';
|
||||
|
||||
import Snackbar from '@mui/material/Snackbar';
|
||||
import MuiAlert, { AlertProps } from '@mui/material/Alert';
|
||||
import getAPIClient from '../../../services/ssrApi'
|
||||
|
||||
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
|
||||
props,
|
||||
@ -50,6 +51,14 @@ export default function industryInfo({userName, pdfUrl}: any) {
|
||||
})
|
||||
}
|
||||
|
||||
function handleDownloadPdf() {
|
||||
api.get('/download').then(res => {
|
||||
window.open(res.data.path);
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<IndustryInfoView>
|
||||
<Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
|
||||
@ -75,7 +84,7 @@ export default function industryInfo({userName, pdfUrl}: any) {
|
||||
</div>
|
||||
|
||||
<BasicButton onClick={() => handleCreateClient()} title='Atualizar'/>
|
||||
<BasicButton onClick={() => window.open(pdfUrl)} title='Visualizar arquivo mais recente'/>
|
||||
<BasicButton onClick={() => handleDownloadPdf()} title='Visualizar arquivo mais recente'/>
|
||||
<BasicButton onClick={() => console.log('')} title='Excluir último arquivo enviado'/>
|
||||
|
||||
{/* <PDFViewer
|
||||
@ -89,15 +98,16 @@ export default function industryInfo({userName, pdfUrl}: any) {
|
||||
}
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const apiClient = getAPIClient(ctx)
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
const { ['user-name']: userName } = parseCookies(ctx)
|
||||
|
||||
let pdfUrl=[]
|
||||
|
||||
api.get('/download').then(res => {
|
||||
apiClient.get('/download').then(res => {
|
||||
pdfUrl = res.data.path
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
console.log('exception', res)
|
||||
})
|
||||
|
||||
if (!token) {
|
||||
|
||||
@ -142,28 +142,7 @@ export default function chartTelemetry({userName}) {
|
||||
:
|
||||
<>
|
||||
|
||||
<RenderIf isTrue={discretization!=='1_hora'}>
|
||||
<div onClick={() => setOpenConsumoDiscretizado1(true)}>
|
||||
<DiscretizedConsumptionChartLine 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='' 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={
|
||||
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='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => data.reativa)} />
|
||||
</Box>
|
||||
</Modal>
|
||||
|
||||
<RenderIf isTrue={discretization!=='1_dia' && discretization!=='1_mes'}>
|
||||
<div onClick={() => setOpenConsumoDiscretizado2(true)}>
|
||||
<DiscretizedConsumptionChart title={
|
||||
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
|
||||
@ -184,6 +163,27 @@ export default function chartTelemetry({userName}) {
|
||||
} subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
|
||||
</Box>
|
||||
</Modal>
|
||||
|
||||
<div onClick={() => setOpenConsumoDiscretizado1(true)}>
|
||||
<DiscretizedConsumptionChartLine 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='' 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={
|
||||
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='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => data.reativa)} />
|
||||
</Box>
|
||||
</Modal>
|
||||
</RenderIf>
|
||||
|
||||
<div onClick={() => setOpenDemandaContratada(true)}>
|
||||
|
||||
@ -61,21 +61,21 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
|
||||
</Link>
|
||||
|
||||
<section className='dashboard'>
|
||||
<GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ mil'>
|
||||
<GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil'>
|
||||
<SingleBar title='' subtitle=''
|
||||
dataset='Consolidada'
|
||||
dataProps={grossAnualGraph}
|
||||
label={grossAnualYears} barLabel miniature/>
|
||||
</GraphCard>
|
||||
|
||||
<GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ mil' singleBar>
|
||||
<GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil' singleBar>
|
||||
<Chart2 title='' subtitle=''
|
||||
data1={grossMensalGraph.filter((value, index) => value.mes.slice(3, 8).includes('2021'))}
|
||||
data2={grossMensalGraph.filter((value, index) => value.mes.slice(3, 8).includes('2022'))}
|
||||
label={months} miniature/>
|
||||
</GraphCard>
|
||||
|
||||
<GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ mil' singleBar>
|
||||
<GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' singleBar>
|
||||
<LineBarChart2 data1={acumulatedGraph} data2={acumulatedGraph} data3={acumulatedGraph}
|
||||
label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre'
|
||||
title='' subtitle='' barLabel hashurado miniature/>
|
||||
|
||||
@ -19,7 +19,7 @@ export default function EstimatedCost({graphData, userName}: any) {
|
||||
<title>Smart Energia - Custos Estimados</title>
|
||||
</Head>
|
||||
<Header name={userName}>
|
||||
<PageTitle title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ mil' />
|
||||
<PageTitle title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' />
|
||||
</Header>
|
||||
<section>
|
||||
<LineBarChart2 data1={graphData} data2={graphData} data3={graphData}
|
||||
|
||||
@ -2,6 +2,7 @@ import { GetServerSideProps } from 'next'
|
||||
import Head from 'next/head'
|
||||
import { parseCookies } from 'nookies'
|
||||
import React from 'react'
|
||||
import Banner from '../../components/banner/Banner'
|
||||
import CommonQuestionsCard from '../../components/faqQuestionsCard/FaqQuestionsCard'
|
||||
import Header from '../../components/header/Header'
|
||||
import PageTitle from '../../components/pageTitle/PageTitle'
|
||||
@ -19,6 +20,7 @@ export default function commonQuestions({faqData, userName}) {
|
||||
<Header name={userName}>
|
||||
<PageTitle title='Perguntas Frequentes' subtitle='Aqui estão algumas das perguntas que mais recebemos!' />
|
||||
</Header>
|
||||
<Banner title='Perguntas Frequentes' subtitle='Aqui estão algumas das perguntas que mais recebemos!' imgSource='/assets/banners/faq1.png'/>
|
||||
<section className='CommonQuestionsSection' >
|
||||
{
|
||||
faqData.length<1?
|
||||
|
||||
@ -19,7 +19,7 @@ export default function GrossSavings({graphData, years, userName}: any) {
|
||||
<title>Smart Energia - Economia Acumulada</title>
|
||||
</Head>
|
||||
<Header name={userName}>
|
||||
<PageTitle title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ mil' />
|
||||
<PageTitle title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil' />
|
||||
</Header>
|
||||
<section>
|
||||
<SingleBar title='' subtitle=''
|
||||
|
||||
@ -11,6 +11,7 @@ import { IndustryInfoView } from '../../styles/layouts/industryInfo/IndustryInfo
|
||||
import Snackbar from '@mui/material/Snackbar';
|
||||
import MuiAlert, { AlertProps } from '@mui/material/Alert';
|
||||
import { useRouter } from 'next/router'
|
||||
import Banner from '../../components/banner/Banner'
|
||||
|
||||
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
|
||||
props,
|
||||
@ -60,8 +61,9 @@ export default function industryInfo({userName}: any) {
|
||||
<Header name={userName}>
|
||||
<PageTitle title='Info Setorial' subtitle='Clique em "Baixar PDF", para fazer download do PDF' />
|
||||
</Header>
|
||||
<Banner title='Info setorial' subtitle='Baixe o pdf para ver o info setorial' imgSource='/assets/banners/infoSetorial.jpg'/>
|
||||
<p>Um resumo das atualizações gerais do Setor Elétrico, com dados sobre geração consumo, demanda, meteorologia baseadas em informações do ONS, CCEE, ANEEL, 10 Maiores Jornais e Revistas e CPTEC</p>
|
||||
<button onClick={() => handleDownloadPdf()}>Baixar PDF</button>
|
||||
<button onClick={() => handleDownloadPdf()}>Clique aqui para baixar o arquivo em PDF</button>
|
||||
|
||||
</IndustryInfoView>
|
||||
)
|
||||
|
||||
@ -8,6 +8,7 @@ import PageTitle from '../../components/pageTitle/PageTitle'
|
||||
import { api } from '../../services/api'
|
||||
import getAPIClient from '../../services/ssrApi'
|
||||
import { FaqView } from '../../styles/layouts/commonQuestions/FaqView'
|
||||
import Banner from '../../components/banner/Banner'
|
||||
|
||||
export default function Notifications({notificationData, userName}: any) {
|
||||
return (
|
||||
@ -18,6 +19,7 @@ export default function Notifications({notificationData, userName}: any) {
|
||||
<Header name={userName}>
|
||||
<PageTitle title='Notificações' subtitle='Aqui estão as notificações publicadas para você!' />
|
||||
</Header>
|
||||
<Banner title='Notificações' subtitle='Aqui estão as notificações publicadas para você!' imgSource='/assets/banners/notificacoes.jpg'/>
|
||||
<section className='CommonQuestionsSection' >
|
||||
{
|
||||
notificationData.length!=0?
|
||||
|
||||
@ -5,18 +5,15 @@ import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import { GetServerSideProps } from 'next';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router'
|
||||
import { parseCookies } from 'nookies';
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
import BasicButton from '../../components/buttons/basicButton/BasicButton';
|
||||
import { BasicButtonView } from '../../components/buttons/basicButton/BasicButtonView';
|
||||
import { LineBarChart } from '../../components/graph/LineBarChart';
|
||||
import LineChart from '../../components/graph/LineChart';
|
||||
import Header from '../../components/header/Header'
|
||||
import PageTitle from '../../components/pageTitle/PageTitle';
|
||||
import { api } from '../../services/api';
|
||||
import { EconomiaAcumulada } from '../../services/economiaAcumulada';
|
||||
import { EvolucaoPld } from '../../services/evolucaoPld';
|
||||
import getAPIClient from '../../services/ssrApi';
|
||||
import { GoBack, PldGraphView, PldTableView } from '../../styles/layouts/pld/PldView'
|
||||
@ -36,9 +33,9 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||
const year_Month = `0${dateFormated.getMonth()}/${dateFormated.getFullYear()}`
|
||||
|
||||
const [date, setDate] = useState(`${dateFormated.getFullYear()}-${dateFormated.getUTCMonth()+1}-${dateFormated.getUTCDate()}`);
|
||||
const [select, setSelect] = useState('NORDESTE');
|
||||
const [select, setSelect] = useState('SUDESTE');
|
||||
const [page, setPage] = useState<string>('table')
|
||||
const [day, setDay] = useState<string>(null)
|
||||
const [month, setMonth] = useState<string>((dateFormated.getUTCMonth()+1).toString())
|
||||
|
||||
const [dataByDay, setDataByDay] = useState([])
|
||||
|
||||
@ -51,7 +48,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||
setSelect(event.target.value);
|
||||
};
|
||||
const handleChangeDay = (event: SelectChangeEvent) => {
|
||||
setDay(event.target.value);
|
||||
setMonth(event.target.value);
|
||||
};
|
||||
|
||||
function getDataByDay() {
|
||||
@ -59,7 +56,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||
"limit": 20,
|
||||
"offset": 0,
|
||||
"filters": [
|
||||
{"type" : "=", "field" : "mes_ref", "value": `${day}/2022`, "row": true},
|
||||
{"type" : "=", "field" : "mes_ref", "value": `${month}/2022`, "row": true},
|
||||
{"type" : "=", "field" : "pld.submercado", "value": select}
|
||||
],
|
||||
"order": [{ "field": "day_calc", "direction": "asc" }]
|
||||
@ -175,19 +172,18 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||
useEffect(() => {
|
||||
getDataByHour()
|
||||
getDataByDay()
|
||||
}, [date, day, select])
|
||||
console.log(month)
|
||||
}, [date, month, select])
|
||||
|
||||
return (
|
||||
<main style={{
|
||||
width: '100%',
|
||||
}}>
|
||||
<main style={{width: '100%',}}>
|
||||
<Head>
|
||||
<title>Smart Energia - PLD</title>
|
||||
</Head>
|
||||
<RenderIf isTrue={page==='table'? true : false}>
|
||||
<Header name={userName}>
|
||||
<Link href='/dashboard' >{'< Voltar para Visão Geral'}</Link>
|
||||
<PageTitle title='Tabela de consumo PLD' subtitle=''/>
|
||||
<PageTitle title='Tabela de consumo PLD' subtitle='Tabela de consumo PLD'/>
|
||||
</Header>
|
||||
<PldTableView>
|
||||
<table className="tg">
|
||||
@ -211,14 +207,21 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||
return <>
|
||||
<tr className={data.year_month_formatted==year_Month? 'actual' : ''}>
|
||||
<td className='tg-gceh'>{data.year_month_formatted}</td>
|
||||
<td className={`tg-uulg ${handleColorNorte(parseFloat(data.norte), 'nordeste')}`}>{parseFloat(data.nordeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td className={`tg-gceh ${handleColorNorte(parseFloat(data.norte), 'norte')}`}>{parseFloat(data.norte).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td className={`tg-gceh ${handleColorNorte(parseFloat(data.norte), 'sudeste')}`}>{parseFloat(data.sudeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td className={`tg-uulg ${handleColorNorte(parseFloat(data.norte), 'sul')}`}>{parseFloat(data.sul).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td className={`tg-uulg`}>{parseFloat(data.nordeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td className={`tg-gceh`}>{parseFloat(data.norte).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td className={`tg-gceh`}>{parseFloat(data.sudeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td className={`tg-uulg`}>{parseFloat(data.sul).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
</tr>
|
||||
</>
|
||||
})
|
||||
}
|
||||
<tr>
|
||||
<td className='tg-gceh'></td>
|
||||
<td className={`tg-uulg`}></td>
|
||||
<td className={`tg-gceh`}></td>
|
||||
<td className={`tg-gceh`}></td>
|
||||
<td className={`tg-uulg`}></td>
|
||||
</tr>
|
||||
{
|
||||
tableData.result.map((data, index) => {
|
||||
if (index === 0) {
|
||||
@ -263,7 +266,6 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||
}} title='Download'/>
|
||||
</div>
|
||||
<section>
|
||||
|
||||
<article onClick={() => setPage('perMouth')}>
|
||||
<p>Valores Diários</p>
|
||||
</article>
|
||||
@ -275,8 +277,10 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||
</RenderIf>
|
||||
|
||||
<RenderIf isTrue={page==='perMouth'? true : false}>
|
||||
<GoBack onClick={() => setPage('table')}>{'< Voltar para tabela PLD'}</GoBack>
|
||||
<PageTitle title='Resumo PLD - Diários' subtitle='Evolução PLD (R$/MWh)'/>
|
||||
<Header name={userName}>
|
||||
<GoBack onClick={() => setPage('table')}>{'< Voltar para tabela PLD'}</GoBack>
|
||||
<PageTitle title='Resumo PLD - Diários' subtitle='Evolução PLD (R$/MWh)'/>
|
||||
</Header>
|
||||
<PldGraphView>
|
||||
<section className='toolsbar'>
|
||||
<div className='select'>
|
||||
@ -306,7 +310,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||
}}>
|
||||
<InputLabel id="demo-simple-select-label">Mês</InputLabel>
|
||||
<Select
|
||||
value={day}
|
||||
value={month}
|
||||
onChange={handleChangeDay}
|
||||
displayEmpty
|
||||
placeholder='dia'
|
||||
@ -328,18 +332,21 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||
</section>
|
||||
<LineBarChart
|
||||
data1={dataByDay} data3={dataByDay}
|
||||
dataset1={'Economia'} dataset2={'barra1'} dataset3={'2021'}
|
||||
dataset1={'Média'} dataset2={'barra1'} dataset3={'Diario'}
|
||||
label={EvolucaoPld.label}
|
||||
title='' subtitle='' />
|
||||
</PldGraphView>
|
||||
</RenderIf>
|
||||
|
||||
<RenderIf isTrue={page==='perDate'? true : false}>
|
||||
<GoBack onClick={() => setPage('table')}>{'< Voltar para tabela PLD'}</GoBack>
|
||||
<Header name={userName}>
|
||||
{/* <Link href='/dashboard' >{'< Voltar para Visão Geral'}</Link> */}
|
||||
<GoBack onClick={() => setPage('table')}>{'< Voltar para tabela PLD'}</GoBack>
|
||||
<PageTitle title='Resumo PLD - Horas' subtitle='Gráfico de resumo PLD - Horas (Média, Diário)'/>
|
||||
</Header>
|
||||
<PldGraphView>
|
||||
<PageTitle title='Resumo PLD - Horas' subtitle=''/>
|
||||
<section className='toolsbar'>
|
||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={date} onChange={(value) => setDate(value.target.value)}/>
|
||||
<input type="date" data-date={date} data-date-format="DD MMMM YYYY" value={date} onChange={(value) => setDate(value.target.value)}/>
|
||||
</section>
|
||||
<LineChart data1={nordeste} data2={norte} data3={sudeste} data4={sul}
|
||||
dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL'
|
||||
|
||||
@ -139,8 +139,8 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
|
||||
<th className='tg-8oo6'>Mês </th>
|
||||
<th className='tg-8oo6'>Unidade </th>
|
||||
<th className='tg-8oo6'>Operação</th>
|
||||
<th className='tg-8oo6'>Contraparte</th>
|
||||
<th className='tg-8oo6'>Montante (MWh)</th>
|
||||
<th className='tg-8oo6'>Contraparte</th>
|
||||
<th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
|
||||
<th className='tg-8oo6'>Preço(R$/MWh)</th>
|
||||
</tr>
|
||||
@ -157,11 +157,11 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
|
||||
<tr>
|
||||
<td key={index} className='tg-gceh'>{value.mes}</td>
|
||||
<td key={index} className='tg-gceh'>{value.cod_smart_unidade}</td>
|
||||
<td key={index} className='tg-uulg'>{value.operacao}</td>
|
||||
<td key={index} className='tg-gceh'>{value.contraparte}</td>
|
||||
<td key={index} className='tg-gceh'>{value.operacao}</td>
|
||||
<td key={index} className='tg-gceh'>{parseFloat(value.montante_nf).toLocaleString('pt-br')}</td>
|
||||
<td key={index} className='tg-gceh'>{value.contraparte}</td>
|
||||
<td key={index} className='tg-gceh'>{parseFloat(value.preco_nf).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td key={index} className='tg-uulg'>{parseFloat(value.nf_c_icms).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td key={index} className='tg-gceh'>{parseFloat(value.nf_c_icms).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
</tr>
|
||||
</>
|
||||
})
|
||||
|
||||
@ -287,6 +287,7 @@ export default function Telemetria({userName, clients}: any) {
|
||||
<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>
|
||||
|
||||
@ -3,16 +3,7 @@ import styled from "styled-components";
|
||||
export const AboutUsView = styled.main`
|
||||
width: 100%;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
|
||||
font-size: 98.98%;
|
||||
}
|
||||
}
|
||||
font-weight: 300;
|
||||
|
||||
article {
|
||||
display: flex;
|
||||
@ -20,6 +11,9 @@ export const AboutUsView = styled.main`
|
||||
align-items: center;
|
||||
|
||||
aside {
|
||||
position: absolute;
|
||||
margin-bottom: 150px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@ -6,19 +6,6 @@ export const ClientsView = styled.main`
|
||||
|
||||
width: 100%;
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
|
||||
:nth-child(3) {
|
||||
justify-content: space-between;
|
||||
|
||||
width: 18rem;
|
||||
|
||||
margin: 45px 0 22px 0;
|
||||
}
|
||||
}
|
||||
.btn2{
|
||||
background: #254F7F;
|
||||
border-radius: 8px;
|
||||
|
||||
@ -155,7 +155,7 @@ export const PldTableView = styled.main`
|
||||
}
|
||||
|
||||
.btnDownload{
|
||||
margin-top:6px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
`
|
||||
|
||||
@ -169,6 +169,13 @@ export const PldGraphView = styled.main`
|
||||
|
||||
width: 100%;
|
||||
|
||||
.MuiOutlinedInput-input {
|
||||
height: 30px;
|
||||
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.select {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
51
yarn.lock
51
yarn.lock
@ -778,6 +778,13 @@
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.6.0":
|
||||
version "7.18.6"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.6.tgz#6a1ef59f838debd670421f8c7f2cbb8da9751580"
|
||||
integrity sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/template@^7.16.7":
|
||||
version "7.16.7"
|
||||
resolved "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz"
|
||||
@ -812,6 +819,11 @@
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
|
||||
|
||||
"@date-io/core@1.x":
|
||||
version "1.3.13"
|
||||
resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa"
|
||||
integrity sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA==
|
||||
|
||||
"@date-io/core@^2.14.0":
|
||||
version "2.14.0"
|
||||
resolved "https://registry.yarnpkg.com/@date-io/core/-/core-2.14.0.tgz#03e9b9b9fc8e4d561c32dd324df0f3ccd967ef14"
|
||||
@ -1021,6 +1033,18 @@
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.4.4"
|
||||
|
||||
"@material-ui/pickers@^3.3.10":
|
||||
version "3.3.10"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/pickers/-/pickers-3.3.10.tgz#f1b0f963348cc191645ef0bdeff7a67c6aa25485"
|
||||
integrity sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.6.0"
|
||||
"@date-io/core" "1.x"
|
||||
"@types/styled-jsx" "^2.2.8"
|
||||
clsx "^1.0.2"
|
||||
react-transition-group "^4.0.0"
|
||||
rifm "^0.7.0"
|
||||
|
||||
"@material-ui/styles@^4.11.5":
|
||||
version "4.11.5"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.5.tgz#19f84457df3aafd956ac863dbe156b1d88e2bbfb"
|
||||
@ -1553,6 +1577,13 @@
|
||||
"@types/react" "*"
|
||||
csstype "^3.0.2"
|
||||
|
||||
"@types/styled-jsx@^2.2.8":
|
||||
version "2.2.9"
|
||||
resolved "https://registry.yarnpkg.com/@types/styled-jsx/-/styled-jsx-2.2.9.tgz#e50b3f868c055bcbf9bc353eca6c10fdad32a53f"
|
||||
integrity sha512-W/iTlIkGEyTBGTEvZCey8EgQlQ5l0DwMqi3iOXlLs2kyBwYTXHKEiU6IZ5EwoRwngL8/dGYuzezSup89ttVHLw==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/yup@^0.29.14":
|
||||
version "0.29.14"
|
||||
resolved "https://registry.yarnpkg.com/@types/yup/-/yup-0.29.14.tgz#754f1dccedcc66fc2bbe290c27f5323b407ceb00"
|
||||
@ -2018,6 +2049,11 @@ clone@^1.0.2:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
|
||||
|
||||
clsx@^1.0.2:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.0.tgz#b0e415ea7537dbac01b169c5cec1caeb11d86566"
|
||||
integrity sha512-EPRP7XJsM1y0iCU3Z7C7jFKdQboXSeHgEfzQUTlz7m5NP3hDrlz48aUsmNGp4pC+JOW9WA3vIRqlYuo/bl4Drw==
|
||||
|
||||
clsx@^1.0.4, clsx@^1.1.0, clsx@^1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz"
|
||||
@ -2155,6 +2191,11 @@ damerau-levenshtein@^1.0.7:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
|
||||
|
||||
date-fns@^2.28.0:
|
||||
version "2.28.0"
|
||||
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
|
||||
integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
|
||||
|
||||
debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
|
||||
version "4.3.4"
|
||||
resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
|
||||
@ -2632,6 +2673,7 @@ follow-redirects@^1.14.9:
|
||||
form-data@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
|
||||
integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
|
||||
dependencies:
|
||||
asynckit "^0.4.0"
|
||||
combined-stream "^1.0.8"
|
||||
@ -4164,7 +4206,7 @@ react-pdf-thumbnail@^0.1.0:
|
||||
dependencies:
|
||||
pdfjs-dist "^2.7.570"
|
||||
|
||||
react-transition-group@^4.4.0, react-transition-group@^4.4.2:
|
||||
react-transition-group@^4.0.0, react-transition-group@^4.4.0, react-transition-group@^4.4.2:
|
||||
version "4.4.2"
|
||||
resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz"
|
||||
dependencies:
|
||||
@ -4321,6 +4363,13 @@ rifm@^0.12.1:
|
||||
version "0.12.1"
|
||||
resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.12.1.tgz#8fa77f45b7f1cda2a0068787ac821f0593967ac4"
|
||||
|
||||
rifm@^0.7.0:
|
||||
version "0.7.0"
|
||||
resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.7.0.tgz#debe951a9c83549ca6b33e5919f716044c2230be"
|
||||
integrity sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.3.1"
|
||||
|
||||
rimraf@^3.0.0, rimraf@^3.0.2:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user