From 1e465fcab874dd5bf60fdff4151a3742b5a755b0 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期四, 17 十月 2024 14:21:12 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/insight/index.jsx | 56 ++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 48 insertions(+), 8 deletions(-) diff --git a/zy-acs-flow/src/map/insight/index.jsx b/zy-acs-flow/src/map/insight/index.jsx index bb95ea9..8fcbcc8 100644 --- a/zy-acs-flow/src/map/insight/index.jsx +++ b/zy-acs-flow/src/map/insight/index.jsx @@ -1,22 +1,29 @@ 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 { open, onCancel, sprite, width = PAGE_DRAWER_WIDTH } = props; const theme = useTheme(); const themeMode = theme.palette.mode; const translate = useTranslate(); + const [title, setTitle] = useState(null); + + const deviceType = sprite?.data?.type; const handleClose = () => { onCancel(); } useEffect(() => { - }, []) + }, [sprite]) return ( <> @@ -25,12 +32,12 @@ 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={{ + <Box pt={12} width={{ xs: '100vW', sm: width }} height={'calc(100vh - 100px);'} mt={{ xs: 2, sm: 1 }} sx={{ }}> - <Stack direction="row" p={2}> + <Stack direction="row" p={2} pt={3}> <Typography variant="h6" flex="1"> {title || translate('page.map.insight.title')} </Typography> @@ -38,7 +45,40 @@ <CloseIcon /> </IconButton> </Stack> - <Box p={3}> + <Box p={2} pt={0} height='100%'> + <Card sx={{ + height: '100%', + 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 sx={{ height: '100%' }}> + {deviceType === DEVICE_TYPE.SHELF && ( + <> + <ShelfInsight + sprite={sprite} + setTitle={setTitle} + /> + </> + )} + + {deviceType === DEVICE_TYPE.AGV && ( + <> + <AgvInsight + sprite={sprite} + setTitle={setTitle} + /> + </> + )} + </CardContent> + </Card> </Box> </Box> )} -- Gitblit v1.9.1