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 formData = new FormData()
const [clientEdit, setClientEdit] = useState<any>({ const [clientEdit, setClientEdit] = useState<any>({})
name: String,
email: String,
password: String,
password_confirmation: String,
client_id: Number
})
const [logo, setLogo] = useState(false) const [logo, setLogo] = useState(false)
const [imageURLS, setImageURLs] = useState([]) const [imageURLS, setImageURLs] = useState([])
const [images, setImages] = useState([] as any) const [images, setImages] = useState([] as any)
@ -298,6 +292,7 @@ export default function ClientTable({ clients, onChange }: ClientsTableInterface
const [openEditUserModal, setOpenEditUserModal] = useState<any>(false); const [openEditUserModal, setOpenEditUserModal] = useState<any>(false);
const [selectedClient, setSelectedClient] = useState<any>(2); const [selectedClient, setSelectedClient] = useState<any>(2);
const [search, setSearch] = useState('')
useEffect(() => { useEffect(() => {
if (images.length < 1) return if (images.length < 1) return
@ -348,6 +343,7 @@ export default function ClientTable({ clients, onChange }: ClientsTableInterface
Não foi possivel encontrar unidades do client! Não foi possivel encontrar unidades do client!
</Alert> </Alert>
</Snackbar> </Snackbar>
<TextField onChange={(e) => setSearch(e.target.value)} placeholder='persquisar por nome:' />
<Paper sx={{ width: '100%', mb: 2 }}> <Paper sx={{ width: '100%', mb: 2 }}>
<TableContainer> <TableContainer>
<Table <Table
@ -365,6 +361,7 @@ export default function ClientTable({ clients, onChange }: ClientsTableInterface
/> />
<TableBody> <TableBody>
{stableSort(clients, getComparator(order, orderBy)) {stableSort(clients, getComparator(order, orderBy))
.filter(client => client.name.toLowerCase().includes(search.toLowerCase()))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, index) => { .map((row, index) => {
const isItemSelected = isSelected(row.id); 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 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'))}` 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 return value == null ? null : result
}, },
display: true, display: true,
@ -143,7 +140,7 @@ export function GrossAnualChart({ title, subtitle, dataProps = [], label, datase
return 0 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) return parseFloat(value?.economia_acumulada)
})), })),
borderRadius: 10, borderRadius: 10,

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

@ -36,22 +36,6 @@ export default function GrossMensalChart({
subtitle, subtitle,
miniature miniature
}: ChartInterface) { }: 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('') const [lastDataS, setLastData] = useState('')
useEffect(() => { useEffect(() => {
let lastData = '0' 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]) setLogo(e.target.files[0])
} }
return ( return (
<div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}> <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
<Snackbar <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 { ['terms']: terms } = parseCookies()
const currentYear = new Date().getUTCFullYear()
const previousYear = new Date().getUTCFullYear() - 1
const [lastDataBrutaMensalS, setLastDataBrutaMensal] = useState('') const [lastDataBrutaMensalS, setLastDataBrutaMensal] = useState('')
const [lastDataBrutaAnualS, setLastDataBrutaAnual] = useState('') const [lastDataBrutaAnualS, setLastDataBrutaAnual] = useState('')
@ -86,8 +89,6 @@ export default function Dashboard({ grossAnualGraph, grossAnualYears, grossMensa
setLastDataBrutaAnual(`${parseFloat(lastDataAnual).toFixed(3)}`) setLastDataBrutaAnual(`${parseFloat(lastDataAnual).toFixed(3)}`)
}, []) }, [])
console.log(grossAnualGraph)
return ( return (
<DashboardView> <DashboardView>
<Head> <Head>
@ -140,7 +141,8 @@ export default function Dashboard({ grossAnualGraph, grossAnualYears, grossMensa
<CostIndicatorChart title='' subtitle='' <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)} 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)} 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} label={months}
miniature miniature
/> />
@ -155,6 +157,7 @@ export default function Dashboard({ grossAnualGraph, grossAnualYears, grossMensa
<Typography id="modal-modal-title" variant="h6" component="h2"> <Typography id="modal-modal-title" variant="h6" component="h2">
Termos de uso Termos de uso
</Typography> </Typography>
<img src='assets/smart-energia-terms-image.png' style={{ maxWidth: '100%' }} />
<Typography id="modal-modal-description" sx={{ mt: 2 }}> <Typography id="modal-modal-description" sx={{ mt: 2 }}>
<p> <p>
Bem-vindo ao Smart Energy View, a Plataforma Web da SMART ENERGIA! 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. 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>
‌
<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. 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>

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

@ -5,28 +5,28 @@ import Select from '@mui/material/Select';
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import Head from 'next/head'; import Head from 'next/head';
import { parseCookies } from 'nookies'; 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 PageTitle from '../../components/pageTitle/PageTitle';
import { api } from '../../services/api'; import { api } from '../../services/api';
import getAPIClient from '../../services/ssrApi'; import getAPIClient from '../../services/ssrApi';
import { TableHeader } from '../../styles/layouts/pld/PldView' import { TableHeader } from '../../styles/layouts/pld/PldView';
import RenderIf from '../../utils/renderIf' import RenderIf from '../../utils/renderIf';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab'; import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import { MenuContext } from '../../contexts/menu/MenuContext'; import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle';
import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart';
import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart';
import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'; import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart';
import CostIndicatorChart from '../../components/graph/costIndicatorChart'; 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 { EconomyView } from '../../styles/layouts/economy/economy';
import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle';
export default function economy({userName, anual, years, brutaMensal, catLiv, clients, indicatorCost}: any) { export default function economy({ userName, anual, years, brutaMensal, catLiv, clients, indicatorCost }: any) {
const {economyMenu, setEconomyMenu} = useContext(MenuContext) const { economyMenu, setEconomyMenu } = useContext(MenuContext)
const [unity, setUnity] = useState<string>(''); 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 [indicatorDataState, setIndicatorDataState] = useState(null);
const currentYear = new Date().getUTCFullYear() const currentYear = new Date().getUTCFullYear()
const previousYear = new Date().getUTCFullYear()-1 const previousYear = new Date().getUTCFullYear() - 1
const months = [ const months = [
'Jan', 'Jan',
@ -54,166 +54,169 @@ export default function economy({userName, anual, years, brutaMensal, catLiv, cl
const [lastDataBruta, setLastDataBruta] = useState('') const [lastDataBruta, setLastDataBruta] = useState('')
useEffect(() => { useEffect(() => {
let lastData = '0' let lastData = '0'
let index=0 let index = 0
if (economyMenu) { if (economyMenu) {
while (index < brutaMensal.length) { while (index < brutaMensal.length) {
if (!brutaMensal[index].dad_estimado) if (!brutaMensal[index].dad_estimado)
lastData=brutaMensal[index].economia_acumulada lastData = brutaMensal[index].economia_acumulada
index++ index++
} }
} else { } else {
while (index < anual.length) { while (index < anual.length) {
if (!anual[index].dad_estimado) if (!anual[index].dad_estimado)
lastData=anual[index].economia_acumulada lastData = anual[index].economia_acumulada
index++ index++
} }
} }
setLastDataBruta(`${parseFloat(lastData).toFixed(3)}`) setLastDataBruta(`${parseFloat(lastData).toFixed(3)}`)
}, [economyMenu]) }, [economyMenu])
useEffect(() => {
console.log(indicatorDataState)
}, [indicatorDataState])
async function getChartsWithUnity() { async function getChartsWithUnity() {
await api.post('/economy/estimates', unity!==''?{ await api.post('/economy/estimates', unity !== '' ? {
"filters": [ "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) setCatLivDataState(res.data.data)
}) })
await api.post('/economy/MWh', unity!==''?{ await api.post('/economy/MWh', unity !== '' ? {
"filters": [ "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) setIndicatorDataState(res.data.data)
}) })
} }
useEffect(() => { useEffect(() => {
getChartsWithUnity() getChartsWithUnity()
console.log(brutaMensal)
}, [unity]) }, [unity])
return ( return (
<main style={{width: '100%'}}> <main style={{ width: '100%' }}>
<Head> <Head>
<title>Smart Energia - Economia</title> <title>Smart Energia - Economia</title>
</Head> </Head>
<div id='title'/> <div id='title' />
<Header name={userName}> <Header name={userName}>
<PageTitle title='Economia' subtitle='Gráficos de economia'/> <PageTitle title='Economia' subtitle='Gráficos de economia' />
</Header> </Header>
<EconomyView> <EconomyView>
<TableHeader> <TableHeader>
<Tabs value={economyMenu} onChange={(e, nv) => setEconomyMenu(nv)} aria-label=""> <Tabs value={economyMenu} onChange={(e, nv) => setEconomyMenu(nv)} aria-label="">
<Tab label="Acumulada Anual"/> <Tab label="Acumulada Anual" />
<Tab label="Acumulada Mensal"/> <Tab label="Acumulada Mensal" />
<Tab label="Cativo x Livre Mensal"/> <Tab label="Cativo x Livre Mensal" />
<Tab label="Custo R$/MWh"/> <Tab label="Custo R$/MWh" />
</Tabs> </Tabs>
</TableHeader> </TableHeader>
<article> <article>
{ {
economyMenu === 0 || economyMenu === 1? economyMenu === 0 || economyMenu === 1 ?
<p>Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil</p> <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>Comparativo de Custo Estimado - Valores em R$ x mil</p>
: :
<p>Indicador de Custo - Valores em R$/MWh</p> <p>Indicador de Custo - Valores em R$/MWh</p>
} }
{ {
economyMenu===0 || economyMenu===1? economyMenu === 0 || economyMenu === 1 ?
<AccumulatedEconomyTitle value={lastDataBruta}/> <AccumulatedEconomyTitle value={lastDataBruta} />
: :
null null
} }
</article> </article>
{ {
typeof window === 'undefined' || typeof window === undefined? null : typeof window === 'undefined' || typeof window === undefined ? null :
<> <>
<RenderIf isTrue={economyMenu===0}> <RenderIf isTrue={economyMenu === 0}>
<section> <section>
<GrossAnualChart title='' subtitle='' <GrossAnualChart title='' subtitle=''
dataset='Consolidada' dataset='Consolidada'
dataProps={anual} dataProps={anual}
label={years} barLabel bruta label={years} barLabel bruta
/> />
</section> </section>
</RenderIf> </RenderIf>
<RenderIf isTrue={economyMenu===1}> <RenderIf isTrue={economyMenu === 1}>
<section> <section>
<GrossMensalChart title='' subtitle='' <GrossMensalChart title='' subtitle=''
data1={brutaMensal} data1={brutaMensal}
data2={brutaMensal} data2={brutaMensal}
label={months} label={months}
/> />
</section> </section>
</RenderIf> </RenderIf>
<RenderIf isTrue={economyMenu===2}> <RenderIf isTrue={economyMenu === 2}>
<div style={{paddingLeft: '3%'}}> <div style={{ paddingLeft: '3%' }}>
<FormControl sx={{ m: 1, minWidth: 120, width: 200, height: '65px'}} size="small"> <FormControl sx={{ m: 1, minWidth: 120, width: 200, height: '65px' }} size="small">
<InputLabel id="demo-select-small">Unidade</InputLabel> <InputLabel id="demo-select-small">Unidade</InputLabel>
<Select <Select
labelId="demo-select-small" labelId="demo-select-small"
id="demo-select-small" id="demo-select-small"
value={unity} value={unity}
label="Unidade" label="Unidade"
sx={{height: '64px'}} sx={{ height: '64px' }}
onChange={value => setUnity(value.target.value)} onChange={value => setUnity(value.target.value)}
fullWidth fullWidth
> >
<MenuItem value="">Todas</MenuItem> <MenuItem value="">Todas</MenuItem>
{ {
clients.map((value) => { clients.map((value) => {
return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem> return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
}) })
} }
</Select> </Select>
</FormControl> </FormControl>
</div> </div>
<section> <section>
<CativoXLivreChart chartData={unity!==''? catLivDataState : catLiv} <CativoXLivreChart chartData={unity !== '' ? catLivDataState : catLiv}
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre' 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> </section>
</RenderIf> </RenderIf>
<RenderIf isTrue={economyMenu===3}> <RenderIf isTrue={economyMenu === 3}>
<div style={{paddingLeft: '3%'}}> <div style={{ paddingLeft: '3%' }}>
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small"> <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
<InputLabel id="demo-select-small">Unidade</InputLabel> <InputLabel id="demo-select-small">Unidade</InputLabel>
<Select <Select
labelId="demo-select-small" labelId="demo-select-small"
id="demo-select-small" id="demo-select-small"
value={unity} value={unity}
sx={{height: '64px'}} sx={{ height: '64px' }}
label="Unidade" label="Unidade"
onChange={value => setUnity(value.target.value)} onChange={value => setUnity(value.target.value)}
fullWidth fullWidth
> >
<MenuItem value="">Todas</MenuItem> <MenuItem value="">Todas</MenuItem>
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */} {/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
{ {
clients.map((value) => { clients.map((value) => {
return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem> return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
}) })
} }
</Select> </Select>
</FormControl> </FormControl>
</div> </div>
<section> <section>
<CostIndicatorChart title='' subtitle='' <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)} 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)} 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} years={[previousYear, currentYear]}
/> label={months}
</section> />
</RenderIf> </section>
</> </RenderIf>
</>
} }
</EconomyView> </EconomyView>
</main> </main>
@ -246,15 +249,15 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
let clients = []; let clients = [];
await apiClient.post('/units', { await apiClient.post('/units', {
"filters": [ "filters": [
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": client_id}, { "type": "=", "field": "dados_cadastrais.cod_smart_cliente", "value": client_id },
{"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]} { "type": "not_in", "field": "dados_cadastrais.codigo_scde", "value": ["0P"] }
], ],
"fields": [ "fields": [
"unidade", "unidade",
"cod_smart_unidade", "cod_smart_unidade",
"codigo_scde"], "codigo_scde"],
"distinct": true "distinct": true
}).then(res => { }).then(res => {
clients = res.data.data clients = res.data.data
}) })