import React, { useState, useRef, useEffect } from 'react';
|
import { useTranslate } from "react-admin";
|
import { Box, Typography, Tabs, Tab, Stack, useTheme, Divider } from '@mui/material';
|
import JsonShow from '../../JsonShow';
|
import { getPointInfo } from '../../http';
|
|
const PointInsight = (props) => {
|
const { sprite, setTitle } = props;
|
const translate = useTranslate();
|
const theme = useTheme();
|
|
const [activeTab, setActiveTab] = useState(0);
|
const [curPoint, setCurPoint] = useState(null);
|
const [curPointInfo, setCurPointInfo] = useState(null);
|
|
const fetchInfo = (param) => {
|
setTitle(translate('page.map.devices.point') + ' - ' + param);
|
setCurPoint(param);
|
getPointInfo(param, (response) => {
|
setCurPointInfo(response);
|
});
|
}
|
|
useEffect(() => {
|
if (sprite) {
|
const param = sprite.data.no;
|
if (param) {
|
fetchInfo(param);
|
}
|
}
|
|
return () => {
|
setTitle(null);
|
setCurPoint(null);
|
setCurPointInfo(null);
|
}
|
}, [sprite])
|
|
const handleTabChange = (event, newValue) => {
|
setActiveTab(newValue);
|
};
|
|
return (
|
<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={'JSON'} />
|
</Tabs>
|
|
<Divider />
|
|
<Box flex={1} pt={2}>
|
{activeTab === 0 && (
|
<JsonShow
|
data={curPointInfo || sprite?.data}
|
height={550}
|
/>
|
)}
|
{activeTab === 1 && (
|
<JsonShow
|
data={curPointInfo || sprite?.data}
|
height={550}
|
/>
|
)}
|
</Box>
|
</Box>
|
)
|
}
|
|
export default PointInsight;
|