mt-fe-group/luoyang-screen
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

假数据版本

Browse Source
This commit is contained in:
朱菊兰
2024-09-11 10:16:17 +08:00
parent b6fb156c2c
commit 0dcff0c256
82 changed files with 115 additions and 9337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/page/AutoSwitch/SwitchAll.tsx
View File

@@ -1,65 +0,0 @@
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;

53
src/page/AutoSwitch/SwitchLine.tsx
View File

@@ -1,53 +0,0 @@
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;

94
src/page/MainE/CenterDownE.tsx
View File

@@ -1,94 +0,0 @@
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;

53
src/page/MainE/CenterDownE/CenterDownChartE.tsx
View File

@@ -1,53 +0,0 @@
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;

127
src/page/MainE/CenterDownE/OeeChart.tsx
View File

@@ -1,127 +0,0 @@
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;

18
src/page/MainE/CenterE.tsx
View File

@@ -1,18 +0,0 @@
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;

17
src/page/MainE/CenterUpE.tsx
View File

@@ -1,17 +0,0 @@
import React from "react";
import LineBabylon from "../../babylonjs/LineBabylon";
import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1";
import {Observable} from "@babylonjs/core";
// import LineID from "../../store/ChangeLineID";
function CenterUpE() {
return (
<div className="block_16_E flex-col fineWin">
<div className="fineWin-footer"/>
<LineBabylon />
{/* <MybabylonJS_1 modelPath={`line${LineID}`} /> */}
</div>
)
}
export default CenterUpE;

20
src/page/MainE/LeftDownE.tsx
View File

@@ -1,20 +0,0 @@
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;

108
src/page/MainE/LeftDownE/LeftDownChartE.tsx
View File

@@ -1,108 +0,0 @@
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;

18
src/page/MainE/LeftE.tsx
View File

@@ -1,18 +0,0 @@
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;

20
src/page/MainE/LeftUpE.tsx
View File

@@ -1,20 +0,0 @@
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;

61
src/page/MainE/LeftUpE/LeftUpTableE.tsx
View File

@@ -1,61 +0,0 @@
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;

42
src/page/MainE/MainE.tsx
View File

@@ -1,42 +0,0 @@
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;

72
src/page/MainE/RightE.tsx
View File

@@ -1,72 +0,0 @@
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;

61
src/page/MainE/RightE/RightTableAllE.tsx
View File

@@ -1,61 +0,0 @@
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;

63
src/page/MainE/RightE/RightTableDayE.tsx
View File

@@ -1,63 +0,0 @@
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;

61
src/page/MainE/RightE/RightTableMonthE.tsx
View File

@@ -1,61 +0,0 @@
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;

61
src/page/MainE/RightE/RightTableWeekE.tsx
View File

@@ -1,61 +0,0 @@
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;

31
src/page/MainE/TopE.tsx
View File

@@ -1,31 +0,0 @@
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;

17
src/page/MainP/Center.tsx
View File

@@ -1,17 +0,0 @@
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;

59
src/page/MainP/CenterDown.tsx
View File

@@ -1,59 +0,0 @@
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;

95
src/page/MainP/CenterDown/CenterDownChartDay.tsx
View File

@@ -1,95 +0,0 @@
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;

102
src/page/MainP/CenterDown/CenterDownChartMonth.tsx
View File

@@ -1,102 +0,0 @@
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;

101
src/page/MainP/CenterDown/CenterDownChartWeek.tsx
View File

@@ -1,101 +0,0 @@
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;

41
src/page/MainP/CenterUp.tsx
View File

@@ -1,41 +0,0 @@
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;

46
src/page/MainP/CenterUp_Backup.tsx
View File

@@ -1,46 +0,0 @@
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;

19
src/page/MainP/Left.tsx
View File

@@ -1,19 +0,0 @@
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;

49
src/page/MainP/LeftDown.tsx
View File

@@ -1,49 +0,0 @@
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;

91
src/page/MainP/LeftDown/ChartDay.tsx
View File

@@ -1,91 +0,0 @@
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;

91
src/page/MainP/LeftDown/ChartMonth.tsx
View File

@@ -1,91 +0,0 @@
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;

91
src/page/MainP/LeftDown/ChartWeek.tsx
View File

@@ -1,91 +0,0 @@
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;

31
src/page/MainP/LeftUp.tsx
View File

