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

2.21日版

Browse Source
This commit is contained in:
朱菊兰
2025-02-21 11:10:35 +08:00
parent 128b362587
commit 1812afd680
89 changed files with 1420 additions and 995 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/page/Component/BarChart/chart.config.ts
View File

@@ -2,7 +2,7 @@ import * as echarts from "echarts";
export default function getOptions(dataProps: number[],xData:string[], color: string[]) {
if (dataProps.length === 0) return null;
return {
grid: { top: 40, right: 10, bottom: 10, left: 10, containLabel: true },
grid: { top: 30, right: 10, bottom: 5, left: 10, containLabel: true },
legend: {
show: false,
},
@@ -11,8 +11,10 @@ export default function getOptions(dataProps: number[],xData:string[], color: st
data: xData,
axisLabel: {
color: "#fff",
fontSize: 12,
fontSize: 10,
interval: 0,
rotate:20
},
axisTick: { show: false },
axisLine: {

6
src/page/Component/LineChart/chart.config.ts
View File

@@ -2,13 +2,13 @@ export default function getOptions(chartData: any) {
if (Object.keys(chartData).length === 0) {
return null;
}
const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"];
const colors = ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160","#D680FF","#FF6860"];
return {
color: colors,
grid: { top: 38, right: 12, bottom: 5, left: 15, containLabel: true },
grid: { top: 50, right: 12, bottom: 5, left: 15, containLabel: true },
legend: {
show: true,
top: 10,
top: 5,
right: 10,
padding: 0,
itemWidth: 14,

7
src/page/Component/LineChartRight/chart.config.ts
View File

@@ -6,16 +6,15 @@ export default function getOptions(tempData: any) {
const colors = ["#1A99FF", "#50F4E3"];
return {
color: colors,
grid: { top: 30, right: 12, bottom: 10, left: 10, containLabel: true },
grid: { top: 30, right: 12, bottom: 10, left: 5, containLabel: true },
legend: {
show: true,
icon: "roundRect",
top: 10,
right: 10,
padding: 0,
itemWidth: 10,
itemWidth: 14,
itemHeight: 10,
itemGap: 3,
itemGap: 8,
height: 10,
textStyle: {
color: "#DFF1FE",

59
src/page/Component/SummaryBarChart/chart.config.ts
View File

@@ -2,15 +2,14 @@ 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;
const colors = ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160","#D680FF","#FF6860"];
return {
color: colors,
grid: { top: 48, right: 20, bottom: 5, left: 15, containLabel: true },
grid: { top: 48, right: 20, bottom: 5, left: 10, containLabel: true },
legend: {
show: true,
icon: "roundRect",
top: 10,
top: 5,
right: 20,
padding: 0,
itemWidth: 10,
@@ -71,58 +70,6 @@ export default function getOptions(chartData: any) {
},
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];
// },
// },
// },
// ],
};
}

5
src/page/LDPage/TopP.tsx
View File

@@ -1,17 +1,16 @@
import '../../lanhuapp/common.css';
import "./index.css";
import { useState } from "react";
// import locale from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
function TopP() {
const [time, setTime] = useState(dayjs().format('HH:mm'));
const [date, setDate] = useState(dayjs().format('YY-MM-DD'));
const [date, setDate] = useState(dayjs().format('YY/MM/DD'));
const [weekday, setWeekday] = useState(dayjs().locale('zh-cn').format('dddd'));
setInterval(() => {
setTime(dayjs().format('HH:mm'));
setDate(dayjs().format('YY-MM-DD'));
setDate(dayjs().format('YY/MM/DD'));
setWeekday(dayjs().locale('zh-cn').format('dddd'));
})
return (

6
src/page/LDPage/index.css
View File

@@ -257,8 +257,8 @@
right: 0px;
bottom: 0px;
z-index: 1002;
width: 240px;
height: 180px;
width: 300px;
height: 140px;
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
background-size: 100% 100%;
color: #fff;
@@ -266,7 +266,7 @@
}
.ld_center_up .eq_detail_info .left_name {
display: inline-block;
width: 95px;
width: 115px;
height: 28px;
text-align: right;
font-size: 18px;

46
src/page/LDPage/index.tsx
View File

@@ -3,30 +3,32 @@ import TopP from "./TopP";
import Left from "./Left";
import Right from "./Right";
import Center from "./Center";
// import {useEffect} from 'react';
// import {useLocation,useNavigate} from "react-router-dom";
import {useEffect} from 'react';
import {useLocation,useNavigate} from "react-router-dom";
function LDPage() {
// const navigate = useNavigate();
// const {state} = useLocation();
// console.log("LDPage被加载了")
// useEffect(() => {
// const handleKeyDown = (event:any) => {
// if (event.key === 'ArrowUp') {
// console.log('LDPage向上键被按下');
// navigate(`/TP/${state.LineID}`);
// // 执行向上键的逻辑
// } else if (event.key === 'ArrowDown') {
// console.log('LDPage向下键被按下');
// // 执行向下键的逻辑
// }
// };
const navigate = useNavigate();
const location = useLocation();
const LineID = location.search.split('=')[1];
console.log(location)
console.log("LDPage被加载了")
useEffect(() => {
const handleKeyDown = (event:any) => {
if (event.key === 'ArrowUp') {
console.log('LDPage向上键被按下');
navigate(`/LP/${LineID}`);
// 执行向上键的逻辑
} else if (event.key === 'ArrowDown') {
console.log('LDPage向下键被按下');
// 执行向下键的逻辑
navigate(`/LP/${LineID}`);
}
};
window.addEventListener('keydown', handleKeyDown);
// window.addEventListener('keydown', handleKeyDown);
// return () => {
// window.removeEventListener('keydown', handleKeyDown);
// };
// }, []);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
});
return (
<React.Fragment>

20
src/page/LinePage1-1/Center/CenterDown.tsx
View File

@@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton";
// import SwitchButton from "../Component/SwitchButton";
import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks"
@@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" },
{ name: "月", ename: "month" },
];
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
const handleButtonChange = (activeName: string) => {
setActiveName(activeName);
};
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
// const handleButtonChange = (activeName: string) => {
// setActiveName(activeName);
// };
const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36,
@@ -41,7 +41,7 @@ function CenterDown() {
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],
columnWidth: [80, 137, 177, 97],
data: []
};
// 报警数据
@@ -64,7 +64,7 @@ function CenterDown() {
});
}
config.data = arr
// 产线成品率
// 工段成品率
// @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore
@@ -181,12 +181,12 @@ function CenterDown() {
</p>)}
</div>
</div>
{/* 产线成品率 */}
{/* 工段成品率 */}
<div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} />
<div className="left_up_switch">
{/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div>
</div> */}
{chartData.xData.length>0 && (
<div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />}

8
src/page/LinePage1-1/Component/TitleBox/index.tsx
View File

@@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
case "left_up":
return {
img: Defect,
title: "产线报废汇总",
title: "工段报废汇总",
};
case "left_down":
return {
img: Record,
title: "当前产线报废情况",
title: "工序报废情况",
};
case "center_down_left":
return {
@@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right":
return {
img: Finished,
title: "产线成品率",
title: "工段成品率",
};
case "right_up":
return {
img: Num,
title: "各产线总投入和产出",
title: "各工段总投入和产出",
};
default:
return {

31
src/page/LinePage1-1/Left/LeftDown.tsx
View File

@@ -25,7 +25,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 224],
["2", "包装1", 322],
@@ -40,7 +40,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 1119],
["2", "包装1", 1798],
@@ -55,7 +55,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 5004],
["2", "包装1", 9122],
@@ -65,7 +65,9 @@ function LeftDown() {
const color1 = ["#9DD5FF", "#1295FF"];
const color2 = ["#85F6E9", "#2EC6B4"];
// @ts-ignore
let xData: string[] = data.scrapBars
let xData1: string[] = [];
let xData2: string[] = [];
let xData3: string[] = [];
let dataProps1: number[] = [];
let dataProps2: number[] = [];
let dataProps3: number[] = [];
@@ -77,9 +79,10 @@ function LeftDown() {
// @ts-ignore
data.todayProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr1.push(arrInner);
dataProps1.push(item.scrapNum);
xData1.push(item.sectionName);
dataProps1.push(item.scrapNum || 0);
})
}else{
dataProps1 = []
@@ -89,9 +92,10 @@ function LeftDown() {
// @ts-ignore
data.weekProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr2.push(arrInner);
dataProps2.push(item.scrapNum);
xData2.push(item.sectionName);
dataProps2.push(item.scrapNum || 0);
})
}else{
dataProps2 = []
@@ -101,9 +105,10 @@ function LeftDown() {
// @ts-ignore
data.monthProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr3.push(arrInner);
dataProps3.push(item.scrapNum);
xData3.push(item.sectionName);
dataProps3.push(item.scrapNum || 0);
})
}else{
dataProps3 = []
@@ -111,9 +116,9 @@ function LeftDown() {
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);
const options1 = getOptions(dataProps1,xData1, color1);
const options2 = getOptions(dataProps2,xData2, color2);
const options3 = getOptions(dataProps3,xData3, color1);
return (
<div className="left_down">
<TitleBox title={"left_down"} />

94
src/page/LinePage1-1/Left/LeftUp.tsx
View File

@@ -54,21 +54,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
dataSource.day.xData.map((item,index)=>{
let sumIner = 0
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.day.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.day.xData.length; k++) {
let item = dataSource.day.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.day.series.length;i++){
let itemSeries = dataSource.day.series[i]
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.day.series.push({
data: sum,
type: "bar",
@@ -109,21 +122,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
dataSource.week.xData.map((item,index)=>{
let sumIner = 0
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.week.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.week.xData.length; k++) {
let item = dataSource.week.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.week.series.length;i++){
let itemSeries = dataSource.week.series[i]
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.week.series.push({
data: sum,
type: "bar",
@@ -164,21 +190,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
dataSource.month.xData.map((item,index)=>{
let sumIner = 0
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.month.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.month.xData.length; k++) {
let item = dataSource.month.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.month.series.length;i++){
let itemSeries = dataSource.month.series[i]
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.month.series.push({
data: sum,
type: "bar",
@@ -198,6 +237,7 @@ function LeftUp() {
dataSource.month.series = []
}
const options = getOptions(chartData);
console.log('dataSource',dataSource)
return (
<div className="left_up">
<TitleBox title={"left_up"} />

4
src/page/LinePage1-1/Right/RightDown.tsx
View File

@@ -101,7 +101,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner);
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[1].data.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum);
})
@@ -117,7 +117,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner);
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[2].data.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum);
})

6
src/page/LinePage1-1/Right/RightUp.tsx
View File

@@ -12,14 +12,14 @@ function RightUp() {
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],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

4
src/page/LinePage1-1/index.css
View File

@@ -100,7 +100,7 @@
.center_down .right_box .chart_box {
width: 100%;
height: 310px;
margin-top: 10px;
margin-top: 5px;
}
.right_up {
width: 401px;
@@ -230,7 +230,7 @@
right: 0px;
bottom: 0px;
z-index: 1002;
width: 240px;
width: 270px;
height: 110px;
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
background-size: 100% 100%;

20
src/page/LinePage1-1/index.tsx
View File

@@ -3,7 +3,27 @@ import TopP from "./TopP";
import Left from "./Left";
import Right from "./Right";
import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() {
const navigate = useNavigate();
useEffect(() => {
const handleKeyDown = (event:any) => {
if (event.key === 'ArrowUp') {
console.log('LDPage向上键被按下');
navigate('/LD?lineId=1-1');
// 执行向上键的逻辑
} else if (event.key === 'ArrowDown') {
console.log('LDPage向下键被按下');
// 执行向下键的逻辑
navigate('/LD?lineId=1-1');
}
}
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
});
return (
<React.Fragment>
<TopP />

20
src/page/LinePage1-2/Center/CenterDown.tsx
View File

@@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton";
// import SwitchButton from "../Component/SwitchButton";
import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks"
@@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" },
{ name: "月", ename: "month" },
];
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
const handleButtonChange = (activeName: string) => {
setActiveName(activeName);
};
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
// const handleButtonChange = (activeName: string) => {
// setActiveName(activeName);
// };
const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36,
@@ -41,7 +41,7 @@ function CenterDown() {
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],
columnWidth: [80, 137, 177, 97],
data: []
};
// 报警数据
@@ -64,7 +64,7 @@ function CenterDown() {
});
}
config.data = arr
// 产线成品率
// 工段成品率
// @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore
@@ -181,12 +181,12 @@ function CenterDown() {
</p>)}
</div>
</div>
{/* 产线成品率 */}
{/* 工段成品率 */}
<div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} />
<div className="left_up_switch">
{/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div>
</div> */}
{chartData.xData.length>0 && (
<div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />}

8
src/page/LinePage1-2/Component/TitleBox/index.tsx
View File

@@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
case "left_up":
return {
img: Defect,
title: "产线报废汇总",
title: "工段报废汇总",
};
case "left_down":
return {
img: Record,
title: "当前产线报废情况",
title: "工序报废情况",
};
case "center_down_left":
return {
@@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right":
return {
img: Finished,
title: "产线成品率",
title: "工段成品率",
};
case "right_up":
return {
img: Num,
title: "各产线总投入和产出",
title: "各工段总投入和产出",
};
default:
return {

31
src/page/LinePage1-2/Left/LeftDown.tsx
View File

@@ -25,7 +25,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 224],
["2", "包装1", 322],
@@ -40,7 +40,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 1119],
["2", "包装1", 1798],
@@ -55,7 +55,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 5004],
["2", "包装1", 9122],
@@ -65,7 +65,9 @@ function LeftDown() {
const color1 = ["#9DD5FF", "#1295FF"];
const color2 = ["#85F6E9", "#2EC6B4"];
// @ts-ignore
let xData: string[] = data.scrapBars
let xData1: string[] = [];
let xData2: string[] = [];
let xData3: string[] = [];
let dataProps1: number[] = [];
let dataProps2: number[] = [];
let dataProps3: number[] = [];
@@ -77,9 +79,10 @@ function LeftDown() {
// @ts-ignore
data.todayProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr1.push(arrInner);
dataProps1.push(item.scrapNum);
xData1.push(item.sectionName);
dataProps1.push(item.scrapNum || 0);
})
}else{
dataProps1 = []
@@ -89,9 +92,10 @@ function LeftDown() {
// @ts-ignore
data.weekProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr2.push(arrInner);
dataProps2.push(item.scrapNum);
xData2.push(item.sectionName);
dataProps2.push(item.scrapNum || 0);
})
}else{
dataProps2 = []
@@ -101,9 +105,10 @@ function LeftDown() {
// @ts-ignore
data.monthProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr3.push(arrInner);
dataProps3.push(item.scrapNum);
xData3.push(item.sectionName);
dataProps3.push(item.scrapNum || 0);
})
}else{
dataProps3 = []
@@ -111,9 +116,9 @@ function LeftDown() {
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);
const options1 = getOptions(dataProps1,xData1, color1);
const options2 = getOptions(dataProps2,xData2, color2);
const options3 = getOptions(dataProps3,xData3, color1);
return (
<div className="left_down">
<TitleBox title={"left_down"} />

94
src/page/LinePage1-2/Left/LeftUp.tsx
View File

@@ -54,21 +54,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
dataSource.day.xData.map((item,index)=>{
let sumIner = 0
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.day.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.day.xData.length; k++) {
let item = dataSource.day.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.day.series.length;i++){
let itemSeries = dataSource.day.series[i]
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.day.series.push({
data: sum,
type: "bar",
@@ -109,21 +122,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
dataSource.week.xData.map((item,index)=>{
let sumIner = 0
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.week.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.week.xData.length; k++) {
let item = dataSource.week.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.week.series.length;i++){
let itemSeries = dataSource.week.series[i]
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.week.series.push({
data: sum,
type: "bar",
@@ -164,21 +190,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
dataSource.month.xData.map((item,index)=>{
let sumIner = 0
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.month.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.month.xData.length; k++) {
let item = dataSource.month.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.month.series.length;i++){
let itemSeries = dataSource.month.series[i]
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.month.series.push({
data: sum,
type: "bar",
@@ -198,6 +237,7 @@ function LeftUp() {
dataSource.month.series = []
}
const options = getOptions(chartData);
console.log('dataSource',dataSource)
return (
<div className="left_up">
<TitleBox title={"left_up"} />

4
src/page/LinePage1-2/Right/RightDown.tsx
View File

@@ -101,7 +101,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner);
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[1].data.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum);
})
@@ -117,7 +117,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner);
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[2].data.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum);
})

6
src/page/LinePage1-2/Right/RightUp.tsx
View File

@@ -12,14 +12,14 @@ function RightUp() {
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],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

20
src/page/LinePage1-2/index.tsx
View File

@@ -3,7 +3,27 @@ import TopP from "./TopP";
import Left from "./Left";
import Right from "./Right";
import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() {
const navigate = useNavigate();
useEffect(() => {
const handleKeyDown = (event:any) => {
if (event.key === 'ArrowUp') {
console.log('LDPage向上键被按下');
navigate('/LD?lineId=1-2');
// 执行向上键的逻辑
} else if (event.key === 'ArrowDown') {
console.log('LDPage向下键被按下');
// 执行向下键的逻辑
navigate('/LD?lineId=1-2');
}
}
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
});
return (
<React.Fragment>
<TopP />

20
src/page/LinePage2-1/Center/CenterDown.tsx
View File

@@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton";
// import SwitchButton from "../Component/SwitchButton";
import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks"
@@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" },
{ name: "月", ename: "month" },
];
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
const handleButtonChange = (activeName: string) => {
setActiveName(activeName);
};
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
// const handleButtonChange = (activeName: string) => {
// setActiveName(activeName);
// };
const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36,
@@ -41,7 +41,7 @@ function CenterDown() {
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],
columnWidth: [80, 137, 177, 97],
data: []
};
// 报警数据
@@ -64,7 +64,7 @@ function CenterDown() {
});
}
config.data = arr
// 产线成品率
// 工段成品率
// @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore
@@ -181,12 +181,12 @@ function CenterDown() {
</p>)}
</div>
</div>
{/* 产线成品率 */}
{/* 工段成品率 */}
<div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} />
<div className="left_up_switch">
{/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div>
</div> */}
{chartData.xData.length>0 && (
<div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />}

8
src/page/LinePage2-1/Component/TitleBox/index.tsx
View File

@@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
case "left_up":
return {
img: Defect,
title: "产线报废汇总",
title: "工段报废汇总",
};
case "left_down":
return {
img: Record,
title: "当前产线报废情况",
title: "工序报废情况",
};
case "center_down_left":
return {
@@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right":
return {
img: Finished,
title: "产线成品率",
title: "工段成品率",
};
case "right_up":
return {
img: Num,
title: "各产线总投入和产出",
title: "各工段总投入和产出",
};
default:
return {

31
src/page/LinePage2-1/Left/LeftDown.tsx
View File

@@ -25,7 +25,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 224],
["2", "包装1", 322],
@@ -40,7 +40,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 1119],
["2", "包装1", 1798],
@@ -55,7 +55,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 5004],
["2", "包装1", 9122],
@@ -65,7 +65,9 @@ function LeftDown() {
const color1 = ["#9DD5FF", "#1295FF"];
const color2 = ["#85F6E9", "#2EC6B4"];
// @ts-ignore
let xData: string[] = data.scrapBars
let xData1: string[] = [];
let xData2: string[] = [];
let xData3: string[] = [];
let dataProps1: number[] = [];
let dataProps2: number[] = [];
let dataProps3: number[] = [];
@@ -77,9 +79,10 @@ function LeftDown() {
// @ts-ignore
data.todayProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr1.push(arrInner);
dataProps1.push(item.scrapNum);
xData1.push(item.sectionName);
dataProps1.push(item.scrapNum || 0);
})
}else{
dataProps1 = []
@@ -89,9 +92,10 @@ function LeftDown() {
// @ts-ignore
data.weekProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr2.push(arrInner);
dataProps2.push(item.scrapNum);
xData2.push(item.sectionName);
dataProps2.push(item.scrapNum || 0);
})
}else{
dataProps2 = []
@@ -101,9 +105,10 @@ function LeftDown() {
// @ts-ignore
data.monthProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr3.push(arrInner);
dataProps3.push(item.scrapNum);
xData3.push(item.sectionName);
dataProps3.push(item.scrapNum || 0);
})
}else{
dataProps3 = []
@@ -111,9 +116,9 @@ function LeftDown() {
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);
const options1 = getOptions(dataProps1,xData1, color1);
const options2 = getOptions(dataProps2,xData2, color2);
const options3 = getOptions(dataProps3,xData3, color1);
return (
<div className="left_down">
<TitleBox title={"left_down"} />

94
src/page/LinePage2-1/Left/LeftUp.tsx
View File

@@ -54,21 +54,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
dataSource.day.xData.map((item,index)=>{
let sumIner = 0
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.day.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.day.xData.length; k++) {
let item = dataSource.day.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.day.series.length;i++){
let itemSeries = dataSource.day.series[i]
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.day.series.push({
data: sum,
type: "bar",
@@ -109,21 +122,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
dataSource.week.xData.map((item,index)=>{
let sumIner = 0
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.week.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.week.xData.length; k++) {
let item = dataSource.week.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.week.series.length;i++){
let itemSeries = dataSource.week.series[i]
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.week.series.push({
data: sum,
type: "bar",
@@ -164,21 +190,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
dataSource.month.xData.map((item,index)=>{
let sumIner = 0
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.month.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.month.xData.length; k++) {
let item = dataSource.month.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.month.series.length;i++){
let itemSeries = dataSource.month.series[i]
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.month.series.push({
data: sum,
type: "bar",
@@ -198,6 +237,7 @@ function LeftUp() {
dataSource.month.series = []
}
const options = getOptions(chartData);
console.log('dataSource',dataSource)
return (
<div className="left_up">
<TitleBox title={"left_up"} />

4
src/page/LinePage2-1/Right/RightDown.tsx
View File

@@ -101,7 +101,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner);
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[1].data.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum);
})
@@ -117,7 +117,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner);
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[2].data.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum);
})

6
src/page/LinePage2-1/Right/RightUp.tsx
View File

@@ -12,14 +12,14 @@ function RightUp() {
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],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

4
src/page/LinePage2-1/index.css
View File

@@ -100,7 +100,7 @@
.center_down .right_box .chart_box {
width: 100%;
height: 310px;
margin-top: 10px;
margin-top: 5px;
}
.right_up {
width: 401px;
@@ -230,7 +230,7 @@
right: 0px;
bottom: 0px;
z-index: 1002;
width: 240px;
width: 270px;
height: 110px;
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
background-size: 100% 100%;

20
src/page/LinePage2-1/index.tsx
View File

@@ -3,7 +3,27 @@ import TopP from "./TopP";
import Left from "./Left";
import Right from "./Right";
import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() {
const navigate = useNavigate();
useEffect(() => {
const handleKeyDown = (event:any) => {
if (event.key === 'ArrowUp') {
console.log('LDPage向上键被按下');
navigate('/LD?lineId=2-1');
// 执行向上键的逻辑
} else if (event.key === 'ArrowDown') {
console.log('LDPage向下键被按下');
// 执行向下键的逻辑
navigate('/LD?lineId=2-1');
}
}
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
});
return (
<React.Fragment>
<TopP />

20
src/page/LinePage2-2/Center/CenterDown.tsx
View File

@@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton";
// import SwitchButton from "../Component/SwitchButton";
import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks"
@@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" },
{ name: "月", ename: "month" },
];
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
const handleButtonChange = (activeName: string) => {
setActiveName(activeName);
};
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
// const handleButtonChange = (activeName: string) => {
// setActiveName(activeName);
// };
const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36,
@@ -41,7 +41,7 @@ function CenterDown() {
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],
columnWidth: [80, 137, 177, 97],
data: []
};
// 报警数据
@@ -64,7 +64,7 @@ function CenterDown() {
});
}
config.data = arr
// 产线成品率
// 工段成品率
// @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore
@@ -181,12 +181,12 @@ function CenterDown() {
</p>)}
</div>
</div>
{/* 产线成品率 */}
{/* 工段成品率 */}
<div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} />
<div className="left_up_switch">
{/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div>
</div> */}
{chartData.xData.length>0 && (
<div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />}

8
src/page/LinePage2-2/Component/TitleBox/index.tsx
View File

@@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
case "left_up":
return {
img: Defect,
title: "产线报废汇总",
title: "工段报废汇总",
};
case "left_down":
return {
img: Record,
title: "当前产线报废情况",
title: "工序报废情况",
};
case "center_down_left":
return {
@@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right":
return {
img: Finished,
title: "产线成品率",
title: "工段成品率",
};
case "right_up":
return {
img: Num,
title: "各产线总投入和产出",
title: "各工段总投入和产出",
};
default:
return {

31
src/page/LinePage2-2/Left/LeftDown.tsx
View File

@@ -25,7 +25,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 224],
["2", "包装1", 322],
@@ -40,7 +40,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 1119],
["2", "包装1", 1798],
@@ -55,7 +55,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 5004],
["2", "包装1", 9122],
@@ -65,7 +65,9 @@ function LeftDown() {
const color1 = ["#9DD5FF", "#1295FF"];
const color2 = ["#85F6E9", "#2EC6B4"];
// @ts-ignore
let xData: string[] = data.scrapBars
let xData1: string[] = [];
let xData2: string[] = [];
let xData3: string[] = [];
let dataProps1: number[] = [];
let dataProps2: number[] = [];
let dataProps3: number[] = [];
@@ -77,9 +79,10 @@ function LeftDown() {
// @ts-ignore
data.todayProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr1.push(arrInner);
dataProps1.push(item.scrapNum);
xData1.push(item.sectionName);
dataProps1.push(item.scrapNum || 0);
})
}else{
dataProps1 = []
@@ -89,9 +92,10 @@ function LeftDown() {
// @ts-ignore
data.weekProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr2.push(arrInner);
dataProps2.push(item.scrapNum);
xData2.push(item.sectionName);
dataProps2.push(item.scrapNum || 0);
})
}else{
dataProps2 = []
@@ -101,9 +105,10 @@ function LeftDown() {
// @ts-ignore
data.monthProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr3.push(arrInner);
dataProps3.push(item.scrapNum);
xData3.push(item.sectionName);
dataProps3.push(item.scrapNum || 0);
})
}else{
dataProps3 = []
@@ -111,9 +116,9 @@ function LeftDown() {
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);
const options1 = getOptions(dataProps1,xData1, color1);
const options2 = getOptions(dataProps2,xData2, color2);
const options3 = getOptions(dataProps3,xData3, color1);
return (
<div className="left_down">
<TitleBox title={"left_down"} />

94
src/page/LinePage2-2/Left/LeftUp.tsx
View File

@@ -54,21 +54,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
dataSource.day.xData.map((item,index)=>{
let sumIner = 0
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.day.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.day.xData.length; k++) {
let item = dataSource.day.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.day.series.length;i++){
let itemSeries = dataSource.day.series[i]
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.day.series.push({
data: sum,
type: "bar",
@@ -109,21 +122,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
dataSource.week.xData.map((item,index)=>{
let sumIner = 0
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.week.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.week.xData.length; k++) {
let item = dataSource.week.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.week.series.length;i++){
let itemSeries = dataSource.week.series[i]
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.week.series.push({
data: sum,
type: "bar",
@@ -164,21 +190,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
dataSource.month.xData.map((item,index)=>{
let sumIner = 0
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.month.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.month.xData.length; k++) {
let item = dataSource.month.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.month.series.length;i++){
let itemSeries = dataSource.month.series[i]
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.month.series.push({
data: sum,
type: "bar",
@@ -198,6 +237,7 @@ function LeftUp() {
dataSource.month.series = []
}
const options = getOptions(chartData);
console.log('dataSource',dataSource)
return (
<div className="left_up">
<TitleBox title={"left_up"} />

4
src/page/LinePage2-2/Right/RightDown.tsx
View File

@@ -101,7 +101,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner);
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[1].data.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum);
})
@@ -117,7 +117,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner);
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[2].data.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum);
})

6
src/page/LinePage2-2/Right/RightUp.tsx
View File

@@ -12,14 +12,14 @@ function RightUp() {
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],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

20
src/page/LinePage2-2/index.tsx
View File

@@ -3,7 +3,27 @@ import TopP from "./TopP";
import Left from "./Left";
import Right from "./Right";
import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() {
const navigate = useNavigate();
useEffect(() => {
const handleKeyDown = (event:any) => {
if (event.key === 'ArrowUp') {
console.log('LDPage向上键被按下');
navigate('/LD?lineId=2-2');
// 执行向上键的逻辑
} else if (event.key === 'ArrowDown') {
console.log('LDPage向下键被按下');
// 执行向下键的逻辑
navigate('/LD?lineId=2-2');
}
}
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
});
return (
<React.Fragment>
<TopP />

20
src/page/LinePage3-1/Center/CenterDown.tsx
View File

@@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton";
// import SwitchButton from "../Component/SwitchButton";
import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks"
@@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" },
{ name: "月", ename: "month" },
];
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
const handleButtonChange = (activeName: string) => {
setActiveName(activeName);
};
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
// const handleButtonChange = (activeName: string) => {
// setActiveName(activeName);
// };
const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36,
@@ -41,7 +41,7 @@ function CenterDown() {
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],
columnWidth: [80, 137, 177, 97],
data: []
};
// 报警数据
@@ -64,7 +64,7 @@ function CenterDown() {
});
}
config.data = arr
// 产线成品率
// 工段成品率
// @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore
@@ -181,12 +181,12 @@ function CenterDown() {
</p>)}
</div>
</div>
{/* 产线成品率 */}
{/* 工段成品率 */}
<div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} />
<div className="left_up_switch">
{/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div>
</div> */}
{chartData.xData.length>0 && (
<div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />}

8
src/page/LinePage3-1/Component/TitleBox/index.tsx
View File

@@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
case "left_up":
return {
img: Defect,
title: "产线报废汇总",
title: "工段报废汇总",
};
case "left_down":
return {
img: Record,
title: "当前产线报废情况",
title: "工序报废情况",
};
case "center_down_left":
return {
@@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right":
return {
img: Finished,
title: "产线成品率",
title: "工段成品率",
};
case "right_up":
return {
img: Num,
title: "各产线总投入和产出",
title: "各工段总投入和产出",
};
default:
return {

31
src/page/LinePage3-1/Left/LeftDown.tsx
View File

@@ -25,7 +25,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 224],
["2", "包装1", 322],
@@ -40,7 +40,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 1119],
["2", "包装1", 1798],
@@ -55,7 +55,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 5004],
["2", "包装1", 9122],
@@ -65,7 +65,9 @@ function LeftDown() {
const color1 = ["#9DD5FF", "#1295FF"];
const color2 = ["#85F6E9", "#2EC6B4"];
// @ts-ignore
let xData: string[] = data.scrapBars
let xData1: string[] = [];
let xData2: string[] = [];
let xData3: string[] = [];
let dataProps1: number[] = [];
let dataProps2: number[] = [];
let dataProps3: number[] = [];
@@ -77,9 +79,10 @@ function LeftDown() {
// @ts-ignore
data.todayProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr1.push(arrInner);
dataProps1.push(item.scrapNum);
xData1.push(item.sectionName);
dataProps1.push(item.scrapNum || 0);
})
}else{
dataProps1 = []
@@ -89,9 +92,10 @@ function LeftDown() {
// @ts-ignore
data.weekProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr2.push(arrInner);
dataProps2.push(item.scrapNum);
xData2.push(item.sectionName);
dataProps2.push(item.scrapNum || 0);
})
}else{
dataProps2 = []
@@ -101,9 +105,10 @@ function LeftDown() {
// @ts-ignore
data.monthProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr3.push(arrInner);
dataProps3.push(item.scrapNum);
xData3.push(item.sectionName);
dataProps3.push(item.scrapNum || 0);
})
}else{
dataProps3 = []
@@ -111,9 +116,9 @@ function LeftDown() {
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);
const options1 = getOptions(dataProps1,xData1, color1);
const options2 = getOptions(dataProps2,xData2, color2);
const options3 = getOptions(dataProps3,xData3, color1);
return (
<div className="left_down">
<TitleBox title={"left_down"} />

94
src/page/LinePage3-1/Left/LeftUp.tsx
View File

@@ -54,21 +54,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
dataSource.day.xData.map((item,index)=>{
let sumIner = 0
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.day.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.day.xData.length; k++) {
let item = dataSource.day.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.day.series.length;i++){
let itemSeries = dataSource.day.series[i]
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.day.series.push({
data: sum,
type: "bar",
@@ -109,21 +122,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
dataSource.week.xData.map((item,index)=>{
let sumIner = 0
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.week.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.week.xData.length; k++) {
let item = dataSource.week.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.week.series.length;i++){
let itemSeries = dataSource.week.series[i]
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.week.series.push({
data: sum,
type: "bar",
@@ -164,21 +190,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
dataSource.month.xData.map((item,index)=>{
let sumIner = 0
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.month.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.month.xData.length; k++) {
let item = dataSource.month.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.month.series.length;i++){
let itemSeries = dataSource.month.series[i]
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.month.series.push({
data: sum,
type: "bar",
@@ -198,6 +237,7 @@ function LeftUp() {
dataSource.month.series = []
}
const options = getOptions(chartData);
console.log('dataSource',dataSource)
return (
<div className="left_up">
<TitleBox title={"left_up"} />

4
src/page/LinePage3-1/Right/RightDown.tsx
View File

@@ -100,7 +100,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner);
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[1].data.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum);
})
@@ -116,7 +116,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner);
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[2].data.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum);
})

6
src/page/LinePage3-1/Right/RightUp.tsx
View File

@@ -12,14 +12,14 @@ function RightUp() {
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],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

20
src/page/LinePage3-1/index.tsx
View File

@@ -3,7 +3,27 @@ import TopP from "./TopP";
import Left from "./Left";
import Right from "./Right";
import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() {
const navigate = useNavigate();
useEffect(() => {
const handleKeyDown = (event:any) => {
if (event.key === 'ArrowUp') {
console.log('LDPage向上键被按下');
navigate('/LD?lineId=3-1');
// 执行向上键的逻辑
} else if (event.key === 'ArrowDown') {
console.log('LDPage向下键被按下');
// 执行向下键的逻辑
navigate('/LD?lineId=3-1');
}
}
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
});
return (
<React.Fragment>
<TopP />

20
src/page/LinePage3-2/Center/CenterDown.tsx
View File

@@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton";
// import SwitchButton from "../Component/SwitchButton";
import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks"
@@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" },
{ name: "月", ename: "month" },
];
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
const handleButtonChange = (activeName: string) => {
setActiveName(activeName);
};
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
// const handleButtonChange = (activeName: string) => {
// setActiveName(activeName);
// };
const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36,
@@ -41,7 +41,7 @@ function CenterDown() {
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],
columnWidth: [80, 137, 177, 97],
data: []
};
// 报警数据
@@ -64,7 +64,7 @@ function CenterDown() {
});
}
config.data = arr
// 产线成品率
// 工段成品率
// @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore
@@ -181,12 +181,12 @@ function CenterDown() {
</p>)}
</div>
</div>
{/* 产线成品率 */}
{/* 工段成品率 */}
<div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} />
<div className="left_up_switch">
{/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div>
</div> */}
{chartData.xData.length>0 && (
<div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />}

8
src/page/LinePage3-2/Component/TitleBox/index.tsx
View File

@@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
case "left_up":
return {
img: Defect,
title: "产线报废汇总",
title: "工段报废汇总",
};
case "left_down":
return {
img: Record,
title: "当前产线报废情况",
title: "工序报废情况",
};
case "center_down_left":
return {
@@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right":
return {
img: Finished,
title: "产线成品率",
title: "工段成品率",
};
case "right_up":
return {
img: Num,
title: "各产线总投入和产出",
title: "各工段总投入和产出",
};
default:
return {

31
src/page/LinePage3-2/Left/LeftDown.tsx
View File

@@ -25,7 +25,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 224],
["2", "包装1", 322],
@@ -40,7 +40,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 1119],
["2", "包装1", 1798],
@@ -55,7 +55,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 5004],
["2", "包装1", 9122],
@@ -65,7 +65,9 @@ function LeftDown() {
const color1 = ["#9DD5FF", "#1295FF"];
const color2 = ["#85F6E9", "#2EC6B4"];
// @ts-ignore
let xData: string[] = data.scrapBars
let xData1: string[] = [];
let xData2: string[] = [];
let xData3: string[] = [];
let dataProps1: number[] = [];
let dataProps2: number[] = [];
let dataProps3: number[] = [];
@@ -77,9 +79,10 @@ function LeftDown() {
// @ts-ignore
data.todayProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr1.push(arrInner);
dataProps1.push(item.scrapNum);
xData1.push(item.sectionName);
dataProps1.push(item.scrapNum || 0);
})
}else{
dataProps1 = []
@@ -89,9 +92,10 @@ function LeftDown() {
// @ts-ignore
data.weekProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr2.push(arrInner);
dataProps2.push(item.scrapNum);
xData2.push(item.sectionName);
dataProps2.push(item.scrapNum || 0);
})
}else{
dataProps2 = []
@@ -101,9 +105,10 @@ function LeftDown() {
// @ts-ignore
data.monthProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr3.push(arrInner);
dataProps3.push(item.scrapNum);
xData3.push(item.sectionName);
dataProps3.push(item.scrapNum || 0);
})
}else{
dataProps3 = []
@@ -111,9 +116,9 @@ function LeftDown() {
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);
const options1 = getOptions(dataProps1,xData1, color1);
const options2 = getOptions(dataProps2,xData2, color2);
const options3 = getOptions(dataProps3,xData3, color1);
return (
<div className="left_down">
<TitleBox title={"left_down"} />

94
src/page/LinePage3-2/Left/LeftUp.tsx
View File

@@ -54,21 +54,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
dataSource.day.xData.map((item,index)=>{
let sumIner = 0
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.day.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.day.xData.length; k++) {
let item = dataSource.day.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.day.series.length;i++){
let itemSeries = dataSource.day.series[i]
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.day.series.push({
data: sum,
type: "bar",
@@ -109,21 +122,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
dataSource.week.xData.map((item,index)=>{
let sumIner = 0
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.week.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.week.xData.length; k++) {
let item = dataSource.week.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.week.series.length;i++){
let itemSeries = dataSource.week.series[i]
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.week.series.push({
data: sum,
type: "bar",
@@ -164,21 +190,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
dataSource.month.xData.map((item,index)=>{
let sumIner = 0
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.month.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.month.xData.length; k++) {
let item = dataSource.month.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.month.series.length;i++){
let itemSeries = dataSource.month.series[i]
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.month.series.push({
data: sum,
type: "bar",
@@ -198,6 +237,7 @@ function LeftUp() {
dataSource.month.series = []
}
const options = getOptions(chartData);
console.log('dataSource',dataSource)
return (
<div className="left_up">
<TitleBox title={"left_up"} />

4
src/page/LinePage3-2/Right/RightDown.tsx
View File

@@ -101,7 +101,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner);
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[1].data.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum);
})
@@ -117,7 +117,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner);
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[2].data.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum);
})

6
src/page/LinePage3-2/Right/RightUp.tsx
View File

@@ -12,14 +12,14 @@ function RightUp() {
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],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

20
src/page/LinePage3-2/index.tsx
View File

@@ -3,7 +3,27 @@ import TopP from "./TopP";
import Left from "./Left";
import Right from "./Right";
import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() {
const navigate = useNavigate();
useEffect(() => {
const handleKeyDown = (event:any) => {
if (event.key === 'ArrowUp') {
console.log('LDPage向上键被按下');
navigate('/LD?lineId=3-2');
// 执行向上键的逻辑
} else if (event.key === 'ArrowDown') {
console.log('LDPage向下键被按下');
// 执行向下键的逻辑
navigate('/LD?lineId=3-2');
}
}
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
});
return (
<React.Fragment>
<TopP />

20
src/page/LinePage4-1/Center/CenterDown.tsx
View File

@@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton";
// import SwitchButton from "../Component/SwitchButton";
import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks"
@@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" },
{ name: "月", ename: "month" },
];
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
const handleButtonChange = (activeName: string) => {
setActiveName(activeName);
};
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
// const handleButtonChange = (activeName: string) => {
// setActiveName(activeName);
// };
const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36,
@@ -41,7 +41,7 @@ function CenterDown() {
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],
columnWidth: [80, 137, 177, 97],
data: []
};
// 报警数据
@@ -64,7 +64,7 @@ function CenterDown() {
});
}
config.data = arr
// 产线成品率
// 工段成品率
// @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore
@@ -181,12 +181,12 @@ function CenterDown() {
</p>)}
</div>
</div>
{/* 产线成品率 */}
{/* 工段成品率 */}
<div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} />
<div className="left_up_switch">
{/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div>
</div> */}
{chartData.xData.length>0 && (
<div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />}

8
src/page/LinePage4-1/Component/TitleBox/index.tsx
View File

@@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
case "left_up":
return {
img: Defect,
title: "产线报废汇总",
title: "工段报废汇总",
};
case "left_down":
return {
img: Record,
title: "当前产线报废情况",
title: "工序报废情况",
};
case "center_down_left":
return {
@@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right":
return {
img: Finished,
title: "产线成品率",
title: "工段成品率",
};
case "right_up":
return {
img: Num,
title: "各产线总投入和产出",
title: "各工段总投入和产出",
};
default:
return {

31
src/page/LinePage4-1/Left/LeftDown.tsx
View File

@@ -25,7 +25,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 224],
["2", "包装1", 322],
@@ -40,7 +40,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 1119],
["2", "包装1", 1798],
@@ -55,7 +55,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 5004],
["2", "包装1", 9122],
@@ -65,7 +65,9 @@ function LeftDown() {
const color1 = ["#9DD5FF", "#1295FF"];
const color2 = ["#85F6E9", "#2EC6B4"];
// @ts-ignore
let xData: string[] = data.scrapBars
let xData1: string[] = [];
let xData2: string[] = [];
let xData3: string[] = [];
let dataProps1: number[] = [];
let dataProps2: number[] = [];
let dataProps3: number[] = [];
@@ -77,9 +79,10 @@ function LeftDown() {
// @ts-ignore
data.todayProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr1.push(arrInner);
dataProps1.push(item.scrapNum);
xData1.push(item.sectionName);
dataProps1.push(item.scrapNum || 0);
})
}else{
dataProps1 = []
@@ -89,9 +92,10 @@ function LeftDown() {
// @ts-ignore
data.weekProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr2.push(arrInner);
dataProps2.push(item.scrapNum);
xData2.push(item.sectionName);
dataProps2.push(item.scrapNum || 0);
})
}else{
dataProps2 = []
@@ -101,9 +105,10 @@ function LeftDown() {
// @ts-ignore
data.monthProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr3.push(arrInner);
dataProps3.push(item.scrapNum);
xData3.push(item.sectionName);
dataProps3.push(item.scrapNum || 0);
})
}else{
dataProps3 = []
@@ -111,9 +116,9 @@ function LeftDown() {
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);
const options1 = getOptions(dataProps1,xData1, color1);
const options2 = getOptions(dataProps2,xData2, color2);
const options3 = getOptions(dataProps3,xData3, color1);
return (
<div className="left_down">
<TitleBox title={"left_down"} />

94
src/page/LinePage4-1/Left/LeftUp.tsx
View File

@@ -54,21 +54,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
dataSource.day.xData.map((item,index)=>{
let sumIner = 0
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.day.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.day.xData.length; k++) {
let item = dataSource.day.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.day.series.length;i++){
let itemSeries = dataSource.day.series[i]
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.day.series.push({
data: sum,
type: "bar",
@@ -109,21 +122,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
dataSource.week.xData.map((item,index)=>{
let sumIner = 0
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.week.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.week.xData.length; k++) {
let item = dataSource.week.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.week.series.length;i++){
let itemSeries = dataSource.week.series[i]
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.week.series.push({
data: sum,
type: "bar",
@@ -164,21 +190,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
dataSource.month.xData.map((item,index)=>{
let sumIner = 0
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.month.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.month.xData.length; k++) {
let item = dataSource.month.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.month.series.length;i++){
let itemSeries = dataSource.month.series[i]
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.month.series.push({
data: sum,
type: "bar",
@@ -198,6 +237,7 @@ function LeftUp() {
dataSource.month.series = []
}
const options = getOptions(chartData);
console.log('dataSource',dataSource)
return (
<div className="left_up">
<TitleBox title={"left_up"} />

4
src/page/LinePage4-1/Right/RightDown.tsx
View File

@@ -101,7 +101,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner);
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[1].data.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum);
})
@@ -117,7 +117,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner);
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[2].data.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum);
})

6
src/page/LinePage4-1/Right/RightUp.tsx
View File

@@ -12,14 +12,14 @@ function RightUp() {
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],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

20
src/page/LinePage4-1/index.tsx
View File

@@ -3,7 +3,27 @@ import TopP from "./TopP";
import Left from "./Left";
import Right from "./Right";
import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() {
const navigate = useNavigate();
useEffect(() => {
const handleKeyDown = (event:any) => {
if (event.key === 'ArrowUp') {
console.log('LDPage向上键被按下');
navigate('/LD?lineId=4-1');
// 执行向上键的逻辑
} else if (event.key === 'ArrowDown') {
console.log('LDPage向下键被按下');
// 执行向下键的逻辑
navigate('/LD?lineId=4-1');
}
}
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
});
return (
<React.Fragment>
<TopP />

20
src/page/LinePage4-2/Center/CenterDown.tsx
View File

@@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton";
// import SwitchButton from "../Component/SwitchButton";
import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks"
@@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" },
{ name: "月", ename: "month" },
];
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
const handleButtonChange = (activeName: string) => {
setActiveName(activeName);
};
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
// const handleButtonChange = (activeName: string) => {
// setActiveName(activeName);
// };
const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36,
@@ -41,7 +41,7 @@ function CenterDown() {
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],
columnWidth: [80, 137, 177, 97],
data: []
};
// 报警数据
@@ -64,7 +64,7 @@ function CenterDown() {
});
}
config.data = arr
// 产线成品率
// 工段成品率
// @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore
@@ -181,12 +181,12 @@ function CenterDown() {
</p>)}
</div>
</div>
{/* 产线成品率 */}
{/* 工段成品率 */}
<div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} />
<div className="left_up_switch">
{/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div>
</div> */}
{chartData.xData.length>0 && (
<div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />}

8
src/page/LinePage4-2/Component/TitleBox/index.tsx
View File

@@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
case "left_up":
return {
img: Defect,
title: "产线报废汇总",
title: "工段报废汇总",
};
case "left_down":
return {
img: Record,
title: "当前产线报废情况",
title: "工序报废情况",
};
case "center_down_left":
return {
@@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right":
return {
img: Finished,
title: "产线成品率",
title: "工段成品率",
};
case "right_up":
return {
img: Num,
title: "各产线总投入和产出",
title: "各工段总投入和产出",
};
default:
return {

31
src/page/LinePage4-2/Left/LeftDown.tsx
View File

@@ -25,7 +25,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 224],
["2", "包装1", 322],
@@ -40,7 +40,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 1119],
["2", "包装1", 1798],
@@ -55,7 +55,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 5004],
["2", "包装1", 9122],
@@ -65,7 +65,9 @@ function LeftDown() {
const color1 = ["#9DD5FF", "#1295FF"];
const color2 = ["#85F6E9", "#2EC6B4"];
// @ts-ignore
let xData: string[] = data.scrapBars
let xData1: string[] = [];
let xData2: string[] = [];
let xData3: string[] = [];
let dataProps1: number[] = [];
let dataProps2: number[] = [];
let dataProps3: number[] = [];
@@ -77,9 +79,10 @@ function LeftDown() {
// @ts-ignore
data.todayProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr1.push(arrInner);
dataProps1.push(item.scrapNum);
xData1.push(item.sectionName);
dataProps1.push(item.scrapNum || 0);
})
}else{
dataProps1 = []
@@ -89,9 +92,10 @@ function LeftDown() {
// @ts-ignore
data.weekProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr2.push(arrInner);
dataProps2.push(item.scrapNum);
xData2.push(item.sectionName);
dataProps2.push(item.scrapNum || 0);
})
}else{
dataProps2 = []
@@ -101,9 +105,10 @@ function LeftDown() {
// @ts-ignore
data.monthProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr3.push(arrInner);
dataProps3.push(item.scrapNum);
xData3.push(item.sectionName);
dataProps3.push(item.scrapNum || 0);
})
}else{
dataProps3 = []
@@ -111,9 +116,9 @@ function LeftDown() {
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);
const options1 = getOptions(dataProps1,xData1, color1);
const options2 = getOptions(dataProps2,xData2, color2);
const options3 = getOptions(dataProps3,xData3, color1);
return (
<div className="left_down">
<TitleBox title={"left_down"} />

95
src/page/LinePage4-2/Left/LeftUp.tsx
View File

@@ -32,7 +32,6 @@ function LeftUp() {
const handleButtonChange = (activeName: string) => {
setActiveName(activeName);
};
console.log('',chartData)
// @ts-ignore
if (data.todayAllProductionScraps && Object.keys(data.todayAllProductionScraps).length > 0) {
let sum: number[] = [];
@@ -55,21 +54,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
dataSource.day.xData.map((item,index)=>{
let sumIner = 0
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.day.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.day.xData.length; k++) {
let item = dataSource.day.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.day.series.length;i++){
let itemSeries = dataSource.day.series[i]
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.day.series.push({
data: sum,
type: "bar",
@@ -110,21 +122,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
dataSource.week.xData.map((item,index)=>{
let sumIner = 0
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.week.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.week.xData.length; k++) {
let item = dataSource.week.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.week.series.length;i++){
let itemSeries = dataSource.week.series[i]
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.week.series.push({
data: sum,
type: "bar",
@@ -165,21 +190,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
dataSource.month.xData.map((item,index)=>{
let sumIner = 0
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.month.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.month.xData.length; k++) {
let item = dataSource.month.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.month.series.length;i++){
let itemSeries = dataSource.month.series[i]
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.month.series.push({
data: sum,
type: "bar",
@@ -199,6 +237,7 @@ function LeftUp() {
dataSource.month.series = []
}
const options = getOptions(chartData);
console.log('dataSource',dataSource)
return (
<div className="left_up">
<TitleBox title={"left_up"} />

4
src/page/LinePage4-2/Right/RightDown.tsx
View File

@@ -101,7 +101,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner);
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[1].data.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum);
})
@@ -117,7 +117,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner);
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[2].data.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum);
})

6
src/page/LinePage4-2/Right/RightUp.tsx
View File

@@ -12,14 +12,14 @@ function RightUp() {
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],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

20
src/page/LinePage4-2/index.tsx
View File

@@ -3,7 +3,27 @@ import TopP from "./TopP";
import Left from "./Left";
import Right from "./Right";
import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() {
const navigate = useNavigate();
useEffect(() => {
const handleKeyDown = (event:any) => {
if (event.key === 'ArrowUp') {
console.log('LDPage向上键被按下');
navigate('/LD?lineId=4-2');
// 执行向上键的逻辑
} else if (event.key === 'ArrowDown') {
console.log('LDPage向下键被按下');
// 执行向下键的逻辑
navigate('/LD?lineId=4-2');
}
}
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
});
return (
<React.Fragment>
<TopP />

20
src/page/LinePage5-1/Center/CenterDown.tsx
View File

@@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton";
// import SwitchButton from "../Component/SwitchButton";
import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks"
@@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" },
{ name: "月", ename: "month" },
];
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
const handleButtonChange = (activeName: string) => {
setActiveName(activeName);
};
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
// const handleButtonChange = (activeName: string) => {
// setActiveName(activeName);
// };
const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36,
@@ -41,7 +41,7 @@ function CenterDown() {
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],
columnWidth: [80, 137, 177, 97],
data: []
};
// 报警数据
@@ -64,7 +64,7 @@ function CenterDown() {
});
}
config.data = arr
// 产线成品率
// 工段成品率
// @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore
@@ -181,12 +181,12 @@ function CenterDown() {
</p>)}
</div>
</div>
{/* 产线成品率 */}
{/* 工段成品率 */}
<div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} />
<div className="left_up_switch">
{/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div>
</div> */}
{chartData.xData.length>0 && (
<div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />}

8
src/page/LinePage5-1/Component/TitleBox/index.tsx
View File

@@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
case "left_up":
return {
img: Defect,
title: "产线报废汇总",
title: "工段报废汇总",
};
case "left_down":
return {
img: Record,
title: "当前产线报废情况",
title: "工序报废情况",
};
case "center_down_left":
return {
@@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right":
return {
img: Finished,
title: "产线成品率",
title: "工段成品率",
};
case "right_up":
return {
img: Num,
title: "各产线总投入和产出",
title: "各工段总投入和产出",
};
default:
return {

31
src/page/LinePage5-1/Left/LeftDown.tsx
View File

@@ -25,7 +25,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 224],
["2", "包装1", 322],
@@ -40,7 +40,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 1119],
["2", "包装1", 1798],
@@ -55,7 +55,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 5004],
["2", "包装1", 9122],
@@ -65,7 +65,9 @@ function LeftDown() {
const color1 = ["#9DD5FF", "#1295FF"];
const color2 = ["#85F6E9", "#2EC6B4"];
// @ts-ignore
let xData: string[] = data.scrapBars
let xData1: string[] = [];
let xData2: string[] = [];
let xData3: string[] = [];
let dataProps1: number[] = [];
let dataProps2: number[] = [];
let dataProps3: number[] = [];
@@ -77,9 +79,10 @@ function LeftDown() {
// @ts-ignore
data.todayProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr1.push(arrInner);
dataProps1.push(item.scrapNum);
xData1.push(item.sectionName);
dataProps1.push(item.scrapNum || 0);
})
}else{
dataProps1 = []
@@ -89,9 +92,10 @@ function LeftDown() {
// @ts-ignore
data.weekProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr2.push(arrInner);
dataProps2.push(item.scrapNum);
xData2.push(item.sectionName);
dataProps2.push(item.scrapNum || 0);
})
}else{
dataProps2 = []
@@ -101,9 +105,10 @@ function LeftDown() {
// @ts-ignore
data.monthProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr3.push(arrInner);
dataProps3.push(item.scrapNum);
xData3.push(item.sectionName);
dataProps3.push(item.scrapNum || 0);
})
}else{
dataProps3 = []
@@ -111,9 +116,9 @@ function LeftDown() {
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);
const options1 = getOptions(dataProps1,xData1, color1);
const options2 = getOptions(dataProps2,xData2, color2);
const options3 = getOptions(dataProps3,xData3, color1);
return (
<div className="left_down">
<TitleBox title={"left_down"} />

94
src/page/LinePage5-1/Left/LeftUp.tsx
View File

@@ -54,21 +54,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
dataSource.day.xData.map((item,index)=>{
let sumIner = 0
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.day.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.day.xData.length; k++) {
let item = dataSource.day.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.day.series.length;i++){
let itemSeries = dataSource.day.series[i]
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.day.series.push({
data: sum,
type: "bar",
@@ -109,21 +122,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
dataSource.week.xData.map((item,index)=>{
let sumIner = 0
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.week.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.week.xData.length; k++) {
let item = dataSource.week.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.week.series.length;i++){
let itemSeries = dataSource.week.series[i]
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.week.series.push({
data: sum,
type: "bar",
@@ -164,21 +190,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
dataSource.month.xData.map((item,index)=>{
let sumIner = 0
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.month.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.month.xData.length; k++) {
let item = dataSource.month.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.month.series.length;i++){
let itemSeries = dataSource.month.series[i]
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.month.series.push({
data: sum,
type: "bar",
@@ -198,6 +237,7 @@ function LeftUp() {
dataSource.month.series = []
}
const options = getOptions(chartData);
console.log('dataSource',dataSource)
return (
<div className="left_up">
<TitleBox title={"left_up"} />

4
src/page/LinePage5-1/Right/RightDown.tsx
View File

@@ -101,7 +101,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner);
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[1].data.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum);
})
@@ -117,7 +117,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner);
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[2].data.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum);
})

6
src/page/LinePage5-1/Right/RightUp.tsx
View File

@@ -12,14 +12,14 @@ function RightUp() {
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],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

20
src/page/LinePage5-1/index.tsx
View File

@@ -3,7 +3,27 @@ import TopP from "./TopP";
import Left from "./Left";
import Right from "./Right";
import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() {
const navigate = useNavigate();
useEffect(() => {
const handleKeyDown = (event:any) => {
if (event.key === 'ArrowUp') {
console.log('LDPage向上键被按下');
navigate('/LD?lineId=5-1');
// 执行向上键的逻辑
} else if (event.key === 'ArrowDown') {
console.log('LDPage向下键被按下');
// 执行向下键的逻辑
navigate('/LD?lineId=5-1');
}
}
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
});
return (
<React.Fragment>
<TopP />

20
src/page/LinePage5-2/Center/CenterDown.tsx
View File

@@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton";
// import SwitchButton from "../Component/SwitchButton";
import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks"
@@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" },
{ name: "月", ename: "month" },
];
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
const handleButtonChange = (activeName: string) => {
setActiveName(activeName);
};
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
// const handleButtonChange = (activeName: string) => {
// setActiveName(activeName);
// };
const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36,
@@ -41,7 +41,7 @@ function CenterDown() {
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],
columnWidth: [80, 137, 177, 97],
data: []
};
// 报警数据
@@ -64,7 +64,7 @@ function CenterDown() {
});
}
config.data = arr
// 产线成品率
// 工段成品率
// @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore
@@ -181,12 +181,12 @@ function CenterDown() {
</p>)}
</div>
</div>
{/* 产线成品率 */}
{/* 工段成品率 */}
<div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} />
<div className="left_up_switch">
{/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div>
</div> */}
{chartData.xData.length>0 && (
<div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />}

8
src/page/LinePage5-2/Component/TitleBox/index.tsx
View File

@@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
case "left_up":
return {
img: Defect,
title: "产线报废汇总",
title: "工段报废汇总",
};
case "left_down":
return {
img: Record,
title: "当前产线报废情况",
title: "工序报废情况",
};
case "center_down_left":
return {
@@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right":
return {
img: Finished,
title: "产线成品率",
title: "工段成品率",
};
case "right_up":
return {
img: Num,
title: "各产线总投入和产出",
title: "各工段总投入和产出",
};
default:
return {

31
src/page/LinePage5-2/Left/LeftDown.tsx
View File

@@ -25,7 +25,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 224],
["2", "包装1", 322],
@@ -40,7 +40,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 1119],
["2", "包装1", 1798],
@@ -55,7 +55,7 @@ function LeftDown() {
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],
columnWidth: [73, 200, 107],
data: [
["1", "磨边后", 5004],
["2", "包装1", 9122],
@@ -65,7 +65,9 @@ function LeftDown() {
const color1 = ["#9DD5FF", "#1295FF"];
const color2 = ["#85F6E9", "#2EC6B4"];
// @ts-ignore
let xData: string[] = data.scrapBars
let xData1: string[] = [];
let xData2: string[] = [];
let xData3: string[] = [];
let dataProps1: number[] = [];
let dataProps2: number[] = [];
let dataProps3: number[] = [];
@@ -77,9 +79,10 @@ function LeftDown() {
// @ts-ignore
data.todayProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr1.push(arrInner);
dataProps1.push(item.scrapNum);
xData1.push(item.sectionName);
dataProps1.push(item.scrapNum || 0);
})
}else{
dataProps1 = []
@@ -89,9 +92,10 @@ function LeftDown() {
// @ts-ignore
data.weekProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr2.push(arrInner);
dataProps2.push(item.scrapNum);
xData2.push(item.sectionName);
dataProps2.push(item.scrapNum || 0);
})
}else{
dataProps2 = []
@@ -101,9 +105,10 @@ function LeftDown() {
// @ts-ignore
data.monthProductionScraps.map((item,index)=>{
let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum);
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr3.push(arrInner);
dataProps3.push(item.scrapNum);
xData3.push(item.sectionName);
dataProps3.push(item.scrapNum || 0);
})
}else{
dataProps3 = []
@@ -111,9 +116,9 @@ function LeftDown() {
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);
const options1 = getOptions(dataProps1,xData1, color1);
const options2 = getOptions(dataProps2,xData2, color2);
const options3 = getOptions(dataProps3,xData3, color1);
return (
<div className="left_down">
<TitleBox title={"left_down"} />

94
src/page/LinePage5-2/Left/LeftUp.tsx
View File

@@ -54,21 +54,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
dataSource.day.xData.map((item,index)=>{
let sumIner = 0
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.day.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.day.xData.length; k++) {
let item = dataSource.day.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.day.series.length;i++){
let itemSeries = dataSource.day.series[i]
// @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.day.series.push({
data: sum,
type: "bar",
@@ -109,21 +122,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
dataSource.week.xData.map((item,index)=>{
let sumIner = 0
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.week.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.week.xData.length; k++) {
let item = dataSource.week.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.week.series.length;i++){
let itemSeries = dataSource.week.series[i]
// @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.week.series.push({
data: sum,
type: "bar",
@@ -164,21 +190,34 @@ function LeftUp() {
})
// @ts-ignore
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
dataSource.month.xData.map((item,index)=>{
let sumIner = 0
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
sumIner += itemInner.scrapNum
dataSource.month.series.map((itemSeries,indexSeries)=>{
const lastDigitA = parseInt(a[a.length - 1], 10);
// @ts-ignore
const lastDigitB = parseInt(b[b.length - 1], 10);
return lastDigitA - lastDigitB;
})
for (let k = 0; k < dataSource.month.xData.length; k++) {
let item = dataSource.month.xData[k];
let sumIner = 0
for(let i = 0;i < dataSource.month.series.length;i++){
let itemSeries = dataSource.month.series[i]
// @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
// @ts-ignore
if (itemSeries.name === itemInner.sectionName) {
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore
itemSeries.data.push(itemInner.scrapNum)
itemSeries.data.push(itemInner.scrapNum || 0)
sumIner += itemInner.scrapNum || 0
return
}
})
})
if (itemSeries.data.length === k) {
itemSeries.data.push(0)
}
}
sum.push(sumIner)
})
}
dataSource.month.series.push({
data: sum,
type: "bar",
@@ -198,6 +237,7 @@ function LeftUp() {
dataSource.month.series = []
}
const options = getOptions(chartData);
console.log('dataSource',dataSource)
return (
<div className="left_up">
<TitleBox title={"left_up"} />

4
src/page/LinePage5-2/Right/RightDown.tsx
View File

@@ -100,7 +100,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner);
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[1].data.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum);
})
@@ -116,7 +116,7 @@ function RightDown() {
let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner);
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
tempData[2].data.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum);
})

6
src/page/LinePage5-2/Right/RightUp.tsx
View File

@@ -12,14 +12,14 @@ function RightUp() {
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],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

20
src/page/LinePage5-2/index.tsx
View File

@@ -3,7 +3,27 @@ import TopP from "./TopP";
import Left from "./Left";
import Right from "./Right";
import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() {
const navigate = useNavigate();
useEffect(() => {
const handleKeyDown = (event:any) => {
if (event.key === 'ArrowUp') {
console.log('LDPage向上键被按下');
navigate('/LD?lineId=5-2');
// 执行向上键的逻辑
} else if (event.key === 'ArrowDown') {
console.log('LDPage向下键被按下');
// 执行向下键的逻辑
navigate('/LD?lineId=5-2');
}
}
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
});
return (
<React.Fragment>
<TopP />

41
src/page/TestPage/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;

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

@@ -1,4 +0,0 @@
.main-box {
font-size: 50px;
color: #fff;
}

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

@@ -1,38 +0,0 @@
import "./index.css"
import {useParams,useNavigate} from "react-router-dom";
import {useEffect} from 'react';
function TestPage() {
const {LineID} = useParams()
const navigate = useNavigate();
console.log("TestPage被加载了")
useEffect(() => {
const handleKeyDown = (event:any) => {
if (event.key === 'ArrowUp') {
console.log('TestPage向上键被按下');
// 执行向上键的逻辑
} else if (event.key === 'ArrowDown') {
console.log('TestPage向下键被按下');
// 执行向下键的逻辑
navigate('/LD',{ state: { LineID: LineID} });
}
};
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, []);
return (
<>
<div className="main-box">TestPage Line{LineID}</div>
<div className="main-box" style={{display:'none'}}>3434</div>
{/* <LinePage/> */}
</>
);
}
export default TestPage;

4
src/page/style/linePage.css
View File

@@ -100,7 +100,7 @@
.center_down .right_box .chart_box {
width: 100%;
height: 310px;
margin-top: 10px;
margin-top: 5px;
}
.right_up {
width: 401px;
@@ -230,7 +230,7 @@
right: 0px;
bottom: 0px;
z-index: 1002;
width: 240px;
width: 270px;
height: 110px;
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
background-size: 100% 100%;