Merge branch 'dev' of https://gitlab.com/kluppsoftware/smart-energia-web into dev
This commit is contained in:
Ubuntu
commit
c0b1a9723c
BIN
public/assets/smart-energia-terms-image.png
Normal file
BIN
public/assets/smart-energia-terms-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
@ -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,20 +430,157 @@ 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}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
>
|
||||
<Box sx={style}>
|
||||
{
|
||||
units.map((units, index) => {
|
||||
return <>
|
||||
<li style={{
|
||||
listStyle: 'none'
|
||||
}} key={index}>{units.unidade}</li>
|
||||
<hr />
|
||||
listStyle: 'none'
|
||||
}} key={index}>{units.unidade}</li>
|
||||
<hr />
|
||||
</>
|
||||
})
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -78,22 +77,22 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
|
||||
let sum = 0;
|
||||
const dataArr = ctx.chart.data.datasets[0].data;
|
||||
dataArr.map(data => {
|
||||
sum += 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,8 +105,8 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
|
||||
},
|
||||
};
|
||||
|
||||
const labels: string[] = label.filter(function(item, pos) {
|
||||
return label.indexOf(item) == pos;
|
||||
const labels: string[] = label.filter((item, pos) => {
|
||||
return label.indexOf(item) == pos;
|
||||
});
|
||||
|
||||
const data: any = {
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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,25 +357,24 @@ export default function clients({ clients, userName }) {
|
||||
</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>
|
||||
<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>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<FaqButton1 title="Cancelar" onClick={() => setOpen(false)} />
|
||||
<FaqButton2
|
||||
|
||||
@ -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,75 +110,114 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
|
||||
</Link>
|
||||
|
||||
{
|
||||
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}/>
|
||||
<GrossAnualChart title='' subtitle=''
|
||||
dataset='Consolidada'
|
||||
dataProps={grossAnualGraph}
|
||||
label={grossAnualYears} barLabel bruta miniature/>
|
||||
</GraphCard>
|
||||
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} />
|
||||
<GrossAnualChart title='' subtitle=''
|
||||
dataset='Consolidada'
|
||||
dataProps={grossAnualGraph}
|
||||
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}/>
|
||||
<GrossMensalChart title='' subtitle=''
|
||||
data1={grossMensalGraph}
|
||||
data2={grossMensalGraph}
|
||||
label={months}
|
||||
miniature
|
||||
/>
|
||||
</GraphCard>
|
||||
<GraphCard title='Economia Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil'>
|
||||
<AccumulatedEconomyTitle value={lastDataBrutaMensalS} />
|
||||
<GrossMensalChart title='' subtitle=''
|
||||
data1={grossMensalGraph}
|
||||
data2={grossMensalGraph}
|
||||
label={months}
|
||||
miniature
|
||||
/>
|
||||
</GraphCard>
|
||||
|
||||
<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/>
|
||||
</GraphCard>
|
||||
<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 />
|
||||
</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)}
|
||||
label={months}
|
||||
miniature
|
||||
/>
|
||||
</GraphCard>
|
||||
</section>
|
||||
<Modal
|
||||
open={terms=='false'}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<Typography id="modal-modal-title" variant="h6" component="h2">
|
||||
Termos de uso
|
||||
</Typography>
|
||||
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
|
||||
<p>
|
||||
Bem-vindo a Plataforma Web – SMART ENERGIA!
|
||||
</p>
|
||||
<p>
|
||||
Visualize os principais indicadores, dados de economia, resumo de operações, PLD, notícias além de acompanhar o consumo de energia em intervalos mínimos de 5 minutos.
|
||||
</p>
|
||||
<p>
|
||||
Conforme nosso contrato de serviços vigente, todas as informações entregues são estritamente privadas, sendo seu sigilo protegido por lei, não podendo ser compartilhadas com terceiros.
|
||||
</p>
|
||||
<p>
|
||||
A divulgação não autorizada das informações adquiridas nesta plataforma (ou seu uso), de forma integral ou parcial, é proibida, não sendo permitido o compartilhamento dos acessos e senhas ou qualquer informação que tiver acesso junto a esta plataforma, sendo que o acesso a esta plataforma é restrito e individual.
|
||||
</p>
|
||||
<p>
|
||||
Ressaltamos que os resultados informados são meramente indicativos.
|
||||
</p>
|
||||
<BasicButton title="Aceito os termos" onClick={() => {
|
||||
setCookie(undefined, 'terms', 'true')
|
||||
setOpen(false)
|
||||
}} />
|
||||
</Typography>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
<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(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'}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<Typography id="modal-modal-title" variant="h6" component="h2">
|
||||
Termos de uso
|
||||
</Typography>
|
||||
<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>
|
||||
Visualize os principais indicadores, dados de economia, resumo de operações, PLD, notícias além de acompanhar o consumo de energia em intervalos mínimos de 5 minutos.
|
||||
</p>
|
||||
<p>
|
||||
Conforme nosso contrato de serviços vigente, todas as informações entregues são estritamente privadas, sendo seu sigilo protegido por lei, não podendo ser compartilhadas com terceiros.
|
||||
</p>
|
||||
<p>
|
||||
A divulgação não autorizada das informações adquiridas nesta plataforma (ou seu uso), de forma integral ou parcial, é proibida, não sendo permitido o compartilhamento dos acessos e senhas ou qualquer informação que tiver acesso junto a esta plataforma, sendo que o acesso a esta plataforma é restrito e individual.
|
||||
</p>
|
||||
<p>
|
||||
Ressaltamos que os resultados informados são meramente indicativos.
|
||||
</p> */}
|
||||
<BasicButton title="Aceito os termos" onClick={() => {
|
||||
setCookie(undefined, 'terms', 'true')
|
||||
setOpen(false)
|
||||
}} />
|
||||
</Typography>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
}
|
||||
</DashboardView>
|
||||
)
|
||||
@ -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
|
||||
|
||||
@ -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,125 +97,126 @@ 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?
|
||||
<p>Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil</p>
|
||||
:
|
||||
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 ?
|
||||
<p>Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil</p>
|
||||
:
|
||||
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 :
|
||||
<>
|
||||
<RenderIf isTrue={economyMenu===0}>
|
||||
<section>
|
||||
<GrossAnualChart title='' subtitle=''
|
||||
dataset='Consolidada'
|
||||
typeof window === 'undefined' || typeof window === undefined ? null :
|
||||
<>
|
||||
<RenderIf isTrue={economyMenu === 0}>
|
||||
<section>
|
||||
<GrossAnualChart title='' subtitle=''
|
||||
dataset='Consolidada'
|
||||
|
||||
dataProps={anual}
|
||||
label={years} barLabel bruta
|
||||
/>
|
||||
</section>
|
||||
</RenderIf>
|
||||
dataProps={anual}
|
||||
label={years} barLabel bruta
|
||||
/>
|
||||
</section>
|
||||
</RenderIf>
|
||||
|
||||
<RenderIf isTrue={economyMenu===1}>
|
||||
<section>
|
||||
<GrossMensalChart title='' subtitle=''
|
||||
data1={brutaMensal}
|
||||
data2={brutaMensal}
|
||||
label={months}
|
||||
/>
|
||||
</section>
|
||||
</RenderIf>
|
||||
<RenderIf isTrue={economyMenu === 1}>
|
||||
<section>
|
||||
<GrossMensalChart title='' subtitle=''
|
||||
data1={brutaMensal}
|
||||
data2={brutaMensal}
|
||||
label={months}
|
||||
/>
|
||||
</section>
|
||||
</RenderIf>
|
||||
|
||||
<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'}}
|
||||
onChange={value => setUnity(value.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">Todas</MenuItem>
|
||||
{
|
||||
clients.map((value) => {
|
||||
return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
<section>
|
||||
<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/>
|
||||
</section>
|
||||
</RenderIf>
|
||||
<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' }}
|
||||
onChange={value => setUnity(value.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">Todas</MenuItem>
|
||||
{
|
||||
clients.map((value) => {
|
||||
return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
<section>
|
||||
<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 />
|
||||
</section>
|
||||
</RenderIf>
|
||||
|
||||
<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'}}
|
||||
label="Unidade"
|
||||
onChange={value => setUnity(value.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">Todas</MenuItem>
|
||||
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
|
||||
{
|
||||
clients.map((value) => {
|
||||
return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</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)}
|
||||
label={months}
|
||||
/>
|
||||
</section>
|
||||
</RenderIf>
|
||||
</>
|
||||
<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' }}
|
||||
label="Unidade"
|
||||
onChange={value => setUnity(value.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">Todas</MenuItem>
|
||||
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
|
||||
{
|
||||
clients.map((value) => {
|
||||
return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</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)}
|
||||
years={[previousYear, currentYear]}
|
||||
label={months}
|
||||
/>
|
||||
</section>
|
||||
</RenderIf>
|
||||
</>
|
||||
}
|
||||
</EconomyView>
|
||||
</main>
|
||||
@ -245,15 +249,15 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
let clients = [];
|
||||
|
||||
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"]}
|
||||
],
|
||||
"fields": [
|
||||
"unidade",
|
||||
"cod_smart_unidade",
|
||||
"codigo_scde"],
|
||||
"distinct": true
|
||||
"filters": [
|
||||
{ "type": "=", "field": "dados_cadastrais.cod_smart_cliente", "value": client_id },
|
||||
{ "type": "not_in", "field": "dados_cadastrais.codigo_scde", "value": ["0P"] }
|
||||
],
|
||||
"fields": [
|
||||
"unidade",
|
||||
"cod_smart_unidade",
|
||||
"codigo_scde"],
|
||||
"distinct": true
|
||||
}).then(res => {
|
||||
clients = res.data.data
|
||||
})
|
||||
|
||||
@ -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" }]
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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 => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user