luoyang-screen/src/page/MainQ/RightQ/RightDownLeftQ.tsx

56 lines
2.2 KiB
TypeScript

import React, {useState} from "react";
import intl from "react-intl-universal";
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import {StyledToggleButton} from "../../Component/StyledTable";
import {ToggleButtonGroup} from "@mui/material";
import TabPanel from "../../Component/TabPanel";
import QualityRightTable from "../../Component/QualityRightTable";
function RightDownLeftQ() {
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 RightMiddleLeftQ">
<div className="fineWin-footer"/>
<div className="box_77 flex-row justify-between">
<div className="box_36 flex-col"/>
<span className="text_2">{intl.get('DefectSummaryLine3')}</span>
<ToggleButtonGroup value={time} onChange={handleAlignment} exclusive={true} sx={{marginLeft: "270px"}}>
<StyledToggleButton value={1} sx={{width: "64px"}}>
{intl.get('ThisDayShort')}
</StyledToggleButton>
<StyledToggleButton value={2} sx={{width: "64px"}}>
{intl.get('ThisWeekShort')}
</StyledToggleButton>
<StyledToggleButton value={3} sx={{width: "64px"}}>
{intl.get('ThisMonthShort')}
</StyledToggleButton>
</ToggleButtonGroup>
</div>
<div>
<TabPanel index={1} value={time}><QualityRightTable lineName={"Line_3"}
timeName={"todayQualityLineAll"}/></TabPanel>
<TabPanel index={2} value={time}><QualityRightTable lineName={"Line_3"}
timeName={"weekQualityLineAll"}/></TabPanel>
<TabPanel index={3} value={time}><QualityRightTable lineName={"Line_3"}
timeName={"monthQualityLineAll"}/></TabPanel>
</div>
</div>
)
}
export default RightDownLeftQ;