| | |
| | | import React, { useState, useRef, useEffect } from 'react'; |
| | | import { useTranslate } from "react-admin"; |
| | | import { Drawer, Box, Typography, Grid, IconButton, Stack, useTheme } from '@mui/material'; |
| | | import { Drawer, Box, Typography, Card, CardContent, IconButton, Stack, useTheme } from '@mui/material'; |
| | | import CloseIcon from '@mui/icons-material/Close'; |
| | | import { PAGE_DRAWER_WIDTH } from '@/config/setting'; |
| | | |
| | | import { |
| | | DEVICE_TYPE, |
| | | } from '../constants'; |
| | | import ShelfInsight from './shelf'; |
| | | import AgvInsight from './agv'; |
| | | |
| | | const Insight = (props) => { |
| | | const { open, onCancel, sprite, width = PAGE_DRAWER_WIDTH, title } = props; |
| | | const theme = useTheme(); |
| | | const themeMode = theme.palette.mode; |
| | | const translate = useTranslate(); |
| | | |
| | | const deviceType = sprite?.data?.type; |
| | | |
| | | const handleClose = () => { |
| | | onCancel(); |
| | |
| | | open={open} |
| | | anchor="right" |
| | | onClose={handleClose} |
| | | sx={{ zIndex: 100, opacity: .8 }} |
| | | sx={{ zIndex: 100, opacity: 1 }} |
| | | > |
| | | {open && ( |
| | | <Box pt={12} width={{ xs: '100vW', sm: width }} height={'calc(100vh - 200px);'} mt={{ xs: 2, sm: 1 }} sx={{ |
| | |
| | | <CloseIcon /> |
| | | </IconButton> |
| | | </Stack> |
| | | <Box p={3}> |
| | | <Box p={2}> |
| | | <Card sx={{ |
| | | transition: '0.3s', |
| | | boxShadow: themeMode === 'light' |
| | | ? '0px 2px 8px rgba(0, 0, 0, 0.1)' |
| | | : '0px 2px 2px rgba(255, 255, 255, 0.1)', |
| | | '&:hover': { |
| | | boxShadow: themeMode === 'light' |
| | | ? '0px 4px 16px rgba(0, 0, 0, 0.2)' |
| | | : '0px 4px 8px rgba(255, 255, 255, 0.2)', |
| | | }, |
| | | borderRadius: '8px', |
| | | }}> |
| | | <CardContent> |
| | | {deviceType === DEVICE_TYPE.SHELF && ( |
| | | <> |
| | | <ShelfInsight |
| | | |
| | | /> |
| | | </> |
| | | )} |
| | | |
| | | {deviceType === DEVICE_TYPE.AGV && ( |
| | | <> |
| | | <AgvInsight |
| | | |
| | | /> |
| | | </> |
| | | )} |
| | | </CardContent> |
| | | </Card> |
| | | </Box> |
| | | </Box> |
| | | )} |