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

Merge branch 'telemetry' into 'dev'

Browse Source 
more issus pointed

See merge request kluppsoftware/smart-energia-web!116
This commit is contained in:
José Corte 2022-07-20 03:31:30 +00:00
commit 67cd3ad8e0
23 changed files with 635 additions and 572 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/graph/Chart.tsx
View File

@ -101,7 +101,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
data: data2.map(value => value.custo_unit>0? value.custo_unit : null), data: data2.map(value => value.custo_unit>0? value.custo_unit : null),
// backgroundColor: '#C2d5fb' // backgroundColor: '#C2d5fb'
backgroundColor: (value, ctx) => { backgroundColor: (value, ctx) => {
return data2[value.dataIndex]?.dad_estimado == false ? '#C2d5fb' : draw('diagonal-right-left', '#C2d5fb'); return data2[value.dataIndex]?.dad_estimado == false ? '#C2d5fb' : document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null;
}, },
} }
], ],

2
src/components/graph/Chart2.tsx
View File

@ -102,7 +102,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
type: 'bar', type: 'bar',
label: 'Estimado', label: 'Estimado',
data: data2.map(value => value.dad_estimado? value?.economia_acumulada : null), data: data2.map(value => value.dad_estimado? value?.economia_acumulada : null),
backgroundColor: draw('diagonal-right-left', '#C2d5fb') backgroundColor: document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null
}, },
], ],
} }

6
src/components/graph/ChartView.ts
View File

