初始化，印度版本7.29

2024-07-29 14:10:07 +08:00
commit 3c8c7e497b
202 changed files with 52317 additions and 0 deletions
--- a/src/page/AutoSwitch/SwitchAll.tsx
+++ b/src/page/AutoSwitch/SwitchAll.tsx
@@ -0,0 +1,65 @@
+import React, {useContext, useEffect, useState} from "react";
+import intl from "react-intl-universal";
+import MainP from "../MainP/MainP";
+import MainE from "../MainE/MainE";
+import MainQ from "../MainQ/MainQ";
+import TabPanel from "../Component/TabPanel";
+import SwitchOnOff from "../Component/SwitchOnOff";
+import {useAppSelector} from "../../store/hooks";
+import {selectSwitchState} from "../../store/ChangeSwitchState";
+import {ThisLineID} from "../../context/ThisLineID";
+
+function SwitchAll() {
+  const [PageIndex, setPageIndex] = useState(1)
+  const state = useAppSelector(selectSwitchState)
+  useEffect(() => {
+      let timerId: NodeJS.Timer;
+
+      function StartSwitch() {
+        timerId = setTimeout(() => {
+          if (PageIndex < 6) {
+            setPageIndex(PageIndex + 1)
+          } else {
+            setPageIndex(1)
+          }
+        }, 30000)
+      }
+
+      function StopSwitch() {
+        clearInterval(timerId)
+      }
+
+      if (state) {
+        StartSwitch()
+      } else {
+        StopSwitch()
+      }
+
+      window.dispatchEvent(new Event('resize'))
+      return () => {
+        clearInterval(timerId)
+      }
+    }, [PageIndex, state]
+  )
+  return (
+    <div>
+      <SwitchOnOff/>
+      <TabPanel index={1} value={PageIndex}><MainP/></TabPanel>
+      <TabPanel index={2} value={PageIndex}><MainQ/></TabPanel>
+      <ThisLineID.Provider value={'1'}>
+        <TabPanel index={3} value={PageIndex}><MainE/></TabPanel>
+      </ThisLineID.Provider>
+      <ThisLineID.Provider value={'2'}>
+        <TabPanel index={4} value={PageIndex}><MainE/></TabPanel>
+      </ThisLineID.Provider>
+      <ThisLineID.Provider value={'3'}>
+        <TabPanel index={5} value={PageIndex}><MainE/></TabPanel>
+      </ThisLineID.Provider>
+      <ThisLineID.Provider value={'4'}>
+        <TabPanel index={6} value={PageIndex}><MainE/></TabPanel>
+      </ThisLineID.Provider>
+    </div>
+  )
+}
+
+export default SwitchAll;
--- a/src/page/AutoSwitch/SwitchLine.tsx
+++ b/src/page/AutoSwitch/SwitchLine.tsx
@@ -0,0 +1,53 @@
+import React, {useContext, useEffect, useState} from "react";
+import intl from "react-intl-universal";
+import MainP from "../MainP/MainP";
+import MainE from "../MainE/MainE";
+import MainQ from "../MainQ/MainQ";
+import TabPanel from "../Component/TabPanel";
+import SwitchOnOff from "../Component/SwitchOnOff";
+import {useAppSelector} from "../../store/hooks";
+import {selectSwitchState} from "../../store/ChangeSwitchState";
+
+function SwitchLine() {
+  const [PageIndex, setPageIndex] = useState(1)
+  const state = useAppSelector(selectSwitchState)
+  useEffect(() => {
+      let timerId: NodeJS.Timer;
+
+      function StartSwitch() {
+        timerId = setInterval(() => {
+          if (PageIndex < 3) {
+            setPageIndex(PageIndex + 1)
+          } else {
+            setPageIndex(1)
+          }
+        }, 30000)
+      }
+
+      function StopSwitch() {
+        clearInterval(timerId)
+      }
+
+      if (state) {
+        StartSwitch()
+      } else {
+        StopSwitch()
+      }
+
+      window.dispatchEvent(new Event('resize'))
+      return () => {
+        clearInterval(timerId)
+      }
+    }, [PageIndex, state]
+  )
+  return (
+    <div>
+      <SwitchOnOff/>
+      <TabPanel index={1} value={PageIndex}><MainP/></TabPanel>
+      <TabPanel index={2} value={PageIndex}><MainQ/></TabPanel>
+      <TabPanel index={3} value={PageIndex}><MainE/></TabPanel>
+    </div>
+  )
+}
+
+export default SwitchLine;
--- a/src/page/Component/ChangeFullButton.tsx
+++ b/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;
--- a/src/page/Component/ChangeLangButton.tsx
+++ b/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;
--- a/src/page/Component/QualityRightTable.tsx
+++ b/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;
--- a/src/page/Component/StyledTable.tsx
+++ b/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",
+  },
+});
--- a/src/page/Component/SwitchOnOff.tsx
+++ b/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;
--- a/src/page/Component/TabPanel.tsx
+++ b/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;
--- a/src/page/ErrorPage.tsx
+++ b/src/page/ErrorPage.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import "./style/standard.css"
+import intl from "react-intl-universal";
+
+
+function ErrorPage() {
+  return (
+    <div className="error-page">
+      <h1>Oops!</h1>
+      <p>Sorry, an unexpected error has occurred.</p>
+    </div>
+  )
+}
+
+export default ErrorPage;
--- a/src/page/MainE/CenterDownE.tsx
+++ b/src/page/MainE/CenterDownE.tsx
@@ -0,0 +1,94 @@
+import React, {useContext, useState} from "react";
+import intl from "react-intl-universal";
+import "../style/standard.css"
+import Pagination from '@mui/material/Pagination';
+import {createTheme, ThemeProvider} from "@mui/material";
+import CenterDownChartE from "./CenterDownE/CenterDownChartE";
+import TabPanel from "../Component/TabPanel";
+import {useAppSelector} from "../../store/hooks";
+import {selectAllLineEquipmentData} from "../../store/EquipmentMonitorEntity";
+import {selectChangeLineID} from "../../store/ChangeLineID";
+import {ThisLineID} from "../../context/ThisLineID";
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: 'rgba(82, 255, 241,0.8)'
+    }
+  }
+})
+
+function CenterDownE() {
+  const contextLineID = useContext(ThisLineID);
+  const [page, setPage] = useState(1);
+  const handleChange = (event: React.ChangeEvent<unknown>, page: number | null) => {
+    if (page !== null) {
+      setPage(page);
+      clearTimeout(timeOut)
+    }
+  }
+  const AllData = useAppSelector(selectAllLineEquipmentData);
+  const LineID = "Line_" + contextLineID;
+  let EquipmentOeesCount: number = 0;
+  switch (LineID) {
+    case 'Line_1':
+      EquipmentOeesCount = AllData.Line_1.equipmentOees.length;
+      break;
+    case 'Line_2':
+      EquipmentOeesCount = AllData.Line_2.equipmentOees.length;
+      break;
+    case 'Line_3':
+      EquipmentOeesCount = AllData.Line_3.equipmentOees.length;
+      break;
+    case 'Line_4':
+      EquipmentOeesCount = AllData.Line_4.equipmentOees.length;
+      break;
+  }
+  const OnePageCount = 8;
+  const PageCount = Math.ceil(EquipmentOeesCount / OnePageCount);
+  const PageIndexArray: Array<number> = []
+  for (let index = 1; index <= PageCount; index++) {
+    PageIndexArray.push(index)
+  }
+
+  const timeOut = setTimeout(() => {
+    if (page < PageCount) {
+      setPage(page + 1)
+    } else {
+      setPage(1)
+    }
+  }, 5000)
+
+  return (
+    <div className="block_18_E fineWin">
+      <div className="fineWin-footer"/>
+      <div className="group_74 flex-col">
+        <div className="group_75 flex-row">
+          <div className="box_24 flex-col"/>
+          <span className="text_97">{intl.get('EquipmentTurnover')}</span>
+          <div className='area1'>
+            <ThemeProvider theme={theme}>
+              <Pagination page={page} count={PageCount} onChange={handleChange} variant="outlined" color={"primary"}
+                          size={"small"}
+                          sx={{
+                            '& .MuiPaginationItem-root': {
+                              color: 'white',
+                              border: '1px solid rgb(82 255 241 / 24%)'
+                            }
+                          }}/>
+            </ThemeProvider>
+          </div>
+        </div>
+        <div className='area2'>
+          {PageIndexArray.map((index) => (
+            <TabPanel key={index} index={index} value={page}><CenterDownChartE startNum={(index - 1) * OnePageCount}
+                                                                               endNum={Math.min(index * OnePageCount - 1, EquipmentOeesCount - 1)}
+                                                                               pageIndex={index - 1}/></TabPanel>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CenterDownE;
--- a/src/page/MainE/CenterDownE/CenterDownChartE.tsx
+++ b/src/page/MainE/CenterDownE/CenterDownChartE.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import Grid from '@mui/material/Grid';
+import OeeChart from "./OeeChart";
+import {useAppSelector} from "../../../store/hooks";
+import {Oee, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
+import {selectChangeLineID} from "../../../store/ChangeLineID";
+
+interface param {
+  startNum: number;
+  endNum: number;
+  pageIndex: number;
+}
+
+function CenterDownChartE(props: param) {
+  const {startNum, endNum, pageIndex} = props;
+  const AllData = useAppSelector(selectAllLineEquipmentData);
+  const LineID = "Line_" + useAppSelector(selectChangeLineID);
+  let EquipmentOees: Array<Oee> = [];
+  switch (LineID) {
+    case 'Line_1':
+      EquipmentOees = AllData.Line_1.equipmentOees;
+      break;
+    case 'Line_2':
+      EquipmentOees = AllData.Line_2.equipmentOees;
+      break;
+    case 'Line_3':
+      EquipmentOees = AllData.Line_3.equipmentOees;
+      break;
+    case 'Line_4':
+      EquipmentOees = AllData.Line_4.equipmentOees;
+      break;
+  }
+  let ToShowOees: Array<Oee> = [];
+  for (let index = startNum; index <= endNum; index++) {
+    ToShowOees.push(EquipmentOees[index]);
+  }
+
+  return (
+
+    <Grid container spacing={3}>
+      {
+        ToShowOees.map((item, index) => (
+          <Grid item xs={3} key={pageIndex * 8 + index}>
+            <OeeChart downRate={item.downRate} equName={item.equName} stopRate={item.stopRate}
+                      workRate={item.workRate}/>
+          </Grid>))
+      }
+    </Grid>
+
+  )
+}
+
+export default CenterDownChartE;
--- a/src/page/MainE/CenterDownE/OeeChart.tsx
+++ b/src/page/MainE/CenterDownE/OeeChart.tsx
@@ -0,0 +1,127 @@
+import React, {useEffect, useRef, useState} from "react";
+import intl from "react-intl-universal";
+import * as echarts from 'echarts';
+
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+import theme from "../../style/theme";
+import {Oee} from "../../../store/EquipmentMonitorEntity";
+
+function OeeChart(data: Oee) {
+  const CenterDownChartRef = useRef(null)
+  const gaugeData = [
+    {
+      value: (data.downRate * 100).toFixed(2),
+      name: intl.get("DownRate"),
+      title: {
+        offsetCenter: ['-170%', '-110%'],
+        color: 'white'
+      },
+      detail: {
+        valueAnimation: true,
+        offsetCenter: ['-170%', '-80%'],
+      }
+    },
+    {
+      value: (data.workRate * 100).toFixed(2),
+      name: intl.get("WorkRate"),
+      title: {
+        offsetCenter: ['-170%', '-30%'],
+        color: 'white'
+      },
+      detail: {
+        valueAnimation: true,
+        offsetCenter: ['-170%', '0%']
+      }
+    },
+    {
+      value: (data.stopRate * 100).toFixed(2),
+      name: intl.get("StopRate"),
+      title: {
+        offsetCenter: ['-170%', '50%'],
+        color: 'white'
+      },
+      detail: {
+        valueAnimation: true,
+        offsetCenter: ['-170%', '80%'],
+      }
+    }
+  ];
+
+  useEffect(() => {
+    // @ts-ignore
+    let chartInstance = echarts.init(CenterDownChartRef.current, theme);
+
+    const option = {
+      series: [
+        {
+          type: 'gauge',
+          color: ['#66FFFF', '#F78C54', '#0BA267'],
+          startAngle: 90,
+          endAngle: -270,
+          center: ['60%', '50%'],
+          radius: "60%",
+          pointer: {
+            show: false
+          },
+          progress: {
+            show: true,
+            overlap: false,
+            roundCap: true,
+            clip: false,
+            itemStyle: {
+              borderWidth: 0.5,
+              borderColor: 'white'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              width: 40,
+              color: [[1, 'rgba(19, 42, 79, 0.7)']]
+            }
+          },
+          splitLine: {
+            show: false,
+            distance: 0,
+            length: 10
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false,
+            distance: 50
+          },
+          data: gaugeData,
+          title: {
+            fontSize: 12
+          },
+          detail: {
+            width: 30,
+            height: 10,
+            fontSize: 12,
+            color: 'inherit',
+            borderColor: 'inherit',
+            borderWidth: 1,
+            borderRadius: 40,
+            formatter: '{value}%'
+          }
+        }
+      ]
+
+    }
+    chartInstance.setOption(option);
+    chartInstance.resize();
+  })
+
+  return (
+    <React.Fragment>
+      <div className={"myText1"}>{data.equName}</div>
+      <div ref={CenterDownChartRef} className="chart4"/>
+    </React.Fragment>
+
+  );
+}
+
+export default OeeChart;
--- a/src/page/MainE/CenterE.tsx
+++ b/src/page/MainE/CenterE.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import intl from "react-intl-universal";
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import "../style/standard.css"
+import CenterUpE from "./CenterUpE";
+import CenterDownE from "./CenterDownE";
+
+function CenterE() {
+  return (
+    <div className={"group_72 flex-col"}>
+      <CenterUpE/>
+      <CenterDownE/>
+    </div>
+  )
+}
+
+export default CenterE;
--- a/src/page/MainE/CenterUpE.tsx
+++ b/src/page/MainE/CenterUpE.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import LineBabylon from "../../babylonjs/LineBabylon";
+import {Observable} from "@babylonjs/core";
+
+function CenterUpE() {
+  return (
+    <div className="block_16_E flex-col fineWin">
+      <div className="fineWin-footer"/>
+      <LineBabylon/>
+    </div>
+  )
+}
+
+export default CenterUpE;
--- a/src/page/MainE/LeftDownE.tsx
+++ b/src/page/MainE/LeftDownE.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import intl from "react-intl-universal";
+import LeftDownChartE from "./LeftDownE/LeftDownChartE";
+
+function LeftDownE() {
+  return (
+    <div className="block_3_E3 flex-col fineWin">
+      <div className="fineWin-footer"/>
+      <div className="box_77 flex-row justify-between">
+        <div className="box_36 flex-col"/>
+        <span className="text_2">{intl.get('EquipmentOperationMonitoring')}</span>
+      </div>
+      <div style={{marginTop: 15}}>
+        <LeftDownChartE/>
+      </div>
+    </div>
+  )
+}
+
+export default LeftDownE;
--- a/src/page/MainE/LeftDownE/LeftDownChartE.tsx
+++ b/src/page/MainE/LeftDownE/LeftDownChartE.tsx
@@ -0,0 +1,108 @@
+import React, {useContext, useEffect, useRef, useState} from "react";
+import intl from "react-intl-universal";
+import * as echarts from 'echarts';
+
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+import theme from "../../style/theme";
+
+import {useAppSelector} from "../../../store/hooks";
+import {selectAllLineEquipmentData, TickCount} from "../../../store/EquipmentMonitorEntity";
+import {selectChangeLineID} from "../../../store/ChangeLineID";
+import {ThisLineID} from "../../../context/ThisLineID";
+
+
+function LeftDownChartE() {
+  const contextLineID = useContext(ThisLineID);
+  const chartRef = useRef(null)
+
+  const AllData = useAppSelector(selectAllLineEquipmentData);
+  const LineID = "Line_" + contextLineID;
+  let equipmentTickCounts: Array<TickCount> = [];
+  switch (LineID) {
+    case 'Line_1':
+      equipmentTickCounts = AllData.Line_1.equipmentTickCounts;
+      break;
+    case 'Line_2':
+      equipmentTickCounts = AllData.Line_2.equipmentTickCounts;
+      break;
+    case 'Line_3':
+      equipmentTickCounts = AllData.Line_3.equipmentTickCounts;
+      break;
+    case 'Line_4':
+      equipmentTickCounts = AllData.Line_4.equipmentTickCounts;
+      break;
+  }
+
+  const nameset: string[] = [];
+  const numset: number[] = [];
+
+  equipmentTickCounts.map((item) => {
+    nameset.push(item.equName);
+    numset.push(item.tickCount)
+  })
+
+  useEffect(() => {
+    // @ts-ignore
+    let chartInstance = echarts.init(chartRef.current);
+    const option = {
+      grid: {
+        top: "0%",
+        bottom: "0%",
+        left: "0%",
+        right: "5%",
+        containLabel: true,
+      },
+      legend: {
+        show: true,
+        selectedMode: false,
+        itemHeight: 8,
+        itemWidth: 13,
+        textStyle: {
+          fontSize: 10,
+        }
+      },
+      yAxis: {
+        type: 'category',
+        data: nameset,
+        color: "#eeeeee",
+        axisLabel: {
+          color: "#eeeeee"
+        }
+      },
+      xAxis: {
+        type: 'value',
+        axisLabel: {
+          color: "#eeeeee"
+        }
+      },
+      series: [
+        {
+          data: numset,
+          type: 'bar',
+          barMaxWidth: 35,
+          label: {
+            show: true,
+            position: 'right',
+            color: "#eeeeee"
+          },
+          showBackground: true,
+          backgroundStyle: {
+            color: 'rgba(180, 180, 180, 0.2)'
+          },
+          color: 'rgba(82, 255, 241, 0.6)'
+        }
+      ]
+    }
+
+    chartInstance.setOption(option);
+    chartInstance.resize();
+  })
+
+  return (
+    <div ref={chartRef} className="chart3"/>
+  );
+}
+
+export default LeftDownChartE;
--- a/src/page/MainE/LeftE.tsx
+++ b/src/page/MainE/LeftE.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import intl from "react-intl-universal";
+
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import LeftUpE from "./LeftUpE";
+import LeftDownE from "./LeftDownE";
+
+function LeftE() {
+  return (
+    <div className="group_61 flex-col">
+      <LeftUpE/>
+      <LeftDownE/>
+    </div>
+  );
+}
+
+export default LeftE;
--- a/src/page/MainE/LeftUpE.tsx
+++ b/src/page/MainE/LeftUpE.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import intl from "react-intl-universal";
+import LeftUpTableE from "./LeftUpE/LeftUpTableE";
+
+function LeftUpE() {
+  return (
+    <div className="block_3_E2 flex-col fineWin">
+      <div className="fineWin-footer"/>
+      <div className="box_77 flex-row justify-between">
+        <div className="block_4 flex-col"/>
+        <span className="text_2">{intl.get('AbnormalEquipmentAlarm')}</span>
+      </div>
+      <div style={{marginTop: 15, marginLeft: 25, marginRight: 25}}>
+        <LeftUpTableE/>
+      </div>
+    </div>
+  )
+}
+
+export default LeftUpE;
--- a/src/page/MainE/LeftUpE/LeftUpTableE.tsx
+++ b/src/page/MainE/LeftUpE/LeftUpTableE.tsx
@@ -0,0 +1,61 @@
+import React, {useContext} from "react";
+import intl from "react-intl-universal";
+
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+import {Table, TableBody, TableHead,} from "@mui/material";
+import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
+import {useAppSelector} from "../../../store/hooks";
+import {Alarm, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
+import {ThisLineID} from "../../../context/ThisLineID";
+
+function LeftUpTableE() {
+  const contextLineID = useContext(ThisLineID);
+  const AllData = useAppSelector(selectAllLineEquipmentData);
+  const LineID = "Line_" + contextLineID;
+  let equipmentAlarm: Array<Alarm> = [];
+  switch (LineID) {
+    case 'Line_1':
+      equipmentAlarm = AllData.Line_1.equipmentAlarm;
+      break;
+    case 'Line_2':
+      equipmentAlarm = AllData.Line_2.equipmentAlarm;
+      break;
+    case 'Line_3':
+      equipmentAlarm = AllData.Line_3.equipmentAlarm;
+      break;
+    case 'Line_4':
+      equipmentAlarm = AllData.Line_4.equipmentAlarm;
+      break;
+  }
+
+  return (
+    <StyledTableContainer>
+      <Table>
+        <TableHead>
+          <StyledTableRow>
+            <StyledTableCell align="center" sx={{minWidth: 30}}>{intl.get('serialNo')}</StyledTableCell>
+            <StyledTableCell align="center" sx={{minWidth: 65}}>{intl.get('EquipmentName')}</StyledTableCell>
+            <StyledTableCell align="center" sx={{minWidth: 65}}>{intl.get('alarmCode')}</StyledTableCell>
+            <StyledTableCell align="center" sx={{minWidth: 65}}>{intl.get('AlarmLevel')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('alarmContent')}</StyledTableCell>
+          </StyledTableRow>
+        </TableHead>
+        <TableBody>
+          {equipmentAlarm.map((alarm, index) => (
+            <StyledTableRow key={index + 1}>
+              <StyledTableCell align="center">{index + 1}</StyledTableCell>
+              <StyledTableCell align="center">{alarm.equName}</StyledTableCell>
+              <StyledTableCell align="center">{alarm.alarmCode}</StyledTableCell>
+              <StyledTableCell align="center">{alarm.alarmValue}</StyledTableCell>
+              <StyledTableCell align="center">{alarm.alarmContent}</StyledTableCell>
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </StyledTableContainer>
+  );
+}
+
+export default LeftUpTableE;
--- a/src/page/MainE/MainE.tsx
+++ b/src/page/MainE/MainE.tsx
@@ -0,0 +1,42 @@
+import React, {useContext} from "react";
+import intl from "react-intl-universal";
+import {useParams} from "react-router-dom";
+import {useAppDispatch} from "../../store/hooks";
+import {UpdateChangeLineID} from "../../store/ChangeLineID";
+
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import TopE from "./TopE";
+import LeftE from "./LeftE";
+import CenterE from "./CenterE";
+import RightE from "./RightE";
+import {Observable} from "@babylonjs/core";
+import {MyObservable} from "../../context/MyObservable";
+import {ThisLineID} from "../../context/ThisLineID";
+
+
+function MainE() {
+  const contextLineID = useContext(ThisLineID);
+  const {LineID} = useParams()
+  let NowThisLineID: string | undefined;
+  if (contextLineID) {
+    NowThisLineID = contextLineID
+  } else {
+    NowThisLineID = LineID;
+  }
+  const dispatch = useAppDispatch();
+  dispatch(UpdateChangeLineID(NowThisLineID));
+
+  return (
+    <ThisLineID.Provider value={NowThisLineID}>
+      <TopE/>
+      <div className="block_32 flex-row">
+        <LeftE/>
+        <CenterE/>
+        <RightE/>
+      </div>
+    </ThisLineID.Provider>
+  );
+}
+
+export default MainE;
--- a/src/page/MainE/RightE.tsx
+++ b/src/page/MainE/RightE.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import intl from "react-intl-universal";
+
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import RightDownTableDay from "../MainP/RightDown/RightDownTableDay";
+import {useAppSelector} from "../../store/hooks";
+import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
+import RightTableDayE from "./RightE/RightTableDayE";
+import RightTableWeekE from "./RightE/RightTableWeekE";
+import RightTableMonthE from "./RightE/RightTableMonthE";
+import RightTableAllE from "./RightE/RightTableAllE";
+
+
+
+function RightE() {
+
+  const Css = useAppSelector(selectChangeLangAndCss);
+  return (
+    <div className="box_34">
+      <div className="block_3_E fineWin flex-col">
+        <div className="fineWin-footer"/>
+        <div className="box_77 flex-row justify-between">
+          <div className="group_27 flex-col"/>
+          <span className="text_2">{intl.get('EquipmentProcessingQuantity')}</span>
+        </div>
+
+        <div className="group_63_2 flex-row">
+          <div className="box_4 flex-col"/>
+          <span className={Css.text_34}>{intl.get('ThisDay')}</span>
+          <div className="box_5 flex-col"/>
+        </div>
+
+        <div className="rightDownTableArea">
+          <RightTableDayE/>
+        </div>
+
+        <div className="group_63_2 flex-row">
+          <div className="box_4 flex-col"/>
+          <span className={Css.text_34}>{intl.get('ThisWeek')}</span>
+          <div className="box_5 flex-col"/>
+        </div>
+
+        <div className="rightDownTableArea">
+          <RightTableWeekE/>
+        </div>
+
+        <div className="group_63_2 flex-row">
+          <div className="box_4 flex-col"/>
+          <span className={Css.text_34}>{intl.get('ThisMonth')}</span>
+          <div className="box_5 flex-col"/>
+        </div>
+
+        <div className="rightDownTableArea">
+          <RightTableMonthE/>
+        </div>
+
+        <div className="group_63_2 flex-row">
+          <div className="box_4 flex-col"/>
+          <span className={Css.text_34}>{intl.get('All')}</span>
+          <div className="box_5 flex-col"/>
+        </div>
+
+        <div className="rightDownTableArea">
+          <RightTableAllE/>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default RightE;
--- a/src/page/MainE/RightE/RightTableAllE.tsx
+++ b/src/page/MainE/RightE/RightTableAllE.tsx
@@ -0,0 +1,61 @@
+import React, {useContext} from "react";
+import intl from "react-intl-universal";
+
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+
+import {useAppSelector} from "../../../store/hooks";
+import {Product, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
+import {Table, TableBody, TableHead} from "@mui/material";
+import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
+import {selectChangeLineID} from "../../../store/ChangeLineID";
+import {ThisLineID} from "../../../context/ThisLineID";
+
+function RightTableAllE() {
+  const contextLineID = useContext(ThisLineID);
+  const AllData = useAppSelector(selectAllLineEquipmentData);
+  const LineID = "Line_" + contextLineID;
+  let ProductData: Array<Product> = [];
+  switch (LineID) {
+    case 'Line_1':
+      ProductData = AllData.Line_1.equipmentProductAll;
+      break;
+    case 'Line_2':
+      ProductData = AllData.Line_2.equipmentProductAll;
+      break;
+    case 'Line_3':
+      ProductData = AllData.Line_3.equipmentProductAll;
+      break;
+    case 'Line_4':
+      ProductData = AllData.Line_4.equipmentProductAll;
+      break;
+  }
+
+  return (
+    <StyledTableContainer>
+      <Table>
+        <TableHead>
+          <StyledTableRow>
+            <StyledTableCell align="center">{intl.get('SectionName')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('EquipmentName')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
+          </StyledTableRow>
+        </TableHead>
+        <TableBody>
+          {ProductData.map((item, index) => (
+            <StyledTableRow key={index}>
+              <StyledTableCell align="center">{item.sectionName}</StyledTableCell>
+              <StyledTableCell align="center">{item.equipmentName}</StyledTableCell>
+              <StyledTableCell align="center">{item.inputNum}</StyledTableCell>
+              <StyledTableCell align="center">{item.outputNum}</StyledTableCell>
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </StyledTableContainer>
+  )
+}
+
+export default RightTableAllE;
--- a/src/page/MainE/RightE/RightTableDayE.tsx
+++ b/src/page/MainE/RightE/RightTableDayE.tsx
@@ -0,0 +1,63 @@
+import React, {useContext} from "react";
+import intl from "react-intl-universal";
+
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+
+import {useAppSelector} from "../../../store/hooks";
+import {Product, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
+import {Table, TableBody, TableHead} from "@mui/material";
+import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
+import {selectChangeLineID} from "../../../store/ChangeLineID";
+import {ThisLineID} from "../../../context/ThisLineID";
+
+function RightTableDayE() {
+  const contextLineID = useContext(ThisLineID);
+  const AllData = useAppSelector(selectAllLineEquipmentData);
+  const LineID = "Line_" + contextLineID;
+  let ProductData: Array<Product> = [];
+  switch (LineID) {
+    case 'Line_1':
+      ProductData = AllData.Line_1.equipmentProductDays;
+      break;
+    case 'Line_2':
+      ProductData = AllData.Line_2.equipmentProductDays;
+      break;
+    case 'Line_3':
+      ProductData = AllData.Line_3.equipmentProductDays;
+      break;
+    case 'Line_4':
+      ProductData = AllData.Line_4.equipmentProductDays;
+      break;
+  }
+
+  const SlicedProductData = ProductData.slice(0, 5)
+
+  return (
+    <StyledTableContainer>
+      <Table>
+        <TableHead>
+          <StyledTableRow>
+            <StyledTableCell align="center">{intl.get('SectionName')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('EquipmentName')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
+          </StyledTableRow>
+        </TableHead>
+        <TableBody>
+          {SlicedProductData.map((item, index) => (
+            <StyledTableRow key={index}>
+              <StyledTableCell align="center">{item.sectionName}</StyledTableCell>
+              <StyledTableCell align="center">{item.equipmentName}</StyledTableCell>
+              <StyledTableCell align="center">{item.inputNum}</StyledTableCell>
+              <StyledTableCell align="center">{item.outputNum}</StyledTableCell>
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </StyledTableContainer>
+  )
+}
+
+export default RightTableDayE;
--- a/src/page/MainE/RightE/RightTableMonthE.tsx
+++ b/src/page/MainE/RightE/RightTableMonthE.tsx
@@ -0,0 +1,61 @@
+import React, {useContext} from "react";
+import intl from "react-intl-universal";
+
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+
+import {useAppSelector} from "../../../store/hooks";
+import {Product, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
+import {Table, TableBody, TableHead} from "@mui/material";
+import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
+import {selectChangeLineID} from "../../../store/ChangeLineID";
+import {ThisLineID} from "../../../context/ThisLineID";
+
+function RightTableMonthE() {
+  const contextLineID = useContext(ThisLineID);
+  const AllData = useAppSelector(selectAllLineEquipmentData);
+  const LineID = "Line_" + contextLineID;
+  let ProductData: Array<Product> = [];
+  switch (LineID) {
+    case 'Line_1':
+      ProductData = AllData.Line_1.equipmentProductMonths;
+      break;
+    case 'Line_2':
+      ProductData = AllData.Line_2.equipmentProductMonths;
+      break;
+    case 'Line_3':
+      ProductData = AllData.Line_3.equipmentProductMonths;
+      break;
+    case 'Line_4':
+      ProductData = AllData.Line_4.equipmentProductMonths;
+      break;
+  }
+
+  return (
+    <StyledTableContainer>
+      <Table>
+        <TableHead>
+          <StyledTableRow>
+            <StyledTableCell align="center">{intl.get('SectionName')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('EquipmentName')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
+          </StyledTableRow>
+        </TableHead>
+        <TableBody>
+          {ProductData.map((item, index) => (
+            <StyledTableRow key={index}>
+              <StyledTableCell align="center">{item.sectionName}</StyledTableCell>
+              <StyledTableCell align="center">{item.equipmentName}</StyledTableCell>
+              <StyledTableCell align="center">{item.inputNum}</StyledTableCell>
+              <StyledTableCell align="center">{item.outputNum}</StyledTableCell>
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </StyledTableContainer>
+  )
+}
+
+export default RightTableMonthE;
--- a/src/page/MainE/RightE/RightTableWeekE.tsx
+++ b/src/page/MainE/RightE/RightTableWeekE.tsx
@@ -0,0 +1,61 @@
+import React, {useContext} from "react";
+import intl from "react-intl-universal";
+
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+
+import {useAppSelector} from "../../../store/hooks";
+import {Product, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
+import {Table, TableBody, TableHead} from "@mui/material";
+import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
+import {selectChangeLineID} from "../../../store/ChangeLineID";
+import {ThisLineID} from "../../../context/ThisLineID";
+
+function RightTableWeekE() {
+  const contextLineID = useContext(ThisLineID);
+  const AllData = useAppSelector(selectAllLineEquipmentData);
+  const LineID = "Line_" + contextLineID;
+  let ProductData: Array<Product> = [];
+  switch (LineID) {
+    case 'Line_1':
+      ProductData = AllData.Line_1.equipmentProductWeeks;
+      break;
+    case 'Line_2':
+      ProductData = AllData.Line_2.equipmentProductWeeks;
+      break;
+    case 'Line_3':
+      ProductData = AllData.Line_3.equipmentProductWeeks;
+      break;
+    case 'Line_4':
+      ProductData = AllData.Line_4.equipmentProductWeeks;
+      break;
+  }
+
+  return (
+    <StyledTableContainer>
+      <Table>
+        <TableHead>
+          <StyledTableRow>
+            <StyledTableCell align="center">{intl.get('SectionName')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('EquipmentName')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
+          </StyledTableRow>
+        </TableHead>
+        <TableBody>
+          {ProductData.map((item, index) => (
+            <StyledTableRow key={index}>
+              <StyledTableCell align="center">{item.sectionName}</StyledTableCell>
+              <StyledTableCell align="center">{item.equipmentName}</StyledTableCell>
+              <StyledTableCell align="center">{item.inputNum}</StyledTableCell>
+              <StyledTableCell align="center">{item.outputNum}</StyledTableCell>
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </StyledTableContainer>
+  )
+}
+
+export default RightTableWeekE;
--- a/src/page/MainE/TopE.tsx
+++ b/src/page/MainE/TopE.tsx
@@ -0,0 +1,31 @@
+import React, {useContext, useState} from "react";
+import intl from "react-intl-universal";
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import {useAppSelector} from "../../store/hooks";
+import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
+import {selectChangeLineID} from "../../store/ChangeLineID";
+import ChangeLangButton from "../Component/ChangeLangButton";
+import ChangeFullButton from "../Component/ChangeFullButton";
+import {ThisLineID} from "../../context/ThisLineID";
+
+function TopE() {
+  const contextLineID = useContext(ThisLineID);
+  const Css = useAppSelector(selectChangeLangAndCss);
+  const LineID = contextLineID;
+  return (
+    <div className="flex-row">
+      <div className="block_28 flex-row">
+        <div className="image-wrapper_3 flex-col justify-between">
+          <div className="label_1"/>
+          {/*<div className="image_1"/>*/}
+        </div>
+        <span className={Css.text_1}>{intl.get('TITLE_E') + "(" + intl.get('ProductLine') + LineID + ")"}</span>
+      </div>
+      <ChangeLangButton/>
+      <ChangeFullButton/>
+    </div>
+  );
+}
+
+export default TopE;
--- a/src/page/MainP/Center.tsx
+++ b/src/page/MainP/Center.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import intl from "react-intl-universal";
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import CenterUp from "./CenterUp";
+import CenterDown from "./CenterDown";
+
+function Center() {
+  return (
+    <div className="group_72 flex-col">
+      <CenterUp/>
+      <CenterDown/>
+    </div>
+  );
+}
+
+export default Center;
--- a/src/page/MainP/CenterDown.tsx
+++ b/src/page/MainP/CenterDown.tsx
@@ -0,0 +1,59 @@
+import React, {useState} from "react";
+import intl from "react-intl-universal";
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import "../style/standard.css"
+import CenterDownChartDay from "./CenterDown/CenterDownChartDay";
+import {ToggleButtonGroup} from "@mui/material";
+import {StyledToggleButton} from "../Component/StyledTable";
+import TabPanel from "../Component/TabPanel";
+import CenterDownChartWeek from "./CenterDown/CenterDownChartWeek";
+import CenterDownChartMonth from "./CenterDown/CenterDownChartMonth";
+
+function CenterDown() {
+  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="block_18 fineWin">
+      <div className="fineWin-footer"/>
+      <div className="group_74 flex-col">
+        <div className="group_75 flex-row">
+          <div className="box_24 flex-col"/>
+          <span className="text_97">{intl.get('YieldLineChart')}</span>
+          <ToggleButtonGroup value={time} onChange={handleAlignment} exclusive={true} sx={{marginLeft: "480px"}}>
+            <StyledToggleButton value={1}>
+              {intl.get('ThisDay')}
+            </StyledToggleButton>
+            <StyledToggleButton value={2}>
+              {intl.get('ThisWeek')}
+            </StyledToggleButton>
+            <StyledToggleButton value={3}>
+              {intl.get('ThisMonth')}
+            </StyledToggleButton>
+          </ToggleButtonGroup>
+        </div>
+        <div className={"CenterDownAreaWidthAndHeight"}>
+          <TabPanel index={1} value={time}><CenterDownChartDay/></TabPanel>
+          <TabPanel index={2} value={time}><CenterDownChartWeek/></TabPanel>
+          <TabPanel index={3} value={time}><CenterDownChartMonth/></TabPanel>
+        </div>
+
+      </div>
+    </div>
+  );
+}
+
+export default CenterDown;
--- a/src/page/MainP/CenterDown/CenterDownChartDay.tsx
+++ b/src/page/MainP/CenterDown/CenterDownChartDay.tsx
@@ -0,0 +1,95 @@
+import React, {useEffect, useRef} from "react";
+import intl from "react-intl-universal";
+import * as echarts from 'echarts';
+
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+import theme from "../../style/theme";
+
+import {useAppSelector} from "../../../store/hooks";
+import {selectTodayProductionRates} from "../../../store/ProductionMonitoringEntity";
+
+
+function CenterDownChartDay() {
+  const CenterDownChartRef = useRef(null)
+  const todayProductionRates = useAppSelector(selectTodayProductionRates);
+  let ValueSeries: any[] = [];
+  let xAxisData: Array<string> = [];
+  // @ts-ignore
+  todayProductionRates[Object.keys(todayProductionRates)[0]].map((item) => {
+    xAxisData.push(new Date(item.time).toLocaleTimeString('en-GB', {hour: '2-digit', minute: '2-digit'}))
+  })
+
+  for (let item in todayProductionRates) {
+    let dataValue: Array<number> = []
+    // @ts-ignore
+    todayProductionRates[item].map((item) => {
+      dataValue.push(item.passRate);
+    })
+    ValueSeries.push({
+      name: item,
+      data: dataValue,
+      lineStyle: {width: 1},
+      symbol: "roundRect",
+      type: "line",
+      label: {show: true, color: 'white'}
+    })
+  }
+
+  useEffect(() => {
+    // @ts-ignore
+    let chartInstance = echarts.init(CenterDownChartRef.current, theme);
+
+    const option = {
+      grid: {
+        top: "15%",
+        bottom: "0%",
+        left: "1.5%",
+        right: "0",
+        containLabel: true,
+      },
+      legend: {
+        show: true,
+        selectedMode: false,
+        itemHeight: 8,
+        itemWidth: 13,
+        textStyle: {
+          fontSize: 10,
+        }
+      },
+      xAxis: {
+        type: 'category',
+        data: xAxisData,
+        splitLine: {
+          show: false,
+        }
+      },
+      yAxis: {
+        type: 'value',
+        name: intl.get('Output'),
+        scale: true,
+        nameTextStyle: {
+          align: "right",
+          fontSize: 11,
+          color: "rgba(255, 255, 255, 1)",
+          verticalAlign: "middle",
+          padding: [0, 5, 0, 0]
+        }
+      },
+      series: ValueSeries
+    }
+
+    chartInstance.setOption(option);
+    chartInstance.resize();
+    return () => {
+      chartInstance.dispose()
+    }
+  })
+
+  return (
+    <div ref={CenterDownChartRef} className="chart2"/>
+  );
+}
+
+export default CenterDownChartDay;
--- a/src/page/MainP/CenterDown/CenterDownChartMonth.tsx
+++ b/src/page/MainP/CenterDown/CenterDownChartMonth.tsx
@@ -0,0 +1,102 @@
+import React, {useEffect, useRef} from "react";
+import intl from "react-intl-universal";
+import * as echarts from 'echarts';
+
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+import theme from "../../style/theme";
+
+import {useAppSelector} from "../../../store/hooks";
+import {selectMonthProductionRates} from "../../../store/ProductionMonitoringEntity";
+
+
+function CenterDownChartMonth() {
+  const CenterDownChartRef = useRef(null)
+  const ProductionRates = useAppSelector(selectMonthProductionRates);
+  let ValueSeries: any[] = [];
+  let xAxisData: Array<string> = [];
+  // @ts-ignore
+  ProductionRates[Object.keys(ProductionRates)[0]].map((item) => {
+    xAxisData.push(new Date(item.time).toLocaleDateString('en-US', {
+      month: '2-digit',
+      day: '2-digit',
+    }))
+  })
+
+  for (let item in ProductionRates) {
+    let dataValue: Array<number> = []
+
+    // @ts-ignore
+    ProductionRates[item].map((item) => {
+      dataValue.push(item.passRate);
+    })
+
+    ValueSeries.push({
+      name: item,
+      data: dataValue,
+      lineStyle: {width: 2},
+      symbol: "roundRect",
+      type: "line",
+      label: {show: true, color: 'white'}
+    })
+  }
+
+
+  useEffect(() => {
+    // @ts-ignore
+    let chartInstance = echarts.init(CenterDownChartRef.current, theme);
+
+    const option = {
+      grid: {
+        top: "15%",
+        bottom: "0%",
+        left: "1.5%",
+        right: "0",
+        containLabel: true,
+      },
+      legend: {
+        show: true,
+        selectedMode: false,
+        itemHeight: 8,
+        itemWidth: 13,
+        textStyle: {
+          fontSize: 10,
+        }
+      },
+      xAxis: {
+        type: 'category',
+        data: xAxisData,
+        splitLine: {
+          show: false,
+        }
+      },
+      yAxis: {
+        type: 'value',
+        name: intl.get('Output'),
+        scale: true,
+        nameTextStyle: {
+          align: "right",
+          fontSize: 11,
+          color: "rgba(255, 255, 255, 1)",
+          verticalAlign: "middle",
+          padding: [0, 5, 0, 0]
+        }
+      },
+      series: ValueSeries
+    }
+
+    chartInstance.setOption(option);
+    chartInstance.resize();
+
+    return () => {
+      chartInstance.dispose()
+    }
+  })
+
+  return (
+    <div ref={CenterDownChartRef} className="chart2"/>
+  );
+}
+
+export default CenterDownChartMonth;
--- a/src/page/MainP/CenterDown/CenterDownChartWeek.tsx
+++ b/src/page/MainP/CenterDown/CenterDownChartWeek.tsx
@@ -0,0 +1,101 @@
+import React, {useEffect, useRef} from "react";
+import intl from "react-intl-universal";
+import * as echarts from 'echarts';
+
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+import theme from "../../style/theme";
+
+import {useAppSelector} from "../../../store/hooks";
+import {selectWeekProductionRates} from "../../../store/ProductionMonitoringEntity";
+
+
+function CenterDownChartWeek() {
+  const CenterDownChartRef = useRef(null)
+  const ProductionRates = useAppSelector(selectWeekProductionRates);
+  let ValueSeries: any[] = [];
+  let xAxisData: Array<string> = [];
+  // @ts-ignore
+  ProductionRates[Object.keys(ProductionRates)[0]].map((item) => {
+    xAxisData.push(new Date(item.time).toLocaleDateString('en-US', {
+      month: '2-digit',
+      day: '2-digit',
+      weekday: 'short',
+    }))
+  })
+
+  for (let item in ProductionRates) {
+    let dataValue: Array<number> = []
+    // @ts-ignore
+    ProductionRates[item].map((item) => {
+      dataValue.push(item.passRate);
+    })
+    ValueSeries.push({
+      name: item,
+      data: dataValue,
+      lineStyle: {width: 2},
+      symbol: "roundRect",
+      type: "line",
+      label: {show: true, color: 'white'}
+    })
+  }
+
+
+  useEffect(() => {
+    // @ts-ignore
+    let chartInstance = echarts.init(CenterDownChartRef.current, theme);
+
+    const option = {
+      grid: {
+        top: "15%",
+        bottom: "0%",
+        left: "1.5%",
+        right: "0",
+        containLabel: true,
+      },
+      legend: {
+        show: true,
+        selectedMode: false,
+        itemHeight: 8,
+        itemWidth: 13,
+        textStyle: {
+          fontSize: 10,
+        }
+      },
+      xAxis: {
+        type: 'category',
+        data: xAxisData,
+        splitLine: {
+          show: false,
+        }
+      },
+      yAxis: {
+        type: 'value',
+        name: intl.get('Output'),
+        scale: true,
+        nameTextStyle: {
+          align: "right",
+          fontSize: 11,
+          color: "rgba(255, 255, 255, 1)",
+          verticalAlign: "middle",
+          padding: [0, 5, 0, 0]
+        }
+      },
+      series: ValueSeries
+    }
+
+    chartInstance.setOption(option);
+    chartInstance.resize();
+
+    return () => {
+      chartInstance.dispose()
+    }
+  })
+
+  return (
+    <div ref={CenterDownChartRef} className="chart2"/>
+  );
+}
+
+export default CenterDownChartWeek;
--- a/src/page/MainP/CenterUp.tsx
+++ b/src/page/MainP/CenterUp.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from "react"; // 使用useState钩子来管理状态
+import intl from "react-intl-universal";
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import "../style/standard.css"
+import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1";
+import MybabylonJS_2 from "../../babylonjs/MybabylonJS_2";
+import { number } from "echarts";
+import { firePixelShader } from "@babylonjs/materials/fire/fire.fragment";
+
+function CenterUp() {
+
+// 使用 useState 钩子来管理当前的序号状态
+const [modelIndex, setModelIndex] = useState(1); // 默认序号为 1
+
+// 定义切换模型序号的函数
+const prevModelIndex = () => {
+  // 当前序号减 1，如果小于 1，则变为 5
+  setModelIndex((currentModelIndex) => (currentModelIndex - 1 + 5) % 5);
+};
+
+const nextModelIndex = () => {
+  // 当前序号加 1，如果大于 5，则变为 1
+  setModelIndex((currentModelIndex) => (currentModelIndex + 1) % 5);
+};
+
+
+    
+  return (
+    <div className="block_16 flex-col fineWin">
+      <div className="fineWin-footer"/>
+      <MybabylonJS_1 modelPath={`line${modelIndex+1}`} />
+      {/* 添加按钮来切换组件 */}
+      <button className="centerButton_1" onClick={prevModelIndex}>上一个组件</button>
+      <button className="centerButton_2" onClick={nextModelIndex}>下一个组件</button>
+      <h5 className="centerButton_2" >{modelIndex}</h5>
+    </div>
+  );
+}
+
+export default CenterUp;
--- a/src/page/MainP/CenterUp_Backup.tsx
+++ b/src/page/MainP/CenterUp_Backup.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from "react"; // 使用useState钩子来管理状态
+import intl from "react-intl-universal";
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import "../style/standard.css"
+import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1";
+import MybabylonJS_2 from "../../babylonjs/MybabylonJS_2";
+import { number } from "echarts";
+import { firePixelShader } from "@babylonjs/materials/fire/fire.fragment";
+
+function CenterUp() {
+  // 使用useState来初始化当前显示的组件
+  const [components, setComponents] = useState([MybabylonJS_1, MybabylonJS_2]);
+  const [currentComponentIndex, setCurrentComponentIndex] = useState(0);
+  // 切换组件的函数
+// 切换组件的函数
+const switchComponent = (direction: number) => {
+  const nextIndex = currentComponentIndex + direction;
+  if (nextIndex >= 0 && nextIndex < components.length) {
+    setCurrentComponentIndex(nextIndex);
+  }
+};
+  // 渲染组件列表
+  const renderComponents = () => {
+    return components.map((Component, index) => (
+      <div key={index} style={{ display: index === currentComponentIndex ? 'block' : 'none' }}>
+        {/* <Component /> */}
+      </div>
+    ));
+  };
+
+
+    
+  return (
+    <div className="block_16 flex-col fineWin">
+      <div className="fineWin-footer"/>
+      {/* 渲染当前组件 */}
+      {renderComponents()}
+      {/* 添加按钮来切换组件 */}
+      <button className="centerButton_1" onClick={() => switchComponent(-1)}>上一个组件</button>
+      <button className="centerButton_2" onClick={() => switchComponent(1)}>下一个组件</button>
+    </div>
+  );
+}
+
+export default CenterUp;
--- a/src/page/MainP/Left.tsx
+++ b/src/page/MainP/Left.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import intl from "react-intl-universal";
+
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import LeftUp from "./LeftUp";
+import LeftDown from "./LeftDown";
+
+function Left() {
+
+  return (
+    <div className="group_61 flex-col">
+      <LeftUp/>
+      <LeftDown/>
+    </div>
+  );
+}
+
+export default Left;
--- a/src/page/MainP/LeftDown.tsx
+++ b/src/page/MainP/LeftDown.tsx
@@ -0,0 +1,49 @@
+import React, {useEffect, useRef, useState} from "react";
+import intl from "react-intl-universal";
+import * as echarts from 'echarts';
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import "../style/standard.css"
+import ChartDay from "./LeftDown/ChartDay";
+import {useAppSelector} from "../../store/hooks";
+import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
+import ChartWeek from "./LeftDown/ChartWeek";
+import ChartMonth from "./LeftDown/ChartMonth";
+
+function LeftDown() {
+  const Css = useAppSelector(selectChangeLangAndCss);
+  return (
+    <div className="block_5 flex-col fineWin">
+      <div className="fineWin-footer"/>
+      <div className="group_62 flex-row justify-between">
+        <div className="block_6 flex-col"/>
+        <span className="text_33">{intl.get('eachLineInputAndOutput')}</span>
+      </div>
+
+      <div className="group_63 flex-row">
+        <div className="box_4 flex-col"/>
+        <span className={Css.text_34}>{intl.get('ThisDay')}</span>
+        <div className="box_5 flex-col"/>
+      </div>
+      <ChartDay/>
+
+      <div className="group_63 flex-row">
+        <div className="box_4 flex-col"/>
+        <span className={Css.text_34}>{intl.get('ThisWeek')}</span>
+        <div className="box_5 flex-col"/>
+      </div>
+      <ChartWeek/>
+
+
+      <div className="group_63 flex-row">
+        <div className="box_4 flex-col"/>
+        <span className={Css.text_34}>{intl.get('ThisMonth')}</span>
+        <div className="box_5 flex-col"/>
+      </div>
+      <ChartMonth/>
+
+    </div>
+  );
+}
+
+export default LeftDown;
--- a/src/page/MainP/LeftDown/ChartDay.tsx
+++ b/src/page/MainP/LeftDown/ChartDay.tsx
@@ -0,0 +1,91 @@
+import React, {useEffect, useRef, useState} from "react";
+import intl from "react-intl-universal";
+import * as echarts from 'echarts';
+
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+import theme from "../../style/theme";
+import {useAppSelector} from "../../../store/hooks";
+import {selectTodayProductionDets} from "../../../store/ProductionMonitoringEntity";
+
+const color = ["#50f4e3", "#c69dff", "#ffb70c", "#1a99ff",]
+
+interface barValue {
+  value: number,
+  itemStyle: {
+    color: string
+  }
+}
+
+function ChartDay() {
+  const chartRef = useRef(null)
+  const ProductionDets = useAppSelector(selectTodayProductionDets);
+
+  useEffect(() => {
+    // @ts-ignore
+    let chartInstance = echarts.init(chartRef.current, theme);
+    const lineNameList: Array<string> = [];
+    const outputNumList: Array<barValue> = [];
+    ProductionDets.map((item, index) => {
+      lineNameList.push(item.lineName);
+      outputNumList.push({value: item.outputNum, itemStyle: {color: color[index]}});
+    })
+
+    const option = {
+      grid: {
+        top: "15%",
+        bottom: "0%",
+        left: "5%",
+        right: "5%",
+        containLabel: true,
+      },
+      xAxis: {
+        type: 'category',
+        data: lineNameList,
+        splitLine: {
+          show: false,
+        }
+      },
+      yAxis: {
+        type: 'value',
+        name: intl.get('Output'),
+        scale: false,
+        nameTextStyle: {
+          align: "right",
+          fontSize: 10,
+          color: "rgba(255, 255, 255, 1)",
+          verticalAlign: "middle",
+          padding: [0, 8, 0, 0]
+        }
+      },
+      series: [
+        {
+          data: outputNumList,
+          type: 'bar',
+          barWidth: 20,
+          symbol: "none",
+          label: {
+            show: true,
+            rotate: 90,
+            fontSize: 16,
+            color: "rgba(255, 255, 255, 1)",
+            offset:[0,22]
+          }
+        }
+      ]
+    }
+
+    chartInstance.setOption(option);
+    chartInstance.resize();
+    return () => {
+      chartInstance.dispose()
+    }
+  })
+
+  return (
+    <div ref={chartRef} className="chart1"/>
+  );
+}
+
+export default ChartDay;
--- a/src/page/MainP/LeftDown/ChartMonth.tsx
+++ b/src/page/MainP/LeftDown/ChartMonth.tsx
@@ -0,0 +1,91 @@
+import React, {useEffect, useRef, useState} from "react";
+import intl from "react-intl-universal";
+import * as echarts from 'echarts';
+
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+import theme from "../../style/theme";
+import {useAppSelector} from "../../../store/hooks";
+import {selectMonthProductionDets} from "../../../store/ProductionMonitoringEntity";
+
+const color = ["#50f4e3", "#c69dff", "#ffb70c", "#1a99ff",]
+
+interface barValue {
+  value: number,
+  itemStyle: {
+    color: string
+  }
+}
+
+function ChartMonth() {
+  const chartRef = useRef(null)
+  const ProductionDets = useAppSelector(selectMonthProductionDets);
+
+  useEffect(() => {
+    // @ts-ignore
+    let chartInstance = echarts.init(chartRef.current, theme);
+    const lineNameList: Array<string> = [];
+    const outputNumList: Array<barValue> = [];
+    ProductionDets.map((item, index) => {
+      lineNameList.push(item.lineName);
+      outputNumList.push({value: item.outputNum, itemStyle: {color: color[index]}});
+    })
+
+    const option = {
+      grid: {
+        top: "15%",
+        bottom: "0%",
+        left: "5%",
+        right: "5%",
+        containLabel: true,
+      },
+      xAxis: {
+        type: 'category',
+        data: lineNameList,
+        splitLine: {
+          show: false,
+        }
+      },
+      yAxis: {
+        type: 'value',
+        name: intl.get('Output'),
+        scale: false,
+        nameTextStyle: {
+          align: "right",
+          fontSize: 10,
+          color: "rgba(255, 255, 255, 1)",
+          verticalAlign: "middle",
+          padding: [0, 8, 0, 0]
+        }
+      },
+      series: [
+        {
+          data: outputNumList,
+          type: 'bar',
+          barWidth: 20,
+          symbol: "none",
+          label: {
+            show: true,
+            rotate: 90,
+            fontSize: 16,
+            color: "rgba(255, 255, 255, 1)",
+            offset:[0,22]
+          }
+        }
+      ]
+    }
+
+    chartInstance.setOption(option);
+    chartInstance.resize();
+    return () => {
+      chartInstance.dispose()
+    }
+  })
+
+  return (
+    <div ref={chartRef} className="chart1"/>
+  );
+}
+
+export default ChartMonth;
--- a/src/page/MainP/LeftDown/ChartWeek.tsx
+++ b/src/page/MainP/LeftDown/ChartWeek.tsx
@@ -0,0 +1,91 @@
+import React, {useEffect, useRef, useState} from "react";
+import intl from "react-intl-universal";
+import * as echarts from 'echarts';
+
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+import theme from "../../style/theme";
+import {useAppSelector} from "../../../store/hooks";
+import {selectWeekProductionDets} from "../../../store/ProductionMonitoringEntity";
+
+const color = ["#50f4e3", "#c69dff", "#ffb70c", "#1a99ff",]
+
+interface barValue {
+  value: number,
+  itemStyle: {
+    color: string
+  }
+}
+
+function ChartWeek() {
+  const chartRef = useRef(null)
+  const ProductionDets = useAppSelector(selectWeekProductionDets);
+
+  useEffect(() => {
+    // @ts-ignore
+    let chartInstance = echarts.init(chartRef.current, theme);
+    const lineNameList: Array<string> = [];
+    const outputNumList: Array<barValue> = [];
+    ProductionDets.map((item, index) => {
+      lineNameList.push(item.lineName);
+      outputNumList.push({value: item.outputNum, itemStyle: {color: color[index]}});
+    })
+
+    const option = {
+      grid: {
+        top: "15%",
+        bottom: "0%",
+        left: "5%",
+        right: "5%",
+        containLabel: true,
+      },
+      xAxis: {
+        type: 'category',
+        data: lineNameList,
+        splitLine: {
+          show: false,
+        }
+      },
+      yAxis: {
+        type: 'value',
+        name: intl.get('Output'),
+        scale: false,
+        nameTextStyle: {
+          align: "right",
+          fontSize: 10,
+          color: "rgba(255, 255, 255, 1)",
+          verticalAlign: "middle",
+          padding: [0, 8, 0, 0]
+        }
+      },
+      series: [
+        {
+          data: outputNumList,
+          type: 'bar',
+          barWidth: 20,
+          symbol: "none",
+          label: {
+            show: true,
+            rotate: 90,
+            fontSize: 16,
+            color: "rgba(255, 255, 255, 1)",
+            offset:[0,22]
+          }
+        }
+      ]
+    }
+
+    chartInstance.setOption(option);
+    chartInstance.resize();
+    return () => {
+      chartInstance.dispose()
+    }
+  })
+
+  return (
+    <div ref={chartRef} className="chart1"/>
+  );
+}
+
+export default ChartWeek;
--- a/src/page/MainP/LeftUp.tsx
+++ b/src/page/MainP/LeftUp.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import intl from "react-intl-universal";
+
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import "../style/standard.css"
+import LeftUpTable from "./LeftUp/LeftUpTable";
+
+import {useAppSelector} from "../../store/hooks";
+import {selectSumNumber} from "../../store/ProductionMonitoringEntity";
+
+function LeftUp() {
+  const data = useAppSelector(selectSumNumber);
+
+  return (
+    <div className="block_3 flex-col fineWin">
+      <div className="fineWin-footer"/>
+      <div className="box_77 flex-row justify-between">
+        <div className="block_4 flex-col"/>
+        <span className="text_2">{intl.get('alarmInfo')}</span>
+      </div>
+      <span className="text_3">-&nbsp;{intl.get("alarmsNumber")}&nbsp;-</span>
+      <span className="text_4">{data}</span>
+      <div className="leftUpTableArea">
+        <LeftUpTable/>
+      </div>
+    </div>
+  );
+}
+
+export default LeftUp;
--- a/src/page/MainP/LeftUp/LeftUpTable.tsx
+++ b/src/page/MainP/LeftUp/LeftUpTable.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import intl from "react-intl-universal";
+
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+import {Table, TableBody, TableHead,} from "@mui/material";
+
+import {useAppSelector} from "../../../store/hooks";
+import {selectAlarms} from "../../../store/ProductionMonitoringEntity";
+import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
+
+function LeftUpTable() {
+  const alarms = useAppSelector(selectAlarms);
+
+  return (
+    <StyledTableContainer>
+      <Table>
+        <TableHead>
+          <StyledTableRow>
+            <StyledTableCell align="center" sx={{minWidth: 35}}>{intl.get('serialNo')}</StyledTableCell>
+            <StyledTableCell align="center" sx={{minWidth: 70}}>{intl.get('alarmTime')}</StyledTableCell>
+            <StyledTableCell align="center" sx={{minWidth: 110}}>{intl.get('alarmCode')}</StyledTableCell>
+            <StyledTableCell align="center" sx={{
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis'
+            }}>{intl.get('alarmContent')}</StyledTableCell>
+          </StyledTableRow>
+        </TableHead>
+        <TableBody>
+          {alarms.map((alarm, index) => (
+            <StyledTableRow key={index}>
+              <StyledTableCell align="center">{index + 1}</StyledTableCell>
+              <StyledTableCell align="center">{alarm.alarmTime}</StyledTableCell>
+              <StyledTableCell align="center">{alarm.alarmCode}</StyledTableCell>
+              <StyledTableCell align="center" sx={{
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis'
+              }}>{alarm.alarmContent}</StyledTableCell>
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </StyledTableContainer>
+  );
+}
+
+export default LeftUpTable;
--- a/src/page/MainP/MainP.tsx
+++ b/src/page/MainP/MainP.tsx
@@ -0,0 +1,28 @@
+import React, {useContext} from "react";
+import intl from "react-intl-universal";
+
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+import TopP from "./TopP";
+import {Observable} from "@babylonjs/core";
+import {MyObservable} from "../../context/MyObservable";
+import ReactDOM from "react-dom/client";
+
+function MainP() {
+
+  return (
+    <React.Fragment>
+      <TopP/>
+      <div className="block_32 flex-row">
+        <Left/>
+        <Center/>
+        <Right/>
+      </div>
+    </React.Fragment>
+  );
+}
+
+export default MainP;
--- a/src/page/MainP/Right.tsx
+++ b/src/page/MainP/Right.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import intl from "react-intl-universal";
+
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import RightUp from "./RightUp";
+import RightDown from "./RightDown";
+
+
+function Right() {
+  return (
+    <div className="box_34 flex-col">
+      <RightUp/>
+      <RightDown/>
+    </div>
+  );
+}
+
+export default Right;
+
--- a/src/page/MainP/RightDown.tsx
+++ b/src/page/MainP/RightDown.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import intl from "react-intl-universal";
+
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import "../style/standard.css"
+import RightDownTableDay from "./RightDown/RightDownTableDay";
+import RightDownTableWeek from "./RightDown/RightDownTableWeek";
+import RightDownTableMonth from "./RightDown/RightDownTableMonth";
+import {useAppSelector} from "../../store/hooks";
+import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
+
+function RightDown() {
+  const Css = useAppSelector(selectChangeLangAndCss);
+  return (
+    <div className="box_40 flex-col fineWin">
+      <div className="fineWin-footer"/>
+
+      <div className="image-text_16 flex-row justify-between">
+        <div className="group_27 flex-col"/>
+        <span className="text-group_2">{intl.get('InputAndOutputTable')}</span>
+      </div>
+
+      <div className="group_63_2 flex-row">
+        <div className="box_4 flex-col"/>
+        <span className={Css.text_34}>{intl.get('ThisDay')}</span>
+        <div className="box_5 flex-col"/>
+      </div>
+
+      <div className="rightDownTableArea">
+        <RightDownTableDay/>
+      </div>
+
+      <div className="group_63_2 flex-row">
+        <div className="box_4 flex-col"/>
+        <span className={Css.text_34}>{intl.get('ThisWeek')}</span>
+        <div className="box_5 flex-col"/>
+      </div>
+
+      <div className="rightDownTableArea">
+        <RightDownTableWeek/>
+      </div>
+
+      <div className="group_63_2 flex-row">
+        <div className="box_4 flex-col"/>
+        <span className={Css.text_34}>{intl.get('ThisMonth')}</span>
+        <div className="box_5 flex-col"/>
+      </div>
+
+      <div className="rightDownTableArea">
+        <RightDownTableMonth/>
+      </div>
+
+    </div>
+  );
+}
+
+export default RightDown;
--- a/src/page/MainP/RightDown/RightDownTableDay.tsx
+++ b/src/page/MainP/RightDown/RightDownTableDay.tsx
@@ -0,0 +1,40 @@
+import React, {useEffect, useRef, useState} from "react";
+import intl from "react-intl-universal";
+
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+import {Table, TableBody, TableHead,} from "@mui/material";
+import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
+import {useAppSelector} from "../../../store/hooks";
+import {selectTodayProductionDets} from "../../../store/ProductionMonitoringEntity";
+
+function RightDownTableDay() {
+  const todayProductionDets = useAppSelector(selectTodayProductionDets);
+  return (
+    <StyledTableContainer>
+      <Table>
+        <TableHead>
+          <StyledTableRow>
+            <StyledTableCell align="center">{intl.get('ProductionLineName')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('PassRate')}</StyledTableCell>
+          </StyledTableRow>
+        </TableHead>
+        <TableBody>
+          {todayProductionDets.map((todayProductionDet) => (
+            <StyledTableRow key={todayProductionDet.lineName}>
+              <StyledTableCell align="center">{todayProductionDet.lineName}</StyledTableCell>
+              <StyledTableCell align="center">{todayProductionDet.inputNum}</StyledTableCell>
+              <StyledTableCell align="center">{todayProductionDet.outputNum}</StyledTableCell>
+              <StyledTableCell align="center">{todayProductionDet.passRate}</StyledTableCell>
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </StyledTableContainer>
+  );
+}
+
+export default RightDownTableDay;
--- a/src/page/MainP/RightDown/RightDownTableMonth.tsx
+++ b/src/page/MainP/RightDown/RightDownTableMonth.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import intl from "react-intl-universal";
+
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+import {Table, TableBody, TableHead,} from "@mui/material";
+import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
+import {useAppSelector} from "../../../store/hooks";
+import {selectMonthProductionDets} from "../../../store/ProductionMonitoringEntity";
+
+function RightDownTableMonth() {
+  const monthProductionRates = useAppSelector(selectMonthProductionDets);
+  return (
+    <StyledTableContainer>
+      <Table>
+        <TableHead>
+          <StyledTableRow>
+            <StyledTableCell align="center">{intl.get('ProductionLineName')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('PassRate')}</StyledTableCell>
+          </StyledTableRow>
+        </TableHead>
+        <TableBody>
+          {monthProductionRates.map((monthProductionRate) => (
+            <StyledTableRow key={monthProductionRate.lineName}>
+              <StyledTableCell align="center">{monthProductionRate.lineName}</StyledTableCell>
+              <StyledTableCell align="center">{monthProductionRate.inputNum}</StyledTableCell>
+              <StyledTableCell align="center">{monthProductionRate.outputNum}</StyledTableCell>
+              <StyledTableCell align="center">{monthProductionRate.passRate}</StyledTableCell>
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </StyledTableContainer>
+  );
+}
+
+export default RightDownTableMonth;
--- a/src/page/MainP/RightDown/RightDownTableWeek.tsx
+++ b/src/page/MainP/RightDown/RightDownTableWeek.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import intl from "react-intl-universal";
+
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+import {Table, TableBody, TableHead,} from "@mui/material";
+import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
+import {useAppSelector} from "../../../store/hooks";
+import {selectWeekProductionDets} from "../../../store/ProductionMonitoringEntity";
+
+function RightDownTableWeek() {
+  const weekProductionDets = useAppSelector(selectWeekProductionDets);
+  return (
+    <StyledTableContainer>
+      <Table>
+        <TableHead>
+          <StyledTableRow>
+            <StyledTableCell align="center">{intl.get('ProductionLineName')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('PassRate')}</StyledTableCell>
+          </StyledTableRow>
+        </TableHead>
+        <TableBody>
+          {weekProductionDets.map((weekProductionDet) => (
+            <StyledTableRow key={weekProductionDet.lineName}>
+              <StyledTableCell align="center">{weekProductionDet.lineName}</StyledTableCell>
+              <StyledTableCell align="center">{weekProductionDet.inputNum}</StyledTableCell>
+              <StyledTableCell align="center">{weekProductionDet.outputNum}</StyledTableCell>
+              <StyledTableCell align="center">{weekProductionDet.passRate}</StyledTableCell>
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </StyledTableContainer>
+  );
+}
+
+export default RightDownTableWeek;
--- a/src/page/MainP/RightUp.tsx
+++ b/src/page/MainP/RightUp.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import intl from "react-intl-universal";
+
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import "../style/standard.css"
+import RightUpTable from "./RightUp/RightUpTable";
+
+function RightUp() {
+  return (
+    <div className="box_35 flex-row fineWin">
+      <div className="fineWin-footer"/>
+      <div className="box_78 flex-col">
+        <div className="group_78 flex-row justify-between">
+          <div className="box_36 flex-col"/>
+          <span className="text_123">{intl.get('InputAndOutputSummaryTable')}</span>
+        </div>
+        <div style={{marginTop: 13, marginLeft: 7, marginRight: 7,}}>
+          <RightUpTable/>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default RightUp;
--- a/src/page/MainP/RightUp/RightUpTable.tsx
+++ b/src/page/MainP/RightUp/RightUpTable.tsx
@@ -0,0 +1,39 @@
+import React, {useEffect, useRef, useState} from "react";
+import intl from "react-intl-universal";
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+import {Table, TableBody, TableHead} from "@mui/material";
+import {useAppSelector} from "../../../store/hooks";
+import {selectSumProductionDets} from "../../../store/ProductionMonitoringEntity";
+import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
+
+function RightUpTable() {
+  const sumProductionDets = useAppSelector(selectSumProductionDets);
+  return (
+    <StyledTableContainer>
+      <Table>
+        <TableHead>
+          <StyledTableRow>
+            <StyledTableCell align="center">{intl.get('ProductionLineName')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
+            <StyledTableCell align="center">{intl.get('PassRate')}</StyledTableCell>
+          </StyledTableRow>
+        </TableHead>
+        <TableBody>
+          {sumProductionDets.map((sumProductionDets) => (
+            <StyledTableRow key={sumProductionDets.lineName}>
+              <StyledTableCell align="center">{sumProductionDets.lineName}</StyledTableCell>
+              <StyledTableCell align="center">{sumProductionDets.inputNum}</StyledTableCell>
+              <StyledTableCell align="center">{sumProductionDets.outputNum}</StyledTableCell>
+              <StyledTableCell align="center">{sumProductionDets.passRate}</StyledTableCell>
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </StyledTableContainer>
+  );
+}
+
+export default RightUpTable;
--- a/src/page/MainP/TopP.tsx
+++ b/src/page/MainP/TopP.tsx
@@ -0,0 +1,27 @@
+import React, {useState} from "react";
+import intl from "react-intl-universal";
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import {useAppSelector} from "../../store/hooks";
+import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
+import ChangeLangButton from "../Component/ChangeLangButton";
+import ChangeFullButton from "../Component/ChangeFullButton";
+
+function TopP() {
+  const Css = useAppSelector(selectChangeLangAndCss);
+  return (
+    <div className="flex-row">
+      <div className="block_28 flex-row">
+        <div className="image-wrapper_3 flex-col justify-between">
+          <div className="label_1"/>
+          {/*<div className="image_1"/>*/}
+        </div>
+        <span className={Css.text_1}>{intl.get('TITLE')}</span>
+      </div>
+      <ChangeLangButton/>
+      <ChangeFullButton/>
+    </div>
+  );
+}
+
+export default TopP;
--- a/src/page/MainQ/LeftQ.tsx
+++ b/src/page/MainQ/LeftQ.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import intl from "react-intl-universal";
+import '../../lanhuapp/common.css';
+import '../../lanhuapp/index.css';
+import {useAppSelector} from "../../store/hooks";
+import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
+import LeftTableDayQ from "./LeftQ/LeftTableDayQ";
+import LeftTableWeekQ from "./LeftQ/LeftTableWeekQ";
+import LeftTableMonthQ from "./LeftQ/LeftTableMonthQ";
+
+function LeftQ() {
+  const Css = useAppSelector(selectChangeLangAndCss);
+  return (
+    <div className="group_Q_left">
+      <div className="leftQ fineWin flex-col">
+        <div className="fineWin-footer"/>
+        <div className="box_77 flex-row justify-between">
+          <div className="block_6 flex-col"/>
+          <span className="text_2">{intl.get('DefectSummary')}</span>
+        </div>
+
+        <div className="group_63_3 flex-row">
+          <div className="box_4 flex-col"/>
+          <span className={Css.text_34}>{intl.get('ThisDay')}</span>
+          <div className="box_5 flex-col"/>
+        </div>
+
+        <div className="leftTableDayQ">
+          <LeftTableDayQ/>
+        </div>
+
+        <div className="group_63_3 flex-row">
+          <div className="box_4 flex-col"/>
+          <span className={Css.text_34}>{intl.get('ThisWeek')}</span>
+          <div className="box_5 flex-col"/>
+        </div>
+
+        <div className="leftTableWeekQ">
+          <LeftTableWeekQ/>
+        </div>
+
+        <div className="group_63_3 flex-row">
+          <div className="box_4 flex-col"/>
+          <span className={Css.text_34}>{intl.get('ThisMonth')}</span>
+          <div className="box_5 flex-col"/>
+        </div>
+
+        <div className="leftTableMonthQ">
+          <LeftTableMonthQ/>
+        </div>
+
+      </div>
+    </div>
+  )
+}
+
+export default LeftQ;
--- a/src/page/MainQ/LeftQ/LeftTableDayQ.tsx
+++ b/src/page/MainQ/LeftQ/LeftTableDayQ.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
+import {Table, TableBody, TableHead} from "@mui/material";
+import intl from "react-intl-universal";
+import {useAppSelector} from "../../../store/hooks";
+import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
+
+function LeftTableDayQ() {
+  const AllData = useAppSelector(selectQualityMonitorEntity);
+  const QualityAll = AllData.todayQualityAll;
+  const SlicedQualityAll = QualityAll.slice(0, 6)
+  return (
+    <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>
+          {SlicedQualityAll.map((item, index) => (
+            <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>
+  )
+}
+
+export default LeftTableDayQ;
--- a/src/page/MainQ/LeftQ/LeftTableMonthQ.tsx
+++ b/src/page/MainQ/LeftQ/LeftTableMonthQ.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
+import {Table, TableBody, TableHead} from "@mui/material";
+import intl from "react-intl-universal";
+import {useAppSelector} from "../../../store/hooks";
+import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
+
+function LeftTableMonthQ() {
+  const AllData = useAppSelector(selectQualityMonitorEntity);
+  const QualityAll = AllData.monthQualityAll;
+  const SlicedQualityAll = QualityAll.slice(0, 10)
+  return (
+    <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>
+          {SlicedQualityAll.map((item, index) => (
+            <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>
+  )
+}
+
+export default LeftTableMonthQ;
--- a/src/page/MainQ/LeftQ/LeftTableWeekQ.tsx
+++ b/src/page/MainQ/LeftQ/LeftTableWeekQ.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
+import {Table, TableBody, TableHead} from "@mui/material";
+import intl from "react-intl-universal";
+import {useAppSelector} from "../../../store/hooks";
+import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
+
+function LeftTableWeekQ() {
+  const AllData = useAppSelector(selectQualityMonitorEntity);
+  const QualityAll = AllData.weekQualityAll;
+  const SlicedQualityAll = QualityAll.slice(0, 9)
+  return (
+    <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>
+          {SlicedQualityAll.map((item, index) => (
+            <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>
+  )
+}
+
+export default LeftTableWeekQ;
--- a/src/page/MainQ/MainQ.tsx
+++ b/src/page/MainQ/MainQ.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import TopQ from "./TopQ";
+import LeftQ from "./LeftQ";
+import RightQ from "./RightQ";
+
+function MainQ() {
+  return (
+    <React.Fragment>
+      <TopQ/>
+      <div className="block_32 flex-row">
+        <LeftQ/>
+        <RightQ/>
+      </div>
+    </React.Fragment>
+  )
+}
+
+export default MainQ;
--- a/src/page/MainQ/RightQ.tsx
+++ b/src/page/MainQ/RightQ.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import RightTopQ from "./RightQ/RightTopQ";
+import RightMiddleLeftQ from "./RightQ/RightMiddleLeftQ";
+import RightMiddleRightQ from "./RightQ/RightMiddleRightQ";
+import RightDownLeftQ from "./RightQ/RightDownLeftQ";
+import RightDownRightQ from "./RightQ/RightDownRightQ";
+
+function RightQ() {
+  return (
+    <div className="group_Q_Right flex-col">
+      <RightTopQ/>
+      <div className="flex-row RightMiddle">
+        <RightMiddleLeftQ/>
+        <RightMiddleRightQ/>
+      </div>
+      <div className="flex-row RightMiddle">
+        <RightDownLeftQ/>
+        <RightDownRightQ/>
+      </div>
+    </div>
+  );
+}
+
+export default RightQ;
--- a/src/page/MainQ/RightQ/RightDownLeftQ.tsx
+++ b/src/page/MainQ/RightQ/RightDownLeftQ.tsx
@@ -0,0 +1,56 @@
+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;
--- a/src/page/MainQ/RightQ/RightDownRightQ.tsx
+++ b/src/page/MainQ/RightQ/RightDownRightQ.tsx
@@ -0,0 +1,55 @@
+import React, {useState} from "react";
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import intl from "react-intl-universal";
+import {StyledToggleButton} from "../../Component/StyledTable";
+import {ToggleButtonGroup} from "@mui/material";
+import TabPanel from "../../Component/TabPanel";
+import QualityRightTable from "../../Component/QualityRightTable";
+
+function RightDownRightQ() {
+  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 RightMiddleRightQ">
+      <div className="fineWin-footer"/>
+      <div className="box_77 flex-row justify-between">
+        <div className="box_36 flex-col"/>
+        <span className="text_2">{intl.get('DefectSummaryLine4')}</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_4"}
+                                                            timeName={"todayQualityLineAll"}/></TabPanel>
+        <TabPanel index={2} value={time}><QualityRightTable lineName={"Line_4"}
+                                                            timeName={"weekQualityLineAll"}/></TabPanel>
+        <TabPanel index={3} value={time}><QualityRightTable lineName={"Line_4"}
+                                                            timeName={"monthQualityLineAll"}/></TabPanel>
+      </div>
+    </div>
+  )
+}
+
+export default RightDownRightQ;
--- a/src/page/MainQ/RightQ/RightMiddleLeftQ.tsx
+++ b/src/page/MainQ/RightQ/RightMiddleLeftQ.tsx
@@ -0,0 +1,56 @@
+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 RightMiddleLeftQ() {
+  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('DefectSummaryLine1')}</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_1"}
+                                                            timeName={"todayQualityLineAll"}/></TabPanel>
+        <TabPanel index={2} value={time}><QualityRightTable lineName={"Line_1"}
+                                                            timeName={"weekQualityLineAll"}/></TabPanel>
+        <TabPanel index={3} value={time}><QualityRightTable lineName={"Line_1"}
+                                                            timeName={"monthQualityLineAll"}/></TabPanel>
+      </div>
+    </div>
+  )
+}
+
+export default RightMiddleLeftQ;
--- a/src/page/MainQ/RightQ/RightMiddleRightQ.tsx
+++ b/src/page/MainQ/RightQ/RightMiddleRightQ.tsx
@@ -0,0 +1,56 @@
+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 QualityRightTable from "../../Component/QualityRightTable";
+
+function RightMiddleRightQ() {
+  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 RightMiddleRightQ">
+      <div className="fineWin-footer"/>
+      <div className="box_77 flex-row justify-between">
+        <div className="box_36 flex-col"/>
+        <span className="text_2">{intl.get('DefectSummaryLine2')}</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_2"}
+                                                            timeName={"todayQualityLineAll"}/></TabPanel>
+        <TabPanel index={2} value={time}><QualityRightTable lineName={"Line_2"}
+                                                            timeName={"weekQualityLineAll"}/></TabPanel>
+        <TabPanel index={3} value={time}><QualityRightTable lineName={"Line_2"}
+                                                            timeName={"monthQualityLineAll"}/></TabPanel>
+      </div>
+    </div>
+  )
+}
+
+export default RightMiddleRightQ;
--- a/src/page/MainQ/RightQ/RightTopQ.tsx
+++ b/src/page/MainQ/RightQ/RightTopQ.tsx
@@ -0,0 +1,55 @@
+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;
--- a/src/page/MainQ/RightTopQ/RightTopChartDayQ.tsx
+++ b/src/page/MainQ/RightTopQ/RightTopChartDayQ.tsx
@@ -0,0 +1,113 @@
+import React, {useEffect, useRef} from "react";
+import intl from "react-intl-universal";
+import * as echarts from 'echarts';
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+import theme from "../../style/theme";
+import {useAppSelector} from "../../../store/hooks";
+import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
+
+function RightTopChartDayQ() {
+  const ChartRef = useRef(null)
+  const AllData = useAppSelector(selectQualityMonitorEntity);
+  const LineQualityAll = AllData.todayQualityLineAll;
+
+  let ValueSeries: any[] = [];
+  let xAxisData: Array<string> = [];
+
+  for (let item in LineQualityAll) {
+    // @ts-ignore
+    LineQualityAll[item].map((item) => {
+      if (!xAxisData.includes(item.content)) {
+        xAxisData.push(item.content)
+      }
+    })
+  }
+
+  for (let LineItem in LineQualityAll) {
+    let dataValue: Array<number> = []
+    xAxisData.map((TypeItem) => {
+      let thisdata = 0
+      // @ts-ignore
+      LineQualityAll[LineItem].map((item) => {
+        if (item.content == TypeItem) {
+          thisdata = thisdata + item.num;
+        }
+      })
+      dataValue.push(thisdata)
+    })
+    ValueSeries.push({
+      name: LineItem,
+      data: dataValue,
+      type: "bar",
+      itemStyle: {
+        borderRadius: [100, 100, 0, 0]
+      }
+    })
+  }
+  useEffect(() => {
+    // @ts-ignore
+    let chartInstance = echarts.init(ChartRef.current, theme);
+
+    const option = {
+      grid: {
+        top: "15%",
+        bottom: "0%",
+        left: "0%",
+        right: "0",
+        containLabel: true,
+      },
+      legend: {
+        show: true,
+        selectedMode: false,
+        itemHeight: 8,
+        itemWidth: 13,
+        textStyle: {
+          fontSize: 10,
+        }
+      },
+      xAxis: {
+        type: 'category',
+        data: xAxisData,
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {
+          width: 1200 / xAxisData.length,
+          interval: 0,
+          overflow: "truncate",
+        }
+      },
+      yAxis: {
+        type: 'value',
+        name: intl.get('DefectNumber'),
+        scale: false,
+        nameTextStyle: {
+          align: "left",
+          fontSize: 12,
+          color: "rgba(255, 255, 255, 1)",
+          verticalAlign: "middle",
+        }
+      },
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        borderWidth: 0,
+        textStyle: {
+          color: "rgba(255, 255, 255, 1)",
+          fontSize: 12
+        }
+      },
+      series: ValueSeries
+    }
+
+    chartInstance.setOption(option);
+    chartInstance.resize();
+  })
+  return (
+    <div ref={ChartRef} className="chart5"/>
+  )
+}
+
+export default RightTopChartDayQ;
--- a/src/page/MainQ/RightTopQ/RightTopChartMonthQ.tsx
+++ b/src/page/MainQ/RightTopQ/RightTopChartMonthQ.tsx
@@ -0,0 +1,115 @@
+import React, {useEffect, useRef} from "react";
+import intl from "react-intl-universal";
+import * as echarts from 'echarts';
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+import theme from "../../style/theme";
+import {useAppSelector} from "../../../store/hooks";
+import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
+
+function RightTopChartMonthQ() {
+  const ChartRef = useRef(null)
+  const AllData = useAppSelector(selectQualityMonitorEntity);
+  const LineQualityAll = AllData.monthQualityLineAll;
+
+  let ValueSeries: any[] = [];
+  let xAxisData: Array<string> = [];
+
+  for (let item in LineQualityAll) {
+    // @ts-ignore
+    LineQualityAll[item].map((item) => {
+      if (!xAxisData.includes(item.content)) {
+        xAxisData.push(item.content)
+      }
+    })
+  }
+
+  for (let LineItem in LineQualityAll) {
+    let dataValue: Array<number> = []
+    xAxisData.map((TypeItem) => {
+      let thisdata = 0
+      // @ts-ignore
+      LineQualityAll[LineItem].map((item) => {
+        if (item.content == TypeItem) {
+          thisdata = thisdata + item.num;
+        }
+      })
+      dataValue.push(thisdata)
+    })
+    ValueSeries.push({
+      name: LineItem,
+      data: dataValue,
+      type: "bar",
+      itemStyle: {
+        borderRadius: [100, 100, 0, 0]
+      }
+    })
+  }
+
+
+  useEffect(() => {
+    // @ts-ignore
+    let chartInstance = echarts.init(ChartRef.current, theme);
+
+    const option = {
+      grid: {
+        top: "15%",
+        bottom: "0%",
+        left: "0%",
+        right: "0",
+        containLabel: true,
+      },
+      legend: {
+        show: true,
+        selectedMode: false,
+        itemHeight: 8,
+        itemWidth: 13,
+        textStyle: {
+          fontSize: 10,
+        }
+      },
+      xAxis: {
+        type: 'category',
+        data: xAxisData,
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {
+          width: 1200 / xAxisData.length,
+          interval: 0,
+          overflow: "truncate",
+        }
+      },
+      yAxis: {
+        type: 'value',
+        name: intl.get('DefectNumber'),
+        scale: false,
+        nameTextStyle: {
+          align: "left",
+          fontSize: 12,
+          color: "rgba(255, 255, 255, 1)",
+          verticalAlign: "middle",
+        }
+      },
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        borderWidth: 0,
+        textStyle: {
+          color: "rgba(255, 255, 255, 1)",
+          fontSize: 12
+        }
+      },
+      series: ValueSeries
+    }
+
+    chartInstance.setOption(option);
+    chartInstance.resize();
+  })
+  return (
+    <div ref={ChartRef} className="chart5"/>
+  )
+}
+
+export default RightTopChartMonthQ;
--- a/src/page/MainQ/RightTopQ/RightTopChartWeekQ.tsx
+++ b/src/page/MainQ/RightTopQ/RightTopChartWeekQ.tsx
@@ -0,0 +1,115 @@
+import React, {useEffect, useRef} from "react";
+import intl from "react-intl-universal";
+import * as echarts from 'echarts';
+import '../../../lanhuapp/common.css';
+import "../../../lanhuapp/index.css";
+import "../../style/standard.css"
+import theme from "../../style/theme";
+import {useAppSelector} from "../../../store/hooks";
+import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
+
+function RightTopChartWeekQ() {
+  const ChartRef = useRef(null)
+  const AllData = useAppSelector(selectQualityMonitorEntity);
+  const LineQualityAll = AllData.weekQualityLineAll;
+
+  let ValueSeries: any[] = [];
+  let xAxisData: Array<string> = [];
+
+  for (let item in LineQualityAll) {
+    // @ts-ignore
+    LineQualityAll[item].map((item) => {
+      if (!xAxisData.includes(item.content)) {
+        xAxisData.push(item.content)
+      }
+    })
+  }
+
+  for (let LineItem in LineQualityAll) {
+    let dataValue: Array<number> = []
+    xAxisData.map((TypeItem) => {
+      let thisdata = 0
+      // @ts-ignore
+      LineQualityAll[LineItem].map((item) => {
+        if (item.content == TypeItem) {
+          thisdata = thisdata + item.num;
+        }
+      })
+      dataValue.push(thisdata)
+    })
+    ValueSeries.push({
+      name: LineItem,
+      data: dataValue,
+      type: "bar",
+      itemStyle: {
+        borderRadius: [100, 100, 0, 0]
+      }
+    })
+  }
+
+
+  useEffect(() => {
+    // @ts-ignore
+    let chartInstance = echarts.init(ChartRef.current, theme);
+
+    const option = {
+      grid: {
+        top: "15%",
+        bottom: "0%",
+        left: "0%",
+        right: "0",
+        containLabel: true,
+      },
+      legend: {
+        show: true,
+        selectedMode: false,
+        itemHeight: 8,
+        itemWidth: 13,
+        textStyle: {
+          fontSize: 10,
+        }
+      },
+      xAxis: {
+        type: 'category',
+        data: xAxisData,
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {
+          width: 1200 / xAxisData.length,
+          interval: 0,
+          overflow: "truncate",
+        }
+      },
+      yAxis: {
+        type: 'value',
+        name: intl.get('DefectNumber'),
+        scale: false,
+        nameTextStyle: {
+          align: "left",
+          fontSize: 12,
+          color: "rgba(255, 255, 255, 1)",
+          verticalAlign: "middle",
+        }
+      },
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        borderWidth: 0,
+        textStyle: {
+          color: "rgba(255, 255, 255, 1)",
+          fontSize: 12
+        }
+      },
+      series: ValueSeries
+    }
+
+    chartInstance.setOption(option);
+    chartInstance.resize();
+  })
+  return (
+    <div ref={ChartRef} className="chart5"/>
+  )
+}
+
+export default RightTopChartWeekQ;
--- a/src/page/MainQ/TopQ.tsx
+++ b/src/page/MainQ/TopQ.tsx
@@ -0,0 +1,27 @@
+import React, {useState} from "react";
+import intl from "react-intl-universal";
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import {useAppSelector} from "../../store/hooks";
+import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
+import ChangeLangButton from "../Component/ChangeLangButton";
+import ChangeFullButton from "../Component/ChangeFullButton";
+
+function TopE() {
+  const Css = useAppSelector(selectChangeLangAndCss);
+  return (
+    <div className="flex-row">
+      <div className="block_28 flex-row">
+        <div className="image-wrapper_3 flex-col justify-between">
+          <div className="label_1"/>
+          {/*<div className="image_1"/>*/}
+        </div>
+        <span className={Css.text_1}>{intl.get('TITLE_Q')}</span>
+      </div>
+      <ChangeLangButton/>
+      <ChangeFullButton/>
+    </div>
+  );
+}
+
+export default TopE;
--- a/src/page/style/standard.css
+++ b/src/page/style/standard.css
@@ -0,0 +1,110 @@
+.fineWin {
+  position: relative;
+  border: 2px solid;
+  box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15);
+  border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
+  backdrop-filter: blur(2px);
+  background: rgba(6, 16, 39, 0.3);
+}
+.fineWin::before {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  content: "";
+  width: 22px;
+  height: 22px;
+  border-top: 4px solid #52FFF1;
+  border-left: 4px solid #52FFF1;
+}
+.fineWin::after {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  content: "";
+  width: 22px;
+  height: 22px;
+  border-top: 4px solid #52FFF1;
+  border-right: 4px solid #52FFF1;
+}
+.fineWin .fineWin-footer {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+}
+.fineWin .fineWin-footer::before {
+  position: absolute;
+  bottom: -2px;
+  left: -2px;
+  content: "";
+  width: 22px;
+  height: 22px;
+  border-bottom: 4px solid #52FFF1;
+  border-left: 4px solid #52FFF1;
+}
+.fineWin .fineWin-footer::after {
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  content: "";
+  width: 22px;
+  height: 22px;
+  border-bottom: 4px solid #52FFF1;
+  border-right: 4px solid #52FFF1;
+}
+.error-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+}
+.area1 {
+  margin-left: 700px;
+}
+.area2 {
+  margin-top: 15px;
+}
+.myText1 {
+  text-align: center;
+  font-size: medium;
+  color: white;
+  font-weight: bold;
+}
+.CenterDownAreaWidthAndHeight {
+  width: 992px;
+  height: 196px;
+}
+.btnArea {
+  position: absolute;
+  bottom: 1%;
+  right: 0.5%;
+}
+/*# sourceMappingURL=standard.css.map */
+
+.centerButton_1{
+  position: fixed;
+  top: 20px; /* 根据需要调整距离顶部的距离 */
+  left: 20px; /* 根据需要调整距离左侧的距离 */
+  z-index: 1000; /* 确保按钮在其他内容的上方 */
+  padding: 10px 20px; /* 根据需要调整按钮大小 */
+  border: none;
+  background-color: #007bff; /* 按钮的背景颜色 */
+  color: white; /* 按钮的文字颜色 */
+  cursor: pointer;
+  border-radius: 5px; /* 按钮的圆角 */
+}
+.centerButton_2{
+  position: fixed;
+  top: 60px; /* 根据需要调整距离顶部的距离 */
+  left: 20px; /* 根据需要调整距离左侧的距离 */
+  z-index: 1000; /* 确保按钮在其他内容的上方 */
+  padding: 10px 20px; /* 根据需要调整按钮大小 */
+  border: none;
+  background-color: #007bff; /* 按钮的背景颜色 */
+  color: white; /* 按钮的文字颜色 */
+  cursor: pointer;
+  border-radius: 5px; /* 按钮的圆角 */
+}
--- a/src/page/style/standard.css.map
+++ b/src/page/style/standard.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["standard.less"],"names":[],"mappings":"AAAA;EACE,kBAAA;EACA,iBAAA;EACA,4DAAA;EACA,cAAc,mGAAd;EACA,iBAAiB,SAAjB;EACA,gCAAA;;AAGA,QAAC;EACC,kBAAA;EACA,SAAA;EACA,UAAA;EACA,SAAS,EAAT;EACA,WAAA;EACA,YAAA;EACA,6BAAA;EACA,8BAAA;;AAGF,QAAC;EACC,kBAAA;EACA,SAAA;EACA,WAAA;EACA,SAAS,EAAT;EACA,WAAA;EACA,YAAA;EACA,6BAAA;EACA,+BAAA;;AA5BJ,QA+BE;EACE,kBAAA;EACA,OAAA;EACA,SAAA;EACA,WAAA;;AAEA,QANF,gBAMG;EACC,kBAAA;EACA,YAAA;EACA,UAAA;EACA,SAAS,EAAT;EACA,WAAA;EACA,YAAA;EACA,gCAAA;EACA,8BAAA;;AAGF,QAjBF,gBAiBG;EACC,kBAAA;EACA,YAAA;EACA,WAAA;EACA,SAAS,EAAT;EACA,WAAA;EACA,YAAA;EACA,gCAAA;EACA,+BAAA;;AAKN;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;;AAGF;EACE,kBAAA;;AAGF;EACE,gBAAA;;AAGF;EACE,kBAAA;EACA,iBAAA;EACA,YAAA;EACA,iBAAA;;AAGF;EACE,YAAA;EACA,aAAA;;AAGF;EACE,kBAAA;EACA,UAAA;EACA,WAAA","file":"standard.css"}
--- a/src/page/style/standard.less
+++ b/src/page/style/standard.less
@@ -0,0 +1,96 @@
+.fineWin {
+  position: relative;
+  border: 2px solid;
+  box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15);
+  border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
+  backdrop-filter: blur(2px);
+  background: rgba(6, 16, 39, 0.3);
+  //-webkit-filter: drop-shadow(0px 2px 16px rgba(7, 20, 36, 1));
+
+  &::before {
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    content: "";
+    width: 22px;
+    height: 22px;
+    border-top: 4px solid #52FFF1;
+    border-left: 4px solid #52FFF1;
+  }
+
+  &::after {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    content: "";
+    width: 22px;
+    height: 22px;
+    border-top: 4px solid #52FFF1;
+    border-right: 4px solid #52FFF1;
+  }
+
+  .fineWin-footer {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+
+    &::before {
+      position: absolute;
+      bottom: -2px;
+      left: -2px;
+      content: "";
+      width: 22px;
+      height: 22px;
+      border-bottom: 4px solid #52FFF1;
+      border-left: 4px solid #52FFF1;
+    }
+
+    &::after {
+      position: absolute;
+      bottom: -2px;
+      right: -2px;
+      content: "";
+      width: 22px;
+      height: 22px;
+      border-bottom: 4px solid #52FFF1;
+      border-right: 4px solid #52FFF1;
+    }
+  }
+}
+
+.error-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+}
+
+.area1 {
+  margin-left: 700px;
+}
+
+.area2 {
+  margin-top: 15px;
+}
+
+.myText1 {
+  text-align: center;
+  font-size: medium;
+  color: white;
+  font-weight: bold;
+}
+
+.CenterDownAreaWidthAndHeight {
+  width: 992px;
+  height: 196px
+}
+
+.btnArea {
+  position: absolute;
+  bottom: 1%;
+  right: 0.5%;
+}
--- a/src/page/style/theme.json
+++ b/src/page/style/theme.json
@@ -0,0 +1,398 @@
+{
+    "color": [
+        "#e02094",
+        "#50f4e3",
+        "#c69dff",
+        "#ffb70c",
+        "#1a99ff",
+        "#eedd78",
+        "#73a373",
+        "#73b9bc",
+        "#7289ab",
+        "#91ca8c",
+        "#f49f42"
+    ],
+    "backgroundColor": "rgba(0,0,0,0)",
+    "textStyle": {},
+    "title": {
+        "textStyle": {
+            "color": "#eeeeee"
+        },
+        "subtextStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "line": {
+        "itemStyle": {
+            "borderWidth": 1
+        },
+        "lineStyle": {
+            "width": 2
+        },
+        "symbolSize": 4,
+        "symbol": "circle",
+        "smooth": false
+    },
+    "radar": {
+        "itemStyle": {
+            "borderWidth": 1
+        },
+        "lineStyle": {
+            "width": 2
+        },
+        "symbolSize": 4,
+        "symbol": "circle",
+        "smooth": false
+    },
+    "bar": {
+        "itemStyle": {
+            "barBorderWidth": 0,
+            "barBorderColor": "#ccc"
+        }
+    },
+    "pie": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "scatter": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "boxplot": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "parallel": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "sankey": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "funnel": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "gauge": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "candlestick": {
+        "itemStyle": {
+            "color": "#fd1050",
+            "color0": "#0cf49b",
+            "borderColor": "#fd1050",
+            "borderColor0": "#0cf49b",
+            "borderWidth": 1
+        }
+    },
+    "graph": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        },
+        "lineStyle": {
+            "width": 1,
+            "color": "#aaaaaa"
+        },
+        "symbolSize": 4,
+        "symbol": "circle",
+        "smooth": false,
+        "color": [
+            "#e02094",
+            "#50f4e3",
+            "#c69dff",
+            "#ffb70c",
+            "#1a99ff",
+            "#eedd78",
+            "#73a373",
+            "#73b9bc",
+            "#7289ab",
+            "#91ca8c",
+            "#f49f42"
+        ],
+        "label": {
+            "color": "#eeeeee"
+        }
+    },
+    "map": {
+        "itemStyle": {
+            "areaColor": "#eee",
+            "borderColor": "#444",
+            "borderWidth": 0.5
+        },
+        "label": {
+            "color": "#000"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "areaColor": "rgba(255,215,0,0.8)",
+                "borderColor": "#444",
+                "borderWidth": 1
+            },
+            "label": {
+                "color": "rgb(100,0,0)"
+            }
+        }
+    },
+    "geo": {
+        "itemStyle": {
+            "areaColor": "#eee",
+            "borderColor": "#444",
+            "borderWidth": 0.5
+        },
+        "label": {
+            "color": "#000"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "areaColor": "rgba(255,215,0,0.8)",
+                "borderColor": "#444",
+                "borderWidth": 1
+            },
+            "label": {
+                "color": "rgb(100,0,0)"
+            }
+        }
+    },
+    "categoryAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#5982b2"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#eeeeee"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "#eeeeee"
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#5982b2"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "#eeeeee"
+                ]
+            }
+        }
+    },
+    "valueAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#5982b2"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#eeeeee"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "#eeeeee"
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#5982b2"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "#eeeeee"
+                ]
+            }
+        }
+    },
+    "logAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#5982b2"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#eeeeee"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "#eeeeee"
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#5982b2"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "#eeeeee"
+                ]
+            }
+        }
+    },
+    "timeAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#5982b2"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#eeeeee"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "#eeeeee"
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#5982b2"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "#eeeeee"
+                ]
+            }
+        }
+    },
+    "toolbox": {
+        "iconStyle": {
+            "borderColor": "#999999"
+        },
+        "emphasis": {
+            "iconStyle": {
+                "borderColor": "#666666"
+            }
+        }
+    },
+    "legend": {
+        "textStyle": {
+            "color": "#eeeeee"
+        }
+    },
+    "tooltip": {
+        "axisPointer": {
+            "lineStyle": {
+                "color": "#eeeeee",
+                "width": "1"
+            },
+            "crossStyle": {
+                "color": "#eeeeee",
+                "width": "1"
+            }
+        }
+    },
+    "timeline": {
+        "lineStyle": {
+            "color": "#eeeeee",
+            "width": 1
+        },
+        "itemStyle": {
+            "color": "#dd6b66",
+            "borderWidth": 1
+        },
+        "controlStyle": {
+            "color": "#eeeeee",
+            "borderColor": "#eeeeee",
+            "borderWidth": 0.5
+        },
+        "checkpointStyle": {
+            "color": "#e43c59",
+            "borderColor": "#c23531"
+        },
+        "label": {
+            "color": "#eeeeee"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "color": "#a9334c"
+            },
+            "controlStyle": {
+                "color": "#eeeeee",
+                "borderColor": "#eeeeee",
+                "borderWidth": 0.5
+            },
+            "label": {
+                "color": "#eeeeee"
+            }
+        }
+    },
+    "visualMap": {
+        "color": [
+            "#bf444c",
+            "#d88273",
+            "#f6efa6"
+        ]
+    },
+    "dataZoom": {
+        "backgroundColor": "rgba(47,69,84,0)",
+        "dataBackgroundColor": "rgba(255,255,255,0.3)",
+        "fillerColor": "rgba(167,183,204,0.4)",
+        "handleColor": "#a7b7cc",
+        "handleSize": "100%",
+        "textStyle": {
+            "color": "#eeeeee"
+        }
+    },
+    "markPoint": {
+        "label": {
+            "color": "#eeeeee"
+        },
+        "emphasis": {
+            "label": {
+                "color": "#eeeeee"
+            }
+        }
+    }
+}
--- a/src/page/style/theme.tsx
+++ b/src/page/style/theme.tsx
@@ -0,0 +1,3 @@
+import theme from "./theme.json"
+
+export default theme;
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["standard.less"],"names":[],"mappings":"AAAA;EACE,kBAAA;EACA,iBAAA;EACA,4DAAA;EACA,cAAc,mGAAd;EACA,iBAAiB,SAAjB;EACA,gCAAA;;AAGA,QAAC;EACC,kBAAA;EACA,SAAA;EACA,UAAA;EACA,SAAS,EAAT;EACA,WAAA;EACA,YAAA;EACA,6BAAA;EACA,8BAAA;;AAGF,QAAC;EACC,kBAAA;EACA,SAAA;EACA,WAAA;EACA,SAAS,EAAT;EACA,WAAA;EACA,YAAA;EACA,6BAAA;EACA,+BAAA;;AA5BJ,QA+BE;EACE,kBAAA;EACA,OAAA;EACA,SAAA;EACA,WAAA;;AAEA,QANF,gBAMG;EACC,kBAAA;EACA,YAAA;EACA,UAAA;EACA,SAAS,EAAT;EACA,WAAA;EACA,YAAA;EACA,gCAAA;EACA,8BAAA;;AAGF,QAjBF,gBAiBG;EACC,kBAAA;EACA,YAAA;EACA,WAAA;EACA,SAAS,EAAT;EACA,WAAA;EACA,YAAA;EACA,gCAAA;EACA,+BAAA;;AAKN;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;;AAGF;EACE,kBAAA;;AAGF;EACE,gBAAA;;AAGF;EACE,kBAAA;EACA,iBAAA;EACA,YAAA;EACA,iBAAA;;AAGF;EACE,YAAA;EACA,aAAA;;AAGF;EACE,kBAAA;EACA,UAAA;EACA,WAAA","file":"standard.css"}