621 lines
24 KiB
Vue
621 lines
24 KiB
Vue
<template>
|
|
<div>
|
|
<b-modal id="session" ref="" hide-footer hide-header>
|
|
<div class="d-block text-center">
|
|
<h3>La sesión ha caducado</h3>
|
|
</div>
|
|
<b-button class="mt-3" variant="primary" block @click="$router.replace('/login')">¡Llévame al login!</b-button>
|
|
</b-modal>
|
|
|
|
<div class="container mt-5">
|
|
<div class="justify-content-center d-flex">
|
|
<h1 class="justify-content-center">Sistema de censo</h1>
|
|
</div>
|
|
|
|
<button @click="changeView()" class="btn btn-info mt-4">
|
|
<span v-if="pcView">Ver impresoras</span>
|
|
<span v-else>Ver computadoras</span>
|
|
</button>
|
|
<div class="my-3">Se observan {{ datosmios.length }} registros de un total de {{ respuesta.length }}</div>
|
|
<div class="row m-0 mt-1 mb-4">
|
|
<div class="row d-flex flex-wrap">
|
|
<div class="input-group pl-3 col-12 col-md-4">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text" id="basic-addon1">
|
|
<font-awesome-icon icon="search" class="user-icon-input" />
|
|
</span>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
id="Inventario"
|
|
v-on:keyup="extraeInventario()"
|
|
class="form-control input-login-form shadow-none"
|
|
placeholder="Número de inventario ó de serie"
|
|
/> <!-- https://www.tutorialesprogramacionya.com/vueya/detalleconcepto.php?punto=7&codigo=7&inicio=0 -->
|
|
</div>
|
|
|
|
<div class="d-flex flex-wrap my-1">
|
|
<div class="col-md-2 col-12 mt-3" v-show="pcView">
|
|
<select
|
|
name="tipo"
|
|
id="tipo"
|
|
@change="buscaValor()"
|
|
class="form-control select-login-form shadow-none">
|
|
<option value="Todos" selected>Tipo</option>
|
|
<option v-for="opcion1 in tipo" :key="opcion1.idActivoFijo" :value='opcion1.activoFijo'>{{opcion1.activoFijo}}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-2 col-12 mt-3" v-show="!pcView">
|
|
<select
|
|
name="tipo"
|
|
id="tipo"
|
|
@change="buscaValor()"
|
|
class="form-control select-login-form shadow-none">
|
|
<option value="Todos" selected>Tipo</option>
|
|
<option v-for="opcion in tipoPrinters" :key="opcion.tipo" :value='opcion.tipo'>{{opcion.tipo}}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-2 col-12 mt-3">
|
|
<select name="Ubica" id="Ubica"
|
|
@change="buscaUbica()"
|
|
class="form-control select-login-form shadow-none">
|
|
<option value="Todos" selected>Ubicación</option>
|
|
<option v-for="opcion in Ubica" :key="opcion.ubicacion" :value='opcion.ubicacion'>{{opcion.ubicacion}}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-2 col-12 mt-3" v-show="pcView">
|
|
<select name="Procesador" id="Procesador"
|
|
@change="buscaProcesador()"
|
|
class="form-control select-login-form shadow-none">
|
|
<option value="Todos" selected>Procesador</option>
|
|
<option v-for="opcion in procesa" :key="opcion.procesa" :value='opcion.procesa'>{{opcion.procesa}}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-2 col-12 mt-3" v-show="pcView">
|
|
<select name="SisOper" id="SisOper"
|
|
@change="buscaSisOper()"
|
|
class="form-control select-login-form shadow-none">
|
|
<option value="Todos" selected>Sistema Operativo</option>
|
|
<option v-for="opcion in os" :key="opcion.osname" :value='opcion.osname'>{{opcion.osname}}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-2 col-12 mt-3">
|
|
<select name="Uso" id="Uso"
|
|
@change="buscaUso()"
|
|
class="form-control select-login-form shadow-none">
|
|
<option value="Todos" selected>Uso</option>
|
|
<option v-for="opcion in uso" :key="opcion.uso" :value='opcion.uso'>{{opcion.uso}}</option>
|
|
</select>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="pcView" class="table-responsive table-fixed text-nowrap justify-content-md-center"
|
|
style="max-height: 350px;">
|
|
<table :class="['table', 'table-sm', 'text-center', { 'table-hover': admin(), 't-hov': admin() }]" style="font-size:14px">
|
|
<thead class="thead-light text-uppercase">
|
|
<tr>
|
|
<th v-for="pcHead in pcHeads" :key="pcHead" class="sticky-top">{{ pcHead }}</th>
|
|
</tr>
|
|
</thead>
|
|
<!-- <tbody class="overflow-auto thov" v-for="item in respuesta" :key="item.noInventario">
|
|
<tr @click="watchRow(item.noInventario)">
|
|
<td class="text-primary">{{ item.noInventario }}</td> -->
|
|
|
|
<!-- <tbody class="overflow-auto thov" v-for="item in respuesta" :key="item.noInventario">
|
|
<tr @click="watchRow(item.noInventario)"
|
|
v-if="(seleccionado == item.activoFijo || seleccionado == '0') -->
|
|
<tbody class="overflow-auto thov" v-for="item in datosmios" :key="item.noInventario">
|
|
<tr @click="watchRow(item.noInventario)" >
|
|
<!-- https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Useful_string_methods -->
|
|
<td class="text-primary">{{ item.noInventario }}</td>
|
|
<td>{{ item.activoFijo }}</td>
|
|
<td>{{ item.modelo }}</td>
|
|
<td>{{ item.marca }}</td>
|
|
<td>{{ item.noSerie }}</td>
|
|
<td>{{ item.procesador }}</td>
|
|
<td>{{ item.vProcesador }}</td>
|
|
<td>{{ item.hdd }}</td>
|
|
<td>{{ item.memoriasz }}</td>
|
|
<td>{{ item.memoria }}</td>
|
|
<td>{{ item.vMemoria }}</td>
|
|
<td>{{ item.graficos }}</td>
|
|
<td>{{ item.osname }}</td>
|
|
<td>{{ item.noResguardo }}</td>
|
|
<td>{{ item.uResponsable }}</td>
|
|
<td>{{ item.nombreResponsable }}</td>
|
|
<td>{{ item.ubicacion }}</td>
|
|
<td>{{ item.uso }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
<div class="text-center">
|
|
<b-spinner variant="primary" label="Spinning" v-if="loading"></b-spinner>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="table-responsive table-fixed text-nowrap justify-content-md-center"
|
|
id="myTableStyle">
|
|
<table :class="['table', 'table-sm', 'text-center', { 't-hov': admin(), 'table-hover': admin()}]">
|
|
<thead class="thead-light text-uppercase">
|
|
<tr>
|
|
<th v-for="printerHead in printerHeads" :key="printerHead" class="sticky-top">{{ printerHead }}</th>
|
|
</tr>
|
|
</thead>
|
|
<!-- <tbody v-for="item in respuesta" :key="item.noInventario">
|
|
<tr @click="watchRow(item.noInventario)"> -->
|
|
|
|
<!-- <tbody v-for="item in respuesta" :key="item.noInventario">
|
|
<tr @click="watchRow(item.noInventario)" v-if="seleccionado == item.tipo || seleccionado == '0'"> -->
|
|
|
|
<tbody v-for="item in datosmios" :key="item.noInventario">
|
|
<tr @click="watchRow(item.noInventario)"
|
|
>
|
|
<!-- https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Useful_string_methods -->
|
|
<td class="text-primary">{{ item.noInventario }}</td>
|
|
<td>{{ item.tipo }}</td>
|
|
<td>{{ item.modelo }}</td>
|
|
<td>{{ item.marca }}</td>
|
|
<td>{{ item.noSerie }}</td>
|
|
<td>{{ item.descripcion }}</td>
|
|
<td>{{ item.noResguardo }}</td>
|
|
<td>{{ item.uResponsable }}</td>
|
|
<td>{{ item.nombreResponsable }}</td>
|
|
<td>{{ item.ubicacion }}</td>
|
|
<td>{{ item.uso }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
<div class="text-center">
|
|
<b-spinner variant="primary" label="Spinning" v-if="loading"></b-spinner>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
v-on:click="onDescarga(respuesta)"
|
|
class="btn btn-lg btn-success mt-3">Descargar
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
style="margin-top:200px; left: 0px; position: absolute;"
|
|
class="container-fluid px-0"
|
|
>
|
|
<footer id="footer" style="left: 0px;" class="text-center">
|
|
<div class="separador"></div>
|
|
<div class="contenedor-footer p-3">
|
|
<div class="text-white mt-3" style="font-size: 11px;">
|
|
<p>
|
|
Hecho en México, todos los derechos reservados 2020.
|
|
<br />
|
|
Esta página puede ser reproducida con fines no
|
|
lucrativos, siempre y cuando no se mutile, se cite
|
|
la fuente
|
|
<br />
|
|
completa y su dirección electrónica. De otra forma,
|
|
requiere permiso previo por escrito de la
|
|
institución.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios';
|
|
import config from '../config/config';
|
|
// import Swal from 'sweetalert2'
|
|
/*import strinify from "csv-stringify";
|
|
import fs from "file-system";
|
|
*/
|
|
import MiXLSX from 'xlsx';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
loading: null,
|
|
pcView: true,
|
|
alternativeView: 'Ver impresoras',
|
|
pcHeads: [
|
|
"Inventario",
|
|
"Tipo",
|
|
"Modelo",
|
|
"Marca",
|
|
"Serie",
|
|
"Procesador",
|
|
"Velocidad de procesador (MHz)",
|
|
"ROM (GB)",
|
|
"RAM (MB)",
|
|
"Tipo de memoria",
|
|
"Velocidad de memoria (MHz)",
|
|
"Gráficos",
|
|
"Sistema operativo",
|
|
"Resguardo",
|
|
"Unidad responsable",
|
|
"Responsable",
|
|
"Ubicación",
|
|
"Uso"
|
|
],
|
|
printerHeads: [
|
|
"Inventario",
|
|
"Tipo",
|
|
"Modelo",
|
|
"Marca",
|
|
"Serie",
|
|
"Descripción adicional",
|
|
"Resguardo",
|
|
"Unidad Responsable",
|
|
"Responsable",
|
|
"Ubicacion",
|
|
"Uso",
|
|
],
|
|
respuesta: [],
|
|
datosmios: [],
|
|
tipo: [],
|
|
Ubica: [],
|
|
uso: [],
|
|
procesa: [],
|
|
os: [],
|
|
tipoPrinters: [],
|
|
seleccionado: String,
|
|
seleccionadoUbica: String,
|
|
seleccionadoUso: String,
|
|
seleccionadoProcesador: String,
|
|
seleccionadoOS: String,
|
|
miNoInventario: String,
|
|
file: null
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.getComputers();
|
|
this.traetipo();
|
|
this.traeUbica();
|
|
this.traeUso();
|
|
this.traeProcesador();
|
|
this.traeOS();
|
|
this.seleccionado = "Todos";
|
|
this.seleccionadoUbica = "Todos";
|
|
this.seleccionadoUso = "Todos";
|
|
this.seleccionadoProcesador = "Todos";
|
|
this.seleccionadoOS = "Todos";
|
|
this.miNoInventario = "";
|
|
this.contador = 0;
|
|
},
|
|
|
|
methods: {
|
|
async getComputers() {
|
|
this.loading = true;
|
|
this.respuesta = [];
|
|
this.datosmios = [];
|
|
const localToken = window.localStorage.token;
|
|
axios.get(`${ config.api }/api/computers`, {
|
|
headers: {
|
|
token: localToken
|
|
}
|
|
})
|
|
.then(res => {
|
|
this.respuesta = res.data.equipo;
|
|
this.loading = false;
|
|
})
|
|
.catch((error) => {
|
|
if(error.response.status === 409) {
|
|
localStorage.clear();
|
|
this.$bvModal.show('session');
|
|
}
|
|
});
|
|
axios.get(`${ config.api }/api/computers`, {
|
|
headers: {
|
|
token: localToken
|
|
}
|
|
})
|
|
.then(res => {
|
|
this.datosmios = res.data.equipo;
|
|
this.loading = false;
|
|
})
|
|
.catch((error) => {
|
|
if(error.response.status === 409) {
|
|
localStorage.clear();
|
|
this.$bvModal.show('session');
|
|
}
|
|
});
|
|
},
|
|
async getPrinters() {
|
|
this.loading = true;
|
|
this.respuesta = [];
|
|
this.datosmios = [];
|
|
const localToken = window.localStorage.token;
|
|
axios.get(`${ config.api }/api/printers`, {
|
|
headers: {
|
|
token: localToken
|
|
}
|
|
})
|
|
.then(res => {
|
|
this.respuesta = res.data.printers;
|
|
this.loading = false;
|
|
})
|
|
.catch(error => {
|
|
console.log(error.response);
|
|
if(error.response.status === 409) {
|
|
localStorage.clear();
|
|
this.$bvModal.show('session');
|
|
}
|
|
});
|
|
axios.get(`${ config.api }/api/printers`, {
|
|
headers: {
|
|
token: localToken
|
|
}
|
|
})
|
|
.then(res => {
|
|
this.datosmios = res.data.printers;
|
|
this.loading = false;
|
|
})
|
|
.catch(error => {
|
|
console.log(error.response);
|
|
if(error.response.status === 409) {
|
|
localStorage.clear();
|
|
this.$bvModal.show('session');
|
|
}
|
|
});
|
|
},
|
|
watchRow(noInventario) {
|
|
localStorage.setItem('noInventario', noInventario);
|
|
if(this.pcView)
|
|
this.$router.push('./updateEquip');
|
|
else
|
|
this.$router.push('./updatePrinter');
|
|
},
|
|
async traetipo(){
|
|
const localToken = window.localStorage.token;
|
|
axios.get(`${ config.api }/api/tipo`, {
|
|
headers: {
|
|
token: localToken
|
|
}
|
|
})
|
|
.then(res => this.tipo = res.data.tipo)
|
|
.catch(err => console.log(err));
|
|
},
|
|
async traeUbica(){
|
|
const localToken = window.localStorage.token;
|
|
axios.get(`${ config.api }/api/ubica`, {
|
|
headers: {
|
|
token: localToken
|
|
}
|
|
})
|
|
.then(res => this.Ubica = res.data.ubica)
|
|
.catch(err => console.log(err));
|
|
},
|
|
async traeUso(){
|
|
const localToken = window.localStorage.token;
|
|
axios.get(`${ config.api }/api/uso`, {
|
|
headers: {
|
|
token: localToken
|
|
}
|
|
})
|
|
.then(res => this.uso = res.data.uso)
|
|
.catch(err => console.log(err));
|
|
},
|
|
async traeOS(){
|
|
const localToken = window.localStorage.token;
|
|
axios.get(`${ config.api }/api/sisoper`, {
|
|
headers: {
|
|
token: localToken
|
|
}
|
|
})
|
|
.then(res => this.os = res.data.sisoper)
|
|
.catch(err => console.log(err));
|
|
},
|
|
async traeProcesador(){
|
|
const localToken = window.localStorage.token;
|
|
axios.get(`${ config.api }/api/procesador`, {
|
|
headers: {
|
|
token: localToken
|
|
}
|
|
})
|
|
.then(res => this.procesa = res.data.procesador)
|
|
.catch(err => console.log(err));
|
|
},
|
|
async traetipoImpresora(){
|
|
const localToken = window.localStorage.token;
|
|
axios.get(`${ config.api }/api/tipoPrinters`, {
|
|
headers: {
|
|
token: localToken
|
|
}
|
|
})
|
|
.then(res => this.tipoPrinters = res.data.tipoPrinters)
|
|
.catch(err => console.log(err));
|
|
},
|
|
// watchRow() {
|
|
// if(JSON.parse(window.localStorage.isAdmin))
|
|
// this.$router.push('./updateEquip')
|
|
// },
|
|
changeView() {
|
|
this.loading = true;
|
|
this.contador = 0;
|
|
this.seleccionado = "Todos";
|
|
this.seleccionadoUbica = "Todos";
|
|
this.seleccionadoUso = "Todos";
|
|
this.seleccionadoProcesador = "Todos";
|
|
this.seleccionadoOS = "Todos";
|
|
this.miNoInventario = "";
|
|
this.tipo=[];
|
|
this.tipoPrinters=[];
|
|
this.Ubica=[];
|
|
this.uso=[];
|
|
this.procesa=[];
|
|
this.os=[];
|
|
if (this.pcView) {
|
|
this.pcView = !this.pcView;
|
|
this.getPrinters();
|
|
this.traetipoImpresora();
|
|
this.traeUso();
|
|
this.traeUbica();
|
|
}
|
|
else{
|
|
this.pcView = !this.pcView;
|
|
this.getComputers();
|
|
this.traetipo();
|
|
this.traeUbica();
|
|
this.traeUso();
|
|
this.traeProcesador();
|
|
this.traeOS();
|
|
}
|
|
this.generaMisDatos();
|
|
},
|
|
admin() {
|
|
return JSON.parse(window.localStorage.isAdmin);
|
|
},
|
|
generaMisDatos(){
|
|
this.datosmios = [];
|
|
if(this.pcView){
|
|
for (let i = 0, j = 0; i < this.respuesta.length; i++){
|
|
if ((this.seleccionado == "Todos" || this.seleccionado == this.respuesta[i].activoFijo)
|
|
&& (this.seleccionadoUbica == this.respuesta[i].ubicacion || this.seleccionadoUbica == 'Todos')
|
|
&& (this.seleccionadoUso == this.respuesta[i].uso || this.seleccionadoUso == 'Todos')
|
|
&& (this.seleccionadoOS == this.respuesta[i].osname || this.seleccionadoOS == 'Todos')
|
|
&& (this.seleccionadoProcesador == this.respuesta[i].procesador || this.seleccionadoProcesador == 'Todos')
|
|
&& ((this.respuesta[i].noInventario.indexOf(this.miNoInventario) != -1) || (this.respuesta[i].noSerie.indexOf(this.miNoInventario) != -1))){
|
|
this.datosmios[j++] = this.respuesta[i];
|
|
}
|
|
}
|
|
} else {
|
|
for (let i = 0, j = 0; i < this.respuesta.length; i++){
|
|
if ((this.seleccionado == "Todos" || this.seleccionado == this.respuesta[i].tipo)
|
|
&& (this.seleccionadoUbica == this.respuesta[i].ubicacion || this.seleccionadoUbica == 'Todos')
|
|
&& (this.seleccionadoUso == this.respuesta[i].uso || this.seleccionadoUso == 'Todos')
|
|
&& ((this.respuesta[i].noInventario.indexOf(this.miNoInventario) != -1) || (this.respuesta[i].noSerie.indexOf(this.miNoInventario) != -1))){
|
|
this.datosmios[j++] = this.respuesta[i];
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onDescarga(datos){
|
|
var miDato;
|
|
const fecha = new Date();
|
|
const anyo = fecha.getFullYear();
|
|
const mes = fecha.getMonth() + 1;
|
|
const dia = fecha.getDate();
|
|
const hora = fecha.getHours();
|
|
const min = fecha.getMinutes();
|
|
const seg = fecha.getSeconds();
|
|
var nomArch = this.seleccionado;
|
|
if (dia > 0 && dia < 10){
|
|
nomArch += "0";
|
|
}
|
|
nomArch += dia;
|
|
if (mes > 0 && mes < 10){
|
|
nomArch += "0";
|
|
}
|
|
nomArch += mes;
|
|
nomArch += anyo;
|
|
if (hora >= 0 && hora < 10){
|
|
nomArch += "0";
|
|
}
|
|
nomArch += hora;
|
|
if (min >= 0 && min < 10){
|
|
nomArch += "0";
|
|
}
|
|
nomArch += min;
|
|
if (seg >= 0 && seg < 10){
|
|
nomArch += "0";
|
|
}
|
|
nomArch += seg;
|
|
if (this.pcView){
|
|
nomArch = "Computadoras" + nomArch;
|
|
miDato = MiXLSX.utils.json_to_sheet([],{ header : this.pcHeads});
|
|
} else {
|
|
miDato = MiXLSX.utils.json_to_sheet([],{header : this.printerHeads}); // https://docs.sheetjs.com
|
|
nomArch = "Impresoras" + nomArch;
|
|
}
|
|
MiXLSX.utils.sheet_add_json(miDato,this.datosmios,{
|
|
skipHeader:true, origin : "A2"});
|
|
const LibroTrabajo = MiXLSX.utils.book_new();
|
|
MiXLSX.utils.book_append_sheet(LibroTrabajo, miDato, this.seleccionado);
|
|
nomArch += ".xlsx";
|
|
MiXLSX.writeFile(LibroTrabajo, nomArch);
|
|
return JSON.parse(localStorage.isAdmin);
|
|
},
|
|
buscaValor(){
|
|
this.seleccionado = document.getElementById("tipo").value;
|
|
this.generaMisDatos();
|
|
},
|
|
buscaUbica(){
|
|
this.seleccionadoUbica = document.getElementById("Ubica").value;
|
|
this.generaMisDatos();
|
|
},
|
|
extraeInventario(){
|
|
this.miNoInventario = document.getElementById("Inventario").value;
|
|
this.generaMisDatos();
|
|
},
|
|
buscaUso(){
|
|
this.seleccionadoUso = document.getElementById("Uso").value;
|
|
this.generaMisDatos();
|
|
},
|
|
buscaProcesador(){
|
|
this.seleccionadoProcesador = document.getElementById("Procesador").value;
|
|
this.generaMisDatos();
|
|
},
|
|
buscaSisOper(){
|
|
this.seleccionadoOS = document.getElementById("SisOper").value;
|
|
this.generaMisDatos();
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.header-f {
|
|
background-color: #bb8800;
|
|
}
|
|
.t-hov:hover {
|
|
cursor: pointer;
|
|
}
|
|
#footer {
|
|
bottom: 0px;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
.separador {
|
|
width: 100%;
|
|
background: #2e5795;
|
|
height: 1rem;
|
|
}
|
|
|
|
.contenedor-footer {
|
|
width: 100%;
|
|
}
|
|
.cont-text-foo {
|
|
font-size: 12px;
|
|
}
|
|
footer {
|
|
background: #1b3d70;
|
|
}
|
|
|
|
#myTableStyle {
|
|
max-height: 350px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.black {
|
|
background-color: black;
|
|
}
|
|
|
|
.red {
|
|
background-color: red;
|
|
}
|
|
</style> |