From 7f70cb15d035f0c233b9e62b9e43aa985317c908 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期一, 04 十一月 2024 10:22:45 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/insight/agv/index.jsx | 79 +++++++++++++++++++++++++++++++++++++-- 1 files changed, 75 insertions(+), 4 deletions(-) diff --git a/zy-acs-flow/src/map/insight/agv/index.jsx b/zy-acs-flow/src/map/insight/agv/index.jsx index 5d678c0..43b8123 100644 --- a/zy-acs-flow/src/map/insight/agv/index.jsx +++ b/zy-acs-flow/src/map/insight/agv/index.jsx @@ -1,11 +1,82 @@ - +import React, { useState, useRef, useEffect } from 'react'; +import { useTranslate } from "react-admin"; +import { Box, Typography, Tabs, Tab, Stack, useTheme, Divider } from '@mui/material'; +import AgvMain from './AgvMain'; +import AgvControl from './AgvControl'; +import JsonShow from '../../JsonShow'; +import { getAgvInfo } from '../../http'; const AgvInsight = (props) => { + const { sprite, setTitle } = props; + const translate = useTranslate(); + const theme = useTheme(); + + const [activeTab, setActiveTab] = useState(0); + const [curAgvNo, setCurAgvNo] = useState(null); + const [curAgvInfo, setCurAgvInfo] = useState(null); + + const fetchAgvInfo = (agvNo) => { + setTitle(translate('page.map.devices.agv') + ' - ' + agvNo); + setCurAgvNo(agvNo); + getAgvInfo(agvNo, (response) => { + setCurAgvInfo(response); + }); + } + + useEffect(() => { + if (sprite) { + const agvNo = sprite.data.no; + if (agvNo) { + fetchAgvInfo(agvNo); + } + } + + return () => { + setTitle(null); + setCurAgvInfo(null); + } + }, [sprite]) + + const handleTabChange = (event, newValue) => { + setActiveTab(newValue); + }; return ( - <> - <h1>Agv</h1> - </> + <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}> + <Tabs + value={activeTab} + onChange={handleTabChange} + centered + sx={{ mb: 0 }} + > + <Tab label={translate('page.map.insight.title')} /> + <Tab label={translate('page.map.insight.tabs.control')} /> + <Tab label={'JSON'} /> + </Tabs> + + <Divider /> + + <Box flex={1} pt={2}> + {activeTab === 0 && ( + <AgvMain + curAgvNo={curAgvNo} + curAgvInfo={curAgvInfo} + fetchAgvInfo={fetchAgvInfo} + /> + )} + {activeTab === 1 && ( + <AgvControl + curAgvNo={curAgvNo} + /> + )} + {activeTab === 2 && ( + <JsonShow + data={curAgvInfo || sprite?.data} + height={550} + /> + )} + </Box> + </Box> ) } -- Gitblit v1.9.1