CIDWA/front-Censo
13
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

se agregaron vistas de graficas

Browse Source
This commit is contained in:
Axel Rangel Blancas
2026-03-25 16:47:19 -06:00
parent 13cdfce656
commit 6fcd5592e4
3 changed files with 47 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/reporte_graficas_perifericos/reporte.tsx
-124
View File
@@ -6,12 +6,9 @@ import styles from "./Reporte.module.css"
import axios from "axios"
import Antiguedad from "./Graficas/Antiguedad"
import Procesador from "./Graficas/Procesador"
import SistemaOperativo from "./Graficas/SistemaOperativo"
import Uso from "./Graficas/Uso"
import Cookies from "js-cookie";
import TableAntiguedad from "./Tablas/Antiguedad"
const api_url = process.env.NEXT_PUBLIC_API_URL;
type AdscripcionOption = {
@@ -24,16 +21,6 @@ type UsoOption = {
tipo_uso: string
}
type SoOption = {
id_sistema_operativo: string
sistema_operativo: string
}
type ProcesadorOption = {
id_procesador: string
procesador: string
}
type AntiguedadOption = {
antiguedad: string
}
@@ -43,11 +30,6 @@ export default function ReportePerifericos() {
const [adscripciones, setAdscripciones] = useState<AdscripcionOption[]>([])
const [adscripcionesSeleccionadas, setAdscripcionesSeleccionadas] = useState<AdscripcionOption[]>([])
const [procesadores, setProcesadores] = useState<ProcesadorOption[]>([])
const [procesadorSeleccionado, setProcesadorSeleccionado] = useState<ProcesadorOption[]>([])
const [sistemasOperativos, setSistemasOperativos] = useState<SoOption[]>([])
const [soSeleccionado, setSoSeleccionado] = useState<SoOption[]>([])
const [usos, setUsos] = useState<UsoOption[]>([{ id_uso: "0", tipo_uso: "Todos" }])
const [usoSeleccionado, setUsoSeleccionado] = useState<UsoOption[]>([])
@@ -80,20 +62,10 @@ export default function ReportePerifericos() {
...adscripcionRes.data
])
setProcesadores([
{ id_procesador: "0", procesador: "Todos" },
...procesadorRes.data
])
setUsos([
{ id_uso: "0", tipo_uso: "Todos" },
...usoRes.data
])
setSistemasOperativos([
{ id_sistema_operativo: "0", sistema_operativo: "Todos" },
...soRes.data
])
}
cargarDatos()
@@ -129,16 +101,12 @@ export default function ReportePerifericos() {
const filtrosTable = {
adscripciones: adscripcionesSeleccionadas.map(a => String(a.id_adscripcion)),
procesadores: procesadorSeleccionado.map(p => String(p.id_procesador)),
sistemas: soSeleccionado.map(s => String(s.id_sistema_operativo)),
usos: usoSeleccionado.map(u => String(u.id_uso)),
antiguedad: antiguedadSeleccionada.map(u => String(u.antiguedad))
}
const filtros = {
adscripciones: limpiar(adscripcionesSeleccionadas.map(a => String(a.id_adscripcion))),
procesadores: limpiar(procesadorSeleccionado.map(p => String(p.id_procesador))),
sistemas: limpiar(soSeleccionado.map(s => String(s.id_sistema_operativo))),
usos: limpiar(usoSeleccionado.map(u => String(u.id_uso))),
antiguedad: limpiar(antiguedadSeleccionada.map(a => String(a.antiguedad)))
}
@@ -189,88 +157,6 @@ export default function ReportePerifericos() {
</div>
{/* PROCESADOR */}
<div className={styles.containerSelection}>
<label className={styles.adscripcion}>Procesador</label>
<Select
options={procesadores}
getOptionLabel={(o) => o.procesador}
getOptionValue={(o) => o.id_procesador}
onChange={(o) =>
agregar(o, procesadorSeleccionado, setProcesadorSeleccionado, "id_procesador")
}
/>
<div className={styles.lista}>
{procesadorSeleccionado.map((p) => (
<div key={p.id_procesador} className={styles.chip}>
<span>{p.procesador}</span>
<button
className={styles.remove}
onClick={() =>
eliminar(p.id_procesador, procesadorSeleccionado, setProcesadorSeleccionado, "id_procesador")
}
>
✕
</button>
</div>
))}
</div>
</div>
{/* SISTEMA OPERATIVO */}
<div className={styles.containerSelection}>
<label className={styles.adscripcion}>Sistema Operativo</label>
<Select
options={sistemasOperativos}
getOptionLabel={(o) => o.sistema_operativo}
getOptionValue={(o) => o.id_sistema_operativo}
onChange={(o) =>
agregar(o, soSeleccionado, setSoSeleccionado, "id_sistema_operativo")
}
/>
<div className={styles.lista}>
{soSeleccionado.map((s) => (
<div key={s.id_sistema_operativo} className={styles.chip}>
<span>{s.sistema_operativo}</span>
<button
className={styles.remove}
onClick={() =>
eliminar(s.id_sistema_operativo, soSeleccionado, setSoSeleccionado, "id_sistema_operativo")
}
>
✕
</button>
</div>
))}
</div>
</div>
{/* USO */}
<div className={styles.containerSelection}>
@@ -373,16 +259,6 @@ export default function ReportePerifericos() {
filtros={filtros}
/>
<Procesador
filtros={filtros}
/>
<SistemaOperativo
filtros={filtros}
/>
<TableAntiguedad filtros={filtros} count={true} />
<TableAntiguedad filtros={filtrosTable} count={false} />
</section>