@@ -1,31 +0,0 @@
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;

50
src/page/MainP/LeftUp/LeftUpTable.tsx
View File

@@ -1,50 +0,0 @@
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;

28
src/page/MainP/MainP.tsx
View File

@@ -1,28 +0,0 @@
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;

20
src/page/MainP/Right.tsx
View File

@@ -1,20 +0,0 @@
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;

58
src/page/MainP/RightDown.tsx
View File

@@ -1,58 +0,0 @@
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;

40
src/page/MainP/RightDown/RightDownTableDay.tsx
View File

@@ -1,40 +0,0 @@
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;

40
src/page/MainP/RightDown/RightDownTableMonth.tsx
View File

@@ -1,40 +0,0 @@
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;

40
src/page/MainP/RightDown/RightDownTableWeek.tsx
View File

@@ -1,40 +0,0 @@
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;

26
src/page/MainP/RightUp.tsx
View File

@@ -1,26 +0,0 @@
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;

39
src/page/MainP/RightUp/RightUpTable.tsx
View File

@@ -1,39 +0,0 @@
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;

27
src/page/MainP/TopP.tsx
View File

@@ -1,27 +0,0 @@
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;

57
src/page/MainQ/LeftQ.tsx
View File

@@ -1,57 +0,0 @@
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;

41
src/page/MainQ/LeftQ/LeftTableDayQ.tsx
View File

@@ -1,41 +0,0 @@
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;

41
src/page/MainQ/LeftQ/LeftTableMonthQ.tsx
View File

@@ -1,41 +0,0 @@
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;

41
src/page/MainQ/LeftQ/LeftTableWeekQ.tsx
View File

@@ -1,41 +0,0 @@
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;

18
src/page/MainQ/MainQ.tsx
View File

@@ -1,18 +0,0 @@
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;

26
src/page/MainQ/RightQ.tsx
View File

@@ -1,26 +0,0 @@
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;

56
src/page/MainQ/RightQ/RightDownLeftQ.tsx
View File

@@ -1,56 +0,0 @@
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;

55
src/page/MainQ/RightQ/RightDownRightQ.tsx
View File

@@ -1,55 +0,0 @@
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;

56
src/page/MainQ/RightQ/RightMiddleLeftQ.tsx
View File

@@ -1,56 +0,0 @@
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;

56
src/page/MainQ/RightQ/RightMiddleRightQ.tsx
View File

@@ -1,56 +0,0 @@
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;

55
src/page/MainQ/RightQ/RightTopQ.tsx
View File

@@ -1,55 +0,0 @@
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;

113
src/page/MainQ/RightTopQ/RightTopChartDayQ.tsx
View File

@@ -1,113 +0,0 @@
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;

115
src/page/MainQ/RightTopQ/RightTopChartMonthQ.tsx
View File

@@ -1,115 +0,0 @@
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;

115
src/page/MainQ/RightTopQ/RightTopChartWeekQ.tsx
View File

@@ -1,115 +0,0 @@
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;

27
src/page/MainQ/TopQ.tsx
View File

@@ -1,27 +0,0 @@
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;

6
src/page/TestPage/CenterUp.tsx
View File

@@ -3,8 +3,8 @@ 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 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";
@@ -29,7 +29,7 @@ const nextModelIndex = () => {
return (
<div className="block_16 flex-col fineWin">
<div className="fineWin-footer"/>
<MybabylonJS_1 modelPath={`line${modelIndex+1}`} />
{/* <MybabylonJS_1 modelPath={`line${modelIndex+1}`} /> */}
{/* 添加按钮来切换组件 */}
<button className="centerButton_1" onClick={prevModelIndex}>上一个组件</button>
<button className="centerButton_2" onClick={nextModelIndex}>下一个组件</button>

4
src/page/TestPage/index.tsx
View File

@@ -1,5 +1,5 @@
import "./index.css"
import MainE from "../MainE/MainE";
import LinePage from "../LinePage";
import {useParams,useNavigate} from "react-router-dom";
import {useEffect} from 'react';
function TestPage() {
@@ -30,7 +30,7 @@ useEffect(() => {
<>
<div className="main-box">TestPage Line{LineID}</div>
<div className="main-box" style={{display:'none'}}>3434</div>
<MainE/>
<LinePage/>
</>
);
}