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

and more fixes

Browse Source
This commit is contained in:
joseCorte-exe 2022-07-11 15:02:57 -03:00
parent 205f344260
commit 51f442d3af
26 changed files with 661 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -36,6 +36,7 @@
"axios": "^0.27.2",
"chart.js": "^3.7.1",
"chartjs-plugin-datalabels": "^2.0.0",
"chartjs-plugin-style": "^0.5.0",
"date-fns": "^2.28.0",
"eslint-plugin-react": "^7.29.4",
"eslit": "^6.0.0",

3
src/components/buttons/gradientButton/GradientButton.tsx
View File

@ -21,9 +21,6 @@ export default function GradientButton({ title, description, orange, purple, gre
return (
<GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange'} onClick={() => handleClick()}>
<svg>
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
</svg>
<p></p>
<p>{description}</p>
</GradientButtonView>

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

@ -37,33 +37,9 @@ export const GradientButtonView = styled.button`
transform: scale(1.1);
}
svg {
width: 404px;
left: 0;
position: absolute;
top: 0;
height: 110px;
}
rect {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-dasharray: 422, 0;
transition: all 0.35s linear;
}
:hover {
background: rgba($red, 0);
letter-spacing: 1px;
rect {
stroke-width: 5;
stroke-dasharray: 15, 310;
stroke-dashoffset: 48;
transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}
}
* {
@ -72,21 +48,11 @@ export const GradientButtonView = styled.button`
}
p {
:first-child {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: calc(20px);
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 11px;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
:last-child {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
}
text-transform: uppercase;
}
`

12
src/components/graph/cativoXLivreChart/index.tsx
View File

@ -107,7 +107,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
dataArr.map(data => {
sum += data;
});
const result = `${(parseFloat(value)).toLocaleString('pt-br')}`
const result = `${(parseInt(value)).toLocaleString('pt-br')}`
return value==null? null : result
}
@ -136,7 +136,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
},
borderWidth: 2,
fill: false,
data: chartData.map(value => value.economia_mensal),
data: chartData.map(value => parseInt(value.economia_mensal)),
},
{
type: 'bar' as const,
@ -146,7 +146,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
},
data: chartData.map(value => {
if (!value.dad_estimado)
return value.custo_cativo
return parseInt(value.custo_cativo)
}),
},
{
@ -158,7 +158,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
},
data: chartData.map(value => {
if (!value.dad_estimado)
return value.custo_livre
return parseInt(value.custo_livre)
}),
},
{
@ -167,7 +167,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
backgroundColor: pattern.draw('diagonal', '#C2D5FB'),
data: chartData.map(value => {
if (value.dad_estimado)
return value.custo_cativo
return parseInt(value.custo_cativo)
}),
},
{
@ -176,7 +176,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
backgroundColor: pattern.draw('diagonal', '#255488'),
data: chartData.map(value => {
if (value.dad_estimado)
return value.custo_livre
return parseInt(value.custo_livre)
}),
}
],

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

@ -92,7 +92,7 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar
position: 'bottom' as const,
labels: {
font: {
size: 16,
size: 12,
}
}
},
@ -144,7 +144,7 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar
return (
<GrossAnualChartView>
<ChartTitle title={title} subtitle={subtitle} />
<Chart options={options} data={data} type='bar'/>
<Chart options={options} data={data} type='bar' height={150}/>
</GrossAnualChartView>
)
}

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

@ -132,7 +132,7 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
<ChartTitle title={title} subtitle={subtitle} />
<ChartJs
options={options}
data={data} type={'bar'} />
data={data} type={'bar'} height={'156'}/>
</GrossMensalChartView>
)
}

7
src/components/graph/grossMensalChart/GrossMensalChartView.ts
View File

@ -1,14 +1,11 @@
import styled from "styled-components"
export const GrossMensalChartView = styled.div`
width: 100%;
width: 90%;
div{
/* margin-top: 10px; */
}
transform: translateY(-25px);
@media (max-width: 900px) {
min-width: 20rem
}
`

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

@ -2,13 +2,17 @@ import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Modal from '@mui/material/Modal';
import Typography from '@mui/material/Typography';
import { GetServerSideProps } from 'next';
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { parseCookies } from 'nookies';
import React, { useContext, useEffect, useState } from 'react'
import { AuthContext } from '../../contexts/AuthContext';
import { MenuContext } from '../../contexts/menu/MenuContext';
import { api } from '../../services/api';
import RenderIf from '../../utils/renderIf';
@ -30,6 +34,8 @@ const style = {
};
export default function Sidebar() {
const {pldMenu, setPldMenu, economyMenu, setEconomyMenu} = useContext(MenuContext)
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
@ -37,6 +43,8 @@ export default function Sidebar() {
const { signOut } = useContext(AuthContext)
const [ economiaDrawer, setEconomiaDrawer ] = useState(false)
const [ pldDrawer, setPldDrawer ] = useState(false)
const [ notificationsCount, setNotificationsCount ] = useState<number>(0)
const [ viewModal, setViewModal ] = useState(false)
@ -97,7 +105,7 @@ export default function Sidebar() {
</RenderIf>
<RenderIf isTrue={role === '2'}>
<SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
<SidebarView economiaDrawer={economiaDrawer} pldDrawer={pldDrawer} modalOpen={viewModal} >
<div className='hamburger' onClick={() => setViewModal(!viewModal)} >
<Image src='/assets/hamburgerModal.svg' width={55} height={55} />
</div>
@ -106,17 +114,22 @@ export default function Sidebar() {
</div>
<ul>
<Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
<li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
<div className='economiaDrawer drawer' >
<Link href='/grossSavings'><li className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta Anual</li></Link>
<Link href='/accumulatedSavings'><li className={router.pathname=='/accumulatedSavings'? 'actualPathDrawer' : null}>Economia Bruta Mensal</li></Link>
<Link href='/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Cativo x Livre Mensal</li></Link>
<Link href='/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R$/MWh</li></Link>
</div>
<Link href='/economy'><li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia'}</li></Link>
{/* <div className='economiaDrawer drawer'>
<Link href='/economy'><li onClick={() => setEconomyMenu(0)} className={economyMenu===0? 'actualPathDrawer' : null}>Economia Bruta Anual</li></Link>
<Link href='/economy'><li onClick={() => setEconomyMenu(1)} className={economyMenu===1? 'actualPathDrawer' : null}>Economia Bruta Mensal</li></Link>
<Link href='/economy'><li onClick={() => setEconomyMenu(2)} className={economyMenu===2? 'actualPathDrawer' : null}>Cativo x Livre Mensal</li></Link>
<Link href='/economy'><li onClick={() => setEconomyMenu(3)} className={economyMenu===3? 'actualPathDrawer' : null}>Custo R$/MWh</li></Link>
</div> */}
<Link href='/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria'}</li></Link>
<Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
<Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias'}</li></Link>
<Link href='/pld'><li className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD'}</li></Link>
<li onClick={() => setPldDrawer(!pldDrawer)} className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li>
<div className='pldDrawer drawer'>
<Link href='/pld'><li onClick={() => setPldMenu(0)} className={pldMenu==0? 'actualPathDrawer' : null}>PLD Histórico</li></Link>
<Link href='/pld'><li onClick={() => setPldMenu(1)} className={pldMenu===1? 'actualPathDrawer' : null}>Valores Diários</li></Link>
<Link href='/pld'><li onClick={() => setPldMenu(2)} className={pldMenu===2? 'actualPathDrawer' : null}>Valores Horários</li></Link>
</div>
<Link href='/industryInfo'><li className={router.pathname=='/industryInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial'}</li></Link>
{/* <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link> */}
<Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações'}<div className='notification' style={{display: notificationsCount<=0||notificationsCount===undefined? 'none' : 'inherit'}}><p>{notificationsCount}</p></div></li></Link>
@ -124,15 +137,15 @@ export default function Sidebar() {
<Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ'}</li></Link>
<button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<ModalContainer>
<Image src='/assets/marca1.png' width={250} height={200}/>
<Typography id="modal-modal-title" variant="h6" component="h2">
<Typography id="modal-modal-title" variant="subtitle2" component="p" style={{color: 'gray'}}>
Deseja realmente sair ?
</Typography>
<article>
@ -141,7 +154,7 @@ export default function Sidebar() {
</article>
</ModalContainer>
</Box>
</Modal>
</Modal>
</ul>
<aside>
<p>Nossos Gerentes estão prontos para atendê-los</p>

8
src/components/sidebar/SidebarView.ts
View File

@ -2,7 +2,8 @@ import styled from 'styled-components'
interface SidebarViewInterface {
economiaDrawer: boolean | null,
modalOpen: boolean | null
modalOpen: boolean | null,
pldDrawer: boolean | undefined
}
export const SidebarView = styled.nav<SidebarViewInterface>`
@ -92,6 +93,9 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
.economiaDrawer {
display: ${props => props.economiaDrawer? 'block' : 'none'};
}
.pldDrawer {
display: ${props => props.pldDrawer? 'block' : 'none'};
}
}
aside {
@ -254,7 +258,7 @@ export const ModalContainer = styled.div`
margin-top: 4em;
button {
width: 10em;
height: 4em;
height: 3em;
cursor: pointer;

22
src/contexts/menu/MenuContext.tsx Normal file
View File

@ -0,0 +1,22 @@
import React, { createContext, useState } from "react";
type AuthContextType = {
pldMenu: number,
setPldMenu: any,
economyMenu: number,
setEconomyMenu: any
}
export const MenuContext = createContext({} as AuthContextType)
export function MenuProvider({children}: {children: React.ReactNode}) {
const [pldMenu, setPldMenu] = useState<number>(0)
const [economyMenu, setEconomyMenu] = useState<number>(0)
return (
<MenuContext.Provider value={{pldMenu, setPldMenu, economyMenu, setEconomyMenu}}>
{children}
</MenuContext.Provider>
)
}

41
src/pages/_app.tsx
View File

@ -19,6 +19,7 @@ import '../styles/nprogress/nprogress.css'
import { GetServerSideProps } from 'next'
import { parseCookies } from 'nookies'
import getAPIClient from '../services/ssrApi'
import { MenuProvider } from '../contexts/menu/MenuContext'
export function MyApp({ Component, pageProps, notificationsCount }: AppProps | any) {
const router = useRouter()
@ -45,25 +46,27 @@ export function MyApp({ Component, pageProps, notificationsCount }: AppProps | a
return (
<AuthProvider>
<AppView>
<Head>
<link rel="icon" type="imagem/png" href="/assets/logose.png" />
<meta name="viewport" content="viewport-fit=cover" />
</Head>
<Home />
<VerifyEmail />
<ForgotPassword />
<GlobalStyle />
{
rota != '/' && rota != '/forgotPassword' && rota != '/verifyEmail'?
<>
<Sidebar />
<Component {...pageProps} />
</>
:
null
}
</AppView>
<MenuProvider>
<AppView>
<Head>
<link rel="icon" type="imagem/png" href="/assets/logose.png" />
<meta name="viewport" content="viewport-fit=cover" />
</Head>
<Home />
<VerifyEmail />
<ForgotPassword />
<GlobalStyle />
{
rota != '/' && rota != '/forgotPassword' && rota != '/verifyEmail'?
<>
<Sidebar />
<Component {...pageProps} />
</>
:
null
}
</AppView>
</MenuProvider>
</AuthProvider>
)
}

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

@ -12,7 +12,7 @@ export default function aboutUs({userName, text}) {
return (
<AboutUsView>
<Head>
<title>Smart Energia - About Us</title>
<title>Smart Energia - Sobre nós</title>
</Head>
<Header name={userName}/>

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

@ -20,10 +20,10 @@ import { getDemand } from '../../services/charts/telemetry/getDemand'
import { getDiscretization } from '../../services/charts/telemetry/getDiscretization'
export default function chartTelemetry({userName}) {
const [fatorPotenciaData, setFatorPotenciaData] = useState(null);
const [demRegXDemCon, setDemRegXDemCon] = useState(null);
const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState(null);
const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState(null);
const [fatorPotenciaData, setFatorPotenciaData] = useState([]);
const [demRegXDemCon, setDemRegXDemCon] = useState([]);
const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState([]);
const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState([]);
const { ['user-cod_client']: cod_client } = parseCookies()
@ -35,21 +35,21 @@ export default function chartTelemetry({userName}) {
function getChartsData() {
console.log(token)
// getPowerFactorData("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
// .then(result => setFatorPotenciaData(result))
// .catch(exception => console.log('exeption', exception))
getPowerFactorData("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
.then(result => setFatorPotenciaData(result))
.catch(exception => console.log('exeption', exception))
getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
.then(result => setDiscretizedConsumptionDataReativa(result))
.catch(exception => console.log(exception))
// getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
// .then(result => setDiscretizedConsumptionDataReativa(result))
// .catch(exception => console.log(exception))
getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception))
// getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
// .then(result => setDiscretizedConsumptionData(result))
// .catch(exception => console.log(exception))
getDemand("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
.then(result => setDemRegXDemCon(result))
.catch(exception => console.log(exception))
// getDemand("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
// .then(result => setDemRegXDemCon(result))
// .catch(exception => console.log(exception))
// setFatorPotenciaData(res.data.data)
// setDiscretizedConsumptionDataReativa(res.data.data)
@ -70,7 +70,7 @@ export default function chartTelemetry({userName}) {
<PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
<section className='chartContainer'>
{
demRegXDemCon==null?
demRegXDemCon===null?
<div id="preloader_1">
<span></span>
<span></span>
@ -82,12 +82,13 @@ export default function chartTelemetry({userName}) {
<>
<RenderIf isTrue={discretization!=='1_dia' && discretization!=='1_mes'}>
{/* <RenderIf isTrue={true}> */}
<div>
<DiscretizedConsumptionChart title={
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
} subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
<p style={{alignSelf: 'center', textAlign: 'center'}}>{`Mês - ${startDate.toString().split('-')[2]}/${startDate.toString().split('-')[1]}/${startDate.toString().split('-')[0]}`}</p>
<p style={{alignSelf: 'center', textAlign: 'center'}}>{`Mês - ${startDate}`}</p>
</div>
<div>
@ -100,7 +101,9 @@ export default function chartTelemetry({userName}) {
</RenderIf>
<div>
<DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
<DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon}
dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'}
label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
</div>
<div>

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

@ -1,7 +1,7 @@
import { GetServerSideProps } from 'next'
import Head from 'next/head'
import { parseCookies } from 'nookies'
import React, { useState } from 'react'
import React, { useEffect, useState } from 'react'
// material ui imports
import MenuItem from '@mui/material/MenuItem';
@ -14,6 +14,7 @@ import Header from '../../components/header/Header'
import PageTitle from '../../components/pageTitle/PageTitle'
import getAPIClient from '../../services/ssrApi'
import { CostIndicatorView } from '../../styles/layouts/economy/costIndicator/CostIndicatorView'
import { api } from '../../services/api';
export default function CostIndicator({graphData, userName, clients}: any) {
const [unity, setUnity] = useState('');
@ -33,6 +34,21 @@ export default function CostIndicator({graphData, userName, clients}: any) {
'Dez'
]
const [graphDataState, setGraphDataState] = useState([]);
useEffect(() => {
api.post('/economy/estimates', unity!==''?{
"filters": [
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity}
]
}:{}).then(res => {
setGraphDataState(res.data.data)
console.log()
}).catch(res => {
// console.log(res)
})
}, [unity])
return (
<CostIndicatorView>
<Head>
@ -55,15 +71,19 @@ export default function CostIndicator({graphData, userName, clients}: any) {
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
{
clients.map((value) => {
return <MenuItem key={1} value={value.codigo_scde}>{value.cod_smart_unidade}</MenuItem>
return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
})
}
</Select>
</FormControl>
<section>
<CostIndicatorChart title='' subtitle=''
data1={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
data2={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
data1={unity!==''? graphDataState.filter((value, index) => value.mes.slice(4, 8).includes('2021'))
:
graphData.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
data2={unity!==''? graphDataState.filter((value, index) => value.mes.slice(4, 8).includes('2022'))
:
graphData.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
label={months}
/>
</section>
@ -83,12 +103,16 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
await apiClient.post('/units', {
"filters": [
{"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]},
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": id}
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": 180201211},
{"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]}
],
"fields": ["cod_smart_unidade", "codigo_scde"],
"fields": [
"unidade",
"cod_smart_unidade",
"codigo_scde"],
"distinct": true
}).then(res => {
}).then(res => {
console.log(res.data.data)
clients = res.data.data
}).catch(res => {
// console.log(res)

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

@ -26,6 +26,7 @@ import Chart2 from '../../components/graph/Chart2'
import { GrossAnulChart } from '../../components/graph/grossAnualChart/GrossAnualChart'
import CostIndicatorChart from '../../components/graph/costIndicatorChart'
import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart'
export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName, costIndicator} : any) {
const months = [
@ -46,7 +47,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
return (
<DashboardView>
<Head>
<title>Smart Energia - Dashboard</title>
<title>Smart Energia - Visão Geral</title>
</Head>
<Header name={userName}>
<PageTitle title='Visão Geral' subtitle='Bem Vindo a Smart Energia' />
@ -77,10 +78,12 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
</GraphCard>
<GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil' singleBar>
<Chart2 title='' subtitle=''
data1={grossMensalGraph.filter((value, index) => value.mes.slice(3, 8).includes('2021'))}
data2={grossMensalGraph.filter((value, index) => value.mes.slice(3, 8).includes('2022'))}
label={months} miniature/>
<GrossMensalChart title='' subtitle=''
data1={grossMensalGraph}
data2={grossMensalGraph}
label={grossMensalGraph.map((value) => value.mes)}
miniature
/>
</GraphCard>
<GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' singleBar>

270
src/pages/economy/index.tsx Normal file
View File

@ -0,0 +1,270 @@
import Fab from '@mui/material/Fab';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import { GetServerSideProps } from 'next';
import Head from 'next/head';
import Link from 'next/link';
import { parseCookies } from 'nookies';
import React, { useContext, useEffect, useState } from 'react'
import BasicButton from '../../components/buttons/basicButton/BasicButton';
import { LineBarChart } from '../../components/graph/LineBarChart';
import LineChart from '../../components/graph/LineChart';
import Header from '../../components/header/Header'
import PageTitle from '../../components/pageTitle/PageTitle';
import { api } from '../../services/api';
import { EvolucaoPld } from '../../services/evolucaoPld';
import getAPIClient from '../../services/ssrApi';
import { GoBack, PldGraphView, PldTableView, TableHeader } from '../../styles/layouts/pld/PldView'
import RenderIf from '../../utils/renderIf'
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import NavigationIcon from '@mui/icons-material/Navigation';
import TextField from '@mui/material/TextField';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { MenuContext } from '../../contexts/menu/MenuContext';
import { GrossAnulChart } from '../../components/graph/grossAnualChart/GrossAnualChart';
import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart';
import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart';
import { ConsumoEstimado } from '../../services/consumoEstimado';
import CostIndicatorChart from '../../components/graph/costIndicatorChart';
export default function economy({userName, anual, years, brutaMensal, yearsBrutaMensal, catLiv, clients, indicatorCost}: any) {
const {economyMenu, setEconomyMenu} = useContext(MenuContext)
const [unity, setUnity] = useState<string>('');
const [catLivDataState, setCatLivDataState] = useState(null);
const [indicatorDataState, setIndicatorDataState] = useState(null);
const months = [
'Jan',
'Fev',
'Mar',
'Abr',
'Mai',
'Jun',
'Jul',
'Ago',
'Set',
'Out',
'Nov',
'Dez'
]
useEffect(() => {
api.post('/economy/estimates', unity!==''?{
"filters": [
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity}
]
}:{}).then(res => {
setCatLivDataState(res.data.data)
console.log()
}).catch(res => {
// console.log(res)
})
}, [unity])
useEffect(() => {
api.post('/economy/estimates', unity!==''?{
"filters": [
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity}
]
}:{}).then(res => {
setIndicatorDataState(res.data.data)
console.log()
}).catch(res => {
// console.log(res)
})
}, [unity])
return (
<main style={{width: '100%'}}>
<Head>
<title>Smart Energia - PLD</title>
</Head>
<div id='title'/>
<Header name={userName}>
<PageTitle title='Economia' subtitle='Graficos de economia'/>
</Header>
<TableHeader>
<Tabs value={economyMenu} onChange={(e, nv) => setEconomyMenu(nv)} aria-label="">
<Tab label="Bruta Anual"/>
<Tab label="Bruta Mensal"/>
<Tab label="Cativo x Livre Mensal"/>
<Tab label="Custo R$/MWh"/>
</Tabs>
</TableHeader>
<RenderIf isTrue={economyMenu===0}>
<section>
<GrossAnulChart title='' subtitle=''
dataset='Consolidada'
dataProps={anual}
label={years} barLabel bruta
/>
</section>
</RenderIf>
<RenderIf isTrue={economyMenu===1}>
<GrossMensalChart title='' subtitle=''
data1={brutaMensal}
data2={brutaMensal}
label={yearsBrutaMensal}
/>
</RenderIf>
<RenderIf isTrue={economyMenu===2}>
<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}
label="Unidade"
onChange={value => setUnity(value.target.value)}
fullWidth
>
<MenuItem value="">Todas</MenuItem>
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> !!OPÇAO COM DADOS TESTES!! */}
{
clients.map((value) => {
return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
})
}
</Select>
</FormControl>
<section>
<CativoXLivreChart chartData={unity!==''? catLivDataState : catLiv}
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado/>
</section>
</RenderIf>
<RenderIf isTrue={economyMenu===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}
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>
<section>
<CostIndicatorChart title='' subtitle=''
data1={unity!=''? indicatorDataState?.filter((value, index) => value.mes.slice(4, 8).includes('2021'))
:
indicatorCost?.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
data2={unity!=''? indicatorDataState?.filter((value, index) => value.mes.slice(4, 8).includes('2022'))
:
indicatorCost?.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
label={months}
/>
</section>
</RenderIf>
</main>
)
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let anual = [];
await apiClient.post('/economy/grossAnnual').then(res => {
anual = res.data.data
}).catch(res => {
// console.log(res)
})
const years = anual.map((value) => value.ano)
let brutaMensal = [];
await apiClient.post('/economy/grossMonthly').then(res => {
brutaMensal = res.data.data
// console.log(graphData[0].mes)
}).catch(res => {
// console.log(res)
})
const yearsBrutaMensal = brutaMensal.map((value) => value.mes)
let catLiv = [];
let clients = [];
await apiClient.post('/units', {
"filters": [
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": 180201211},
{"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]}
],
"fields": [
"unidade",
"cod_smart_unidade",
"codigo_scde"],
"distinct": true
}).then(res => {
console.log(res.data.data)
clients = res.data.data
}).catch(res => {
// console.log(res)
})
await apiClient.post('/economy/estimates').then(res => {
catLiv = res.data.data
}).catch(res => {
// console.log(res)
})
let indicatorCost = []
await apiClient.post('/economy/MWh').then(res => {
indicatorCost = res.data.data
}).catch(res => {
// console.log(res)
})
if (!token) {
return {
redirect: {
destination: '/',
permanent: false
}
}
}
return {
props: {
userName,
anual,
years,
brutaMensal,
yearsBrutaMensal,
catLiv,
clients,
indicatorCost
}
}
}

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

@ -1,7 +1,7 @@
import { GetServerSideProps } from 'next'
import Head from 'next/head'
import { parseCookies } from 'nookies'
import React, { useState } from 'react'
import React, { useEffect, useState } from 'react'
import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
// material ui imports
@ -16,8 +16,25 @@ import { ConsumoEstimado } from '../../services/consumoEstimado'
import getAPIClient from '../../services/ssrApi'
import { EstimatedCostView } from '../../styles/layouts/economy/estimatedCost/EstimatedCostView'
import { api } from '../../services/api'
export default function EstimatedCost({graphData, userName, clients}: any) {
const [unity, setUnity] = useState('');
const [unity, setUnity] = useState<string>(null);
const [graphDataState, setGraphDataState] = useState(null);
useEffect(() => {
api.post('/economy/estimates', unity!==''?{
"filters": [
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity}
]
}:{}).then(res => {
setGraphDataState(res.data.data)
console.log()
}).catch(res => {
// console.log(res)
})
}, [unity])
return (
<EstimatedCostView>
@ -41,13 +58,13 @@ export default function EstimatedCost({graphData, userName, clients}: any) {
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> !!OPÇAO COM DADOS TESTES!! */}
{
clients.map((value) => {
return <MenuItem key={1} value={value.codigo_scde}>{value.cod_smart_unidade}</MenuItem>
return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
})
}
</Select>
</FormControl>
<section>
<CativoXLivreChart chartData={graphData}
<CativoXLivreChart chartData={unity!==null? graphDataState : graphData}
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado/>
</section>
@ -66,12 +83,15 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
await apiClient.post('/units', {
"filters": [
{"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]},
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": id}
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": 180201211},
{"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]}
],
"fields": ["cod_smart_unidade", "codigo_scde"],
"fields": [
"unidade",
"cod_smart_unidade",
"codigo_scde"],
"distinct": true
}).then(res => {
}).then(res => {
console.log(res.data.data)
clients = res.data.data
}).catch(res => {

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

@ -7,7 +7,7 @@ import { GetServerSideProps } from 'next';
import Head from 'next/head';
import Link from 'next/link';
import { parseCookies } from 'nookies';
import React, { useEffect, useState } from 'react'
import React, { useContext, useEffect, useState } from 'react'
import BasicButton from '../../components/buttons/basicButton/BasicButton';
import { LineBarChart } from '../../components/graph/LineBarChart';
@ -29,6 +29,7 @@ import TextField from '@mui/material/TextField';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { MenuContext } from '../../contexts/menu/MenuContext';
interface pldInterface {
tableData: any,
@ -39,6 +40,8 @@ interface pldInterface {
}
export default function pld({tableData, userName, clientMonth}: pldInterface) {
const {pldMenu, setPldMenu} = useContext(MenuContext)
const dateFormated = new Date()
const year_Month = `0${dateFormated.getMonth()+1}/${dateFormated.getFullYear()}`
@ -47,8 +50,6 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
const [select, setSelect] = useState('SUDESTE');
// rendering page
const [page, setPage] = useState<number>(0)
const [month, setMonth] = useState<any>(new Date().toLocaleDateString().slice(3, 10))
const [dataByDay, setDataByDay] = useState([])
@ -218,13 +219,13 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
<PageTitle title='PLD' subtitle='Evolução PLD - Valores em R$/MWh'/>
</Header>
<TableHeader>
<Tabs value={page} onChange={(e, nv) => setPage(nv)} aria-label="">
<Tabs value={pldMenu} onChange={(e, nv) => setPldMenu(nv)} aria-label="">
<Tab label="Pld Histórico"/>
<Tab label="Valores Diários"/>
<Tab label="Valores Horários"/>
</Tabs>
<div className='btnDownload'>
<RenderIf isTrue={page === 0}>
<RenderIf isTrue={pldMenu === 0}>
<BasicButton onClick={() => {
const html = document.querySelector("table").outerHTML;
htmlToCSV(html, "tabela_PLD.csv");
@ -233,7 +234,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
</div>
</TableHeader>
<RenderIf isTrue={page===0}>
<RenderIf isTrue={pldMenu===0}>
<PldTableView>
<table className="tg">
<thead>
@ -259,19 +260,32 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
</>
})
}
<tr>
<td style={{borderColor: 'transparent', borderBottomColor: '#DDDFE1'}}></td>
<td style={{borderColor: 'transparent', borderBottomColor: '#DDDFE1'}}></td>
<td style={{borderColor: 'transparent', borderBottomColor: '#DDDFE1'}}></td>
<td style={{borderColor: 'transparent', borderBottomColor: '#DDDFE1'}}></td>
<td style={{borderColor: 'transparent', borderBottomColor: '#DDDFE1'}}></td>
</tr>
</tbody>
</table>
{/* <section>
<article onClick={() => setPage(1)} className="btn btn-1">
<svg height='100px'>
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
</svg>
<p>Valores Diários</p>
</article>
<article onClick={() => setPage(2)} className="btn btn-1">
<svg height='100px'>
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
</svg>
<p>Valores Horários</p>
</article>
</section> */}
</PldTableView>
<PldTableView>
<table className='tg'>
<tbody>
{
tableData.result.map((data, index) => {
if (index === 0) {
return <>
<tr style={{borderTopLeftRadius: 8}}>
<td className='tg-gceh'>Máximo</td>
<tr>
<td style={{borderTopLeftRadius: 8}} className='tg-gceh'>Máximo</td>
<td className='tg-uulg'>{parseFloat(data.nordeste_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
<td className='tg-gceh'>{parseFloat(data.norte_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
<td className='tg-gceh'>{parseFloat(data.sudeste_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
@ -303,25 +317,11 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
}
</tbody>
</table>
{/* <section>
<article onClick={() => setPage(1)} className="btn btn-1">
<svg height='100px'>
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
</svg>
<p>Valores Diários</p>
</article>
<article onClick={() => setPage(2)} className="btn btn-1">
<svg height='100px'>
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
</svg>
<p>Valores Horários</p>
</article>
</section> */}
</PldTableView>
</RenderIf>
{/* grafico de grafico por seleção de data (mês)*/}
<RenderIf isTrue={page===1}>
<RenderIf isTrue={pldMenu===1}>
<PldGraphView>
<section className='toolsbar'>
<div className='select'>
@ -386,7 +386,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
</RenderIf>
{/* grafico de grafico por seleção de data INTEIRA*/}
<RenderIf isTrue={page===2}>
<RenderIf isTrue={pldMenu===2}>
<PldGraphView>
<section className='toolsbar2'>
{/* <p>Selecione a data: </p> */}

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

@ -18,7 +18,7 @@ import { api } from '../../services/api';
// import { dados } from '../services/DadosTabelaResumoOperacao';
import data from '../../services/dados.json'
import getAPIClient from '../../services/ssrApi';
import { Pagination, TableHeader, TableView } from '../../styles/layouts/ResumoOperacao/ResumoOperacaoView';
import { Pagination, TableBodyView, TableHeader, TableView } from '../../styles/layouts/ResumoOperacao/ResumoOperacaoView';
export default function ResumoOperacao({tableData, clients, userName, clientMonth}: any) {
const csvData = tableData;
@ -100,13 +100,12 @@ export default function ResumoOperacao({tableData, clients, userName, clientMont
<article>
<div className='select'>
<div>
<p>Selecionar unidade:</p>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={unidade}
value={clients.length > 1? unidade : clients[0]}
label="Unidade"
onChange={handleChangeUnidade}
fullWidth
@ -122,7 +121,6 @@ export default function ResumoOperacao({tableData, clients, userName, clientMont
</div>
<div>
<p>Selecionar mês:</p>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Mês</InputLabel>
<Select
@ -135,7 +133,16 @@ export default function ResumoOperacao({tableData, clients, userName, clientMont
>
<MenuItem value={''}>Todos</MenuItem>
{
clientMonth.map((value) => {
clientMonth.sort((a, b) => {
if (parseFloat(a.mes.slice(0, 2)) < parseFloat(b.mes.slice(0, 2)))
if (parseFloat(a.mes.slice(3, 7)) > parseFloat(b.mes.slice(3, 7))) return -1
else return 1
if (parseFloat(a.mes.slice(0, 2)) > parseFloat(b.mes.slice(0, 2)))
if (parseFloat(a.mes.slice(3, 7)) < parseFloat(b.mes.slice(3, 7))) return 1
else return -1
return 0
}).map((value) => {
return <MenuItem key={value.mes} value={value.mes}>{value.mes}</MenuItem>
})
}
@ -151,38 +158,37 @@ export default function ResumoOperacao({tableData, clients, userName, clientMont
}}/>
</article>
</TableHeader>
<table className="tg">
<thead>
<tr>
<th className='tg-8oo6'>Mês </th>
<th className='tg-8oo6'>Unidade </th>
<th className='tg-8oo6'>Operação</th>
<th className='tg-8oo6'>Montante (MWh)</th>
<th className='tg-8oo6'>Contraparte</th>
<th className='tg-8oo6'>Preço(R$/MWh)</th>
<th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
</tr>
</thead>
<tbody>
{
tableDataState.map((value, index) => {
if (value.mes.slice(4,7) != '2020')
return <tr>
<td key={value.mes} className='tg-gceh'>{value.mes}</td>
<td key={value.cod_smart_unidade} className='tg-gceh'>{value.cod_smart_unidade}</td>
<td key={value.operacao} className='tg-gceh'>{value.operacao}</td>
<td key={value.montante_nf} className='tg-gceh'>{parseFloat(value.montante_nf).toLocaleString('pt-br')}</td>
<td key={value.contraparte} className='tg-gceh'>{value.contraparte}</td>
<td key={value.preco_nf} className='tg-gceh'>{parseFloat(value.preco_nf).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td key={value.nf_c_icms} className='tg-gceh'>{parseFloat(value.nf_c_icms).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
</tr>
})
}
</tbody>
</table>
<div className='btn'>
</div>
<TableBodyView>
<table className="tg">
<thead>
<tr>
<th className='tg-8oo6'>Mês </th>
<th className='tg-8oo6'>Unidade </th>
<th className='tg-8oo6'>Operação</th>
<th className='tg-8oo6'>Contraparte</th>
<th className='tg-8oo6'>Montante (MWh)</th>
<th className='tg-8oo6'>Preço(R$/MWh)</th>
<th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
</tr>
</thead>
<tbody>
{
tableDataState.map((value, index) => {
if (value.mes.slice(4,7) != '2020')
return <tr>
<td key={value.mes} className='tg-gceh'>{value.mes}</td>
<td key={value.cod_smart_unidade} className='tg-gceh'>{value.cod_smart_unidade}</td>
<td key={value.operacao} className='tg-gceh'>{value.operacao}</td>
<td key={value.contraparte} className='tg-gceh'>{value.contraparte}</td>
<td key={value.montante_nf} className='tg-gceh'>{parseFloat(value.montante_nf).toLocaleString('pt-br')}</td>
<td key={value.preco_nf} className='tg-gceh'>{parseFloat(value.preco_nf).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td key={value.nf_c_icms} className='tg-gceh'>{parseFloat(value.nf_c_icms).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
</tr>
})
}
</tbody>
</table>
</TableBodyView>
</TableView>
)
}

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

@ -274,41 +274,6 @@ export default function Telemetria({userName, clients}: any) {
</FormControl>
</div>
{/* <div className='select'>
<p className='title' >Data inicial</p>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={startDate}
onChange={(value) => setStartDate(value.target.value)} min="2021-01-01"/>
</div> */}
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='select datePicker'>
<p className='title' >Data inicial</p>
<DesktopDatePicker
label="Date desktop"
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params}/>}
/>
</div>
<div className='select datePicker'>
<p className='title' >Data final</p>
<DesktopDatePicker
label="Date desktop"
inputFormat="dd/MM/yyyy"
value={endDate}
onChange={handleChangeEndDate}
renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>}
/>
</div>
</LocalizationProvider>
{/* <div className='select'>
<p className='title' >Data final</p>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={endDate}
onChange={(value) => setEndDate(value.target.value)} min="2021-01-01"/>
</div> */}
<div className='select'>
<p className='title' >Discretização</p>
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
@ -332,6 +297,40 @@ export default function Telemetria({userName, clients}: any) {
</Select>
</FormControl>
</div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='select datePicker'>
<p className='title' >Data inicial</p>
<DesktopDatePicker
label="Date desktop"
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params}/>}
/>
</div>
<div className='select datePicker'>
<p className='title' >Data final</p>
<DesktopDatePicker
label="Date desktop"
inputFormat="dd/MM/yyyy"
value={endDate}
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
:
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
:
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
:
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
:
new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
}
onChange={handleChangeEndDate}
renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>}
/>
</div>
</LocalizationProvider>
<BasicButton title='Selecionar!' onClick={() => {
setSend(true)
getTableData()

4
src/services/charts/telemetry/getPowerFactor.ts
View File

@ -14,9 +14,9 @@ export async function getPowerFactorData(
{"type" : "=", "field": "med_5min.ponto", "value": "PRAXCUENTR101P"},
{"type" : "between", "field": "dia_num", "value": ["2022-01-01", "2022-01-31"]}
]
}, {
}, {
headers: {
'Authorization': `Bearer 1260|RHfh3uMsEfHwCTqxKOhy1CEIr34UIln9OFdf5Fc8`
'Authorization': `Bearer 1292|E4jbc5ZWmgCCBMOVn4PvPx56MUbf4nUg5MNgxjmP`
}
})
return data.data

47
src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts
View File

@ -62,7 +62,7 @@ export const TableView = styled.div`
}
.tg .tg-gceh{
background-color:#efefef;
background-color: transparent;
color:#6a707e;
font-size:14px;
text-align:center;
@ -81,7 +81,11 @@ export const TableView = styled.div`
width: 10rem;
}
table, th:last-child{
table, th {
vertical-align: middle;
}
table, th:last-child {
border: transparent;
border-top-right-radius: 8px;
}
@ -90,6 +94,13 @@ export const TableView = styled.div`
border: transparent;
border-top-left-radius: 8px;
}
table, td {
border: transparent;
border-top-left-radius: 8px;
text-overflow: ellipsis;
}
`;
export const TableHeader = styled.section`
@ -156,3 +167,35 @@ export const NewTableLine = styled.section`
margin: 0 0 10px 0;
}
`
export const TableBodyView = styled.section`
border-radius: 8px;
background-color: #EFEFEF;
width: 100%;
border: rgb(221,223,225);
border-style:solid;
border-width: 1px;
tr {
:last-child {
/* background-color: red; */
border-bottom-color: transparent;
td {
:first-child {
border-left-color: transparent;
border-bottom-color: transparent;
/* background-color: red; */
}
:last-child {
border-right-color: transparent;
border-bottom-color: transparent;
}
}
}
}
`

4
src/styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView.ts
View File

@ -10,9 +10,5 @@ export const AccumulatedSavingsView = styled.main`
display: flex;
justify-content: center;
align-items: center;
canvas {
width: 80%;
}
}
`

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

@ -195,6 +195,18 @@ export const PldTableView = styled.div`
transform: translateY(-6px);
}
}
.space {
background-color: #F7F7F7;
border-color: transparent;
border-bottom-color: #DDDFE1;
height: 15px!important;
padding: 0!important;
}
`
export const PldGraphView = styled.main`

2
tsconfig.json
View File

@ -19,7 +19,7 @@
"isolatedModules": true,
"jsx": "preserve"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts", "src/contexts/economy/EconomyContext.tss"],
"exclude": [
"node_modules"
]

37
yarn.lock
View File

@ -2009,15 +2009,45 @@ chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
"chart.js@>= 2.6.0 < 3":
version "2.9.4"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
dependencies:
chartjs-color "^2.1.0"
moment "^2.10.2"
chart.js@^3.7.1:
version "3.7.1"
resolved "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz"
chartjs-color-string@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
dependencies:
color-name "^1.0.0"
chartjs-color@^2.1.0:
version "2.4.1"
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
dependencies:
chartjs-color-string "^0.6.0"
color-convert "^1.9.3"
chartjs-plugin-datalabels@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.0.0.tgz#caacefb26803d968785071eab012dde8746c5939"
integrity sha512-WBsWihphzM0Y8fmQVm89+iy99mmgejmj5/jcsYqwxSioLRL/zqJ4Scv/eXq5ZqvG3TpojlGzZLeaOaSvDm7fwA==
chartjs-plugin-style@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/chartjs-plugin-style/-/chartjs-plugin-style-0.5.0.tgz#ba31deb016cf0d29c73e420bb40778f89cdfabd4"
integrity sha512-QWMWRGpkexgMTHZg2l1OVtnSkElGNAM0MchozG/ucU6NW0xXINS/YsIE2tl7nG1nwZA2FH/myVbI4uMguIAXPA==
dependencies:
chart.js ">= 2.6.0 < 3"
chownr@^1.1.1:
version "1.1.4"
resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
@ -2091,7 +2121,7 @@ cmd-shim@^5.0.0:
dependencies:
mkdirp-infer-owner "^2.0.0"
color-convert@^1.9.0:
color-convert@^1.9.0, color-convert@^1.9.3:
version "1.9.3"
resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
dependencies:
@ -3711,6 +3741,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
moment@^2.10.2:
version "2.29.4"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
ms@2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"