996 lines
44 KiB
Plaintext
996 lines
44 KiB
Plaintext
<%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="DashboardGPS.aspx.vb" Inherits="DashboardGPS" %>
|
|
|
|
<asp:Content ID="Content1" ContentPlaceHolderID="CP" runat="Server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content2" ContentPlaceHolderID="Css" runat="Server">
|
|
|
|
<style>
|
|
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700|Droid+Serif:400,700);
|
|
|
|
#chartdivGraficaGrande {
|
|
width: 100%;
|
|
height: 500px;
|
|
}
|
|
|
|
#chartdivKilometrajeUnidades {
|
|
width: 100%;
|
|
height: 230px;
|
|
}
|
|
|
|
#chartdivPIVisitados {
|
|
width: 100%;
|
|
height: 230px;
|
|
}
|
|
|
|
#chartdivMejoresConductores {
|
|
width: 100%;
|
|
height: 230px;
|
|
}
|
|
|
|
#chartdivUnidadesReportando {
|
|
width: 100%;
|
|
height: 230px;
|
|
}
|
|
|
|
#chartdivTiempoPI {
|
|
width: 100%;
|
|
height: 230px;
|
|
}
|
|
|
|
#chartdivTiempoOperacion {
|
|
width: 100%;
|
|
height: 230px;
|
|
}
|
|
|
|
#chartdivRendimientoCombustible {
|
|
width: 100%;
|
|
height: 230px;
|
|
}
|
|
|
|
.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">
|
|
SIG GPS
|
|
</asp:Content>
|
|
|
|
<asp:Content ID="Content4" ContentPlaceHolderID="HB" runat="Server">
|
|
</asp:Content>
|
|
|
|
<asp:Content ID="Content5" ContentPlaceHolderID="H" runat="Server">
|
|
<li>
|
|
<asp:UpdatePanel ID="UpLnkAgregar" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<asp:LinkButton ID="lnkBusqueda" runat="server"><i class="fa fa-plus"></i>Cambiar Filtros</asp:LinkButton>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</li>
|
|
</asp:Content>
|
|
|
|
<asp:Content ID="Content6" ContentPlaceHolderID="HA" runat="Server">
|
|
</asp:Content>
|
|
|
|
<asp:Content ID="Content7" ContentPlaceHolderID="C" runat="Server">
|
|
<asp:UpdatePanel ID="UpGraficas" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<div style="height: 1500px">
|
|
|
|
|
|
<div class="Row">
|
|
|
|
<div class="col-md-4">
|
|
<div class="portlet light ">
|
|
|
|
<div class="portlet-title">
|
|
<div class="caption" style="font-size: 17px">
|
|
<i style="font-size: larger" class="fa fa-dashboard font-blue"></i>
|
|
<span class="caption-subject font-blue bold uppercase" style="font-size: 14px">Kilometraje de Unidades</span>
|
|
</div>
|
|
<div class="tools">
|
|
<asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<asp:LinkButton ID="LnkKilometraje" runat="server"><i class="fa fa-expand"></i></asp:LinkButton>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portlet-body">
|
|
<div id="chartdivKilometrajeUnidades"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="portlet light ">
|
|
|
|
<div class="portlet-title">
|
|
<div class="caption" style="font-size: 17px">
|
|
<i style="font-size: larger" class="fa fa-map-marker font-green"></i>
|
|
<span class="caption-subject font-green bold uppercase" style="font-size: 14px">Puntos de Interés Visitados</span>
|
|
</div>
|
|
<div class="tools">
|
|
<asp:UpdatePanel ID="UpdatePanel5" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<asp:LinkButton ID="LnkPIVisitados" runat="server"><i class="fa fa-expand"></i></asp:LinkButton>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portlet-body">
|
|
<div id="chartdivPIVisitados"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="portlet light" style="height: 348px">
|
|
|
|
<div class="portlet-title">
|
|
<div class="caption" style="font-size: 17px">
|
|
<i style="font-size: larger" class="fa fa-exclamation-circle font-red"></i>
|
|
<span class="caption-subject font-red bold uppercase" style="font-size: 14px">Botón de Pánico</span>
|
|
</div>
|
|
<div class="tools">
|
|
|
|
<a href="#" class="fullscreen" data-original-title="" title=""></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portlet-body contenedor">
|
|
<div class="calificador">
|
|
<div class="toplistaRojo rojo" runat="server">
|
|
<div id="DivCirculoPonderacion" class="circuloRojo rojo" runat="server">
|
|
<asp:Label runat="server" ID="LblBotonPanico" Text="0" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="Row">
|
|
|
|
<div class="col-md-4">
|
|
<div class="portlet light " style="height: 348px">
|
|
|
|
<div class="portlet-title">
|
|
<div class="caption" style="font-size: 17px">
|
|
<i style="font-size: larger" class="fa fa-exclamation-triangle font-yellow"></i>
|
|
<span class="caption-subject font-yellow bold uppercase" style="font-size: 14px">Ralentí</span>
|
|
</div>
|
|
<div class="tools">
|
|
|
|
<a href="#" class="fullscreen" data-original-title="" title=""></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portlet-body contenedor">
|
|
<div class="calificador">
|
|
<div class="toplistaAmarillo amarillo" runat="server">
|
|
<div class="circuloAmarillo amarillo" runat="server">
|
|
<asp:Label runat="server" ID="LblRalenti" Text="0" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="portlet light ">
|
|
|
|
<div class="portlet-title">
|
|
<div class="caption" style="font-size: 17px">
|
|
<i style="font-size: larger" class="fa fa-star font-green"></i>
|
|
<span class="caption-subject font-green bold uppercase" style="font-size: 14px">Mejores Conductores</span>
|
|
</div>
|
|
<div class="tools">
|
|
<asp:UpdatePanel ID="UpdatePanel6" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<asp:LinkButton ID="LnkMejoresConductores" runat="server"><i class="fa fa-expand"></i></asp:LinkButton>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portlet-body">
|
|
<div id="chartdivMejoresConductores"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="portlet light " style="height: 348px">
|
|
|
|
<div class="portlet-title">
|
|
<div class="caption" style="font-size: 17px">
|
|
<i style="font-size: larger" class="fa fa-road font-blue"></i>
|
|
<span class="caption-subject font-blue bold uppercase" style="font-size: 14px">Trayectos</span>
|
|
</div>
|
|
<div class="tools">
|
|
|
|
<a href="#" class="fullscreen" data-original-title="" title=""></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portlet-body contenedor">
|
|
<div class="calificador">
|
|
<div class="toplistaAzul azul" runat="server">
|
|
<div class="circuloAzul azul" runat="server">
|
|
<asp:Label runat="server" ID="Label2" Text="7" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="Row">
|
|
|
|
<div class="col-md-4">
|
|
<div class="portlet light ">
|
|
|
|
<div class="portlet-title">
|
|
<div class="caption" style="font-size: 17px">
|
|
<i style="font-size: larger" class="fa fa-check-circle-o font-blue"></i>
|
|
<span class="caption-subject font-blue bold uppercase" style="font-size: 14px">Unidades Reportando</span>
|
|
</div>
|
|
<div class="tools">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portlet-body">
|
|
<div id="chartdivUnidadesReportando"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="portlet light ">
|
|
|
|
<div class="portlet-title">
|
|
<div class="caption" style="font-size: 17px">
|
|
<i style="font-size: larger" class="fa fa-car font-yellow"></i>
|
|
<span class="caption-subject font-yellow bold uppercase" style="font-size: 14px">Tiempos de Operación</span>
|
|
</div>
|
|
<div class="tools">
|
|
<asp:UpdatePanel ID="UpdatePanel7" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<asp:LinkButton ID="LnkTiemposOperacion" runat="server"><i class="fa fa-expand"></i></asp:LinkButton>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portlet-body">
|
|
<div id="chartdivTiempoOperacion"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="portlet light ">
|
|
|
|
<div class="portlet-title">
|
|
<div class="caption" style="font-size: 17px">
|
|
<i style="font-size: larger" class="fa fa-flask font-yellow"></i>
|
|
<span class="caption-subject font-yellow bold uppercase" style="font-size: 14px">Rendimiento de Combustible</span>
|
|
</div>
|
|
<div class="tools">
|
|
<asp:UpdatePanel ID="UpdatePanel8" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<asp:LinkButton ID="LnkRendimientoCombustible" runat="server"><i class="fa fa-expand"></i></asp:LinkButton>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portlet-body">
|
|
<div id="chartdivRendimientoCombustible"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="Row">
|
|
|
|
<div class="col-md-4">
|
|
<div class="portlet light ">
|
|
|
|
<div class="portlet-title">
|
|
<div class="caption" style="font-size: 17px">
|
|
<i style="font-size: larger" class="fa fa-clock-o font-green"></i>
|
|
<span class="caption-subject font-green bold uppercase" style="font-size: 14px">Tiempo en Puntos de Interés</span>
|
|
</div>
|
|
<div class="tools">
|
|
<asp:UpdatePanel ID="UpdatePanel9" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<asp:LinkButton ID="LnkTiempoPuntosInteres" runat="server"><i class="fa fa-expand"></i></asp:LinkButton>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portlet-body">
|
|
<div id="chartdivTiempoPI"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="portlet light " style="height: 348px">
|
|
|
|
<div class="portlet-title">
|
|
<div class="caption" style="font-size: 17px">
|
|
<i style="font-size: larger" class="fa fa-battery-quarter font-red"></i>
|
|
<span class="caption-subject font-red bold uppercase" style="font-size: 14px">Desconexión de Bateria</span>
|
|
</div>
|
|
<div class="tools">
|
|
|
|
<a href="#" class="fullscreen" data-original-title="" title=""></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portlet-body contenedor">
|
|
<div class="calificador">
|
|
<div class="toplistaRojo rojo" runat="server">
|
|
<div id="Div1" class="circuloRojo rojo" runat="server">
|
|
<asp:Label runat="server" ID="LblDesconexion" Text="0" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="portlet light " style="height: 348px">
|
|
|
|
<div class="portlet-title">
|
|
<div class="caption" style="font-size: 17px">
|
|
<i style="font-size: larger" class="fa fa-close font-yellow"></i>
|
|
<span class="caption-subject font-yellow bold uppercase" style="font-size: 14px">Tiempos Muertos</span>
|
|
</div>
|
|
<div class="tools">
|
|
|
|
<a href="#" class="fullscreen" data-original-title="" title=""></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portlet-body contenedor">
|
|
<div class="calificador">
|
|
<div class="toplistaAmarillo amarillo" runat="server">
|
|
<div class="circuloAmarillo amarillo" runat="server">
|
|
<asp:Label runat="server" ID="LblTiempoMuerto" Text="11" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
|
|
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="UpdatePanel1">
|
|
<ContentTemplate>
|
|
<asp:Button runat="server" ID="BtnTrampa" Style="visibility: hidden;" />
|
|
<asp:HiddenField runat="server" ID="HdnTipoFecha" ClientIDMode="Static" Value="0" />
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
|
|
<%-- MODAL FIltros de Busqueda --%>
|
|
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="UPModalBusqueda">
|
|
<ContentTemplate>
|
|
<div id="dvConsulta" class="modal ADS fade" role="dialog">
|
|
<div class="modal-dialog">
|
|
<asp:UpdatePanel ID="UPConsulta" class="modal-content rowpadding" style="width: 670px;" tabindex="-1" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<h4 class="modal-title" id="myModalLabel2" runat="server">Filtros</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-2"></div>
|
|
<label class="col-md-1 truncate">F.I.:</label>
|
|
<div class="col-md-2">
|
|
<div class="input-group input-sm input-small date date-picker" data-date-format="dd/mm/yyyy" style="width: 140px !important; padding: 0px;">
|
|
<asp:TextBox ID="txtFechaI" runat="server" CssClass="form-control" CausesValidation="true" MaxLength="10"></asp:TextBox>
|
|
<span class="input-group-btn ">
|
|
<asp:LinkButton ID="imgCalendario" class="btn default " Text="<i class='fa fa-calendar'></i>" runat="server"></asp:LinkButton>
|
|
</span>
|
|
<ajax:MaskedEditExtender ID="MEEFechaI" runat="server" TargetControlID="txtFechaI" Mask="99/99/9999" MaskType="Date" DisplayMoney="Left" AcceptNegative="Left"></ajax:MaskedEditExtender>
|
|
<ajax:CalendarExtender runat="server" ID="Calendario" TargetControlID="txtFechaI" PopupButtonID="ImgCalendario" PopupPosition="BottomRight" Enabled="True"></ajax:CalendarExtender>
|
|
<asp:RequiredFieldValidator ID="rfvFechaI" runat="server" ControlToValidate="txtFechaI" Display="None" ErrorMessage="El campo <b>''Fecha Inicial''</b> es requerido por la aplicación, por favor ingrese una fecha." ValidationGroup="GrpObligatorio"></asp:RequiredFieldValidator>
|
|
<asp:CompareValidator ID="cvFechaI" runat="server" ControlToValidate="txtFechaI" Display="None" ErrorMessage="El campo <b>''Fecha Inicial''</b> no tiene el formato correcto, por favor intente de nuevo con el siguiente formato: (dd/mm/yyyy)." Operator="DataTypeCheck" Type="Date" ValidationGroup="GrpObligatorio"></asp:CompareValidator>
|
|
<ajax:ValidatorCalloutExtender ID="vcoFfvFI" runat="server" HighlightCssClass="vco" TargetControlID="rfvFechaI" Width="350px"></ajax:ValidatorCalloutExtender>
|
|
<ajax:ValidatorCalloutExtender ID="vcoCvFI" runat="server" HighlightCssClass="vco" TargetControlID="cvFechaI" Width="350px"></ajax:ValidatorCalloutExtender>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-1"></div>
|
|
<label class="col-md-1 truncate">F.F.:</label>
|
|
<div class="col-md-2">
|
|
<div class="input-group input-sm input-small date date-picker " data-date-format="dd/mm/yyyy" style="width: 140px !important; padding: 0px;">
|
|
<asp:TextBox ID="txtFechaF" runat="server" CssClass="form-control" CausesValidation="true" MaxLength="10"></asp:TextBox>
|
|
<span class="input-group-btn ">
|
|
<asp:LinkButton ID="imgCalendarioF" class="btn default " Text="<i class='fa fa-calendar'></i>" runat="server"></asp:LinkButton>
|
|
</span>
|
|
<ajax:MaskedEditExtender ID="MEEFechaF" runat="server" TargetControlID="txtFechaF" Mask="99/99/9999" MaskType="Date" DisplayMoney="Left" AcceptNegative="Left"></ajax:MaskedEditExtender>
|
|
<ajax:CalendarExtender runat="server" ID="Calendario2" TargetControlID="txtFechaF" PopupButtonID="imgCalendarioF" PopupPosition="BottomRight" Enabled="True"></ajax:CalendarExtender>
|
|
<asp:RequiredFieldValidator ID="rfvFechaF" runat="server" ControlToValidate="txtFechaF" Display="None" ErrorMessage="El campo <b>''Fecha Final''</b> es requerido por la aplicación, por favor ingrese una fecha." ValidationGroup="GrpObligatorio"></asp:RequiredFieldValidator>
|
|
<asp:CompareValidator ID="cvFechaF" runat="server" ControlToValidate="txtFechaF" Display="None" ErrorMessage="El campo <b>''Fecha Final''</b> no tiene el formato correcto, por favor intente de nuevo con el siguiente formato: (dd/mm/yyyy)." Operator="DataTypeCheck" Type="Date" ValidationGroup="GrpObligatorio"></asp:CompareValidator>
|
|
<ajax:ValidatorCalloutExtender ID="vcoRfvFF" runat="server" HighlightCssClass="vco" TargetControlID="rfvFechaF" Width="350px"></ajax:ValidatorCalloutExtender>
|
|
<ajax:ValidatorCalloutExtender ID="vcoCvFF" runat="server" HighlightCssClass="vco" TargetControlID="cvFechaF" Width="350px"></ajax:ValidatorCalloutExtender>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<br />
|
|
<br />
|
|
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<asp:Label runat="server" onclick="CambiarFechas(1);" ID="LblUltimoDia" class="btn blue" Style="width: 150px;">
|
|
<input type="radio" class="toggle">
|
|
Último Día
|
|
</asp:Label>
|
|
<asp:Label runat="server" onclick="CambiarFechas(2);" ID="LblUltimaSemana" class="btn blue" Style="width: 150px; margin-left: 10px;">
|
|
<input type="radio" class="toggle">
|
|
Última Semana
|
|
</asp:Label>
|
|
<asp:Label runat="server" onclick="CambiarFechas(3);" ID="lblUltimoMes" class="btn blue" Style="width: 150px; margin-left: 10px;">
|
|
<input type="radio" class="toggle">
|
|
Último Mes
|
|
</asp:Label>
|
|
<asp:Label runat="server" onclick="CambiarFechas(4);" ID="LblUltimoAño" class="btn blue" Style="width: 150px; margin-left: 10px;">
|
|
<input type="radio" class="toggle">
|
|
Último Año
|
|
</asp:Label>
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<asp:Label runat="server" onclick="CambiarFechas(5);" ID="LblDiaCorriente" class="btn blue" Style="width: 150px;">
|
|
<input type="radio" class="toggle">
|
|
Día Corriente
|
|
</asp:Label>
|
|
<asp:Label runat="server" onclick="CambiarFechas(6);" ID="LblSemanaCorriente" class="btn blue" Style="width: 150px; margin-left: 10px;">
|
|
<input type="radio" class="toggle">
|
|
Semana Corriente
|
|
</asp:Label>
|
|
<asp:Label runat="server" onclick="CambiarFechas(7);" ID="LblMesCorriente" class="btn blue" Style="width: 150px; margin-left: 10px;">
|
|
<input type="radio" class="toggle">
|
|
Mes Corriente
|
|
</asp:Label>
|
|
<asp:Label runat="server" onclick="CambiarFechas(8);" ID="LblAñoCorriente" class="btn blue" Style="width: 150px; margin-left: 10px;">
|
|
<input type="radio" class="toggle">
|
|
Año Corriente
|
|
</asp:Label>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<asp:Button ID="BtnRastrear" runat="server" autopostback="true" Text="Aceptar" CssClass="btn btn-primary"></asp:Button>
|
|
<button data-dismiss="modal" class="btn btn-default">Cancelar</button>
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
|
|
<%-- Modal Grafica Grande --%>
|
|
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="UpdatePanel2">
|
|
<ContentTemplate>
|
|
<div id="DivGrafica" class="modal ADS fade" role="dialog">
|
|
<div class="modal-dialog">
|
|
<asp:UpdatePanel ID="UpdatePanel3" class="modal-content rowpadding" style="width: 1300px; height: 600px;" tabindex="-1" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<asp:UpdatePanel ID="UpTituloGraficaGrande" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<h4 class="modal-title" id="H1" runat="server">
|
|
<asp:Label runat="server" ID="LblGrafica" Text="Gráfica" /></h4>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<div id="chartdivGraficaGrande"></div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
|
|
</asp:Content>
|
|
|
|
<asp:Content ID="Content8" ContentPlaceHolderID="JS" runat="Server">
|
|
<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 CambiarFechas(valor) {
|
|
$('#HdnTipoFecha').val(valor)
|
|
$("#C_BtnTrampa").click();
|
|
}
|
|
|
|
function KilometrajeDispositivos(datos, div) {
|
|
|
|
var KilometrajeDispositivos = AmCharts.makeChart(div, {
|
|
"type": "serial",
|
|
"theme": "light",
|
|
"dataProvider": datos,
|
|
"valueAxes": [{
|
|
"gridColor": "#FFFFFF",
|
|
"gridAlpha": 0.2,
|
|
"dashLength": 0
|
|
}],
|
|
"gridAboveGraphs": true,
|
|
"startDuration": 1,
|
|
"graphs": [{
|
|
"balloonText": "[[category]]: <b>[[value]]</b>",
|
|
"fillAlphas": 0.8,
|
|
"lineAlpha": 0.2,
|
|
"type": "column",
|
|
"valueField": "kilometros",
|
|
"colorField": "color"
|
|
}],
|
|
"chartCursor": {
|
|
"categoryBalloonEnabled": false,
|
|
"cursorAlpha": 0,
|
|
"zoomable": false
|
|
},
|
|
"categoryField": "dispositivos",
|
|
"categoryAxis": {
|
|
"gridPosition": "start",
|
|
"labelRotation": 45
|
|
},
|
|
"export": {
|
|
"enabled": true
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
function MejoresConductores(datos, div) {
|
|
|
|
var MejoresConductores = AmCharts.makeChart(div, {
|
|
"type": "serial",
|
|
"theme": "light",
|
|
"dataProvider": datos,
|
|
"valueAxes": [{
|
|
"gridColor": "#FFFFFF",
|
|
"minimum": 0,
|
|
"maximum": 100,
|
|
"gridAlpha": 0.2,
|
|
"dashLength": 0
|
|
}],
|
|
"gridAboveGraphs": true,
|
|
"startDuration": 1,
|
|
"graphs": [{
|
|
"balloonText": "[[category]]: <b>[[value]]</b>",
|
|
"fillAlphas": 0.8,
|
|
"lineAlpha": 0.2,
|
|
"type": "column",
|
|
"valueField": "valor",
|
|
"colorField": "color"
|
|
}],
|
|
"chartCursor": {
|
|
"categoryBalloonEnabled": false,
|
|
"cursorAlpha": 0,
|
|
"zoomable": false
|
|
},
|
|
"categoryField": "conductor",
|
|
"categoryAxis": {
|
|
"gridPosition": "start",
|
|
"labelRotation": 45
|
|
},
|
|
"export": {
|
|
"enabled": true
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
function TiempoPuntosInteres(datos, div) {
|
|
var TiempoPI = AmCharts.makeChart(div, {
|
|
"type": "serial",
|
|
"theme": "light",
|
|
"dataProvider": datos,
|
|
"gridAboveGraphs": true,
|
|
"startDuration": 1,
|
|
"graphs": [{
|
|
"balloonText": "[[category]]: <b>[[value]]</b>",
|
|
"fillAlphas": 0.8,
|
|
"lineAlpha": 0.2,
|
|
"type": "column",
|
|
"valueField": "duracion",
|
|
"colorField": "color"
|
|
}],
|
|
"chartCursor": {
|
|
"categoryBalloonEnabled": false,
|
|
"cursorAlpha": 0,
|
|
"zoomable": false
|
|
},
|
|
"categoryField": "pi",
|
|
"categoryAxis": {
|
|
"gridPosition": "start",
|
|
"labelRotation": 45
|
|
},
|
|
"export": {
|
|
"enabled": true
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
function PuntosDeInteresDispositivos(total, chart, div) {
|
|
|
|
var chartData = chart;
|
|
|
|
var currentYear = total;
|
|
var PIVisitados = AmCharts.makeChart(div, {
|
|
"type": "pie",
|
|
"theme": "light",
|
|
"labelText": "[[percents]]%",
|
|
"dataProvider": [],
|
|
"valueField": "size",
|
|
"colorField": "color",
|
|
"titleField": "title",
|
|
"startDuration": 0,
|
|
"innerRadius": "50%",
|
|
"pullOutRadius": "2%",
|
|
"marginTop": 20,
|
|
"titles": "",
|
|
"allLabels": [{
|
|
"y": "50%",
|
|
"align": "center",
|
|
"size": 12,
|
|
"bold": true,
|
|
"text": currentYear,
|
|
"color": "#555"
|
|
}],
|
|
"listeners": [{
|
|
"event": "init",
|
|
"method": function (e) {
|
|
var chart = e.chart;
|
|
|
|
function getCurrentData() {
|
|
var data = chartData[currentYear];
|
|
return data;
|
|
}
|
|
|
|
function inicar() {
|
|
chart.allLabels[0].text = currentYear;
|
|
var data = getCurrentData();
|
|
chart.animateData(data, {
|
|
duration: 0,
|
|
complete: function () {
|
|
}
|
|
});
|
|
}
|
|
|
|
inicar();
|
|
}
|
|
}],
|
|
"export": {
|
|
"enabled": true
|
|
}
|
|
});
|
|
}
|
|
|
|
function TiempoDeOperacion(data, div) {
|
|
|
|
var tiempoOperacion = AmCharts.makeChart(div, {
|
|
"type": "serial",
|
|
"theme": "light",
|
|
"dataProvider": data,
|
|
"valueAxes": [{
|
|
"stackType": "regular",
|
|
"axisAlpha": 0.3,
|
|
"gridAlpha": 0,
|
|
"strictMinMax": true
|
|
}],
|
|
"graphs": [{
|
|
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
|
|
"fillColors": "#E43A45",
|
|
"fillAlphas": 0.8,
|
|
"labelText": "[[value]] horas",
|
|
"lineColor": "#000000",
|
|
"lineAlpha": 0.3,
|
|
"title": "Apagado",
|
|
"type": "column",
|
|
"color": "#000000",
|
|
"valueField": "apagado"
|
|
}, {
|
|
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
|
|
"fillColors": "#1BA39C",
|
|
"fillAlphas": 0.8,
|
|
"labelText": "[[value]] horas",
|
|
"lineColor": "#000000",
|
|
"lineAlpha": 0.3,
|
|
"title": "Encendido",
|
|
"type": "column",
|
|
"color": "#000000",
|
|
"valueField": "encendido"
|
|
}],
|
|
"categoryField": "dispositivo",
|
|
"categoryAxis": {
|
|
"gridPosition": "start",
|
|
"axisAlpha": 0,
|
|
"gridAlpha": 0,
|
|
"position": "left"
|
|
},
|
|
"export": {
|
|
"enabled": true
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
function RendimientoCombustible(data, div) {
|
|
|
|
var rendimientoCombustible = AmCharts.makeChart(div, {
|
|
"type": "serial",
|
|
"theme": "light",
|
|
"dataProvider": data,
|
|
"valueAxes": [{
|
|
"stackType": "regular",
|
|
"axisAlpha": 0.3,
|
|
"gridAlpha": 0
|
|
}],
|
|
"graphs": [{
|
|
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]] lts</b></span>",
|
|
"fillColors": "#E87E04",
|
|
"fillAlphas": 0.8,
|
|
"labelText": "[[value]] lts",
|
|
"lineColor": "#000000",
|
|
"lineAlpha": 0.3,
|
|
"title": "Combustible",
|
|
"type": "column",
|
|
"color": "#000000",
|
|
"valueField": "combustible"
|
|
}, {
|
|
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]] km</b></span>",
|
|
"fillColors": "#2F353B",
|
|
"fillAlphas": 0.8,
|
|
"labelText": "[[value]] km",
|
|
"lineColor": "#000000",
|
|
"lineAlpha": 0.3,
|
|
"title": "Kilometraje",
|
|
"type": "column",
|
|
"color": "#000000",
|
|
"valueField": "kilometraje"
|
|
}],
|
|
"categoryField": "dispositivo",
|
|
"categoryAxis": {
|
|
"gridPosition": "start",
|
|
"axisAlpha": 0,
|
|
"gridAlpha": 0,
|
|
"position": "left"
|
|
},
|
|
"export": {
|
|
"enabled": true
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
function UnidadesReportando(reportando, total, porcentaje, div) {
|
|
var unidadesReportando = AmCharts.makeChart(div, {
|
|
"type": "gauge",
|
|
"theme": "light",
|
|
"axes": [{
|
|
"axisAlpha": 0,
|
|
"tickAlpha": 0,
|
|
"labelsEnabled": false,
|
|
"startValue": 0,
|
|
"endValue": total,
|
|
"startAngle": -90,
|
|
"endAngle": 90,
|
|
"bands": [{
|
|
"color": "#eee",
|
|
"startValue": 0,
|
|
"endValue": total,
|
|
"radius": "100%",
|
|
"innerRadius": "85%"
|
|
}, {
|
|
"color": "#08A3CC",
|
|
"startValue": 0,
|
|
"endValue": reportando,
|
|
"radius": "100%",
|
|
"innerRadius": "85%",
|
|
"balloonText": porcentaje
|
|
}]
|
|
}],
|
|
"allLabels": [{
|
|
"text": reportando,
|
|
"x": "54%",
|
|
"y": "50%",
|
|
"size": 60,
|
|
"bold": true,
|
|
"color": "#555555",
|
|
"align": "right"
|
|
},
|
|
{
|
|
"text": total,
|
|
"x": "83%",
|
|
"y": "58%",
|
|
"size": 20,
|
|
"bold": true,
|
|
"color": "#BFBFBF",
|
|
"align": "right"
|
|
},],
|
|
"export": {
|
|
"enabled": true
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
$('#mBody').addClass("page-sidebar-closed");
|
|
$('#ulmenulateralmaster').addClass("page-sidebar-menu-closed");
|
|
});
|
|
|
|
</script>
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAF7s8wwhzCVXDUYopc9mXxqaWB33cDro4&libraries=drawing"></script>
|
|
</asp:Content>
|
|
|