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

:feature: add economy pages

Browse Source
This commit is contained in:
joseCorte-exe 2022-05-09 17:00:50 -03:00
parent 4b65ecbffb
commit 400d25fe88
12 changed files with 338 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
pages/accumulatedSavings.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from 'react'
import Chart from '../src/components/graph/Chart'
import Header from '../src/components/header/Header'
import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView'
export default function AccumulatedSavings() {
return (
<AccumulatedSavingsView>
<Header name='' />
<section>
<h1>Economia Acumulada</h1>
<span>Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)</span>
</section>
<section>
<Chart title='Indicador de custo' />
</section>
</AccumulatedSavingsView>
)
}

20
pages/costIndicator.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from 'react'
import Chart from '../src/components/graph/Chart'
import Header from '../src/components/header/Header'
import { CostIndicatorView } from '../styles/layouts/economy/costIndicator/CostIndicatorView'
export default function CostIndicator() {
return (
<CostIndicatorView>
<Header name='' />
<section>
<h1>Indicador de Custo</h1>
<span>Valores em R$/MWh</span>
</section>
<section>
<Chart title='Indicador de custo' />
</section>
</CostIndicatorView>
)
}

21
pages/estimatedCost.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from 'react'
import Chart from '../src/components/graph/Chart'
import Header from '../src/components/header/Header'
import { EstimatedCostView } from '../styles/layouts/economy/estimatedCost/EstimatedCostView'
export default function EstimatedCost() {
return (
<EstimatedCostView>
<Header name='' />
<section>
<h1>Custo Estimado</h1>
<span>Comparativo de Custo Estimado</span>
</section>
<section>
<Chart title='Indicador de custo' />
</section>
</EstimatedCostView>
)
}

21
pages/grossSavings.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from 'react'
import Chart from '../src/components/graph/Chart'
import Header from '../src/components/header/Header'
import { GrossSavingsView } from '../styles/layouts/economy/grossSavings/GrossSavings'
export default function GrossSavings() {
return (
<GrossSavingsView>
<Header name='' />
<section>
<h1>Economia Bruta</h1>
<span>Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)</span>
</section>
<section>
<Chart title='Indicador de custo' />
</section>
</GrossSavingsView>
)
}

106
pages/resumoOperacao.tsx
View File

