CINXE.COM
RADNET
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Expires" content="-1"><link rel="icon" href="resources_radnet/img/icons/apa_favicon.ico" type="image/x-icon"><link href="resources_radnet/css/reset.css" rel="stylesheet" type="text/css"><link href="resources_radnet/css/common.css" rel="stylesheet" type="text/css"><link href="resources_radnet/css/form.css" rel="stylesheet" type="text/css"><link href="resources_radnet/css/ui/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css"><style type="text/css">@import "resources_radnet/css/jquery-validation/cmxform.css";@import "resources_radnet/css/jquery-validation/cmxformTemplate.css";</style><link href="resources_radnet/bootstrap/bootstrap/css/bootstrap_v3_updated.css" rel="stylesheet" type="text/css"><link href="resources_radnet/bootstrap/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css"><link href="resources_radnet/bootstrap/bootstrapvalidator_0.5/css/bootstrapValidator.min.css" rel="stylesheet" type="text/css"><link href="resources_radnet/fonts/font-awesome/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"><link href="resources_radnet/bootstrap/bootstrap3editable/css/bootstrap-editable.css" rel="stylesheet" type="text/css"><link href="resources_radnet/bootstrap/bootstrapfilterable/css/bootstrap-filterable-updated.css" rel="stylesheet" type="text/css"><link href="resources_radnet/css/paginationTable.css" rel="stylesheet" type="text/css"><!-- Optional theme --><link href="resources_radnet/bootstrap/datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css"><link href="resources_radnet/css/fancytree/ui.fancytree.css" rel="stylesheet" type="text/css"><link href="resources_radnet/css/dataTable/1.10.2/jquery.dataTables.customized.css" rel="stylesheet" type="text/css"><link href="resources_radnet/css/sDashboard.css" rel="stylesheet" type="text/css"><link href="resources_radnet/css/style.css" rel="stylesheet" type="text/css"><link href="resources_radnet/css/ajaxLoader/ajaxLoader.css" rel="stylesheet" type="text/css"><link href="resources_radnet/css/flotr/flotr.css" rel="stylesheet" type="text/css"><link href="resources_radnet/css/flotr/hsd-flotr2.css" rel="stylesheet" type="text/css"><script src="resources_radnet/js/libs/jquery/jquery-1.11.0.min.js"></script><script src="resources_radnet/js/libs/jquery/jquery-migrate-1.2.1.js"></script><script src="resources_radnet/js/libs/jquery/ui/jquery-ui.js"></script><script src="resources_radnet/js/libs/jquery/jquery.modal.js"></script><script src="resources_radnet/js/libs/jquery/jquery.blockUI.js"></script><script src="resources_radnet/js/libs/jquery/dataTables/1.10.2/jquery.dataTables.customized.js"></script><script src="resources_radnet/js/libs/jquery/jquery-DT-pagination.js"></script><script src="resources_radnet/js/libs/jquery-validation/jquery.validate.js"></script><script src="resources_radnet/bootstrap/bootstrap/js/bootstrap.min.js"></script><script src="resources_radnet/bootstrap/bootstrapvalidator_0.5/js/bootstrapValidator.min.js"></script><script src="resources_radnet/js/scripts/moment/moment-with-locales.min.js"></script><script src="resources_radnet/bootstrap/datetimepicker/js/bootstrap-datetimepicker.min.js"></script><script src="resources_radnet/bootstrap/bootstrap3editable/js/bootstrap-editable.min.js"></script><script src="resources_radnet/bootstrap/bootstrapfilterable/js/jquery.filterable.updated.js"></script><script src="resources_radnet/js/libs/spin.js"></script><script src="resources_radnet/js/libs/ajaxLoader.js"></script><script src="resources_radnet/js/libs/common.js"></script><script src="resources_radnet/js/libs/mustache/mustache.js"></script><script src="resources_radnet/js/libs/streamTable/stream_table.js"></script><script src="resources_radnet/js/scripts/customScripts.js"></script><script src="resources_radnet/js/libs/jquery/jquery.fancytree.js"></script><script src="resources_radnet/js/libs/jquery/jquery.mockjax.js"></script><script src="resources_radnet/js/libs/crypto/3.1.2/rollups/md5.js"></script><script src="resources_radnet/js/libs/crypto/crypto.js"></script><script src="resources_radnet/js/libs/js-base64/base64.min.js"></script><script src="resources_radnet/js/libs/gitter/jquery.gritter.js"></script><script src="resources_radnet/js/libs/flotr2/flotr2.js"></script><script src="resources_radnet/js/libs/flotr2/flotr2.ie.min.js"></script><script src="resources_radnet/js/libs/jquery/jquery-sDashboard.js"></script> <script type="text/javascript"> var graphData = [], graphContainer = null, graph = null, options, o, yMin = 0, yMax = 0, xMin = 0, xMax = 0; $(function() { setDateTimePicker(); setBootstrapValidator(); setInitialValues(); setCheckboxOnChangeOption(); }); // Funcao que faz o set inicial de alguns parametros globais function setInitialValues() { var endDate, startDate, year, month, day, formatedDate; yMin = 9999; yMax = -1; xMin = 2145913140000; xMax = 2674800000; endDate = new Date(), // Data final para o datetimepicker startDate = new Date(); // Data inicial para pesquisa startDate.setDate(startDate.getDate()-7); //startDate.setYear(startDate.getFullYear()-1); // passado para um ano ( // Fazemos o set da data inicial formatedDate = setTimestampDateFormat(startDate.getTime(), true); $("#txtDataReport_start").val(formatedDate); // Fazemos o set da data final formatedDate = setTimestampDateFormat(endDate.getTime(), true); $("#txtDataReport_end").val(formatedDate); // Fazemos o set do min e max data dos datetimepickers year = endDate.getFullYear(); month = (endDate.getMonth()+1); day = endDate.getDate(); month = (month > 9 ? month : ('0'+month)); day = (day > 9 ? day : ('0'+day)); formatedDate = year + "-" + month + "-" + day; $('#datetimepickerDataReport_end').data("DateTimePicker").setMinDate(new Date("1997-12-31")); $('#datetimepickerDataReport_end').data("DateTimePicker").setMaxDate(new Date(formatedDate)); $('#datetimepickerDataReport_start').data("DateTimePicker").setMinDate(new Date("1997-12-31")); $('#datetimepickerDataReport_start').data("DateTimePicker").setMaxDate(new Date(formatedDate)); $('#frmDashboardForm') .bootstrapValidator('updateStatus', 'txtDataReport_start', 'NOT_VALIDATED') .bootstrapValidator('updateStatus', 'txtDataReport_end', 'NOT_VALIDATED') .bootstrapValidator('updateStatus', 'estacao_group', 'NOT_VALIDATED'); // Fazemos o checked de todas as estacoes $("input:checkbox[name=estacao_group]").prop('checked', 'checked'); // Fazemos o checked da op莽茫o de todos selecionados $("input:checkbox[name=estacao_todos]").prop('checked', 'checked'); // Fazemos o set inicial do grafico graphContainer = document.getElementById('dashboardChart'); setDefaultGraphOptions(); // Desenhamos o grafico $("#btnDrawChart").click(); } // Fun莽茫o que faz o set do bootstrapValidator function setBootstrapValidator() { $('#frmDashboardForm').bootstrapValidator({ message: 'O valor não é válido', feedbackIcons: { valid: 'fa fa-check', invalid: 'fa fa-times', validating: 'fa fa-refresh' }, submitButtons: 'button[type="submit"]', live: 'enabled', threshold: 10, fields: { txtDataReport_start: { feedbackIcons: false, threshold: 10, validators: { notEmpty: { message: 'A data de report inicial é obrigatório' }, date: { format: 'DD/MM/YYYY hh:mm', message: 'A data de report inicial tem um formato inválido' }, callback: { //message: 'O período entre as datas de início e fim não pode passar os 15 dias.', message: 'O período entre as datas de início e fim não pode passar os 365 dias.', callback: function(value, validator) { var start_moment = new moment(value, ['DD/MM/YYYY hh:mm', "YYYY-MM-DD hh:mm", "YYYY/MM/DD hh:mm"] , true), start_date = $('#txtDataReport_start').val(), end_date = $("#txtDataReport_end").val(), end_moment = new moment(end_date, ['DD/MM/YYYY hh:mm', "YYYY-MM-DD hh:mm", "YYYY/MM/DD hh:mm"] , true); if (!start_moment.isValid() && start_date != "") { return false; } // Check if the date is valid // validacao a 15 dias, passou para 365 return start_moment.isSame(end_moment) || (start_moment.isBefore(end_moment) && (end_moment.subtract(1, 'year').subtract(1, 'day').isBefore(start_moment))); } } } }, txtDataReport_end: { feedbackIcons: false, threshold: 10, validators: { notEmpty: { message: 'A data de report final é obrigatório' }, date: { format: 'DD/MM/YYYY hh:mm', message: 'A data de report final tem um formato inválido' }, callback: { //message: 'O período entre as datas de início e fim não pode passar os 15 dias.', message: 'O período entre as datas de início e fim não pode passar os 365 dias.', callback: function(value, validator) { //var end_moment = new moment(value, 'DD/MM/YYYY hh:mm', true), var end_moment = new moment(value, ['DD/MM/YYYY hh:mm', "YYYY-MM-DD hh:mm", "YYYY/MM/DD hh:mm"] , true), end_date = $("#txtDataReport_end").val(), start_date = $('#txtDataReport_start').val(), start_moment = new moment(start_date, ['DD/MM/YYYY hh:mm', "YYYY-MM-DD hh:mm", "YYYY/MM/DD hh:mm"] , true); if (!end_moment.isValid() && end_date != "") { return false; } // Check if the date is valid // validacao a 15 dias, passou para 365 return end_moment.isSame(start_moment) || (end_moment.isAfter(start_moment) && (start_moment.add(1, 'year').add(1, "day").isAfter(end_moment))); } } } }, 'estacao_group': { feedbackIcons: false, validators: { choice: { min: 1, message: 'Tem que selecionar pelo menos uma estação' } } } } }) .on('error.field.bv', function(e, data) { if (data.bv.getSubmitButton()) { data.bv.disableSubmitButtons(false); } }) .on('success.field.bv', function(e, data) { if (data.bv.getSubmitButton()) { data.bv.disableSubmitButtons(false); } }) .on('success.form.bv', function(e) { // Prevent form submission e.preventDefault(); var $form = $(e.target), validator = $form.data('bootstrapValidator'), submitButton = validator.getSubmitButton(); var estacoes = [], obj = null; $("input:checkbox[name=estacao_group]:checked").each(function() { obj = $(this); estacoes.push(obj.attr("value")); }); $("#jsonEstacoesList").val(JSON.stringify(estacoes)); drawChart(); validator.disableSubmitButtons(false); return false; }) } // Fun莽茫o que faz o set do datetimepicker function setDateTimePicker() { $('#datetimepickerDataReport_start').datetimepicker({ language: 'pt', pickTime: true }); $('#datetimepickerDataReport_end').datetimepicker({ language: 'pt', pickTime: true }); $('#datetimepickerDataReport_start') .on('dp.change dp.show', function(e) { $form = $('#frmDashboardForm'); // Validate the date when user change it $form .bootstrapValidator('updateStatus', 'txtDataReport_start', 'NOT_VALIDATED') .bootstrapValidator('revalidateField', 'txtDataReport_start') .bootstrapValidator('revalidateField', 'txtDataReport_end');; if($form.bootstrapValidator("isValidField", "txtDataReport_start")) { if($("#txtDataReport_start").val() != "") { var dataInicio = $("#txtDataReport_start").val(); day = dataInicio.substring(0, 2); month = dataInicio.substring(3, 5); year = dataInicio.substring(6, 10); hours = dataInicio.substring(11, 16); dataInicio = year + "-" + month + "-" + day + " " + hours; $('#datetimepickerDataReport_end').data("DateTimePicker").setMinDate(new Date(dataInicio)); } else { $('#datetimepickerDataReport_end').data("DateTimePicker").setMinDate(new Date("1997-12-31")); } } }); $('#datetimepickerDataReport_end') .on('dp.change dp.show', function(e) { $form = $('#frmDashboardForm'); // Validate the date when user change it $form .bootstrapValidator('updateStatus', 'txtDataReport_end', 'NOT_VALIDATED') .bootstrapValidator('revalidateField', 'txtDataReport_end') .bootstrapValidator('revalidateField', 'txtDataReport_start');; if($form.bootstrapValidator("isValidField", "txtDataReport_end")) { if($("#txtDataReport_end").val() != "") { var dataFim = $("#txtDataReport_end").val(); day = dataFim.substring(0, 2); month = dataFim.substring(3, 5); year = dataFim.substring(6, 10); hours = dataFim.substring(11, 16); dataFim = year + "-" + month + "-" + day + " " + hours; $('#datetimepickerDataReport_start').data("DateTimePicker").setMaxDate(new Date(dataFim)); } else { $('#datetimepickerDataReport_start').data("DateTimePicker").setMaxDate(new Date("2099-12-31")); } } }); } // Funcao que retorna uma data formatada, dando o timestamp function setTimestampDateFormat(timestamp, withHours) { var formatedDate = "", date, year, month, day, hours, minutes; withHours = (withHours == undefined || withHours == null) ? false : withHours; if(timestamp !== undefined && timestamp !== null && timestamp > 0) { date = new Date(timestamp); if(date !== undefined && date != null) { year = date.getFullYear(); month = (date.getMonth()+1); day = date.getDate(); hours = date.getHours(); minutes = date.getMinutes(); dateFormat = ''; month = (month > 9 ? month : ('0'+month)); day = (day > 9 ? day : ('0'+day)); hours = (hours > 9 ? hours : ('0'+hours)); minutes = (minutes > 9 ? minutes : ('0'+minutes)); formatedDate = day + "/" + month + "/" + year; formatedDate = formatedDate + ((withHours) ? (" " + hours + ":" + minutes) : ""); } } return formatedDate; } // Funcao que inicializa o evento de change das checkboxes function setCheckboxOnChangeOption() { // Fazemos o set da checkbox de selecionar todas as estacoes $("input:checkbox[name=estacao_todos]").on('change', function(){ setEstacaoCheckboxes($(this).is(":checked")); }); // Se uma mudanca das checkboxes das estacoes mudar, entao colocamos, caso todas estejam selecionadas, a checkbox // estacao_todos a true, caso contrario a false $("input:checkbox[name=estacao_group]").on('change', function(){ var estacao_group = $("input:checkbox[name=estacao_group]"); revalidateEstacaoCheckboxes(); if(estacao_group.length == estacao_group.filter(":checked").length) { $("input:checkbox[name=estacao_todos]").prop('checked', 'checked'); } else { $("input:checkbox[name=estacao_todos]").prop('checked', ''); } }); } // Funcao que altera o valor da propertie checked das checkboxes function setEstacaoCheckboxes(isToCheck) { revalidateEstacaoCheckboxes(); // Fazemos o checked de todas as estacoes $("input:checkbox[name=estacao_group]").prop('checked', (isToCheck !== undefined && isToCheck) ? 'checked' : ''); } // Funcao que coloca a false a validacao das checkboxes das estacoes function revalidateEstacaoCheckboxes() { $('#frmDashboardForm') .bootstrapValidator('updateStatus', 'estacao_group', 'NOT_VALIDATED'); } // Funcao que faz o reset ao grafico function resetGraph() { $("#graphPanel").css("display", "none"); $("#txtDataReport_start").val(""); $("#txtDataReport_end").val(""); $("input:checkbox[name=estacao_group]").prop('checked', ''); $("input:checkbox[name=estacao_todos]").prop('checked', ''); // Voltamos as definicoes iniciais setInitialValues(); } // Desenha o grafico function drawChart() { var estacao = null; $.ajax({ type: 'GET', url: $("#frmDashboardForm").attr("action"), async: true, dataType: 'json', cache: false, // don't cache the result contentType: "application/json", //tell the server we're looking for json data: $('#frmDashboardForm').serialize(), beforeSend : function() { if(graph != null) { graph.destroy(); $('.flotr-canvas').empty(); $('.flotr-overlay').empty(); $("#legend").css("display", "none"); $("#dashboardChart").css("height", ""); } $("#dashboardChart").html("<div style='text-align: center'><div>A carregar</div><img src='/resources_radnet/img/loading.gif'/></div>"); }, success: function(data) { graphData = data; yMin = 9999; yMax = -1; // Fazemos o set do container da legenda, e mostramos o painel do gr谩fico //$("#graphLegend").html(""); $("#graphPanel").css("display", ""); if(data == undefined || data == null || data.length == 0) { $("#legend").css("display", "none"); $("#dashboardChart").css("height", ""); $("#dashboardChart").html("<div style='text-align: center'><label>Não existem dados sobre a pesquisa efetuada</label></div>"); } else { $("#legend").css("display", ""); $("#dashboardChart").css("height", "500px"); for (i = 0; i < data.length; i++) { estacao = data[i].data; for(j = 0; j < estacao.length; j++) { yMin = (parseFloat(estacao[j][1]) < yMin) ? parseFloat(estacao[j][1]) : yMin; yMax = (parseFloat(estacao[j][1]) > yMax) ? parseFloat(estacao[j][1]) : yMax; xMin = (parseInt(estacao[j][0]) < xMin) ? parseInt(estacao[j][0]) : xMin; xMax = (parseInt(estacao[j][0]) > xMax) ? parseInt(estacao[j][0]) : xMax; } } setDefaultGraphOptions(); graph = drawFlotrGraph(); setFlotrEventAdapter(graphContainer); } } }); } // Desenha o grafico com as opcoes default, reescrecendo com as opcoes passadas como entrada function drawFlotrGraph (opts) { // Faz um clone das opcoes, para que a variavel 'options' sempre esteja intacta o = Flotr._.extend(Flotr._.clone(options), opts || {}); // Return a new graph. return Flotr.draw(graphContainer, graphData, o); //[ {data: d1, label: 'Lisboa'},{data:d2, label: 'Porto' }] } // Funcao que faz o set default das opcoes do grafico function setDefaultGraphOptions() { options = { grid : { horizontalLines: true, verticalLines: false }, xaxis: { minorTickFreq: 4, //title : 'Data de Report', //tickDecimals: 0, noTicks: 7, mode : 'time', title: 'Tempo', labelsAngle : 45, tickFormatter: function(x){ return setTimestampDateFormat(parseInt(x), true); } }, yaxis : { noTicks: 7, min: yMin, max: yMax, title : 'nSv/h' }, legend : { position: 'ne', container: $('#graphLegend') }, selection : { mode : 'xy', fps: 10 }, mouse: { track: true, trackFormatter: function(o){ return "<b>" + o.series.label + "</b><br>" + setTimestampDateFormat(parseInt(o.x), true) + "<br>" + o.y + " nSv/h"; } }, HtmlText : true, resolution: 1, title : 'Gr谩fico de Radioatividade no Ambiente', subtitle: '(Dados de ' + $("#txtDataReport_start").val() + ' a ' + $("#txtDataReport_end").val() + ")", spreadsheet : { show : true, csvFileSeparator: ';', tabGraphLabel: 'Gr谩fico', tabDataLabel: 'Tabela (valores em nSv/h)', toolbarDownload: 'Download CSV', toolbarSelectAll: 'Selecionar todos', tickFormatter : function (x) { return setTimestampDateFormat(parseInt(x), true); } } }; } // Funcao que faz o set dos eventos do Flotr function setFlotrEventAdapter(graphContainer) { Flotr.EventAdapter.observe(graphContainer, 'flotr:select', function(area){ // Draw selected area graph = drawFlotrGraph({ xaxis : { min : area.x1, max : area.x2, minorTickFreq: 4, title : 'Data de Report', tickDecimals: 0, noTicks: 20, mode : 'time', labelsAngle : 45, tickFormatter: function(x){ return setTimestampDateFormat(parseInt(x), true); } }, yaxis : { min : area.y1, max : area.y2 } }); }); // Quando o grafico e clicado, desenha-se o grafico com a area default Flotr.EventAdapter.observe(graphContainer, 'flotr:click', function () { graph = drawFlotrGraph(); }); } </script> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>RADNET</title> </head> <body> <div class="page-wrap"> <main role="main" style="padding-top: 20px"> <div class="container"> <div class="span11"> <div id="build"> <legend>Rede de Alerta de Radioactividade no Ambiente</legend> <form id="frmDashboardForm" name="frmDashboardForm" class="form-horizontal bv-form" method="GET" novalidate="novalidate" action="ajax/dashboard/drawChart.php"> <div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title" style="font-size: 13px; font-weight: bold">Dados da pesquisa</h3> </div> <div class="panel-body" style="font-size: 11px !important"> <div class="form-group"> <label class="col-lg-3 control-label" style="top: 10px">Data de Report</label> <div class="col-lg-3" style="width: 20%; padding-right: 0"> <div class="input-group date" id="datetimepickerDataReport_start" > <input placeholder="DD/MM/YYYY hh:mm" class="form-control" size="10" data-bv-date="true" name="txtDataReport_start" id="txtDataReport_start" /> <span class="input-group-addon" id="icon_txtDataReport_start"> <span class="glyphicon glyphicon-calendar" ></span> </span> </div> </div> <div class="col-sm-1" style="width:0; top: 10px">-</div> <div class="col-lg-3" style="width: 20%; padding-left: 0"> <div class="input-group date" id="datetimepickerDataReport_end" > <input placeholder="DD/MM/YYYY hh:mm" class="form-control " size="10" type="text" name="txtDataReport_end" id="txtDataReport_end" /> <span class="input-group-addon" id="icon_txtDataReport_end"> <span class="glyphicon glyphicon-calendar" ></span> </span> </div> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">Estações</label> <div class="col-lg-3"> <div><input type="checkbox" name="estacao_todos" value="todas" /> Selecionar todas</div><div><input type="checkbox" name="estacao_group" value="1652" /> Abrantes</div><div><input type="checkbox" name="estacao_group" value="7251168" /> Abrantes-Pego</div><div><input type="checkbox" name="estacao_group" value="1303" /> Beja</div><div><input type="checkbox" name="estacao_group" value="1307" /> Bragança</div><div><input type="checkbox" name="estacao_group" value="7593370" /> Canas Senhorim MIRA-30971</div><div><input type="checkbox" name="estacao_group" value="1305" /> Castelo Branco</div><div><input type="checkbox" name="estacao_group" value="1201" /> Coimbra</div><div><input type="checkbox" name="estacao_group" value="7593374" /> Cunha Baixa MIRA-30968</div><div><input type="checkbox" name="estacao_group" value="1311" /> Elvas</div><div><input type="checkbox" name="estacao_group" value="1302" /> Faro</div><div><input type="checkbox" name="estacao_group" value="1404" /> Fratel (estação submersa)</div><div><input type="checkbox" name="estacao_group" value="1310" /> Funchal</div><div><input type="checkbox" name="estacao_group" value="1552" /> Junqueira</div><div><input type="checkbox" name="estacao_group" value="2711862" /> Juromenha WSARA-21112</div><div><input type="checkbox" name="estacao_group" value="1351" /> Lisboa</div><div><input type="checkbox" name="estacao_group" value="1501" /> Meimoa</div><div><input type="checkbox" name="estacao_group" value="7593377" /> Mesquitela MIRA-30969</div><div><input type="checkbox" name="estacao_group" value="1306" /> Penhas Douradas</div><div><input type="checkbox" name="estacao_group" value="2711807" /> Pocinho WSARA-21066</div><div><input type="checkbox" name="estacao_group" value="1309" /> Ponta Delgada</div><div><input type="checkbox" name="estacao_group" value="1304" /> Portalegre</div><div><input type="checkbox" name="estacao_group" value="1308" /> Porto</div><div><input type="checkbox" name="estacao_group" value="7593380" /> Reboleiro MIRA-30966</div><div><input type="checkbox" name="estacao_group" value="1252" /> Sines</div><div><input type="checkbox" name="estacao_group" value="7251171" /> Vila Real</div><div><input type="checkbox" name="estacao_group" value="1651" /> 脡vora</div> </div> </div> <input type="text" style="display: none;" class="form-control" name="jsonEstacoesList" id="jsonEstacoesList" size="100"> <div class="form-group"> <label class="col-lg-3 control-label">Pontos no gráfico</label> <div class="col-lg-3"> <label> <input type="checkbox" class="mostra_pontos" value="mostrarPontos" name="mostra_pontos" id="mostra_pontos"> </label> </div> </div> Notas: altera莽茫o do tipo de detetor em Fratel (20 setembro 2017), Faro (29 abril 2019), Lisboa (25 julho 2019), Bragan莽a (3 setembro 2019), Coimbra (26 setembro 2019), Funchal (16 dezembro 2019), Ponta Delgada (13 janeiro 2020), Castelo Branco (8 junho de 2020), Sines (30 junho de 2020), Porto (18 novembro de 2020), Elvas (10 mar莽o de 2021), Beja (18 abril de 2021), Portalegre (19 abril de 2021) e Penhas Douradas (20 abril de 2021). Substitui莽茫o da sonda de Penhas Douradas (2 de maio de 2021). Penhas Douradas foi reposta a sonda SARA com capacidade espetrom茅trica em 1 de dezembro de 2021. Avaria na sonda de Fratel (29 de setembro de 2021 a 10 de dezembro de 2021). Avaria na Esta莽茫o de Fratel em 22 de dezembro e atualmente em repara莽茫o. </div> </div> </div> <div class='form-group'> <div class='col-lg-12 col-lg-offset-4'> <button title='Desenhar gráfico' type='submit' class='btn btn-primary' id='btnDrawChart''>Desenhar gráfico</button> <button title='Repor Definições' type='button' class='btn btn-primary' id='btnReset' onclick="javascript: resetGraph();">Limpar</button> </div> </div> </form> <div class="panel-group" id="graphPanel"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title" style="font-size: 13px; font-weight: bold">Resultado da pesquisa</h3> </div> <div class="panel-body"> <div id="graphContainer"> <div id="content"> <div id="dashboardChart"></div> </div> <div id="legend" style="margin-top: 20px; display: none"> <label>Legenda: </label> <div id="graphLegend"></div> </div> </div> <div id="graphWaiting"></div> </div> </div> </div> </div> </div> </div> </main> </div> <div class="container" style="padding-top: 20px"> <footer class="site-footer"> Copyright © 2025 Agência Portuguesa do Ambiente. </footer> </div> <div id='loadingPage' class="loadingPage"></div> <!-- Defini莽茫o de PopUps --> <div id="modalSuccessMessage" class="modal fade" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <div class="alert alert-success"> <h4 class="modal-title">Sucesso</h4> </div> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" id="btnSuccess" class="btn btn-primary" data-dismiss="modal">Fechar</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div id="modalErrorMessage" class="modal fade" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <div class="alert alert-danger"> <h4 class="modal-title">Erro</h4> </div> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal" id="btnErrorClose">Fechar</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div id="modalInfoMessage" class="modal fade" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <div class="alert alert-info"> <h4 class="modal-title">Informação</h4> </div> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal" id="btnModalYes">Sim</button> <button type="button" class="btn btn-primary" data-dismiss="modal" id="btnModalNo">Não</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <style> .loadingPage { background: url('/resources/img/ajwait.png'); color: white; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; display:block; padding-top: 200px; font-size: 11px; z-index: 10000; zoom: 1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first! filter: alpha(opacity=50); -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */ } </style> <script type="text/javascript"> var $body = $("body"); var loadingContainer; $("#loadingPage").fadeOut(); var loadingOpts = { lines: 15, // The number of lines to draw length: 20, // The length of each line width: 10, // The line thickness radius: 30, // The radius of the inner circle corners: 1, // Corner roundness (0..1) rotate: 16, // The rotation offset direction: 1, // 1: clockwise, -1: counterclockwise color: '#000', // #rgb or #rrggbb or array of colors speed: 1, // Rounds per second trail: 84, // Afterglow percentage shadow: false, // Whether to render a shadow hwaccel: false, // Whether to use hardware acceleration className: 'spinner', // The CSS class to assign to the spinner zIndex: 2e9, // The z-index (defaults to 2000000000) top: '50%', // Top position relative to parent left: '50%' // Left position relative to parent }; var target = document.getElementById('loadingPage'); var spinner; $(document) .ajaxStart(function(){$("#loadingPage").fadeIn(); spinner = new Spinner(loadingOpts).spin(target);}) .ajaxStop(function(){$("#loadingPage").fadeOut(); if (spinner) spinner.stop();}) </script> </body> </html>