From 2d0891d2dee7d4abcdcf2e0aa28212872724877c Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Fri, 8 Jul 2022 13:06:45 -0300 Subject: [PATCH] add changes --- .../buttons/basicButton/BasicButtonView.ts | 9 ++ .../buttons/gradientButton/GradientButton.tsx | 3 + .../gradientButton/GradientButtonView.ts | 36 ++++- .../graph/cativoXLivreChart/index.tsx | 46 +++--- .../graph/costIndicatorChart/index.tsx | 17 ++- .../graph/grossAnualChart/GrossAnualChart.tsx | 33 ++-- .../grossMensalChart/GrossMensalChart.tsx | 4 +- src/components/sidebar/Sidebar.tsx | 14 +- src/pages/costIndicator/index.tsx | 50 +++++- src/pages/dashboard/index.tsx | 4 +- src/pages/estimatedCost/index.tsx | 50 +++++- src/pages/faq/index.tsx | 1 - src/pages/industryInfo/index.tsx | 1 - src/pages/notifications/index.tsx | 1 - src/pages/pld/index.tsx | 142 ++++++++++++------ src/pages/resumoOperacao/index.tsx | 96 ++++++------ src/pages/telemetria/index.tsx | 73 +++++++-- src/services/charts/telemetry/getDemand.ts | 17 +++ .../charts/telemetry/getDiscretization.ts | 18 +++ .../charts/telemetry/getPowerFactor.ts | 17 +++ src/styles/globals.ts | 51 +++++++ .../ResumoOperacao/ResumoOperacaoView.ts | 42 ++++-- .../layouts/Telemetria/TelemetriaView.ts | 2 +- src/styles/layouts/aboutUs/AboutUsView.ts | 3 +- src/styles/layouts/pld/PldView.ts | 72 ++++++++- 25 files changed, 624 insertions(+), 178 deletions(-) create mode 100644 src/services/charts/telemetry/getDemand.ts create mode 100644 src/services/charts/telemetry/getDiscretization.ts create mode 100644 src/services/charts/telemetry/getPowerFactor.ts diff --git a/src/components/buttons/basicButton/BasicButtonView.ts b/src/components/buttons/basicButton/BasicButtonView.ts index f086fa0..8c6e49c 100644 --- a/src/components/buttons/basicButton/BasicButtonView.ts +++ b/src/components/buttons/basicButton/BasicButtonView.ts @@ -8,7 +8,9 @@ export const BasicButtonView = styled.button` width: 140px; height: 45px; + cursor: pointer; + background: #254F7F; border-radius: 8px; border-style: none; @@ -16,6 +18,13 @@ export const BasicButtonView = styled.button` font-family: 'Poppins'; font-size: 90%; + transition: all 350ms ease-in; + + :hover { + transform: scale(1.02); + opacity: 0.9; + box-shadow: rgb(0, 0, 0, 0.2) 0px 2px 4px -1px; + } color: #FFFFFF; ` diff --git a/src/components/buttons/gradientButton/GradientButton.tsx b/src/components/buttons/gradientButton/GradientButton.tsx index 6f61eda..27ed1aa 100644 --- a/src/components/buttons/gradientButton/GradientButton.tsx +++ b/src/components/buttons/gradientButton/GradientButton.tsx @@ -21,6 +21,9 @@ export default function GradientButton({ title, description, orange, purple, gre return ( handleClick()}> + + +

