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

add fix and feature

Browse Source
This commit is contained in:
joseCorte-exe 2022-05-19 17:56:39 -03:00
parent 1c1b820432
commit aa9540c4e4
7 changed files with 108 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/mapCard/MapCard.tsx
View File

@ -13,7 +13,7 @@ export default function MapCard({ title, subtitle, statistic, imgSource }: MapCa
const route = title==='R$/MWh'? '/consumption': `pld/${title.slice(0,2).toLocaleLowerCase()}-${title.slice(3,5).toLocaleLowerCase()}` const route = title==='R$/MWh'? '/consumption': `pld/${title.slice(0,2).toLocaleLowerCase()}-${title.slice(3,5).toLocaleLowerCase()}`
return ( return (
<MapCardView> <MapCardView statistic={statistic} >
<Image src={imgSource} width={90} height={90}/> <Image src={imgSource} width={90} height={90}/>
<div> <div>
<h4>{title}</h4> <h4>{title}</h4>

19
src/components/mapCard/MapCardView.ts
View File

@ -1,21 +1,33 @@
import styled from 'styled-components' import styled from 'styled-components'
export const MapCardView = styled.figure` interface MapCardViewInterface {
statistic?: any
}
export const MapCardView = styled.figure<MapCardViewInterface>`
display: flex; display: flex;
justify-content: center; justify-content: flex;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
margin-right: 2px; margin-right: 2px;
h4 {
margin-left: ${props => props.statistic? '0' : '10px'};
}
span {
margin-left: ${props => props.statistic? '0' : '10px'};
margin-bottom: ${props => props.statistic? '25px' : '0px'};
margin-top: ${props => props.statistic? '0px' : '30px'};
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
span { span {
margin-bottom: 25px;
} }
div { div {
@ -27,6 +39,7 @@ export const MapCardView = styled.figure`
article { article {
display: flex; display: flex;
/* margin-left: 20px; */
} }
} }

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

@ -83,6 +83,8 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
width: 90%; width: 90%;
height: 190px; height: 190px;
margin-bottom: 40px;
background: linear-gradient(155.54deg, #254F7F 15.63%, #9C9C9C 136.34%); background: linear-gradient(155.54deg, #254F7F 15.63%, #9C9C9C 136.34%);
border-radius: 26px; border-radius: 26px;

3
src/pages/_app.tsx
View File

@ -61,8 +61,7 @@ function MyApp({ Component, pageProps }: AppProps) {
null null
} }
</AppView> </AppView>
<Footer /> {/* <Footer /> */}
</> </>
) )
} }

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

@ -33,6 +33,20 @@ export default function region() {
console.log(page) console.log(page)
}, [page]) }, [page])
function handleGreen(minimo, mi, ma, maximo) {
if (minimo - mi >= 100 && minimo - mi < 200) {
return 'green'
} else if ( mi*2 >= 200 && mi*2 <250 ) {
return'dullGreen'
} else if ( (ma-mi)/2 >=250 && (ma-mi)/2 < 300 ) {
return 'white'
} else if ( ma/2 >= 300 && ma/2 < 600 ) {
return 'dullRed'
} else if ( maximo-ma > 600 ) {
return 'red'
}
}
return ( return (
<main style={{ <main style={{
width: '100%', width: '100%',
@ -58,94 +72,94 @@ export default function region() {
<tbody> <tbody>
<tr> <tr>
<td className='tg-gceh'>2101</td> <td className='tg-gceh'>2101</td>
<td className='tg-uulg'>xxxx</td> <td className='tg-uulg red'>xxxx</td>
<td className='tg-gceh'>xxxx</td> <td className='tg-gceh dullRed'>xxxx</td>
<td className='tg-gceh'>xxxx</td> <td className='tg-gceh dullGreen'>xxxx</td>
<td className='tg-uulg'>xxxx</td> <td className='tg-uulg red'>xxxx</td>
</tr> </tr>
<tr> <tr>
<td className='tg-hq65'>2102</td> <td className='tg-hq65'>2102</td>
<td className='tg-0tzy'>xxxx</td> <td className='tg-0tzy dullGreen'>xxxx</td>
<td className='tg-hq65'>xxxx</td> <td className='tg-hq65 dullRed'>xxxx</td>
<td className='tg-hq65'>xxxx</td> <td className='tg-hq65 dullGreen'>xxxx</td>
<td className='tg-0tzy'>xxxx</td> <td className='tg-0tzy dullGreen'>xxxx</td>
</tr> </tr>
<tr> <tr>
<td className="tg-gceh">2103</td> <td className="tg-gceh">2103</td>
<td className="tg-uulg">xxxx</td> <td className="tg-uulg red">xxxx</td>
<td className="tg-gceh">xxxx</td> <td className="tg-gceh dullGreen">xxxx</td>
<td className="tg-gceh">xxxx</td> <td className="tg-gceh dullRed">xxxx</td>
<td className="tg-gceh">xxxx</td> <td className="tg-gceh dullGreen">xxxx</td>
</tr> </tr>
<tr> <tr>
<td className='tg-hq65'>2104</td> <td className='tg-hq65'>2104</td>
<td className='tg-0tzy'>xxxx</td> <td className='tg-0tzy dullGreen'>xxxx</td>
<td className='tg-hq65'>xxxx</td> <td className='tg-hq65 dullRed'>xxxx</td>
<td className='tg-hq65'>xxxx</td> <td className='tg-hq65 dullRed'>xxxx</td>
<td className='tg-0tzy'>xxxx</td> <td className='tg-0tzy dullGreen'>xxxx</td>
</tr> </tr>
<tr> <tr>
<td className='tg-gceh'>2105</td> <td className='tg-gceh'>2105</td>
<td className='tg-uulg'>xxxx</td> <td className='tg-uulg red'>xxxx</td>
<td className='tg-gceh'>xxxx</td> <td className='tg-gceh dullGreen'>xxxx</td>
<td className='tg-gceh'>xxxx</td> <td className='tg-gceh dullGreen'>xxxx</td>
<td className='tg-uulg'>xxxx</td> <td className='tg-uulg red'>xxxx</td>
</tr> </tr>
<tr> <tr>
<td className='tg-hq65'>2106</td> <td className='tg-hq65'>2106</td>
<td className='tg-0tzy'>xxxx</td> <td className='tg-0tzy dullGreen'>xxxx</td>
<td className='tg-hq65'>xxxx</td> <td className='tg-hq65 dullRed'>xxxx</td>
<td className='tg-hq65'>xxxx</td> <td className='tg-hq65 red'>xxxx</td>
<td className='tg-0tzy'>xxxx</td> <td className='tg-0tzy green'>xxxx</td>
</tr> </tr>
<tr> <tr>
<td className='tg-gceh'>2107</td> <td className='tg-gceh'>2107</td>
<td className='tg-uulg'>xxxx</td> <td className='tg-uulg red'>xxxx</td>
<td className='tg-gceh'>xxxx</td> <td className='tg-gceh green'>xxxx</td>
<td className='tg-gceh'>xxxx</td> <td className='tg-gceh dullRed'>xxxx</td>
<td className='tg-uulg'>xxxx</td> <td className='tg-uulg red'>xxxx</td>
</tr> </tr>
<tr> <tr>
<td className='tg-hq65'>2108</td> <td className='tg-hq65'>2108</td>
<td className='tg-0tzy'>xxxx</td> <td className='tg-0tzy dullGreen'>xxxx</td>
<td className='tg-hq65'>xxxx</td> <td className='tg-hq65 dullGreen'>xxxx</td>
<td className='tg-hq65'>xxxx</td> <td className='tg-hq65 green'>xxxx</td>
<td className='tg-0tzy'>xxxx</td> <td className='tg-0tzy dullRed'>xxxx</td>
</tr> </tr>
<tr> <tr>
<td className='tg-gceh'>2109</td> <td className='tg-gceh'>2109</td>
<td className='tg-uulg'>xxxx</td> <td className='tg-uulg red'>xxxx</td>
<td className='tg-gceh'>xxxx</td> <td className='tg-gceh green'>xxxx</td>
<td className='tg-gceh'>xxxx</td> <td className='tg-gceh dullRed'>xxxx</td>
<td className='tg-uulg'>xxxx</td> <td className='tg-uulg red'>xxxx</td>
</tr> </tr>
<tr> <tr>
<td className='tg-hq65'>2110</td> <td className='tg-hq65'>2110</td>
<td className='tg-0tzy'>xxxx</td> <td className='tg-0tzy red'>xxxx</td>
<td className='tg-hq65'>xxxx</td> <td className='tg-hq65 green'>xxxx</td>
<td className='tg-hq65'>xxxx</td> <td className='tg-hq65 red'>xxxx</td>
<td className='tg-0tzy'>xxxx</td> <td className='tg-0tzy red'>xxxx</td>
</tr> </tr>
<tr> <tr>
<td className='tg-gceh'>2111</td> <td className='tg-gceh'>2111</td>
<td className='tg-uulg'>xxxx</td> <td className='tg-uulg red'>xxxx</td>
<td className='tg-gceh'>xxxx</td> <td className='tg-gceh dullGreen'>xxxx</td>
<td className='tg-gceh'>xxxx</td> <td className='tg-gceh green'>xxxx</td>
<td className='tg-uulg'>xxxx</td> <td className='tg-uulg red'>xxxx</td>
</tr> </tr>
<tr> <tr>
<td className='tg-hq65'>2112</td> <td className='tg-hq65'>2112</td>
<td className='tg-0tzy'>xxxx</td> <td className='tg-0tzy green'>xxxx</td>
<td className='tg-hq65'>xxxx</td> <td className='tg-hq65 dullGreen'>xxxx</td>
<td className='tg-hq65'>xxxx</td> <td className='tg-hq65 dullRed'>xxxx</td>
<td className='tg-0tzy'>xxxx</td> <td className='tg-0tzy dullGreen'>xxxx</td>
</tr> </tr>
<tr> <tr>
<td className='tg-gceh'>2021</td> <td className='tg-gceh'>2021</td>
<td className='tg-uulg'>xxxx</td> <td className='tg-uulg red'>xxxx</td>
<td className='tg-gceh'>xxxx</td> <td className='tg-gceh dullRed'>xxxx</td>
<td className='tg-gceh'>xxxx</td> <td className='tg-gceh dullGreen'>xxxx</td>
<td className='tg-uulg'>xxxx</td> <td className='tg-uulg red'>xxxx</td>
</tr> </tr>
<tr> <tr>
<td className='tg-gceh'>Mín</td> <td className='tg-gceh'>Mín</td>

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

@ -39,27 +39,26 @@ export const NewsView = styled.main`
flex-direction: column; flex-direction: column;
} }
} }
}`; }`;
export const Button = styled.div` export const Button = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
fieldset {
fieldset {
border-top: 0.7px solid #E1E1E1; border-top: 0.7px solid #E1E1E1;
border-bottom: none; border-bottom: none;
border-left: none; border-left: none;
border-right: none; border-right: none;
display: block; display: block;
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
fieldset legend { fieldset legend {
padding: 25px 4px; /* padding: 25px 4px; */
color: #ABB3BB; color: #ABB3BB;
font-size: 14px; font-size: 14px;
} }

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

@ -82,6 +82,22 @@ export const PldTableView = styled.main`
vertical-align:top vertical-align:top
} }
.green {
background-color: #00A934!important;
}
.dullGreen {
background-color: #AED094!important;
}
.red {
background-color: #FF5429!important;
}
.dullRed {
background-color: #FFAA95!important;
}
h3{ h3{
font-weight: 600; font-weight: 600;
font-size: 22px; font-size: 22px;