fix telemetria
This commit is contained in:
joseCorte-exe
parent
9fd2da24db
commit
a9fd40162c
@ -15,12 +15,12 @@ interface GradientButtonInterface {
|
||||
}
|
||||
|
||||
export default function GradientButton({ title, description, orange, purple, green, onClick }: GradientButtonInterface) {
|
||||
// function handleClick() {
|
||||
// onClick()
|
||||
// }
|
||||
function handleClick() {
|
||||
onClick()
|
||||
}
|
||||
|
||||
return (
|
||||
<GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange' } >
|
||||
<GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange'} onClick={() => handleClick()}>
|
||||
<p>{title}</p>
|
||||
<p>{description}</p>
|
||||
</GradientButtonView>
|
||||
|
||||
@ -29,7 +29,7 @@ export default function Header({name, admin}: headerInterface) {
|
||||
!admin && profile_picture?
|
||||
<Image src={profile_picture} height={50} width={75}/>
|
||||
:
|
||||
null
|
||||
<Image src='https://kluppdevelopment.s3.sa-east-1.amazonaws.com/avatars/zcgw6O0FxZgxRmIs97WMcUddKurQJcIqSxBLStSc.png' height={50} width={75}/>
|
||||
}
|
||||
</HeaderView>
|
||||
)
|
||||
|
||||
@ -6,6 +6,8 @@ export const HeaderView = styled.header`
|
||||
|
||||
width: 100%;
|
||||
|
||||
margin-bottom: 40px;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -62,13 +62,13 @@ export default function chartTelemetry({userName}) {
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const {startDate, endDate} = router.query
|
||||
const {startDate, endDate, unity, discretization} = router.query
|
||||
|
||||
async function getChartsData() {
|
||||
console.log(router.query)
|
||||
await api.post('/telemetry/powerFactor', {
|
||||
"filters": [
|
||||
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
|
||||
{"type" : "=", "field": discretization, "value": unity},
|
||||
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
|
||||
]
|
||||
}).then(res => {
|
||||
@ -80,8 +80,8 @@ export default function chartTelemetry({userName}) {
|
||||
await api.post('/telemetry/discretization', {
|
||||
"type": "5_min",
|
||||
"filters": [
|
||||
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
|
||||
{"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
|
||||
{"type" : "=", "field": discretization, "value": unity},
|
||||
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
|
||||
]
|
||||
}).then(res => {
|
||||
setDiscretizedConsumptionDataReativa(res.data.data)
|
||||
@ -92,7 +92,7 @@ export default function chartTelemetry({userName}) {
|
||||
await api.post('/telemetry/discretization', {
|
||||
"type": "5_min",
|
||||
"filters": [
|
||||
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
|
||||
{"type" : "=", "field": discretization, "value": unity},
|
||||
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
|
||||
]
|
||||
}).then(res => {
|
||||
@ -103,7 +103,7 @@ export default function chartTelemetry({userName}) {
|
||||
|
||||
await api.post('/telemetry/demand', {
|
||||
"filters": [
|
||||
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
|
||||
{"type" : "=", "field": discretization, "value": unity},
|
||||
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
|
||||
]
|
||||
}).then(res => {
|
||||
@ -113,8 +113,6 @@ export default function chartTelemetry({userName}) {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
getChartsData()
|
||||
console.log(fatorPotenciaData)
|
||||
|
||||
@ -95,10 +95,6 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
|
||||
} else {
|
||||
setTableDataState(tableData)
|
||||
}
|
||||
|
||||
console.log(tableData)
|
||||
|
||||
console.log(month)
|
||||
}, [month, unidade])
|
||||
|
||||
return (
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import router, { useRouter } from 'next/router'
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import Banner from '../components/banner/Banner';
|
||||
import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
|
||||
@ -17,26 +16,154 @@ import { FatorPotencia } from '../services/fatorPotencia';
|
||||
import RenderIf from '../utils/renderIf';
|
||||
import { GetServerSideProps } from 'next';
|
||||
import { parseCookies } from 'nookies';
|
||||
import { api } from '../services/api';
|
||||
import Snackbar from '@mui/material/Snackbar'
|
||||
import MuiAlert, { AlertProps } from '@mui/material/Alert'
|
||||
import getAPIClient from '../services/ssrApi';
|
||||
|
||||
export default function Telemetria({userName}: any) {
|
||||
const style = {
|
||||
position: 'absolute' as const,
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
|
||||
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
|
||||
props,
|
||||
ref
|
||||
) {
|
||||
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
|
||||
})
|
||||
|
||||
export default function Telemetria({userName, clients}: any) {
|
||||
const [unity, setUnity] = useState('');
|
||||
const [startDate, setStartDate] = useState('');
|
||||
const [endDate, setEndDate] = useState('');
|
||||
const [discretization, setDiscretization] = useState('');
|
||||
|
||||
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
|
||||
const [openSnackError, setOpenSnackError] = useState<boolean>(false)
|
||||
const handleCloseSnack = (
|
||||
event?: React.SyntheticEvent | Event,
|
||||
reason?: string
|
||||
) => {
|
||||
if (reason === 'clickaway') {
|
||||
return
|
||||
}
|
||||
|
||||
setOpenSnackError(false)
|
||||
setOpenSnackSuccess(false)
|
||||
}
|
||||
|
||||
function downloadCSVFile(csv, filename) {
|
||||
const csv_file = new Blob([csv], {type: "text/csv"});
|
||||
|
||||
const download_link = document.createElement("a");
|
||||
|
||||
download_link.download = filename;
|
||||
|
||||
download_link.href = window.URL.createObjectURL(csv_file);
|
||||
|
||||
download_link.style.display = "none";
|
||||
|
||||
document.body.appendChild(download_link);
|
||||
|
||||
download_link.click();
|
||||
}
|
||||
|
||||
function htmlToCSV(html, filename) {
|
||||
const data = [];
|
||||
const rows = document.querySelectorAll("table tr");
|
||||
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
const row = [], cols: any = rows[i].querySelectorAll("td, th");
|
||||
|
||||
for (let j = 0; j < cols.length; j++) {
|
||||
row.push(cols[j].innerText);
|
||||
}
|
||||
|
||||
data.push(row.join(","));
|
||||
}
|
||||
|
||||
downloadCSVFile(data.join("\n"), filename);
|
||||
}
|
||||
|
||||
const [tableData, setTableData] = useState(null)
|
||||
|
||||
const [date, setDate] = useState('');
|
||||
|
||||
const [showChart, setShowChart] = useState(false);
|
||||
|
||||
const handleChange = (event: SelectChangeEvent) => {
|
||||
// setAge(event.target.value);
|
||||
};
|
||||
const [exception, setException] = useState(false);
|
||||
const [send, setSend] = useState(false);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
async function getTableData() {
|
||||
if (startDate!=='' && endDate!=='' && send)
|
||||
setOpen(true)
|
||||
await api.post('/telemetry/powerFactor', {
|
||||
"type": "15_min",
|
||||
"filters": [
|
||||
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
|
||||
{"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
|
||||
]
|
||||
}).then(res => {
|
||||
setTableData(res.data.data)
|
||||
setOpenSnackError(false)
|
||||
setOpenSnackSuccess(true)
|
||||
setOpen(false)
|
||||
}).catch(res => {
|
||||
setException(true)
|
||||
setSend(false)
|
||||
setOpenSnackError(true)
|
||||
setOpenSnackSuccess(false)
|
||||
console.log(res)
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setSend(false)
|
||||
}, [startDate, endDate])
|
||||
|
||||
|
||||
return(
|
||||
<TelemetriaView>
|
||||
<Head>
|
||||
<title>Smart Energia - Telemetria</title>
|
||||
</Head>
|
||||
<Snackbar
|
||||
open={openSnackSuccess}
|
||||
autoHideDuration={4000}
|
||||
onClose={handleCloseSnack}
|
||||
>
|
||||
<Alert
|
||||
onClose={handleCloseSnack}
|
||||
severity="success"
|
||||
sx={{ width: '100%' }}
|
||||
>
|
||||
Dados coletados com sucesso com Sucesso!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
<Snackbar
|
||||
open={openSnackError}
|
||||
autoHideDuration={4000}
|
||||
onClose={handleCloseSnack}
|
||||
>
|
||||
<Alert
|
||||
onClose={handleCloseSnack}
|
||||
severity="error"
|
||||
sx={{ width: '100%' }}
|
||||
>
|
||||
Não foi possivel pegar os dados!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
|
||||
<Header name={userName} />
|
||||
<Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
|
||||
SCDE da Câmara de Comercialização de Energia Elétrica - CCEE,
|
||||
@ -59,24 +186,24 @@ export default function Telemetria({userName}: any) {
|
||||
<MenuItem value="">
|
||||
<em>Nenhum</em>
|
||||
</MenuItem>
|
||||
<MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem>
|
||||
|
||||
<MenuItem value={10}>Unidade 1</MenuItem>
|
||||
<MenuItem value={20}>Unidade 2</MenuItem>
|
||||
<MenuItem value={30}>Unidade 3</MenuItem>
|
||||
<MenuItem value={30}>Unidade 4</MenuItem>
|
||||
<MenuItem value={30}>Unidade 5</MenuItem>
|
||||
{
|
||||
clients.map((value) => {
|
||||
return <MenuItem key={1} value={value.codigo_scde}>{value.codigo_scde}</MenuItem>
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
</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)}/>
|
||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={startDate} onChange={(value) => setStartDate(value.target.value)} onSelect={value => console.log(value)}/>
|
||||
</div>
|
||||
|
||||
<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)}/>
|
||||
</div>
|
||||
|
||||
@ -95,11 +222,66 @@ export default function Telemetria({userName}: any) {
|
||||
<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>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
<button className='sendButton' onClick={() => {
|
||||
setSend(true)
|
||||
getTableData()
|
||||
}}>Enviar!</button>
|
||||
</section>
|
||||
|
||||
<RenderIf isTrue={startDate!=='' && endDate!=='' && tableData===null && exception === false && send}>
|
||||
<div className='modal'>
|
||||
<div id="preloader_1">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</RenderIf>
|
||||
<RenderIf isTrue={startDate!=='' && endDate!=='' && tableData!==null}>
|
||||
<table className="tg">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className='tg-8oo6'>Ponto</th>
|
||||
<th className='tg-8oo6'>Numero do dia</th>
|
||||
<th className='tg-8oo6'>Dia formatado</th>
|
||||
<th className='tg-8oo6'>Hora</th>
|
||||
<th className='tg-8oo6'>Minuto</th>
|
||||
<th className='tg-8oo6'>Consumo</th>
|
||||
<th className='tg-8oo6'>Reativa</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
tableData!==null?
|
||||
tableData?.map((value, index) => {
|
||||
return <>
|
||||
<tr>
|
||||
<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-uulg'>{value.day_formatted}</td>
|
||||
<td key={index} className='tg-gceh'>{value.hora}</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-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
</tr>
|
||||
</>
|
||||
})
|
||||
:
|
||||
null
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</RenderIf>
|
||||
|
||||
<RenderIf isTrue={showChart}>
|
||||
<LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data2} dataset1='Fator de Potencia' dataset2='Fator ref.' label={FatorPotencia.label1} />
|
||||
</RenderIf>
|
||||
@ -110,17 +292,20 @@ export default function Telemetria({userName}: any) {
|
||||
query: {
|
||||
startDate,
|
||||
endDate,
|
||||
discretization
|
||||
discretization: discretization==='5_min'? 'med_5min.ponto' : discretization==='15_min'? '15min.ponto' : discretization==='1_hora'? 'med_1hora.ponto' : discretization==='1_dia'? 'med_1dia.ponto' : 'med_5min.ponto',
|
||||
unity
|
||||
},
|
||||
}} >
|
||||
{/* <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange/> */}
|
||||
<button>
|
||||
<p>GRÁFICO</p>
|
||||
<p>Gerar gráficos com os dados selecionados</p>
|
||||
</button>
|
||||
</Link>
|
||||
{/* <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange onClick={() => router.replace('/chartTelemetry')}/> */}
|
||||
<GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple />
|
||||
<GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple onClick={() => {
|
||||
const html = document.querySelector("table").outerHTML;
|
||||
htmlToCSV(html, "telemetria.csv");
|
||||
console.log('clicando')
|
||||
}}/>
|
||||
<GradientButton title='DADOS' description='hORÁRIOS DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} green />
|
||||
</Buttons>
|
||||
<p className='paragraph'>
|
||||
@ -132,6 +317,7 @@ export default function Telemetria({userName}: any) {
|
||||
medição - Distribuidora.
|
||||
</i>
|
||||
</p>
|
||||
|
||||
</TelemetriaView>
|
||||
)
|
||||
}
|
||||
@ -139,6 +325,22 @@ export default function Telemetria({userName}: any) {
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
const { ['user-name']: userName } = parseCookies(ctx)
|
||||
const { ['user-client_id']: id } = parseCookies(ctx)
|
||||
const apiClient = getAPIClient(ctx)
|
||||
|
||||
let clients = []
|
||||
|
||||
await apiClient.post('/units', {
|
||||
"filters": [
|
||||
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": id}
|
||||
],
|
||||
"fields": ["cod_smart_unidade", "codigo_scde"],
|
||||
"distinct": true
|
||||
}).then(res => {
|
||||
clients = res.data.data
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
if (!token) {
|
||||
return {
|
||||
@ -151,7 +353,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
|
||||
return {
|
||||
props: {
|
||||
userName
|
||||
userName,
|
||||
clients
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,7 +29,7 @@ export const ChatTelemetryView = styled.main`
|
||||
bottom:0px;
|
||||
width: 9px;
|
||||
height: 5px;
|
||||
background:#9b59b6;
|
||||
background:#254F7F;
|
||||
position:absolute;
|
||||
animation: preloader_1 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@ -4,6 +4,64 @@ export const TelemetriaView = styled.main`
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
|
||||
.modal {
|
||||
position: absolute;
|
||||
|
||||
background: rgba( 255, 255, 255, 0.25 );
|
||||
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
|
||||
backdrop-filter: blur( 4px );
|
||||
-webkit-backdrop-filter: blur( 4px );
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba( 255, 255, 255, 0.18 );
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#preloader_1{
|
||||
position:absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
#preloader_1 span{
|
||||
display:block;
|
||||
bottom:0px;
|
||||
width: 9px;
|
||||
height: 5px;
|
||||
background:#254F7F;
|
||||
position:absolute;
|
||||
animation: preloader_1 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
#preloader_1 span:nth-child(2){
|
||||
left:11px;
|
||||
animation-delay: .2s;
|
||||
|
||||
}
|
||||
#preloader_1 span:nth-child(3){
|
||||
left:22px;
|
||||
animation-delay: .4s;
|
||||
}
|
||||
#preloader_1 span:nth-child(4){
|
||||
left:33px;
|
||||
animation-delay: .6s;
|
||||
}
|
||||
#preloader_1 span:nth-child(5){
|
||||
left:44px;
|
||||
animation-delay: .8s;
|
||||
}
|
||||
@keyframes preloader_1 {
|
||||
0% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
|
||||
25% {height:30px;transform:translateY(15px);background:#254F7F;}
|
||||
50% {height:5px;transform:translateY(0px);background:rgb(231,153,47);}
|
||||
100% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
@ -12,6 +70,105 @@ export const TelemetriaView = styled.main`
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
.sendButton {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
|
||||
background:#254F7F;
|
||||
color: white;
|
||||
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
|
||||
font-family: 'Poppins';
|
||||
font-size: 14px;
|
||||
|
||||
color: #FFFFFF;
|
||||
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
table {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
.tg .tg-baqh{
|
||||
text-align:center;
|
||||
vertical-align:top
|
||||
}
|
||||
.tg .tg-0lax{
|
||||
text-align:left;
|
||||
vertical-align:top
|
||||
}
|
||||
.tg .tg-womg{
|
||||
background-color:#dddfe1;
|
||||
text-align:center;
|
||||
vertical-align:top
|
||||
}
|
||||
|
||||
input {
|
||||
width: 15rem;
|
||||
height: 2.5rem;
|
||||
@ -132,6 +289,57 @@ export const Buttons = styled.div`
|
||||
}
|
||||
}
|
||||
|
||||
#preloader_1{
|
||||
position:absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
#preloader_1 span{
|
||||
display:block;
|
||||
bottom:0px;
|
||||
width: 9px;
|
||||
height: 5px;
|
||||
background:#254F7F;
|
||||
position:absolute;
|
||||
animation: preloader_1 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
#preloader_1 span:nth-child(2){
|
||||
left:11px;
|
||||
animation-delay: .2s;
|
||||
|
||||
}
|
||||
#preloader_1 span:nth-child(3){
|
||||
left:22px;
|
||||
animation-delay: .4s;
|
||||
}
|
||||
#preloader_1 span:nth-child(4){
|
||||
left:33px;
|
||||
animation-delay: .6s;
|
||||
}
|
||||
#preloader_1 span:nth-child(5){
|
||||
left:44px;
|
||||
animation-delay: .8s;
|
||||
}
|
||||
@keyframes preloader_1 {
|
||||
0% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
|
||||
25% {height:30px;transform:translateY(15px);background:#254F7F;}
|
||||
50% {height:5px;transform:translateY(0px);background:rgb(231,153,47);}
|
||||
100% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
|
||||
}
|
||||
|
||||
.loadingTable {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
z-index: 9999999;
|
||||
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
@media (max-width: 942px) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user