Robson Tenorio Henriques

Olá pessoal, estou com um projeto onde no mesmo existe 11 categorias e vários modelos para cada categoria, as categorias e modelos são apresentadas por meio de imagens em miniaturas (OBS: as imagens são dispostas em duas colunas), onde ao clicar numa categoria abre os modelos existentes, esta parte esta funcionando perfeitamente, porém o que necessito fazer é limitar a exibição das categorias e modelo para uma área de no máximo 1000px, que seria umas 6 ou 7 imagens aproximadamente e adicionar botões de navegação para passar entre os itens.. Abaixo segue o código da página: <div id="menu" class="pecasmain"> <input type="hidden" id="idlinha" name="idlinha" value="0"> <input type="hidden" id="idmodelo" name="idmodelo" value="0"> <div id="menuLinhas" class="menuLinhas"> <h3>LINHAS</h3> <a id="linha1" idreg="225" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000225_01_gd.jpg" /> <span class="linknaoselecionado">Adubadoras Pendulares</span> </a> <a id="linha2" idreg="62" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000062_01_gd.jpg" /> <span class="linknaoselecionado">Mini Pá Carregadeira e Mini Retro Escavadeira</span> </a> <a id="linha3" idreg="63" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000063_01_gd.jpg" /> <span class="linknaoselecionado">Manejo de solo e trituração de poda: </span> </a> <a id="linha4" idreg="61" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000061_01_gd.jpg" /> <span class="linknaoselecionado">Adubadoras mono disco</span> </a> <a id="linha5" idreg="242" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000242_01_gd.jpg" /> <span class="linknaoselecionado">Recolhedora de terreiro</span> </a> <a id="linha6" idreg="246" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000246_01_gd.jpg" /> <span class="linknaoselecionado">Enlerador e soprador</span> </a> <a id="linha7" idreg="59" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000059_01_gd.jpg" /> <span class="linknaoselecionado">Adubadoras de 2 discos</span> </a> <a id="linha8" idreg="10419" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000010419_01_gd.jpg" /> <span class="linknaoselecionado">Adubadora cafeeira e citrus</span> </a> <a id="linha9" idreg="65" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000065_01_gd.jpg" /> <span class="linknaoselecionado">Recolhedora e abonadora de chão</span> </a> <a id="linha10" idreg="9039" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000009039_01_gd.jpg" /> <span class="linknaoselecionado">Podadora</span> </a> <a id="linha11" idreg="16321" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000016321_01_gd.jpg" /> <span class="linknaoselecionado">Braço de retro agrícola</span> </a> </div> <div id="menuModelos0" class="menuModelos"> <h3>MODELOS</h3> <span>Selecione uma LINHA no menu à esquerda.</span> </div> <div id="menuModelos225" class="menuModelos" style="display: none;"> <h3>Adubadoras Pendulares</h3> <a href="#" id="modelo1" idreg="69" class="linkmodelo"> <img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000069_01_gd.jpg" /> <span class="linknaoselecionado"> PS 203</span></a> <a href="#" id="modelo2" idreg="232" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000232_01_gd.jpg" /> <span class="linknaoselecionado"> PS / PSPP 303</span></a> <a href="#" id="modelo3" idreg="235" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000235_01_gd.jpg" /> <span class="linknaoselecionado">PS / PSPP 403</span></a> <a href="#" id="modelo4" idreg="236" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000236_01_gd.jpg" /> <span class="linknaoselecionado">PS 503</span></a> <a href="#" id="modelo5" idreg="237" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000237_01_gd.jpg" /> <span class="linknaoselecionado">PS / PSPP 603</span></a> <a href="#" id="modelo6" idreg="233" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000233_01_gd.jpg" /> <span class="linknaoselecionado">PS 753</span></a> <a href="#" id="modelo7" idreg="234" class="linkmodelo"><img id="img7" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000234_01_gd.jpg" /> <span class="linknaoselecionado">PS 953</span></a> <a href="#" id="modelo8" idreg="238" class="linkmodelo"><img id="img8" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000238_01_gd.jpg" /> <span class="linknaoselecionado">PS 1153</span></a> <a href="#" id="modelo9" idreg="239" class="linkmodelo"><img id="img9" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000239_01_gd.jpg" /> <span class="linknaoselecionado">PS 1353</span></a> <a href="#" id="modelo10" idreg="240" class="linkmodelo"><img id="img10" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000240_01_gd.jpg" /> <span class="linknaoselecionado">PS 1553T</span></a> <a href="#" id="modelo11" idreg="16808" class="linkmodelo"><img id="img11" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016808_01_gd.jpg" /> <span class="linknaoselecionado">Pendulum</span></a> </div> <div id="menuModelos62" class="menuModelos" style="display: none;"> <h3>Mini Pá Carregadeira e Mini Retro Escavadeira</h3> <a href="#" id="modelo1" idreg="88" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000088_01_gd.jpg" /> <span class="linknaoselecionado">PX 04 Mini Pá carregadeira</span></a> <a href="#" id="modelo2" idreg="89" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000089_01_gd.jpg" /> <span class="linknaoselecionado">RX 04 Mini Retro escavadeira</span></a> </div> <div id="menuModelos63" class="menuModelos" style="display: none;"> <h3>Manejo de solo e trituração de poda: </h3> <a href="#" id="modelo1" idreg="86" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000086_01_gd.jpg" /> <span class="linknaoselecionado">TRSL 90</span></a> <a href="#" id="modelo2" idreg="87" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000087_01_gd.jpg" /> <span class="linknaoselecionado">TRSL 90E</span></a> <a href="#" id="modelo3" idreg="251" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000251_01_gd.jpg" /> <span class="linknaoselecionado">TRV 100 </span></a> <a href="#" id="modelo4" idreg="252" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000252_01_gd.jpg" /> <span class="linknaoselecionado">TRV 120</span></a> <a href="#" id="modelo5" idreg="16615" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016615_01_gd.jpg" /> <span class="linknaoselecionado">TRL 120</span></a> <a href="#" id="modelo6" idreg="258" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000258_01_gd.jpg" /> <span class="linknaoselecionado">TRL 140</span></a> <a href="#" id="modelo7" idreg="259" class="linkmodelo"><img id="img7" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000259_01_gd.jpg" /> <span class="linknaoselecionado">TRL 160</span></a> <a href="#" id="modelo8" idreg="260" class="linkmodelo"><img id="img8" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000260_01_gd.jpg" /> <span class="linknaoselecionado">TRL 180</span></a> <a href="#" id="modelo9" idreg="261" class="linkmodelo"><img id="img9" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000261_01_gd.jpg" /> <span class="linknaoselecionado">TRL 200</span></a> <a href="#" id="modelo10" idreg="262" class="linkmodelo"><img id="img10" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000262_01_gd.jpg" /> <span class="linknaoselecionado">TRL 220</span></a> <a href="#" id="modelo11" idreg="254" class="linkmodelo"><img id="img11" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000254_01_gd.jpg" /> <span class="linknaoselecionado">TRP 120</span></a> <a href="#" id="modelo12" idreg="255" class="linkmodelo"><img id="img12" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000255_01_gd.jpg" /> <span class="linknaoselecionado">TRP 160H</span></a> <a href="#" id="modelo13" idreg="253" class="linkmodelo"><img id="img13" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000253_01_gd.jpg" /> <span class="linknaoselecionado">TRLA 180 </span></a> <a href="#" id="modelo14" idreg="15868" class="linkmodelo"><img id="img14" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000015868_01_gd.jpg" /> <span class="linknaoselecionado">TRLA 140</span></a> <a href="#" id="modelo15" idreg="257" class="linkmodelo"><img id="img15" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000257_01_gd.jpg" /> <span class="linknaoselecionado">TRS 360</span></a> <a href="#" id="modelo16" idreg="256" class="linkmodelo"><img id="img16" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000256_01_gd.jpg" /> <span class="linknaoselecionado">TRC 220</span></a> <a href="#" id="modelo17" idreg="10327" class="linkmodelo"><img id="img17" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010327_01_gd.jpg" /> <span class="linknaoselecionado">TRSL 1,50</span></a> <a href="#" id="modelo18" idreg="2947" class="linkmodelo"><img id="img18" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000002947_01_gd.jpg" /> <span class="linknaoselecionado">TRL 140 RS</span></a> </div> <div id="menuModelos61" class="menuModelos" style="display: none;"> <h3>Adubadoras mono disco</h3> <a href="#" id="modelo1" idreg="85" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000085_01_gd.jpg" /> <span class="linknaoselecionado">Giro 400/600</span></a> <a href="#" id="modelo2" idreg="81" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000081_01_gd.jpg" /> <span class="linknaoselecionado">Giro 400/600 INOX</span></a> </div> <div id="menuModelos242" class="menuModelos" style="display: none;"> <h3>Recolhedora de terreiro</h3> <a href="#" id="modelo1" idreg="243" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000243_01_gd.jpg" /> <span class="linknaoselecionado">VRC 1600</span></a> <a href="#" id="modelo2" idreg="10245" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010245_01_gd.jpg" /> <span class="linknaoselecionado">Varredor Hidraulico 2.6 Para Terreiro de Café</span></a> <a href="#" id="modelo3" idreg="10421" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010421_01_gd.jpg" /> <span class="linknaoselecionado">Varredor Hidráulico 3.6 Para Terreiro de Café</span></a> <a href="#" id="modelo4" idreg="13270" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000013270_01_gd.jpg" /> <span class="linknaoselecionado">Varredor Hidráulico 2.6 Para Terreiro de Café Com Pistão Hid</span></a> <a href="#" id="modelo5" idreg="13693" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000013693_01_gd.jpg" /> <span class="linknaoselecionado">Varredor Hidráulico 3.6 Para Terreiro de Café Com Pistão Hid</span></a> </div> <div id="menuModelos246" class="menuModelos" style="display: none;"> <h3>Enlerador e soprador</h3> <a href="#" id="modelo1" idreg="13885" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000013885_01_gd.jpg" /> <span class="linknaoselecionado">Varrecafé Traseiro Simples Geração 2C </span></a> <a href="#" id="modelo2" idreg="14055" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000014055_01_gd.jpg" /> <span class="linknaoselecionado">Varrecafé Traseiro Duplo Geração 2C</span></a> <a href="#" id="modelo3" idreg="14491" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000014491_01_gd.jpg" /> <span class="linknaoselecionado">Varrecafé Duplo G2 Caixa Dupla</span></a> <a href="#" id="modelo4" idreg="14351" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000014351_01_gd.jpg" /> <span class="linknaoselecionado">Varrecafé Simples G2 Caixa Dupla </span></a> <a href="#" id="modelo5" idreg="247" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000247_01_gd.jpg" /> <span class="linknaoselecionado">Cleaner café/ RTF Dual</span></a> <a href="#" id="modelo6" idreg="248" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000248_01_gd.jpg" /> <span class="linknaoselecionado">Cleaner maçã / citrus</span></a> <a href="#" id="modelo7" idreg="9042" class="linkmodelo"><img id="img7" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000009042_01_gd.jpg" /> <span class="linknaoselecionado">Soprador</span></a> </div> <div id="menuModelos59" class="menuModelos" style="display: none;"> <h3>Adubadoras de 2 discos</h3> <a href="#" id="modelo1" idreg="74" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000074_01_gd.jpg" /> <span class="linknaoselecionado">TDS 750</span></a> <a href="#" id="modelo2" idreg="75" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000075_01_gd.jpg" /> <span class="linknaoselecionado">TDS 950</span></a> <a href="#" id="modelo3" idreg="76" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000076_01_gd.jpg" /> <span class="linknaoselecionado">TDS 1150</span></a> <a href="#" id="modelo4" idreg="73" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000073_01_gd.jpg" /> <span class="linknaoselecionado">TDS 1350</span></a> <a href="#" id="modelo5" idreg="72" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000072_01_gd.jpg" /> <span class="linknaoselecionado">TDS 1550</span></a> <a href="#" id="modelo6" idreg="71" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000071_01_gd.jpg" /> <span class="linknaoselecionado">Vibraflow II</span></a> </div> <div id="menuModelos10419" class="menuModelos" style="display: none;"> <h3>Adubadora cafeeira e citrus</h3> <a href="#" id="modelo1" idreg="10420" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010420_01_gd.jpg" /> <span class="linknaoselecionado">MX 2100</span></a> </div> <div id="menuModelos65" class="menuModelos" style="display: none;"> <h3>Recolhedora e abonadora de chão</h3> <a href="#" id="modelo1" idreg="9343" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000009343_01_gd.jpg" /> <span class="linknaoselecionado">Catacafé </span></a> </div> <div id="menuModelos9039" class="menuModelos" style="display: none;"> <h3>Podadora</h3> <a href="#" id="modelo1" idreg="9040" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000009040_01_gd.jpg" /> <span class="linknaoselecionado">Podadora</span></a> </div> <div id="menuModelos16321" class="menuModelos" style="display: none;"> <h3>Braço de retro agrícola</h3> <a href="#" id="modelo1" idreg="16322" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016322_01_gd.jpg" /> <span class="linknaoselecionado">BRM BRAÇO MÓVEL </span></a> <a href="#" id="modelo2" idreg="16423" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016423_01_gd.jpg" /> <span class="linknaoselecionado">BRF BRAÇO FIXO </span></a> </div> <div id="pecasHome" class="pecasConteudo"> <img src="../img/pecas.jpg" /> <img src="../img/diversas-pecas.jpg" /> <div id="desconto"> <p class="desconto"> Desconto de 3% para compras efetuadas em nosso site. </p> </div> </div> <div id="pecasConteudo" class="pecasConteudo" style="display: none;"></div> <br style="clear: both;"/> <iframe id="frameprocessa" name="frameprocessa" style="width: 0px; height: 0px; visibility: hidden; "></iframe> <!--<script src="../js/jquery-3.4.1.min.js"></script>--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script language="Javascript"> $(document).ready(function() { $(".linklinha").click(function(e) { $("#menuLinhas > a > span").removeClass ( 'linkselecionado' ); $("#menuLinhas > a > span").addClass ( 'linknaoselecionado' ); $(this).find('span').addClass('linkselecionado'); var idreg = parseInt($(this).attr("idreg")); // Esconde Todas Divs Modelos $.each($(".menuModelos"), function(e) { $(this).hide(); }); // Exibe Div Modelo $("#menuModelos"+idreg).show(); //console.log("idreg= " + idreg); $("#menuModelos"+idreg+" > a > span").removeClass ( 'linkselecionado' ); $("#menuModelos"+idreg+" > a > span").addClass ( 'linknaoselecionado' ); // Ajusta Foco $("#menuModelos"+idreg+" #modelo1").focus(); $("#pecasConteudo").hide(); $("#pecasHome").show(); // Seta Deselecionada Modelo $("#idlinha").val(idreg); $("#idmodelo").val(0); }); $(".linkmodelo").click(function(e) { var idlinha = parseInt($("#idlinha").val()); $("#menuModelos"+idlinha+" > a > span").removeClass ( 'linkselecionado' ); $("#menuModelos"+idlinha+" > a > span").addClass ( 'linknaoselecionado' ); $(this).find('span').addClass('linkselecionado'); $("#pecasHome").hide(); //alert('Vai carregar DETALHES do MODELO IDREG: ' + $(this).attr("idreg")); $("#pecasConteudo").load( "carrega_pecas_detalhe.html?id="+ $(this).attr("idreg"), function( response, status, xhr ) { if ( status == "error" ) { console.log("#error" + xhr.status + " " + xhr.statusText ); } }); $("#pecasConteudo").show(); }); function initPage() { console.log('Carregou Linhas OK !'); var idlinha = parseInt($("#idlinha").val()); var idmodelo = parseInt($("#idmodelo").val()); // Esconde Todas Divs Modelos $.each($(".menuModelos"), function(e) { $(this).hide(); }); // Exibe Div Modelo $("#menuModelos"+idlinha).show(); } initPage(); }); </script> Se alguém puder me ajudar, pois esse pequeno detalhe ta me tomando um grande tempo e atrasando o projeto.