@ -13,77 +13,71 @@ export default function ResumoOperacao() {
<h1>Resumo de Operaçoes</h1>
<h2>Operações detalhadas</h2>
<h3>Seletor Mês</h3>
<table className='tg' >
<colgroup>
<col style={{width: "106px"}}/>
<col style={{width: "16px"}}/>
<col style={{width: "119px"}}/>
<col style={{width: "334px"}}/>
<col style={{width: "111px"}}/>
<col style={{width: "146px"}}/>
</colgroup>
<thead>
<table className="tg">
<thead>
<tr>
<th className='tg-baqh'>Unidade</th>
<th className='tg-baqh'>Operação</th>
<th className='tg-baqh'>Montante(MWh)</th>
<th className='tg-baqh'>Contraparte</th>
<th className='tg-baqh'>Preço(R$/MWh)</th>
<th className='tg-0lax'>Valor NF/Crédito (R$)</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>
</thead>
<tbody>
<tr>
<td className='tg-womg'>Unidade-19888</td>
<td className='tg-womg'>comprar</td>
<td className='tg-womg'>122.269</td>
<td className='tg-womg'>COPEL COM I5</td>
<td className='tg-womg'>234,67</td>
<td className='tg-womg'>38.257,15</td>
<td className='tg-gceh'>Unidade - 9500130</td>
<td className='tg-uulg'>Compra</td>
<td className='tg-gceh'>122,269</td>
<td className='tg-gceh'>COPEL COM I5</td>
<td className='tg-uulg'>234,67</td>
<td className='tg-gceh'>38.257,15</td>
</tr>
<tr>
<th className='tg-baqh'>Unidade-19888</th>
<th className='tg-baqh'>Comprar</th>
<th className='tg-baqh'>122.269</th>
<th className='tg-baqh'>PACTO COMERCIALIZADORA I5</th>
<th className='tg-baqh'>234,67</th>
<th className='tg-baqh'>38.257,15</th>
<td className='tg-hq65'>Unidade - 9500130</td>
<td className='tg-0tzy'>Compra</td>
<td className='tg-hq65'>110,348</td>
<td className='tg-hq65'>EMEWE I5</td>
<td className='tg-0tzy'>190,16</td>
<td className='tg-hq65'>27.978,37</td>
</tr>
<tr>
<td className='tg-womg'>Unidade-19888</td>
<td className='tg-womg'>Comprar</td>
<td className='tg-womg'>122.269</td>
<td className='tg-womg'>PACTO COMERCIALIZADORA I5</td>
<td className='tg-womg'>234,67</td>
<td className='tg-womg'>38.257,15</td>
<td className="tg-gceh">Unidade - 9500130</td>
<td className="tg-uulg">Compra</td>
<td className="tg-gceh">13,074</td>
<td className="tg-gceh">PACTO COMERCIALIZADORA I5</td>
<td className="tg-gceh">300,36</td>
<td className="tg-gceh">5.235,88</td>
</tr>
<tr>
<td className='tg-baqh'>Unidade-19888</td>
<td className='tg-baqh'>Comprar</td>
<td className='tg-baqh'>122.269</td>
<td className='tg-baqh'>PACTO COMERCIALIZADORA I5</td>
<td className='tg-baqh'>234,67</td>
<td className='tg-baqh'>38.257,15</td>
<td className='tg-hq65'>Unidade - 9500130</td>
<td className='tg-0tzy'>Compra</td>
<td className='tg-hq65'>133,117</td>
<td className='tg-hq65'>COPEL COM I5</td>
<td className='tg-0tzy'>300,36</td>
<td className='tg-hq65'>41.651,42</td>
</tr>
<tr>
<td className='tg-womg'>Unidade-19888</td>
<td className='tg-womg'>Comprar</td>
<td className='tg-womg'>122.269</td>
<td className='tg-womg'>PACTO COMERCIALIZADORA I5</td>
<td className='tg-womg'>234,67</td>
<td className='tg-womg'>38.257,15</td>
<td className='tg-gceh'>Unidade - 9500130</td>
<td className='tg-uulg'>Compra</td>
<td className='tg-gceh'>120,138</td>
<td className='tg-gceh'>EMEWE I5</td>
<td className='tg-uulg'>234,67</td>
<td className='tg-gceh'>30.460,59</td>
</tr>
<tr>
<td className='tg-hq65'>Unidade - 9500130</td>
<td className='tg-0tzy'>Compra</td>
<td className='tg-hq65'>14,897</td>
<td className='tg-hq65'>PACTO COMERCIALIZADORA I5</td>
<td className='tg-0tzy'>300,36</td>
<td className='tg-hq65'>5.965,95</td>
</tr>
</tbody>
</table>
</tbody>
</table >
</TableView>
)

2
src/components/header/HeaderView.ts
View File

