feat: Enhance vehicle simulation UI with draggable points and asset details

- Updated VehicleInstances component to include asset details card for each vehicle.
- Refactored Vehicles component to remove unused vehicle state logging.
- Added new styles for asset details card in simulation.scss.
- Removed unnecessary styles from realTimeViz.scss.
- Implemented PickDropPoints component for draggable pick and drop locations.
- Created ArmBotUI component to manage robotic arm interactions and actions.
- Developed useDraggableGLTF hook for handling drag-and-drop functionality for GLTF models.
- Introduced VehicleUI component to visualize vehicle start and end points with rotation controls.
- Updated backend integration for vehicle actions and positions.
This commit is contained in:
2025-05-08 18:26:14 +05:30
parent 520cd5f581
commit fef6da5ab7
15 changed files with 846 additions and 429 deletions

View File

@@ -1,20 +1,46 @@
import React from 'react'
import VehicleInstance from './instance/vehicleInstance'
import { useVehicleStore } from '../../../../store/simulation/useVehicleStore'
import React from "react";
import VehicleInstance from "./instance/vehicleInstance";
import { useVehicleStore } from "../../../../store/simulation/useVehicleStore";
import { Html } from "@react-three/drei";
import { Vector3 } from "three";
import AssetDetailsCard from "../../../../components/ui/simulation/AssetDetailsCard";
function VehicleInstances() {
const { vehicles } = useVehicleStore();
const { vehicles } = useVehicleStore();
return (
return (
<>
{vehicles.map((vehicle: VehicleStatus) => (
<>
{vehicles.map((vehicle: VehicleStatus) =>
<VehicleInstance agvDetail={vehicle} key={vehicle.modelUuid} />
)}
<VehicleInstance agvDetail={vehicle} key={vehicle.modelUuid} />
<Html
// data
position={
new Vector3(
vehicle.position[0],
vehicle.point.position[1],
vehicle.position[2]
)
}
// class none
// other
zIndexRange={[1, 0]}
prepend
sprite
center
distanceFactor={20}
>
<AssetDetailsCard
name={vehicle.modelName}
status={vehicle.state}
count={vehicle.currentLoad}
totalCapacity={vehicle.point.action.loadCapacity}
/>
</Html>
</>
)
))}
</>
);
}
export default VehicleInstances
export default VehicleInstances;