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

fixes

Browse Source
This commit is contained in:
joseCorte-exe 2023-04-18 17:27:27 -03:00
parent fea6bbb6ce
commit 038461fd2f
7 changed files with 142 additions and 159 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

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

@ -284,13 +284,7 @@ export default function ClientTable({ clients, onChange }: ClientsTableInterface
const formData = new FormData()
const [clientEdit, setClientEdit] = useState<any>({
name: String,
email: String,
password: String,
password_confirmation: String,
client_id: Number
})
const [clientEdit, setClientEdit] = useState<any>({})
const [logo, setLogo] = useState(false)
const [imageURLS, setImageURLs] = useState([])
const [images, setImages] = useState([] as any)
@ -298,6 +292,7 @@ export default function ClientTable({ clients, onChange }: ClientsTableInterface
const [openEditUserModal, setOpenEditUserModal] = useState<any>(false);
const [selectedClient, setSelectedClient] = useState<any>(2);
const [search, setSearch] = useState('')
useEffect(() => {
if (images.length < 1) return
@ -348,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
@ -365,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);

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

@ -82,9 +82,6 @@ export function GrossAnualChart({ title, subtitle, dataProps = [], label, datase
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'))}`
console.log(value == null ? null : result)
console.log(dataProps)
return value == null ? null : result
},
display: true,
@ -143,7 +140,7 @@ export function GrossAnualChart({ title, subtitle, dataProps = [], label, datase
return 0
})
},
data: [].concat(dataProps.filter(value => value.dad_estimado === true).map((value, index) => {
data: [].concat(dataProps.filter(value => value.dad_estimado === true).slice(0, 7).map((value, index) => {
return parseFloat(value?.economia_acumulada)
})),
borderRadius: 10,

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

@ -36,22 +36,6 @@ export default function GrossMensalChart({
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
}
const [lastDataS, setLastData] = useState('')
useEffect(() => {
let lastData = '0'

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

@ -156,6 +156,7 @@ export default function clients({ clients, userName }) {
setLogo(e.target.files[0])
}
return (
<div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
<Snackbar

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

@ -59,6 +59,9 @@ export default function Dashboard({ grossAnualGraph, grossAnualYears, grossMensa
const { ['terms']: terms } = parseCookies()
const currentYear = new Date().getUTCFullYear()
const previousYear = new Date().getUTCFullYear() - 1
const [lastDataBrutaMensalS, setLastDataBrutaMensal] = useState('')
const [lastDataBrutaAnualS, setLastDataBrutaAnual] = useState('')
@ -86,8 +89,6 @@ export default function Dashboard({ grossAnualGraph, grossAnualYears, grossMensa
setLastDataBrutaAnual(`${parseFloat(lastDataAnual).toFixed(3)}`)
}, [])
console.log(grossAnualGraph)
return (
<DashboardView>
<Head>
@ -140,7 +141,8 @@ export default function Dashboard({ grossAnualGraph, grossAnualYears, grossMensa
<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={[costIndicator[0].mes.slice(0, 4), costIndicator[costIndicator.length - 1].mes.slice(0, 4)]}
years={[previousYear, currentYear]}
label={months}
miniature
/>
@ -155,6 +157,7 @@ export default function Dashboard({ grossAnualGraph, grossAnualYears, grossMensa
<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!
@ -184,8 +187,6 @@ export default function Dashboard({ grossAnualGraph, grossAnualYears, grossMensa
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>

257
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,166 +54,169 @@ 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)
})
}
useEffect(() => {
getChartsWithUnity()
console.log(brutaMensal)
}, [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>
@ -246,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
})