diff --git a/src/components/buttons/gradientButton/GradientButton.tsx b/src/components/buttons/gradientButton/GradientButton.tsx index 78d9c53..8873d16 100644 --- a/src/components/buttons/gradientButton/GradientButton.tsx +++ b/src/components/buttons/gradientButton/GradientButton.tsx @@ -15,12 +15,12 @@ interface GradientButtonInterface { } export default function GradientButton({ title, description, orange, purple, green, onClick }: GradientButtonInterface) { - // function handleClick() { - // onClick() - // } + function handleClick() { + onClick() + } return ( - + handleClick()}>

{title}

{description}

 diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index 927ae07..0023023 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -29,7 +29,7 @@ export default function Header({name, admin}: headerInterface) { !admin && profile_picture? : - null + } ) diff --git a/src/components/header/HeaderView.ts b/src/components/header/HeaderView.ts index bdeeb85..cff6ebb 100644 --- a/src/components/header/HeaderView.ts +++ b/src/components/header/HeaderView.ts @@ -6,6 +6,8 @@ export const HeaderView = styled.header` width: 100%; + margin-bottom: 40px; + .icon { display: flex; align-items: center; diff --git a/src/pages/chartTelemetry.tsx b/src/pages/chartTelemetry.tsx index b183829..4c833ed 100644 --- a/src/pages/chartTelemetry.tsx +++ b/src/pages/chartTelemetry.tsx @@ -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) diff --git a/src/pages/resumoOperacao.tsx b/src/pages/resumoOperacao.tsx index 70a8238..e6333a2 100644 --- a/src/pages/resumoOperacao.tsx +++ b/src/pages/resumoOperacao.tsx @@ -95,10 +95,6 @@ export default function ResumoOperacao({tableData, clientsData, userName, client } else { setTableDataState(tableData) } - - console.log(tableData) - - console.log(month) }, [month, unidade]) return ( diff --git a/src/pages/telemetria.tsx b/src/pages/telemetria.tsx index 707ca85..ffc2c5a 100644 --- a/src/pages/telemetria.tsx +++ b/src/pages/telemetria.tsx @@ -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(function Alert( + props, + ref +) { + return +}) + +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(false) + const [openSnackError, setOpenSnackError] = useState(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( Smart Energia - Telemetria + + + Dados coletados com sucesso com Sucesso! + + + + + Não foi possivel pegar os dados! + + +

Data inicial

- setStartDate(value.target.value)}/> + setStartDate(value.target.value)} onSelect={value => console.log(value)}/>
-

Data final

- +

Data final

setEndDate(value.target.value)}/>
@@ -95,11 +222,66 @@ export default function Telemetria({userName}: any) { Nenhum + 5 minutos + 15 minutos + 1 hora + 1 dia + + +
+
+ + + + + +
+
+ + + + + + + + + + + + + + + + { + tableData!==null? + tableData?.map((value, index) => { + return <> + + + + + + + + + + + }) + : + null + } + +
PontoNumero do diaDia formatadoHoraMinutoConsumoReativa
{value.ponto}{parseFloat(value.dia_num)}{value.day_formatted}{value.hora}{value.minut}{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}
+ + @@ -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 }, }} > - {/* */} - {/* router.replace('/chartTelemetry')}/> */} - + { + const html = document.querySelector("table").outerHTML; + htmlToCSV(html, "telemetria.csv"); + console.log('clicando') + }}/> setShowChart(!showChart)} green />

@@ -132,6 +317,7 @@ export default function Telemetria({userName}: any) { medição - Distribuidora.

+ ) } @@ -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 } } } diff --git a/src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts b/src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts index 06d922b..f1f9414 100644 --- a/src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts +++ b/src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts @@ -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; } diff --git a/src/styles/layouts/Telemetria/TelemetriaView.ts b/src/styles/layouts/Telemetria/TelemetriaView.ts index 77238d0..34266df 100644 --- a/src/styles/layouts/Telemetria/TelemetriaView.ts +++ b/src/styles/layouts/Telemetria/TelemetriaView.ts @@ -1,9 +1,67 @@ import styled from 'styled-components'; export const TelemetriaView = styled.main` - padding: 20px ; + 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;