cambios en vista EquiposComponentes
This commit is contained in:
jls846
@@ -3,7 +3,7 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
import Cookies from "js-cookie";
|
||||
import "./pregunta1.1.css";
|
||||
import style from "./pregunta1_1.module.scss";
|
||||
|
||||
type RawEntry = {
|
||||
uso: string;
|
||||
@@ -11,7 +11,6 @@ type RawEntry = {
|
||||
total: string;
|
||||
};
|
||||
|
||||
// Índices para columnas
|
||||
const USO_INDEX: Record<string, number> = {
|
||||
ALUMNO: 0,
|
||||
PROFESOR: 1,
|
||||
@@ -20,7 +19,6 @@ const USO_INDEX: Record<string, number> = {
|
||||
ADMINISTRATIVO: 4,
|
||||
};
|
||||
|
||||
// Mapeo categoría → tabla + sistema operativo
|
||||
const CATEGORIA_MAP: Record<string, { tabla: number; so: string }> = {
|
||||
"ESCRITORIO PC": { tabla: 0, so: "Windows" },
|
||||
"ESCRITORIO MAC OS": { tabla: 0, so: "Mac OS" },
|
||||
@@ -28,7 +26,7 @@ const CATEGORIA_MAP: Record<string, { tabla: number; so: string }> = {
|
||||
"PORTÁTILES WINDOWS": { tabla: 2, so: "Windows" },
|
||||
"PORTÁTILES MAC OS": { tabla: 2, so: "Mac OS" },
|
||||
"TABLETA iPAD OS": { tabla: 1, so: "Mac OS" },
|
||||
"SERVIDOR": { tabla: 3, so: "Linux" },
|
||||
SERVIDOR: { tabla: 3, so: "Linux" },
|
||||
};
|
||||
|
||||
const TITULOS_TABLAS = [
|
||||
@@ -41,7 +39,6 @@ const TITULOS_TABLAS = [
|
||||
const SISTEMAS_OPERATIVOS = ["Windows", "Linux", "Mac OS"];
|
||||
|
||||
export default function Pregunta1() {
|
||||
// Estado: 4 tablas × 3 SO × 5 columnas
|
||||
const [tablas, setTablas] = useState<number[][][]>(
|
||||
Array.from({ length: 4 }, () =>
|
||||
Array.from({ length: 3 }, () => Array(5).fill(0))
|
||||
@@ -61,9 +58,7 @@ export default function Pregunta1() {
|
||||
axios
|
||||
.get<RawEntry[]>(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/equipos/reporte/tipoEquipos_tipoUso`,
|
||||
{
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
}
|
||||
{ headers: { Authorization: `Bearer ${token}` } }
|
||||
)
|
||||
.then((res) => {
|
||||
const nuevaTablas = Array.from({ length: 4 }, () =>
|
||||
@@ -88,24 +83,10 @@ export default function Pregunta1() {
|
||||
|
||||
setTablas(nuevaTablas);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Error al cargar datos", err);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
.catch((err) => console.error("Error al cargar datos", err))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="contenedor-pregunta">
|
||||
<div className="contenedor-censo">Censo de equipos de cómputo</div>
|
||||
<div className="pregunta-cuadro">Cargando datos...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Renderizar una tabla
|
||||
const renderTabla = (tablaIndex: number) => {
|
||||
const datosSO = tablas[tablaIndex];
|
||||
|
||||
@@ -119,19 +100,22 @@ export default function Pregunta1() {
|
||||
const totalGeneral = totalesColumnas.reduce((a, b) => a + b, 0);
|
||||
|
||||
return (
|
||||
<div className="tabla-contenedor" key={tablaIndex}>
|
||||
<table className="tabla">
|
||||
<div className={style["tabla-contenedor"]} key={tablaIndex}>
|
||||
<table className={style.tabla}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="azul-marino">{TITULOS_TABLAS[tablaIndex]}</th>
|
||||
<th className="rosa-fuerte">Alumnos</th>
|
||||
<th className="rosa-fuerte">Profesores</th>
|
||||
<th className="rosa-fuerte">Técnicos Académicos</th>
|
||||
<th className="rosa-fuerte">Investigadores</th>
|
||||
<th className="rosa-fuerte">Administrativos</th>
|
||||
<th className="azul-marino">Total</th>
|
||||
<th className={style["azul-marino"]}>
|
||||
{TITULOS_TABLAS[tablaIndex]}
|
||||
</th>
|
||||
<th className={style["rosa-fuerte"]}>Alumnos</th>
|
||||
<th className={style["rosa-fuerte"]}>Profesores</th>
|
||||
<th className={style["rosa-fuerte"]}>Técnicos Académicos</th>
|
||||
<th className={style["rosa-fuerte"]}>Investigadores</th>
|
||||
<th className={style["rosa-fuerte"]}>Administrativos</th>
|
||||
<th className={style["azul-marino"]}>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{SISTEMAS_OPERATIVOS.map((so, soIndex) => {
|
||||
const valores = datosSO[soIndex];
|
||||
@@ -142,22 +126,22 @@ export default function Pregunta1() {
|
||||
<td>{so}</td>
|
||||
{valores.map((valor, colIndex) => (
|
||||
<td key={colIndex}>
|
||||
<div className="input-contenedor">
|
||||
<div className={style["input-contenedor"]}>
|
||||
<input type="number" value={valor} readOnly />
|
||||
</div>
|
||||
</td>
|
||||
))}
|
||||
<td>{totalFila}</td>
|
||||
<td className={style["total-celda"]}>{totalFila}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
|
||||
<tr className="fila-total">
|
||||
<td className="negrita">Total</td>
|
||||
<tr className={style["fila-total"]}>
|
||||
<td>Total</td>
|
||||
{totalesColumnas.map((t, i) => (
|
||||
<td key={i}>{t}</td>
|
||||
))}
|
||||
<td className="negrita">{totalGeneral}</td>
|
||||
<td className={style["total-celda"]}>{totalGeneral}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -165,21 +149,29 @@ export default function Pregunta1() {
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="contenedor-pregunta">
|
||||
<div className="contenedor-censo">Censo de equipos de cómputo</div>
|
||||
if (loading) {
|
||||
return (
|
||||
<div className={style["contenedor-pregunta"]}>
|
||||
<div className={style["contenedor-censo"]}>Censo de equipos</div>
|
||||
<div className={style["pregunta-cuadro"]}>Cargando datos...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<div className="pregunta-cuadro">
|
||||
Número de equipos de cómputo
|
||||
por cada categoría enlistada, de acuerdo con el perfil de usuario.
|
||||
return (
|
||||
<div className={style["contenedor-pregunta"]}>
|
||||
<div className={style["contenedor-censo"]}>Censo de equipos de cómputo</div>
|
||||
|
||||
<div className={style["pregunta-cuadro"]}>
|
||||
Número de equipos de cómputo por cada categoría y perfil de usuario.
|
||||
</div>
|
||||
|
||||
<div className="contenedor-tablas">
|
||||
<div className={style["contenedor-tablas"]}>
|
||||
{renderTabla(0)}
|
||||
{renderTabla(1)}
|
||||
</div>
|
||||
|
||||
<div className="contenedor-tablas">
|
||||
<div className={style["contenedor-tablas"]}>
|
||||
{renderTabla(2)}
|
||||
{renderTabla(3)}
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
import styles from "./pregunta2.module.scss";
|
||||
import Cookies from "js-cookie";
|
||||
import style from "styled-jsx/style";
|
||||
type OsEntry = {
|
||||
os: string;
|
||||
count: number;
|
||||
@@ -79,11 +80,13 @@ export default function Pregunta2() {
|
||||
const currentData = data[activeTab];
|
||||
|
||||
return (
|
||||
<div className={styles.scanView_P1}>
|
||||
<div className={styles.container_P1}>
|
||||
<div className="contenedor-censo">
|
||||
Censo de equipos — Sistemas Operativos
|
||||
</div>
|
||||
<div className={styles.container_P1}>
|
||||
<div className={styles["contenedor-censo_p1"]}>Censo de equipos de cómputo - Sitema Operativo</div>
|
||||
|
||||
<div className={styles["pregunta-cuadro_p1"]}>
|
||||
Número de equipos de cómputo por cada categoría y perfil de usuario.
|
||||
</div>
|
||||
<div className={styles.scanView_P1}>
|
||||
|
||||
<div className={styles["main-content_P1"]}>
|
||||
{/* Tabs */}
|
||||
|
||||
@@ -140,13 +140,13 @@ export default function Pregunta3_2() {
|
||||
const currentData = data[activeTab];
|
||||
|
||||
return (
|
||||
<div className={styles.scanView_P3}>
|
||||
<div className={styles.container_P3}>
|
||||
<div className={styles.header_P3}>
|
||||
<p className={styles.texto}>
|
||||
Cantidad de población beneficiada por plataforma y tipo de procesador:
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.container_P3}>
|
||||
<div className={styles["contenedor-censo_P3"]}>Censo de equipos de cómputo - Plataforma y tipo procesador</div>
|
||||
|
||||
<div className={styles["pregunta-cuadro_P3"]}>
|
||||
Cantidad de población beneficiada por plataforma y tipo de procesador.
|
||||
</div>
|
||||
<div className={styles.scanView_P3}>
|
||||
|
||||
<div className={styles.mainContent_P3}>
|
||||
{/* Pestañas verticales */}
|
||||
|
||||
@@ -1,144 +0,0 @@
|
||||
|
||||
.contenedor-censo{
|
||||
background-color: #003e79;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
font-size: 20px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
|
||||
.pregunta-cuadro {
|
||||
background-color: #f5f5f5;
|
||||
border-left: 6px solid #003e79;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
|
||||
.tabla-contenedor {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
overflow-x: auto;
|
||||
min-width: 700px;
|
||||
}
|
||||
|
||||
/* Tabla */
|
||||
.tabla {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: center;
|
||||
color: black;
|
||||
width: 100%; /* ocupa todo el ancho del contenedor */
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.tabla th,
|
||||
.tabla td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 12px;
|
||||
|
||||
}
|
||||
|
||||
.tabla th {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.tabla td {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Colores personalizados */
|
||||
.azul-marino {
|
||||
background-color: #003e79;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.rosa-fuerte {
|
||||
background-color: #dc1557;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Contenedor input */
|
||||
.input-contenedor {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.input-contenedor input {
|
||||
width: 100%;
|
||||
padding: 6px 25px 6px 6px;
|
||||
border: 2px solid #003e79;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
background-color: rgb(232, 226, 226);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.input-contenedor input::-webkit-inner-spin-button,
|
||||
.input-contenedor input::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Focus del input */
|
||||
.input-contenedor input:focus {
|
||||
border-color: #001f3f;
|
||||
box-shadow: 0 0 6px rgba(0, 47, 95, 0.3);
|
||||
}
|
||||
|
||||
/* Placeholder gris claro */
|
||||
.input-contenedor input::placeholder {
|
||||
color: #bbb;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.input-contenedor .porcentaje {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
color: #555;
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
font-size: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Celda del total */
|
||||
.total-celda {
|
||||
font-weight: bold;
|
||||
color: #003e79;
|
||||
background-color: #eef2f6;
|
||||
}
|
||||
|
||||
/* Total > 100% */
|
||||
.total-error {
|
||||
background-color: #ffcccc;
|
||||
color: #a80000;
|
||||
}
|
||||
|
||||
.contenedor-tablas {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tabla-contenedor {
|
||||
flex: 1;
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
.contenedor-censo {
|
||||
color: #fff;
|
||||
background-color: #003e79;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.pregunta-cuadro {
|
||||
background-color: #fff;
|
||||
border-left: 6px solid #003e79;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 25px;
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tabla-contenedor {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
overflow-x: auto;
|
||||
min-width: 700px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tabla {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: center;
|
||||
color: black;
|
||||
table-layout: fixed;
|
||||
|
||||
th, td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
th {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Colores personalizados */
|
||||
.azul-marino {
|
||||
background-color: #003e79;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.rosa-fuerte {
|
||||
background-color: #dc1557;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Contenedor input */
|
||||
.input-contenedor {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 6px 25px 6px 6px;
|
||||
border: 2px solid #003e79;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
background-color: rgb(232, 226, 226);
|
||||
box-sizing: border-box;
|
||||
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #001f3f;
|
||||
box-shadow: 0 0 6px rgba(0, 47, 95, 0.3);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #bbb;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.porcentaje {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
color: #555;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
pointer-events: none;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Celdas especiales */
|
||||
.total-celda {
|
||||
font-weight: bold;
|
||||
color: #003e79;
|
||||
background-color: #eef2f6;
|
||||
}
|
||||
|
||||
.total-error {
|
||||
background-color: #ffcccc;
|
||||
color: #a80000;
|
||||
}
|
||||
|
||||
/* Contenedor de tablas */
|
||||
.contenedor-tablas {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@@ -3,9 +3,29 @@
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.scanView_P1 {
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
.contenedor-censo_p1 {
|
||||
color: #fff;
|
||||
background-color: #003e79;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.pregunta-cuadro_p1 {
|
||||
background-color: #fff;
|
||||
border-left: 6px solid #003e79;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
.scanView_P1 {
|
||||
padding: 20px;
|
||||
@@ -36,7 +56,6 @@
|
||||
|
||||
.main-content_P1 {
|
||||
display: flex;
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.tabs_P1 {
|
||||
@@ -110,6 +129,7 @@
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,26 @@
|
||||
.contenedor-censo_P3 {
|
||||
color: #fff;
|
||||
background-color: #003e79;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.pregunta-cuadro_P3 {
|
||||
background-color: #fff;
|
||||
border-left: 6px solid #003e79;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.scanView_P3 {
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
|
||||
.container_P3 {
|
||||
width: 100%;
|
||||
@@ -15,30 +33,7 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header_P3 {
|
||||
padding: 16px 20px;
|
||||
background: #f7f7f7;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
text-align: center;
|
||||
|
||||
.titulo {
|
||||
margin: 0 0 8px;
|
||||
font-size: 20px;
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
.texto {
|
||||
margin: 0 0 6px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.subtexto {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mainContent_P3 {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user