@ -1,7 +1,11 @@
import styled from "styled-components" import styled from "styled-components"
export const ChartView = styled.div` export const ChartView = styled.div`
width: 100%!important; display: flex;
align-items: center;
justify-content: center;
width: 100%;
div{ div{
/* margin-top: 10px; */ /* margin-top: 10px; */

2
src/components/graph/DemRegXDemConChart.tsx
View File

@ -155,7 +155,7 @@ export function DemRegXDemConChart({
return ( return (
<ChartView> <ChartView>
{/* <ChartTitle title={title} subtitle={subtitle}/> */} {/* <ChartTitle title={title} subtitle={subtitle}/> */}
<div> <div style={{width: '90%'}}>
<Chart ref={chartRef} type='bar' options={options} data={data} /> <Chart ref={chartRef} type='bar' options={options} data={data} />
</div> </div>
</ChartView> </ChartView>

2
src/components/graph/DiscretizedConsumptionChart.tsx
View File

@ -98,7 +98,7 @@ export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label,
return ( return (
<ChartView> <ChartView>
{/* <ChartTitle title={title} subtitle={subtitle}/> */} {/* <ChartTitle title={title} subtitle={subtitle}/> */}
<div> <div style={{width: '90%'}}>
<Chart type='bar' options={options} data={data} /> <Chart type='bar' options={options} data={data} />
</div> </div>
</ChartView> </ChartView>

4
src/components/graph/LineBarChart.tsx
View File

@ -179,9 +179,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
return ( return (
<ChartView> <ChartView>
<ChartTitle title={title} subtitle={subtitle}/> <ChartTitle title={title} subtitle={subtitle}/>
<div> <Chart ref={chartRef} type='bar' options={options} data={data} />
<Chart ref={chartRef} type='bar' options={options} data={data} />
</div>
</ChartView> </ChartView>
) )
} }

2
src/components/graph/SingleBar.tsx
View File

@ -104,7 +104,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel
return parseFloat(value.economia_acumulada).toFixed(2) return parseFloat(value.economia_acumulada).toFixed(2)
}), }),
backgroundColor: (value, ctx) => { backgroundColor: (value, ctx) => {
return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb'); return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null;
}, },
}, },
{ {

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

@ -136,7 +136,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
}, },
borderWidth: 2, borderWidth: 2,
fill: false, fill: false,
data: chartData.map(value => parseInt(value.economia_mensal)), data: chartData?.map(value => parseInt(value.economia_mensal)),
}, },
{ {
type: 'bar' as const, type: 'bar' as const,
@ -144,7 +144,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
backgroundColor: (value, ctx) => { backgroundColor: (value, ctx) => {
return '#C2D5FB' return '#C2D5FB'
}, },
data: chartData.map(value => { data: chartData?.map(value => {
if (!value.dad_estimado) if (!value.dad_estimado)
return parseInt(value.custo_cativo) return parseInt(value.custo_cativo)
}), }),
@ -156,7 +156,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
backgroundColor: (value, ctx) => { backgroundColor: (value, ctx) => {
return '#255488' return '#255488'
}, },
data: chartData.map(value => { data: chartData?.map(value => {
if (!value.dad_estimado) if (!value.dad_estimado)
return parseInt(value.custo_livre) return parseInt(value.custo_livre)
}), }),
@ -165,7 +165,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
type: 'bar', type: 'bar',
label: 'Est. Cativo', label: 'Est. Cativo',
backgroundColor: pattern.draw('diagonal', '#C2D5FB'), backgroundColor: pattern.draw('diagonal', '#C2D5FB'),
data: chartData.map(value => { data: chartData?.map(value => {
if (value.dad_estimado) if (value.dad_estimado)
return parseInt(value.custo_cativo) return parseInt(value.custo_cativo)
}), }),
@ -174,7 +174,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
type: 'bar', type: 'bar',
label: 'Est. Livre', label: 'Est. Livre',
backgroundColor: pattern.draw('diagonal', '#255488'), backgroundColor: pattern.draw('diagonal', '#255488'),
data: chartData.map(value => { data: chartData?.map(value => {
if (value.dad_estimado) if (value.dad_estimado)
return parseInt(value.custo_livre) return parseInt(value.custo_livre)
}), }),

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

@ -89,7 +89,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
datasets: [ datasets: [
{ {
label: '2021', label: '2021',
data: data1.map(value => value.custo_unit>0? value.custo_unit : null), data: data1?.map(value => value.custo_unit>0? value.custo_unit : null),
// backgroundColor: '#C2d5fb' // backgroundColor: '#C2d5fb'
backgroundColor: (value, ctx) => { backgroundColor: (value, ctx) => {
if (value.dad_estimado) if (value.dad_estimado)
@ -100,7 +100,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
}, },
{ {
label: '2022', label: '2022',
data: data2.map(value => value.custo_unit>0? value.custo_unit : null), data: data2?.map(value => value.custo_unit>0? value.custo_unit : null),
// backgroundColor: '#255488' // backgroundColor: '#255488'
backgroundColor: (value, ctx) => { backgroundColor: (value, ctx) => {
if (value.dad_estimado) if (value.dad_estimado)

6
src/components/graph/fatorPotenciaChart.tsx
View File

@ -82,6 +82,8 @@ export default function FatorPotenciaChart({ title, subtitle, data1, data2, labe
const labels = label; const labels = label;
console.log(data1)
const data = { const data = {
labels, labels,
datasets: [ datasets: [
@ -106,7 +108,9 @@ export default function FatorPotenciaChart({ title, subtitle, data1, data2, labe
return ( return (
<ChartView> <ChartView>
{/* <ChartTitle title={title} subtitle={subtitle} /> */} {/* <ChartTitle title={title} subtitle={subtitle} /> */}
<Line options={options} data={data} /> <div style={{width: '90%'}}>
<Line options={options} data={data} />
</div>
</ChartView> </ChartView>
) )
} }

19
src/components/graph/graphCard/ChartCard.tsx
View File

@ -33,7 +33,6 @@ export default function ChartCard({ title, subtitle, consumption, className, lin
const labels = ['0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8',]; const labels = ['0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8',];
const data = { const data = {
labels, labels,
datasets: [ datasets: [
@ -43,24 +42,6 @@ export default function ChartCard({ title, subtitle, consumption, className, lin
borderColor: 'rgb(53, 162, 235)', borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0.5)', backgroundColor: 'rgba(53, 162, 235, 0.5)',
}, },
// {
// label: 'Dataset 2',
// data: [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
// borderColor: 'rgb(255, 114, 32)',
// backgroundColor: 'rgba(255, 145, 0, 0.5)',
// },
// {
// label: 'Dataset 3',
// data: [1, 2, 3, 5, 7, 8, 9, 8, 9, 7, 8, 6, 4, 3, 2, 3, 3, 4, 4, 5, 5, 5, 6, 6, 7, 7, 9, 10, 11, 12, 12, 14, 15, 17, 20, 21, 18, 15, 14, 12, 11, 10, 8, 6, 7, 8, 7, 9],
// borderColor: 'rgb(109, 109, 109)',
// backgroundColor: 'rgba(90, 90, 90, 0.5)',
// },
// {
// label: 'Dataset4',
// data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
// borderColor: 'rgb(255, 166, 0)',
// backgroundColor: 'rgba(255, 187, 0, 0.5)',
// },
], ],
}; };

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

@ -30,7 +30,7 @@ interface SingleBarInterface{
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) { 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? ' ' : ''
console.log(string.length) console.log(string.length)

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

@ -43,7 +43,8 @@ interface ChartInterface {
export default function GrossMensalChart({ title, data1, data2, label, subtitle, miniature }: ChartInterface) { export default function GrossMensalChart({ title, data1, data2, label, subtitle, miniature }: ChartInterface) {
function spacement(string) { 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? ' ' : ''
// const spaces = string.length===1?'' : string.length===2? '⠀⠀⠀⠀' : string.length===3? '⠀⠀⠀' : string.length===4? '⠀⠀' : string.length===5? '⠀' : ''
console.log(string.length) console.log(string.length)

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

@ -64,39 +64,45 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
</section> </section>
</Link> </Link>
<section className='dashboard'> {
<GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil'> typeof window === 'undefined' || typeof window === undefined? null :
<GrossAnualChart title='' subtitle='' <>
dataset='Consolidada' <section className='dashboard'>
dataProps={grossAnualGraph} <GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil'>
label={grossAnualYears} barLabel bruta miniature/> <GrossAnualChart title='' subtitle=''
</GraphCard> dataset='Consolidada'
dataProps={grossAnualGraph}
label={grossAnualYears} barLabel bruta miniature/>
</GraphCard>
<GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil' singleBar> <GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil' singleBar>
<GrossMensalChart title='' subtitle='' <GrossMensalChart title='' subtitle=''
data1={grossMensalGraph} data1={grossMensalGraph}
data2={grossMensalGraph} data2={grossMensalGraph}
label={grossMensalGraph.map((value) => value.mes)} label={grossMensalGraph.map((value) => value.mes)}
miniature miniature
/> />
</GraphCard> </GraphCard>
<GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' singleBar> <GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' singleBar>
<CativoXLivreChart chartData={acumulatedGraph} <CativoXLivreChart chartData={acumulatedGraph}
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre' dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado miniature/> label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado miniature/>
</GraphCard> </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(4, 8).includes('2021'))}
// data1={graphData}
data2={costIndicator.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
label={months}
miniature
/>
</GraphCard>
</section>
</>
}
<GraphCard title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'>
<CostIndicatorChart title='' subtitle=''
data1={costIndicator.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
// data1={graphData}
data2={costIndicator.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
label={months}
miniature
/>
</GraphCard>
</section>
</DashboardView> </DashboardView>
) )
} }

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

@ -37,6 +37,8 @@ import { ConsumoEstimado } from '../../services/consumoEstimado';
import CostIndicatorChart from '../../components/graph/costIndicatorChart'; import CostIndicatorChart from '../../components/graph/costIndicatorChart';
import { EconomyView } from '../../styles/layouts/economy/economy'; import { EconomyView } from '../../styles/layouts/economy/economy';
import dynamic from 'next/dynamic';
export default function economy({userName, anual, years, brutaMensal, yearsBrutaMensal, catLiv, clients, indicatorCost}: any) { export default function economy({userName, anual, years, brutaMensal, yearsBrutaMensal, catLiv, clients, indicatorCost}: any) {
const {economyMenu, setEconomyMenu} = useContext(MenuContext) const {economyMenu, setEconomyMenu} = useContext(MenuContext)
@ -74,20 +76,20 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
}, [unity]) }, [unity])
useEffect(() => { useEffect(() => {
api.post('/economy/estimates', unity!==''?{ api.post('/economy/MWh', unity!==''?{
"filters": [ "filters": [
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity} {"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity}
] ]
}:{}).then(res => { }:{}).then(res => {
setIndicatorDataState(res.data.data) setIndicatorDataState(res.data.data)
console.log() console.log('res', res.data.data)
}).catch(res => { }).catch(res => {
// console.log(res) // console.log(res)
}) })
}, [unity]) }, [unity])
return ( return (
<EconomyView style={{width: '100%'}}> <EconomyView>
<Head> <Head>
<title>Smart Energia - PLD</title> <title>Smart Energia - PLD</title>
</Head> </Head>
@ -105,88 +107,94 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
</Tabs> </Tabs>
</TableHeader> </TableHeader>
<RenderIf isTrue={economyMenu===0}> {
<section> typeof window === 'undefined' || typeof window === undefined? null :
<GrossAnualChart title='' subtitle='' <>
dataset='Consolidada' <RenderIf isTrue={economyMenu===0}>
<section>
<GrossAnualChart title='' subtitle=''
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}>
<GrossMensalChart title='' subtitle='' <section>
data1={brutaMensal} <GrossMensalChart title='' subtitle=''
data2={brutaMensal} data1={brutaMensal}
label={yearsBrutaMensal} data2={brutaMensal}
/> label={yearsBrutaMensal}
</RenderIf> />
</section>
</RenderIf>
<RenderIf isTrue={economyMenu===2}> <RenderIf isTrue={economyMenu===2}>
<div style={{paddingLeft: '7%'}}> <div style={{paddingLeft: '7%'}}>
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small"> <FormControl sx={{ m: 1, minWidth: 120, width: 200, height: '64px' }} 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"
onChange={value => setUnity(value.target.value)} sx={{height: '64px'}}
fullWidth onChange={value => setUnity(value.target.value)}
> fullWidth
<MenuItem value="">Todas</MenuItem> >
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> !!OPÇAO COM DADOS TESTES!! */} <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> clients.map((value) => {
}) return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
} })
</Select> }
</FormControl> </Select>
</div> </FormControl>
<section> </div>
<CativoXLivreChart chartData={unity!==''? catLivDataState : catLiv} <section>
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre' <CativoXLivreChart chartData={unity!==''? catLivDataState : catLiv}
label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado/> dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
</section> label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado/>
</RenderIf> </section>
</RenderIf>
<RenderIf isTrue={economyMenu===3}>
<div style={{paddingLeft: '7%'}}>
<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, index) => value.mes.slice(4, 8).includes('2021'))}
data2={indicatorDataState?.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
label={months}
/>
</section>
</RenderIf>
</>
}
<RenderIf isTrue={economyMenu===3}>
<div style={{paddingLeft: '7%'}}>
<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>
</div>
<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>
</EconomyView> </EconomyView>
) )
} }

3
src/pages/news/index.tsx
View File

@ -49,7 +49,8 @@ export default function aboutUs({userName, news}: any) {
<a href='https://www.energiasmart.com.br/noticias/' <a href='https://www.energiasmart.com.br/noticias/'
target={"_blank"} target={"_blank"}
rel={"noreferrer"}><BasicButton title='Noticias Atualizadas' onClick={() => console.log()}/></a> rel={"noreferrer"}>Ver Mais</a>
</NewsView> </NewsView>
</main> </main>
) )

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

@ -197,7 +197,7 @@ export default function Telemetria({userName, clients}: any) {
}, [discretization]) }, [discretization])
return( return(
<TelemetriaView> <main style={{width: '100%'}}>
<Head> <Head>
<title>Smart Energia - Telemetria</title> <title>Smart Energia - Telemetria</title>
</Head> </Head>
@ -245,443 +245,445 @@ export default function Telemetria({userName, clients}: any) {
<Header name={userName}> <Header name={userName}>
<PageTitle title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia'/> <PageTitle title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia'/>
</Header> </Header>
{/* <Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia - <TelemetriaView>
SCDE da Câmara de Comercialização de Energia Elétrica - CCEE, {/* <Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
sendo que as quantidades aqui informadas são de responsabilidade do agente de medição SCDE da Câmara de Comercialização de Energia Elétrica - CCEE,
- Distribuidora.' imgSource='/assets/graphical.png' /> */} sendo que as quantidades aqui informadas são de responsabilidade do agente de medição
- Distribuidora.' imgSource='/assets/graphical.png' /> */}
<RenderIf isTrue={true}> <RenderIf isTrue={true}>
<TableHeader> <TableHeader>
<Tabs value={menu} onChange={(e, nv) => setMenu(nv)} aria-label=""> <Tabs value={menu} onChange={(e, nv) => setMenu(nv)} aria-label="">
<Tab label={ <Tab label={
discretization==='5_min'? 'Consumo discretizado em 5 minutos' : discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='15_min'? 'Consumo discretizado em 15 minutos' :
discretization==='1_hora'? 'Consumo discretizado em 1 hora' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' :
'Consumo discretizado em 1 dia'}/> 'Consumo discretizado em 1 dia'}/>
<Tab label="Demanda"/> <Tab label="Demanda"/>
<Tab label="Fator Potencia"/> <Tab label="Fator Potencia"/>
<Tab label="Mês Atual"/> <Tab label="Mês Atual"/>
</Tabs> </Tabs>
</TableHeader> </TableHeader>
<RenderIf isTrue={menu===0}> <RenderIf isTrue={menu===0}>
<ChartFilters> <ChartFilters>
<div className='input'> <div className='input'>
<FormControl style={{ minWidth: 100, width: 200}} size="small"> <FormControl style={{ minWidth: 100, width: 200}} size="small">
<InputLabel>Unidade</InputLabel> <InputLabel>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"
onChange={value => setUnity(value.target.value)} onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 0.5}} sx={{height: 63, mb: 2}}
fullWidth fullWidth
> >
<MenuItem value=""> <MenuItem value="">
<em>Nenhum</em> <em>Nenhum</em>
</MenuItem> </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.codigo_scde}>{value.unidade}</MenuItem> return <MenuItem key={1} value={value.codigo_scde}>{value.unidade}</MenuItem>
}) })
} }
</Select> </Select>
</FormControl> </FormControl>
</div>
<div className='input'>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem>
</Select>
</FormControl>
</div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='datePicker'>
<DesktopDatePicker
label="Data inicial"
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params}/>}
/>
</div> </div>
<div className='datePicker' style={{marginRight: 10}}> <div className='input'>
<DesktopDatePicker <FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
label="Data final" <InputLabel>Discretização</InputLabel>
inputFormat="dd/MM/yyyy" <Select
value={endDate} labelId="demo-select-small"
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2) id="demo-select-small"
: value={discretization}
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2) label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 2}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
{/* <MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem> */}
</Select>
</FormControl>
</div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='datePicker'>
<DesktopDatePicker
label="Data inicial"
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
/>
</div>
<div className='datePicker' style={{marginRight: 10}}>
<DesktopDatePicker
label="Data final"
inputFormat="dd/MM/yyyy"
value={endDate}
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
: :
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1) discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
: :
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7) discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
: :
new Date(startDate).setUTCDate(startDate.getUTCDate()+1) discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
} :
onChange={(newValue: any) => handleChangeEndDate(newValue)} new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>} }
/> onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
/>
</div>
</LocalizationProvider>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
getDiscretization(unity, startDate, endDate, discretization)
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception))
}}/>
</div> </div>
</LocalizationProvider> </ChartFilters>
<div className='select'> {/* <RenderIf isTrue={discretization!=='1_dia' && discretization!=='1_mes'}> */}
<BasicButton title='Selecionar!' onClick={() => { <DiscretizedConsumptionChart title={
getDiscretization(unity, startDate, endDate, discretization) discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
.then(result => setDiscretizedConsumptionData(result)) discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
.catch(exception => console.log(exception)) } subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
}}/> {/* <p style={{alignSelf: 'center', textAlign: 'center'}}>{`Mês - ${startDate}`}</p> */}
</div> {/* </RenderIf> */}
</ChartFilters> </RenderIf>
{/* <RenderIf isTrue={discretization!=='1_dia' && discretization!=='1_mes'}> */}
<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}`}</p> */}
{/* </RenderIf> */}
</RenderIf>
<RenderIf isTrue={menu===1}> <RenderIf isTrue={menu===1}>
<ChartFilters> <ChartFilters>
<div className='input'> <div className='input'>
<FormControl sx={{ minWidth: 100, width: 200 }} size="small"> <FormControl style={{ minWidth: 100, width: 200}} size="small">
<InputLabel>Unidade</InputLabel> <InputLabel>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"
onChange={value => setUnity(value.target.value)} onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 0.5}} sx={{height: 63, mb: 2}}
fullWidth fullWidth
> >
<MenuItem value=""> <MenuItem value="">
<em>Nenhum</em> <em>Nenhum</em>
</MenuItem> </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.codigo_scde}>{value.unidade}</MenuItem> return <MenuItem key={1} value={value.codigo_scde}>{value.unidade}</MenuItem>
}) })
} }
</Select> </Select>
</FormControl> </FormControl>
</div>
<div className='input'>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem>
</Select>
</FormControl>
</div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='datePicker'>
<DesktopDatePicker
label="Data inicial"
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params}/>}
/>
</div> </div>
<div className='datePicker' style={{marginRight: 10}}> <div className='input'>
<DesktopDatePicker <FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
label="Data final" <InputLabel>Discretização</InputLabel>
inputFormat="dd/MM/yyyy" <Select
value={endDate} labelId="demo-select-small"
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2) id="demo-select-small"
: value={discretization}
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2) label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 2}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem>
</Select>
</FormControl>
</div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='datePicker'>
<DesktopDatePicker
label="Data inicial"
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
/>
</div>
<div className='datePicker' style={{marginRight: 10}}>
<DesktopDatePicker
label="Data final"
inputFormat="dd/MM/yyyy"
value={endDate}
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
: :
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1) discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
: :
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7) discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
: :
new Date(startDate).setUTCDate(startDate.getUTCDate()+1) discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
} :
onChange={(newValue: any) => handleChangeEndDate(newValue)} new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>} }
/> onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
/>
</div>
</LocalizationProvider>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
getDemand(unity, startDate, endDate, discretization)
.then(result => setDemRegXDemCon(result))
.catch(exception => console.log(exception))
}}/>
</div> </div>
</LocalizationProvider> </ChartFilters>
<div className='select'> <DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon}
<BasicButton title='Selecionar!' onClick={() => { dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'}
getDiscretization(unity, startDate, endDate, discretization) label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
.then(result => setDiscretizedConsumptionData(result)) </RenderIf>
.catch(exception => console.log(exception))
}}/>
</div>
</ChartFilters>
<DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon}
dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'}
label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
</RenderIf>
<RenderIf isTrue={menu===2}> <RenderIf isTrue={menu===2}>
<ChartFilters> <ChartFilters>
<div className='input'> <div className='input'>
<FormControl sx={{ minWidth: 100, width: 200 }} size="small"> <FormControl style={{ minWidth: 100, width: 200}} size="small">
<InputLabel>Unidade</InputLabel> <InputLabel>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"
onChange={value => setUnity(value.target.value)} onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 0.5}} sx={{height: 63, mb: 2}}
fullWidth fullWidth
> >
<MenuItem value=""> <MenuItem value="">
<em>Nenhum</em> <em>Nenhum</em>
</MenuItem> </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.codigo_scde}>{value.unidade}</MenuItem> return <MenuItem key={1} value={value.codigo_scde}>{value.unidade}</MenuItem>
}) })
} }
</Select> </Select>
</FormControl> </FormControl>
</div>
<div className='input'>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem>
</Select>
</FormControl>
</div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='datePicker'>
<DesktopDatePicker
label="Data inicial"
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params}/>}
/>
</div> </div>
<div className='datePicker' style={{marginRight: 10}}> <div className='input'>
<DesktopDatePicker <FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
label="Data final" <InputLabel>Discretização</InputLabel>
inputFormat="dd/MM/yyyy" <Select
value={endDate} labelId="demo-select-small"
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2) id="demo-select-small"
: value={discretization}
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2) label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 2}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem>
</Select>
</FormControl>
</div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='datePicker'>
<DesktopDatePicker
label="Data inicial"
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
/>
</div>
<div className='datePicker' style={{marginRight: 10}}>
<DesktopDatePicker
label="Data final"
inputFormat="dd/MM/yyyy"
value={endDate}
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
: :
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1) discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
: :
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7) discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
: :
new Date(startDate).setUTCDate(startDate.getUTCDate()+1) discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
} :
onChange={(newValue: any) => handleChangeEndDate(newValue)} new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>} }
/> onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
/>
</div>
</LocalizationProvider>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
getPowerFactorData(unity, startDate, endDate, discretization)
.then(result => setFatorPotenciaData(result))
.catch(exception => console.log(exception))
}}/>
</div> </div>
</LocalizationProvider> </ChartFilters>
<div className='select'> <FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
<BasicButton title='Selecionar!' onClick={() => { data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => parseFloat(value.dia_num))} />
getDiscretization(unity, startDate, endDate, discretization) </RenderIf>
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception)) <RenderIf isTrue={menu===3}>
}}/> <ChartFilters>
</div> <div className='input'>
</ChartFilters> <FormControl sx={{ minWidth: 100, width: 200 }} size="small">
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData} <InputLabel>Unidade</InputLabel>
data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => parseFloat(value.dia_num))} /> <Select
labelId="demo-select-small"
id="demo-select-small"
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
{
clients.map((value) => {
return <MenuItem key={1} value={value.codigo_scde}>{value.unidade}</MenuItem>
})
}
</Select>
</FormControl>
</div>
<div className='input'>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem>
</Select>
</FormControl>
</div>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
getDemand(unity, startDate, endDate, discretization)
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception))
}}/>
</div>
</ChartFilters>
<DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon}
dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'}
label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
</RenderIf>
</RenderIf> </RenderIf>
<RenderIf isTrue={menu===3}> <RenderIf isTrue={startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && tableData===null && exception === false && send}>
<ChartFilters> <div className='modal'>
<div className='input'> <div id="preloader_1">
<FormControl sx={{ minWidth: 100, width: 200 }} size="small"> <span></span>
<InputLabel>Unidade</InputLabel> <span></span>
<Select <span></span>
labelId="demo-select-small" <span></span>
id="demo-select-small" <span></span>
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
{
clients.map((value) => {
return <MenuItem key={1} value={value.codigo_scde}>{value.unidade}</MenuItem>
})
}
</Select>
</FormControl>
</div> </div>
<div className='input'>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem>
</Select>
</FormControl>
</div>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
getDiscretization(unity, startDate, endDate, discretization)
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception))
}}/>
</div>
</ChartFilters>
<DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon}
dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'}
label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
</RenderIf>
</RenderIf>
<RenderIf isTrue={startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && tableData===null && exception === false && send}>
<div className='modal'>
<div id="preloader_1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div> </div>
</div> </RenderIf>
</RenderIf> <RenderIf isTrue={startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && tableData!==null}>
<RenderIf isTrue={startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && tableData!==null}> <table className="tg">
<table className="tg"> <thead>
<thead> <tr>
<tr> <th className='tg-8oo6'>Ponto</th>
<th className='tg-8oo6'>Ponto</th> <th className='tg-8oo6'>Numero do dia</th>
<th className='tg-8oo6'>Numero do dia</th> <th className='tg-8oo6'>Dia formatado</th>
<th className='tg-8oo6'>Dia formatado</th> <th className='tg-8oo6'>Hora</th>
<th className='tg-8oo6'>Hora</th> <th className='tg-8oo6'>Minuto</th>
<th className='tg-8oo6'>Minuto</th> <th className='tg-8oo6'>Consumo</th>
<th className='tg-8oo6'>Consumo</th> <th className='tg-8oo6'>Reativa</th>
<th className='tg-8oo6'>Reativa</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> {
{ tableData!==null?
tableData!==null? tableData?.map((value, index) => {
tableData?.map((value, index) => { return <>
return <> <tr>
<tr> <td key={index} className='tg-gceh'>{value.ponto}</td>
<td key={index} className='tg-gceh'>{value.ponto}</td> <td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td> <td key={index} className='tg-uulg'>{value.day_formatted}</td>
<td key={index} className='tg-uulg'>{value.day_formatted}</td> <td key={index} className='tg-gceh'>{value.hora}</td>
<td key={index} className='tg-gceh'>{value.hora}</td> <td key={index} className='tg-gceh'>{value.minut}</td>
<td key={index} className='tg-gceh'>{value.minut}</td> <td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td> <td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td> </tr>
</tr> </>
</> })
}) :
: null
null }
</tbody>
</table>
</RenderIf>
<RenderIf isTrue={showChart}>
<DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={demRegXDemCon?.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
</RenderIf>
<Buttons>
{/* <GradientButton title='DADOS' description='CLIQUE AQUI PARA GERAR GRÁFICO DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} purple /> */}
{/* <GradientButton title='GRÁFICO' description='CLIQUE AQUI PARA GERAR GRÁFICO DO PERÍODO SELECIONADO' onClick={() => handleVerifyFields()} orange /> */}
<GradientButton title='DOWNLOADS' description={`CLIQUE AQUI PARA BAIXAR OS DADOS EM FORMATO EXCEL DO PERÍODO SELECIONADO`} green onClick={() => {
if (send) {
const html = document.querySelector("table").outerHTML;
htmlToCSV(html, "telemetria.csv");
} }
</tbody> else {
</table> setSend(true)
</RenderIf> getTableData()
}
}}/>
</Buttons>
<p className='paragraph'>
<i>
Fonte: Dados coletados do Sistema de Coleta de Dados
de Energia - SCDE da Câmara de Comercialização <br/>
Energia Elétrica – CCEE, sendo que as quantidades aqui
informadas são de responsabilidade <br/>do agente de
medição - Distribuidora.
</i>
</p>
<RenderIf isTrue={showChart}> </TelemetriaView>
<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/> </main>
</RenderIf>
<Buttons>
{/* <GradientButton title='DADOS' description='CLIQUE AQUI PARA GERAR GRÁFICO DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} purple /> */}
{/* <GradientButton title='GRÁFICO' description='CLIQUE AQUI PARA GERAR GRÁFICO DO PERÍODO SELECIONADO' onClick={() => handleVerifyFields()} orange /> */}
<GradientButton title='DOWNLOADS' description={`CLIQUE AQUI PARA BAIXAR OS DADOS EM FORMATO EXCEL DO PERÍODO SELECIONADO`} green onClick={() => {
if (send) {
const html = document.querySelector("table").outerHTML;
htmlToCSV(html, "telemetria.csv");
}
else {
setSend(true)
getTableData()
}
}}/>
</Buttons>
<p className='paragraph'>
<i>
Fonte: Dados coletados do Sistema de Coleta de Dados
de Energia - SCDE da Câmara de Comercialização <br/>
Energia Elétrica – CCEE, sendo que as quantidades aqui
informadas são de responsabilidade <br/>do agente de
medição - Distribuidora.
</i>
</p>
</TelemetriaView>
) )
} }

1
src/services/charts/telemetry/getDemand.ts
View File

@ -10,6 +10,7 @@ export async function getDemand(
) { ) {
const { '@smartAuth-token': token } = parseCookies() const { '@smartAuth-token': token } = parseCookies()
const { data } = await api.post('https://smart-energia-api.herokuapp.com/api/telemetry/demand', { const { data } = await api.post('https://smart-energia-api.herokuapp.com/api/telemetry/demand', {
"type": discretization,
"filters": [ "filters": [
{"type" : "=", "field": `med_5min.ponto`, "value": unity}, {"type" : "=", "field": `med_5min.ponto`, "value": unity},
{"type" : "between", "field": "dia_num", "value": [startDate.toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString().split('/').reverse().join('-')]} {"type" : "between", "field": "dia_num", "value": [startDate.toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString().split('/').reverse().join('-')]}

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

@ -9,6 +9,7 @@ export async function getPowerFactorData(
discretization: string discretization: string
) { ) {
const { data } = await api.post('http://smart-energia-api.herokuapp.com/api/telemetry/powerFactor', { const { data } = await api.post('http://smart-energia-api.herokuapp.com/api/telemetry/powerFactor', {
"type": discretization,
"filters": [ "filters": [
{"type" : "=", "field": "med_5min.ponto", "value": unity}, {"type" : "=", "field": "med_5min.ponto", "value": unity},
{"type" : "between", "field": "dia_num", "value": [startDate.toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString().split('/').reverse().join('-')]} {"type" : "between", "field": "dia_num", "value": [startDate.toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString().split('/').reverse().join('-')]}

2
src/styles/globals.ts
View File

@ -44,7 +44,7 @@ export const GlobalStyle = createGlobalStyle`
.MuiOutlinedInput-input, .MuiInputBase-input, .MuiInputBase-inputAdornedEnd, .css-nxo287-MuiInputBase-input-MuiOutlinedInput-input { .MuiOutlinedInput-input, .MuiInputBase-input, .MuiInputBase-inputAdornedEnd, .css-nxo287-MuiInputBase-input-MuiOutlinedInput-input {
padding: 0 0 0 15px; padding: 0 0 0 15px;
width: 100%; width: 100%;
height: 63px!important; height: 63px;
} }
.css-1u3bzj6-MuiFormControl-root-MuiTextField-root, .css-1u3bzj6-MuiFormControl-root-MuiTextField-root,
.css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root, .css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root,

