162 lines
5.5 KiB
HTML
162 lines
5.5 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block titulo %}Servicio de Transporte{% endblock %}
|
|
|
|
{% block seccion %}
|
|
<div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
|
|
<div>
|
|
<h3 class="fw-bold mb-3">Panel Principal</h3>
|
|
<h6 class="op-7 mb-2">Servicio de Transporte del Ejército Bolivariano</h6>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block contenido %}
|
|
{% load humanize %}
|
|
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-sm-7 col-md-4">
|
|
<div class="card card-stats card-round">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col-icon">
|
|
<div class="icon-big text-center icon-primary bubble-shadow-small">
|
|
<i class="fas fa-car"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col col-stats ms-3 ms-sm-0">
|
|
<div class="numbers">
|
|
<p class="card-category">Vehículos Administrativos</p>
|
|
<h4 class="card-title">{{ vehiculos_administrativos_count|intcomma }}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-7 col-md-4">
|
|
<div class="card card-stats card-round">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col-icon">
|
|
<div class="icon-big text-center icon-info bubble-shadow-small">
|
|
<i class="fas fa-truck-monster"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col col-stats ms-3 ms-sm-0">
|
|
<div class="numbers">
|
|
<p class="card-category">Vehículos Tácticos</p>
|
|
<h4 class="card-title">{{ vehiculos_tacticos_count|intcomma }}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-7 col-md-4">
|
|
<div class="card card-stats card-round">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col-icon">
|
|
<div class="icon-big text-center icon-success bubble-shadow-small">
|
|
<i class="fas fa-shield-alt"> + </i> <i class="fas fa-crosshairs"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col col-stats ms-3 ms-sm-0">
|
|
<div class="numbers">
|
|
<p class="card-category">Unidades</p>
|
|
<h4 class="card-title">{{ unidades_count|intcomma }}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">Grafico de Cantidades Comparativas</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container">
|
|
<canvas
|
|
id="pieChart"
|
|
style="width: 50%; height: 50%"
|
|
></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
|
|
|
|
{% block js %}
|
|
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
$.ajax({
|
|
url: '/api/datos/', // Ruta correcta al endpoint
|
|
method: 'GET',
|
|
success: function(data) {
|
|
var ctx = document.getElementById('pieChart').getContext('2d');
|
|
var myPieChart = new Chart(ctx, {
|
|
type: "pie",
|
|
data: {
|
|
datasets: [
|
|
{
|
|
data: [data.vehiculos_administrativos, data.vehiculos_tacticos, data.unidades], // Asegúrate de que estos campos existan en la respuesta
|
|
backgroundColor: ["#1d7af3", "#f3545d", "#fdaf4b"],
|
|
borderWidth: 0,
|
|
},
|
|
],
|
|
labels: ['Vehículos Administrativos', 'Vehículos Tácticos', 'Unidades'],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
legend: {
|
|
position: "bottom",
|
|
labels: {
|
|
fontColor: "rgb(154, 154, 154)",
|
|
fontSize: 11,
|
|
usePointStyle: true,
|
|
padding: 20,
|
|
},
|
|
},
|
|
pieceLabel: {
|
|
render: "percentage",
|
|
fontColor: "white",
|
|
fontSize: 14,
|
|
},
|
|
tooltips: false,
|
|
layout: {
|
|
padding: {
|
|
left: 20,
|
|
right: 20,
|
|
top: 20,
|
|
bottom: 20,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error("Error al obtener los datos: ", error);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
{% endblock %}
|
|
|