Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

correcoes

Browse Source
This commit is contained in:
joseCorte-exe 2022-06-30 23:36:34 -03:00
parent 3084f74607
commit 72694a2504
44 changed files with 558 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
next.config.js
View File

@ -11,4 +11,3 @@ const nextConfig = {
}
module.exports = nextConfig

1
package.json
View File

@ -27,7 +27,6 @@
"@mui/material": "^5.6.4",
"@mui/x-data-grid": "^5.11.0",
"@mui/x-date-pickers": "^5.0.0-alpha.3",
"@react-pdf-viewer/core": "^3.5.0",
"@tinymce/tinymce-react": "^4.1.0",
"@types/react-csv": "^1.1.2",
"@types/yup": "^0.29.14",

BIN
public/assets/banners/newsBanner.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 440 KiB

8
src/components/buttons/gradientButton/GradientButtonView.ts
View File

@ -20,12 +20,12 @@ export const GradientButtonView = styled.button`
color: #FFFFFF;
background: ${ props => props.color==='orange'?
'linear-gradient(200.86deg, #F48665 8.03%, #F48665 91.97%), #FFFFFF'
'linear-gradient(200.86deg, #e7992f 8.03%, #e7992f 91.97%), #FFFFFF'
:
props.color === 'purple'?
'linear-gradient(200.69deg, #9A56FF 9%, #D78AFD 98%), #FFFFFF'
'linear-gradient(200.69deg, #254f7f 9%, #254f7f 98%), #FFFFFF'
:
'linear-gradient(200.69deg, #23BDB8 8.53%, #43E794 98%), #FFFFFF'
'linear-gradient(200.69deg, #018a8a 8.53%, #018a8a 98%), #FFFFFF'
};
box-shadow: 0.5px 3px 10px rgba(119, 119, 119, 0.1);
@ -50,7 +50,7 @@ export const GradientButtonView = styled.button`
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 12;
font-size: 11px;
text-transform: uppercase;
}

26
src/components/graph/Chart.tsx
View File

@ -35,20 +35,26 @@ interface ChartInterface {
label: any,
dataset1?: string,
dataset2?: string,
barLabel?: boolean | undefined
miniature?: boolean | undefined
}
export default function Chart({ title, data1, data2, label, subtitle, dataset1, dataset2, barLabel }: ChartInterface) {
export default function Chart({ title, data1, data2, label, subtitle, dataset1, dataset2, miniature }: ChartInterface) {
const labels = label;
const options: any = {
responsive: true,
scales: {
yAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}]
},
plugins: {
datalabels: {
display: true,
color: (value, ctx) => {
console.log(value)
return value.dataset.label==='2021'? 'black' : 'white'
},
formatter: (value, ctx) => {
@ -57,7 +63,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
dataArr.map(data => {
sum += data;
});
const result = `${parseFloat(value).toLocaleString('pt-br')}`
const result = `${parseInt(value).toLocaleString('pt-br')}`
return value==null? null : result
},
@ -66,12 +72,13 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
align: "end",
rotation: -90,
font: {
size: 14,
weight: 800
size: !miniature? 15 : 10,
weight: !miniature? 800 : 100
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
@ -85,15 +92,14 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
datasets: [
{
label: dataset1? dataset1 : '2021',
data: data1.map(value => value.custo_unit? value.custo_unit : 0),
data: data1.map(value => value.custo_unit),
backgroundColor: '#C2D5FB',
},
data2?
{
label: dataset2? dataset2 : '2022',
data: data2.map(value => value.custo_unit? value.custo_unit : 0),
data: data2.map(value => value.custo_unit),
backgroundColor: '#255488',
} : null
}
],
}

121
src/components/graph/Chart2.tsx Normal file
View File

@ -0,0 +1,121 @@
import React, { useState, useEffect } from 'react'
import { Bar, Line } from 'react-chartjs-2';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
} from 'chart.js'
import faker from 'faker'
import { ChartView } from './ChartView';
import RenderIf from '../../utils/renderIf';
import ChartTitle from './ChartTitle';
// import { data } from './LineBarChart';
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
)
interface ChartInterface {
title: string,
subtitle: string,
data1: any,
data2: any,
single?: any
label: any,
dataset1?: string,
dataset2?: string,
miniature?: boolean | undefined
}
export default function Chart({ title, data1, data2, label, subtitle, dataset1, dataset2, miniature }: ChartInterface) {
const labels = label;
const options: any = {
responsive: true,
scales: {
x: {
grid: {
display: false
}
},
},
plugins: {
datalabels: {
display: true,
color: (value, ctx) => {
return 'black'
},
formatter: (value, ctx) => {
let sum = 0;
const dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
const percentage = (data1[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%";
const result = ` ${parseInt(value)!=0? parseInt(value).toLocaleString('pt-br') : ''}\n ${parseInt(value)!=0? percentage : ''}`
return value==null? null : result
},
anchor: "end",
offset: 0,
align: "end",
font: {
size: !miniature? 15 : 10,
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
text: '',
},
},
};
const data = {
labels,
datasets: [
{
label: dataset1? dataset1 : '2021',
data: data1.map(value => value.economia_acumulada? value.economia_acumulada : 0),
backgroundColor: '#255488',
},
data2?
{
label: dataset2? dataset2 : '2022',
data: data2.map(value => value.economia_acumulada? value.economia_acumulada : 0),
backgroundColor: '#C2D5FB',
} : null
],
}
return (
<ChartView>
{/* <RenderIf isTrue={single? true : false} >
<Bar
options={options}
data={graphData}
/>
</RenderIf> */}
<ChartTitle title={title} subtitle={subtitle} />
<Bar
options={options}
data={data}
/>
</ChartView>
)
}

9
src/components/graph/DemRegXDemConChart.tsx
View File

@ -80,9 +80,6 @@ export function DemRegXDemConChart({
data2,
label,
red,
dataset1,
dataset2,
dataset3,
barLabel
}: LineBarChartInterface) {
const chartRef = useRef<ChartJS>(null);
@ -126,13 +123,15 @@ export function DemRegXDemConChart({
'#f00' : '#0c9200',
borderWidth: 2,
fill: false,
data: data1.map(value => value.dem_cont),
borderDash: [5, 5],
data: data1?.map(value => value.dem_cont),
pointBorderColor: 'rgba(255, 145, 0, 0)',
},
{
type: 'bar' as const,
label: 'Demanda Registrada',
backgroundColor: '#255488',
data: data2.map(value => value.dem_reg),
data: data2?.map(value => value.dem_reg),
},
],
};

20
src/components/graph/DiscretizedConsumptionChart.tsx
View File

@ -48,7 +48,7 @@ export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label,
sum += data;
});
const percentage = (dataProps[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%";
const result = `${parseFloat(value).toFixed(0)}\n ${percentage}`
const result = `${parseInt(value).toFixed(0)}\n ${percentage}`
return value==null? null : result
},
@ -81,6 +81,24 @@ export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label,
data: dataProps.map(value => value.consumo),
backgroundColor: '#255488'
},
{
type: 'line' as const,
label: 'base',
data: dataProps.map(value => 500),
borderColor: 'rgb(0, 0, 0)',
fill: false,
backgroundColor: 'rgb(0, 0, 0)' ,
pointBorderColor: 'rgba(255, 145, 0, 0)',
},
{
type: 'line' as const,
label: 'tolerância',
data: dataProps.map(value => 525),
borderColor: 'rgb(255, 0, 0)',
fill: false,
backgroundColor: 'rgb(255, 0, 0)' ,
pointBorderColor: 'rgba(255, 145, 0, 0)',
},
],
}

