143 lines
3.6 KiB
Vue
143 lines
3.6 KiB
Vue
<script setup>
|
|
import segments from '../data/segments.json';
|
|
import loadsType from '../data/loadsType.json';
|
|
import BarChartStatistics from '../components/BarChartStatistics.vue';
|
|
import DoughnutChartStatistics from '../components/DoughnutChartStatistics.vue';
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<h1 class="title my-4">Dashboard Administrativo</h1>
|
|
<div class="container-dashboard">
|
|
<div class="card-fixed card-dashboard">
|
|
<h3>Total de cargas este mes</h3>
|
|
<div class="main-info">
|
|
35
|
|
<div class="indicator-text" style="color: green;">
|
|
<i class="fa-solid fa-arrow-up"></i>
|
|
<!-- <i class="fa-solid fa-arrow-down"></i> -->
|
|
23%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <ChartLoad/> -->
|
|
<div class="card-fixed card-dashboard">
|
|
<h3>Cargas activas</h3>
|
|
<div class="card-chart">
|
|
<DoughnutChartStatistics
|
|
:data="['Published', 'Transit', 'Delivered', 'Published', 'Downloading', 'Loading']"
|
|
:data-model="loadsType"
|
|
target-find="name"
|
|
target-label="status"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="card-fixed card-dashboard">
|
|
<h3>Segmentos más usados</h3>
|
|
<div class="card-chart">
|
|
<DoughnutChartStatistics
|
|
:data="['Agricola', 'Agricola', 'Cemento', 'Agricola', 'Intermoadal', 'Agricola']"
|
|
:data-model="segments"
|
|
target-find="name"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<!-- </div>
|
|
<div class="container-dashboard"> -->
|
|
<div class="card-fixed card-dashboard">
|
|
<h3>Estados más usados</h3>
|
|
<div class="card-chart">
|
|
<BarChartStatistics
|
|
label="Ciuades"
|
|
:data="['Yucatán', 'Guadalajara', 'Colima', 'Yucatán', 'Nuevo león', 'Yucatán', 'Guadalajara']"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="card-fixed card-dashboard">
|
|
<h3>Ciudades más usadas</h3>
|
|
<div class="card-chart">
|
|
<BarChartStatistics
|
|
label="Estados"
|
|
:data="['Mérida', 'Guadalajara', 'Colima', 'Guadalajara', 'Monterrey', 'Izamal', 'Mérida']"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="card-fixed card-dashboard">
|
|
<h3>Tipo de transporte más usados</h3>
|
|
<div class="card-chart">
|
|
<BarChartStatistics
|
|
label="Vehiculos"
|
|
:data="['FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'Auto']"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container-dashboard {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
/* gap: 1rem; */
|
|
}
|
|
|
|
.card-dashboard {
|
|
width: 32%;
|
|
/* margin: 8px 8px; */
|
|
min-height: 300px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-chart {
|
|
width: 100%;
|
|
/* max-width: 333px; */
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.main-info{
|
|
align-items: center;
|
|
align-content: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin: auto 0;
|
|
padding: 0px;
|
|
font-size: 7rem;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.indicator-text {
|
|
font-size: 3rem;
|
|
}
|
|
.container-dashboard h3 {
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1.5rem;
|
|
color: #323232;
|
|
}
|
|
|
|
@media (max-width: 1300px) {
|
|
.card-dashboard {
|
|
width: 48%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
.container-dashboard {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.card-dashboard {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|