初始化，印度版本7.29

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;