@ -7,7 +7,7 @@ export const HeaderView = styled.header`
flex-direction: row;
height: 5rem;
height: 10rem;
section {
display: flex;

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

@ -3,6 +3,7 @@ import Image from 'next/image'
import { useRouter } from 'next/router'
import { SidebarView } from './SidebarView'
import Link from 'next/link'
export default function Sidebar() {
const [ economiaDrawer, setEconomiaDrawer ] = useState(false)
@ -22,22 +23,22 @@ export default function Sidebar() {
<Image src='/assets/logo.svg' width={100} height={100} />
</div>
<ul>
<li className={router.pathname=='/dashboard'? 'actualPath' : null} >{'Visão Geral'}</li>
<li className={router.pathname=='/consumption'? 'actualPath' : null} >{'Consumo'}</li>
<li>{'Resumo de Op. >'}</li>
<li onClick={() => setEconomiaDrawer(!economiaDrawer)} >{'Economia >'}</li>
<Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} >{'Visão Geral'}</li></Link>
<Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} >{'Consumo'}</li></Link>
<Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} >{'Resumo de Op. '}</li></Link>
<li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia >'}</li>
<div className='economiaDrawer drawer' >
<li>Economia Bruta</li>
<li>Economia Acumulada</li>
<li>Custo Estimado</li>
<li>Custo R/MWh</li>
<Link href='/grossSavings'><li>Economia Bruta</li></Link>
<Link href='/accumulatedSavings'><li>Economia Acumulada</li></Link>
<Link href='/estimatedCost'><li>Custo Estimado</li></Link>
<Link href='/costIndicator'><li>Custo R/MWh</li></Link>
</div>
<li>{'Notícias >'}</li>
<li>{'Info Setorial >'}</li>
<li>{'SAQ >'}</li>
<li>{'Sobre Nós >'}</li>
<li>{'Notificação >'}</li>
<li>{'Telemetria >'}</li>
<Link href='#'><li className={router.pathname=='/news'? 'actualPath' : null}>{'Notícias >'}</li></Link>
<Link href='#'><li className={router.pathname=='/sectorialInfo'? 'actualPath' : null}>{'Info Setorial >'}</li></Link>
<Link href='#'><li className={router.pathname=='/saq'? 'actualPath' : null}>{'SAQ >'}</li></Link>
<Link href='#'><li className={router.pathname=='/aboutus'? 'actualPath' : null}>{'Sobre Nós >'}</li></Link>
<Link href='#'><li className={router.pathname=='/notification'? 'actualPath' : null}>{'Notificação >'}</li></Link>
<Link href='#'><li className={router.pathname=='/telemetry'? 'actualPath' : null}>{'Telemetria >'}</li></Link>
</ul>
<aside>
<p>Nossos Gerentes estão prontos para atendê-los</p>

75
styles/layouts/ResumoOperacao/ResumoOperacaoView.ts
View File

@ -2,20 +2,86 @@ import styled from 'styled-components'
export const TableView = styled.div`
display: flex;
display: flex;
padding: 2.5rem;
justify-content: center;
flex-direction: column;
align-items: flex-start;
width: 100%;
height: 100%;
.tg{
.tg{
border-collapse:collapse;
border-spacing:0;
font-family:Poppins;
width: 100%;
}
.tg td{
border-color:#DDDFE1;
border-style:solid;
border-width:1px;
font-family:Poppins;
font-size: 10px;
overflow:hidden;
padding:17px 30px;
word-break:normal;
}
.tg th{
border-color:#DDDFE1;
border-style:solid;
border-width:1px;
font-family:Poppins;
font-size:10px;
font-weight:500;
overflow:hidden;
padding:10px 5px;
word-break:normal;
}
.tg .tg-8oo6{
color:#464a53;
font-size:13px;
text-align:center;
vertical-align:top;
padding: 10px 18px;
text-align: center;
}
.tg .tg-uulg{
background-color:#efefef;
color:#abafb3;
font-size:14px;
text-align:center;
vertical-align:top
}
.tg .tg-gceh{
background-color:#efefef;
color:#6a707e;
font-size:14px;
text-align:center;
vertical-align:top
}
.tg .tg-0tzy{
color:#abafb3;
font-size:14px;
text-align:center;
vertical-align:top
}
.tg .tg-hq65{color:#6a707e;
font-size:14px;
text-align:center;
vertical-align:top
}
h1{
color: #000;
font-family: Poppins;
font-size: 15px;
}
.tg td{
/* .tg td{
border-color:black;
border-style:solid;
border-width:1px;
@ -36,7 +102,7 @@ export const TableView = styled.div`
overflow:hidden;
padding:10px 5px;
word-break:normal;
}
} */
.tg .tg-baqh{
text-align:center;
@ -70,5 +136,6 @@ export const TableView = styled.div`
color: #254F7F;
font-family: Poppins;
font-size: 15px;
margin-top: 5rem;
}
`;

26
styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView.ts Normal file
View File

@ -0,0 +1,26 @@
import styled from "styled-components";
export const AccumulatedSavingsView = styled.main`
display: flex;
flex-direction: column;
width: 100%;
span {
color: #969BA0;
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
}
section {
margin-bottom: 160px;
canvas {
max-height: 30rem;
}
}
`

26
styles/layouts/economy/costIndicator/CostIndicatorView.ts Normal file
View File

@ -0,0 +1,26 @@
import styled from "styled-components";
export const CostIndicatorView = styled.main`
display: flex;
flex-direction: column;
width: 100%;
span {
color: #969BA0;
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
}
section {
margin-bottom: 160px;
canvas {
max-height: 30rem;
}
}
`

26
styles/layouts/economy/estimatedCost/EstimatedCostView.ts Normal file
View File

@ -0,0 +1,26 @@
import styled from "styled-components";
export const EstimatedCostView = styled.main`
display: flex;
flex-direction: column;
width: 100%;
span {
color: #969BA0;
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
}
section {
margin-bottom: 160px;
canvas {
max-height: 30rem;
}
}
`

26
styles/layouts/economy/grossSavings/GrossSavings.ts Normal file
View File

@ -0,0 +1,26 @@
import styled from "styled-components";
export const GrossSavingsView = styled.main`
display: flex;
flex-direction: column;
width: 100%;
span {
color: #969BA0;
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
}
section {
margin-bottom: 160px;
canvas {
max-height: 30rem;
}
}
`