18
src/styles/layouts/Telemetria/TelemetriaView.ts
View File

@ -7,7 +7,7 @@ export const TelemetriaView = styled.main`
flex-direction: column; flex-direction: column;
padding: 20px; padding: 0;
width: 100%; width: 100%;
.modal { .modal {
@ -95,14 +95,12 @@ export const TelemetriaView = styled.main`
table { table {
display: none; display: none;
} }
.tg{ .tg{
border-collapse:collapse; border-collapse:collapse;
border-spacing:0; border-spacing:0;
font-family:Poppins; font-family:Poppins;
width: 100%; width: 100%;
} }
.tg td{ .tg td{
border-color:#DDDFE1; border-color:#DDDFE1;
border-style:solid; border-style:solid;
@ -113,7 +111,6 @@ export const TelemetriaView = styled.main`
padding:17px 30px; padding:17px 30px;
word-break:normal; word-break:normal;
} }
.tg th{ .tg th{
border-color:#DDDFE1; border-color:#DDDFE1;
border-style:solid; border-style:solid;
@ -158,7 +155,6 @@ export const TelemetriaView = styled.main`
text-align:center; text-align:center;
vertical-align:top vertical-align:top
} }
.tg .tg-baqh{ .tg .tg-baqh{
text-align:center; text-align:center;
vertical-align:top vertical-align:top
@ -173,6 +169,10 @@ export const TelemetriaView = styled.main`
vertical-align:top vertical-align:top
} }
canvas {
align-self: center;
}
input { input {
width: 15rem; width: 15rem;
@ -383,13 +383,15 @@ export const TableHeader = styled.div`
flex-direction: row; flex-direction: row;
padding: 0 40px 0 40px /* padding: 0 40px 0 40px */
` `
export const ChartFilters = styled.section` export const ChartFilters = styled.section`
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: center!important; justify-content: flex-start!important;
margin-left: 72px;
align-self: flex-start; align-self: flex-start;

19
src/styles/layouts/economy/economy.ts
View File

@ -1,9 +1,28 @@
import styled from 'styled-components' import styled from 'styled-components'
export const EconomyView = styled.main` export const EconomyView = styled.main`
width: 100%;
.MuiInputLabel-root, .MuiInputLabel-formControl {
margin-top: 11px;
}
section { section {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
input {
width: 16.6rem;
height: 63px!important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
border-radius: 6px;
border: solid gray 1px;
background-color: #F9F9F9;
}
` `

35
src/styles/layouts/news/NewsView.ts
View File

@ -1,6 +1,12 @@
import styled from "styled-components"; import styled from "styled-components";
export const NewsView = styled.main` export const NewsView = styled.main`
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%; width: 100%;
margin-bottom: 100px; margin-bottom: 100px;
@ -71,6 +77,35 @@ export const NewsView = styled.main`
} }
} }
} }
a {
display: flex;
justify-content: center;
align-items: center;
margin-top: 1px;
width: 140px;
height: 45px;
cursor: pointer;
background: #dadada;
border-radius: 8px;
border-style: none;
font-family: 'Poppins';
font-size: 90%;
transition: all 350ms ease-in;
:hover {
transform: scale(1.02);
opacity: 0.9;
box-shadow: rgb(0, 0, 0, 0.2) 0px 2px 4px -1px;
}
color: #000;
}
`; `;
export const Button = styled.div` export const Button = styled.div`