197 lines
4.2 KiB
Vue
197 lines
4.2 KiB
Vue
<template>
|
|
<div>
|
|
<h1>Resumen mensual</h1>
|
|
<div class="row">
|
|
<Badge type="primary" class="col-3 p-4 rounded-pill"
|
|
>Total Ingresos: <br /><b>{{ formatMoneda(ingresos) }}</b></Badge
|
|
>
|
|
<Badge type="info" class="col-3 p-4 offset-md-1 rounded-pill"
|
|
>Total Compras: <br /><b>{{ formatMoneda(compras) }}</b></Badge
|
|
>
|
|
</div>
|
|
|
|
<card>
|
|
<div class="chart-area" style="height: 300px">
|
|
<highchart style="height: 100%" v-if="isMounted" :options="comprasChart"/>
|
|
</div>
|
|
<div class="chart-area" style="height: 300px">
|
|
<highchart style="height: 100%" v-if="isMounted" :options="metodosChart"/>
|
|
</div>
|
|
</card>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
import * as configPlot from "@/components/Charts/config_plots";
|
|
import config from "@/config";
|
|
|
|
export default {
|
|
name: "dashboard",
|
|
middleware: "authenticated",
|
|
|
|
data() {
|
|
return {
|
|
isMounted: false,
|
|
|
|
comprasChart:{
|
|
...configPlot.chartOptions,
|
|
title: {
|
|
text: 'Compras por categorías'
|
|
},
|
|
series: [{
|
|
name: '',
|
|
data: [],
|
|
color: "#e14eca"
|
|
},],
|
|
|
|
},
|
|
|
|
metodosChart:{
|
|
...configPlot.pieOptions,
|
|
title: {
|
|
text: 'Métodos de pago'
|
|
},
|
|
series: [{
|
|
data: [],
|
|
},],
|
|
|
|
},
|
|
|
|
ingresos: 1000,
|
|
compras: 1000,
|
|
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
formatMoneda(dato) {
|
|
var num = dato;
|
|
if (!isNaN(num)) {
|
|
num = num
|
|
.toString()
|
|
.split("")
|
|
.reverse()
|
|
.join("")
|
|
.replace(/(?=\d*\.?)(\d{3})/g, "$1.");
|
|
num = num.split("").reverse().join("").replace(/^[\.]/, "");
|
|
//return '$' +num;
|
|
return `$ ${num}`;
|
|
}
|
|
},
|
|
|
|
getCompras() {
|
|
const axiosHeader = {
|
|
headers: {
|
|
token: this.$store.state.auth.token,
|
|
filtro: this.$store.state.filtro.fechas,
|
|
},
|
|
};
|
|
this.$axios
|
|
.get("/resumen_compras", axiosHeader)
|
|
.then((res) => {
|
|
console.log(res.data.data);
|
|
this.compras = res.data.data;
|
|
})
|
|
.catch((e) => console.log(e));
|
|
},
|
|
|
|
getIngresos() {
|
|
const axiosHeader = {
|
|
headers: {
|
|
token: this.$store.state.auth.token,
|
|
filtro: this.$store.state.filtro.fechas,
|
|
},
|
|
};
|
|
this.$axios
|
|
.get("/resumen_ingresos", axiosHeader)
|
|
.then((res) => {
|
|
console.log(res.data.data);
|
|
this.ingresos = res.data.data;
|
|
})
|
|
.catch((e) => console.log(e));
|
|
},
|
|
|
|
async getResumenCategorias() {
|
|
const axiosHeader = {
|
|
headers: {
|
|
token: this.$store.state.auth.token,
|
|
filtro: this.$store.state.filtro.fechas,
|
|
},
|
|
};
|
|
await this.$axios
|
|
.get("/resumen_categorias", axiosHeader)
|
|
.then((res) => {
|
|
let categorias = res.data.labels;
|
|
let valores = res.data.datos;
|
|
|
|
this.comprasChart.xAxis.categories =categorias;
|
|
this.comprasChart.series =[{name: '',
|
|
data: valores,
|
|
}]
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
.catch((e) => console.log(e));
|
|
},
|
|
|
|
async getResumenMetodos() {
|
|
const axiosHeader = {
|
|
headers: {
|
|
token: this.$store.state.auth.token,
|
|
filtro: this.$store.state.filtro.fechas,
|
|
},
|
|
};
|
|
await this.$axios
|
|
.get("/resumen_metodos", axiosHeader)
|
|
.then((res) => {
|
|
let metodos = res.data.labels;
|
|
let valores = res.data.datos;
|
|
|
|
//this.metodosChart.xAxis.categories =metodos;
|
|
var series =[];
|
|
for (var i=0;i< metodos.length;i++){
|
|
var serie={
|
|
name:metodos[i],
|
|
y:valores[i]
|
|
}
|
|
series.push(serie)
|
|
}
|
|
console.log(series)
|
|
this.metodosChart.series = [{name: '',
|
|
data: series,
|
|
}];
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
.catch((e) => console.log(e));
|
|
},
|
|
},
|
|
|
|
async mounted() {
|
|
await this.getCompras();
|
|
await this.getIngresos();
|
|
await this.getResumenCategorias();
|
|
await this.getResumenMetodos();
|
|
this.isMounted = true;
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |