Editor de Planos de Planta
Editor visual de planos de planta para definir zonas y slots de almacén — dibujo de polígonos, asignación de zonas, configuración de restricciones y superposiciones de ocupación en tiempo real.
Última actualización: 2025-02-18
Editor de Planos de Planta
El editor de planos de planta proporciona una interfaz visual para definir diseños de almacén. Suba un plano, dibuje límites poligonales para slots, asigne zonas y vea superposiciones de ocupación en tiempo real.
Plano de planta con 24 slots poligonales en 3 zonas — haga clic en cualquier slot para inspeccionar ocupación y metadatos.
Cómo Funciona
Características del Editor
| Característica | Descripción |
|---|---|
| Carga de imagen | Soporte para planos PNG, JPG, SVG hasta 20MB |
| Dibujo de polígonos | Clic para colocar vértices, cerrar para completar |
| Coloración por zona | Codificación automática de colores por asignación de zona |
| Editor de restricciones | Peso máximo, altura máxima, tipos de activos permitidos por slot |
| Superposición de ocupación | Verde (vacío), rojo (ocupado), azul (verificado) |
| Ajuste a cuadrícula | Alineación opcional a cuadrícula para colocación precisa |
| Deshacer/rehacer | Historial completo de acciones de edición |
| Multi-piso | Soporte para almacenes de múltiples pisos |
Panel de Propiedades de Slot
<Card className="w-72"> <CardHeader className="pb-2"> <CardTitle className="text-sm">Propiedades del Slot</CardTitle> <CardDescription>A-01-03</CardDescription> </CardHeader> <CardContent className="space-y-3"> <div className="space-y-2"> <div className="flex justify-between text-xs"> <span className="text-muted-foreground">Zona</span> <Badge className="bg-blue-500 text-white text-[10px]">Zona A — Almacenamiento</Badge> </div> <div className="flex justify-between text-xs"> <span className="text-muted-foreground">Estado</span> <Badge variant="outline">Ocupado</Badge> </div> <div className="flex justify-between text-xs"> <span className="text-muted-foreground">Activo</span> <span className="font-mono text-xs">PLT-2024-00042</span> </div> </div> <div className="border-t pt-2 space-y-1.5"> <div className="text-xs font-medium">Restricciones</div> <div className="flex justify-between text-xs"> <span className="text-muted-foreground">Peso máximo</span> <span>5,000 kg</span> </div> <div className="flex justify-between text-xs"> <span className="text-muted-foreground">Altura máxima</span> <span>4.0 m</span> </div> <div className="flex justify-between text-xs"> <span className="text-muted-foreground">Tipos permitidos</span> <span>Pallet, Caja</span> </div> </div> <div className="flex gap-1 pt-1"> <Button size="sm" variant="outline" className="flex-1 text-xs h-7">Editar</Button> <Button size="sm" variant="outline" className="flex-1 text-xs h-7">Historial</Button> </div> </CardContent> </Card>
Sistema de Coordenadas
El plano de planta utiliza coordenadas locales del almacén en lugar de GPS:
| Propiedad | Descripción |
|---|---|
| Origen | Esquina superior izquierda de la imagen cargada |
| Unidades | Píxeles relativos a la imagen |
| Escala | Relación configurable de metros por píxel |
| Rotación | 0 grados = norte (configurable) |
¿Por qué no GPS?
Los entornos interiores tienen mala recepción GPS. Las coordenadas locales del almacén funcionan sin conexión, son precisas al píxel y sobreviven reemplazos de la imagen del plano ya que el slot_id estable es la referencia principal.
Formato de Datos de Polígono
El límite de cada slot se almacena como un arreglo JSON de vértices:
{
"slot_id": "A-01-03",
"zone": "A",
"floor_plan_polygon": [
{ "x": 120, "y": 80 },
{ "x": 200, "y": 80 },
{ "x": 200, "y": 160 },
{ "x": 120, "y": 160 }
],
"constraints": {
"max_weight_kg": 5000,
"max_height_m": 4.0,
"allowed_types": ["pallet", "box"]
}
}
Tipos de Zona
| Tipo de Zona | Color | Uso Típico |
|---|---|---|
| Almacenamiento | Azul | Almacenamiento a largo plazo de pallets |
| Estadía | Amarillo | Estadía temporal antes de envío |
| Recepción | Verde | Procesamiento de mercancía entrante |
| Envío | Púrpura | Área de despacho de salida |
| Refrigerado | Cian | Almacenamiento con temperatura controlada |
| Materiales Peligrosos | Rojo | Materiales peligrosos (acceso restringido) |
Componentes
| Componente | Ruta | Descripción |
|---|---|---|
FloorPlanCanvas | @/components/whms/layout-editor/floor-plan-canvas | Canvas del editor basado en Konva |
GeoSlotEditor | @/components/whms/layout-editor/geo-slot-editor | Edición de polígonos de slot |
SlotSidebar | @/components/whms/layout-editor/slot-sidebar | Panel de propiedades |
BirdEyeView | @/components/whms/BirdEyeView | Vista general de solo lectura |