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

Merge branch 'dev' of https://gitlab.com/kluppsoftware/smart-energia-web into dev

Browse Source
This commit is contained in:
Ubuntu 2023-04-27 21:13:50 +00:00
commit c0b1a9723c
11 changed files with 1116 additions and 838 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/smart-energia-terms-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

230
src/components/administrativeTables/ClientsTable.tsx
View File

@ -10,16 +10,23 @@ import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';
import TableSortLabel from '@mui/material/TableSortLabel';
import { visuallyHidden } from '@mui/utils';
import React, { useState, useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import Image from 'next/image';
import Snackbar from '@mui/material/Snackbar';
import MuiAlert, { AlertProps } from '@mui/material/Alert';
import Snackbar from '@mui/material/Snackbar';
import Modal from '@mui/material/Modal';
import { FormControl, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material';
import FormData from 'form-data';
import { InputUploadView } from '../inputUploadImg/inputUploadView';
import { TableView, StyledStatus } from './TableView';
import { api } from '../../services/api';
import FaqButton1 from '../buttons/faqButton/FaqButton1';
import FaqButton2 from '../buttons/faqButton/FaqButton2';
import { StyledStatus, TableView } from './TableView';
const style = {
position: 'absolute' as const,
@ -100,19 +107,19 @@ const headCells: readonly HeadCell[] = [
},
{
id: 'name',
numeric: true,
numeric: false,
disablePadding: false,
label: 'name',
},
{
id: 'unity',
numeric: true,
numeric: false,
disablePadding: false,
label: 'unity',
},
{
id: 'status',
numeric: true,
numeric: false,
disablePadding: false,
label: 'status',
},
@ -180,9 +187,9 @@ interface ClientsTableInterface {
onChange: any
}
export default function ClientTable({clients, onChange}: ClientsTableInterface) {
export default function ClientTable({ clients, onChange }: ClientsTableInterface) {
const [order, setOrder] = useState<Order>('asc');
const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
const [orderBy, setOrderBy] = useState<keyof Data | string>('asc');
const [selected, setSelected] = useState<readonly string[]>([]);
const [page, setPage] = useState<number>(0);
const [dense, setDense] = useState<boolean>(false);
@ -195,13 +202,12 @@ export default function ClientTable({clients, onChange}: ClientsTableInterface)
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
const [cod_client, setCod_client] = useState()
const [units, setUnits] = useState([])
function getClientUnits(client_id: number) {
api.post('/units', {
"filters": [
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": client_id}
{ "type": "=", "field": "dados_cadastrais.cod_smart_cliente", "value": client_id }
],
"fields": ["unidade"],
"distinct": true
@ -276,6 +282,60 @@ export default function ClientTable({clients, onChange}: ClientsTableInterface)
const emptyRows =
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - clients.length) : 0;
const formData = new FormData()
const [clientEdit, setClientEdit] = useState<any>({})
const [logo, setLogo] = useState(false)
const [imageURLS, setImageURLs] = useState([])
const [images, setImages] = useState([] as any)
const [nivelAcess, setnivelAcess] = useState<any>(2);
const [openEditUserModal, setOpenEditUserModal] = useState<any>(false);
const [selectedClient, setSelectedClient] = useState<any>(2);
const [search, setSearch] = useState('')
useEffect(() => {
if (images.length < 1) return
const newImageUrls: any = []
images.forEach((image: any) =>
newImageUrls.push(URL.createObjectURL(image))
)
setImageURLs(newImageUrls)
}, [images])
function onImageChange(e: any) {
setImages([...e.target.files])
setLogo(e.target.files[0])
}
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
function handleUpdateClient({
name,
email,
password,
password_confirmation,
client_id
}, id) {
formData.append('name', name)
formData.append('email', email)
formData.append('password', password)
formData.append('password_confirmation', password_confirmation)
formData.append('client_id', client_id)
formData.append('profile_picture', logo)
formData.append('role', nivelAcess)
api.put(`/user/${id}`, formData)
.then((res) => {
setOpenSnackSuccess(true)
setOpenModalInativar(false)
// window.location.reload()
})
.catch((res) => {
setOpenSnackError(true)
})
}
return (
<TableView>
<Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
@ -283,6 +343,7 @@ export default function ClientTable({clients, onChange}: ClientsTableInterface)
Não foi possivel encontrar unidades do client!
</Alert>
</Snackbar>
<TextField onChange={(e) => setSearch(e.target.value)} placeholder='persquisar por nome:' />
<Paper sx={{ width: '100%', mb: 2 }}>
<TableContainer>
<Table
@ -300,6 +361,7 @@ export default function ClientTable({clients, onChange}: ClientsTableInterface)
/>
<TableBody>
{stableSort(clients, getComparator(order, orderBy))
.filter(client => client.name.toLowerCase().includes(search.toLowerCase()))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, index) => {
const isItemSelected = isSelected(row.id);
@ -332,12 +394,17 @@ export default function ClientTable({clients, onChange}: ClientsTableInterface)
>
Client - {row.client_id}
</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left" style={{cursor: 'pointer'}} onClick={() => {
<TableCell align="left" style={{ cursor: 'pointer' }} onClick={() => {
setOpenEditUserModal(true)
setSelectedClient(row)
setClientEdit(row)
}}>{row.name}</TableCell>
<TableCell align="left" style={{ cursor: 'pointer' }} onClick={() => {
setOpen(true)
getClientUnits(row.client_id)
setSelectedClient(row)
}}>clique aqui para ver as unidades</TableCell>
<TableCell align="left"><StyledStatus status={row.deleted_at? 'inativo' : 'ativo'}> {row.deleted_at? 'inativo' : 'ativo'}</StyledStatus></TableCell>
<TableCell align="left"><StyledStatus status={row.deleted_at ? 'inativo' : 'ativo'}> {row.deleted_at ? 'inativo' : 'ativo'}</StyledStatus></TableCell>
</TableRow>
);
})}
@ -363,6 +430,143 @@ export default function ClientTable({clients, onChange}: ClientsTableInterface)
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
<Modal
open={openEditUserModal}
onClose={() => setOpenEditUserModal(false)}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<h1>Editar Cliente - {selectedClient.name}</h1>
<Typography
sx={{ color: 'gray', fontSize: 12 }}
variant="h5"
gutterBottom
component="div"
>
Adicionar Cliente Smart Energia
</Typography>
<br />
<TextField
id="outlined-basic"
label="Nome"
sx={{ width: 350, ml: 5 }}
onChange={(value) => {
setClientEdit({
...clientEdit,
name: value.target.value
})
}}
variant="outlined"
/>
<TextField
id="outlined-basic"
label="E-mail/Usuário"
value={clientEdit.email}
sx={{ width: 350, ml: 8 }}
onChange={(value) => {
setClientEdit({
...clientEdit,
email: value.target.value.toLowerCase()
})
}}
variant="outlined"
/>
<TextField
id="outlined-basic"
label="Senha"
sx={{ width: 350, ml: 5, mt: 2 }}
onChange={(value) => {
setClientEdit({
...clientEdit,
password: value.target.value
})
}}
variant="outlined"
/>
<TextField
id="outlined-basic"
label="Confirma Senha"
sx={{ width: 350, ml: 8, mt: 2 }}
onChange={(value) => {
setClientEdit({
...clientEdit,
password_confirmation: value.target.value
})
}}
variant="outlined"
/>
<TextField
id="outlined-basic"
label="Codigo do Cliente Smart Energia"
sx={{ width: 350, ml: 5, mt: 2 }}
onChange={(value) => {
setClientEdit({
...clientEdit,
client_id: value.target.value
})
}}
variant="outlined"
/>
<InputUploadView>
<div className="imgContainer">
<article>
{imageURLS.map((imageSrc, index) => {
return <Image
src={imageSrc}
key={index}
width={30}
height={30}
className="image"
/>
})}
</article>
</div>
<div className="update">
<form action="">
<div>
<label htmlFor="arquivo">
{' '}
<p className="TitleButton"> Enviar foto de Perfil </p>{' '}
</label>
<input
type="file"
name="arquivo"
id="arquivo"
onChange={onImageChange}
/>
</div>
</form>
</div>
</InputUploadView>
<div className='select'>
<FormControl sx={{ width: 350, ml: 5, mt: 2 }}>
<InputLabel id="demo-select-small">Nivel de acesso</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={nivelAcess}
label="Unidade"
onChange={value => setnivelAcess(value.target.value)}
fullWidth
>
<MenuItem value={1}>Administrador</MenuItem>
<MenuItem value={2}>Cliente</MenuItem>
</Select>
</FormControl>
</div>
<FaqButton1 title="Cancelar" onClick={() => setOpenEditUserModal(false)} />
<FaqButton2
title="Salvar"
onClick={() => handleUpdateClient(clientEdit, selectedClient.id)}
/>
</Box>
</Modal>
<Modal
open={open}
onClose={handleClose}

28
src/components/graph/costIndicatorChart/index.tsx
View File

@ -1,21 +1,20 @@
import React from 'react'
import { draw } from 'patternomaly'
import { draw } from 'patternomaly';
import { Bar } from 'react-chartjs-2';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
CategoryScale,
Chart as ChartJS,
Legend,
LinearScale,
Title,
Tooltip,
Legend
} from 'chart.js'
Tooltip
} from 'chart.js';
import { Bar } from 'react-chartjs-2';
import { CostIndicatorChartView } from './CostIndicatorChartView';
import ChartTitle from '../ChartTitle';
import { config } from '../config';
import { CostIndicatorChartView } from './CostIndicatorChartView';
ChartJS.register(
CategoryScale,
@ -34,19 +33,22 @@ interface ChartInterface {
single?: any
label: any,
miniature?: boolean | undefined
years?: string[]
}
export default function CostIndicatorChart({ title, data1, data2, label, subtitle, miniature }: ChartInterface) {
export default function CostIndicatorChart({ title, data1, data2, label, subtitle, miniature, years }: ChartInterface) {
const labels = label;
const options: any = config(miniature)
console.log(new Date().getFullYear())
const data = {
labels,
datasets: [
{
label: '2021',
label: years[0],
data: data1?.map(value => value),
skipNull: data2?.map(value => value)?.includes(null),
borderRadius: 8,
@ -64,7 +66,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
},
},
{
label: '2022',
label: years[1],
data: data2?.map(value => value),
skipNull: data1?.map(value => value)?.includes(null),
borderRadius: 8,

38
src/components/graph/grossAnualChart/GrossAnualChart.tsx
View File

@ -1,12 +1,11 @@
import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { draw } from 'patternomaly'
import React, { useEffect } from 'react';
import { Chart } from 'react-chartjs-2';
import 'chartjs-plugin-style';
import { draw } from 'patternomaly';
import { Chart } from 'react-chartjs-2';
import { GrossAnualChartView } from './GrossAnualChartView';
import ChartTitle from '../ChartTitle';
import { GrossAnualChartView } from './GrossAnualChartView';
ChartJS.register(
CategoryScale,
@ -18,7 +17,7 @@ ChartJS.register(
ChartDataLabels,
);
interface SingleBarInterface{
interface SingleBarInterface {
title: string,
subtitle: string,
dataProps: any,
@ -29,9 +28,9 @@ interface SingleBarInterface{
bruta?: boolean | undefined
}
export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset, barLabel, miniature, bruta }: SingleBarInterface) {
export function GrossAnualChart({ title, subtitle, dataProps = [], label, dataset, barLabel, miniature, bruta }: SingleBarInterface) {
function spacement(string) {
const spaces = string.length===1?'' : string.length===2? '' : string.length===3? ' ' : string.length===4? ' ' : string.length===5? ' ' : ''
const spaces = string.length === 1 ? '' : string.length === 2 ? '' : string.length === 3 ? ' ' : string.length === 4 ? ' ' : string.length === 5 ? ' ' : ''
return spaces
}
@ -46,20 +45,20 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
},
ticks: {
font: {
size: !miniature? window.innerWidth/90 : window.innerWidth/125
size: !miniature ? window.innerWidth / 90 : window.innerWidth / 125
}
},
},
y: {
stacked: false,
max: Number.parseInt(dataProps.reduce((prev, current) => prev.economia_acumulada < current.economia_acumulada ? prev.economia_acumulada : current.economia_acumulada,0)) + 350,
max: Number.parseInt(dataProps.reduce((prev, current) => prev.economia_acumulada < current.economia_acumulada ? prev.economia_acumulada : current.economia_acumulada, 0)) + 350,
min: 0,
grid: {
display: false
},
ticks: {
font: {
size: !miniature? window.innerWidth/90 : window.innerWidth/125
size: !miniature ? window.innerWidth / 90 : window.innerWidth / 125
}
},
},
@ -80,20 +79,20 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
dataArr.map(data => {
sum += data;
});
const percentage = (dataProps[ctx.dataIndex]?.econ_percentual*100).toFixed(0)+"%";
const percentage = (dataProps[ctx.dataIndex]?.econ_percentual * 100).toFixed(0) + "%";
const result = `${spacement(parseInt(value).toLocaleString('pt-br'))}${percentage}\n${parseInt(value).toLocaleString('pt-br')}${spacement(parseInt(value).toLocaleString('pt-br'))}`
return value==null? null : result
return value == null ? null : result
},
display: true,
anchor: "end",
align: "end",
font: {
weight: 'bold',
size: !miniature? window.innerWidth/80 : window.innerWidth/125,
size: !miniature ? window.innerWidth / 80 : window.innerWidth / 125,
},
color: (value) => {
return value.dataset.label==='Consolidada'? '#fff' : '#255488'
return value.dataset.label === 'Consolidada' ? '#fff' : '#255488'
},
},
legend: {
@ -106,7 +105,7 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
},
};
const labels: string[] = label.filter(function(item, pos) {
const labels: string[] = label.filter((item, pos) => {
return label.indexOf(item) == pos;
});
@ -141,11 +140,8 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
return 0
})
},
data: [null].concat(dataProps.filter(value => value.dad_estimado === true).map((value, index) => {
if (value.dad_estimado)
return parseFloat(value.economia_acumulada)
else
return 0
data: [].concat(dataProps.filter(value => value.dad_estimado === true).slice(0, 7).map((value, index) => {
return parseFloat(value?.economia_acumulada)
})),
borderRadius: 10,
backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
@ -156,7 +152,7 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
return (
<GrossAnualChartView>
<ChartTitle title={title} subtitle={subtitle} />
<Chart options={options} data={data} type='bar' height={150}/>
<Chart options={options} data={data} type='bar' height={150} />
</GrossAnualChartView>
)
}

145
src/components/graph/grossMensalChart/GrossMensalChart.tsx
View File

@ -1,65 +1,120 @@
import React, { useEffect, useState } from 'react'
import { useEffect, useState } from 'react'
import { Bar, Line, Chart as ChartJs } from 'react-chartjs-2';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title,
Tooltip
} from 'chart.js'
import { Chart as ChartJs } from 'react-chartjs-2'
import document from 'next/document';
import { draw, generate } from 'patternomaly'
import { draw } from 'patternomaly'
import { GrossMensalChartView } from './GrossMensalChartView';
import ChartTitle from '../ChartTitle';
import { config } from '../config';
import ChartTitle from '../ChartTitle'
import { GrossMensalChartView } from './GrossMensalChartView'
// import { data } from './LineBarChart';
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
)
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
interface ChartInterface {
title: string,
subtitle: string,
title: string
subtitle: string
data1: any,
data2: any,
data1: any
data2: any
single?: any
label: any,
label: any
miniature?: boolean | undefined
}
export default function GrossMensalChart({ title, data1, data2, label, subtitle, miniature }: ChartInterface) {
function spacement(string) {
const spaces = string.length===1?'' : string.length===2? '' : string.length===3? ' ' : string.length===4? ' ' : string.length===5? ' ' : ''
return spaces
}
export default function GrossMensalChart({
title,
data1,
data2,
label,
subtitle,
miniature
}: ChartInterface) {
const [lastDataS, setLastData] = useState('')
useEffect(() => {
let lastData = '0'
let index=0
let index = 0
while (index < data1.length) {
data1[index].dad_estimado? lastData=data1[index].economia_acumulada : null
data1[index].dad_estimado
? (lastData = data1[index].economia_acumulada)
: null
index++
setLastData(`economia acumulada: R$ ${parseFloat(lastData).toLocaleString('pt-br', {minimumFractionDigits: 2})}`)
setLastData(
`economia acumulada: R$ ${parseFloat(lastData).toLocaleString('pt-br', {
minimumFractionDigits: 2
})}`
)
}
}, [data1])
const options: any = config(miniature)
const options: any = {
responsive: true,
scales: {
x: {
stacked: true,
grid: {
display: false
},
ticks: {
font: {
size: !miniature ? window.innerWidth / 90 : window.innerWidth / 125
}
}
},
y: {
stacked: true,
grid: {
display: false
},
ticks: {
font: {
size: !miniature ? window.innerWidth / 90 : window.innerWidth / 125
}
}
}
},
plugins: {
datalabels: {
display: true,
color: '#255488',
formatter: (value, ctx) => {
let sum = 0
const dataArr = ctx.chart.data.datasets[0].data
const percentage =
(data1[ctx?.dataIndex]?.econ_percentual * 100).toFixed(0) + '%'
console.log(percentage)
dataArr.map((data) => {
sum += data
})
const result = `${percentage}\n${parseFloat(
parseFloat(value).toLocaleString('pt-br')
)}`
return value == null ? null : result
},
anchor: 'end',
align: 'end',
font: {
weight: 'bold',
size: !miniature ? window.innerWidth / 80 : window.innerWidth / 125
}
},
legend: {
position: 'bottom' as const
},
title: {
display: true,
text: ''
}
}
}
const data: any = {
labels: label,
@ -67,7 +122,9 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
{
type: 'bar',
label: 'Consolidado',
data: data1.map(value => !value.dad_estimado? value?.economia_acumulada : null),
data: data1.map((value) =>
!value.dad_estimado ? value?.economia_acumulada : null
),
skipNull: true,
borderRadius: 8,
backgroundColor: '#255488',
@ -76,21 +133,21 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
{
type: 'bar',
label: 'Estimado',
data: data2.map(value => value.dad_estimado? value?.economia_acumulada : null),
data: data2.map((value) =>
value.dad_estimado ? value?.economia_acumulada : null
),
skipNull: true,
borderRadius: 8,
backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
stack: '0'
},
],
}
]
}
return (
<GrossMensalChartView>
<ChartTitle title={title} subtitle={subtitle} />
<ChartJs
options={options}
data={data} type={'bar'} height={'156'}/>
<ChartJs options={options} data={data} type={'bar'} height={'156'} />
</GrossMensalChartView>
)
}

39
src/pages/administrative/clients/index.tsx
View File

@ -1,29 +1,29 @@
import MuiAlert, { AlertProps } from '@mui/material/Alert'
import Box from '@mui/material/Box'
import Modal from '@mui/material/Modal'
import Snackbar from '@mui/material/Snackbar'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import React, { useState, useEffect } from 'react'
import Image from 'next/image'
import Snackbar from '@mui/material/Snackbar'
import MuiAlert, { AlertProps } from '@mui/material/Alert'
import React, { useEffect, useState } from 'react'
import ClientsTable from '../../../components/administrativeTables/ClientsTable'
import BasicButton from '../../../components/buttons/basicButton/BasicButton'
import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1'
import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2'
import Header from '../../../components/header/Header'
import { ClientsView } from '../../../styles/layouts/clients/ClientsView'
import PageTitle from '../../../components/pageTitle/PageTitle'
import ConfirmModal from '../../../components/modal/ConfirmModal'
import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView'
import { api } from '../../../services/api'
import { parseCookies } from 'nookies'
import { GetServerSideProps } from 'next'
import { parseCookies } from 'nookies'
import ConfirmModal from '../../../components/modal/ConfirmModal'
import PageTitle from '../../../components/pageTitle/PageTitle'
import { api } from '../../../services/api'
import getAPIClient from '../../../services/ssrApi'
import { ClientsView } from '../../../styles/layouts/clients/ClientsView'
import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView'
import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'
import FormData from 'form-data'
import { InputUploadView } from '../../../components/inputUploadImg/inputUploadView'
import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'
const style = {
position: 'absolute' as const,
@ -70,6 +70,7 @@ export default function clients({ clients, userName }) {
const [nivelAcess, setnivelAcess] = useState<any>(2);
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
const [openSnackError, setOpenSnackError] = useState<boolean>(false)
const [openSnackWarning, setOpenSnackWarning] = useState<boolean>(false)
const [openSnackSuccessDelete, setOpenSnackSuccessDelete] =
useState<boolean>(false)
const [openSnackErrorDelete, setOpenSnackErrorDelete] =
@ -114,6 +115,9 @@ export default function clients({ clients, userName }) {
formData.append('profile_picture', logo)
formData.append('role', nivelAcess)
if (!name.length || !email.length || !password.length || !password_confirmation.length || !client_id.length || !logo || !nivelAcess.length)
setOpenSnackWarning(true)
api.post('/user', formData)
.then((res) => {
setOpenSnackSuccess(true)
@ -152,6 +156,7 @@ export default function clients({ clients, userName }) {
setLogo(e.target.files[0])
}
return (
<div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
<Snackbar
@ -180,6 +185,19 @@ export default function clients({ clients, userName }) {
Cliente não cadastrado!
</Alert>
</Snackbar>
<Snackbar
open={openSnackWarning}
autoHideDuration={4000}
onClose={handleCloseSnack}
>
<Alert
onClose={handleCloseSnack}
severity="warning"
sx={{ width: '100%' }}
>
Preencha todos os campos!
</Alert>
</Snackbar>
<Snackbar
open={openSnackSuccessDelete}
@ -339,7 +357,6 @@ export default function clients({ clients, userName }) {
</div>
</InputUploadView>
<div className='select'>
<FormControl sx={{ width: 350, ml: 5, mt: 2 }}>

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

@ -1,31 +1,28 @@
import React, { useEffect, useState } from 'react'
import { useEffect, useState } from 'react'
import { DashboardView } from '../../styles/layouts/dashboard/DashboardView'
import MapCard from '../../components/mapCard/MapCard'
import Link from 'next/link'
import GraphCard from '../../components/graph/graphCard/ChartCard'
import Header from '../../components/header/Header'
import MapCard from '../../components/mapCard/MapCard'
import PageTitle from '../../components/pageTitle/PageTitle'
import Link from 'next/link'
import { parseCookies, setCookie } from 'nookies'
import { GetServerSideProps } from 'next'
import getAPIClient from '../../services/ssrApi'
import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart'
import CostIndicatorChart from '../../components/graph/costIndicatorChart'
import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart'
import Head from 'next/head'
import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle'
import { format } from 'date-fns'
import { GetServerSideProps } from 'next'
import Head from 'next/head'
import { parseCookies, setCookie } from 'nookies'
import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle'
import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
import CostIndicatorChart from '../../components/graph/costIndicatorChart'
import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart'
import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart'
import getAPIClient from '../../services/ssrApi'
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';
import RenderIf from '../../utils/renderIf'
import Box from '@mui/material/Box'
import Modal from '@mui/material/Modal'
import Typography from '@mui/material/Typography'
import BasicButton from '../../components/buttons/basicButton/BasicButton'
import ConfirmModal from '../../components/modal/ConfirmModal'
const style = {
position: 'absolute' as const,
@ -39,10 +36,12 @@ const style = {
boxShadow: 24,
p: 4,
borderRadius: 3
borderRadius: 3,
overflow: 'scroll'
};
export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName, costIndicator} : any) {
export default function Dashboard({ grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName, costIndicator }: any) {
const months = [
'Jan',
'Fev',
@ -60,6 +59,9 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
const { ['terms']: terms } = parseCookies()
const currentYear = new Date().getUTCFullYear()
const previousYear = new Date().getUTCFullYear() - 1
const [lastDataBrutaMensalS, setLastDataBrutaMensal] = useState('')
const [lastDataBrutaAnualS, setLastDataBrutaAnual] = useState('')
@ -70,18 +72,18 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
useEffect(() => {
let lastDataMensal = '0'
let lastDataAnual = '0'
let index=0
let index = 0
while (index < grossMensalGraph.length) {
if (!grossMensalGraph[index].dad_estimado && grossMensalGraph[index].economia_acumulada!==null)
lastDataMensal=grossMensalGraph[index].economia_acumulada
if (!grossMensalGraph[index].dad_estimado && grossMensalGraph[index].economia_acumulada !== null)
lastDataMensal = grossMensalGraph[index].economia_acumulada
index++
}
setLastDataBrutaMensal(`${parseFloat(lastDataMensal).toFixed(3)}`)
index=0
index = 0
while (index < grossAnualGraph.length) {
if (!grossAnualGraph[index].dad_estimado)
lastDataAnual=grossAnualGraph[index].economia_acumulada
lastDataAnual = grossAnualGraph[index].economia_acumulada
index++
}
setLastDataBrutaAnual(`${parseFloat(lastDataAnual).toFixed(3)}`)
@ -108,19 +110,19 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
</Link>
{
typeof window === 'undefined' || typeof window === undefined? null :
typeof window === 'undefined' || typeof window === undefined ? null :
<>
<section className='dashboard'>
<GraphCard title='Economia Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil'>
<AccumulatedEconomyTitle value={lastDataBrutaAnualS}/>
<AccumulatedEconomyTitle value={lastDataBrutaAnualS} />
<GrossAnualChart title='' subtitle=''
dataset='Consolidada'
dataProps={grossAnualGraph}
label={grossAnualYears} barLabel bruta miniature/>
label={grossAnualYears} barLabel bruta miniature />
</GraphCard>
<GraphCard title='Economia Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil'>
<AccumulatedEconomyTitle value={lastDataBrutaMensalS}/>
<AccumulatedEconomyTitle value={lastDataBrutaMensalS} />
<GrossMensalChart title='' subtitle=''
data1={grossMensalGraph}
data2={grossMensalGraph}
@ -132,20 +134,22 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
<GraphCard title='Custo Mensal Cativo x Livre' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil'>
<CativoXLivreChart chartData={acumulatedGraph}
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
label={['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']} title='' subtitle='' barLabel hashurado miniature/>
label={['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']} title='' subtitle='' barLabel hashurado miniature />
</GraphCard>
<GraphCard title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'>
<CostIndicatorChart title='' subtitle=''
data1={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2021')).map(value => value?.custo_unit && !!parseInt(value?.custo_unit)? value.custo_unit : null)}
data2={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2022')).map(value => value?.custo_unit && !!parseInt(value?.custo_unit)? value.custo_unit : null)}
data1={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes(costIndicator[0].mes.slice(0, 4))).map(value => value?.custo_unit && !!parseInt(value?.custo_unit) ? value.custo_unit : null)}
data2={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes(costIndicator[costIndicator.length - 1].mes.slice(0, 4))).map(value => value?.custo_unit && !!parseInt(value?.custo_unit) ? value.custo_unit : null)}
// years={[costIndicator[0].mes.slice(0, 4), costIndicator[costIndicator.length - 1].mes.slice(0, 4)]}
years={[previousYear, currentYear]}
label={months}
miniature
/>
</GraphCard>
</section>
<Modal
open={terms=='false'}
open={terms == 'false'}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
@ -153,8 +157,45 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
<Typography id="modal-modal-title" variant="h6" component="h2">
Termos de uso
</Typography>
<img src='assets/smart-energia-terms-image.png' style={{ maxWidth: '100%' }} />
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
<p>
Bem-vindo ao Smart Energy View, a Plataforma Web da SMART ENERGIA!
</p>
<p>
Agora você terá a Gestão da sua Energia na palma da sua mão!!!!
</p>
<p>
Visualize os principais indicadores, dados de economia, resumo de operações, PLD, notícias além de acompanhar o consumo de energia em intervalos mínimos de 5 minutos.
</p>
<p>
Estamos na última fase de testes da plataforma e em breve também iremos disponibilizar os aplicativos para seu celular, nos sistemas operacionais IOS e Android.
</p>
<p>
Encontrando qualquer dificuldade, eventuais inconsistências ou dúvidas, nos contate!
</p>
<p>
Lembrando que conforme nosso contrato de serviços vigente, todas as informações entregues são estritamente privadas, sendo seu sigilo protegido por lei, não podendo ser compartilhadas com terceiros sendo destinadas a seu uso exclusivo.
</p>
<p>
A divulgação não autorizada das informações adquiridas nesta plataforma (ou seu uso), de forma integral ou parcial, é proibida, não sendo permitido o compartilhamento dos acessos e senhas ou qualquer informação que tiver acesso junto a esta plataforma, sendo que o acesso a esta plataforma é restrito e individual.
</p>
<p>
Destacamos que os resultados informados são meramente indicativos, não vinculantes a resultados e que as premissas disponibilizadas na plataforma são as mesmas utilizadas nos Energys Reports e estudos encaminhados.
</p>
<p>
<strong>Aproveite essa nova ferramenta de acompanhar sua Gestão de Energia!</strong>
</p>
{/* <p>
Bem-vindo a Plataforma Web – SMART ENERGIA!
</p>
<p>
@ -168,7 +209,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
</p>
<p>
Ressaltamos que os resultados informados são meramente indicativos.
</p>
</p> */}
<BasicButton title="Aceito os termos" onClick={() => {
setCookie(undefined, 'terms', 'true')
setOpen(false)
@ -195,9 +236,9 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
await apiClient.post('/economy/grossAnnual').then(res => {
grossAnualGraph = res.data.data
}).catch(res => {
// console.log(res)
})
.then(console.log)
.catch(console.log)
await apiClient.post('/economy/grossMonthly').then(res => {
grossMensalGraph = res.data.data

100
src/pages/economy/index.tsx
View File

@ -5,28 +5,28 @@ import Select from '@mui/material/Select';
import { GetServerSideProps } from 'next';
import Head from 'next/head';
import { parseCookies } from 'nookies';
import React, { useContext, useEffect, useState } from 'react'
import { useContext, useEffect, useState } from 'react';
import Header from '../../components/header/Header'
import Header from '../../components/header/Header';
import PageTitle from '../../components/pageTitle/PageTitle';
import { api } from '../../services/api';
import getAPIClient from '../../services/ssrApi';
import { TableHeader } from '../../styles/layouts/pld/PldView'
import RenderIf from '../../utils/renderIf'
import { TableHeader } from '../../styles/layouts/pld/PldView';
import RenderIf from '../../utils/renderIf';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import { MenuContext } from '../../contexts/menu/MenuContext';
import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart';
import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart';
import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle';
import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart';
import CostIndicatorChart from '../../components/graph/costIndicatorChart';
import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart';
import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart';
import { MenuContext } from '../../contexts/menu/MenuContext';
import { EconomyView } from '../../styles/layouts/economy/economy';
import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle';
export default function economy({userName, anual, years, brutaMensal, catLiv, clients, indicatorCost}: any) {
const {economyMenu, setEconomyMenu} = useContext(MenuContext)
export default function economy({ userName, anual, years, brutaMensal, catLiv, clients, indicatorCost }: any) {
const { economyMenu, setEconomyMenu } = useContext(MenuContext)
const [unity, setUnity] = useState<string>('');
@ -34,7 +34,7 @@ export default function economy({userName, anual, years, brutaMensal, catLiv, cl
const [indicatorDataState, setIndicatorDataState] = useState(null);
const currentYear = new Date().getUTCFullYear()
const previousYear = new Date().getUTCFullYear()-1
const previousYear = new Date().getUTCFullYear() - 1
const months = [
'Jan',
@ -54,37 +54,40 @@ export default function economy({userName, anual, years, brutaMensal, catLiv, cl
const [lastDataBruta, setLastDataBruta] = useState('')
useEffect(() => {
let lastData = '0'
let index=0
let index = 0
if (economyMenu) {
while (index < brutaMensal.length) {
if (!brutaMensal[index].dad_estimado)
lastData=brutaMensal[index].economia_acumulada
lastData = brutaMensal[index].economia_acumulada
index++
}
} else {
while (index < anual.length) {
if (!anual[index].dad_estimado)
lastData=anual[index].economia_acumulada
lastData = anual[index].economia_acumulada
index++
}
}
setLastDataBruta(`${parseFloat(lastData).toFixed(3)}`)
}, [economyMenu])
useEffect(() => {
console.log(indicatorDataState)
}, [indicatorDataState])
async function getChartsWithUnity() {
await api.post('/economy/estimates', unity!==''?{
await api.post('/economy/estimates', unity !== '' ? {
"filters": [
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity === "default" ? unity : unity}
{ "type": "=", "field": "dados_cadastrais.cod_smart_unidade", "value": unity === "default" ? unity : unity }
]
}:{}).then(res => {
} : {}).then(res => {
setCatLivDataState(res.data.data)
})
await api.post('/economy/MWh', unity!==''?{
await api.post('/economy/MWh', unity !== '' ? {
"filters": [
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity === "default"? unity : unity}
{ "type": "=", "field": "dados_cadastrais.cod_smart_unidade", "value": unity === "default" ? unity : unity }
]
}:{}).then(res => {
} : {}).then(res => {
setIndicatorDataState(res.data.data)
})
}
@ -94,44 +97,44 @@ export default function economy({userName, anual, years, brutaMensal, catLiv, cl
}, [unity])
return (
<main style={{width: '100%'}}>
<main style={{ width: '100%' }}>
<Head>
<title>Smart Energia - Economia</title>
</Head>
<div id='title'/>
<div id='title' />
<Header name={userName}>
<PageTitle title='Economia' subtitle='Gráficos de economia'/>
<PageTitle title='Economia' subtitle='Gráficos de economia' />
</Header>
<EconomyView>
<TableHeader>
<Tabs value={economyMenu} onChange={(e, nv) => setEconomyMenu(nv)} aria-label="">
<Tab label="Acumulada Anual"/>
<Tab label="Acumulada Mensal"/>
<Tab label="Cativo x Livre Mensal"/>
<Tab label="Custo R$/MWh"/>
<Tab label="Acumulada Anual" />
<Tab label="Acumulada Mensal" />
<Tab label="Cativo x Livre Mensal" />
<Tab label="Custo R$/MWh" />
</Tabs>
</TableHeader>
<article>
{
economyMenu === 0 || economyMenu === 1?
economyMenu === 0 || economyMenu === 1 ?
<p>Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil</p>
:
economyMenu === 2?
economyMenu === 2 ?
<p>Comparativo de Custo Estimado - Valores em R$ x mil</p>
:
<p>Indicador de Custo - Valores em R$/MWh</p>
}
{
economyMenu===0 || economyMenu===1?
<AccumulatedEconomyTitle value={lastDataBruta}/>
economyMenu === 0 || economyMenu === 1 ?
<AccumulatedEconomyTitle value={lastDataBruta} />
:
null
}
</article>
{
typeof window === 'undefined' || typeof window === undefined? null :
typeof window === 'undefined' || typeof window === undefined ? null :
<>
<RenderIf isTrue={economyMenu===0}>
<RenderIf isTrue={economyMenu === 0}>
<section>
<GrossAnualChart title='' subtitle=''
dataset='Consolidada'
@ -142,7 +145,7 @@ export default function economy({userName, anual, years, brutaMensal, catLiv, cl
</section>
</RenderIf>
<RenderIf isTrue={economyMenu===1}>
<RenderIf isTrue={economyMenu === 1}>
<section>
<GrossMensalChart title='' subtitle=''
data1={brutaMensal}
@ -152,16 +155,16 @@ export default function economy({userName, anual, years, brutaMensal, catLiv, cl
</section>
</RenderIf>
<RenderIf isTrue={economyMenu===2}>
<div style={{paddingLeft: '3%'}}>
<FormControl sx={{ m: 1, minWidth: 120, width: 200, height: '65px'}} size="small">
<RenderIf isTrue={economyMenu === 2}>
<div style={{ paddingLeft: '3%' }}>
<FormControl sx={{ m: 1, minWidth: 120, width: 200, height: '65px' }} size="small">
<InputLabel id="demo-select-small">Unidade</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={unity}
label="Unidade"
sx={{height: '64px'}}
sx={{ height: '64px' }}
onChange={value => setUnity(value.target.value)}
fullWidth
>
@ -175,21 +178,21 @@ export default function economy({userName, anual, years, brutaMensal, catLiv, cl
</FormControl>
</div>
<section>
<CativoXLivreChart chartData={unity!==''? catLivDataState : catLiv}
<CativoXLivreChart chartData={unity !== '' ? catLivDataState : catLiv}
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
label={['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']} title='' subtitle='' barLabel hashurado/>
label={['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']} title='' subtitle='' barLabel hashurado />
</section>
</RenderIf>
<RenderIf isTrue={economyMenu===3}>
<div style={{paddingLeft: '3%'}}>
<RenderIf isTrue={economyMenu === 3}>
<div style={{ paddingLeft: '3%' }}>
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
<InputLabel id="demo-select-small">Unidade</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={unity}
sx={{height: '64px'}}
sx={{ height: '64px' }}
label="Unidade"
onChange={value => setUnity(value.target.value)}
fullWidth
@ -206,8 +209,9 @@ export default function economy({userName, anual, years, brutaMensal, catLiv, cl
</div>
<section>
<CostIndicatorChart title='' subtitle=''
data1={indicatorDataState?.filter(value => value?.mes.slice(0, 4).includes(previousYear)).map(value => value?.custo_unit && !!parseInt(value?.custo_unit)? value.custo_unit : null)}
data2={indicatorDataState?.filter(value => value?.mes.slice(0, 4).includes(currentYear)).map(value => value?.custo_unit && !!parseInt(value?.custo_unit)? value.custo_unit : null)}
data1={indicatorDataState?.filter(value => value?.mes.slice(0, 4).includes(previousYear)).map(value => value?.custo_unit && !!parseInt(value?.custo_unit) ? value.custo_unit : null)}
data2={indicatorDataState?.filter(value => value?.mes.slice(0, 4).includes(currentYear)).map(value => value?.custo_unit && !!parseInt(value?.custo_unit) ? value.custo_unit : null)}
years={[previousYear, currentYear]}
label={months}
/>
</section>
@ -246,8 +250,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
await apiClient.post('/units', {
"filters": [
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": client_id},
{"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]}
{ "type": "=", "field": "dados_cadastrais.cod_smart_cliente", "value": client_id },
{ "type": "not_in", "field": "dados_cadastrais.codigo_scde", "value": ["0P"] }
],
"fields": [
"unidade",

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

@ -76,7 +76,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
function getDataByDay() {
api.post('/pld/daily', {
"filters": [
{"type" : "=", "field" : "year_month_formatted", "value": month},
{"type" : "=", "field" : "year_month_formatted", "value": month, "row": true},
{"type" : "=", "field" : "submarket", "value": select}
],
"order": [{ "field": "day_calc", "direction": "asc" }]

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

@ -1,39 +1,37 @@
import React, { useEffect, useState } from 'react';
import Banner from '../../components/banner/Banner';
import { TelemetriaView, Buttons, TableHeader, ChartFilters} from '../../styles/layouts/Telemetria/TelemetriaView';
import GradientButton from '../../components/buttons/gradientButton/GradientButton'
import Header from '../../components/header/Header';
import MenuItem from '@mui/material/MenuItem';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import Head from 'next/head';
import GradientButton from '../../components/buttons/gradientButton/GradientButton';
import Header from '../../components/header/Header';
import { Buttons, ChartFilters, TableHeader, TelemetriaView } from '../../styles/layouts/Telemetria/TelemetriaView';
import RenderIf from '../../utils/renderIf';
import MuiAlert, { AlertProps } from '@mui/material/Alert';
import Snackbar from '@mui/material/Snackbar';
import { GetServerSideProps } from 'next';
import { parseCookies } from 'nookies';
import { api } from '../../services/api';
import Snackbar from '@mui/material/Snackbar'
import MuiAlert, { AlertProps } from '@mui/material/Alert'
import getAPIClient from '../../services/ssrApi';
import { DemRegXDemConChart } from '../../components/graph/DemRegXDemConChart';
import getAPIClient from '../../services/ssrApi';
import RenderIf from '../../utils/renderIf';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import TextField from '@mui/material/TextField';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { format } from 'date-fns';
import BasicButton from '../../components/buttons/basicButton/BasicButton';
import { DiscretizedConsumptionChart } from '../../components/graph/DiscretizedConsumptionChart';
import FatorPotenciaChart from '../../components/graph/fatorPotenciaChart';
import PageTitle from '../../components/pageTitle/PageTitle';
import { getDemand } from '../../services/charts/telemetry/getDemand';
import { getDiscretization } from '../../services/charts/telemetry/getDiscretization';
import { getPowerFactorData } from '../../services/charts/telemetry/getPowerFactor';
import { getDemand } from '../../services/charts/telemetry/getDemand';
import PageTitle from '../../components/pageTitle/PageTitle';
import { format } from 'date-fns';
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
props,
@ -42,18 +40,19 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
})
export default function Telemetria({userName, clients}: any) {
const [unity, setUnity] = useState(clients[0].codigo_scde);
export default function Telemetria({ userName, clients }: any) {
const [unity, setUnity] = useState(clients[0]?.codigo_scde);
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());
const [month, setMonth] = useState(new Date().getMonth()+1);
const [month, setMonth] = useState(new Date().getMonth());
const [endMonth, setEndMonth] = useState(new Date().getMonth() + 1);
const [discretization, setDiscretization] = useState('1_hora');
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
const [openSnackError, setOpenSnackError] = useState<boolean>(false)
const [openSnackFields, setOpenSnackFields] = useState<boolean>(false)
const months=['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
const months = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
const handleCloseSnack = (
event?: React.SyntheticEvent | Event,
@ -75,7 +74,7 @@ export default function Telemetria({userName, clients}: any) {
textEncoder = new TextEncoder('windows-1252');
*/
const csv_file = new Blob([csv], {type: "text/csv;charset=utf-8"});
const csv_file = new Blob([csv], { type: "text/csv;charset=utf-8" });
const download_link = document.createElement("a");
@ -143,8 +142,8 @@ export default function Telemetria({userName, clients}: any) {
setLoader(true)
getDiscretization(unity, new Date(firstOfTheMonth), new Date(lastOfTheMonth), discretization)
.then(result => {setDiscretizedConsumptionData(result); setSend(false); setLoader(false)})
.catch(() => {setSend(false); setOpenSnackFields(true)})
.then(result => { setDiscretizedConsumptionData(result); setSend(false); setLoader(false) })
.catch(() => { setSend(false); setOpenSnackFields(true) })
getDemand(unity, startDate, endDate, discretization)
.then(result => {
@ -152,15 +151,15 @@ export default function Telemetria({userName, clients}: any) {
setSend(false);
setTableData(result)
})
.catch(() => {setSend(false); setOpenSnackFields(true); setLoader(false)})
.catch(() => { setSend(false); setOpenSnackFields(true); setLoader(false) })
getPowerFactorData(unity, startDate, endDate, discretization)
.then(result => {setFatorPotenciaData(result); setSend(false); setLoader(false)})
.catch(() => {setSend(false); setOpenSnackFields(true); setLoader(false)})
.then(result => { setFatorPotenciaData(result); setSend(false); setLoader(false) })
.catch(() => { setSend(false); setOpenSnackFields(true); setLoader(false) })
}, [])
return(
<main style={{width: '100%'}}>
return (
<main style={{ width: '100%' }}>
<Head>
<title>Smart Energia - Telemetria</title>
</Head>
@ -206,10 +205,10 @@ export default function Telemetria({userName, clients}: any) {
</Snackbar>
<Header name={userName}>
<PageTitle title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia'/>
<PageTitle title='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia' />
</Header>
{
typeof window === 'undefined' || typeof window === undefined? null :
typeof window === 'undefined' || typeof window === undefined ? null :
<TelemetriaView>
{/* <Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
SCDE da Câmara de Comercialização de Energia Elétrica - CCEE,
@ -220,20 +219,20 @@ export default function Telemetria({userName, clients}: any) {
<TableHeader>
<Tabs value={menu} onChange={(e, nv) => setMenu(nv)} aria-label="">
<Tab label={
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
discretization==='15_min'? 'Consumo discretizado em 15 minutos' :
discretization==='1_hora'? 'Consumo discretizado em 1 hora' :
'Consumo discretizado em 1 dia'}/>
<Tab label="Demanda"/>
<Tab label="Fator Potência"/>
discretization === '5_min' ? 'Consumo discretizado em 5 minutos' :
discretization === '15_min' ? 'Consumo discretizado em 15 minutos' :
discretization === '1_hora' ? 'Consumo discretizado em 1 hora' :
'Consumo discretizado em 1 dia'} />
<Tab label="Demanda" />
<Tab label="Fator Potência" />
</Tabs>
</TableHeader>
{/* discretization chart */}
<RenderIf isTrue={menu===0}>
<RenderIf isTrue={menu === 0}>
<ChartFilters>
<div className='input'>
<FormControl style={{ minWidth: 100, width: 200}} size="small">
<FormControl style={{ minWidth: 100, width: 200 }} size="small">
<InputLabel>Unidade</InputLabel>
<Select
labelId="demo-select-small"
@ -241,7 +240,7 @@ export default function Telemetria({userName, clients}: any) {
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 2}}
sx={{ height: 63, mb: 2 }}
fullWidth
>
<MenuItem value="">
@ -265,7 +264,7 @@ export default function Telemetria({userName, clients}: any) {
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 2}}
sx={{ height: 63, mb: 2 }}
fullWidth
>
<MenuItem value="">
@ -281,6 +280,7 @@ export default function Telemetria({userName, clients}: any) {
</div>
{
discretization === '1_mes' ?
<>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
@ -290,24 +290,49 @@ export default function Telemetria({userName, clients}: any) {
label="Mês"
onChange={value => {
setMonth(value.target.value as number)
const firstOfTheMonth: Date = new Date(startDate.getFullYear(), (value.target.value as number)-1, 1)
const lastOfTheMonth: Date = new Date(startDate.getFullYear(), firstOfTheMonth.getMonth() + 1, 0)
const firstOfTheMonth: Date = new Date(startDate.getFullYear(), (value.target.value as number) - 1, 1)
setStartDate(firstOfTheMonth)
setEndDate(lastOfTheMonth)
}}
sx={{height: 63, mb: 2}}
sx={{ height: 63, mb: 2 }}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
{
months.slice(0, new Date().getUTCMonth()+1).map(value => {
return <MenuItem key={value} value={months.indexOf(value)+1 as number}>{value}</MenuItem>
months.slice(0, new Date().getUTCMonth() + 1).map(value => {
return <MenuItem key={value} value={months.indexOf(value) + 1 as number}>{value}</MenuItem>
})
}
</Select>
</FormControl>
{discretization === '1_mes' && <FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={endMonth}
label="Mês"
onChange={value => {
setEndMonth(value.target.value as number)
const firstOfTheMonth: Date = new Date(startDate.getFullYear(), (value.target.value as number) - 1, 1)
const lastOfTheMonth: Date = new Date(startDate.getFullYear(), firstOfTheMonth.getMonth() + 1, 0)
setEndDate(lastOfTheMonth)
}}
sx={{ height: 63, mb: 2 }}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
{
months.slice(0, new Date().getUTCMonth() + 1).map(value => {
return <MenuItem key={value} value={months.indexOf(value) + 1 as number}>{value}</MenuItem>
})
}
</Select>
</FormControl>}
</>
:
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='datePicker'>
@ -316,26 +341,26 @@ export default function Telemetria({userName, clients}: any) {
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
renderInput={(params) => <TextField {...params} sx={{ mr: 1, mb: 2 }} />}
/>
</div>
<div className='datePicker' style={{marginRight: 10}}>
<div className='datePicker' style={{ marginRight: 10 }}>
<DesktopDatePicker
label="Data final"
inputFormat="dd/MM/yyyy"
value={endDate}
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
maxDate={discretization === '1_mes' ? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear() + 2)
:
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
discretization === '1_dia' ? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear() + 2)
:
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
discretization === '1_hora' ? new Date(startDate).setUTCMonth(startDate.getUTCMonth() + 1)
:
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
discretization === '15_min' ? new Date(startDate).setUTCDate(startDate.getUTCDate() + 7)
:
new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
new Date(startDate).setUTCDate(startDate.getUTCDate() + 1)
}
onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
renderInput={(params) => <TextField {...params} sx={{ mb: 2 }} />}
/>
</div>
</LocalizationProvider>
@ -344,22 +369,22 @@ export default function Telemetria({userName, clients}: any) {
<BasicButton title='Selecionar!' onClick={() => {
setLoader(true)
getDiscretization(unity, startDate, endDate, discretization)
.then(result => {setDiscretizedConsumptionData(result); setSend(false); setLoader(false); setTableData(result)})
.catch(exception => {setSend(false); setOpenSnackFields(true); setLoader(false)})
}}/>
.then(result => { setDiscretizedConsumptionData(result); setSend(false); setLoader(false); setTableData(result) })
.catch(exception => { setSend(false); setOpenSnackFields(true); setLoader(false) })
}} />
</div>
</ChartFilters>
<DiscretizedConsumptionChart title={
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
} subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
discretization === '5_min' ? 'Consumo discretizado em 5 minutos' :
discretization === '15_min' ? 'Consumo discretizado em 15 minutos' : discretization === '1_hora' ? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
} subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month />
</RenderIf>
{/* demand chart */}
<RenderIf isTrue={menu===1}>
<RenderIf isTrue={menu === 1}>
<ChartFilters>
<div className='input'>
<FormControl style={{ minWidth: 100, width: 200}} size="small">
<FormControl style={{ minWidth: 100, width: 200 }} size="small">
<InputLabel>Unidade</InputLabel>
<Select
labelId="demo-select-small"
@ -367,7 +392,7 @@ export default function Telemetria({userName, clients}: any) {
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 2}}
sx={{ height: 63, mb: 2 }}
fullWidth
>
<MenuItem value="">
@ -391,7 +416,7 @@ export default function Telemetria({userName, clients}: any) {
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 2}}
sx={{ height: 63, mb: 2 }}
fullWidth
>
<MenuItem value="">
@ -412,26 +437,26 @@ export default function Telemetria({userName, clients}: any) {
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
renderInput={(params) => <TextField {...params} sx={{ mr: 1, mb: 2 }} />}
/>
</div>
<div className='datePicker' style={{marginRight: 10}}>
<div className='datePicker' style={{ marginRight: 10 }}>
<DesktopDatePicker
label="Data final"
inputFormat="dd/MM/yyyy"
value={endDate}
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
maxDate={discretization === '1_mes' ? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear() + 2)
:
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
discretization === '1_dia' ? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear() + 2)
:
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
discretization === '1_hora' ? new Date(startDate).setUTCMonth(startDate.getUTCMonth() + 1)
:
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
discretization === '15_min' ? new Date(startDate).setUTCDate(startDate.getUTCDate() + 7)
:
new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
new Date(startDate).setUTCDate(startDate.getUTCDate() + 1)
}
onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
renderInput={(params) => <TextField {...params} sx={{ mb: 2 }} />}
/>
</div>
</LocalizationProvider>
@ -439,21 +464,21 @@ export default function Telemetria({userName, clients}: any) {
<BasicButton title='Selecionar!' onClick={() => {
setLoader(true)
getDemand(unity, startDate, endDate, discretization)
.then(result => {setDemRegXDemCon(result); setSend(false); setLoader(false); setTableData(result)})
.catch(exception => {setSend(false); setOpenSnackFields(true); setLoader(false)})
}}/>
.then(result => { setDemRegXDemCon(result); setSend(false); setLoader(false); setTableData(result) })
.catch(exception => { setSend(false); setOpenSnackFields(true); setLoader(false) })
}} />
</div>
</ChartFilters>
<DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon}
dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'}
label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red />
</RenderIf>
{/* power factor chart */}
<RenderIf isTrue={menu===2}>
<RenderIf isTrue={menu === 2}>
<ChartFilters>
<div className='input'>
<FormControl style={{ minWidth: 100, width: 200}} size="small">
<FormControl style={{ minWidth: 100, width: 200 }} size="small">
<InputLabel>Unidade</InputLabel>
<Select
labelId="demo-select-small"
@ -461,7 +486,7 @@ export default function Telemetria({userName, clients}: any) {
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 2}}
sx={{ height: 63, mb: 2 }}
fullWidth
>
<MenuItem value="">
@ -485,7 +510,7 @@ export default function Telemetria({userName, clients}: any) {
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 2}}
sx={{ height: 63, mb: 2 }}
fullWidth
>
<MenuItem value="">
@ -506,26 +531,26 @@ export default function Telemetria({userName, clients}: any) {
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
renderInput={(params) => <TextField {...params} sx={{ mr: 1, mb: 2 }} />}
/>
</div>
<div className='datePicker' style={{marginRight: 10}}>
<div className='datePicker' style={{ marginRight: 10 }}>
<DesktopDatePicker
label="Data final"
inputFormat="dd/MM/yyyy"
value={endDate}
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
maxDate={discretization === '1_mes' ? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear() + 2)
:
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
discretization === '1_dia' ? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear() + 2)
:
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
discretization === '1_hora' ? new Date(startDate).setUTCMonth(startDate.getUTCMonth() + 1)
:
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
discretization === '15_min' ? new Date(startDate).setUTCDate(startDate.getUTCDate() + 7)
:
new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
new Date(startDate).setUTCDate(startDate.getUTCDate() + 1)
}
onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
renderInput={(params) => <TextField {...params} sx={{ mb: 2 }} />}
/>
</div>
</LocalizationProvider>
@ -533,9 +558,9 @@ export default function Telemetria({userName, clients}: any) {
<BasicButton title='Selecionar!' onClick={() => {
setLoader(true)
getPowerFactorData(unity, startDate, endDate, discretization)
.then(result => {setFatorPotenciaData(result); setSend(false); setLoader(false); setTableData(result)})
.catch(exception => {setSend(false); setOpenSnackFields(true); setLoader(false)})
}}/>
.then(result => { setFatorPotenciaData(result); setSend(false); setLoader(false); setTableData(result) })
.catch(exception => { setSend(false); setOpenSnackFields(true); setLoader(false) })
}} />
</div>
</ChartFilters>
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
@ -555,54 +580,19 @@ export default function Telemetria({userName, clients}: any) {
</div>
</RenderIf>
<RenderIf isTrue={menu===2}>
<table className="tg">
<thead>
<tr>
<th className='tg-8oo6'>Unidade</th>
<th className='tg-8oo6'>Ponto</th>
<th className='tg-8oo6'>Numero do dia</th>
<th className='tg-8oo6'>Dia formatado</th>
<th className='tg-8oo6'>Hora</th>
<th className='tg-8oo6'>Minuto</th>
<th className='tg-8oo6'>f_ref</th>
<th className='tg-8oo6'>Consumo</th>
<th className='tg-8oo6'>Reativa</th>
<th className='tg-8oo6'>fp</th>
</tr>
</thead>
<tbody>
{
fatorPotenciaData!==null?
fatorPotenciaData?.map((value, index) => {
return <>
<tr>
<td key={index} className='tg-gceh'>{value.ponto}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td>
<td key={index} className='tg-uulg'>{value.day_formatted}</td>
<td key={index} className='tg-gceh'>{value.hora}</td>
<td key={index} className='tg-gceh'>{value.f_ref}</td>
<td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.fp)}</td>
</tr>
</>
})
:
null
}
</tbody>
</table>
</RenderIf>
<RenderIf isTrue={menu===1}>
<table className="tg">
<thead>
<tr>
<th className='tg-8oo6'>Ponto</th>
<th className='tg-8oo6'>Numero do dia</th>
<th className='tg-8oo6'>Dia formatado</th>
<th className='tg-8oo6'>Hora</th>
{/* <th className='tg-8oo6'>Minuto</th> não temos */}
<th className='tg-8oo6'>Consumo</th>
<th className='tg-8oo6'>Reativa</th>
<th className='tg-8oo6'>dem contratada</th>
<th className='tg-8oo6'>dem registrada</th>
<th className='tg-8oo6'>dem tolerancia</th>
@ -610,55 +600,23 @@ export default function Telemetria({userName, clients}: any) {
</thead>
<tbody>
{
demRegXDemCon!==null?
demRegXDemCon?.map((value, index) => {
fatorPotenciaData !== null ?
fatorPotenciaData?.map((value, index) => {
return <>
<tr>
<td key={index} className='tg-gceh'>{value.ponto}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td>
<td key={index} className='tg-uulg'>{value.day_formatted}</td>
<td key={index} className='tg-gceh'>{value.hora}</td>
{/* <td key={index} className='tg-gceh'>{value.minut}</td> */}
<td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td key={index} className='tg-gceh'>{value.dem_cont}</td>
<td key={index} className='tg-gceh'>{value.dem_reg}</td>
<td key={index} className='tg-gceh'>{value.dem_tolerancia}</td>
</tr>
</>
})
:
null
}
</tbody>
</table>
</RenderIf>
<RenderIf isTrue={menu===0}>
<table className="tg">
<thead>
<tr>
<th className='tg-8oo6'>Ponto</th>
<th className='tg-8oo6'>Numero do dia</th>
<th className='tg-8oo6'>Dia formatado</th>
<th className='tg-8oo6'>Hora</th>
<th className='tg-8oo6'>Minuto</th>
<th className='tg-8oo6'>Consumo</th>
<th className='tg-8oo6'>Reativa</th>
</tr>
</thead>
<tbody>
{
discretizedConsumptionData!==null?
discretizedConsumptionData?.map((value, index) => {
return <>
<tr>
<td key={index} className='tg-gceh'>{value.ponto}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td>
<td key={index} className='tg-uulg'>{value.day_formatted}</td>
<td key={index} className='tg-gceh'>{value.hora}</td>
<td key={index} className='tg-gceh'>{unity}</td>
<td key={index} className='tg-gceh'>{value?.ponto}</td>
<td key={index} className='tg-gceh'>{parseFloat(value?.dia_num)}</td>
<td key={index} className='tg-uulg'>{value?.day_formatted}</td>
<td key={index} className='tg-gceh'>{value?.hora}</td>
<td key={index} className='tg-gceh'>{value.minut}</td>
<td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td key={index} className='tg-gceh'>{value?.f_ref}</td>
<td key={index} className='tg-uulg'>{parseFloat(value?.consumo).toLocaleString('pt-br', { style: 'currency', currency: 'BRL', minimumFractionDigits: 2 })}</td>
<td key={index} className='tg-gceh'>{parseFloat(value?.reativa).toLocaleString('pt-br', { style: 'currency', currency: 'BRL', minimumFractionDigits: 2 })}</td>
<td key={index} className='tg-gceh'>{parseFloat(value?.fp)}</td>
<td key={index} className='tg-gceh'>{value?.dem_cont}</td>
<td key={index} className='tg-gceh'>{value?.dem_reg}</td>
<td key={index} className='tg-gceh'>{value?.dem_tolerancia}</td>
</tr>
</>
})
@ -667,10 +625,9 @@ export default function Telemetria({userName, clients}: any) {
}
</tbody>
</table>
</RenderIf>
<RenderIf isTrue={showChart}>
<DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={demRegXDemCon?.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
<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>
@ -679,14 +636,14 @@ export default function Telemetria({userName, clients}: any) {
<GradientButton title='DOWNLOADS' description={`CLIQUE AQUI PARA BAIXAR OS DADOS EM FORMATO EXCEL DO PERÍODO SELECIONADO`} green onClick={() => {
const html = document.querySelector("table")?.outerHTML;
htmlToCSV(html, `${menu === 2 ? 'fator_potencia' : menu === 1 ? 'demanda' : 'consumo_discretizado'}.csv`);
}}/>
}} />
</Buttons>
<p className='paragraph'>
<i>
Fonte: Dados coletados do Sistema de Coleta de Dados
de Energia - SCDE da Câmara de Comercialização <br/>
de Energia - SCDE da Câmara de Comercialização <br />
Energia Elétrica – CCEE, sendo que as quantidades aqui
informadas são de responsabilidade <br/>do agente de
informadas são de responsabilidade <br />do agente de
medição - Distribuidora.
</i>
</p>
@ -707,8 +664,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
await apiClient.post('/units', {
"filters": [
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": client_id},
{"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]}
{ "type": "=", "field": "dados_cadastrais.cod_smart_cliente", "value": client_id },
{ "type": "not_in", "field": "dados_cadastrais.codigo_scde", "value": ["0P"] }
],
"fields": [
"unidade",

6
src/services/ssrApi.ts
View File

@ -1,5 +1,4 @@
import axios, { AxiosRequestConfig } from "axios";
import * as cookie from 'cookie';
import axios from "axios";
import * as express from 'express';
import * as next from 'next';
import { parseCookies } from "nookies";
@ -13,7 +12,8 @@ export default function getAPIClient(ctx?: Pick<next.NextPageContext, 'req'> | {
const { '@smartAuth-token': token } = parseCookies(ctx)
const api = axios.create({
baseURL: "https://api.energiasmart.com.br/api",
// baseURL: "https://api.energiasmart.com.br/api",
baseURL: "https://api.energiasmart.klupp.com.br/api",
});
api.interceptors.request.use(config => {