55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
import React, {useState} from "react";
|
|
import intl from "react-intl-universal";
|
|
import '../../../lanhuapp/common.css';
|
|
import "../../../lanhuapp/index.css";
|
|
import {ToggleButtonGroup} from "@mui/material";
|
|
import {StyledToggleButton} from "../../Component/StyledTable";
|
|
import TabPanel from "../../Component/TabPanel";
|
|
import RightTopChartDayQ from "../RightTopQ/RightTopChartDayQ";
|
|
import RightTopChartMonthQ from "../RightTopQ/RightTopChartMonthQ";
|
|
import RightTopChartWeekQ from "../RightTopQ/RightTopChartWeekQ";
|
|
|
|
function RightTopQ() {
|
|
const [time, setTime] = useState(1);
|
|
const handleAlignment = (event: React.MouseEvent<HTMLElement>, newTime: number | null,) => {
|
|
if (newTime !== null) {
|
|
setTime(newTime);
|
|
clearTimeout(timeout)
|
|
}
|
|
};
|
|
const timeout = setTimeout(() => {
|
|
if (time < 3) {
|
|
setTime(time + 1)
|
|
} else {
|
|
setTime(1)
|
|
}
|
|
}, 5000)
|
|
|
|
return (
|
|
<div className="fineWin flex-col RightTopQ">
|
|
<div className="fineWin-footer"/>
|
|
<div className="box_77 flex-row justify-between">
|
|
<div className="block_7 flex-col"/>
|
|
<span className="text_2">{intl.get('LineDefectSummary')}</span>
|
|
<ToggleButtonGroup value={time} onChange={handleAlignment} exclusive={true} sx={{marginLeft: "770px"}}>
|
|
<StyledToggleButton value={1} sx={{width: "120px"}}>
|
|
{intl.get('ThisDay')}
|
|
</StyledToggleButton>
|
|
<StyledToggleButton value={2} sx={{width: "120px"}}>
|
|
{intl.get('ThisWeek')}
|
|
</StyledToggleButton>
|
|
<StyledToggleButton value={3} sx={{width: "120px"}}>
|
|
{intl.get('ThisMonth')}
|
|
</StyledToggleButton>
|
|
</ToggleButtonGroup>
|
|
</div>
|
|
<div>
|
|
<TabPanel index={1} value={time}><RightTopChartDayQ/></TabPanel>
|
|
<TabPanel index={2} value={time}><RightTopChartWeekQ/></TabPanel>
|
|
<TabPanel index={3} value={time}><RightTopChartMonthQ/></TabPanel>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default RightTopQ; |