pcpuma_unam_operador/components/admin/Graficas.vue
2023-02-21 13:55:50 -06:00

283 lines
8.7 KiB
Vue

<template>
<div>
<div class="columns is-multiline mb-5 is-align-items-flex-end">
<SelectInstitucion
columnSize="is-3"
:deshabilitarOptVacia="false"
:idInstitucionPadre="idInstitucion"
@institucion-seleccionada="
(nuevaInstitucion) => (idInstitucion = nuevaInstitucion)
"
v-if="admin.tipoUsuario.id_tipo_usuario === 2"
/>
<SelectModulo
columnSize="is-3"
:deshabilitarOptVacia="false"
:idInstitucion="
admin.institucion ? admin.institucion.id_institucion : idInstitucion
"
:idModuloPadre="idModulo"
:operador="admin"
@modulo-seleccionado="(nuevoModulo) => (idModulo = nuevoModulo)"
/>
<SelectTipoCarrito
columnSize="is-3"
:deshabilitarOptVacia="false"
:idTipoCarritoPadre="idTipoCarrito"
@tipo-carrito-seleccionado="
(nuevoTipoCarrito) => (idTipoCarrito = nuevoTipoCarrito)
"
/>
<SelectTipoUsuario
columnSize="is-3"
:deshabilitarOptVacia="false"
:idTipoUsuarioPadre="idTipoUsuario"
@tipo-usuario-seleccionado="
(nuevoTipoUsuario) => (idTipoUsuario = nuevoTipoUsuario)
"
/>
<SelectCarrera
columnSize="is-3"
:idInstitucion="
admin.institucion ? admin.institucion.id_institucion : idInstitucion
"
:idInstitucionCarreraPadre="idInstitucionCarrera"
@institucion-carrera-seleccionada="
(nuevaInstitucionCarrera) =>
(idInstitucionCarrera = nuevaInstitucionCarrera)
"
:deshabilitarOptVacia="false"
/>
<InputFecha
columnSize="is-3"
label="Fecha inicio"
:fechaPadre="fechaInicio"
:fechaMaxima="fechaMax"
:fechaMinima="fechaMinInicio"
@fecha="(fechaNueva) => (fechaInicio = fechaNueva)"
/>
<InputFecha
columnSize="is-3"
label="Fecha fin"
:fechaPadre="fechaFin"
:fechaMaxima="fechaMax"
:fechaMinima="fechaMinFin"
@fecha="(fechaNueva) => (fechaFin = fechaNueva)"
/>
<BotonBuscar
columnSize="is-3"
:buscar="obtenerPrestamos"
:disabled="false"
/>
</div>
<Diario :labels="fechas" :data="data" />
<TotalBarra
:data="data"
:labels="instituciones"
:tiposCarrito="tiposCarrito"
/>
</div>
</template>
<script>
import axios from 'axios'
import moment from 'moment'
import BotonBuscar from '@/components/botones/BotonBuscar'
import Diario from '@/components/admin/graficas/Diario'
import TotalBarra from '@/components/admin/graficas/TotalBarra'
import SelectCarrera from '@/components/selects/SelectCarrera'
import SelectInstitucion from '@/components/selects/SelectInstitucion'
import SelectModulo from '@/components/selects/SelectModulo'
import SelectTipoCarrito from '@/components/selects/SelectTipoCarrito'
import SelectTipoUsuario from '@/components/selects/SelectTipoUsuario'
import InputFecha from '@/components/inputs/InputFecha'
export default {
components: {
BotonBuscar,
Diario,
InputFecha,
SelectCarrera,
SelectInstitucion,
SelectModulo,
SelectTipoCarrito,
SelectTipoUsuario,
TotalBarra,
},
props: {
updateIsLoading: { type: Function, required: false, default: () => {} },
admin: { type: Object, required: true, default: () => ({}) },
},
data() {
return {
data: [],
fechas: [],
instituciones: [],
tiposCarrito: [],
idInstitucion: 0,
idInstitucionCarrera: 0,
idModulo: 0,
idTipoCarrito: 0,
idTipoUsuario: 0,
fechaFin: moment().toDate(),
fechaInicio: null,
hoy: moment(),
}
},
methods: {
obtenerPrestamos() {
let query = '?cancelado_operador=false&cancelado_usuario=false'
let fechaInicio = moment(this.fechaInicio)
this.updateIsLoading(true)
this.fechas = []
while (fechaInicio.dayOfYear() <= moment(this.fechaFin).dayOfYear()) {
this.fechas.push(fechaInicio.format('YYYY-MM-DD'))
fechaInicio.add(1, 'd')
}
if (this.admin.institucion)
query += `&id_institucion=${this.admin.institucion.id_institucion}`
else if (this.idInstitucion)
query += `&id_institucion=${this.idInstitucion}`
if (this.idInstitucionCarrera)
query += `&id_institucion_carrera=${this.idInstitucionCarrera}`
if (this.idModulo) query += `&id_modulo=${this.idModulo}`
if (this.idTipoCarrito) query += `&id_tipo_carrito=${this.idTipoCarrito}`
if (this.idTipoUsuario) query += `&id_tipo_usuario=${this.idTipoUsuario}`
if (this.fechaInicio)
query += `&fechaInicio=${moment(this.fechaInicio).format('YYYY-MM-DD')}`
if (this.fechaFin)
query += `&fechaFin=${moment(this.fechaFin).format('YYYY-MM-DD')}`
this.data = []
return axios
.get(
`${process.env.api}/prestamo/reporte${query}`,
this.$getToken.token()
)
.then((res) => {
const prestamos = []
const i = res.data.map((value) => value.institucion)
const tc = res.data.map((value) => value.tipo_carrito)
this.tiposCarrito = tc.filter(
(value, index, self) => self.indexOf(value) === index
)
this.instituciones = i.filter((value, index, self) => {
if (self.indexOf(value) === index) {
prestamos.push([res.data[index]])
return true
}
prestamos[prestamos.length - 1].push(res.data[index])
return false
})
for (let i = 0; i < this.instituciones.length; i++) {
const tc = []
const dias = []
let m = []
let modulos = []
let k = 0
for (let j = 0; j < this.tiposCarrito.length; j++) tc.push(0)
if (this.instituciones.length === 1) {
m = prestamos[i].map((value) => value.modulo)
modulos = m.filter(
(value, index, self) => self.indexOf(value) === index
)
m = []
for (let j = 0; j < modulos.length; j++)
m.push({ modulo: modulos[j], dias: [] })
}
for (let j = 0; j < this.fechas.length; j++) {
const fecha = moment(this.fechas[j])
const p = []
for (; k < prestamos[i].length; k++)
if (
moment(prestamos[i][k].fecha_inicio).dayOfYear() ===
fecha.dayOfYear()
) {
for (let l = 0; l < this.tiposCarrito.length; l++)
if (this.tiposCarrito[l] === prestamos[i][k].tipo_carrito) {
tc[l]++
break
}
p.push(prestamos[i][k])
} else break
if (this.instituciones.length === 1)
for (let k = 0; k < modulos.length; k++) {
const pm = []
for (let l = 0; l < p.length; l++)
if (modulos[k] === p[l].modulo) pm.push(p[l])
m[k].dias.push({ dia: this.fechas[j], prestamos: pm })
}
dias.push({ dia: this.fechas[j], prestamos: p })
}
if (this.instituciones.length === 1)
this.data.push({
prestamos: prestamos[i].length,
institucion: this.instituciones[i],
dias,
tiposCarrito: tc,
modulos: m,
})
else
this.data.push({
prestamos: prestamos[i].length,
institucion: this.instituciones[i],
dias,
tiposCarrito: tc,
})
}
// console.log(this.data)
this.updateIsLoading(false)
})
.catch((err) => {
this.updateIsLoading(false)
this.$alertsGenericos.imprimirError(
this.$buefy,
this.$router,
err.response.data
)
})
},
},
computed: {
fechaMax() {
return moment().toDate()
},
fechaMinInicio() {
return moment('2022-08-15').toDate()
},
fechaMinFin() {
let fechaMinFin = moment(this.fechaInicio)
return fechaMinFin.isValid() ? fechaMinFin.toDate() : moment().toDate()
},
},
watch: {
idInstitucion() {
this.idModulo = 0
this.idInstitucionCarrera = 0
},
},
created() {
if (this.hoy < moment(`${this.hoy.year()}-07-01`))
this.fechaInicio = moment(`${this.hoy.year()}-01-01`).toDate()
else this.fechaInicio = moment(`${this.hoy.year()}-07-01`).toDate()
this.obtenerPrestamos()
},
}
</script>