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

Remoção do botão de Select na aba Telemetria e carregamento de dados ao editar as datas.

Browse Source
This commit is contained in:
Giuliano Paschoalino 2025-11-19 18:06:38 -03:00
parent ac2ad07d9c
commit 228044e264
4 changed files with 218 additions and 19392 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17693
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -2,6 +2,7 @@
"name": "smart-energia-web", "name": "smart-energia-web",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"packageManager": "yarn@1.22.22",
"scripts": { "scripts": {
"dev": "next dev --port=3444", "dev": "next dev --port=3444",
"build": "next build", "build": "next build",
@ -47,7 +48,6 @@
"next": "12.1.6", "next": "12.1.6",
"nookies": "^2.5.2", "nookies": "^2.5.2",
"notistack": "^2.0.5", "notistack": "^2.0.5",
"npm": "^8.10.0",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"patternomaly": "^1.3.2", "patternomaly": "^1.3.2",
"react": "18.1.0", "react": "18.1.0",
@ -60,7 +60,6 @@
"react-input-mask": "^2.0.4", "react-input-mask": "^2.0.4",
"react-loading": "^2.0.3", "react-loading": "^2.0.3",
"react-pdf-thumbnail": "^0.1.0", "react-pdf-thumbnail": "^0.1.0",
"sharp": "^0.30.7",
"styled-components": "^5.3.5", "styled-components": "^5.3.5",
"tinymce": "^6.0.3", "tinymce": "^6.0.3",
"yup": "^0.32.11" "yup": "^0.32.11"

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

@ -29,7 +29,6 @@ import TextField from '@mui/material/TextField'
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns' import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker' import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider' import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
import { format } from 'date-fns'
import BasicButton from '../../components/buttons/basicButton/BasicButton' import BasicButton from '../../components/buttons/basicButton/BasicButton'
import { DiscretizedConsumptionChart } from '../../components/graph/DiscretizedConsumptionChart' import { DiscretizedConsumptionChart } from '../../components/graph/DiscretizedConsumptionChart'
import FatorPotenciaChart from '../../components/graph/fatorPotenciaChart' import FatorPotenciaChart from '../../components/graph/fatorPotenciaChart'
@ -62,10 +61,12 @@ const months = [
export default function Telemetria({ userName, clients }: any) { export default function Telemetria({ userName, clients }: any) {
const [unity, setUnity] = useState(clients?.[0]?.codigo_scde ?? 0) const [unity, setUnity] = useState(clients?.[0]?.codigo_scde ?? 0)
const [startDate, setStartDate] = useState(new Date()) const today = new Date()
const [endDate, setEndDate] = useState(new Date()) const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
const [month, setMonth] = useState(new Date().getMonth()) const [startDate, setStartDate] = useState(firstDayOfMonth)
const [endMonth, setEndMonth] = useState(new Date().getMonth() + 1) const [endDate, setEndDate] = useState(today)
const [month, setMonth] = useState(today.getMonth())
const [endMonth, setEndMonth] = useState(today.getMonth() + 1)
const [discretization, setDiscretization] = useState('1_hora') const [discretization, setDiscretization] = useState('1_hora')
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false) const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
@ -89,16 +90,16 @@ export default function Telemetria({ userName, clients }: any) {
const currencyBRL = (v: any) => const currencyBRL = (v: any) =>
Number(v ?? 0) Number(v ?? 0)
.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }) .toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })
.replace(/\u00A0/g, ' '); // remove NBSP .replace(/\u00A0/g, ' ') // remove NBSP
const numberBR = (v: any, min = 2, max = 2) => const numberBR = (v: any, min = 2, max = 2) =>
Number(v ?? 0).toLocaleString('pt-BR', { Number(v ?? 0).toLocaleString('pt-BR', {
minimumFractionDigits: min, minimumFractionDigits: min,
maximumFractionDigits: max maximumFractionDigits: max
}); })
function downloadCSVFile(csv, filename) { function downloadCSVFile(csv, filename) {
const BOM = '\uFEFF'; // Excel-friendly UTF-8 BOM const BOM = '\uFEFF' // Excel-friendly UTF-8 BOM
const csv_file = new Blob([BOM, csv.replace(/\u00A0/g, ' ')], { const csv_file = new Blob([BOM, csv.replace(/\u00A0/g, ' ')], {
type: 'text/csv;charset=utf-8;' type: 'text/csv;charset=utf-8;'
}) })
@ -117,23 +118,23 @@ export default function Telemetria({ userName, clients }: any) {
} }
function htmlToCSV(filename) { function htmlToCSV(filename) {
const data = []; const data = []
const rows = document.querySelectorAll('table tr'); const rows = document.querySelectorAll('table tr')
for (let i = 0; i < rows.length; i++) { for (let i = 0; i < rows.length; i++) {
const row = [], const row = [],
cols: any = rows[i].querySelectorAll('td, th'); cols: any = rows[i].querySelectorAll('td, th')
for (let j = 0; j < cols.length; j++) { for (let j = 0; j < cols.length; j++) {
row.push( row.push(
cols[j].innerText.replace(/\u00A0/g, ' ') // sanitize NBSP cols[j].innerText.replace(/\u00A0/g, ' ') // sanitize NBSP
); )
} }
data.push(row.join(';')); data.push(row.join(';'))
} }
downloadCSVFile(data.join('\n'), filename); downloadCSVFile(data.join('\n'), filename)
} }
const [tableData, setTableData] = useState(null) const [tableData, setTableData] = useState(null)
@ -155,65 +156,68 @@ export default function Telemetria({ userName, clients }: any) {
const [fatorPotenciaData, setFatorPotenciaData] = useState([]) const [fatorPotenciaData, setFatorPotenciaData] = useState([])
const [demRegXDemCon, setDemRegXDemCon] = useState([]) const [demRegXDemCon, setDemRegXDemCon] = useState([])
const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState( const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState([])
[]
)
useEffect(() => { useEffect(() => {
setSend(false) setSend(false)
}, [startDate, endDate]) }, [startDate, endDate])
// Auto-update discretization data when parameters change
useEffect(() => { useEffect(() => {
const firstOfTheMonth = format(new Date(startDate).setDate(2), 'yyyy-MM-dd') if (menu === 0 && unity) {
const lastOfTheMonth = format( setLoader(true)
new Date(startDate.getFullYear(), startDate.getMonth() + 1, 0), getDiscretization(unity, startDate, endDate, discretization)
'yyyy-MM-dd' .then((result) => {
) setDiscretizedConsumptionData(result)
setSend(false)
setLoader(false)
setTableData(result)
})
.catch(() => {
setSend(false)
setOpenSnackFields(true)
setLoader(false)
})
}
}, [unity, startDate, endDate, discretization, menu])
setStartDate(new Date(firstOfTheMonth)) // Auto-update demand data when parameters change
useEffect(() => {
if (menu === 1 && unity) {
setLoader(true)
getDemand(unity, startDate, endDate, discretization)
.then((result) => {
setDemRegXDemCon(result)
setSend(false)
setLoader(false)
setTableData(result)
})
.catch(() => {
setSend(false)
setOpenSnackFields(true)
setLoader(false)
})
}
}, [unity, startDate, endDate, discretization, menu])
setLoader(true) // Auto-update power factor data when parameters change
getDiscretization( useEffect(() => {
unity, if (menu === 2 && unity) {
new Date(firstOfTheMonth), setLoader(true)
new Date(lastOfTheMonth), getPowerFactorData(unity, startDate, endDate, discretization)
discretization .then((result) => {
) setFatorPotenciaData(result)
.then((result) => { setTableData(result)
setDiscretizedConsumptionData(result) setSend(false)
setSend(false) setLoader(false)
setLoader(false) })
}) .catch(() => {
.catch(() => { setSend(false)
setSend(false) setOpenSnackFields(true)
setOpenSnackFields(true) setLoader(false)
setLoader(false) // ensure the overlay doesn’t hide the table })
}) }
}, [unity, startDate, endDate, discretization, menu])
getDemand(unity, startDate, endDate, discretization)
.then((result) => {
setDemRegXDemCon(result)
setSend(false)
setTableData(result)
})
.catch(() => {
setSend(false)
setOpenSnackFields(true)
setLoader(false)
})
getPowerFactorData(unity, startDate, endDate, discretization)
.then((result) => {
setFatorPotenciaData(result)
setSend(false)
setLoader(false)
})
.catch(() => {
setSend(false)
setOpenSnackFields(true)
setLoader(false)
})
}, [])
return ( return (
<main style={{ width: '100%' }}> <main style={{ width: '100%' }}>
@ -283,10 +287,10 @@ export default function Telemetria({ userName, clients }: any) {
discretization === '5_min' discretization === '5_min'
? 'Consumo discretizado em 5 minutos' ? 'Consumo discretizado em 5 minutos'
: discretization === '15_min' : discretization === '15_min'
? 'Consumo discretizado em 15 minutos' ? 'Consumo discretizado em 15 minutos'
: discretization === '1_hora' : discretization === '1_hora'
? 'Consumo discretizado em 1 hora' ? 'Consumo discretizado em 1 hora'
: 'Consumo discretizado em 1 dia' : 'Consumo discretizado em 1 dia'
} }
/> />
<Tab label="Demanda" /> <Tab label="Demanda" />
@ -436,74 +440,54 @@ export default function Telemetria({ userName, clients }: any) {
</> </>
) : ( ) : (
<LocalizationProvider dateAdapter={AdapterDateFns}> <LocalizationProvider dateAdapter={AdapterDateFns}>
<div className="datePicker"> <div className="datePicker">
<DesktopDatePicker <DesktopDatePicker
label="Data inicial" label="Data inicial"
inputFormat="dd/MM/yyyy" inputFormat="dd/MM/yyyy"
value={startDate} value={startDate}
onChange={handleChangeStartDate} onChange={handleChangeStartDate}
renderInput={(params) => ( renderInput={(params) => (
<TextField {...params} sx={{ mr: 1, mb: 2 }} /> <TextField {...params} sx={{ mr: 1, mb: 2 }} />
)} )}
/> />
</div> </div>
<div className="datePicker" style={{ marginRight: 10 }}> <div className="datePicker" style={{ marginRight: 10 }}>
<DesktopDatePicker <DesktopDatePicker
label="Data final" label="Data final"
inputFormat="dd/MM/yyyy" inputFormat="dd/MM/yyyy"
value={endDate} value={endDate}
minDate={startDate} minDate={startDate}
maxDate={ maxDate={
discretization === '1_mes' discretization === '1_mes'
? new Date(startDate).setUTCFullYear( ? new Date(startDate).setUTCFullYear(
startDate.getUTCFullYear() + 2 startDate.getUTCFullYear() + 2
) )
: discretization === '1_dia' : discretization === '1_dia'
? new Date(startDate).setUTCFullYear( ? new Date(startDate).setUTCFullYear(
startDate.getUTCFullYear() + 2 startDate.getUTCFullYear() + 2
) )
: discretization === '1_hora' : discretization === '1_hora'
? new Date(startDate).setUTCMonth( ? new Date(startDate).setUTCMonth(
startDate.getUTCMonth() + 1 startDate.getUTCMonth() + 1
) )
: discretization === '15_min' : discretization === '15_min'
? new Date(startDate).setUTCDate( ? new Date(startDate).setUTCDate(
startDate.getUTCDate() + 7 startDate.getUTCDate() + 7
) )
: new Date(startDate).setUTCDate( : new Date(startDate).setUTCDate(
startDate.getUTCDate() + 1 startDate.getUTCDate() + 1
) )
} }
onChange={(newValue: any) => onChange={(newValue: any) =>
handleChangeEndDate(newValue) handleChangeEndDate(newValue)
} }
renderInput={(params) => ( renderInput={(params) => (
<TextField {...params} sx={{ mb: 2 }} /> <TextField {...params} sx={{ mb: 2 }} />
)} )}
/> />
</div> </div>
</LocalizationProvider> </LocalizationProvider>
)} )}
<div className="select">
<BasicButton
title="Selecionar!"
onClick={() => {
setLoader(true)
getDiscretization(unity, startDate, endDate, discretization)
.then((result) => {
setDiscretizedConsumptionData(result)
setSend(false)
setLoader(false)
setTableData(result)
})
.catch((exception) => {
setSend(false)
setOpenSnackFields(true)
setLoader(false)
})
}}
/>
</div>
</ChartFilters> </ChartFilters>
<DiscretizedConsumptionChart <DiscretizedConsumptionChart
@ -511,10 +495,10 @@ export default function Telemetria({ userName, clients }: any) {
discretization === '5_min' discretization === '5_min'
? 'Consumo discretizado em 5 minutos' ? 'Consumo discretizado em 5 minutos'
: discretization === '15_min' : discretization === '15_min'
? 'Consumo discretizado em 15 minutos' ? 'Consumo discretizado em 15 minutos'
: discretization === '1_hora' : discretization === '1_hora'
? 'Consumo discretizado em 1 hora' ? 'Consumo discretizado em 1 hora'
: 'Consumo discretizado em 1 dia' : 'Consumo discretizado em 1 dia'
} }
subtitle="" subtitle=""
dataProps={discretizedConsumptionData} dataProps={discretizedConsumptionData}
@ -598,23 +582,23 @@ export default function Telemetria({ userName, clients }: any) {
maxDate={ maxDate={
discretization === '1_mes' discretization === '1_mes'
? new Date(startDate).setUTCFullYear( ? new Date(startDate).setUTCFullYear(
startDate.getUTCFullYear() + 2
)
: discretization === '1_dia'
? new Date(startDate).setUTCFullYear(
startDate.getUTCFullYear() + 2 startDate.getUTCFullYear() + 2
) )
: discretization === '1_hora' : discretization === '1_dia'
? new Date(startDate).setUTCMonth( ? new Date(startDate).setUTCFullYear(
startDate.getUTCMonth() + 1 startDate.getUTCFullYear() + 2
) )
: discretization === '15_min' : discretization === '1_hora'
? new Date(startDate).setUTCDate( ? new Date(startDate).setUTCMonth(
startDate.getUTCDate() + 7 startDate.getUTCMonth() + 1
) )
: new Date(startDate).setUTCDate( : discretization === '15_min'
startDate.getUTCDate() + 1 ? new Date(startDate).setUTCDate(
) startDate.getUTCDate() + 7
)
: new Date(startDate).setUTCDate(
startDate.getUTCDate() + 1
)
} }
onChange={(newValue: any) => handleChangeEndDate(newValue)} onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => ( renderInput={(params) => (
@ -623,26 +607,6 @@ export default function Telemetria({ userName, clients }: any) {
/> />
</div> </div>
</LocalizationProvider> </LocalizationProvider>
<div className="select">
<BasicButton
title="Selecionar!"
onClick={() => {
setLoader(true)
getDemand(unity, startDate, endDate, discretization)
.then((result) => {
setDemRegXDemCon(result)
setSend(false)
setLoader(false)
setTableData(result)
})
.catch((exception) => {
setSend(false)
setOpenSnackFields(true)
setLoader(false)
})
}}
/>
</div>
</ChartFilters> </ChartFilters>
<DemRegXDemConChart <DemRegXDemConChart
data1={demRegXDemCon} data1={demRegXDemCon}
@ -730,23 +694,23 @@ export default function Telemetria({ userName, clients }: any) {
maxDate={ maxDate={
discretization === '1_mes' discretization === '1_mes'
? new Date(startDate).setUTCFullYear( ? new Date(startDate).setUTCFullYear(
startDate.getUTCFullYear() + 2
)
: discretization === '1_dia'
? new Date(startDate).setUTCFullYear(
startDate.getUTCFullYear() + 2 startDate.getUTCFullYear() + 2
) )
: discretization === '1_hora' : discretization === '1_dia'
? new Date(startDate).setUTCMonth( ? new Date(startDate).setUTCFullYear(
startDate.getUTCMonth() + 1 startDate.getUTCFullYear() + 2
) )
: discretization === '15_min' : discretization === '1_hora'
? new Date(startDate).setUTCDate( ? new Date(startDate).setUTCMonth(
startDate.getUTCDate() + 7 startDate.getUTCMonth() + 1
) )
: new Date(startDate).setUTCDate( : discretization === '15_min'
startDate.getUTCDate() + 1 ? new Date(startDate).setUTCDate(
) startDate.getUTCDate() + 7
)
: new Date(startDate).setUTCDate(
startDate.getUTCDate() + 1
)
} }
onChange={(newValue: any) => handleChangeEndDate(newValue)} onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => ( renderInput={(params) => (
@ -755,31 +719,6 @@ export default function Telemetria({ userName, clients }: any) {
/> />
</div> </div>
</LocalizationProvider> </LocalizationProvider>
<div className="select">
<BasicButton
title="Selecionar!"
onClick={() => {
setLoader(true)
getPowerFactorData(
unity,
startDate,
endDate,
discretization
)
.then((result) => {
setFatorPotenciaData(result)
setSend(false)
setLoader(false)
setTableData(result)
})
.catch((exception) => {
setSend(false)
setOpenSnackFields(true)
setLoader(false)
})
}}
/>
</div>
</ChartFilters> </ChartFilters>
<FatorPotenciaChart <FatorPotenciaChart
title="Fator de Potencia" title="Fator de Potencia"
@ -823,8 +762,8 @@ export default function Telemetria({ userName, clients }: any) {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{Array.isArray(fatorPotenciaData) && fatorPotenciaData.length > 0 ? ( {Array.isArray(tableData) && tableData.length > 0 ? (
fatorPotenciaData.map((value, index) => ( tableData.map((value, index) => (
<tr key={index}> <tr key={index}>
<td className="tg-gceh">{unity}</td> <td className="tg-gceh">{unity}</td>
<td className="tg-gceh">{value?.ponto}</td> <td className="tg-gceh">{value?.ponto}</td>
@ -833,17 +772,29 @@ export default function Telemetria({ userName, clients }: any) {
<td className="tg-gceh">{value?.hora}</td> <td className="tg-gceh">{value?.hora}</td>
<td className="tg-gceh">{value?.minut}</td> <td className="tg-gceh">{value?.minut}</td>
<td className="tg-gceh">{numberBR(value?.f_ref, 2, 2)}</td> <td className="tg-gceh">{numberBR(value?.f_ref, 2, 2)}</td>
<td className="tg-uulg">{numberBR(value?.consumo, 2, 5)}</td> <td className="tg-uulg">
<td className="tg-gceh">{numberBR(value?.reativa, 2, 5)}</td> {numberBR(value?.consumo, 2, 5)}
</td>
<td className="tg-gceh">
{numberBR(value?.reativa, 2, 5)}
</td>
<td className="tg-gceh">{numberBR(value?.fp, 0, 5)}</td> <td className="tg-gceh">{numberBR(value?.fp, 0, 5)}</td>
<td className="tg-gceh">{numberBR(value?.dem_cont, 0, 0)}</td> <td className="tg-gceh">
<td className="tg-gceh">{numberBR(value?.dem_reg, 0, 0)}</td> {numberBR(value?.dem_cont, 0, 0)}
<td className="tg-gceh">{numberBR(value?.dem_tolerancia, 0, 0)}</td> </td>
<td className="tg-gceh">
{numberBR(value?.dem_reg, 0, 0)}
</td>
<td className="tg-gceh">
{numberBR(value?.dem_tolerancia, 0, 0)}
</td>
</tr> </tr>
)) ))
) : ( ) : (
<tr> <tr>
<td className="tg-gceh" colSpan={13}>Sem dados no período selecionado.</td> <td className="tg-gceh" colSpan={13}>
Sem dados no período selecionado.
</td>
</tr> </tr>
)} )}
</tbody> </tbody>
@ -872,9 +823,10 @@ export default function Telemetria({ userName, clients }: any) {
green green
onClick={() => { onClick={() => {
htmlToCSV( htmlToCSV(
`${menu === 2 `${
? 'fator_potencia' menu === 2
: menu === 1 ? 'fator_potencia'
: menu === 1
? 'demanda' ? 'demanda'
: 'consumo_discretizado' : 'consumo_discretizado'
}.csv` }.csv`

1514
yarn.lock
View File

File diff suppressed because it is too large Load Diff