初始化，印度版本7.29

src/page/Component/ChangeFullButton.tsx

@@ -0,0 +1,36 @@
+import React, {useState} from "react";
+import intl from "react-intl-universal";
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+
+function ChangeFullButton() {
+  const [isFull, setIsFull] = useState(false);
+
+  function fullExit() {
+    let element = document.documentElement;
+
+    //HTML5 W3C 提议
+    document.exitFullscreen();
+
+    setIsFull(false)
+  }
+
+  function fullScreen() {
+    let element = document.documentElement;
+
+    //HTML W3C 提议
+    element.requestFullscreen();
+
+    setIsFull(true)
+  }
+
+  const click = () => {
+    isFull ? fullExit() : fullScreen();
+  }
+
+  return (
+    <button className="section_1 flex-col" onClick={click}/>
+  )
+}
+
+export default ChangeFullButton;

src/page/Component/ChangeLangButton.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import intl from "react-intl-universal";
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import {useAppDispatch} from "../../store/hooks";
+import {UpdateChangeLangAndCss} from "../../store/ChangeLangAndCss";
+
+function ChangeLangButton() {
+  const dispatch = useAppDispatch();
+  const changeTitle = () => {
+    dispatch(UpdateChangeLangAndCss())
+  }
+
+  return (
+    <button className="box_76 flex-col" onClick={changeTitle}/>
+  )
+}
+
+export default ChangeLangButton;

src/page/Component/QualityRightTable.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import intl from "react-intl-universal";
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import {useAppSelector} from "../../store/hooks";
+import {Quality, selectQualityMonitorEntity} from "../../store/QualityMonitorEntity";
+import {Table, TableBody, TableHead} from "@mui/material";
+import {StyledTableCell, StyledTableContainer, StyledTableRow} from "./StyledTable";
+
+interface param {
+  timeName: "todayQualityLineAll" | "weekQualityLineAll" | "monthQualityLineAll";
+  lineName: "Line_1" | "Line_2" | "Line_3" | "Line_4";
+}
+
+function QualityRightTable(props: param) {
+  const AllData = useAppSelector(selectQualityMonitorEntity);
+  const TimeData = AllData[props.timeName];
+  const LineData = TimeData[props.lineName];
+  const SlicedLineData = LineData.slice(0, 6);
+  return (
+    <div className="rightTableAreaQ">
+      <StyledTableContainer>
+        <Table>
+          <TableHead>
+            <StyledTableRow>
+              <StyledTableCell align="center" sx={{width: 100}}>{intl.get('serialNo')}</StyledTableCell>
+              <StyledTableCell align="center" sx={{width: 250}}>{intl.get('DefectType')}</StyledTableCell>
+              <StyledTableCell align="center" sx={{width: 120}}>{intl.get('DefectNumber')}</StyledTableCell>
+            </StyledTableRow>
+          </TableHead>
+          <TableBody>
+            {SlicedLineData.map((item: Quality, index: number) => (
+              <StyledTableRow key={index}>
+                <StyledTableCell align="center">{item.sort}</StyledTableCell>
+                <StyledTableCell align="center" sx={{
+                  maxWidth: 250,
+                  overflow: 'hidden',
+                  whiteSpace: 'nowrap',
+                  textOverflow: 'ellipsis'
+                }}>{item.content}</StyledTableCell>
+                <StyledTableCell align="center">{item.num}</StyledTableCell>
+              </StyledTableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </StyledTableContainer>
+    </div>
+  )
+}
+
+export default QualityRightTable;

src/page/Component/StyledTable.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import {styled, TableCell, tableCellClasses, TableContainer, TableRow, ToggleButton} from "@mui/material";
+
+export const StyledTableCell = styled(TableCell)(({theme}) => ({
+  [`&.${tableCellClasses.head}`]: {
+    backgroundColor: 'rgba(32, 55, 96, 0.7)',
+    color: theme.palette.common.white,
+    fontSize: 14,
+    padding: 0,
+    border: 0,
+    height: 28,
+  },
+  [`&.${tableCellClasses.body}`]: {
+    fontSize: 12,
+    color: theme.palette.common.white,
+    padding: 0,
+    border: 0,
+    height: 26
+  },
+}));
+
+export const StyledTableRow = styled(TableRow)(({theme}) => ({
+  '&:nth-of-type(odd)': {
+    backgroundColor: 'rgba(14, 32, 62, 0.7)',
+  },
+  backgroundColor: 'rgba(32, 55, 96, 0.7)',
+}));
+
+export const StyledTableContainer = styled(TableContainer)(({theme}) => ({
+  overflow: 'auto hidden',
+  '&::-webkit-scrollbar': {
+    height: 8,
+    WebkitAppearance: 'none'
+  },
+  '&::-webkit-scrollbar-thumb': {
+    borderRadius: 2,
+    backgroundColor: 'rgba(91, 196, 190, 0.5)',
+  },
+  '&::-webkit-scrollbar-button': {
+    width: 8,
+    borderBottomLeftRadius: 2,
+    borderBottomRightRadius: 2,
+    backgroundColor: 'rgba(91, 196, 190, 1)',
+  },
+  '&::-webkit-scrollbar-track': {
+    backgroundColor: 'rgba(12, 32, 67, 1)',
+  }
+}));
+
+export const StyledToggleButton = styled(ToggleButton)({
+  width: 120,
+  height: 24,
+  backgroundColor: 'rgba(49, 135, 140, 0.29)',
+  color: "white",
+  '&.Mui-selected': {
+    backgroundColor: 'rgba(86, 244, 231, 0.69)',
+    color: "white",
+    '&:hover': {
+      backgroundColor: 'rgba(86, 244, 231, 0.5)',
+      color: "white",
+    },
+  },
+  '&:hover': {
+    backgroundColor: 'rgba(86, 244, 231, 0.5)',
+    color: "white",
+  },
+  '&:active': {
+    backgroundColor: 'rgba(86, 244, 231, 0.69)',
+    color: "white",
+  },
+});

src/page/Component/SwitchOnOff.tsx

@@ -0,0 +1,26 @@
+import React, {useState} from "react";
+import intl from "react-intl-universal";
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import {FormControlLabel, Switch} from "@mui/material";
+import {useAppSelector, useAppDispatch} from "../../store/hooks";
+import {selectSwitchState,ChangeSwitch} from "../../store/ChangeSwitchState";
+
+function SwitchOnOff() {
+  const dispatch = useAppDispatch();
+  const [isSwitch, setIsSwitch] = useState(useAppSelector(selectSwitchState));
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(ChangeSwitch())
+    setIsSwitch(event.target.checked);
+  }
+
+  return (
+    <div className={'switchBtn'}>
+      <FormControlLabel control={<Switch color={'warning'} checked={isSwitch} onChange={handleChange}/>}
+                        label={intl.get('AutoSwitch')}/>
+    </div>
+  )
+}
+
+export default SwitchOnOff;

src/page/Component/TabPanel.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import "../style/standard.css"
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const {children, value, index, ...other} = props;
+  return (
+    <div hidden={value !== index}>
+      {children}
+    </div>
+  )
+}
+
+export default TabPanel;