Creacion de vista pregunta7,1,2,4y5
This commit is contained in:
jls846
@@ -0,0 +1,162 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import "../../styles/layout/pregunta1EP.scss";
|
||||
|
||||
interface EquiposImpresion {
|
||||
inyeccionTinta: string;
|
||||
laserPequenaBN: string;
|
||||
matrizPuntos: string;
|
||||
laserAltoVolumenBN: string;
|
||||
laserPequenaColor: string;
|
||||
multifuncionales: string;
|
||||
laserAltoVolumenColor: string;
|
||||
impresora3D: string;
|
||||
plotter: string;
|
||||
}
|
||||
|
||||
export default function Pregunta1EPPage() {
|
||||
const [equipos, setEquipos] = useState<EquiposImpresion>({
|
||||
inyeccionTinta: "7",
|
||||
laserPequenaBN: "186",
|
||||
matrizPuntos: "",
|
||||
laserAltoVolumenBN: "28",
|
||||
laserPequenaColor: "20",
|
||||
multifuncionales: "108",
|
||||
laserAltoVolumenColor: "18",
|
||||
impresora3D: "2",
|
||||
plotter: "11",
|
||||
});
|
||||
|
||||
// 🔹 Preparado para conectar con API del backend
|
||||
useEffect(() => {
|
||||
// Cuando te den la API, descomenta y edita la URL 👇
|
||||
/*
|
||||
fetch("https://tu-api-backend.com/api/equipos-impresion")
|
||||
.then((res) => res.json())
|
||||
.then((data) => setEquipos(data))
|
||||
.catch((err) => console.error("Error al obtener datos:", err));
|
||||
*/
|
||||
}, []);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setEquipos({
|
||||
...equipos,
|
||||
[e.target.name]: e.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="header">
|
||||
1. Desglose el número de equipos de impresión con que cuenta el área
|
||||
universitaria.
|
||||
</div>
|
||||
|
||||
<div className="grid">
|
||||
{/* Columna 1 */}
|
||||
<div className="item">
|
||||
<label htmlFor="inyeccionTinta">Inyección de tinta</label>
|
||||
<input
|
||||
type="text"
|
||||
id="inyeccionTinta"
|
||||
name="inyeccionTinta"
|
||||
value={equipos.inyeccionTinta}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="laserPequenaBN">Láser pequeña B/N</label>
|
||||
<input
|
||||
type="text"
|
||||
id="laserPequenaBN"
|
||||
name="laserPequenaBN"
|
||||
value={equipos.laserPequenaBN}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="matrizPuntos">Matriz de puntos</label>
|
||||
<input
|
||||
type="text"
|
||||
id="matrizPuntos"
|
||||
name="matrizPuntos"
|
||||
value={equipos.matrizPuntos}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Columna 2 */}
|
||||
<div className="item">
|
||||
<label htmlFor="laserAltoVolumenBN">Láser de alto volumen B/N</label>
|
||||
<input
|
||||
type="text"
|
||||
id="laserAltoVolumenBN"
|
||||
name="laserAltoVolumenBN"
|
||||
value={equipos.laserAltoVolumenBN}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="laserPequenaColor">Láser pequeña Color</label>
|
||||
<input
|
||||
type="text"
|
||||
id="laserPequenaColor"
|
||||
name="laserPequenaColor"
|
||||
value={equipos.laserPequenaColor}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="multifuncionales">Multifuncionales</label>
|
||||
<input
|
||||
type="text"
|
||||
id="multifuncionales"
|
||||
name="multifuncionales"
|
||||
value={equipos.multifuncionales}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Columna 3 */}
|
||||
<div className="item">
|
||||
<label htmlFor="laserAltoVolumenColor">
|
||||
Láser de alto volumen Color
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="laserAltoVolumenColor"
|
||||
name="laserAltoVolumenColor"
|
||||
value={equipos.laserAltoVolumenColor}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="impresora3D">3D</label>
|
||||
<input
|
||||
type="text"
|
||||
id="impresora3D"
|
||||
name="impresora3D"
|
||||
value={equipos.impresora3D}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="plotter">Plotter</label>
|
||||
<input
|
||||
type="text"
|
||||
id="plotter"
|
||||
name="plotter"
|
||||
value={equipos.plotter}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import "../../styles/layout/pregunta2EP.scss";
|
||||
|
||||
interface EquiposPoblacion {
|
||||
alumnos: string;
|
||||
profesores: string;
|
||||
tecnicosAcademicos: string;
|
||||
investigadores: string;
|
||||
administrativos: string;
|
||||
total: string;
|
||||
}
|
||||
|
||||
export default function Pregunta2EPPage() {
|
||||
const [equipos, setEquipos] = useState<EquiposPoblacion>({
|
||||
alumnos: "35",
|
||||
profesores: "43",
|
||||
tecnicosAcademicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "302",
|
||||
total: "380",
|
||||
});
|
||||
|
||||
// 🔹 Preparado para conectarse al backend
|
||||
useEffect(() => {
|
||||
// Cuando tengas la API, descomenta esta parte 👇 y reemplaza la URL:
|
||||
/*
|
||||
fetch("https://tu-api-backend.com/api/equipos-poblacion")
|
||||
.then((res) => res.json())
|
||||
.then((data) => setEquipos(data))
|
||||
.catch((err) => console.error("Error al obtener datos:", err));
|
||||
*/
|
||||
}, []);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setEquipos({
|
||||
...equipos,
|
||||
[name]: value,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="header">
|
||||
<span style={{ color: "#d9534f", fontWeight: "normal" }}>*</span>{" "}
|
||||
<small>(Requerido en el caso de contar con Equipo de impresión)</small>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="item">
|
||||
<label htmlFor="alumnos">Alumnos</label>
|
||||
<input
|
||||
type="text"
|
||||
id="alumnos"
|
||||
name="alumnos"
|
||||
value={equipos.alumnos}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="profesores">
|
||||
Profesores <span className="help-icon">?</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="profesores"
|
||||
name="profesores"
|
||||
value={equipos.profesores}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="tecnicosAcademicos">Técnicos Académicos</label>
|
||||
<input
|
||||
type="text"
|
||||
id="tecnicosAcademicos"
|
||||
name="tecnicosAcademicos"
|
||||
value={equipos.tecnicosAcademicos}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="investigadores">
|
||||
Investigadores <span className="help-icon">?</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="investigadores"
|
||||
name="investigadores"
|
||||
value={equipos.investigadores}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="administrativos">
|
||||
Administrativos <span className="help-icon">?</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="administrativos"
|
||||
name="administrativos"
|
||||
value={equipos.administrativos}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="total">Total</label>
|
||||
<input
|
||||
type="text"
|
||||
id="total"
|
||||
name="total"
|
||||
value={equipos.total}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import "../../styles/layout/pregunta4EP.scss";
|
||||
|
||||
interface EquiposDigitalizacion {
|
||||
digitalizadorCamaPlana: string;
|
||||
digitalizador3d: string;
|
||||
digitalizadorAlimentador: string;
|
||||
digitalizadorGranVolumen: string;
|
||||
}
|
||||
|
||||
export default function Pregunta4EPPage() {
|
||||
const [equipos, setEquipos] = useState<EquiposDigitalizacion>({
|
||||
digitalizadorCamaPlana: "27",
|
||||
digitalizador3d: "",
|
||||
digitalizadorAlimentador: "108",
|
||||
digitalizadorGranVolumen: "1",
|
||||
});
|
||||
|
||||
// 🔹 Preparado para conectar con el backend
|
||||
useEffect(() => {
|
||||
// Cuando tengas la API, descomenta y reemplaza la URL:
|
||||
/*
|
||||
fetch("https://tu-api-backend.com/api/equipos-digitalizacion")
|
||||
.then((res) => res.json())
|
||||
.then((data) => setEquipos(data))
|
||||
.catch((err) => console.error("Error al obtener datos:", err));
|
||||
*/
|
||||
}, []);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setEquipos({
|
||||
...equipos,
|
||||
[name]: value,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="header-bar">
|
||||
Censo de equipos periféricos - Equipo de digitalización
|
||||
</div>
|
||||
|
||||
<div className="grid">
|
||||
<div className="item">
|
||||
<label htmlFor="digitalizadorCamaPlana">
|
||||
Digitalizador de cama plana para oficina
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="digitalizadorCamaPlana"
|
||||
name="digitalizadorCamaPlana"
|
||||
value={equipos.digitalizadorCamaPlana}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="digitalizador3d">3D</label>
|
||||
<input
|
||||
type="text"
|
||||
id="digitalizador3d"
|
||||
name="digitalizador3d"
|
||||
value={equipos.digitalizador3d}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="digitalizadorAlimentador">
|
||||
Digitalizador con alimentador de hojas para oficina
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="digitalizadorAlimentador"
|
||||
name="digitalizadorAlimentador"
|
||||
value={equipos.digitalizadorAlimentador}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="digitalizadorGranVolumen">
|
||||
Digitalizador de gran volumen
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="digitalizadorGranVolumen"
|
||||
name="digitalizadorGranVolumen"
|
||||
value={equipos.digitalizadorGranVolumen}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import "../../styles/layout/pregunta5EP.scss";
|
||||
|
||||
export default function Pregunta5EP() {
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="header">
|
||||
Indique el número de equipos de digitalización de acuerdo con la
|
||||
población universitaria al que se destina su uso primordialmente.
|
||||
<span>*</span>
|
||||
<small> (Requerido en el caso de contar con Equipo de digitalización)</small>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="item">
|
||||
<label htmlFor="alumnos-digital">Alumnos</label>
|
||||
<input type="text" id="alumnos-digital" defaultValue="11" />
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="profesores-digital">
|
||||
Profesores <span className="help-icon">?</span>
|
||||
</label>
|
||||
<input type="text" id="profesores-digital" defaultValue="24" />
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="tecnicos-academicos-digital">
|
||||
Técnicos Académicos
|
||||
</label>
|
||||
<input type="text" id="tecnicos-academicos-digital" defaultValue="" />
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="investigadores-digital">
|
||||
Investigadores <span className="help-icon">?</span>
|
||||
</label>
|
||||
<input type="text" id="investigadores-digital" defaultValue="" />
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="administrativos-digital">
|
||||
Administrativos <span className="help-icon">?</span>
|
||||
</label>
|
||||
<input type="text" id="administrativos-digital" defaultValue="101" />
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="total-digital">Total</label>
|
||||
<input type="text" id="total-digital" defaultValue="136" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 2% auto 10% auto;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.header {
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #f0f5ff;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Ajuste para pantallas pequeñas */
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 2% 10% 20% 10%;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.header {
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #f0f5ff;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Estilos para los íconos de ayuda */
|
||||
.help-icon {
|
||||
color: #007bff;
|
||||
font-size: 12px;
|
||||
cursor: help;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
/* Responsivo */
|
||||
@media (max-width: 768px) {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 2% auto 20% auto;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.header-bar {
|
||||
background-color: #1a3d66;
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #f0f5ff;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Responsivo */
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 2% auto 20% auto;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.header {
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 14px;
|
||||
|
||||
small {
|
||||
font-weight: normal;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #d9534f;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #f0f5ff;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.help-icon {
|
||||
color: #007bff;
|
||||
font-size: 12px;
|
||||
cursor: help;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user