{description}

 diff --git a/src/components/buttons/gradientButton/GradientButtonView.ts b/src/components/buttons/gradientButton/GradientButtonView.ts index 6bffed5..53039a5 100644 --- a/src/components/buttons/gradientButton/GradientButtonView.ts +++ b/src/components/buttons/gradientButton/GradientButtonView.ts @@ -6,7 +6,6 @@ export const GradientButtonView = styled.button` align-items: center; flex-direction: column; - border-radius: 2px; width: 30%; min-width: 240px; @@ -30,8 +29,43 @@ export const GradientButtonView = styled.button` box-shadow: 0.5px 3px 10px rgba(119, 119, 119, 0.1); + border-radius: 8px!important; border-style: none; + :hover { + transition: all 0.2s linear; + transform: scale(1.1); + } + + svg { + width: 404px; + left: 0; + position: absolute; + top: 0; + height: 110px; + } + + rect { + fill: none; + stroke: #fff; + stroke-width: 2; + stroke-dasharray: 422, 0; + transition: all 0.35s linear; + } + + :hover { + background: rgba($red, 0); + letter-spacing: 1px; + + + rect { + stroke-width: 5; + stroke-dasharray: 15, 310; + stroke-dashoffset: 48; + transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); + } + } + * { margin: 0; padding: 0; diff --git a/src/components/graph/cativoXLivreChart/index.tsx b/src/components/graph/cativoXLivreChart/index.tsx index d283563..c959a8e 100644 --- a/src/components/graph/cativoXLivreChart/index.tsx +++ b/src/components/graph/cativoXLivreChart/index.tsx @@ -60,9 +60,7 @@ ChartJS.register( interface LineBarChartInterface { title: string, subtitle: string, - data1: any, - data2?: any, - data3: any, + chartData: any, red?: any, label: any, dataset1?: string, @@ -73,7 +71,7 @@ interface LineBarChartInterface { miniature?: boolean | undefined, } -export function CativoXLivreChart({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3, barLabel, hashurado, miniature }: LineBarChartInterface) { +export function CativoXLivreChart({ title, subtitle, chartData, label, red, dataset1, dataset2, dataset3, barLabel, hashurado, miniature }: LineBarChartInterface) { const chartRef = useRef(null); const labels = label @@ -109,7 +107,7 @@ export function CativoXLivreChart({ title, subtitle, data1, data2, data3, label, dataArr.map(data => { sum += data; }); - const result = `${(parseInt(value)/1000).toLocaleString('pt-br')}` + const result = `${(parseFloat(value)).toLocaleString('pt-br')}` return value==null? null : result } @@ -138,36 +136,48 @@ export function CativoXLivreChart({ title, subtitle, data1, data2, data3, label, }, borderWidth: 2, fill: false, - data: data1.map(value => value.economia_mensal), + data: chartData.map(value => value.economia_mensal), }, { type: 'bar' as const, label: 'Cativo', backgroundColor: (value, ctx) => { - return hashurado? data1[value.dataIndex]?.dad_estimado == false? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB' + return '#C2D5FB' }, - data: data3.map(value => value.custo_cativo), + data: chartData.map(value => { + if (!value.dad_estimado) + return value.custo_cativo + }), }, { type: 'bar' as const, label: 'Livre', // backgroundColor: '#255488', backgroundColor: (value, ctx) => { - return hashurado? data1[value.dataIndex]?.dad_estimado == false? '#255488' : pattern.draw('diagonal', '#255488') : '#255488' + return '#255488' }, - data: data2.map(value => value.custo_livre), + data: chartData.map(value => { + if (!value.dad_estimado) + return value.custo_livre + }), }, { - type: 'line', - label: 'Est. Livre', - backgroundColor: pattern.draw('diagonal', '#255488'), - data: [], - }, - { - type: 'line', + type: 'bar', label: 'Est. Cativo', backgroundColor: pattern.draw('diagonal', '#C2D5FB'), - data: [], + data: chartData.map(value => { + if (value.dad_estimado) + return value.custo_cativo + }), + }, + { + type: 'bar', + label: 'Est. Livre', + backgroundColor: pattern.draw('diagonal', '#255488'), + data: chartData.map(value => { + if (value.dad_estimado) + return value.custo_livre + }), } ], } diff --git a/src/components/graph/costIndicatorChart/index.tsx b/src/components/graph/costIndicatorChart/index.tsx index 3a1d80b..58596c0 100644 --- a/src/components/graph/costIndicatorChart/index.tsx +++ b/src/components/graph/costIndicatorChart/index.tsx @@ -49,6 +49,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl } }, y: { + stacked: true, grid: { display: false } @@ -91,17 +92,23 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl { label: '2021', data: data1.map(value => value.custo_unit>0? value.custo_unit : null), - backgroundColor: '#C2d5fb' - // backgroundColor: (value, ctx) => { - // return data1[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#255488'); - // }, + // backgroundColor: '#C2d5fb' + backgroundColor: (value, ctx) => { + if (value.dad_estimado) + return draw('diagonal-right-left', '#C2d5fb'); + else + return '#C2d5fb' + }, }, { label: '2022', data: data2.map(value => value.custo_unit>0? value.custo_unit : null), // backgroundColor: '#255488' backgroundColor: (value, ctx) => { - return data2[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#255488'); + if (value.dad_estimado) + return draw('diagonal-right-left', '#255488'); + else + return '#255488' }, } ], diff --git a/src/components/graph/grossAnualChart/GrossAnualChart.tsx b/src/components/graph/grossAnualChart/GrossAnualChart.tsx index 1e90bdb..58f36a8 100644 --- a/src/components/graph/grossAnualChart/GrossAnualChart.tsx +++ b/src/components/graph/grossAnualChart/GrossAnualChart.tsx @@ -2,7 +2,7 @@ import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title import ChartDataLabels from 'chartjs-plugin-datalabels'; import { draw, generate } from 'patternomaly' import React from 'react'; -import { Bar } from 'react-chartjs-2'; +import { Bar, Chart } from 'react-chartjs-2'; import { GrossAnualChartView } from './GrossAnualChartView'; import ChartTitle from '../ChartTitle'; @@ -40,11 +40,13 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar return spaces } - const options: object = { + + const options: any = { responsive: true, is3D: true, scales: { x: { + grouped: false, font: { size: 20 }, @@ -102,7 +104,7 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar let labels: string[]; if (bruta) { - labels = label.map(value => value.replace('2021', 'até 2021')) + labels = label.map(value => value.replace('2021', 'Até 2021')) } else { labels = label } @@ -111,26 +113,29 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar labels, datasets: [ { - label: 'Estimado', - data: [], - backgroundColor: '#C2d5fb', - }, - { + type: 'bar', label: dataset, data: dataProps.map((value, index) => { + if (!value.dad_estimado) return parseFloat(value.economia_acumulada).toFixed(2) }), backgroundColor: (value, ctx) => { - return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb'); + return '#255488' }, }, { - label: '', - data: [dataProps[0]?.economia_acumulada?dataProps[0].economia_acumulada*1.1 : 1], - backgroundColor: 'transparent', + type: 'bar', + label: 'Estimado', + data: dataProps.map((value, index) => { + if (value.dad_estimado) + return parseFloat(value.economia_acumulada).toFixed(2) + }), datalabels: { display: false - } + }, + backgroundColor: (value, ctx) => { + return draw('diagonal-right-left', '#C2d5fb'); + }, }, ], } @@ -138,7 +143,7 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar return ( - + ) } diff --git a/src/components/graph/grossMensalChart/GrossMensalChart.tsx b/src/components/graph/grossMensalChart/GrossMensalChart.tsx index 09beafa..47c5264 100644 --- a/src/components/graph/grossMensalChart/GrossMensalChart.tsx +++ b/src/components/graph/grossMensalChart/GrossMensalChart.tsx @@ -11,6 +11,8 @@ import { Legend } from 'chart.js' +import document from 'next/document'; + import { draw, generate } from 'patternomaly' import { GrossMensalChartView } from './GrossMensalChartView'; @@ -79,7 +81,7 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle, sum += data; }); const percentage = data1[ctx.dataIndex]?.econ_percentual? (data1[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%" : ''; - const result = `⠀${spacement(parseInt(value+3).toLocaleString('pt-br'))}${parseInt(value)!=0? percentage : ''}\n${parseInt(value)!=0? parseInt(value).toLocaleString('pt-br') : ''}` + const result = `${spacement(parseInt(value+3).toLocaleString('pt-br'))}${parseInt(value)!=0? percentage : ''}\n${parseInt(value)!=0? parseInt(value).toLocaleString('pt-br') : ''}` return value==null? null : result }, diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 1fbac26..e90d1b7 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -110,15 +110,15 @@ export default function Sidebar() {
  • Cativo x Livre Mensal
  • Custo R$/MWh
    • -
  • {'Telemetria >'}
    • +
  • {'Telemetria'}
  • {'Resumo de Op. '}
    • -
  • {'Notícias >'}
    • -
  • {'PLD >'}
    • -
  • {'Info Setorial >'}
    • +
  • {'Notícias'}
    • +
  • {'PLD'}
    • +
  • {'Info Setorial'}
    • {/*
  • {'Consumo'}
    • */} -
  • {'Notificações >'}

    {notificationsCount}

    • -
  • {'Sobre Nós >'}
    • -
  • {'FAQ >'}
    • +
  • {'Notificações'}

    {notificationsCount}

    • +
  • {'Sobre Nós'}
    • +
  • {'FAQ'}
    • + + Unidade + +
    value.mes.slice(4, 8).includes('2021'))} - // data1={graphData} data2={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2022'))} label={months} /> @@ -50,9 +75,25 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { const apiClient = getAPIClient(ctx) const { ['@smartAuth-token']: token } = parseCookies(ctx) const { ['user-name']: userName } = parseCookies(ctx) + const { ['user-client_id']: id } = parseCookies(ctx) let graphData = []; + let clients = []; + + await apiClient.post('/units', { + "filters": [ + {"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]}, + {"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) + }) + await apiClient.post('/economy/MWh').then(res => { graphData = res.data.data }).catch(res => { @@ -70,6 +111,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { return { props: { + clients, graphData, userName } diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index fc72dbc..32d9f8b 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -54,7 +54,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
    - + { mapsInfo.map(value => { return @@ -84,7 +84,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal - diff --git a/src/pages/estimatedCost/index.tsx b/src/pages/estimatedCost/index.tsx index 61f77b9..15d5a47 100644 --- a/src/pages/estimatedCost/index.tsx +++ b/src/pages/estimatedCost/index.tsx @@ -1,17 +1,24 @@ import { GetServerSideProps } from 'next' import Head from 'next/head' import { parseCookies } from 'nookies' -import React from 'react' +import React, { useState } from 'react' import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart' -import { LineBarChart2 } from '../../components/graph/LineBarChart2' +// material ui imports +import MenuItem from '@mui/material/MenuItem'; +import InputLabel from '@mui/material/InputLabel'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; + import Header from '../../components/header/Header' import PageTitle from '../../components/pageTitle/PageTitle' import { ConsumoEstimado } from '../../services/consumoEstimado' import getAPIClient from '../../services/ssrApi' import { EstimatedCostView } from '../../styles/layouts/economy/estimatedCost/EstimatedCostView' -export default function EstimatedCost({graphData, userName}: any) { +export default function EstimatedCost({graphData, userName, clients}: any) { + const [unity, setUnity] = useState(''); + return ( @@ -20,8 +27,27 @@ export default function EstimatedCost({graphData, userName}: any) {
    + + Unidade + +
    -
    @@ -33,8 +59,23 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { const apiClient = getAPIClient(ctx) const { ['@smartAuth-token']: token } = parseCookies(ctx) const { ['user-name']: userName } = parseCookies(ctx) + const { ['user-client_id']: id } = parseCookies(ctx) let graphData = []; + let clients = []; + + await apiClient.post('/units', { + "filters": [ + {"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]}, + {"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) + }) await apiClient.post('/economy/estimates').then(res => { graphData = res.data.data @@ -53,6 +94,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { return { props: { + clients, graphData, userName } diff --git a/src/pages/faq/index.tsx b/src/pages/faq/index.tsx index 5fcf878..03747dd 100644 --- a/src/pages/faq/index.tsx +++ b/src/pages/faq/index.tsx @@ -18,7 +18,6 @@ export default function commonQuestions({faqData, userName}) { Smart Energia - FAQ
    -
    diff --git a/src/pages/industryInfo/index.tsx b/src/pages/industryInfo/index.tsx index ff71d99..6394455 100644 --- a/src/pages/industryInfo/index.tsx +++ b/src/pages/industryInfo/index.tsx @@ -59,7 +59,6 @@ export default function industryInfo({userName}: any) { Smart Energia - Info de Setor
    -

    Um resumo das atualizações gerais do Setor Elétrico, com dados sobre geração consumo, demanda, meteorologia baseadas em informações do ONS, CCEE, ANEEL, 10 Maiores Jornais e Revistas e CPTEC

    diff --git a/src/pages/notifications/index.tsx b/src/pages/notifications/index.tsx index 5874dfc..251398b 100644 --- a/src/pages/notifications/index.tsx +++ b/src/pages/notifications/index.tsx @@ -17,7 +17,6 @@ export default function Notifications({notificationData, userName}: any) { Smart Energia - Notificações
    -
    diff --git a/src/pages/pld/index.tsx b/src/pages/pld/index.tsx index 81bdf7b..640a836 100644 --- a/src/pages/pld/index.tsx +++ b/src/pages/pld/index.tsx @@ -1,3 +1,4 @@ +import Fab from '@mui/material/Fab'; import FormControl from '@mui/material/FormControl'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; @@ -16,9 +17,19 @@ import PageTitle from '../../components/pageTitle/PageTitle'; import { api } from '../../services/api'; import { EvolucaoPld } from '../../services/evolucaoPld'; import getAPIClient from '../../services/ssrApi'; -import { GoBack, PldGraphView, PldTableView } from '../../styles/layouts/pld/PldView' +import { GoBack, PldGraphView, PldTableView, TableHeader } from '../../styles/layouts/pld/PldView' import RenderIf from '../../utils/renderIf' +import Tabs from '@mui/material/Tabs'; +import Tab from '@mui/material/Tab'; + +import NavigationIcon from '@mui/icons-material/Navigation'; + +import TextField from '@mui/material/TextField'; +import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'; +import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; + interface pldInterface { tableData: any, graphByHourData: any, @@ -30,11 +41,14 @@ interface pldInterface { export default function pld({tableData, userName, clientMonth}: pldInterface) { const dateFormated = new Date() - const year_Month = `0${dateFormated.getMonth()}/${dateFormated.getFullYear()}` + const year_Month = `0${dateFormated.getMonth()+1}/${dateFormated.getFullYear()}` - const [date, setDate] = useState(`${dateFormated.getFullYear()}-${dateFormated.getMonth()}-${dateFormated.getUTCDate()}`); + const [date, setDate] = useState(new Date()); const [select, setSelect] = useState('SUDESTE'); - const [page, setPage] = useState('table') + + // rendering page + const [page, setPage] = useState(0) + const [month, setMonth] = useState((dateFormated.getUTCMonth()+1).toString()) const [dataByDay, setDataByDay] = useState([]) @@ -43,6 +57,12 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) { const [norte, setNorte] = useState([]) const [sudeste, setSudeste] = useState([]) const [nordeste, setNordeste] = useState([]) + const [ pageYPosition, setPageYPosition ] = useState(0); + + function getPageYAfterScroll(){ + setPageYPosition(window.scrollY); + console.log(window.scrollY) + } const handleChange = (event: SelectChangeEvent) => { setSelect(event.target.value); @@ -51,6 +71,12 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) { setMonth(event.target.value); }; + const handleChangeDate = (newValue: Date | null) => { + setDate(newValue) + + console.log(newValue.toLocaleDateString().replace('/', '-').split('-').reverse().join('-')) + }; + function getDataByDay() { api.post('/pld/daily', { "limit": 20, @@ -169,22 +195,43 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) { downloadCSVFile(data.join("\n"), filename); } + // const handleTabChange = (event: React.SyntheticEvent, newValue: number) => { + // setPages(newValue); + // }; + useEffect(() => { getDataByHour() getDataByDay() console.log(month) }, [date, month, select]) + useEffect(() => { + window?.addEventListener('scroll', getPageYAfterScroll); + }, []) + return (
    Smart Energia - PLD - -
    - {'< Voltar para Visão Geral'} - -
    +
    +
    + +
    + + setPage(nv)} aria-label=""> + + + + +
    + { + const html = document.querySelector("table").outerHTML; + htmlToCSV(html, "tabela_PLD.csv"); + }} title='Download'/> +
    +     + @@ -202,20 +249,20 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) { return <> - - - - + + + + }) } - - - - - + + + + + { tableData.result.map((data, index) => { @@ -254,28 +301,25 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) { }
    {data.year_month_formatted}{parseFloat(data.nordeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}{parseFloat(data.norte).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}{parseFloat(data.sudeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}{parseFloat(data.sul).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}{parseFloat(data.nordeste).toLocaleString('pt-br',{currency: 'BRL', minimumFractionDigits: 2})}{parseFloat(data.norte).toLocaleString('pt-br',{currency: 'BRL', minimumFractionDigits: 2})}{parseFloat(data.sudeste).toLocaleString('pt-br',{currency: 'BRL', minimumFractionDigits: 2})}{parseFloat(data.sul).toLocaleString('pt-br',{currency: 'BRL', minimumFractionDigits: 2})}
    -
    - { - const html = document.querySelector("table").outerHTML; - htmlToCSV(html, "tabela_PLD.csv"); - }} title='Download'/> -
    -
    setPage('perMouth')}> +
    setPage(1)} className="btn btn-1"> + + +

    Valores Diários

    -
    setPage('perDate')}> +
    setPage(2)} className="btn btn-1"> + + +

    Valores Horários

         - -
    - setPage('table')}>{'< Voltar para PLD Histórico'} - -
    + {/* grafico de grafico por seleção de data (mês)*/} +
    @@ -319,7 +363,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) { return 0 }).map((data, index) => { - return {data.mes_ref.slice(2, 4)} + return {data.mes_ref} }) } @@ -333,22 +377,36 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) { - -
    - setPage('table')}>{'< Voltar para PLD Histórico'} - -
    + {/* grafico de grafico por seleção de data INTEIRA*/} +
    -

    Selecione o mês:

    - setDate(value.target.value)}/> +

    Selecione a data:

    + {/* setDate(value.target.value)}/> */} + +
    + } + /> +
    +
    + dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL' + title={date? `Período - ${date.toLocaleDateString()}` : null} + subtitle='' label={['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']} + />     + {pageYPosition > 300 && + + + + }
    ) } diff --git a/src/pages/resumoOperacao/index.tsx b/src/pages/resumoOperacao/index.tsx index 4bb40bc..4ab3a5b 100644 --- a/src/pages/resumoOperacao/index.tsx +++ b/src/pages/resumoOperacao/index.tsx @@ -18,7 +18,7 @@ import { api } from '../../services/api'; // import { dados } from '../services/DadosTabelaResumoOperacao'; import data from '../../services/dados.json' import getAPIClient from '../../services/ssrApi'; -import { Pagination, TableView } from '../../styles/layouts/ResumoOperacao/ResumoOperacaoView'; +import { Pagination, TableHeader, TableView } from '../../styles/layouts/ResumoOperacao/ResumoOperacaoView'; export default function ResumoOperacao({tableData, clientsData, userName, clientMonth}: any) { const csvData = tableData; @@ -60,6 +60,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client } useEffect(() => { + console.log(month) if (unidade!=='' || month!==''){ api.post('/operation/summary', month && !unidade? { "filters": [ @@ -95,44 +96,54 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
    -

    Filtrar por Unidade e/ou Mês

    -
    - - Unidades - - + +
    +

    Filtrar por Unidade e/ou Mês

    +
    + + Unidades + + - - Mês - - -
    + + Mês + + +
    + +
    + { + const html = document.querySelector("table").outerHTML; + htmlToCSV(html, "resumo_operacao.csv"); + }}/> +
    + @@ -149,8 +160,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client { tableDataState.map((value, index) => { if (value.mes.slice(4,7) != '2020') - return <> - + return @@ -159,16 +169,12 @@ export default function ResumoOperacao({tableData, clientsData, userName, client - }) }
    {value.mes} {value.cod_smart_unidade} {value.operacao}{parseFloat(value.preco_nf).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})} {parseFloat(value.nf_c_icms).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}
    - { - const html = document.querySelector("table").outerHTML; - htmlToCSV(html, "resumo_operacao.csv"); - }}/> +
    ) diff --git a/src/pages/telemetria/index.tsx b/src/pages/telemetria/index.tsx index 80e0471..5ffc7c8 100644 --- a/src/pages/telemetria/index.tsx +++ b/src/pages/telemetria/index.tsx @@ -23,6 +23,13 @@ import getAPIClient from '../../services/ssrApi'; import router from 'next/router'; import { DemRegXDemConChart } from '../../components/graph/DemRegXDemConChart'; +import TextField from '@mui/material/TextField'; +import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'; +import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import Stack from '@mui/material/Stack'; +import BasicButton from '../../components/buttons/basicButton/BasicButton'; + const style = { position: 'absolute' as const, top: '50%', @@ -44,8 +51,8 @@ const Alert = React.forwardRef(function Alert( export default function Telemetria({userName, clients}: any) { const [unity, setUnity] = useState(''); - const [startDate, setStartDate] = useState(''); - const [endDate, setEndDate] = useState(''); + const [startDate, setStartDate] = useState(new Date()); + const [endDate, setEndDate] = useState(new Date()); const [discretization, setDiscretization] = useState(''); const [openSnackSuccess, setOpenSnackSuccess] = useState(false) @@ -110,8 +117,19 @@ export default function Telemetria({userName, clients}: any) { const [demRegXDemCon, setDemRegXDemCon] = useState(null); + const [value, setValue] = React.useState( + new Date(), + ); + + const handleChangeStartDate = (newValue: Date | null) => { + setStartDate(newValue) + }; + const handleChangeEndDate = (newValue: Date | null) => { + setEndDate(newValue) + }; + async function getTableData() { - if (startDate!=='' && endDate!=='' && send) + if (startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && send) setOpen(true) await api.post('/telemetry/powerFactor', { "type": discretization, @@ -137,12 +155,12 @@ export default function Telemetria({userName, clients}: any) { } function handleVerifyFields() { - if (unity != '' && startDate != '' && endDate != '' && discretization != '') { + if (unity != '' && startDate.toLocaleDateString() != '' && endDate.toLocaleDateString() != '' && discretization != '') { router.push({ pathname: '/chartTelemetry', query: { - startDate, - endDate, + 'startDate': startDate.toLocaleDateString(), + 'endDate': endDate.toLocaleDateString(), discretization, unity }, @@ -256,17 +274,40 @@ export default function Telemetria({userName, clients}: any) { -
    + {/*

    Data inicial

    setStartDate(value.target.value)} min="2021-01-01"/> -
    +
    */} -
    + +
    +

    Data inicial

    + } + /> +
    +
    +

    Data final

    + } + /> +
    +     + + {/*

    Data final

    setEndDate(value.target.value)} min="2021-01-01"/> -
    +
    */}

    Discretização

    @@ -291,13 +332,13 @@ export default function Telemetria({userName, clients}: any) {
    - + { + setSend(true) + getTableData() + }}/>
    - +
    @@ -308,7 +349,7 @@ export default function Telemetria({userName, clients}: any) {
    - + diff --git a/src/services/charts/telemetry/getDemand.ts b/src/services/charts/telemetry/getDemand.ts new file mode 100644 index 0000000..fc35598 --- /dev/null +++ b/src/services/charts/telemetry/getDemand.ts @@ -0,0 +1,17 @@ +import { api } from "../../api" + +export async function getDemand( + unity: string, + startDate: string, + endDate: string, + discretization: string + ) { + const { data } = await api.post('/telemetry/demand', { + "filters": [ + {"type" : "=", "field": `${discretization}.ponto`, "value": unity}, + {"type" : "between", "field": ["dia_num"], "value": [startDate, endDate]} + ] + }) + + return data.data +} diff --git a/src/services/charts/telemetry/getDiscretization.ts b/src/services/charts/telemetry/getDiscretization.ts new file mode 100644 index 0000000..4fede53 --- /dev/null +++ b/src/services/charts/telemetry/getDiscretization.ts @@ -0,0 +1,18 @@ +import { api } from "../../api" + +export async function getDiscretization( + unity: string, + startDate: string, + endDate: string, + discretization: string + ) { + const { data } = await api.post('/telemetry/discretization', { + "type": discretization, + "filters": [ + {"type" : "=", "field": "med_5min.ponto", "value": unity} + ] + } + ) + + return data.data +} diff --git a/src/services/charts/telemetry/getPowerFactor.ts b/src/services/charts/telemetry/getPowerFactor.ts new file mode 100644 index 0000000..0e8f0da --- /dev/null +++ b/src/services/charts/telemetry/getPowerFactor.ts @@ -0,0 +1,17 @@ +import { api } from "../../api" + +export async function getPowerFactorData( + unity: string, + startDate: string, + endDate: string, + discretization: string + ) { + const { data } = await api.post('/telemetry/powerFactor', { + "filters": [ + {"type" : "=", "field": `${discretization}.ponto`, "value": unity}, + {"type" : "between", "field": "dia_num", "value": [startDate, endDate]} + ] + }) + + return data.data +} diff --git a/src/styles/globals.ts b/src/styles/globals.ts index b70c240..45436b1 100644 --- a/src/styles/globals.ts +++ b/src/styles/globals.ts @@ -39,4 +39,55 @@ export const GlobalStyle = createGlobalStyle` * { box-sizing: border-box; } + + + .datePicker { + .css-1u3bzj6-MuiFormControl-root-MuiTextField-root, + .css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root, + .css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root, + .css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root, + .MuiOutlinedInput-notchedOutline, + .css-1d3z3hw-MuiOutlinedInput-notchedOutline, + .MuiOutlinedInput-input, + .MuiInputBase-input, + .MuiInputBase-inputAdornedEnd, + .css-nxo287-MuiInputBase-input-MuiOutlinedInput-input{ + /* background-color: red!important; */ + /* border: none!important; + outline: 0 */ + height: 45px; + } + + .MuiFormControl-root, + .MuiTextField-root, + .css-1u3bzj6-MuiFormControl-root-MuiTextField-root { + margin-top: 8px; + } + + .MuiOutlinedInput-input, + .MuiInputBase-input, + .MuiInputBase-inputAdornedEnd, + .css-nxo287-MuiInputBase-input-MuiOutlinedInput-input { + border: none; + outline: 0; + background-color: transparent; + } + + .MuiOutlinedInput-input, + .MuiInputBase-input .MuiInputBase-inputAdornedEnd, + .css-nxo287-MuiInputBase-input-MuiOutlinedInput-input { + padding-top: 6px; + } + + .MuiButtonBase-root, + .MuiIconButton-root, + .MuiIconButton-edgeEnd, + .MuiIconButton-sizeMedium, + .css-1yq5fb3-MuiButtonBase-root-MuiIconButton-root { + margin-bottom: 5px; + width: 30px; + height: 30px; + } + } + `; diff --git a/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts b/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts index f74c34b..032ad6c 100644 --- a/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts +++ b/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts @@ -20,15 +20,6 @@ export const TableView = styled.div` margin-top: 10px; } - .select{ - display: flex; - flex-direction: row; - - margin-bottom: 25px; - - width: 30rem; - } - .tg{ border-collapse:collapse; border-spacing:0; @@ -81,7 +72,7 @@ export const TableView = styled.div` color:#6a707e; font-size:14px; text-align:center; - vertical-align:top + vertical-align:top; } .tg .tg-0tzy{ color:#abafb3; @@ -120,8 +111,39 @@ export const TableView = styled.div` .teste { width: 10rem; } + + table, th:last-child{ + border: transparent; + border-top-right-radius: 20px; + } + + table, th:first-child { + border: transparent; + border-top-left-radius: 20px; + } + + .radius { + background-color: red!important; + } `; +export const TableHeader = styled.section` + display: flex; + justify-content: space-between; + align-items: flex-end; + + width: 100%; + + margin-bottom: 25px; + + .select{ + display: flex; + flex-direction: row; + + width: 30rem; + } +` + export const Pagination = styled.div` display: flex; justify-content: space-between; diff --git a/src/styles/layouts/Telemetria/TelemetriaView.ts b/src/styles/layouts/Telemetria/TelemetriaView.ts index d80f87b..271d4f5 100644 --- a/src/styles/layouts/Telemetria/TelemetriaView.ts +++ b/src/styles/layouts/Telemetria/TelemetriaView.ts @@ -215,8 +215,8 @@ export const TelemetriaView = styled.main` .select { display: flex; - justify-content: center; align-items: flex-start; + justify-content: center; flex-direction: column; } diff --git a/src/styles/layouts/aboutUs/AboutUsView.ts b/src/styles/layouts/aboutUs/AboutUsView.ts index 7e18de1..b0520e9 100644 --- a/src/styles/layouts/aboutUs/AboutUsView.ts +++ b/src/styles/layouts/aboutUs/AboutUsView.ts @@ -12,8 +12,7 @@ export const AboutUsView = styled.main` aside { position: relative; - /* margin-bottom: 150px; */ - + bottom: 220px; display: flex; justify-content: center; align-items: center; diff --git a/src/styles/layouts/pld/PldView.ts b/src/styles/layouts/pld/PldView.ts index ba7ab45..9579f49 100644 --- a/src/styles/layouts/pld/PldView.ts +++ b/src/styles/layouts/pld/PldView.ts @@ -3,10 +3,16 @@ import styled from "styled-components" export const PldTableView = styled.main` width: 100%; + border-radius: 8px!important; + table { p { font-size: 12px; } + + thead { + border-radius: 8px!important; + } } .actual { @@ -134,6 +140,8 @@ export const PldTableView = styled.main` align-items: center; article { + position: relative; + display: flex; justify-content: center; align-items: center; @@ -143,13 +151,53 @@ export const PldTableView = styled.main` margin: 40px; - border-radius: 20px; + background: #255488; + color: white; + + border-radius: 8px; box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; -moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; - background: #F8F8F8; cursor: pointer; + + background: darken($red, 1.5%); + + background: linear-gradient(200.69deg, #254f7f 9%, #3183e0 98%), #FFFFFF; + + :hover { + transition: all 0.2s linear; + transform: scale(1.1); + } + + svg { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + + rect { + fill: none; + stroke: #fff; + stroke-width: 2; + stroke-dasharray: 422, 0; + transition: all 0.35s linear; + } + } + + .btn-1:hover { + background: rgba($red, 0); + letter-spacing: 1px; + + + rect { + stroke-width: 5; + stroke-dasharray: 15, 310; + stroke-dashoffset: 48; + transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); + } } } @@ -161,7 +209,13 @@ export const PldTableView = styled.main` } .btnDownload{ - margin-top: 25px; + width: fit-content; + margin-bottom: 15px; + :hover { + position: relative; + transition: all 0.2s linear; + transform: translateY(-6px); + } } ` @@ -277,3 +331,15 @@ export const NewTableLine = styled.section` margin: 0 0 10px 0; } ` + +export const TableHeader = styled.label` + width: 100%; + + display: flex; + align-items: center; + justify-content: space-between; + + flex-direction: row; + + padding: 0 40px 0 40px +`