1-1对接接口
This commit is contained in:
parent
0dcff0c256
commit
d142b16df3
14
package-lock.json
generated
14
package-lock.json
generated
@ -54,6 +54,7 @@
|
||||
"jest-resolve": "^27.4.2",
|
||||
"jest-watch-typeahead": "^1.0.0",
|
||||
"mini-css-extract-plugin": "^2.4.5",
|
||||
"moment": "^2.30.1",
|
||||
"postcss": "^8.4.4",
|
||||
"postcss-flexbugs-fixes": "^5.0.2",
|
||||
"postcss-loader": "^6.2.1",
|
||||
@ -11973,6 +11974,14 @@
|
||||
"mkdirp": "bin/cmd.js"
|
||||
}
|
||||
},
|
||||
"node_modules/moment": {
|
||||
"version": "2.30.1",
|
||||
"resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
|
||||
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
|
||||
@ -25921,6 +25930,11 @@
|
||||
"minimist": "^1.2.6"
|
||||
}
|
||||
},
|
||||
"moment": {
|
||||
"version": "2.30.1",
|
||||
"resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
|
||||
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
|
||||
|
||||
@ -49,6 +49,7 @@
|
||||
"jest-resolve": "^27.4.2",
|
||||
"jest-watch-typeahead": "^1.0.0",
|
||||
"mini-css-extract-plugin": "^2.4.5",
|
||||
"moment": "^2.30.1",
|
||||
"postcss": "^8.4.4",
|
||||
"postcss-flexbugs-fixes": "^5.0.2",
|
||||
"postcss-loader": "^6.2.1",
|
||||
|
||||
17
src/App.tsx
17
src/App.tsx
@ -14,6 +14,7 @@ import { selectGlassStatus } from "./store/ProductionMonitoringEntity";
|
||||
import TestPage from "./page/TestPage";
|
||||
import LDPage from "./page/LDPage";
|
||||
import LinePage from "./page/LinePage";
|
||||
import LinePage1_1 from "./page/LinePage1_1";
|
||||
|
||||
// const LOCALES_LIST = [
|
||||
// {
|
||||
@ -65,16 +66,18 @@ function App() {
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
///////////////////////////////////////////////////////////////
|
||||
// {
|
||||
// path: "/LP/:LineID?",
|
||||
// element: <LinePage />,
|
||||
// errorElement: <ErrorPage />,
|
||||
// },
|
||||
///////////////////////////////////////////////////////////////
|
||||
{
|
||||
path: "/LP/:LineID?",
|
||||
element: <LinePage />,
|
||||
path: "/LP/1-1",
|
||||
element: <LinePage1_1 />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
// {
|
||||
// path: "/TP/:LineID?",
|
||||
// element: <TestPage/>,
|
||||
// errorElement: <ErrorPage/>
|
||||
// },
|
||||
|
||||
]);
|
||||
useEffect(() => {
|
||||
const timerId = setInterval(() => {
|
||||
|
||||
79
src/page/Component/BarChart/chart.config.ts
Normal file
79
src/page/Component/BarChart/chart.config.ts
Normal file
@ -0,0 +1,79 @@
|
||||
import * as echarts from "echarts";
|
||||
export default function getOptions(dataProps: number[],xData:string[], color: string[]) {
|
||||
if (dataProps.length === 0) return null;
|
||||
return {
|
||||
grid: { top: 30, right: 12, bottom: 26, left: 48 },
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/片",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
formatter: "{value}",
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
className: "luoyang-chart-tooltip",
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: dataProps,
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 12,
|
||||
color: "#9CD4FF",
|
||||
position: "top",
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: color[0] },
|
||||
{ offset: 1, color: color[1] },
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
import React, {useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
|
||||
function ChangeFullButton() {
|
||||
const [isFull, setIsFull] = useState(false);
|
||||
|
||||
function fullExit() {
|
||||
let element = document.documentElement;
|
||||
|
||||
//HTML5 W3C 提议
|
||||
document.exitFullscreen();
|
||||
|
||||
setIsFull(false)
|
||||
}
|
||||
|
||||
function fullScreen() {
|
||||
let element = document.documentElement;
|
||||
|
||||
//HTML W3C 提议
|
||||
element.requestFullscreen();
|
||||
|
||||
setIsFull(true)
|
||||
}
|
||||
|
||||
const click = () => {
|
||||
isFull ? fullExit() : fullScreen();
|
||||
}
|
||||
|
||||
return (
|
||||
<button className="section_1 flex-col" onClick={click}/>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChangeFullButton;
|
||||
@ -1,19 +0,0 @@
|
||||
import React from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import {useAppDispatch} from "../../store/hooks";
|
||||
import {UpdateChangeLangAndCss} from "../../store/ChangeLangAndCss";
|
||||
|
||||
function ChangeLangButton() {
|
||||
const dispatch = useAppDispatch();
|
||||
const changeTitle = () => {
|
||||
dispatch(UpdateChangeLangAndCss())
|
||||
}
|
||||
|
||||
return (
|
||||
<button className="box_76 flex-col" onClick={changeTitle}/>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChangeLangButton;
|
||||
121
src/page/Component/LineChart/chart.config.ts
Normal file
121
src/page/Component/LineChart/chart.config.ts
Normal file
@ -0,0 +1,121 @@
|
||||
export default function getOptions(chartData: any) {
|
||||
if (Object.keys(chartData).length === 0) {
|
||||
return null;
|
||||
}
|
||||
const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"];
|
||||
return {
|
||||
color: colors,
|
||||
grid: { top: 38, right: 12, bottom: 26, left: 48 },
|
||||
legend: {
|
||||
show: true,
|
||||
top: 10,
|
||||
right: 10,
|
||||
padding: 0,
|
||||
itemWidth: 14,
|
||||
itemHeight: 10,
|
||||
itemGap: 8,
|
||||
height: 10,
|
||||
textStyle: {
|
||||
color: "#DFF1FE",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: chartData.xData,
|
||||
// data: ["8/22", "8/23", "8/24", "8/25", "8/26", "8/27", "8/28"],
|
||||
// data: Array(7)
|
||||
// .fill(1)
|
||||
// .map((_, index) => {
|
||||
// const today = new Date();
|
||||
// const dtimestamp =
|
||||
// today.getTime() - (index + 1) * 24 * 60 * 60 * 1000;
|
||||
// return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||||
// dtimestamp
|
||||
// ).getDate()}`;
|
||||
// })
|
||||
// .reverse(),
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/%",
|
||||
min: 50,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
formatter: "{value}",
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
className: "luoyang-chart-tooltip",
|
||||
show: false,
|
||||
},
|
||||
series:chartData.series
|
||||
// series: [
|
||||
// {
|
||||
// name: "产线1",
|
||||
// type: "line",
|
||||
// symbol: "circle",
|
||||
// symbolSize: 4,
|
||||
// data: chartData.yData[0],
|
||||
// },
|
||||
// {
|
||||
// name: "产线2",
|
||||
// type: "line",
|
||||
// symbol: "circle",
|
||||
// symbolSize: 4,
|
||||
// data: chartData.yData[1],
|
||||
// },
|
||||
// {
|
||||
// name: "产线3",
|
||||
// type: "line",
|
||||
// symbol: "circle",
|
||||
// symbolSize: 4,
|
||||
// data: chartData.yData[2],
|
||||
// },
|
||||
// {
|
||||
// name: "产线4",
|
||||
// type: "line",
|
||||
// symbol: "circle",
|
||||
// symbolSize: 4,
|
||||
// data: chartData.yData[3],
|
||||
// },
|
||||
// {
|
||||
// name: "产线5",
|
||||
// type: "line",
|
||||
// symbol: "circle",
|
||||
// symbolSize: 4,
|
||||
// data: chartData.yData[4],
|
||||
// },
|
||||
// ],
|
||||
};
|
||||
}
|
||||
99
src/page/Component/LineChartRight/chart.config.ts
Normal file
99
src/page/Component/LineChartRight/chart.config.ts
Normal file
@ -0,0 +1,99 @@
|
||||
import * as echarts from "echarts";
|
||||
export default function getOptions(tempData: any) {
|
||||
if (Object.keys(tempData).length === 0) {
|
||||
return null;
|
||||
}
|
||||
const colors = ["#1A99FF", "#50F4E3"];
|
||||
return {
|
||||
color: colors,
|
||||
grid: { top: 30, right: 12, bottom: 10, left: 10, containLabel: true },
|
||||
legend: {
|
||||
show: true,
|
||||
icon: "roundRect",
|
||||
top: 10,
|
||||
right: 10,
|
||||
padding: 0,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 3,
|
||||
height: 10,
|
||||
textStyle: {
|
||||
color: "#DFF1FE",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: tempData.time,
|
||||
// data: Array(7)
|
||||
// .fill(1)
|
||||
// .map((_, index) => {
|
||||
// const today = new Date();
|
||||
// const dtimestamp =
|
||||
// today.getTime() - (index + 1) * 24 * 60 * 60 * 1000;
|
||||
// return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||||
// dtimestamp
|
||||
// ).getDate()}`;
|
||||
// })
|
||||
// .reverse(),
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/千片",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
formatter: "{value}",
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "投入",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data: tempData.input,
|
||||
},
|
||||
{
|
||||
name: "产出",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data: tempData.output,
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
className: "luoyang-chart-tooltip",
|
||||
show: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -1,51 +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 {Quality, selectQualityMonitorEntity} from "../../store/QualityMonitorEntity";
|
||||
import {Table, TableBody, TableHead} from "@mui/material";
|
||||
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "./StyledTable";
|
||||
|
||||
interface param {
|
||||
timeName: "todayQualityLineAll" | "weekQualityLineAll" | "monthQualityLineAll";
|
||||
lineName: "Line_1" | "Line_2" | "Line_3" | "Line_4";
|
||||
}
|
||||
|
||||
function QualityRightTable(props: param) {
|
||||
const AllData = useAppSelector(selectQualityMonitorEntity);
|
||||
const TimeData = AllData[props.timeName];
|
||||
const LineData = TimeData[props.lineName];
|
||||
const SlicedLineData = LineData.slice(0, 6);
|
||||
return (
|
||||
<div className="rightTableAreaQ">
|
||||
<StyledTableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<StyledTableRow>
|
||||
<StyledTableCell align="center" sx={{width: 100}}>{intl.get('serialNo')}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{width: 250}}>{intl.get('DefectType')}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{width: 120}}>{intl.get('DefectNumber')}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{SlicedLineData.map((item: Quality, index: number) => (
|
||||
<StyledTableRow key={index}>
|
||||
<StyledTableCell align="center">{item.sort}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{
|
||||
maxWidth: 250,
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis'
|
||||
}}>{item.content}</StyledTableCell>
|
||||
<StyledTableCell align="center">{item.num}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</StyledTableContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default QualityRightTable;
|
||||
@ -1,71 +0,0 @@
|
||||
import React from "react";
|
||||
import {styled, TableCell, tableCellClasses, TableContainer, TableRow, ToggleButton} from "@mui/material";
|
||||
|
||||
export const StyledTableCell = styled(TableCell)(({theme}) => ({
|
||||
[`&.${tableCellClasses.head}`]: {
|
||||
backgroundColor: 'rgba(32, 55, 96, 0.7)',
|
||||
color: theme.palette.common.white,
|
||||
fontSize: 14,
|
||||
padding: 0,
|
||||
border: 0,
|
||||
height: 28,
|
||||
},
|
||||
[`&.${tableCellClasses.body}`]: {
|
||||
fontSize: 12,
|
||||
color: theme.palette.common.white,
|
||||
padding: 0,
|
||||
border: 0,
|
||||
height: 26
|
||||
},
|
||||
}));
|
||||
|
||||
export const StyledTableRow = styled(TableRow)(({theme}) => ({
|
||||
'&:nth-of-type(odd)': {
|
||||
backgroundColor: 'rgba(14, 32, 62, 0.7)',
|
||||
},
|
||||
backgroundColor: 'rgba(32, 55, 96, 0.7)',
|
||||
}));
|
||||
|
||||
export const StyledTableContainer = styled(TableContainer)(({theme}) => ({
|
||||
overflow: 'auto hidden',
|
||||
'&::-webkit-scrollbar': {
|
||||
height: 8,
|
||||
WebkitAppearance: 'none'
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
borderRadius: 2,
|
||||
backgroundColor: 'rgba(91, 196, 190, 0.5)',
|
||||
},
|
||||
'&::-webkit-scrollbar-button': {
|
||||
width: 8,
|
||||
borderBottomLeftRadius: 2,
|
||||
borderBottomRightRadius: 2,
|
||||
backgroundColor: 'rgba(91, 196, 190, 1)',
|
||||
},
|
||||
'&::-webkit-scrollbar-track': {
|
||||
backgroundColor: 'rgba(12, 32, 67, 1)',
|
||||
}
|
||||
}));
|
||||
|
||||
export const StyledToggleButton = styled(ToggleButton)({
|
||||
width: 120,
|
||||
height: 24,
|
||||
backgroundColor: 'rgba(49, 135, 140, 0.29)',
|
||||
color: "white",
|
||||
'&.Mui-selected': {
|
||||
backgroundColor: 'rgba(86, 244, 231, 0.69)',
|
||||
color: "white",
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(86, 244, 231, 0.5)',
|
||||
color: "white",
|
||||
},
|
||||
},
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(86, 244, 231, 0.5)',
|
||||
color: "white",
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: 'rgba(86, 244, 231, 0.69)',
|
||||
color: "white",
|
||||
},
|
||||
});
|
||||
128
src/page/Component/SummaryBarChart/chart.config.ts
Normal file
128
src/page/Component/SummaryBarChart/chart.config.ts
Normal file
@ -0,0 +1,128 @@
|
||||
export default function getOptions(chartData: any) {
|
||||
if (Object.keys(chartData).length === 0) {
|
||||
return null;
|
||||
}
|
||||
const colors = ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160"];
|
||||
let sum = chartData.sumData;
|
||||
return {
|
||||
color: colors,
|
||||
grid: { top: 48, right: 20, bottom: 5, left: 15, containLabel: true },
|
||||
legend: {
|
||||
show: true,
|
||||
icon: "roundRect",
|
||||
top: 10,
|
||||
right: 20,
|
||||
padding: 0,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 15,
|
||||
height: 10,
|
||||
textStyle: {
|
||||
color: "#DFF1FE",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: chartData.xData,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/片",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
formatter: "{value}",
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
className: "luoyang-chart-tooltip",
|
||||
},
|
||||
// Declare several bar series, each will be mapped
|
||||
// to a column of dataset.source by default.
|
||||
series:chartData.series
|
||||
// series: [
|
||||
// {
|
||||
// data: chartData.yData1,
|
||||
// type: "bar",
|
||||
// stack: "a",
|
||||
// name: "磨边后",
|
||||
// barWidth: 14,
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: "right",
|
||||
// color: "inherit",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// data: chartData.yData2,
|
||||
// type: "bar",
|
||||
// stack: "a",
|
||||
// name: "包装1",
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: "right",
|
||||
// color: "inherit",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// data: chartData.yData3,
|
||||
// type: "bar",
|
||||
// stack: "a",
|
||||
// name: "包装2",
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: "right",
|
||||
// color: "inherit",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// data: [0, 0, 0, 0, 0],
|
||||
// type: "bar",
|
||||
// stack: "a",
|
||||
// name: "",
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: "top",
|
||||
// color: "#fff",
|
||||
// formatter: function (params: any) {
|
||||
// return sum[params.dataIndex];
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
};
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
import React, {useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import {FormControlLabel, Switch} from "@mui/material";
|
||||
import {useAppSelector, useAppDispatch} from "../../store/hooks";
|
||||
import {selectSwitchState,ChangeSwitch} from "../../store/ChangeSwitchState";
|
||||
|
||||
function SwitchOnOff() {
|
||||
const dispatch = useAppDispatch();
|
||||
const [isSwitch, setIsSwitch] = useState(useAppSelector(selectSwitchState));
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
dispatch(ChangeSwitch())
|
||||
setIsSwitch(event.target.checked);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={'switchBtn'}>
|
||||
<FormControlLabel control={<Switch color={'warning'} checked={isSwitch} onChange={handleChange}/>}
|
||||
label={intl.get('AutoSwitch')}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SwitchOnOff;
|
||||
@ -1,19 +0,0 @@
|
||||
import React from "react";
|
||||
import "../style/standard.css"
|
||||
|
||||
interface TabPanelProps {
|
||||
children?: React.ReactNode;
|
||||
index: number;
|
||||
value: number;
|
||||
}
|
||||
|
||||
function TabPanel(props: TabPanelProps) {
|
||||
const {children, value, index, ...other} = props;
|
||||
return (
|
||||
<div hidden={value !== index}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TabPanel;
|
||||
@ -3,7 +3,11 @@ import TitleBox from "../Component/TitleBox";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import getOptions from "./SummaryBarChart/chart.config";
|
||||
import { useState } from "react";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1Before} from "./../../../store/LinePageSlice"
|
||||
function LeftUp() {
|
||||
const data = useAppSelector(selectLine1Before);
|
||||
console.log('页面数据：',data)
|
||||
// 假数据
|
||||
const dataSource = {
|
||||
day: {
|
||||
|
||||
215
src/page/LinePage1_1/Center/CenterDown.tsx
Normal file
215
src/page/LinePage1_1/Center/CenterDown.tsx
Normal file
@ -0,0 +1,215 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import { useParams } from "react-router-dom";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1Before} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
function CenterDown() {
|
||||
const data = useAppSelector(selectLine1Before);
|
||||
// 假数据
|
||||
const dataSource = {
|
||||
day: {
|
||||
xData:[],
|
||||
series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
|
||||
},
|
||||
week: {
|
||||
xData:[],
|
||||
series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
|
||||
},
|
||||
month: {
|
||||
xData:[],
|
||||
series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
|
||||
},
|
||||
};
|
||||
const nameList = [
|
||||
{ name: "天", ename: "day" },
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const config = {
|
||||
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
||||
headerHeight: 36,
|
||||
rowNum: 6,
|
||||
align: ["center", "left", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [80, 137, 137, 137],
|
||||
data: []
|
||||
};
|
||||
// 报警数据
|
||||
let arr:any = []
|
||||
let sumAlarm = 0
|
||||
// @ts-ignore
|
||||
if (data.alarms && data.alarms.length > 0) {
|
||||
// @ts-ignore
|
||||
sumAlarm = data.alarms.length
|
||||
// @ts-ignore
|
||||
data.alarms.map((item,index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(
|
||||
index+1,
|
||||
moment(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
item.name,
|
||||
item.status === '故障'?"<span style='color:#FF1E1E'>故障</span>":"<span style='color:#FFB40F'>离线</span>",
|
||||
);
|
||||
arr.push(arrInner)
|
||||
});
|
||||
}
|
||||
config.data = arr
|
||||
// 产线成品率
|
||||
// @ts-ignore
|
||||
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
let keys = Object.keys(data.todayProductionRates)
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.day.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
name: "",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data:[]
|
||||
}
|
||||
// @ts-ignore
|
||||
obj.name = data.todayProductionRates[item][0].lineName
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[item].map((subItem,index)=>{
|
||||
// @ts-ignore
|
||||
obj.data.push(subItem.passRate)
|
||||
})
|
||||
dataSource.day.series.push(obj)
|
||||
})
|
||||
}else{
|
||||
dataSource.day.xData = []
|
||||
dataSource.day.series = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.weekProductionRates && Object.keys(data.weekProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
let keys = Object.keys(data.weekProductionRates)
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.week.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
name: "",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data:[]
|
||||
}
|
||||
// @ts-ignore
|
||||
obj.name = data.weekProductionRates[item][0].lineName
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[item].map((subItem,index)=>{
|
||||
// @ts-ignore
|
||||
obj.data.push(subItem.passRate)
|
||||
})
|
||||
dataSource.week.series.push(obj)
|
||||
})
|
||||
}else{
|
||||
dataSource.week.xData = []
|
||||
dataSource.week.series = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.monthProductionRates && Object.keys(data.monthProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
let keys = Object.keys(data.monthProductionRates)
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.month.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
name: "",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data:[]
|
||||
}
|
||||
// @ts-ignore
|
||||
obj.name = data.monthProductionRates[item][0].lineName
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[item].map((subItem,index)=>{
|
||||
// @ts-ignore
|
||||
obj.data.push(subItem.passRate)
|
||||
})
|
||||
dataSource.month.series.push(obj)
|
||||
})
|
||||
}else{
|
||||
dataSource.month.xData = []
|
||||
dataSource.month.series = []
|
||||
}
|
||||
let chartData = (dataSource as { [key: string]: any })[activeName];
|
||||
console.log('???????????',chartData)
|
||||
const options = getOptions(chartData);
|
||||
return (
|
||||
<div className="center_down flex-row">
|
||||
<div className="center_down_inner flex-col left-box">
|
||||
<TitleBox title={"center_down_left"} />
|
||||
<span className="alarm_num_title">— 报警总数 —</span>
|
||||
<div className="alarm_num">{sumAlarm}</div>
|
||||
<div style={{ padding: 10, height: "270px" }}>
|
||||
{arr.length>0?<ScrollBoard
|
||||
config={config}
|
||||
style={{ width: "492px", height: "250px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 产线成品率 */}
|
||||
<div className="center_down_inner flex-col right_box">
|
||||
<TitleBox title={"center_down_right"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
{chartData.xData.length>0 && (
|
||||
<div className="chart_box">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
</div>
|
||||
)}
|
||||
{chartData.xData.length==0 && (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "120px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default CenterDown;
|
||||
12
src/page/LinePage1_1/Center/CenterUp.tsx
Normal file
12
src/page/LinePage1_1/Center/CenterUp.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
|
||||
import { useParams } from "react-router-dom";
|
||||
function CenterUp() {
|
||||
const { LineID } = useParams();
|
||||
const lineID = LineID?.toString() || "1-1";
|
||||
return (
|
||||
<div className="center_up">
|
||||
<LinePageBabylon modelPath={`Line${lineID}`} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default CenterUp;
|
||||
12
src/page/LinePage1_1/Center/index.tsx
Normal file
12
src/page/LinePage1_1/Center/index.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import CenterDown from "./CenterDown";
|
||||
import CenterUp from "./CenterUp";
|
||||
|
||||
function Center() {
|
||||
return (
|
||||
<div className="group_center flex-col">
|
||||
<CenterUp />
|
||||
<CenterDown />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Center;
|
||||
19
src/page/LinePage1_1/Component/SwitchButton/index.css
Normal file
19
src/page/LinePage1_1/Component/SwitchButton/index.css
Normal file
@ -0,0 +1,19 @@
|
||||
.switch-button {
|
||||
height: 33px;
|
||||
}
|
||||
.switch-button button {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
padding: 4px 10px;
|
||||
background-color: rgba(49, 135, 140, 0.3);
|
||||
cursor: pointer;
|
||||
}
|
||||
.switch-button button:first-child {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
.switch-button button:last-child {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
.switch-button button.active {
|
||||
background-color: rgba(86, 244, 231, 0.7);
|
||||
}
|
||||
65
src/page/LinePage1_1/Component/SwitchButton/index.tsx
Normal file
65
src/page/LinePage1_1/Component/SwitchButton/index.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import "./index.css";
|
||||
interface Name {
|
||||
name: string;
|
||||
ename: string;
|
||||
}
|
||||
interface nameListProps {
|
||||
nameList: Name[];
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
function createActiveNameUpdater(nameList: any, activeName: string) {
|
||||
let activeIndex = nameList.findIndex((obj: any) => obj.name === activeName);
|
||||
|
||||
return function updateActiveName() {
|
||||
activeIndex = (activeIndex + 1) % nameList.length;
|
||||
return nameList[activeIndex].ename;
|
||||
};
|
||||
}
|
||||
function SwitchButton(props: nameListProps) {
|
||||
const [activeName, setActiveName] = useState(props.nameList[0].ename);
|
||||
const [timerId, setTimerId] = useState<any>(null);
|
||||
let updateActiveName = createActiveNameUpdater(props.nameList, activeName);
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
let active = updateActiveName();
|
||||
setActiveName(active);
|
||||
props.onChange(active);
|
||||
}, 60000);
|
||||
setTimerId(timer);
|
||||
return () => {
|
||||
if (timerId !== null) {
|
||||
clearInterval(timerId);
|
||||
}
|
||||
};
|
||||
}, [props.nameList.length]);
|
||||
const btnClick = (ename: string) => {
|
||||
if (timerId !== null) {
|
||||
clearInterval(timerId);
|
||||
}
|
||||
setActiveName(ename);
|
||||
props.onChange(ename); // 通知父组件
|
||||
const newTimer = setInterval(() => {
|
||||
let active = updateActiveName();
|
||||
setActiveName(active);
|
||||
props.onChange(active);
|
||||
}, 60000);
|
||||
setTimerId(newTimer);
|
||||
};
|
||||
return (
|
||||
<div className="switch-button">
|
||||
{props.nameList.map((item, index) => {
|
||||
return (
|
||||
<button
|
||||
key={item.ename}
|
||||
className={activeName === item.ename ? "active" : ""}
|
||||
onClick={() => btnClick(item.ename)}
|
||||
>
|
||||
{item.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default SwitchButton;
|
||||
13
src/page/LinePage1_1/Component/TitleBox/index.css
Normal file
13
src/page/LinePage1_1/Component/TitleBox/index.css
Normal file
@ -0,0 +1,13 @@
|
||||
.title_box {
|
||||
font-size: 24px;
|
||||
color: #52fff1;
|
||||
padding: 10px 0 0 15px;
|
||||
}
|
||||
.title_box img {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
vertical-align: bottom;
|
||||
margin-right: 3px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
53
src/page/LinePage1_1/Component/TitleBox/index.tsx
Normal file
53
src/page/LinePage1_1/Component/TitleBox/index.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import Defect from "./../../assets/icon/defect.png";
|
||||
import Alarm from "./../../assets/icon/alarm.png";
|
||||
import Finished from "./../../assets/icon/finished.png";
|
||||
import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
|
||||
import Num from "./../../assets/icon/num.png";
|
||||
import Record from "./../../assets/icon/record.png";
|
||||
import "./index.css";
|
||||
interface titleProps {
|
||||
title: string;
|
||||
}
|
||||
function TitleBox(props: titleProps) {
|
||||
const filteredTitles = () => {
|
||||
switch (props.title) {
|
||||
case "left_up":
|
||||
return {
|
||||
img: Defect,
|
||||
title: "产线报废汇总",
|
||||
};
|
||||
case "left_down":
|
||||
return {
|
||||
img: Record,
|
||||
title: "当前产线报废情况",
|
||||
};
|
||||
case "center_down_left":
|
||||
return {
|
||||
img: Alarm,
|
||||
title: "异常报警",
|
||||
};
|
||||
case "center_down_right":
|
||||
return {
|
||||
img: Finished,
|
||||
title: "产线成品率",
|
||||
};
|
||||
case "right_up":
|
||||
return {
|
||||
img: Num,
|
||||
title: "各产线总投入和产出",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
img: InputAndOutput,
|
||||
title: "当前产线投入和产出",
|
||||
};
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="title_box">
|
||||
<img src={filteredTitles().img} alt="title" />
|
||||
<span>{filteredTitles().title}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default TitleBox;
|
||||
245
src/page/LinePage1_1/Left/LeftDown.tsx
Normal file
245
src/page/LinePage1_1/Left/LeftDown.tsx
Normal file
@ -0,0 +1,245 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/BarChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1Before} from "./../../../store/LinePageSlice"
|
||||
function LeftDown() {
|
||||
const data = useAppSelector(selectLine1Before);
|
||||
// console.log('页面数据：',data)
|
||||
const nameList = [
|
||||
{ name: "表单", ename: "table" },
|
||||
{ name: "柱状", ename: "chart" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const configDay = {
|
||||
header: ["序号", "工序类型", "报废数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 4,
|
||||
align: ["center", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
data: [
|
||||
["1", "磨边后", 224],
|
||||
["2", "包装1", 322],
|
||||
["3", "包装2", 66],
|
||||
],
|
||||
};
|
||||
const configWeek = {
|
||||
header: ["序号", "工序类型", "报废数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 4,
|
||||
align: ["center", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
data: [
|
||||
["1", "磨边后", 1119],
|
||||
["2", "包装1", 1798],
|
||||
["3", "包装2", 435],
|
||||
],
|
||||
};
|
||||
const configMonth = {
|
||||
header: ["序号", "工序类型", "报废数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 4,
|
||||
align: ["center", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
data: [
|
||||
["1", "磨边后", 5004],
|
||||
["2", "包装1", 9122],
|
||||
["3", "包装2", 1924],
|
||||
],
|
||||
};
|
||||
const color1 = ["#9DD5FF", "#1295FF"];
|
||||
const color2 = ["#85F6E9", "#2EC6B4"];
|
||||
// @ts-ignore
|
||||
let xData: string[] = data.scrapBars
|
||||
let dataProps1: number[] = [];
|
||||
let dataProps2: number[] = [];
|
||||
let dataProps3: number[] = [];
|
||||
let arr1: any = [];
|
||||
let arr2: any = [];
|
||||
let arr3: any = [];
|
||||
// @ts-ignore
|
||||
if (data.todayProductionScraps && data.todayProductionScraps.length > 0) {
|
||||
// @ts-ignore
|
||||
data.todayProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arr1.push(arrInner);
|
||||
dataProps1.push(item.scrapNum);
|
||||
})
|
||||
}else{
|
||||
dataProps1 = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.weekProductionScraps && data.weekProductionScraps.length > 0) {
|
||||
// @ts-ignore
|
||||
data.weekProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arr2.push(arrInner);
|
||||
dataProps2.push(item.scrapNum);
|
||||
})
|
||||
}else{
|
||||
dataProps2 = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.monthProductionScraps && data.monthProductionScraps.length > 0) {
|
||||
// @ts-ignore
|
||||
data.monthProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arr3.push(arrInner);
|
||||
dataProps3.push(item.scrapNum);
|
||||
})
|
||||
}else{
|
||||
dataProps3 = []
|
||||
}
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
const options1 = getOptions(dataProps1,xData, color1);
|
||||
const options2 = getOptions(dataProps2,xData, color2);
|
||||
const options3 = getOptions(dataProps3,xData, color1);
|
||||
return (
|
||||
<div className="left_down">
|
||||
<TitleBox title={"left_down"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
<div style={{ padding: "10px", height: "555px" }}>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">当天</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="left_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr1.length > 0 ? <ScrollBoard
|
||||
config={configDay}
|
||||
style={{ width: "380px", height: "150px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)
|
||||
) : dataProps1.length>0 ? (
|
||||
<ReactECharts option={options1} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本周</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="left_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr2.length > 0 ? <ScrollBoard
|
||||
config={configWeek}
|
||||
style={{ width: "380px", height: "150px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)
|
||||
) : dataProps2.length>0 ? (
|
||||
<ReactECharts option={options2} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本月</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="left_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr3.length > 0 ? <ScrollBoard
|
||||
config={configMonth}
|
||||
style={{ width: "380px", height: "150px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)
|
||||
) : dataProps3.length>0 ? (
|
||||
<ReactECharts option={options3} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default LeftDown;
|
||||
229
src/page/LinePage1_1/Left/LeftUp.tsx
Normal file
229
src/page/LinePage1_1/Left/LeftUp.tsx
Normal file
@ -0,0 +1,229 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import getOptions from "../../Component/SummaryBarChart/chart.config";
|
||||
import { useState } from "react";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1Before} from "./../../../store/LinePageSlice"
|
||||
function LeftUp() {
|
||||
const data = useAppSelector(selectLine1Before);
|
||||
console.log('页面数据：',data)
|
||||
// 假数据
|
||||
const dataSource = {
|
||||
day: {
|
||||
xData: [],
|
||||
series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
|
||||
},
|
||||
week: {
|
||||
xData: [],
|
||||
series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
|
||||
},
|
||||
month: {
|
||||
xData: [],
|
||||
series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
|
||||
},
|
||||
};
|
||||
const nameList = [
|
||||
{ name: "天", ename: "day" },
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
let chartData = (dataSource as { [key: string]: any })[activeName];
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
// @ts-ignore
|
||||
if (data.todayAllProductionScraps && Object.keys(data.todayAllProductionScraps).length > 0) {
|
||||
let sum: number[] = [];
|
||||
// 生成obj
|
||||
// @ts-ignore
|
||||
data.scrapBars.map((item,index) => {
|
||||
let obj = {
|
||||
data: [],
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: item,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "inherit",
|
||||
},
|
||||
}
|
||||
dataSource.day.series.push(obj)
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
|
||||
dataSource.day.xData.map((item,index)=>{
|
||||
let sumIner = 0
|
||||
// @ts-ignore
|
||||
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.day.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
}
|
||||
})
|
||||
})
|
||||
sum.push(sumIner)
|
||||
})
|
||||
dataSource.day.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: "",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#fff",
|
||||
formatter: function (params: any) {
|
||||
return sum[params.dataIndex];
|
||||
},
|
||||
},
|
||||
})
|
||||
}else{
|
||||
dataSource.day.xData = []
|
||||
dataSource.day.series = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.weekAllProductionScraps && Object.keys(data.weekAllProductionScraps).length > 0) {
|
||||
let sum: number[] = [];
|
||||
// 生成obj
|
||||
// @ts-ignore
|
||||
data.scrapBars.map((item,index) => {
|
||||
let obj = {
|
||||
data: [],
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: item,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "inherit",
|
||||
},
|
||||
}
|
||||
dataSource.week.series.push(obj)
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
|
||||
dataSource.week.xData.map((item,index)=>{
|
||||
let sumIner = 0
|
||||
// @ts-ignore
|
||||
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.week.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
}
|
||||
})
|
||||
})
|
||||
sum.push(sumIner)
|
||||
})
|
||||
dataSource.week.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: "",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#fff",
|
||||
formatter: function (params: any) {
|
||||
return sum[params.dataIndex];
|
||||
},
|
||||
},
|
||||
})
|
||||
}else{
|
||||
dataSource.week.xData = []
|
||||
dataSource.week.series = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.monthAllProductionScraps && Object.keys(data.monthAllProductionScraps).length > 0) {
|
||||
let sum: number[] = [];
|
||||
// 生成obj
|
||||
// @ts-ignore
|
||||
data.scrapBars.map((item,index) => {
|
||||
let obj = {
|
||||
data: [],
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: item,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "inherit",
|
||||
},
|
||||
}
|
||||
dataSource.month.series.push(obj)
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
|
||||
dataSource.month.xData.map((item,index)=>{
|
||||
let sumIner = 0
|
||||
// @ts-ignore
|
||||
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.month.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
}
|
||||
})
|
||||
})
|
||||
sum.push(sumIner)
|
||||
})
|
||||
dataSource.month.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: "",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#fff",
|
||||
formatter: function (params: any) {
|
||||
return sum[params.dataIndex];
|
||||
},
|
||||
},
|
||||
})
|
||||
}else{
|
||||
dataSource.month.xData = []
|
||||
dataSource.month.series = []
|
||||
}
|
||||
const options = getOptions(chartData);
|
||||
return (
|
||||
<div className="left_up">
|
||||
<TitleBox title={"left_up"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
{// @ts-ignore
|
||||
dataSource[activeName].xData.length>0 ? (
|
||||
<div className="left_up_chart">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
</div>
|
||||
):(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "72px",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default LeftUp;
|
||||
11
src/page/LinePage1_1/Left/index.tsx
Normal file
11
src/page/LinePage1_1/Left/index.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import LeftUp from "./LeftUp";
|
||||
import LeftDown from "./LeftDown";
|
||||
function Left() {
|
||||
return (
|
||||
<div className="group_left flex-col">
|
||||
<LeftUp />
|
||||
<LeftDown />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Left;
|
||||
273
src/page/LinePage1_1/Right/RightDown.tsx
Normal file
273
src/page/LinePage1_1/Right/RightDown.tsx
Normal file
@ -0,0 +1,273 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChartRight/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1Before} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
function RightDown() {
|
||||
const data = useAppSelector(selectLine1Before);
|
||||
// console.log('页面数据：',data)
|
||||
// 假数据
|
||||
let tempData = [
|
||||
{
|
||||
type: "day",
|
||||
data: {
|
||||
time: [] as string[],
|
||||
input: [] as number[],
|
||||
output: [] as number[],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "week",
|
||||
data: {
|
||||
time: [] as string[],
|
||||
input: [] as number[],
|
||||
output: [] as number[],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "month",
|
||||
data: {
|
||||
time: [] as string[],
|
||||
input: [] as number[],
|
||||
output: [] as number[],
|
||||
},
|
||||
},
|
||||
];
|
||||
const nameList = [
|
||||
{ name: "表单", ename: "table" },
|
||||
{ name: "折线", ename: "chart" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const configDay = {
|
||||
header: ["时间", "投入数量", "产出数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 5,
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [120, 130, 130],
|
||||
data: [],
|
||||
};
|
||||
const configWeek = {
|
||||
header: ["时间", "投入数量", "产出数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 5,
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [120, 130, 130],
|
||||
data: [],
|
||||
};
|
||||
const configMonth = {
|
||||
header: ["时间", "投入数量", "产出数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 5,
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [120, 130, 130],
|
||||
data: [],
|
||||
};
|
||||
let arr1: any = [];
|
||||
let arr2: any = [];
|
||||
let arr3: any = [];
|
||||
// @ts-ignore
|
||||
if (data.todayProductionDets && data.todayProductionDets.length > 0) {
|
||||
// @ts-ignore
|
||||
data.todayProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arr1.push(arrInner);
|
||||
tempData[0].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.input.push(item.inputNum);
|
||||
tempData[0].data.output.push(item.outputNum);
|
||||
})
|
||||
}else{
|
||||
tempData[0].data.time = []
|
||||
tempData[0].data.input = []
|
||||
tempData[0].data.output = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.weekProductionDets && data.weekProductionDets.length > 0) {
|
||||
// @ts-ignore
|
||||
data.weekProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
}else{
|
||||
tempData[1].data.time = []
|
||||
tempData[1].data.input = []
|
||||
tempData[1].data.output = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.monthProductionDets && data.monthProductionDets.length > 0) {
|
||||
// @ts-ignore
|
||||
data.monthProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
}else{
|
||||
tempData[2].data.time = []
|
||||
tempData[2].data.input = []
|
||||
tempData[2].data.output = []
|
||||
}
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
|
||||
const chartData1 = tempData[0].data;
|
||||
const chartData2 = tempData[1].data;
|
||||
const chartData3 = tempData[2].data;
|
||||
const options1 = getOptions(chartData1);
|
||||
const options2 = getOptions(chartData2);
|
||||
const options3 = getOptions(chartData3);
|
||||
return (
|
||||
<div className="right_down">
|
||||
<TitleBox title={"right_down"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
<div style={{ padding: "10px", height: "628px" }}>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">当天</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr1.length>0?<ScrollBoard
|
||||
config={configDay}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>:(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)
|
||||
) : tempData[0].data.time.length>0 ? (
|
||||
<ReactECharts option={options1} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本周</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr2.length>0?<ScrollBoard
|
||||
config={configWeek}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>:(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)
|
||||
) : tempData[1].data.time.length>0 ? (
|
||||
<ReactECharts option={options2} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本月</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr3.length>0?<ScrollBoard
|
||||
config={configMonth}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>:(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)
|
||||
) : tempData[2].data.time.length>0 ? (
|
||||
<ReactECharts option={options3} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default RightDown;
|
||||
52
src/page/LinePage1_1/Right/RightUp.tsx
Normal file
52
src/page/LinePage1_1/Right/RightUp.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1Before} from "./../../../store/LinePageSlice"
|
||||
function RightUp() {
|
||||
const data = useAppSelector(selectLine1Before);
|
||||
const config = {
|
||||
header: ["序号", "产线", "上片数据量", "成品下片数量"],
|
||||
headerHeight: 32,
|
||||
rowNum: 5,
|
||||
align: ["center", "left", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [70, 90, 106, 114],
|
||||
data: [],
|
||||
};
|
||||
let arr:any = []
|
||||
// @ts-ignore
|
||||
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
|
||||
// @ts-ignore
|
||||
data.sumProductionDets.map((item, index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
|
||||
arr.push(arrInner)
|
||||
})
|
||||
}
|
||||
config.data = arr
|
||||
return (
|
||||
<div className="right_up">
|
||||
<TitleBox title={"right_up"} />
|
||||
<div style={{ padding: "10px", height: "213px" }}>
|
||||
{arr.length>0?<ScrollBoard
|
||||
config={config}
|
||||
style={{ width: "380px", height: "193px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default RightUp;
|
||||
12
src/page/LinePage1_1/Right/index.tsx
Normal file
12
src/page/LinePage1_1/Right/index.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import RightDown from "./RightDown";
|
||||
import RightUp from "./RightUp";
|
||||
|
||||
function Right() {
|
||||
return (
|
||||
<div className="group_right flex-col">
|
||||
<RightUp />
|
||||
<RightDown />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Right;
|
||||
14
src/page/LinePage1_1/TopP.tsx
Normal file
14
src/page/LinePage1_1/TopP.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import '../../lanhuapp/common.css';
|
||||
import "./index.css";
|
||||
|
||||
function TopP() {
|
||||
return (
|
||||
<div className="flex-row">
|
||||
<div className="block_top flex-row">
|
||||
<div className='block_top_title'></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TopP;
|
||||
BIN
src/page/LinePage1_1/assets/icon/alarm.png
Normal file
BIN
src/page/LinePage1_1/assets/icon/alarm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/page/LinePage1_1/assets/icon/defect.png
Normal file
BIN
src/page/LinePage1_1/assets/icon/defect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/page/LinePage1_1/assets/icon/finished.png
Normal file
BIN
src/page/LinePage1_1/assets/icon/finished.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/page/LinePage1_1/assets/icon/g.png
Normal file
BIN
src/page/LinePage1_1/assets/icon/g.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/page/LinePage1_1/assets/icon/inputAndOutput.png
Normal file
BIN
src/page/LinePage1_1/assets/icon/inputAndOutput.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/page/LinePage1_1/assets/icon/num.png
Normal file
BIN
src/page/LinePage1_1/assets/icon/num.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/page/LinePage1_1/assets/icon/r.png
Normal file
BIN
src/page/LinePage1_1/assets/icon/r.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/page/LinePage1_1/assets/icon/record.png
Normal file
BIN
src/page/LinePage1_1/assets/icon/record.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/page/LinePage1_1/assets/icon/y.png
Normal file
BIN
src/page/LinePage1_1/assets/icon/y.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
264
src/page/LinePage1_1/index.css
Normal file
264
src/page/LinePage1_1/index.css
Normal file
@ -0,0 +1,264 @@
|
||||
/* 顶部 */
|
||||
.block_top {
|
||||
width: 1920px;
|
||||
height: 94px;
|
||||
background: url(/public/svg/topback.svg) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.block_top_title {
|
||||
width: 651px;
|
||||
height: 77px;
|
||||
background: url(/public/png/topTiltle.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 18px;
|
||||
}
|
||||
/* 中部 */
|
||||
.block_bottom {
|
||||
width: 1920px;
|
||||
height: 966px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.group_left {
|
||||
width: 402px;
|
||||
height: 966px;
|
||||
margin: 0 0 0 24px;
|
||||
}
|
||||
|
||||
.group_center {
|
||||
width: 1041px;
|
||||
height: 966px;
|
||||
margin: 0 0 0 15px;
|
||||
}
|
||||
|
||||
.group_right {
|
||||
width: 401px;
|
||||
height: 966px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.left_up {
|
||||
width: 402px;
|
||||
height: 332px;
|
||||
background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.left_down {
|
||||
width: 402px;
|
||||
height: 599px;
|
||||
background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
margin-top: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.center_up {
|
||||
width: 1041px;
|
||||
height: 562px;
|
||||
background: url(../../../public/png/rect/lp_center_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.center_down {
|
||||
width: 1041px;
|
||||
height: 368px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
.center_down_inner {
|
||||
width: 513px;
|
||||
height: 366px;
|
||||
background: url(../../../public/png/rect/lp_center_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.center_down .left-box {
|
||||
margin-right: 15px;
|
||||
position: relative;
|
||||
}
|
||||
.center_down .left-box .alarm_num_title {
|
||||
position: absolute;
|
||||
left: 220px;
|
||||
top: 22px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 3px;
|
||||
color: #fff;
|
||||
}
|
||||
.center_down .left-box .alarm_num {
|
||||
color: #52fff1;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
}
|
||||
.center_down .right_box .chart_box {
|
||||
width: 100%;
|
||||
height: 310px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.right_up {
|
||||
width: 401px;
|
||||
height: 257px;
|
||||
background: url(../../../public/png/rect/lp_right_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.right_down {
|
||||
width: 401px;
|
||||
height: 673px;
|
||||
background: url(../../../public/png/rect/lp_right_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
margin-top: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.left_up_switch {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 12px;
|
||||
}
|
||||
.left_up_chart {
|
||||
height: 275px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
/* 左侧 */
|
||||
.left_down_title {
|
||||
height: 18px;
|
||||
justify-content: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.left_down_box1 {
|
||||
width: 56px;
|
||||
height: 13px;
|
||||
background: url(/public/png/leftbar.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.left_down_box2 {
|
||||
width: 56px;
|
||||
height: 13px;
|
||||
background: url(/public/png/rightbar.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 2px 0 0 0px;
|
||||
}
|
||||
.left_down_text {
|
||||
/*width: 40px;*/
|
||||
height: 18px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(1, 207, 204, 1);
|
||||
font-size: 18px;
|
||||
letter-spacing: 5px;
|
||||
font-family: PingFangSC-Regular;
|
||||
white-space: nowrap;
|
||||
line-height: 18px;
|
||||
margin-left: 18px;
|
||||
margin-right: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.left_down_content {
|
||||
height: 160px;
|
||||
/* padding-bottom: 5px; */
|
||||
}
|
||||
.right_down_content {
|
||||
height: 185px;
|
||||
/* padding-bottom: 5px; */
|
||||
}
|
||||
/* 滚动表格部分 */
|
||||
.dv-scroll-board .header .header-item,
|
||||
.dv-scroll-board .rows .ceil {
|
||||
border-right: 1px solid #0d1728;
|
||||
}
|
||||
.dv-scroll-board .header .header-item:last-child,
|
||||
.dv-scroll-board .rows .ceil:last-child {
|
||||
border-right: none;
|
||||
border: none;
|
||||
}
|
||||
/* chart图部分 */
|
||||
.luoyang-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.luoyang-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
/* 三维页面部分 */
|
||||
.center_up .model_name {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.center_up .model_info {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
bottom: 0px;
|
||||
z-index: 1000;
|
||||
width: 841px;
|
||||
height: 62px;
|
||||
background: url(/public/png/lp/line_part.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.center_up .model_info .reset_btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 40px;
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.center_up .model_info .title {
|
||||
display: inline-block;
|
||||
width: 361px;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
letter-spacing: 5px;
|
||||
position: absolute;
|
||||
left: 241px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.center_up .eq_detail_info {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 1002;
|
||||
width: 240px;
|
||||
height: 110px;
|
||||
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
padding: 15px 0 0 15px;
|
||||
}
|
||||
.center_up .eq_detail_info .left_name {
|
||||
display: inline-block;
|
||||
width: 95px;
|
||||
height: 28px;
|
||||
text-align: right;
|
||||
font-size: 18px;
|
||||
}
|
||||
.center_up .eq_detail_info .right_value {
|
||||
display: inline-block;
|
||||
height: 28px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.center_up .eq_info {
|
||||
position: absolute;
|
||||
z-index: 1002;
|
||||
background: url(/public/png/lp/eq_msg_always.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.center_up .eq_info .eq_info_inner {
|
||||
height: 24px;
|
||||
font-size: 17px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
18
src/page/LinePage1_1/index.tsx
Normal file
18
src/page/LinePage1_1/index.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
import TopP from "./TopP";
|
||||
import Left from "./Left";
|
||||
import Right from "./Right";
|
||||
import Center from "./Center";
|
||||
function LinePage() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TopP />
|
||||
<div className="block_bottom flex-row">
|
||||
<Left />
|
||||
<Center />
|
||||
<Right />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
export default LinePage;
|
||||
@ -1,16 +1,16 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
import type { RootState } from "./store";
|
||||
const initialState = {
|
||||
"line1_1":{},
|
||||
"line1After":{},
|
||||
"line2Before":{},
|
||||
"line2After":{},
|
||||
"line3Before":{},
|
||||
"line3After":{},
|
||||
"line4Before":{},
|
||||
"line4After":{},
|
||||
"line5Before":{},
|
||||
"line5After":{}
|
||||
line1_1:{},
|
||||
line1_2:{},
|
||||
line2_1:{},
|
||||
line2_2:{},
|
||||
line3_1:{},
|
||||
line3_2:{},
|
||||
line4_1:{},
|
||||
line4_2:{},
|
||||
line5_1:{},
|
||||
line5_2:{}
|
||||
};
|
||||
export const LinePageSlice = createSlice({
|
||||
name: "LinePageSlice",
|
||||
@ -19,11 +19,65 @@ export const LinePageSlice = createSlice({
|
||||
UpdateLine1Before: (state, action) => {
|
||||
state.line1_1 = action.payload;
|
||||
},
|
||||
UpdateLine1After: (state, action) => {
|
||||
state.line1_2 = action.payload;
|
||||
},
|
||||
UpdateLine2Before: (state, action) => {
|
||||
state.line2_1 = action.payload;
|
||||
},
|
||||
UpdateLine2After: (state, action) => {
|
||||
state.line2_2 = action.payload;
|
||||
},
|
||||
UpdateLine3Before: (state, action) => {
|
||||
state.line3_1 = action.payload;
|
||||
},
|
||||
UpdateLine3After: (state, action) => {
|
||||
state.line3_2 = action.payload;
|
||||
},
|
||||
UpdateLine4Before: (state, action) => {
|
||||
state.line4_1 = action.payload;
|
||||
},
|
||||
UpdateLine4After: (state, action) => {
|
||||
state.line4_2 = action.payload;
|
||||
},
|
||||
UpdateLine5Before: (state, action) => {
|
||||
state.line5_1 = action.payload;
|
||||
},
|
||||
UpdateLine5After: (state, action) => {
|
||||
state.line5_2 = action.payload;
|
||||
},
|
||||
}
|
||||
})
|
||||
export const {
|
||||
UpdateLine1Before
|
||||
UpdateLine1Before,
|
||||
UpdateLine1After,
|
||||
UpdateLine2Before,
|
||||
UpdateLine2After,
|
||||
UpdateLine3Before,
|
||||
UpdateLine3After,
|
||||
UpdateLine4Before,
|
||||
UpdateLine4After,
|
||||
UpdateLine5Before,
|
||||
UpdateLine5After,
|
||||
} = LinePageSlice.actions;
|
||||
export const selectLine1Before = (state: RootState) =>
|
||||
state.LinePageSlice.line1_1;
|
||||
export const selectLine1After = (state: RootState) =>
|
||||
state.LinePageSlice.line1_2;
|
||||
export const selectLine2Before = (state: RootState) =>
|
||||
state.LinePageSlice.line2_1;
|
||||
export const selectLine2After = (state: RootState) =>
|
||||
state.LinePageSlice.line2_2;
|
||||
export const selectLine3Before = (state: RootState) =>
|
||||
state.LinePageSlice.line3_1;
|
||||
export const selectLine3After = (state: RootState) =>
|
||||
state.LinePageSlice.line3_2;
|
||||
export const selectLine4Before = (state: RootState) =>
|
||||
state.LinePageSlice.line4_1;
|
||||
export const selectLine4After = (state: RootState) =>
|
||||
state.LinePageSlice.line4_2;
|
||||
export const selectLine5Before = (state: RootState) =>
|
||||
state.LinePageSlice.line5_1;
|
||||
export const selectLine5After = (state: RootState) =>
|
||||
state.LinePageSlice.line5_2;
|
||||
export default LinePageSlice.reducer;
|
||||
@ -2,7 +2,18 @@ import React, {useState} from "react";
|
||||
import {useAppDispatch, useAppSelector} from "./hooks";
|
||||
import axios from "axios";
|
||||
|
||||
import {UpdateLine1Before} from "./LinePageSlice"
|
||||
import {
|
||||
UpdateLine1Before,
|
||||
UpdateLine1After,
|
||||
UpdateLine2Before,
|
||||
UpdateLine2After,
|
||||
UpdateLine3Before,
|
||||
UpdateLine3After,
|
||||
UpdateLine4Before,
|
||||
UpdateLine4After,
|
||||
UpdateLine5Before,
|
||||
UpdateLine5After
|
||||
} from "./LinePageSlice"
|
||||
|
||||
//将消息显示在网页上
|
||||
// @ts-ignore
|
||||
@ -66,22 +77,74 @@ function UpdateData() {
|
||||
.then((r) => {
|
||||
setUrl(r.data.url)
|
||||
})
|
||||
let websocketB1 = null;
|
||||
let websocketA1 = null;
|
||||
let websocket1_1 = null;
|
||||
let websocket1_2 = null;
|
||||
let websocket2_1 = null;
|
||||
let websocket2_2 = null;
|
||||
let websocket3_1 = null;
|
||||
let websocket3_2 = null;
|
||||
let websocket4_1 = null;
|
||||
let websocket4_2 = null;
|
||||
let websocket5_1 = null;
|
||||
let websocket5_2 = null;
|
||||
if ('WebSocket' in window) {
|
||||
websocketB1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=1-1");
|
||||
websocket1_1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=1-1");
|
||||
// websocket1_2 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=1-2");
|
||||
// websocket2_1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=2-1");
|
||||
// websocket2_2 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=2-2");
|
||||
// websocket3_1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=3-1");
|
||||
// websocket3_2 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=3-2");
|
||||
// websocket4_1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=4-1");
|
||||
// websocket4_2 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=4-2");
|
||||
// websocket5_1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=5-1");
|
||||
// websocket5_2 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=5-2");
|
||||
//连接成功建立的回调方法
|
||||
} else {
|
||||
alert('Not support websocket');
|
||||
}
|
||||
// @ts-ignore
|
||||
websocketB1.onopen = function (event) {
|
||||
setMessageInnerHTML("websocketB1-open");
|
||||
websocket1_1.onopen = function (event) {
|
||||
setMessageInnerHTML("websocket1_1-open");
|
||||
}
|
||||
// @ts-ignore
|
||||
// websocket1_2.onopen = function (event) {
|
||||
// setMessageInnerHTML("websocket1_2-open");
|
||||
// }
|
||||
// // @ts-ignore
|
||||
// websocket2_1.onopen = function (event) {
|
||||
// setMessageInnerHTML("websocket1_1-open");
|
||||
// }
|
||||
// // @ts-ignore
|
||||
// websocket2_2.onopen = function (event) {
|
||||
// setMessageInnerHTML("websocket1_2-open");
|
||||
// }
|
||||
// // @ts-ignore
|
||||
// websocket3_1.onopen = function (event) {
|
||||
// setMessageInnerHTML("websocket1_1-open");
|
||||
// }
|
||||
// // @ts-ignore
|
||||
// websocket3_2.onopen = function (event) {
|
||||
// setMessageInnerHTML("websocket1_2-open");
|
||||
// }
|
||||
// // @ts-ignore
|
||||
// websocket4_1.onopen = function (event) {
|
||||
// setMessageInnerHTML("websocket1_1-open");
|
||||
// }
|
||||
// // @ts-ignore
|
||||
// websocket4_2.onopen = function (event) {
|
||||
// setMessageInnerHTML("websocket1_2-open");
|
||||
// }
|
||||
// // @ts-ignore
|
||||
// websocket5_1.onopen = function (event) {
|
||||
// setMessageInnerHTML("websocket1_1-open");
|
||||
// }
|
||||
// // @ts-ignore
|
||||
// websocket5_2.onopen = function (event) {
|
||||
// setMessageInnerHTML("websocket1_2-open");
|
||||
// }
|
||||
//接收到消息的回调方法
|
||||
// @ts-ignore
|
||||
websocketB1.onmessage = function (event) {
|
||||
console.log('接收到消息：',event.data)
|
||||
websocket1_1.onmessage = function (event) {
|
||||
let msgData = event.data
|
||||
try {
|
||||
msgData = JSON.parse(event.data);
|
||||
@ -90,8 +153,116 @@ function UpdateData() {
|
||||
}
|
||||
if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||
console.log(msgData)
|
||||
dispatch(UpdateLine1Before(msgData.data));
|
||||
dispatch(UpdateLine1Before(msgData));
|
||||
}
|
||||
// @ts-ignore
|
||||
// websocket1_2.onmessage = function (event) {
|
||||
// let msgData = event.data
|
||||
// try {
|
||||
// msgData = JSON.parse(event.data);
|
||||
// } catch (error) {
|
||||
// console.log("websocket: [unable to msgData] : ", event.data);
|
||||
// }
|
||||
// if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||
// console.log(msgData)
|
||||
// dispatch(UpdateLine1After(msgData));
|
||||
// }
|
||||
// // @ts-ignore
|
||||
// websocket2_1.onmessage = function (event) {
|
||||
// let msgData = event.data
|
||||
// try {
|
||||
// msgData = JSON.parse(event.data);
|
||||
// } catch (error) {
|
||||
// console.log("websocket: [unable to msgData] : ", event.data);
|
||||
// }
|
||||
// if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||
// console.log(msgData)
|
||||
// dispatch(UpdateLine2Before(msgData));
|
||||
// }
|
||||
// // @ts-ignore
|
||||
// websocket2_2.onmessage = function (event) {
|
||||
// let msgData = event.data
|
||||
// try {
|
||||
// msgData = JSON.parse(event.data);
|
||||
// } catch (error) {
|
||||
// console.log("websocket: [unable to msgData] : ", event.data);
|
||||
// }
|
||||
// if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||
// console.log(msgData)
|
||||
// dispatch(UpdateLine2After(msgData));
|
||||
// }
|
||||
// // @ts-ignore
|
||||
// websocket3_1.onmessage = function (event) {
|
||||
// let msgData = event.data
|
||||
// try {
|
||||
// msgData = JSON.parse(event.data);
|
||||
// } catch (error) {
|
||||
// console.log("websocket: [unable to msgData] : ", event.data);
|
||||
// }
|
||||
// if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||
// console.log(msgData)
|
||||
// dispatch(UpdateLine3Before(msgData));
|
||||
// }
|
||||
// // @ts-ignore
|
||||
// websocket3_2.onmessage = function (event) {
|
||||
// let msgData = event.data
|
||||
// try {
|
||||
// msgData = JSON.parse(event.data);
|
||||
// } catch (error) {
|
||||
// console.log("websocket: [unable to msgData] : ", event.data);
|
||||
// }
|
||||
// if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||
// console.log(msgData)
|
||||
// dispatch(UpdateLine3After(msgData));
|
||||
// }
|
||||
// // @ts-ignore
|
||||
// websocket4_1.onmessage = function (event) {
|
||||
// let msgData = event.data
|
||||
// try {
|
||||
// msgData = JSON.parse(event.data);
|
||||
// } catch (error) {
|
||||
// console.log("websocket: [unable to msgData] : ", event.data);
|
||||
// }
|
||||
// if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||
// console.log(msgData)
|
||||
// dispatch(UpdateLine4Before(msgData));
|
||||
// }
|
||||
// // @ts-ignore
|
||||
// websocket4_2.onmessage = function (event) {
|
||||
// let msgData = event.data
|
||||
// try {
|
||||
// msgData = JSON.parse(event.data);
|
||||
// } catch (error) {
|
||||
// console.log("websocket: [unable to msgData] : ", event.data);
|
||||
// }
|
||||
// if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||
// console.log(msgData)
|
||||
// dispatch(UpdateLine4After(msgData));
|
||||
// }
|
||||
// // @ts-ignore
|
||||
// websocket5_1.onmessage = function (event) {
|
||||
// let msgData = event.data
|
||||
// try {
|
||||
// msgData = JSON.parse(event.data);
|
||||
// } catch (error) {
|
||||
// console.log("websocket: [unable to msgData] : ", event.data);
|
||||
// }
|
||||
// if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||
// console.log(msgData)
|
||||
// dispatch(UpdateLine5Before(msgData));
|
||||
// }
|
||||
// // @ts-ignore
|
||||
// websocket5_2.onmessage = function (event) {
|
||||
// let msgData = event.data
|
||||
// try {
|
||||
// msgData = JSON.parse(event.data);
|
||||
// } catch (error) {
|
||||
// console.log("websocket: [unable to msgData] : ", event.data);
|
||||
// }
|
||||
// if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||
// console.log(msgData)
|
||||
// dispatch(UpdateLine5After(msgData));
|
||||
// }
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user