27
src/components/graph/DiscretizedConsumptionChartLine.tsx
View File

@ -32,18 +32,13 @@ interface ChartInterface {
title: string,
subtitle: string,
data1: any,
data2?: any,
data3?: any,
data4?: any,
label: any,
dataset1?: string,
dataset2?: string,
dataset3?: string,
dataset4?: string,
barLabel?: boolean | undefined
}
export default function DiscretizedConsumptionChartLine({ title, subtitle, data1, data2, data3, data4, label, dataset1, dataset2, dataset3, dataset4, barLabel }: ChartInterface) {
export default function DiscretizedConsumptionChartLine({ title, subtitle, data1, label, dataset1, barLabel }: ChartInterface) {
const options: any = {
responsive: true,
plugins: {
@ -71,7 +66,7 @@ export default function DiscretizedConsumptionChartLine({ title, subtitle, data1
const labels = label;
const data = {
labels,
labels: labels.map((value, index) => `${value} - ${data1[index].day_formatted}`),
datasets: [
{
label: dataset1,
@ -79,6 +74,22 @@ export default function DiscretizedConsumptionChartLine({ title, subtitle, data1
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0)',
},
{
label: 'base',
data: data1.map(value => 500),
borderColor: 'rgb(0, 0, 0)',
fill: false,
backgroundColor: 'rgba(255, 145, 0, 0)' ,
pointBorderColor: 'rgba(255, 145, 0, 0)',
},
{
label: 'tolerância',
data: data1.map(value => 525),
borderColor: 'rgb(255, 0, 0)',
fill: false,
backgroundColor: 'rgba(255, 145, 0, 0)' ,
pointBorderColor: 'rgba(255, 145, 0, 0)',
},
],
}

7
src/components/graph/LineBarChart.tsx
View File

@ -84,6 +84,13 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
const options: any = {
responsive: true,
scales: {
x: {
grid: {
display: false
}
},
},
plugins: {
datalabels: {
display: true,

16
src/components/graph/LineBarChart2.tsx
View File

@ -71,17 +71,23 @@ interface LineBarChartInterface {
dataset3?: string,
barLabel?: boolean | undefined,
hashurado?: boolean | undefined,
miniature?: boolean | undefined,
}
export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3, barLabel, hashurado }: LineBarChartInterface) {
export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3, barLabel, hashurado, miniature }: LineBarChartInterface) {
const chartRef = useRef<ChartJS>(null);
const currentTime = new Date();
const labels = label
const options: any = {
responsive: true,
scales: {
x: {
grid: {
display: false
}
},
},
plugins: {
datalabels: {
display: true,
@ -91,7 +97,7 @@ export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red
offset: -20,
align: "start",
font: {
size: 12
size: !miniature? 15 : 10
},
formatter: (value, ctx) => {
let sum = 0;
@ -99,7 +105,7 @@ export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red
dataArr.map(data => {
sum += data;
});
const result = `${parseFloat(value).toLocaleString('pt-br')}`
const result = `${parseInt(value).toLocaleString('pt-br')}`
return value==null? null : result
}

7
src/components/graph/LineChart.tsx
View File

@ -46,6 +46,13 @@ interface ChartInterface {
export default function LineChart({ title, subtitle, data1, data2, data3, data4, label, dataset1, dataset2, dataset3, dataset4, barLabel }: ChartInterface) {
const options: any = {
responsive: true,
scales: {
x: {
grid: {
display: false
}
},
},
plugins: {
datalabels: {
display: true,

20
src/components/graph/SingleBar.tsx
View File

@ -24,12 +24,19 @@ interface SingleBarInterface{
label: Array<string>,
dataset: string,
barLabel?: boolean | undefined,
brutoAnual?: boolean | undefined,
miniature?: boolean | undefined,
}
export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel, brutoAnual }: SingleBarInterface) {
export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel, miniature }: SingleBarInterface) {
const options: object = {
responsive: true,
scales: {
x: {
grid: {
display: false
}
},
},
series: {
downsample: {
threshold: 1000
@ -44,7 +51,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel
sum += data;
});
const percentage = (dataProps[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%";
const result = `${parseFloat(value).toLocaleString('pt-br')}\n ${percentage}`
const result = ` ${parseInt(value).toLocaleString('pt-br')}\n ${percentage}`
return value==null? null : result
},
@ -54,11 +61,16 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel
offset: -40,
align: "start",
font: {
size: 12
size: !miniature? 15 : 10
}
},
legend: {
position: 'bottom' as const,
labels: {
font: {
size: 16
}
}
},
title: {
display: false,

3
src/components/graph/fatorPotenciaChart.tsx
View File

@ -83,7 +83,10 @@ export default function FatorPotenciaChart({ title, subtitle, data1, data2, labe
label: dataset2? dataset2 : '',
data: data2.map(value => value.f_ref),
borderColor: 'rgb(0, 0, 0)' ,
fill: false,
borderDash: [5, 5],
backgroundColor: 'rgba(255, 145, 0, 0)' ,
pointBorderColor: 'rgba(255, 145, 0, 0)',
},
],
}

12
src/components/header/Header.tsx
View File

@ -13,13 +13,18 @@ interface headerInterface {
name: string,
admin?: boolean | undefined
logo?: string
children?: React.ReactNode
}
export default function Header({name, admin}: headerInterface) {
export default function Header({name, admin, children}: headerInterface) {
const { ['user-profile_picture']: profile_picture } = parseCookies()
return (
<HeaderView>
<section>
{children}
</section>
<section>
<div className='icon' >
<p>
olá, {name}
@ -27,10 +32,11 @@ export default function Header({name, admin}: headerInterface) {
</div>
{
!admin && profile_picture?
<Image src={profile_picture} height={50} width={75}/>
<Image src={profile_picture} height={100} width={108}/>
:
<Image src='https://kluppdevelopment.s3.sa-east-1.amazonaws.com/avatars/zcgw6O0FxZgxRmIs97WMcUddKurQJcIqSxBLStSc.png' height={50} width={75}/>
<Image src='https://kluppdevelopment.s3.sa-east-1.amazonaws.com/avatars/zcgw6O0FxZgxRmIs97WMcUddKurQJcIqSxBLStSc.png' height={75} width={108}/>
}
</section>
</HeaderView>
)
}

14
src/components/header/HeaderView.ts
View File

@ -2,7 +2,7 @@ import styled from "styled-components";
export const HeaderView = styled.header`
display: flex;
justify-content: flex-end;
justify-content: space-between;
width: 100%;
@ -29,4 +29,16 @@ export const HeaderView = styled.header`
white-space: nowrap;
}
}
section {
display: flex;
align-items: center;
justify-content: center;
:first-child {
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
}
}
`

10
src/components/sidebar/Sidebar.tsx
View File

@ -49,7 +49,9 @@ export default function Sidebar() {
useEffect(() => {
api.post('/notify').then(res => {
setNotificationsCount(res.data)
}).catch(res => console.log(res))
}).catch(res => {
// console.log(res)
})
}, [])
return (
@ -94,10 +96,10 @@ export default function Sidebar() {
<RenderIf isTrue={role === '2'}>
<SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
<div className='hamburger' onClick={() => setViewModal(!viewModal)} >
<Image src='/assets/hamburgerModal.svg' width={60} height={60} />
<Image src='/assets/hamburgerModal.svg' width={55} height={55} />
</div>
<div className='imageNext'>
<Image src='/assets/logo.svg' width={100} height={100} />
<Image src='/assets/logo.svg' width={150} height={150} />
</div>
<ul>
<Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
@ -105,7 +107,7 @@ export default function Sidebar() {
<div className='economiaDrawer drawer' >
<Link href='/grossSavings'><li className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta Anual</li></Link>
<Link href='/accumulatedSavings'><li className={router.pathname=='/accumulatedSavings'? 'actualPathDrawer' : null}>Economia Bruta Mensal</li></Link>
<Link href='/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Cativo x Livre mensal</li></Link>
<Link href='/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Cativo x Livre Mensal</li></Link>
<Link href='/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R$/MWh</li></Link>
</div>
<Link href='/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>

9
src/pages/_app.tsx
View File

@ -24,11 +24,8 @@ export function MyApp({ Component, pageProps, notificationsCount }: AppProps | a
const router = useRouter()
const rota = router.pathname
console.log('notifications: ', notificationsCount)
useEffect(() => {
const handleStart = (url) => {
console.log(`Loading: ${url}`)
NProgress.start()
}
const handleStop = () => {
@ -80,8 +77,10 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
let notificationsCount
await apiClient.post('/download').then(res => {
console.log(res)
}).catch(res => console.log(res))
// console.log(res)
}).catch(res => {
// console.log(res)
})
if (!token) {
return {

4
src/pages/aboutUs/index.tsx
View File

@ -15,7 +15,7 @@ export default function aboutUs({userName, text}) {
<title>Smart Energia - About Us</title>
</Head>
{/* <Header name={userName}/> */}
<Header name={userName}/>
<Banner title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia' imgSource='/assets/banners/aboutUsBanner.png' />
<section dangerouslySetInnerHTML={{__html: text[0].about}}/>
@ -42,7 +42,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
await apiClient.get('/aboutUs').then(res => {
text = res.data.data
}).catch(res => {
console.log(res)
// console.log(res)
})
if (!token) {

36
src/pages/accumulatedSavings/index.tsx
View File

@ -3,27 +3,45 @@ import Head from 'next/head'
import { parseCookies } from 'nookies'
import React from 'react'
import Chart from '../../components/graph/Chart'
import { SingleBar } from '../../components/graph/SingleBar'
import Chart2 from '../../components/graph/Chart2'
import Header from '../../components/header/Header'
import PageTitle from '../../components/pageTitle/PageTitle'
import { EconomiaAcumulada } from '../../services/economiaAcumulada'
import { dataEconomiaBruta } from '../../services/economiaBruta'
import getAPIClient from '../../services/ssrApi'
import { AccumulatedSavingsView } from '../../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView'
export default function AccumulatedSavings({graphData, years, userName}: any) {
const months = [
'Jan',
'Fev',
'Mar',
'Abr',
'Mai',
'Jun',
'Jul',
'Ago',
'Set',
'Out',
'Nov',
'Dez'
]
return (
<AccumulatedSavingsView>
<Head>
<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' />
<Header name={userName}>
<PageTitle title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ mil' />
</Header>
<section>
<SingleBar title='' subtitle='' dataset='Consolidada'
<Chart2 title='' subtitle=''
data1={graphData.filter((value, index) => value.mes.slice(3, 8).includes('2021'))}
data2={graphData.filter((value, index) => value.mes.slice(3, 8).includes('2022'))}
label={months}/>
{/* <SingleBar title='' subtitle='' dataset='Consolidada'
dataProps={graphData}
label={years} barLabel/>
label={years} barLabel/> */}
</section>
</AccumulatedSavingsView>
)
@ -40,7 +58,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
graphData = res.data.data
// console.log(graphData[0].mes)
}).catch(res => {
console.log(res)
// console.log(res)
})
const years = graphData.map((value) => value.mes)

13
src/pages/administrative/general.tsx
View File

@ -26,14 +26,6 @@ export default function index({userName, initialText}: any) {
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
const [openSnackError, setOpenSnackError] = useState<boolean>(false)
console.log(initialText)
const log = () => {
if (editorRef.current) {
console.log(editorRef.current.getContent());
}
};
const handleChange = (event: SelectChangeEvent) => {
setText(event.target.value);
};
@ -95,7 +87,6 @@ export default function index({userName, initialText}: any) {
<br />
<Editor
onInit={(evt, editor) => editorRef.current = editor}
onChange={value => console.log(value)}
onEditorChange={(newText) => setText(newText)}
initialValue={initialText[0].about}
init={{
@ -127,9 +118,9 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
await apiClient.get('/aboutUs').then(res => {
initialText = res.data.data
console.log(res.data.data)
// console.log(res.data.data)
}).catch(res => {
console.log(res)
// console.log(res)
})
if (!token) {

23
src/pages/administrative/industryInfo/index.tsx
View File

@ -1,7 +1,7 @@
import { GetServerSideProps } from 'next'
import Head from 'next/head'
import { parseCookies } from 'nookies'
import React, { useState } from 'react'
import React, { useEffect, useState } from 'react'
import BasicButton from '../../../components/buttons/basicButton/BasicButton'
import Header from '../../../components/header/Header'
import PageTitle from '../../../components/pageTitle/PageTitle'
@ -19,13 +19,13 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});
export default function industryInfo({userName}: any) {
export default function industryInfo({userName, pdfUrl}: any) {
const formData = new FormData();
const [pdf, setPdf] = useState<any>();
function onChange(e) {
console.log(e.target.files)
setPdf(e.target.files[0])
console.log(pdf)
}
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
@ -76,6 +76,12 @@ export default function industryInfo({userName}: any) {
<BasicButton onClick={() => handleCreateClient()} title='Atualizar'/>
{/* <PDFViewer
document={{
url: pdfUrl,
}}
/> */}
</IndustryInfoView>
)
}
@ -84,6 +90,14 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let pdfUrl=[]
api.get('/download').then(res => {
pdfUrl = res.data.path
}).catch(res => {
// console.log()
})
if (!token) {
return {
redirect: {
@ -95,7 +109,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
userName
userName,
pdfUrl
}
}
}

5
src/pages/administrative/notification/index.tsx
View File

@ -105,7 +105,10 @@ export default function notification({clients, notifications, userName}: any) {
title,
body,
users
}).then(res => setOpenSnackSuccess(true)).catch(res => setOpenSnackError(true))
}).then(res => {
setOpenSnackSuccess(true)
window.location.reload()
}).catch(res => setOpenSnackError(true))
}
async function handleDeleteNotification(id: any) {
await id.map((value) => {

73
src/pages/chartTelemetry/index.tsx
View File

@ -26,6 +26,7 @@ import { DiscretizedConsumptionChart } from '../../components/graph/DiscretizedC
import DiscretizedConsumptionChartLine from '../../components/graph/DiscretizedConsumptionChartLine'
import router, { useRouter } from 'next/router'
import { DemRegXDemConChart } from '../../components/graph/DemRegXDemConChart'
import RenderIf from '../../utils/renderIf'
const style = {
display: 'flex',
@ -65,16 +66,17 @@ export default function chartTelemetry({userName}) {
const {startDate, endDate, unity, discretization} = router.query
async function getChartsData() {
console.log(router.query)
await api.post('/telemetry/powerFactor', {
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": unity},
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
{"type" : "between", "field": "dia_num", "value": ["2022-04-01", "2022-04-28"]}
]
}).then(res => {
console.log(res.data.data)
setFatorPotenciaData(res.data.data)
}).catch(res => {
console.log(res)
// console.log(res)
router.push('/telemetria')
})
await api.post('/telemetry/discretization', {
@ -86,7 +88,8 @@ export default function chartTelemetry({userName}) {
}).then(res => {
setDiscretizedConsumptionDataReativa(res.data.data)
}).catch(res => {
console.log(res)
// console.log(res)
router.push('/telemetria')
})
await api.post('/telemetry/discretization', {
@ -98,7 +101,8 @@ export default function chartTelemetry({userName}) {
}).then(res => {
setDiscretizedConsumptionData(res.data.data)
}).catch(res => {
console.log(res)
// console.log(res)
router.push('/telemetria')
})
await api.post('/telemetry/demand', {
@ -109,13 +113,13 @@ export default function chartTelemetry({userName}) {
}).then(res => {
setDemRegXDemCon(res.data.data)
}).catch(res => {
console.log(res)
// console.log(res)
router.push('/telemetria')
})
}
useEffect(() => {
getChartsData()
console.log(fatorPotenciaData)
}, [])
return (
@ -137,27 +141,14 @@ export default function chartTelemetry({userName}) {
</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>
<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))} />
} subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada'
label={discretizedConsumptionDataReativa.map(data => parseFloat(data.reativa).toFixed(3))} />
</div>
<Modal
open={openConsumoDiscretizado1}
@ -178,6 +169,7 @@ export default function chartTelemetry({userName}) {
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
} subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
<p style={{alignSelf: 'center', textAlign: 'center'}}>{`Mês - ${startDate.toString().split('-')[2]}/${startDate.toString().split('-')[1]}/${startDate.toString().split('-')[0]}`}</p>
</div>
<Modal
open={openConsumoDiscretizado2}
@ -192,6 +184,7 @@ export default function chartTelemetry({userName}) {
} subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
</Box>
</Modal>
</RenderIf>
<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/>
@ -206,6 +199,22 @@ export default function chartTelemetry({userName}) {
<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>
<div onClick={() => setOpenFatorPotencia(true)}>
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => parseFloat(value.dia_num))} />
</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={fatorPotenciaData.map(value => parseFloat(value.dia_num))} />
</Box>
</Modal>
</>
}
</section>
@ -220,21 +229,6 @@ export const getServerSideProps: GetServerSideProps = async (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: {
@ -247,7 +241,6 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
userName,
fatorPotenciaChart
}
}
}

7
src/pages/costIndicator/index.tsx
View File

@ -30,14 +30,15 @@ export default function CostIndicator({graphData, userName}: any) {
<Head>
<title>Smart Energia - Indicador de Custos</title>
</Head>
<Header name={userName} />
<Header name={userName}>
<PageTitle title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'/>
</Header>
<section>
<Chart title='' subtitle=''
data1={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
// data1={graphData}
data2={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
label={graphData.map(value => value.mes.slice(0, 3))} barLabel />
label={months}/>
</section>
</CostIndicatorView>
)
@ -53,7 +54,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
await apiClient.post('/economy/MWh').then(res => {
graphData = res.data.data
}).catch(res => {
console.log(res)
// console.log(res)
})
if (!token) {

52
src/pages/dashboard/index.tsx
View File

@ -22,16 +22,33 @@ import recoverUserInformation from '../../services/auth'
import { parseCookies } from 'nookies'
import { GetServerSideProps } from 'next'
import getAPIClient from '../../services/ssrApi'
import Chart2 from '../../components/graph/Chart2'
export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName, costIndicator} : any) {
const months = [
'Jan',
'Fev',
'Mar',
'Abr',
'Mai',
'Jun',
'Jul',
'Ago',
'Set',
'Out',
'Nov',
'Dez'
]
return (
<DashboardView>
<Head>
<title>Smart Energia - Dashboard</title>
</Head>
<Header name={userName} />
<Header name={userName}>
<PageTitle title='Visão Geral' subtitle='Bem Vindo a Smart Energia' />
</Header>
<Link href='pld'>
<section className="cardsSection" >
<MapCard title='R$/MWh' subtitle='' date='período' statistic='' imgSource='/moneyIcon.svg' />
@ -44,25 +61,24 @@ 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$ mil)'>
<SingleBar title='' subtitle=''
dataset='Consolidada'
dataProps={grossAnualGraph}
label={grossAnualYears} barLabel/>
label={grossAnualYears} barLabel miniature/>
</GraphCard>
<GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada mensal - (Valores em R$)' singleBar>
<SingleBar title='' subtitle=''
dataset='Acumulada'
dataProps={grossMensalGraph}
label={grossMensalYears}
barLabel/>
<GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - (Valores em R$)' 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$/MWh)' singleBar>
<GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - (Valores em R$/MWh)' singleBar>
<LineBarChart2 data1={acumulatedGraph} data2={acumulatedGraph} data3={acumulatedGraph}
label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre'
title='' subtitle='' barLabel hashurado/>
title='' subtitle='' barLabel hashurado miniature/>
</GraphCard>
<GraphCard title='Indicador de Custo' subtitle='Valores em R$/ MWh'>
@ -70,7 +86,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
data1={costIndicator.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
// data1={graphData}
data2={costIndicator.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
label={costIndicator.map(value => value.mes.slice(0, 3))} barLabel />
label={costIndicator.map(value => value.mes.slice(0, 3))} miniature/>
</GraphCard>
</section>
</DashboardView>
@ -91,31 +107,31 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
await apiClient.post('/economy/grossAnnual').then(res => {
grossAnualGraph = res.data.data
}).catch(res => {
console.log(res)
// console.log(res)
})
await apiClient.post('/economy/grossMonthly').then(res => {
grossMensalGraph = res.data.data
}).catch(res => {
console.log(res)
// console.log(res)
})
await apiClient.post('/economy/estimates').then(res => {
acumulatedGraph = res.data.data
}).catch(res => {
console.log(res)
// console.log(res)
})
await apiClient.post('/economy/MWh').then(res => {
costIndicator = res.data.data
}).catch(res => {
console.log(res)
// console.log(res)
})
await apiClient.post('/pld/overview').then(res => {
mapsInfo = res.data.data
}).catch(res => {
console.log(res)
// console.log(res)
})
const grossMensalYears = grossMensalGraph.map((value) => value.mes)

8
src/pages/estimatedCost/index.tsx
View File

@ -18,8 +18,9 @@ export default function EstimatedCost({graphData, userName}: any) {
<Head>
<title>Smart Energia - Custos Estimados</title>
</Head>
<Header name={userName} />
<PageTitle title='Cativo x Livre mensal' subtitle='Comparativo de custo Estimado - Valores em R$' />
<Header name={userName}>
<PageTitle title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ mil' />
</Header>
<section>
<LineBarChart2 data1={graphData} data2={graphData} data3={graphData}
dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre'
@ -38,9 +39,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
await apiClient.post('/economy/estimates').then(res => {
graphData = res.data.data
console.log(graphData)
}).catch(res => {
console.log(res)
// console.log(res)
})
if (!token) {

5
src/pages/faq/index.tsx
View File

@ -16,10 +16,9 @@ export default function commonQuestions({faqData, userName}) {
<Head>
<title>Smart Energia - FAQ</title>
</Head>
<Header name={userName} />
<Header name={userName}>
<PageTitle title='Perguntas Frequentes' subtitle='Aqui estão algumas das perguntas que mais recebemos!' />
{/* <h1>Perguntas Frequentes</h1>
<p>Aqui estão algumas das perguntas que mais recebemos!</p> */}
</Header>
<section className='CommonQuestionsSection' >
{
faqData.map((value, index ) => {

8
src/pages/grossSavings/index.tsx
View File

@ -18,8 +18,9 @@ export default function GrossSavings({graphData, years, userName}: any) {
<Head>
<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' />
<Header name={userName}>
<PageTitle title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ mil' />
</Header>
<section>
<SingleBar title='' subtitle=''
dataset='Consolidada'
@ -43,12 +44,11 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
graphData = res.data.data
// console.log(graphData[0])
}).catch(res => {
console.log(res)
// console.log(res)
})
const years = graphData.map((value) => value.ano)
console.log(years)
if (!token) {
return {
redirect: {

13
src/pages/index.tsx
View File

@ -8,7 +8,7 @@ import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/router'
import React, { useContext, useState, useEffect,useCallback } from 'react'
import React, { useContext, useState, useEffect,useCallback, useRef } from 'react'
import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
import RenderIf from '../utils/renderIf';
import Snackbar from '@mui/material/Snackbar';
@ -30,10 +30,11 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
export default function Home() {
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
const [openSnackError, setOpenSnackError] = useState<boolean>(false);
const [openSnackSuccessDelete, setOpenSnackSuccessDelete] = useState<boolean>(false);
const [openSnackErrorDelete, setOpenSnackErrorDelete] = useState<boolean>(false);
const field = useRef(null)
const [state, setstate] = useState(false);
const [focus, setFocus] = useState('email');
const [values, setValues] = useState({
password: null,
@ -75,7 +76,7 @@ export default function Home() {
}
})
} catch (exception){
console.log(exception)
// console.log(exception)
}
}
}
@ -123,7 +124,7 @@ export default function Home() {
<TextField id="outlined-basic"
sx={{ m: 1, width: '90%' }} label="Login" value={email} variant="outlined"
sx={{ m: 1, width: '90%' }} label="Login" value={email} variant="outlined" onKeyDown={(e) => e.key==='Enter'? console.log(field.current.children[0].focus()) : null}
onChange={value => {
setEmail(value.target.value.toLowerCase())
}}/>
@ -134,6 +135,8 @@ export default function Home() {
type={values.showPassword ? 'text' : 'password'}
value={values.password}
onChange={handleChange('password')}
ref={field}
onKeyDown={(e) => e.key==='Enter'? handleSignIn() : null}
endAdornment={
<InputAdornment position="end">
<IconButton

10
src/pages/industryInfo/index.tsx
View File

@ -36,10 +36,8 @@ export default function industryInfo({userName}: any) {
function handleDownloadPdf() {
api.get('/download').then(res => {
window.open(res.data.path);
console.log(res.data);
setOpenSnackSuccess(true)
}).catch(res => {
console.log(res)
setOpenSnackError(true)
})
}
@ -59,11 +57,13 @@ export default function industryInfo({userName}: any) {
<Head>
<title>Smart Energia - Info de Setor</title>
</Head>
<Header name={userName} />
<div className='title'>
<Header name={userName}>
<PageTitle title='Info Setorial' subtitle='Clique em "Baixar PDF", para fazer download do PDF' />
</div>
</Header>
<button onClick={() => handleDownloadPdf()}>Baixar PDF</button>
<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>
</IndustryInfoView>
)
}

10
src/pages/news/index.tsx
View File

@ -13,18 +13,16 @@ import getAPIClient from '../../services/ssrApi';
import { Button, NewsView } from '../../styles/layouts/news/NewsView'
export default function aboutUs({userName, news}: any) {
console.log(news.channel.item)
return (
<NewsView>
<Head>
<title>Smart Energia - Noticias</title>
</Head>
{/* <Header name={userName} /> */}
<Banner title='Notícias' subtitle='Tudo de importante no setor de energia' imgSource='/assets/banners/news.png'/>
<Header name={userName} />
<Banner title='Notícias' subtitle='Tudo de importante no setor de energia' imgSource='/assets/banners/newsBanner.webp'/>
{
news.channel.item.map(data => {
news.map(data => {
return <>
<section>
@ -63,7 +61,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
await apiClient.get('/news').then(res => {
news = res.data.data
}).catch(res => {
console.log(res)
// console.log(res)
})
if (!token) {

8
src/pages/notifications/index.tsx
View File

@ -15,11 +15,12 @@ export default function Notifications({notificationData, userName}: any) {
<Head>
<title>Smart Energia - Notificações</title>
</Head>
<Header name={userName} />
<Header name={userName}>
<PageTitle title='Notificações' subtitle='Aqui estão as notificações publicadas para você!' />
</Header>
<section className='CommonQuestionsSection' >
{
notificationData?
notificationData.length!=0?
notificationData.map((value, index ) => {
return <>
<NotificationQuestionsCard key={index} title={value.title} body={value.body}/>
@ -42,10 +43,9 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
let notificationData = [];
await apiClient.get('/notification').then(res => {
console.log(res)
notificationData = res.data.data
}).catch(res => {
console.log(res)
// console.log(res)
})
if (!token) {

42
src/pages/pld/index.tsx
View File

@ -30,11 +30,12 @@ interface pldInterface {
clientMonth: any
}
export default function pld({tableData, graphByHourData, graphByMonthData, userName, clientMonth}: pldInterface) {
const router = useRouter()
const { region } = router.query
export default function pld({tableData, userName, clientMonth}: pldInterface) {
const dateFormated = new Date()
const [date, setDate] = useState('');
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 [page, setPage] = useState<string>('table')
const [day, setDay] = useState<string>(null)
@ -64,7 +65,9 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
"order": [{ "field": "day_calc", "direction": "asc" }]
}).then(res => {
setDataByDay(res.data.data)
}).catch(exception => console.log(exception))
}).catch(exception => {
console.log(exception)
})
}
function getDataByHour() {
@ -78,7 +81,9 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
"order": [{ "field": "hour", "direction": "asc" }]
}).then(res => {
setSul(res.data.data)
}).catch(exception => console.log(exception))
}).catch(exception => {
// console.log(exception)
})
api.post('/pld/schedule', {
"limit": 20,
@ -90,7 +95,9 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
"order": [{ "field": "hour", "direction": "asc" }]
}).then(res => {
setSudeste(res.data.data)
}).catch(exception => console.log(exception))
}).catch(exception => {
// console.log(exception)
})
api.post('/pld/schedule', {
"limit": 20,
@ -102,7 +109,9 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
"order": [{ "field": "hour", "direction": "asc" }]
}).then(res => {
setNorte(res.data.data)
}).catch(exception => console.log(exception))
}).catch(exception => {
// console.log(exception)
})
api.post('/pld/schedule', {
"limit": 20,
@ -114,7 +123,9 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
"order": [{ "field": "hour", "direction": "asc" }]
}).then(res => {
setNordeste(res.data.data)
}).catch(exception => console.log(exception))
}).catch(exception => {
// console.log(exception)
})
}
function handleColorNorte(value, region) {
@ -128,8 +139,6 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
return 'dullRed'
}
const dateFormated = new Date()
function downloadCSVFile(csv, filename) {
const csv_file = new Blob(["\ufeff",csv], {type: "text/csv"});
@ -166,7 +175,6 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
useEffect(() => {
getDataByHour()
getDataByDay()
console.log(dataByDay)
}, [date, day, select])
return (
@ -176,10 +184,11 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
<Head>
<title>Smart Energia - PLD</title>
</Head>
<Header name={userName} />
<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=''/>
</Header>
<PldTableView>
<table className="tg">
<thead>
@ -200,7 +209,7 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
return 0
}).map(data => {
return <>
<tr>
<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>
@ -331,7 +340,6 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
<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)}/>
{/* <BasicButton title='Download (csv)' onClick={() => console.log()}/> */}
</section>
<LineChart data1={nordeste} data2={norte} data3={sudeste} data4={sul}
dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL'
@ -354,7 +362,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
await apiClient.post('/pld/list').then(res => {
tableData = res.data
}).catch(res => {
console.log(res)
// console.log(res)
})
await apiClient.post('/pld', {
@ -364,7 +372,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
}).then(res => {
clientMonth = res.data.data
}).catch(res => {
console.log(res)
// console.log(res)
})
if (!token) {

24
src/pages/resumoOperacao/index.tsx
View File

@ -37,7 +37,6 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
};
function downloadCSVFile(csv, filename) {
const csv_file = new Blob(["\ufeff",csv], {type: "text/csv"});
const download_link = document.createElement("a");
download_link.download = filename;
@ -81,7 +80,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
).then(res => {
setTableDataState(res.data.data)
}).catch(res => {
console.log(res)
// console.log(res)
})
} else {
setTableDataState(tableData)
@ -93,8 +92,9 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
<Head>
<title>Smart Energia - Resumo de Operação</title>
</Head>
<Header name={userName} />
<Header name={userName}>
<PageTitle title='Resumo de Operações' subtitle='Operações detalhadas' />
</Header>
<h3>Filtrar por Unidade e/ou Mês</h3>
<div className='select'>
<FormControl fullWidth>
@ -106,7 +106,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
label="Unidade"
onChange={handleChangeUnidade}
>
<MenuItem key={1} value={''}>Nenhum</MenuItem>
<MenuItem key={1} value={''}>Todas</MenuItem>
{
clientsData.map((value) => {
return <MenuItem key={1} value={value.cod_smart_unidade}>{value.cod_smart_unidade}</MenuItem>
@ -124,7 +124,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
label="Month"
onChange={handleChangeMonth}
>
<MenuItem value={''}>Nenhum</MenuItem>
<MenuItem value={''}>Todos</MenuItem>
{
clientMonth.map((value) => {
return <MenuItem key={1} value={value.mes}>{monthLabels[parseFloat(value.mes.slice(3, 4))-1]}</MenuItem>
@ -139,10 +139,10 @@ 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'>Montante (MWh)</th>
<th className='tg-8oo6'>Contraparte</th>
<th className='tg-8oo6'>Preço(R$/MWh)</th>
<th className='tg-8oo6'>Montante (MWh)</th>
<th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
<th className='tg-8oo6'>Preço(R$/MWh)</th>
</tr>
</thead>
<tbody>
@ -153,10 +153,10 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
<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'>{parseFloat(value.montante_nf).toLocaleString('pt-br')}</td>
<td key={index} className='tg-gceh'>{value.contraparte}</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.montante_nf).toLocaleString('pt-br')}</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>
</tr>
</>
})
@ -188,7 +188,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
}).then(res => {
tableData = res.data.data
}).catch(res => {
console.log(res)
// console.log(res)
})
await apiClient.post('/operation', {
@ -198,7 +198,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
}).then(res => {
clientsData = res.data.data
}).catch(res => {
console.log(res)
// console.log(res)
})
await apiClient.post('/operation', {
@ -208,7 +208,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
}).then(res => {
clientMonth = res.data.data
}).catch(res => {
console.log(res)
// console.log(res)
})
if (!token) {

102
src/pages/telemetria/index.tsx
View File

@ -20,6 +20,8 @@ import { api } from '../../services/api';
import Snackbar from '@mui/material/Snackbar'
import MuiAlert, { AlertProps } from '@mui/material/Alert'
import getAPIClient from '../../services/ssrApi';
import router from 'next/router';
import { DemRegXDemConChart } from '../../components/graph/DemRegXDemConChart';
const style = {
position: 'absolute' as const,
@ -48,6 +50,7 @@ export default function Telemetria({userName, clients}: any) {
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
@ -58,6 +61,7 @@ export default function Telemetria({userName, clients}: any) {
setOpenSnackError(false)
setOpenSnackSuccess(false)
setOpenSnackFields(false)
}
function downloadCSVFile(csv, filename) {
@ -104,6 +108,8 @@ export default function Telemetria({userName, clients}: any) {
const [open, setOpen] = useState(false);
const [demRegXDemCon, setDemRegXDemCon] = useState(null);
async function getTableData() {
if (startDate!=='' && endDate!=='' && send)
setOpen(true)
@ -123,7 +129,42 @@ export default function Telemetria({userName, clients}: any) {
setSend(false)
setOpenSnackError(true)
setOpenSnackSuccess(false)
console.log(res)
})
}
function openSnackFieldError() {
setOpenSnackFields(true)
}
function handleVerifyFields() {
if (unity != '' && startDate != '' && endDate != '' && discretization != '') {
router.push({
pathname: '/chartTelemetry',
query: {
startDate,
endDate,
discretization,
unity
},
})
return true
} else {
setOpenSnackFields(true)
return false
}
}
async function getChartData() {
await api.post('/telemetry/demand', {
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": unity},
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
]
}).then(res => {
setDemRegXDemCon(res.data.data)
}).catch(res => {
// console.log(res)
router.push('/telemetria')
})
}
@ -131,6 +172,11 @@ export default function Telemetria({userName, clients}: any) {
setSend(false)
}, [startDate, endDate])
useEffect(() => {
if (send===true)
getChartData()
}, [send])
return(
<TelemetriaView>
@ -147,7 +193,7 @@ export default function Telemetria({userName, clients}: any) {
severity="success"
sx={{ width: '100%' }}
>
Dados coletados com sucesso com Sucesso!
Dados disponíveis para Visualização/Download!
</Alert>
</Snackbar>
<Snackbar
@ -164,6 +210,20 @@ export default function Telemetria({userName, clients}: any) {
</Alert>
</Snackbar>
<Snackbar
open={openSnackFields}
autoHideDuration={4000}
onClose={handleCloseSnack}
>
<Alert
onClose={handleCloseSnack}
severity="error"
sx={{ width: '100%' }}
>
Verifique os campos!
</Alert>
</Snackbar>
<Header name={userName} />
<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,
@ -186,11 +246,10 @@ export default function Telemetria({userName, clients}: any) {
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem>
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
{
clients.map((value) => {
return <MenuItem key={1} value={value.codigo_scde}>{value.codigo_scde}</MenuItem>
return <MenuItem key={1} value={value.codigo_scde}>{value.cod_smart_unidade}</MenuItem>
})
}
</Select>
@ -199,12 +258,14 @@ export default function Telemetria({userName, clients}: any) {
<div className='select'>
<p className='title' >Data inicial</p>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={startDate} onChange={(value) => setStartDate(value.target.value)} onSelect={value => console.log(value)}/>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={startDate}
onChange={(value) => setStartDate(value.target.value)} min="2021-01-01"/>
</div>
<div className='select'>
<p className='title' >Data final</p>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={endDate} onChange={(value) => setEndDate(value.target.value)}/>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={endDate}
onChange={(value) => setEndDate(value.target.value)} min="2021-01-01"/>
</div>
<div className='select'>
@ -232,7 +293,7 @@ export default function Telemetria({userName, clients}: any) {
<button className='sendButton' onClick={() => {
setSend(true)
getTableData()
}}>Enviar!</button>
}}>Selecionar!</button>
</section>
<RenderIf isTrue={startDate!=='' && endDate!=='' && tableData===null && exception === false && send}>
@ -283,30 +344,15 @@ export default function Telemetria({userName, clients}: any) {
</RenderIf>
<RenderIf isTrue={showChart}>
<LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data2} dataset1='Fator de Potencia' dataset2='Fator ref.' label={FatorPotencia.label1} />
<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>
<Link href={{
pathname: '/chartTelemetry',
query: {
startDate,
endDate,
discretization,
unity
},
}} >
<button>
<p>GRÁFICO</p>
<p>Gerar gráficos com os dados selecionados</p>
</button>
</Link>
<GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple onClick={() => {
<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={`CLIEQUE AQUI PARA BAIXAR OS DADOS EM FORMATO EXCEL DO PESÍODO SELECIONADO`} green onClick={() => {
const html = document.querySelector("table").outerHTML;
htmlToCSV(html, "telemetria.csv");
console.log('clicando')
}}/>
<GradientButton title='DADOS' description='hORÁRIOS DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} green />
</Buttons>
<p className='paragraph'>
<i>
@ -339,7 +385,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
}).then(res => {
clients = res.data.data
}).catch(res => {
console.log(res)
// console.log(res)
})
if (!token) {

3
src/services/auth.ts
View File

@ -59,7 +59,6 @@ export default async function recoverUserInformation(id) {
let user: UserObjectType
await api.get(`/user/${id}`).then(res => {
console.log(res)
user = {
name: res.data.user.name,
email: res.data.user.email,
@ -69,7 +68,7 @@ export default async function recoverUserInformation(id) {
profile_picture: res.data.user.profile_picture
}
}).catch(res => {
console.log(res)
// console.log(res)
})
return {

2
src/services/consumoEstimado.js
View File

@ -2,5 +2,5 @@ export const ConsumoEstimado = {
data: [245,202, 176, 150, 102, 138, 155, 177, 228, 161, 316, 335],
data1: [214, 167, 129, 114, 68, 99, 116, 129, 183, 93, 165, 164],
data2: [31, 35, 47, 37, 39, 39, 48, 45, 68, 151, 171],
label: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez']
label: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
}

8
src/styles/layouts/Telemetria/TelemetriaView.ts
View File

@ -18,7 +18,7 @@ export const TelemetriaView = styled.main`
left: 0;
width: 100%;
height: 100vh;
height: 100%;
z-index: 999;
}
@ -71,7 +71,7 @@ export const TelemetriaView = styled.main`
}
.sendButton {
width: 60px;
width: 100px;
height: 40px;
background:#254F7F;
@ -201,7 +201,6 @@ export const TelemetriaView = styled.main`
}
.paragraph {
color: #22d1f0;
text-align: center;
margin-top: 60px;
}
@ -256,7 +255,8 @@ export const Buttons = styled.div`
color: #FFFFFF;
:first-child {
:nth-child(2) {
font-size: 11px;
background: linear-gradient(200.86deg, #F48665 8.03%, #F48665 91.97%), #FFFFFF;
}

8
src/styles/layouts/aboutUs/AboutUsView.ts
View File

@ -3,14 +3,6 @@ import styled from "styled-components";
export const AboutUsView = styled.main`
width: 100%;
p {
font-family: 'Poppins';
font-style: normal;
font-weight: 300;
font-size: 80%;
line-height: 26px;
}
ul {
list-style: none;

7
src/styles/layouts/commonQuestions/FaqView.ts
View File

@ -34,13 +34,6 @@ export const FaqView = styled.main`
border: 1px solid #DDDDDD;
}
/* .modal{
display: flex;
justify-self: flex-end;
align-self: center;
margin-left: 100px;
} */
.btn2{
background: #254F7F;
border-radius: 8px;

1
src/styles/layouts/industryInfo/IndustryInfoView.ts
View File

@ -19,6 +19,7 @@ export const IndustryInfoView = styled.main`
font-family: 'Poppins';
font-size: 90%;
color: #FFFFFF;
margin-top: 30px;
}
form {

12
src/styles/layouts/pld/PldView.ts
View File

@ -3,6 +3,11 @@ import styled from "styled-components"
export const PldTableView = styled.main`
width: 100%;
.actual {
font-weight: bold!important;
background-color: red!important;
}
.tg{
border-collapse:collapse;
border-spacing:0;
@ -22,7 +27,6 @@ export const PldTableView = styled.main`
word-break:normal;
}
.tg th{
border-color:#DDDFE1;
border-style:solid;
@ -35,7 +39,6 @@ export const PldTableView = styled.main`
word-break:normal;
}
.tg .tg-8oo6{
color:#464a53;
font-size:13px;
text-align:center;
vertical-align:top;
@ -44,25 +47,22 @@ export const PldTableView = styled.main`
}
.tg .tg-uulg{
background-color:#efefef;
color:#abafb3;
font-size:14px;
text-align:center;
vertical-align:top
}
.tg .tg-gceh{
background-color:#efefef;
color:#6a707e;
font-size:14px;
text-align:center;
vertical-align:top
}
.tg .tg-0tzy{
color:#abafb3;
font-size:14px;
text-align:center;
vertical-align:top
}
.tg .tg-hq65{color:#6a707e;
.tg .tg-hq65{
font-size:14px;
text-align:center;
vertical-align:top

7
yarn.lock
View File

@ -1390,11 +1390,6 @@
version "2.11.5"
resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz"
"@react-pdf-viewer/core@^3.5.0":
version "3.5.0"
resolved "https://registry.yarnpkg.com/@react-pdf-viewer/core/-/core-3.5.0.tgz#bb18b87330bfd01d5c31980b820ef58dc1c50a19"
integrity sha512-fu9vi8lzpFtQQqu8XUzSzp5aQYD5YxmJQ0CxOuRrANU7z1kft+TbdyiDOpWoeX2VC0/oyclBxUwleVYv+g1f1w==
"@rushstack/eslint-patch@^1.1.3":
version "1.1.3"
resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz"
@ -1967,6 +1962,7 @@ chart.js@^3.7.1:
chartjs-plugin-datalabels@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.0.0.tgz#caacefb26803d968785071eab012dde8746c5939"
integrity sha512-WBsWihphzM0Y8fmQVm89+iy99mmgejmj5/jcsYqwxSioLRL/zqJ4Scv/eXq5ZqvG3TpojlGzZLeaOaSvDm7fwA==
chownr@^2.0.0:
version "2.0.0"
@ -3642,6 +3638,7 @@ node-releases@^2.0.3:
nookies@^2.5.2:
version "2.5.2"
resolved "https://registry.yarnpkg.com/nookies/-/nookies-2.5.2.tgz#cc55547efa982d013a21475bd0db0c02c1b35b27"
integrity sha512-x0TRSaosAEonNKyCrShoUaJ5rrT5KHRNZ5DwPCuizjgrnkpE5DRf3VL7AyyQin4htict92X1EQ7ejDbaHDVdYA==
dependencies:
cookie "^0.4.1"
set-cookie-parser "^2.4.6"