Estou desenvolvendo um sistema para uso particular onde realizo diariamente o cadastro dos seguintes valores no BD conforme abaixo: INSERT INTO `viagem`( `viagem_nr`, `viagem_valor`, `viagem_gastos`, `viagem_usuario`, `viagem_data`, `viagem_hora` ) VALUES( '$viagem_nr', '$viagem_valor', '$viagem_gastos', '$viagem_usuario', '$data_atual', '$hora_atual' ) No caso viagem_usuario é a pessoa que preencheu o formulário com as informações. Até o momento já consegui fazer um relatório do dia atual e do mês atual, abaixo esta o código do relatório diário: <?php include_once("../acesso/conexao.php"); include_once("../config.php"); include_once('../acesso/verifica_login.php'); //Seleção dos dados do BD com Filtragem para exibição na tabela $filtro_data = date('Y-m-d'); $result_viagem = "SELECT * FROM viagem WHERE viagem_data = '$filtro_data' ORDER BY viagem_nr"; $resultado_viagem = mysqli_query($conexao, $result_viagem); //Grafico $data1 = ''; $data2 = ''; //Query para pegar os dados da tabela $filtro_data = date('Y-m-d'); $sql = "SELECT * FROM viagem WHERE viagem_data = '$filtro_data' ORDER BY viagem_nr"; $result = mysqli_query($conexao, $sql); //Loop while ($row = mysqli_fetch_array($result)) { $data1 = $data1 . '"'. $row['viagem_valor'].'",'; $data2 = $data2 . '"'. $row['viagem_gastos'] .'",'; } $data1 = trim($data1,","); $data2 = trim($data2,","); ?> <!doctype html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <Meta http-equiv="refresh" content="60" /> <meta name="author" content="<?php echo $author; ?>"> <meta name="email" content="<?php echo $email_author; ?>"> <title><?php echo $title; ?></title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> <link href="https://getbootstrap.com.br/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/navbar-fixed/"> <!-- Bootstrap core CSS --> <link href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> .bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media (min-width: 768px) { .bd-placeholder-img-lg { font-size: 3.5rem; } } .container{ font-family: Arial; margin: 5px 5px 30px 5px; padding: 0; color: white; text-align: center; background: #555652; color: #E8E9EB; background: #222; border: #555652 1px solid; padding: 10px; } </style> <!-- Custom styles for this template --> <link href="css/navbar-top-fixed.css" rel="stylesheet"> </head> <body> <!--Inicio da NavBar--> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#"><?php echo $title; ?></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="../plataforma">Home<span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> VIAGENS </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="../sistema/viagem01.php">1ª Viagem</a> <a class="dropdown-item" href="../sistema/viagem02.php">2ª Viagem</a> <a class="dropdown-item" href="../sistema/viagem03.php">3ª Viagem</a> <a class="dropdown-item" href="../sistema/viagem04.php">4ª Viagem</a> <a class="dropdown-item" href="../sistema/viagem05.php">5ª Viagem</a> <a class="dropdown-item" href="../sistema/viagem06.php">6ª Viagem</a> <a class="dropdown-item" href="../sistema/viagem07.php">7ª Viagem</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="../sistema/encerramento.php">Fechamento</a> </div> </li> </ul> </div> </nav> <!--Fim da NavBar--> <main role="main" class="col-md-12 ml-sm-auto col-lg-12 px-4"> <h4>Bem Vindo, <b><?php echo $_SESSION['nome']; ?></b>.</h4> <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> <h1 class="h2">Dashboard</h1> <div class="btn-toolbar mb-2 mb-md-0"> <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span data-feather="calendar"></span> Hoje </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Mês Atual</a> </div> </div> </div> <div class="container"> <h1><?php echo $title; ?></h1> <canvas id="chart" style="width: 80%; height: 50vh; background: #222; border: 1px solid #555652; margin-top: 10px;"></canvas> <script> var ctx = document.getElementById("chart").getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["1ª","2ª","3ª","4ª","5ª","6ª","7ª"], datasets: [{ label: 'Receita', data: [<?php echo $data1; ?>], backgroundColor: 'transparent', borderColor:'rgba(46, 204, 113,1.0)', borderWidth: 3 }, { label: 'Gastos', data: [<?php echo $data2; ?>], backgroundColor: 'transparent', borderColor:'rgba(235, 47, 6,1.0)', borderWidth: 3 }] }, options: { scales: {scales:{yAxes: [{beginAtZero: false}], xAxes: [{autoskip: true, maxTicketsLimit: 20}]}}, tooltips:{mode: 'index'}, legend:{display: true, position: 'top', labels: {fontColor: 'rgb(255, 255, 255)', fontSize: 16}} } }); </script> </div> <h2>HOJE</h2> <div class="table-responsive"> <table id="valores" class="table table-striped table-sm display"> <thead> <tr align="center"> <th>ID</th> <th>Data</th> <th>Hora</th> <th>Viagem</th> <th>Valor</th> <th>Gastos</th> <th>Usuário</th> </tr> </thead> <tbody> <?php while ($rows_viagens = mysqli_fetch_assoc($resultado_viagem)) { ?> <tr align="center"> <td><?php echo $rows_viagens['viagem_ID']; ?></td> <td><?php echo date('d/m/Y', strtotime($rows_viagens['viagem_data'])); ?></td> <td><?php echo $rows_viagens['viagem_hora']; ?></td> <td><?php echo $rows_viagens['viagem_nr']; ?></td> <td><?php echo $rows_viagens['viagem_valor']; ?></td> <td><?php echo $rows_viagens['viagem_gastos']; ?></td> <td><?php echo $rows_viagens['viagem_usuario']; ?></td> </tr> <?php } ?> </tbody> </table> </div> </main> </div> </div> <!-- JavaScript do Bootstrap --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="https://getbootstrap.com/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script src="https://getbootstrap.com.br/docs/4.1/assets/js/vendor/popper.min.js"></script> <script src="https://getbootstrap.com.br/docs/4.1/dist/js/bootstrap.min.js"></script> <script src="https://getbootstrap.com/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script> <!-- Ícones --> <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script> <script> feather.replace() </script> <!-- Gráficos --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> </body> </html> Porém os mesmo são atualizados automaticamente, eu necessito puxar do BD, todos os dados cadastrados no mês de julho como exemplo, e esse relatório pode ser no formato de uma tabela simples, mas que ele quando gerado fique salvo na plataforma para consultas futuras e não seja alterado.