407 lines
18 KiB
Plaintext
407 lines
18 KiB
Plaintext
<%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="RepPasajeros.aspx.vb" Inherits="GPS_RepPasajeros" %>
|
|
|
|
<asp:Content ID="Content1" ContentPlaceHolderID="CP" runat="Server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content2" ContentPlaceHolderID="Css" runat="Server">
|
|
<link href="/Metronic/assets/layouts/layout3/css/jquery.datetimepicker.css" rel="stylesheet" />
|
|
<style>
|
|
.dataTables_scrollHead {
|
|
background-color: #95A5A6;
|
|
color: white;
|
|
}
|
|
|
|
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700|Droid+Serif:400,700);
|
|
|
|
#chartPasajeros {
|
|
height: 800px;
|
|
width: 1200px;
|
|
}
|
|
|
|
.amcharts-chart-div a {
|
|
display: none !important;
|
|
}
|
|
|
|
.contenedor {
|
|
margin: 0 auto;
|
|
text-align: left;
|
|
color: #989A8F;
|
|
width: 450px;
|
|
height: 200px;
|
|
}
|
|
|
|
.calificador {
|
|
height: 270px;
|
|
width: 75%;
|
|
text-align: center;
|
|
}
|
|
|
|
.toplistaVerde {
|
|
background-color: #1BA39C;
|
|
height: 33%;
|
|
width: 300px;
|
|
padding-top: 17%;
|
|
}
|
|
|
|
.toplistaAmarillo {
|
|
background-color: #c29d0b;
|
|
height: 33%;
|
|
width: 300px;
|
|
padding-top: 17%;
|
|
}
|
|
|
|
.toplistaRojo {
|
|
background-color: #E43A45;
|
|
height: 33%;
|
|
width: 300px;
|
|
padding-top: 17%;
|
|
}
|
|
|
|
.toplistaAzul {
|
|
background-color: #337ab7;
|
|
height: 33%;
|
|
width: 300px;
|
|
padding-top: 17%;
|
|
}
|
|
|
|
.bottomlista {
|
|
margin-top: 25%;
|
|
}
|
|
|
|
|
|
.circuloVerde {
|
|
width: 40%;
|
|
height: 400%;
|
|
border: 4px solid;
|
|
border-radius: 50% !important;
|
|
border-color: #1BA39C;
|
|
font-size: 30px;
|
|
color: #fff;
|
|
line-height: 405%;
|
|
text-align: center;
|
|
background-color: #FFFFFF;
|
|
margin-left: 30%;
|
|
margin-top: -10%;
|
|
}
|
|
|
|
.verde {
|
|
color: #1BA39C;
|
|
}
|
|
|
|
.circuloAmarillo {
|
|
width: 40%;
|
|
height: 400%;
|
|
border: 4px solid;
|
|
border-radius: 50% !important;
|
|
border-color: #c29d0b;
|
|
font-size: 30px;
|
|
color: #fff;
|
|
line-height: 405%;
|
|
text-align: center;
|
|
background-color: #FFFFFF;
|
|
margin-left: 30%;
|
|
margin-top: -10%;
|
|
}
|
|
|
|
.amarillo {
|
|
color: #c29d0b;
|
|
}
|
|
|
|
.circuloRojo {
|
|
width: 40%;
|
|
height: 400%;
|
|
border: 4px solid;
|
|
border-radius: 50% !important;
|
|
border-color: #E43A45;
|
|
font-size: 30px;
|
|
color: #fff;
|
|
line-height: 405%;
|
|
text-align: center;
|
|
background-color: #FFFFFF;
|
|
margin-left: 30%;
|
|
margin-top: -10%;
|
|
}
|
|
|
|
.rojo {
|
|
color: #E43A45;
|
|
}
|
|
|
|
.circuloAzul {
|
|
width: 40%;
|
|
height: 400%;
|
|
border: 4px solid;
|
|
border-radius: 50% !important;
|
|
border-color: #337ab7;
|
|
font-size: 30px;
|
|
color: #fff;
|
|
line-height: 405%;
|
|
text-align: center;
|
|
background-color: #FFFFFF;
|
|
margin-left: 30%;
|
|
margin-top: -10%;
|
|
}
|
|
|
|
.azul {
|
|
color: #337ab7;
|
|
}
|
|
</style>
|
|
</asp:Content>
|
|
<asp:Content ID="Content3" ContentPlaceHolderID="E" runat="Server">
|
|
Reporte de Ascensos y Descensos
|
|
</asp:Content>
|
|
<asp:Content ID="Content4" ContentPlaceHolderID="HB" runat="Server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content5" ContentPlaceHolderID="H" runat="Server">
|
|
<li>
|
|
<asp:LinkButton ID="LnkPdf" runat="server"><i class="fa fa-ad-pdf"></i> Genera PDF</asp:LinkButton>
|
|
</li>
|
|
<li>
|
|
<asp:HyperLink ID="HpGrafica" data-toggle="modal" data-target="#DivModalGrafca" runat="server"><i class="fa fa-bar-chart"></i> Ver Grafica</asp:HyperLink>
|
|
</li>
|
|
</asp:Content>
|
|
<asp:Content ID="Content6" ContentPlaceHolderID="HA" runat="Server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content7" ContentPlaceHolderID="C" runat="Server">
|
|
<asp:UpdatePanel ID="UPFiltros" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<div class="portlet solid grey-cascade portlet-filter" style="">
|
|
<div class="portlet-title portlet-filterT smalltitle " style="">
|
|
<div class="tools">
|
|
<asp:Button ID="BtnConsultar" runat="server" ValidationGroup="GrpGuardar" Text="Consultar" class="btn btn-primary" />
|
|
<a href="javascript:;" class="expand"></a>
|
|
</div>
|
|
<div class="titlefiltros caption">
|
|
<ul class="list-inline" style="font-size: 12px;">
|
|
<li>Vehiculo:
|
|
<asp:DropDownList ID="DdlDispositivo" Width="110px" runat="server" AppendDataBoundItems="true" DataTextField="NoEconomico" DataValueField="CveDispositivo" CssClass="form-control input-sm select2me">
|
|
<asp:ListItem Selected="True" Text="Seleccione" Value="-1"></asp:ListItem>
|
|
</asp:DropDownList>
|
|
<asp:RequiredFieldValidator ID="RFVDispositivo" runat="server" ControlToValidate="DdlDispositivo" Display="None" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Dispositivo''</b> es necesario, por favor seleccione uno." InitialValue="-1" ValidationGroup="GrpGuardar"></asp:RequiredFieldValidator>
|
|
<ajax:ValidatorCalloutExtender ID="VCEDispositivo" runat="server" HighlightCssClass="vco" TargetControlID="RFVDispositivo" Width="350px"></ajax:ValidatorCalloutExtender>
|
|
</li>
|
|
<li>Fecha Inicio:
|
|
<div class="input-group input-sm date date-picker " data-date-format="dd/mm/yyyy hh:mm" style="display: inline-block;">
|
|
<asp:TextBox ID="txtFechaI" runat="server" CssClass="form-control input-sm ADDateTimePicker" CausesValidation="true" MaxLength="18" Width="132px "></asp:TextBox>
|
|
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtFechaI" Display="None" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Fecha Inicio''</b> es necesario, por favor seleccione uno." ValidationGroup="GrpGuardar"></asp:RequiredFieldValidator>
|
|
<ajax:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" HighlightCssClass="vco" TargetControlID="RequiredFieldValidator4" Width="350px"></ajax:ValidatorCalloutExtender>
|
|
</div>
|
|
</li>
|
|
<li>Fecha Fin:
|
|
<div class="input-group input-sm date date-picker " data-date-format="dd/mm/yyyy" style="display: inline-block;">
|
|
<asp:TextBox ID="txtFechaF" runat="server" CssClass="form-control input-sm ADDateTimePicker" CausesValidation="true" MaxLength="18" Width="132px "></asp:TextBox>
|
|
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtFechaF" Display="None" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Fecha Fin''</b> es necesario, por favor seleccione uno." ValidationGroup="GrpGuardar"></asp:RequiredFieldValidator>
|
|
<ajax:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" HighlightCssClass="vco" TargetControlID="RequiredFieldValidator5" Width="350px"></ajax:ValidatorCalloutExtender>
|
|
</div>
|
|
</li>
|
|
<li>Ver por:
|
|
<asp:DropDownList ID="DdlGrupo" Width="110px" runat="server" AppendDataBoundItems="true" DataTextField="NoEconomico" DataValueField="CveDispositivo" CssClass="form-control input-sm select2me">
|
|
<asp:ListItem Selected="True" Text="15 min" Value="15"></asp:ListItem>
|
|
<asp:ListItem Text="30 min" Value="30"></asp:ListItem>
|
|
<asp:ListItem Text="1Hr" Value="60"></asp:ListItem>
|
|
<asp:ListItem Text="12 Hr" Value="12H"></asp:ListItem>
|
|
<asp:ListItem Text="1 día" Value="24H"></asp:ListItem>
|
|
<asp:ListItem Text="7 días" Value="7D"></asp:ListItem>
|
|
<asp:ListItem Text="15 días" Value="15D"></asp:ListItem>
|
|
<asp:ListItem Text="1 mes" Value="1M"></asp:ListItem>
|
|
</asp:DropDownList>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portlet-body" style="display: none;">
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
|
|
<asp:UpdatePanel UpdateMode="Conditional" ID="UpIndicadores" runat="server">
|
|
<ContentTemplate>
|
|
<div class="Row" runat="server" id="RowIndicadores" visible="false" style="height: 130px;">
|
|
<div class="col-md-3">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<a class="dashboard-stat dashboard-stat-v2 yellow" href="#">
|
|
<div class="visual">
|
|
<i class="fa fa-arrow-circle-o-up"></i>
|
|
</div>
|
|
<div class="details">
|
|
<div class="number">
|
|
<span data-counter="counterup" data-value="1349">
|
|
<asp:Literal runat="server" ID="lblAscensos"></asp:Literal></span>
|
|
</div>
|
|
<div class="desc">Total Ascensos</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<a class="dashboard-stat dashboard-stat-v2 blue" href="#">
|
|
<div class="visual">
|
|
<i class="fa fa-arrow-circle-o-down"></i>
|
|
</div>
|
|
<div class="details">
|
|
<div class="number">
|
|
<span data-counter="counterup" data-value="549">
|
|
<asp:Literal runat="server" ID="lblDescensos"></asp:Literal></span>
|
|
</div>
|
|
<div class="desc">Total Descensos</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-md-3">
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
|
|
<asp:UpdatePanel ID="UpDatos" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<div class="row" style="margin-left: 0px; margin-top: 15px; margin-bottom: 5px; text-align: right; margin-right: 5px;" align="left">
|
|
<input type="text" id="TxtBusqueda" class="form-control input-sm" onkeyup="<%= String.Format("FiltrarTabla('TxtBusqueda','{0}')", GvDatos.ClientID) %>" style="display: inline-block; margin-right: -20px; width: 150px;" />
|
|
<a href="javascript:;" onclick="<%= String.Format("FiltrarTabla('TxtBusqueda','{0}')", GvDatos.ClientID) %>" style="margin-top: -3px;" class="btn btn-circle btn-sm label-info"><i class="icon-magnifier"></i></a>
|
|
</div>
|
|
<asp:GridView ID="GvDatos" runat="server" GridLines="None" DataKeyNames="NoEconomico" CssClass="table table-striped table-advance table-hover Widthall" AutoGenerateColumns="False" EmptyDataText="No se encontraron registros" ToolTip="Listado de Compuestos Activos">
|
|
<Columns>
|
|
<asp:BoundField DataField="NoEconomico" ItemStyle-Width="20%" HeaderText="Dispositivo" ItemStyle-HorizontalAlign="Left" />
|
|
<asp:BoundField DataField="Fecha" ItemStyle-Width="20%" HeaderText="Fecha" ItemStyle-HorizontalAlign="Center" />
|
|
<asp:BoundField DataField="AcumuladoAnterior" NullDisplayText="0" ItemStyle-Width="20%" HeaderText="Acumulado Anterior" ItemStyle-HorizontalAlign="right" />
|
|
<asp:BoundField DataField="Ascensos" ItemStyle-Width="10%" HeaderText="Ascensos" ItemStyle-HorizontalAlign="right" />
|
|
<asp:BoundField DataField="Descensos" ItemStyle-Width="10%" HeaderText="Descensos" ItemStyle-HorizontalAlign="right" />
|
|
<asp:BoundField DataField="Acumulado" ItemStyle-Width="10%" NullDisplayText="0" HeaderText="Acumulado" ItemStyle-HorizontalAlign="right" />
|
|
</Columns>
|
|
</asp:GridView>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
<div id="DivModalGrafca" class="modal ADS fade" role="dialog">
|
|
<asp:UpdatePanel class="modal-dialog" runat="server" ID="UpModalGrafica" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<div class="modal-content">
|
|
<div class="modal-header ">
|
|
<h4 class="modal-title">Pasajeros </h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<asp:HiddenField ID="HdnJsonGrupo" Value="[]" runat="server" ClientIDMode="Static" />
|
|
<div id="chartPasajeros"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div class="modal-btn">
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</asp:Content>
|
|
<asp:Content ID="Content8" ContentPlaceHolderID="JS" runat="Server">
|
|
<script src="../Metronic/assets/layouts/layout3/scripts/jquery.datetimepicker.full.js"></script>
|
|
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
|
|
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
|
|
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
|
|
<script src="https://www.amcharts.com/lib/3/gauge.js"></script>
|
|
<script src="https://www.amcharts.com/lib/3/plugins/animate/animate.min.js"></script>
|
|
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
|
|
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
|
|
<script>
|
|
function CargaPickers() {
|
|
$.datetimepicker.setLocale('es');
|
|
$('input.ADDateTimePicker').each(function () {
|
|
var TThis = $(this);
|
|
TThis.datetimepicker({
|
|
dayOfWeekStart: 1,
|
|
lang: 'es',
|
|
format: 'd/m/Y H:i',
|
|
formatDate: 'd/m/Y H:i',
|
|
step: 30
|
|
});
|
|
var Div = TThis.parent()
|
|
var boton = document.createElement('span');
|
|
boton.className = "input-group-btn"
|
|
|
|
var subboton = document.createElement('a')
|
|
subboton.className = "btn default"
|
|
subboton.innerHTML = "<i class='fa fa-calendar'></i>"
|
|
subboton.addEventListener('click', function () {
|
|
TThis.datetimepicker('show')
|
|
});
|
|
boton.appendChild(subboton)
|
|
|
|
Div[0].appendChild(boton)
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
function CargaChart(data) {
|
|
var chart = AmCharts.makeChart("chartPasajeros", {
|
|
"type": "serial",
|
|
"theme": "light",
|
|
"legend": {
|
|
"useGraphSettings": true
|
|
},
|
|
"dataProvider": data,
|
|
"synchronizeGrid": true,
|
|
"valueAxes": [{
|
|
"id": "v1",
|
|
"axisColor": "#FF6600",
|
|
"axisThickness": 2,
|
|
"axisAlpha": 1,
|
|
"position": "left"
|
|
}],
|
|
"graphs": [{
|
|
"valueAxis": "v1",
|
|
"lineColor": "#DD5F2E",
|
|
"bullet": "round",
|
|
"bulletBorderThickness": 1,
|
|
"hideBulletsCount": 30,
|
|
"fillAlphas": 0,
|
|
"title": "Ascensos",
|
|
"valueField": "Ascensos"
|
|
}, {
|
|
"valueAxis": "v1",
|
|
"lineColor": "#26C281",
|
|
"bullet": "round",
|
|
"bulletBorderThickness": 1,
|
|
"hideBulletsCount": 30,
|
|
"fillAlphas": 0,
|
|
"title": "Descensos",
|
|
"valueField": "Descensos"
|
|
}, {
|
|
"valueAxis": "v1",
|
|
"lineColor": "#E43A45",
|
|
"bullet": "round",
|
|
"bulletBorderThickness": 1,
|
|
"hideBulletsCount": 30,
|
|
"fillAlphas": 0,
|
|
"title": "Acumulado",
|
|
"valueField": "Acumulado"
|
|
}],
|
|
"chartScrollbar": {},
|
|
"chartCursor": {
|
|
"cursorPosition": "mouse"
|
|
},
|
|
"categoryField": "Fecha",
|
|
"categoryAxis": {
|
|
"axisColor": "#DADADA",
|
|
"minorGridEnabled": true
|
|
},
|
|
"export": {
|
|
"enabled": false
|
|
}
|
|
});
|
|
|
|
chart.addListener("dataUpdated", zoomChart);
|
|
zoomChart();
|
|
|
|
function zoomChart() {
|
|
chart.zoomToIndexes(chart.dataProvider.length - 20, chart.dataProvider.length - 1);
|
|
}
|
|
}
|
|
function ADSReady() {
|
|
CargaPickers();
|
|
}
|
|
</script>
|
|
|
|
|
|
</asp:Content>
|
|
|