ETA/WebETA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

faqs in admin

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-02-03 17:17:15 -06:00
parent 79b5cc0f13
commit a3da672ed6
4 changed files with 74 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/BarChartStatistics.vue
View File

@@ -53,6 +53,7 @@
chartData.value = {
labels: dataMap.value.map((e) => (e.label.length > 12) ? e.label.substring(0, 11) : e.label),
position: 'bottom',
datasets: [{
label: props.label,
data: dataMap.value.map((e) => e.data),
@@ -67,33 +68,19 @@
const chartOptions = {
responsive: true,
responsive: true,
}
</script>
<template>
<div class="card-chart">
<Bar
:id=id
v-if="chartData"
:options="chartOptions"
:data="chartData"
/>
</div>
<Bar
:id=id
v-if="chartData"
:options="chartOptions"
:data="chartData"
/>
</template>
<style scoped>
.card-chart {
width: 100%;
display: flex;
flex-direction: column;
}
@media (max-width: 768px) {
.card-dashboard {
width: 100%;
}
}
</style>

27
src/components/DoughnutChartStatistics.vue
View File

@@ -26,7 +26,6 @@
props.data.forEach(item => {
const index = dataMap.value.findIndex((e) => e.label === item);
console.log(index);
if(index === -1) {
if(props.dataModel) {
@@ -48,7 +47,6 @@
}
});
console.log(dataMap.value)
chartData.value = {
labels: dataMap.value.map((e) => e.label),
datasets: [{
@@ -66,27 +64,14 @@
</script>
<template>
<div class="card-chart">
<Doughnut
id="my-chart-statictics"
v-if="chartData"
:options="chartOptions"
:data="chartData"
/>
</div>
<Doughnut
id="my-chart-statictics"
v-if="chartData"
:options="chartOptions"
:data="chartData"
/>
</template>
<style scoped>
.card-chart {
width: 100%;
display: flex;
flex-direction: column;
}
@media (max-width: 768px) {
.card-dashboard {
width: 100%;
}
}
</style>

2
src/components/Sidebar.vue
View File

@@ -118,7 +118,7 @@
<div class="divider"></div>
<RouterLink class="link-eta" :to="{name: 'notice-privacy'}" target="_blank">Aviso de privaciadad</RouterLink>
<RouterLink class="link-eta" :to="{name: 'terms-conditions'}" target="_blank">Términos y condiciones</RouterLink>
<a class="link-eta" href="">FAQS</a>
<RouterLink class="link-eta" :to="{name: 'faqs'}" target="_blank">Faqs</RouterLink>
<div class="d-flex align-items-center">
<i class="fa-solid fa-right-from-bracket"></i>
<a @click="handleLogout"

133
src/views/HomeView.vue
View File

@@ -7,12 +7,13 @@
</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="process-load text-center" style="color: green;">
<div class="indicator-text" style="color: green;">
<i class="fa-solid fa-arrow-up"></i>
<!-- <i class="fa-solid fa-arrow-down"></i> -->
23%
@@ -21,44 +22,54 @@
</div>
<!-- <ChartLoad/> -->
<div class="card-fixed card-dashboard">
<h3>Segmentos más usados</h3>
<DoughnutChartStatistics
:data="['Published', 'Transit', 'Delivered', 'Published', 'Downloading', 'Loading']"
:data-model="loadsType"
target-find="name"
target-label="status"
/>
<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>
<DoughnutChartStatistics
:data="['Agricola', 'Agricola', 'Cemento', 'Agricola', 'Intermoadal', 'Agricola']"
:data-model="segments"
target-find="name"
/>
<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>
<div class="container-dashboard"> -->
<div class="card-fixed card-dashboard">
<h3>Estados más usados</h3>
<BarChartStatistics
label="Ciuades"
:data="['Yucatán', 'Guadalajara', 'Colima', 'Yucatán', 'Nuevo león', 'Yucatán', 'Guadalajara']"
/>
<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>
<BarChartStatistics
label="Estados"
:data="['Mérida', 'Guadalajara', 'Colima', 'Guadalajara', 'Monterrey', 'Izamal', 'Mérida']"
/>
<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>
<BarChartStatistics
label="Vehiculos"
:data="['FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'Auto']"
/>
<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>
@@ -68,44 +79,24 @@
width: 100%;
display: flex;
flex-direction: row;
gap: 1rem;
flex-wrap: nowrap;
}
.total-loads {
min-width: 300px;
}
.process-load {
margin-bottom: 1rem;
font-size: 1.2rem;
}
.process-load span {
margin-left: 1rem;
margin-right: 1rem;
font-size: 1.4rem;
font-weight: 900;
margin-top: 0px;
justify-content: space-between;
flex-wrap: wrap;
/* gap: 1rem; */
}
.card-dashboard {
width: 33%;
width: 32%;
/* margin: 8px 8px; */
min-height: 300px;
display: flex;
flex-direction: column;
}
.card-loads {
.card-chart {
width: 100%;
/* max-width: 333px; */
display: flex;
flex-direction: row;
justify-content: space-around;
}
.small {
font-size: 1rem;
color: grey;
font-weight: 300;
flex-direction: column;
}
.main-info{
@@ -116,19 +107,24 @@
justify-content: center;
margin: auto 0;
padding: 0px;
font-size: 5rem;
font-size: 7rem;
font-weight: 900;
}
.indicator-text {
font-size: 3rem;
}
.container-dashboard h3 {
font-size: 1.2rem;
font-weight: 400;
font-weight: 700;
margin-bottom: 1.5rem;
color: #323232;
}
ol li {
font-size: 1.3rem;
font-weight: 500;
@media (max-width: 1300px) {
.card-dashboard {
width: 48%;
}
}
@media (max-width: 768px) {
@@ -136,22 +132,11 @@
.container-dashboard {
width: 100%;
flex-direction: column;
justify-content: center;
flex-wrap: nowrap;
}
.card-dashboard {
width: 100%;
}
.process-load {
margin-bottom: 0.5rem;
font-size: 1rem;
}
.process-load span {
margin-left: 1rem;
margin-right: 1rem;
font-size: 1.2rem;
font-weight: 700;
margin-top: 0px;
}
}
</style>