Merge branch 'Carlos' of repositorio.acatlan.unam.mx:IO/front-Censo into Lino
This commit is contained in:
Generated
+145
-996
File diff suppressed because it is too large
Load Diff
+7
-3
@@ -15,16 +15,20 @@
|
||||
"axios": "^1.13.2",
|
||||
"js-cookie": "^3.0.5",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"leaflet": "^1.9.4",
|
||||
"leaflet.heat": "^0.2.0",
|
||||
"next": "^16.0.7",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0",
|
||||
"react-hot-toast": "^2.6.0",
|
||||
"react-dom": "19.2.0", "react-hot-toast": "^2.6.0",
|
||||
|
||||
"react-leaflet": "^5.0.0",
|
||||
"react-select": "^5.10.2",
|
||||
"recharts": "^3.8.0"
|
||||
},
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@types/js-cookie": "^3.0.6",
|
||||
"@types/leaflet": "^1.9.21",
|
||||
"@types/node": "^24",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 378 KiB |
@@ -1,13 +1,15 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Pregunta7 from "@/components/Equipo_Computo/Pregunta7";
|
||||
|
||||
import Pregunta1EP from "@/components/Perifericos/Pregunta1EP";
|
||||
import Pregunta2EP from "@/components/Perifericos/Pregunta2EP";
|
||||
import Pregunta4EP from "@/components/Perifericos/Pregunta4EP";
|
||||
import Pregunta5EP from "@/components/Perifericos/Pregunta5EP";
|
||||
import "../../styles/layout/reporte.scss";
|
||||
import DownloadReporteXLSX from "@/components/Dowload/Reporte";
|
||||
import Pregunta7 from "@/components/Equipo_Computo/Pregunta7";
|
||||
|
||||
|
||||
type PreguntaKey = "pregunta1" | "pregunta4" | "pregunta7";
|
||||
|
||||
|
||||
@@ -0,0 +1,141 @@
|
||||
"use client";
|
||||
|
||||
import { MapContainer, ImageOverlay, useMap } from "react-leaflet";
|
||||
import L from "leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import "leaflet.heat";
|
||||
import { useEffect } from "react";
|
||||
|
||||
// Ajustar vista automáticamente
|
||||
function AjustarVista({ bounds }) {
|
||||
const map = useMap();
|
||||
|
||||
useEffect(() => {
|
||||
map.fitBounds(bounds);
|
||||
}, [map, bounds]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function HeatLayer() {
|
||||
const map = useMap();
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
// A 4768x3368
|
||||
const edificios = {
|
||||
A1: [[1400, 3060], [1470, 3060], [1470, 3360], [1400, 3360]],
|
||||
A2: [[1570, 3130], [1570, 3190], [1850, 3190], [1850, 3130]],
|
||||
A3: [[1640, 2650], [1705, 2650], [1705, 2950], [1640, 2950]],
|
||||
A4: [[1268, 2765], [1268, 2830], [1540, 2830], [1540, 2765]],
|
||||
A5: [[995, 2405], [1295, 2405], [1295, 2470], [995, 2470]],
|
||||
A6: [[1390, 2385], [1450, 2385], [1450, 2655], [1390, 2655]],
|
||||
A7: [[1234, 2014], [1296, 2014], [1296, 2317], [1234, 2317]],
|
||||
A8: [[1390, 2055], [1700, 2055], [1700, 2118], [1390, 2118]],
|
||||
A9: [[1730, 1550], [1980, 1550], [1980, 1640], [1730, 1640]],
|
||||
A10: [[1580, 1660], [1580, 1960], [1660, 1960], [1580, 1660]],
|
||||
A11: [[1525, 1370], [1825, 1370], [1825, 1440], [1525, 1440]],
|
||||
A12: [[1750, 1140], [1750, 1520], [1910, 1520], [1910, 1140]],
|
||||
A13: [[1380, 680], [1380, 1020], [1480, 1020], [1480, 680]],
|
||||
A14: [[1320, 480], [1680, 480], [1680, 580], [1320, 580]],
|
||||
A15: [[2027, 2580], [2087, 2580], [2087, 2900], [2027, 2900]],
|
||||
CEDTEC: [[900, 2900], [1100, 2900], [1100, 3200], [900, 3200]],
|
||||
BIBLIOTECA: [[1600, 2200], [1900, 2200], [1900, 2500], [1600, 2500]],
|
||||
POSGRADO: [[1100, 1525], [860, 1525], [860, 1325], [1100, 1325]]
|
||||
|
||||
};
|
||||
|
||||
|
||||
const puntos = [];
|
||||
|
||||
Object.entries(edificios).forEach(([nombre, poligono]) => {
|
||||
for (let i = 0; i < 15; i++) {
|
||||
|
||||
const x = poligono[0][0] + Math.random() * (poligono[1][0] - poligono[0][0]);
|
||||
const y = poligono[0][1] + Math.random() * (poligono[2][1] - poligono[0][1]);
|
||||
|
||||
const intensidad = Math.random();
|
||||
|
||||
puntos.push([x, y, intensidad]);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const heat = L.heatLayer(puntos, {
|
||||
radius: 35,
|
||||
blur: 25,
|
||||
maxZoom: 2,
|
||||
gradient: {
|
||||
0.2: "#00f",
|
||||
0.4: "#0ff",
|
||||
0.6: "#0f0",
|
||||
0.8: "#ff0",
|
||||
1.0: "#f00"
|
||||
}
|
||||
});
|
||||
|
||||
heat.addTo(map);
|
||||
|
||||
|
||||
Object.entries(edificios).forEach(([nombre, coords]) => {
|
||||
L.polygon(coords, {
|
||||
color: "#77ee9f",
|
||||
weight: 2,
|
||||
fillOpacity: 0.25
|
||||
})
|
||||
.bindPopup(`🏢 ${nombre}`)
|
||||
.addTo(map);
|
||||
});
|
||||
|
||||
// DEBUG PRO (CLICK PARA COORDENADAS EXACTAS)
|
||||
map.on("click", function (e) {
|
||||
console.log(" Coordenadas exactas:", e.latlng);
|
||||
});
|
||||
|
||||
return () => {
|
||||
map.removeLayer(heat);
|
||||
};
|
||||
|
||||
}, [map]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export default function MapaCalor() {
|
||||
|
||||
const bounds = [
|
||||
[0, 0],
|
||||
[3368, 4768]
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
<div style={{
|
||||
width: "100%",
|
||||
height: "650px",
|
||||
marginTop: "40px",
|
||||
borderRadius: "12px",
|
||||
overflow: "hidden",
|
||||
boxShadow: "0 6px 25px rgba(0,0,0,0.3)"
|
||||
}}>
|
||||
|
||||
<MapContainer
|
||||
crs={L.CRS.Simple}
|
||||
minZoom={-2}
|
||||
style={{ height: "100%", width: "100%" }}
|
||||
>
|
||||
|
||||
<ImageOverlay
|
||||
url="/plano.png"
|
||||
bounds={bounds}
|
||||
/>
|
||||
|
||||
<AjustarVista bounds={bounds} />
|
||||
|
||||
<HeatLayer />
|
||||
|
||||
</MapContainer>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,12 @@
|
||||
"use client";
|
||||
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Cookies from "js-cookie";
|
||||
import axios from "axios";
|
||||
import "./pregunta7.css";
|
||||
import ToggleButton from "../Toggle/ToggleButton";
|
||||
import MapaCalor from "./MapaCalor";
|
||||
|
||||
type AntiguedadItem = {
|
||||
antiguedad: string | null;
|
||||
@@ -166,6 +168,9 @@ export default function Pregunta7() {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<MapaCalor />
|
||||
</div>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
"use client";
|
||||
|
||||
import { MapContainer, ImageOverlay, useMap } from "react-leaflet";
|
||||
import L from "leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import "leaflet.heat";
|
||||
import { useEffect } from "react";
|
||||
|
||||
function HeatLayer() {
|
||||
const map = useMap();
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const puntos = [
|
||||
[200,300,3.5],
|
||||
[210,310,4.0],
|
||||
[220,320,5.2],
|
||||
[230,330,6.5],
|
||||
[240,340,7.0],
|
||||
[250,350,8.0],
|
||||
[260,360,6.8],
|
||||
[270,370,7.5],
|
||||
|
||||
[400,500,4.5],
|
||||
[410,510,6.0],
|
||||
[420,520,8.0],
|
||||
[430,530,7.2],
|
||||
[440,540,6.5],
|
||||
[450,550,5.8],
|
||||
[460,560,7.1],
|
||||
|
||||
[600,300,4.2],
|
||||
[610,310,5.4],
|
||||
[620,320,6.6],
|
||||
[630,330,7.8],
|
||||
[640,340,8.5],
|
||||
[650,350,7.2],
|
||||
[660,360,6.1],
|
||||
[670,370,5.3],
|
||||
|
||||
[700,200,6.5],
|
||||
[720,220,7.8],
|
||||
[740,240,8.9],
|
||||
[760,260,9.5],
|
||||
[780,280,8.7],
|
||||
[800,300,7.6],
|
||||
[820,320,6.4]
|
||||
];
|
||||
|
||||
const heat = L.heatLayer(puntos, {
|
||||
radius: 50,
|
||||
blur: 30,
|
||||
maxZoom: 2,
|
||||
|
||||
gradient: {
|
||||
0.2: "blue",
|
||||
0.4: "cyan",
|
||||
0.6: "yellow",
|
||||
0.8: "orange",
|
||||
1.0: "red"
|
||||
}
|
||||
});
|
||||
|
||||
heat.addTo(map);
|
||||
|
||||
return () => {
|
||||
map.removeLayer(heat);
|
||||
};
|
||||
|
||||
}, [map]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export default function MapaFES({ cerrar }) {
|
||||
|
||||
const bounds = [
|
||||
[0,0],
|
||||
[1000,1000]
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
<div style={{
|
||||
position:"fixed",
|
||||
top:0,
|
||||
left:0,
|
||||
width:"100%",
|
||||
height:"100%",
|
||||
background:"#000000cc",
|
||||
zIndex:999
|
||||
}}>
|
||||
|
||||
<button
|
||||
onClick={cerrar}
|
||||
style={{
|
||||
position:"absolute",
|
||||
top:20,
|
||||
right:20,
|
||||
zIndex:1000,
|
||||
padding:"20px 40px",
|
||||
background:"red",
|
||||
color:"white",
|
||||
border:"none",
|
||||
cursor:"pointer"
|
||||
}}
|
||||
>
|
||||
Cerrar
|
||||
</button>
|
||||
|
||||
<MapContainer
|
||||
crs={L.CRS.Simple}
|
||||
bounds={bounds}
|
||||
style={{ height:"100%", width:"100%" }}
|
||||
>
|
||||
|
||||
<ImageOverlay
|
||||
url="/plano_fes_acatlan.png"
|
||||
bounds={bounds}
|
||||
/>
|
||||
|
||||
<HeatLayer/>
|
||||
|
||||
</MapContainer>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+11
-3
@@ -3,8 +3,8 @@ import type { NextRequest } from "next/server";
|
||||
import { jwtDecode } from "jwt-decode";
|
||||
|
||||
const permisos: Record<number, string[]> = {
|
||||
1: ["/crearCuenta", "/equipoComputo", "/perifericos","/escaner", "/agregarEquipo", "/editar","/historial","/ranking","/cambiarPass","/reportesGraficas"],
|
||||
2: ["/escaner", "/agregarEquipo", "/editar","/historial","/ranking","/cambiarPass"],
|
||||
1: ["/crearCuenta", "/equipoComputo", "/perifericos", "/escaner", "/hotmap", "/agregarEquipo", "/editar", "/historial", "/ranking", "/cambiarPass", "/reportesGraficas"],
|
||||
2: ["/escaner", "/agregarEquipo", "/editar", "/historial", "/ranking", "/cambiarPass"],
|
||||
};
|
||||
|
||||
export function proxy(request: NextRequest) {
|
||||
@@ -35,7 +35,15 @@ export function proxy(request: NextRequest) {
|
||||
|
||||
export const config = {
|
||||
matcher: [
|
||||
|
||||
"/escaner",
|
||||
"/agregarEquipo",
|
||||
"/editar",
|
||||
"/crearCuenta",
|
||||
"/equipoComputo",
|
||||
"/perifericos",
|
||||
"/ranking",
|
||||
"/historial",
|
||||
"/cambiarPass"
|
||||
],
|
||||
};
|
||||
//IO
|
||||
|
||||
Reference in New Issue
Block a user