mt-fe-group/luoyang-screen
8
0
Fork 0
Code Issues Pull Requests 1 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/wsconfig.json
View File

@ -1,3 +1,3 @@
{ {
"url": "172.16.32.40:480080" "url": "172.16.32.40:48080"
} }

19
src/App.tsx
View File

@ -7,7 +7,6 @@ import ErrorPage from "./page/ErrorPage";
import { MyObservable } from "./context/MyObservable"; import { MyObservable } from "./context/MyObservable";
import { Observable } from "@babylonjs/core"; import { Observable } from "@babylonjs/core";
import { selectGlassStatus } from "./store/ProductionMonitoringEntity"; import { selectGlassStatus } from "./store/ProductionMonitoringEntity";
import TestPage from "./page/TestPage";
import LDPage from "./page/LDPage"; import LDPage from "./page/LDPage";
import LinePageOneOne from "./page/LinePage1-1"; import LinePageOneOne from "./page/LinePage1-1";
import LinePageOneTwo from "./page/LinePage1-2"; import LinePageOneTwo from "./page/LinePage1-2";
@ -27,24 +26,6 @@ function App() {
onGlassObservable.notifyObservers(thisLineGlassStatus); onGlassObservable.notifyObservers(thisLineGlassStatus);
const router = createHashRouter([ const router = createHashRouter([
// {
// path: "/:LineID?",
// element: <LinePage />,
// errorElement: <ErrorPage />,
// },
/////////////////////////////////////////////////////////////////////////////
{
path: "/TP/:LineID?",
element: <TestPage />,
errorElement: <ErrorPage />,
},
///////////////////////////////////////////////////////////////
// {
// path: "/LP/:LineID?",
// element: <LinePage />,
// errorElement: <ErrorPage />,
// },
////////////////////////////从这开始///////////////////////////////////
{ {
path: "/LD", path: "/LD",
element: <LDPage />, element: <LDPage />,

140
src/babylonjs/AllLinePageBabylon.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import * as BABYLON from "@babylonjs/core"; import * as BABYLON from "@babylonjs/core";
import "@babylonjs/core/Debug/debugLayer"; import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector"; import "@babylonjs/inspector";
@ -10,7 +10,8 @@ import "../page/style/standard.css";
import AlarmTipGreen from "./../page/assets/icon/g.png"; import AlarmTipGreen from "./../page/assets/icon/g.png";
import AlarmTipYellow from "./../page/assets/icon/y.png"; import AlarmTipYellow from "./../page/assets/icon/y.png";
import AlarmTipRed from "./../page/assets/icon/r.png"; import AlarmTipRed from "./../page/assets/icon/r.png";
import {selectLine1Before} from "../store/LinePageSlice"; import { selectLine1Before } from "../store/LinePageSlice";
import { selectAllLine } from "../store/LeaderPageSlice";
const myStyle = { const myStyle = {
width: "1041px", width: "1041px",
@ -35,39 +36,54 @@ interface EqMsg {
localDateTime?:number; localDateTime?:number;
equipmentCode?:string; equipmentCode?:string;
equipmentId?:number; equipmentId?:number;
num?:number;
} }
function MybabylonJS({ modelPath }: MybabylonJSProps) { function MybabylonJS({ modelPath }: MybabylonJSProps) {
const [eqList, setEqList] = useState<EqListType>({}); const [eqList, setEqList] = useState<EqListType>({});
const allData = useAppSelector(selectLine1Before) as any; // 使用`any`来绕过类型检查 const allEquStatus = useAppSelector(selectLine1Before) as any;
const allData = useAppSelector(selectAllLine) as any; // 使用`any`来绕过类型检查
const canvasRef = useRef(null); const canvasRef = useRef(null);
const resetRef = useRef<(() => void) | null>(null); const resetRef = useRef<(() => void) | null>(null);
// onEquObservable.notifyObservers(EquStatus); const [numAlarm, setNumAlarm] = useState('0');
const [monthNum, setMonthNum] = useState('0');
const [todayNum, setTodayNum] = useState('0');
const [yieldNum, setYieldNum] = useState('0');
const [selectedMeshName, setSelectedMeshName] = useState<string | null>(null); const [selectedMeshName, setSelectedMeshName] = useState<string | null>(null);
const [selectedMeshId, setSelectedMeshId] = useState<string | null>(null); const [selectedMeshId, setSelectedMeshId] = useState<string | null>(null);
const [selectedMeshObj, setSelectedMeshObj] = useState<EqMsg>({ const [selectedMeshObj, setSelectedMeshObj] = useState<EqMsg>({
equipmentName: "", equipmentName: "",
run: true, run: true,
error: false, error: false,
num: 0,
}); });
const [showInfo, setShowInfo] = useState(true);
// 使用 useRef 来存储当前加载的模型引用 // 使用 useRef 来存储当前加载的模型引用
const currentMeshesRef = useRef<Array<BABYLON.AbstractMesh>>([]); const currentMeshesRef = useRef<Array<BABYLON.AbstractMesh>>([]);
useEffect(() => { useEffect(() => {
const equStatus = allData?.equStatus; const equStatus = allEquStatus?.equStatus;
if (equStatus) { if (equStatus) {
setEqList(equStatus); setEqList(equStatus);
} }
},[allEquStatus])
// 中间顶部数据
useEffect(() => {
const numAlarm = allData?.numAlarm;
setNumAlarm(numAlarm || '0');
const monthMap = allData?.monthMap;
setMonthNum(monthMap?.output || '0');
const todayMap = allData?.todayMap;
setTodayNum(todayMap?.output || '0');
setYieldNum(todayMap?.Yield || '0');
},[allData]) },[allData])
// useEffect(() => { useEffect(() => {
// if (selectedMeshId && eqList[selectedMeshId]) { if (selectedMeshId && eqList[selectedMeshId]) {
// setSelectedMeshObj({ setSelectedMeshObj({
// equipmentName:eqList[selectedMeshId].equipmentName, equipmentName:eqList[selectedMeshId].equipmentName,
// run:eqList[selectedMeshId].run ? eqList[selectedMeshId].run : true, run:eqList[selectedMeshId].run ? eqList[selectedMeshId].run : true,
// error:eqList[selectedMeshId].error ? eqList[selectedMeshId].error : false, error:eqList[selectedMeshId].error ? eqList[selectedMeshId].error : false,
// }); num:eqList[selectedMeshId].inputNum ? eqList[selectedMeshId].inputNum : (eqList[selectedMeshId].outputNum ? eqList[selectedMeshId].outputNum : 0),
// } });
// },[selectedMeshId]) }
},[selectedMeshId])
useEffect(() => { useEffect(() => {
// 确保 canvas 引用存在 // 确保 canvas 引用存在
if (!canvasRef.current) return; if (!canvasRef.current) return;
@ -140,7 +156,6 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
ground.material = grid; ground.material = grid;
let hl = new BABYLON.HighlightLayer("hl1", scene); let hl = new BABYLON.HighlightLayer("hl1", scene);
let hl2 = new BABYLON.HighlightLayer("hl2", scene);
// 定义一个函数来加载或重新加载模型 // 定义一个函数来加载或重新加载模型
const loadOrReloadModel = async () => { const loadOrReloadModel = async () => {
@ -197,23 +212,20 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
} }
} }
// 模型点击事件 // 模型点击事件
// mesh._scene.onPointerDown = async (event, _pickResult) => { mesh._scene.onPointerDown = async (event, _pickResult) => {
// console.log('_pickResult',_pickResult) console.log('_pickResult',_pickResult)
// const pickInfo = mesh._scene.pick( const pickInfo = mesh._scene.pick(
// mesh._scene.pointerX, mesh._scene.pointerX,
// mesh._scene.pointerY mesh._scene.pointerY
// ); );
// //如果需要获取吗模型根节点，而不是模型中某个组件，请用一下方法 //判断是否是右键
// // getRootNode(pickInfo.pickedMesh as BABYLON.Node) 如上篇文章getRootNode函数 if (!(event.buttons === 1 && pickInfo.pickedMesh)) return;
const MeshName = pickInfo.pickedMesh.name;
const MeshNameId = pickInfo.pickedMesh.metadata.tags;
// //判断是否是右键 setSelectedMeshName(MeshName);
// if (!(event.buttons === 1 && pickInfo.pickedMesh)) return; setSelectedMeshId(MeshNameId);
// const MeshName = pickInfo.pickedMesh.name; };
// // const MeshNameId = pickInfo.pickedMesh.metadata.tags;
// setSelectedMeshName(MeshName);
// // setSelectedMeshId(MeshNameId);
// };
}); });
LOD0MESH2.meshes.map((mesh) => { LOD0MESH2.meshes.map((mesh) => {
mesh.isPickable = true; mesh.isPickable = true;
@ -242,23 +254,20 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
} }
} }
// 模型点击事件 // 模型点击事件
// mesh._scene.onPointerDown = async (event, _pickResult) => { mesh._scene.onPointerDown = async (event, _pickResult) => {
// console.log('_pickResult',_pickResult) console.log('_pickResult',_pickResult)
// const pickInfo = mesh._scene.pick( const pickInfo = mesh._scene.pick(
// mesh._scene.pointerX, mesh._scene.pointerX,
// mesh._scene.pointerY mesh._scene.pointerY
// ); );
// //如果需要获取吗模型根节点，而不是模型中某个组件，请用一下方法 //判断是否是右键
// // getRootNode(pickInfo.pickedMesh as BABYLON.Node) 如上篇文章getRootNode函数 if (!(event.buttons === 1 && pickInfo.pickedMesh)) return;
const MeshName = pickInfo.pickedMesh.name;
const MeshNameId = pickInfo.pickedMesh.metadata.tags;
// //判断是否是右键 setSelectedMeshName(MeshName);
// if (!(event.buttons === 1 && pickInfo.pickedMesh)) return; setSelectedMeshId(MeshNameId);
// const MeshName = pickInfo.pickedMesh.name; };
// // const MeshNameId = pickInfo.pickedMesh.metadata.tags;
// setSelectedMeshName(MeshName);
// // setSelectedMeshId(MeshNameId);
// };
}); });
} catch (error) { } catch (error) {
console.error("加载模型失败:", error); console.error("加载模型失败:", error);
@ -273,7 +282,6 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
camera.alpha = BABYLON.Tools.ToRadians(270); camera.alpha = BABYLON.Tools.ToRadians(270);
camera.beta = BABYLON.Tools.ToRadians(25); camera.beta = BABYLON.Tools.ToRadians(25);
camera.radius = 220; camera.radius = 220;
setShowInfo(true);
setSelectedMeshName(null); setSelectedMeshName(null);
} }
// 外部初始位置按钮 // 外部初始位置按钮
@ -285,7 +293,6 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
case BABYLON.PointerEventTypes.POINTERMOVE: case BABYLON.PointerEventTypes.POINTERMOVE:
clearTimeout(resetCamera); clearTimeout(resetCamera);
resetCamera = setTimeout(reset, 15000); resetCamera = setTimeout(reset, 15000);
setShowInfo(false);
} }
}); });
return scene; return scene;
@ -323,23 +330,38 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
resetRef.current(); resetRef.current();
} }
}; };
function formatNumber(str: string, separator = ',') {
// 使用正则表达式从右到左每隔3位添加分隔符
str = str.toString();
return str.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
}
function toPercentage(decimalStr: string) {
let decimal = parseFloat(decimalStr);
if (isNaN(decimal)) {
throw new Error('Invalid decimal number provided.');
}
let percent = decimal * 100;
let formattedPercent = percent.toFixed(2);
return formattedPercent + '%';
}
return ( return (
<div style={myStyle}> <div style={myStyle}>
<div className="model_top_container"> <div className="model_top_container">
<div className="model_top_style1"> <div className="model_top_style1">
<div className="model_top_num">88%</div> <div className="model_top_num">{toPercentage(yieldNum)}</div>
<div className="model_top_text">成品率</div> <div className="model_top_text">成品率</div>
</div> </div>
<div className="model_top_style2"> <div className="model_top_style2">
<div className="model_top_num">8,984</div> <div className="model_top_num">{formatNumber(todayNum)}</div>
<div className="model_top_text">今日产量</div> <div className="model_top_text">今日产量</div>
</div> </div>
<div className="model_top_style2"> <div className="model_top_style2">
<div className="model_top_num">12,948,984</div> <div className="model_top_num">{formatNumber(monthNum)}</div>
<div className="model_top_text">本月产量</div> <div className="model_top_text">本月产量</div>
</div> </div>
<div className="model_top_style1"> <div className="model_top_style1">
<div className="model_top_num">59</div> <div className="model_top_num">{formatNumber(numAlarm)}</div>
<div className="model_top_text">设备报警数</div> <div className="model_top_text">设备报警数</div>
</div> </div>
</div> </div>
@ -350,13 +372,13 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
<span className="right_value">{selectedMeshObj.equipmentName}</span> <span className="right_value">{selectedMeshObj.equipmentName}</span>
</div> </div>
<div> <div>
<span className="left_name">进口数量：</span> <span className="left_name">进/出口数量：</span>
<span className="right_value">13,302</span> <span className="right_value">{selectedMeshObj.num}</span>
</div> </div>
<div> {/* <div>
<span className="left_name">出口数量：</span> <span className="left_name">出口数量：</span>
<span className="right_value">1,312</span> <span className="right_value">1,312</span>
</div> </div> */}
<div> <div>
<span className="left_name">报警状态：</span> <span className="left_name">报警状态：</span>
<span className="right_value"> <span className="right_value">

46
src/babylonjs/EqInfoData.ts
View File

@ -15,7 +15,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "2支线", value: 0, code:'1-edge2', label:'inputNum' }, { name: "2支线", value: 0, code:'1-edge2', label:'inputNum' },
{ name: "3支线", value: 0, code:'1-edge3', label:'inputNum' }, { name: "3支线", value: 0, code:'1-edge3', label:'inputNum' },
], ],
position: [120, 240], position: [180, 210],
}, },
{ {
name: "磨边清洗出口", name: "磨边清洗出口",
@ -24,7 +24,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "2支线", value: 0, code:'1-edgeclean2', label:'outputNum' }, { name: "2支线", value: 0, code:'1-edgeclean2', label:'outputNum' },
{ name: "3支线", value: 0, code:'1-edgeclean3', label:'outputNum' }, { name: "3支线", value: 0, code:'1-edgeclean3', label:'outputNum' },
], ],
position: [320, 150], position: [340, 130],
}, },
{ {
name: "打孔出口", name: "打孔出口",
@ -33,7 +33,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "2支线", value: 0, code:'1-punch2', label:'outputNum' }, { name: "2支线", value: 0, code:'1-punch2', label:'outputNum' },
{ name: "3支线", value: 0, code:'1-punch3', label:'outputNum' }, { name: "3支线", value: 0, code:'1-punch3', label:'outputNum' },
], ],
position: [550, 320], position: [590, 300],
}, },
{ {
name: "丝印进口", name: "丝印进口",
@ -42,7 +42,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "2支线", value: 0, code:'1-silk2', label:'inputNum' }, { name: "2支线", value: 0, code:'1-silk2', label:'inputNum' },
{ name: "3支线", value: 0, code:'1-silk3', label:'inputNum' }, { name: "3支线", value: 0, code:'1-silk3', label:'inputNum' },
], ],
position: [520, 75], position: [510, 65],
}, },
{ {
name: "二次固化出口", name: "二次固化出口",
@ -51,12 +51,12 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "2支线", value: 0, code:'1-secsolid2', label:'outputNum' }, { name: "2支线", value: 0, code:'1-secsolid2', label:'outputNum' },
{ name: "3支线", value: 0, code:'1-secsolid3', label:'outputNum' }, { name: "3支线", value: 0, code:'1-secsolid3', label:'outputNum' },
], ],
position: [850, 170], position: [850, 190],
}, },
{ {
name: "钢化进口", name: "钢化进口",
data: [{ name: "钢化进口", value: 0, code:'1-temper1', label:'inputNum' }], data: [{ name: "钢化进口", value: 0, code:'1-temper1', label:'inputNum' }],
position: [810, 10], position: [750, 10],
}, },
], ],
"Line1-2": [ "Line1-2": [
@ -106,7 +106,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "1支线", value: 0, code:'2-edge1', label:'inputNum' }, { name: "1支线", value: 0, code:'2-edge1', label:'inputNum' },
{ name: "2支线", value: 0, code:'2-edge2', label:'inputNum' }, { name: "2支线", value: 0, code:'2-edge2', label:'inputNum' },
], ],
position: [120, 265], position: [150, 245],
}, },
{ {
name: "磨边清洗出口", name: "磨边清洗出口",
@ -189,7 +189,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "1支线", value: 0, code:'3-edge1', label:'inputNum' }, { name: "1支线", value: 0, code:'3-edge1', label:'inputNum' },
{ name: "2支线", value: 0, code:'3-edge2', label:'inputNum' }, { name: "2支线", value: 0, code:'3-edge2', label:'inputNum' },
], ],
position: [150, 255], position: [150, 225],
}, },
{ {
name: "磨边清洗出口", name: "磨边清洗出口",
@ -197,7 +197,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "1支线", value: 0, code:'3-edgeclean1', label:'outputNum' }, { name: "1支线", value: 0, code:'3-edgeclean1', label:'outputNum' },
{ name: "2支线", value: 0, code:'3-edgeclean2', label:'outputNum' }, { name: "2支线", value: 0, code:'3-edgeclean2', label:'outputNum' },
], ],
position: [350, 170], position: [380, 150],
}, },
{ {
name: "打孔出口", name: "打孔出口",
@ -205,7 +205,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "1支线", value: 0, code:'3-punch1', label:'outputNum' }, { name: "1支线", value: 0, code:'3-punch1', label:'outputNum' },
{ name: "2支线", value: 0, code:'3-punch2', label:'outputNum' }, { name: "2支线", value: 0, code:'3-punch2', label:'outputNum' },
], ],
position: [590, 290], position: [620, 280],
}, },
{ {
name: "丝印进口", name: "丝印进口",
@ -213,7 +213,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "1支线", value: 0, code:'3-silk1', label:'inputNum' }, { name: "1支线", value: 0, code:'3-silk1', label:'inputNum' },
{ name: "2支线", value: 0, code:'3-silk2', label:'inputNum' }, { name: "2支线", value: 0, code:'3-silk2', label:'inputNum' },
], ],
position: [570, 90], position: [560, 90],
}, },
{ {
name: "二次固化出口", name: "二次固化出口",
@ -221,7 +221,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "1支线", value: 0, code:'3-secsolid1', label:'outputNum' }, { name: "1支线", value: 0, code:'3-secsolid1', label:'outputNum' },
{ name: "2支线", value: 0, code:'3-secsolid2', label:'outputNum' }, { name: "2支线", value: 0, code:'3-secsolid2', label:'outputNum' },
], ],
position: [850, 170], position: [870, 170],
}, },
{ {
name: "钢化进口", name: "钢化进口",
@ -272,7 +272,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "1支线", value: 0, code:'4-edge1', label:'inputNum' }, { name: "1支线", value: 0, code:'4-edge1', label:'inputNum' },
{ name: "2支线", value: 0, code:'4-edge2', label:'inputNum' }, { name: "2支线", value: 0, code:'4-edge2', label:'inputNum' },
], ],
position: [200, 240], position: [200, 150],
}, },
{ {
name: "磨边清洗出口", name: "磨边清洗出口",
@ -280,7 +280,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "1支线", value: 0, code:'4-edgeclean1', label:'outputNum' }, { name: "1支线", value: 0, code:'4-edgeclean1', label:'outputNum' },
{ name: "2支线", value: 0, code:'4-edgeclean2', label:'outputNum' }, { name: "2支线", value: 0, code:'4-edgeclean2', label:'outputNum' },
], ],
position: [370, 190], position: [420, 150],
}, },
{ {
name: "一次镀膜进口", name: "一次镀膜进口",
@ -288,7 +288,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "1支线", value: 0, code:'4-fircoat1', label:'inputNum' }, { name: "1支线", value: 0, code:'4-fircoat1', label:'inputNum' },
{ name: "2支线", value: 0, code:'4-fircoat2', label:'inputNum' }, { name: "2支线", value: 0, code:'4-fircoat2', label:'inputNum' },
], ],
position: [610, 300], position: [650, 290],
}, },
{ {
name: "二次镀膜进口", name: "二次镀膜进口",
@ -296,7 +296,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "1支线", value: 0, code:'4-seccoat1', label:'inputNum' }, { name: "1支线", value: 0, code:'4-seccoat1', label:'inputNum' },
{ name: "2支线", value: 0, code:'4-seccoat2', label:'inputNum' }, { name: "2支线", value: 0, code:'4-seccoat2', label:'inputNum' },
], ],
position: [590, 85], position: [640, 60],
}, },
{ {
name: "二次固化出口", name: "二次固化出口",
@ -309,7 +309,7 @@ const EqInfoData:EqInfoDataInterface = {
{ {
name: "钢化进口", name: "钢化进口",
data: [{ name: "钢化进口", value: 0, code:'4-temper1', label:'inputNum' }], data: [{ name: "钢化进口", value: 0, code:'4-temper1', label:'inputNum' }],
position: [800, 30], position: [820, 20],
}, },
], ],
"Line4-2": [ "Line4-2": [
@ -357,7 +357,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "2支线", value: 0, code:'5-edge2', label:'inputNum' }, { name: "2支线", value: 0, code:'5-edge2', label:'inputNum' },
{ name: "3支线", value: 0, code:'5-edge3', label:'inputNum' }, { name: "3支线", value: 0, code:'5-edge3', label:'inputNum' },
], ],
position: [160, 220], position: [150, 370],
}, },
{ {
name: "磨边清洗出口", name: "磨边清洗出口",
@ -366,7 +366,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "2支线", value: 0, code:'5-edgeclean2', label:'outputNum' }, { name: "2支线", value: 0, code:'5-edgeclean2', label:'outputNum' },
{ name: "3支线", value: 0, code:'5-edgeclean3', label:'outputNum' }, { name: "3支线", value: 0, code:'5-edgeclean3', label:'outputNum' },
], ],
position: [331, 160], position: [380, 130],
}, },
{ {
name: "一次镀膜进口", name: "一次镀膜进口",
@ -375,7 +375,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "2支线", value: 0, code:'5-fircoat2', label:'inputNum' }, { name: "2支线", value: 0, code:'5-fircoat2', label:'inputNum' },
{ name: "3支线", value: 0, code:'5-fircoat3', label:'inputNum' }, { name: "3支线", value: 0, code:'5-fircoat3', label:'inputNum' },
], ],
position: [555, 329], position: [650, 310],
}, },
{ {
name: "二次镀膜进口", name: "二次镀膜进口",
@ -384,7 +384,7 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "2支线", value: 0, code:'5-seccoat2', label:'inputNum' }, { name: "2支线", value: 0, code:'5-seccoat2', label:'inputNum' },
{ name: "3支线", value: 0, code:'5-seccoat3', label:'inputNum' }, { name: "3支线", value: 0, code:'5-seccoat3', label:'inputNum' },
], ],
position: [560, 65], position: [640, 20],
}, },
{ {
name: "二次固化出口", name: "二次固化出口",
@ -393,12 +393,12 @@ const EqInfoData:EqInfoDataInterface = {
{ name: "2支线", value: 0, code:'5-secsolid2', label:'outputNum' }, { name: "2支线", value: 0, code:'5-secsolid2', label:'outputNum' },
{ name: "3支线", value: 0, code:'5-secsolid3', label:'outputNum' }, { name: "3支线", value: 0, code:'5-secsolid3', label:'outputNum' },
], ],
position: [850, 200], position: [850, 220],
}, },
{ {
name: "钢化进口", name: "钢化进口",
data: [{ name: "钢化进口", value: 0, code:'5-temper1', label:'inputNum' }], data: [{ name: "钢化进口", value: 0, code:'5-temper1', label:'inputNum' }],
position: [800, 20], position: [830, 10],
}, },
], ],
"Line5-2": [ "Line5-2": [

16
src/babylonjs/LinePageBabylonNew.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import * as BABYLON from "@babylonjs/core"; import * as BABYLON from "@babylonjs/core";
import "@babylonjs/core/Debug/debugLayer"; import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector"; import "@babylonjs/inspector";
@ -43,7 +43,6 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
const allData = useAppSelector(selectLine1Before) as any; // 使用`any`来绕过类型检查 const allData = useAppSelector(selectLine1Before) as any; // 使用`any`来绕过类型检查
const canvasRef = useRef(null); const canvasRef = useRef(null);
const resetRef = useRef<(() => void) | null>(null); const resetRef = useRef<(() => void) | null>(null);
// onEquObservable.notifyObservers(EquStatus);
const [selectedMeshName, setSelectedMeshName] = useState<string | null>(null); const [selectedMeshName, setSelectedMeshName] = useState<string | null>(null);
const [selectedMeshId, setSelectedMeshId] = useState<string | null>(null); const [selectedMeshId, setSelectedMeshId] = useState<string | null>(null);
const [selectedMeshObj, setSelectedMeshObj] = useState<EqMsg>({ const [selectedMeshObj, setSelectedMeshObj] = useState<EqMsg>({
@ -108,7 +107,9 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
"camera", "camera",
BABYLON.Tools.ToRadians(245), BABYLON.Tools.ToRadians(245),
BABYLON.Tools.ToRadians(25), BABYLON.Tools.ToRadians(25),
modelPath.slice(-1) === "1" modelPath.slice(-3) === "2-1"
? 120
: modelPath.slice(-1) === "1"
? 110 ? 110
: modelPath.slice(-3) === "5-2" : modelPath.slice(-3) === "5-2"
? 100 ? 100
@ -214,9 +215,6 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
mesh._scene.pointerX, mesh._scene.pointerX,
mesh._scene.pointerY mesh._scene.pointerY
); );
//如果需要获取吗模型根节点，而不是模型中某个组件，请用一下方法
// getRootNode(pickInfo.pickedMesh as BABYLON.Node) 如上篇文章getRootNode函数
//判断是否是右键 //判断是否是右键
if (!(event.buttons === 1 && pickInfo.pickedMesh)) return; if (!(event.buttons === 1 && pickInfo.pickedMesh)) return;
const MeshName = pickInfo.pickedMesh.name; const MeshName = pickInfo.pickedMesh.name;
@ -239,13 +237,15 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
camera.alpha = BABYLON.Tools.ToRadians(245); camera.alpha = BABYLON.Tools.ToRadians(245);
camera.beta = BABYLON.Tools.ToRadians(25); camera.beta = BABYLON.Tools.ToRadians(25);
camera.radius = camera.radius =
modelPath.slice(-1) === "1" modelPath.slice(-3) === "2-1"
? 120
: modelPath.slice(-1) === "1"
? 110 ? 110
: modelPath.slice(-3) === "5-2" : modelPath.slice(-3) === "5-2"
? 100 ? 100
: modelPath.slice(-3) === "1-2" : modelPath.slice(-3) === "1-2"
? 90 ? 90
: 65; : 65
setShowInfo(true); setShowInfo(true);
setSelectedMeshName(null); setSelectedMeshName(null);
} }

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[]) { export default function getOptions(dataProps: number[],xData:string[], color: string[]) {
if (dataProps.length === 0) return null; if (dataProps.length === 0) return null;
return { return {
grid: { top: 40, right: 10, bottom: 10, left: 10, containLabel: true }, grid: { top: 30, right: 10, bottom: 5, left: 10, containLabel: true },
legend: { legend: {
show: false, show: false,
}, },
@ -11,8 +11,10 @@ export default function getOptions(dataProps: number[],xData:string[], color: st
data: xData, data: xData,
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 10,
interval: 0, interval: 0,
rotate:20
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLine: { 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) { if (Object.keys(chartData).length === 0) {
return null; return null;
} }
const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"]; const colors = ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160","#D680FF","#FF6860"];
return { return {
color: colors, 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: { legend: {
show: true, show: true,
top: 10, top: 5,
right: 10, right: 10,
padding: 0, padding: 0,
itemWidth: 14, 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"]; const colors = ["#1A99FF", "#50F4E3"];
return { return {
color: colors, 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: { legend: {
show: true, show: true,
icon: "roundRect",
top: 10, top: 10,
right: 10, right: 10,
padding: 0, padding: 0,
itemWidth: 10, itemWidth: 14,
itemHeight: 10, itemHeight: 10,
itemGap: 3, itemGap: 8,
height: 10, height: 10,
textStyle: { textStyle: {
color: "#DFF1FE", 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) { if (Object.keys(chartData).length === 0) {
return null; return null;
} }
const colors = ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160"]; const colors = ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160","#D680FF","#FF6860"];
let sum = chartData.sumData;
return { return {
color: colors, 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: { legend: {
show: true, show: true,
icon: "roundRect", icon: "roundRect",
top: 10, top: 5,
right: 20, right: 20,
padding: 0, padding: 0,
itemWidth: 10, itemWidth: 10,
@ -71,58 +70,6 @@ export default function getOptions(chartData: any) {
}, },
className: "luoyang-chart-tooltip", className: "luoyang-chart-tooltip",
}, },
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series:chartData.series 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 '../../lanhuapp/common.css';
import "./index.css"; import "./index.css";
import { useState } from "react"; import { useState } from "react";
// import locale from 'antd/locale/zh_CN';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; import 'dayjs/locale/zh-cn';
function TopP() { function TopP() {
const [time, setTime] = useState(dayjs().format('HH:mm')); 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')); const [weekday, setWeekday] = useState(dayjs().locale('zh-cn').format('dddd'));
setInterval(() => { setInterval(() => {
setTime(dayjs().format('HH:mm')); setTime(dayjs().format('HH:mm'));
setDate(dayjs().format('YY-MM-DD')); setDate(dayjs().format('YY/MM/DD'));
setWeekday(dayjs().locale('zh-cn').format('dddd')); setWeekday(dayjs().locale('zh-cn').format('dddd'));
}) })
return ( return (

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

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

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

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

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

@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox"; import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard"; import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton"; // import SwitchButton from "../Component/SwitchButton";
import { useState } from "react"; import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config"; import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks" import {useAppSelector} from "./../../../store/hooks"
@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" }, { name: "周", ename: "week" },
{ name: "月", ename: "month" }, { name: "月", ename: "month" },
]; ];
const [activeName, setActiveName] = useState<string>(nameList[0].ename); const [activeName, setActiveName] = useState<string>(nameList[1].ename);
const handleButtonChange = (activeName: string) => { // const handleButtonChange = (activeName: string) => {
setActiveName(activeName); // setActiveName(activeName);
}; // };
const config = { const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"], header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36, headerHeight: 36,
@ -41,7 +41,7 @@ function CenterDown() {
headerBGC: "rgba(79, 114, 136, 0.3)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [80, 137, 137, 137], columnWidth: [80, 137, 177, 97],
data: [] data: []
}; };
// 报警数据 // 报警数据
@ -64,7 +64,7 @@ function CenterDown() {
}); });
} }
config.data = arr config.data = arr
// 产线成品率 // 工段成品率
// @ts-ignore // @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) { if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore // @ts-ignore
@ -181,12 +181,12 @@ function CenterDown() {
</p>)} </p>)}
</div> </div>
</div> </div>
{/* 产线成品率 */} {/* 工段成品率 */}
<div className="center_down_inner flex-col right_box"> <div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} /> <TitleBox title={"center_down_right"} />
<div className="left_up_switch"> {/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} /> <SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div> </div> */}
{chartData.xData.length>0 && ( {chartData.xData.length>0 && (
<div className="chart_box"> <div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />} {<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": case "left_up":
return { return {
img: Defect, img: Defect,
title: "产线报废汇总", title: "工段报废汇总",
}; };
case "left_down": case "left_down":
return { return {
img: Record, img: Record,
title: "当前产线报废情况", title: "工序报废情况",
}; };
case "center_down_left": case "center_down_left":
return { return {
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right": case "center_down_right":
return { return {
img: Finished, img: Finished,
title: "产线成品率", title: "工段成品率",
}; };
case "right_up": case "right_up":
return { return {
img: Num, img: Num,
title: "各产线总投入和产出", title: "各工段总投入和产出",
}; };
default: default:
return { return {

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

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

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

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

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

@ -101,7 +101,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner); 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.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum); tempData[1].data.output.push(item.outputNum);
}) })
@ -117,7 +117,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner); 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.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum); 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)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114], columnWidth: [55, 115, 100, 110],
data: [], data: [],
}; };
let arr:any = [] let arr:any = []
// @ts-ignore // @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) { if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore // @ts-ignore
data.sumProductionDets.map((item, index) => { data.sectionDet.map((item, index) => {
let arrInner = [] let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum) arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner) arr.push(arrInner)

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

@ -100,7 +100,7 @@
.center_down .right_box .chart_box { .center_down .right_box .chart_box {
width: 100%; width: 100%;
height: 310px; height: 310px;
margin-top: 10px; margin-top: 5px;
} }
.right_up { .right_up {
width: 401px; width: 401px;
@ -230,7 +230,7 @@
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
z-index: 1002; z-index: 1002;
width: 240px; width: 270px;
height: 110px; height: 110px;
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat; background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
background-size: 100% 100%; 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 Left from "./Left";
import Right from "./Right"; import Right from "./Right";
import Center from "./Center"; import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() { 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 ( return (
<React.Fragment> <React.Fragment>
<TopP /> <TopP />

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

@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox"; import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard"; import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton"; // import SwitchButton from "../Component/SwitchButton";
import { useState } from "react"; import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config"; import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks" import {useAppSelector} from "./../../../store/hooks"
@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" }, { name: "周", ename: "week" },
{ name: "月", ename: "month" }, { name: "月", ename: "month" },
]; ];
const [activeName, setActiveName] = useState<string>(nameList[0].ename); const [activeName, setActiveName] = useState<string>(nameList[1].ename);
const handleButtonChange = (activeName: string) => { // const handleButtonChange = (activeName: string) => {
setActiveName(activeName); // setActiveName(activeName);
}; // };
const config = { const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"], header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36, headerHeight: 36,
@ -41,7 +41,7 @@ function CenterDown() {
headerBGC: "rgba(79, 114, 136, 0.3)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [80, 137, 137, 137], columnWidth: [80, 137, 177, 97],
data: [] data: []
}; };
// 报警数据 // 报警数据
@ -64,7 +64,7 @@ function CenterDown() {
}); });
} }
config.data = arr config.data = arr
// 产线成品率 // 工段成品率
// @ts-ignore // @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) { if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore // @ts-ignore
@ -181,12 +181,12 @@ function CenterDown() {
</p>)} </p>)}
</div> </div>
</div> </div>
{/* 产线成品率 */} {/* 工段成品率 */}
<div className="center_down_inner flex-col right_box"> <div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} /> <TitleBox title={"center_down_right"} />
<div className="left_up_switch"> {/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} /> <SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div> </div> */}
{chartData.xData.length>0 && ( {chartData.xData.length>0 && (
<div className="chart_box"> <div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />} {<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": case "left_up":
return { return {
img: Defect, img: Defect,
title: "产线报废汇总", title: "工段报废汇总",
}; };
case "left_down": case "left_down":
return { return {
img: Record, img: Record,
title: "当前产线报废情况", title: "工序报废情况",
}; };
case "center_down_left": case "center_down_left":
return { return {
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right": case "center_down_right":
return { return {
img: Finished, img: Finished,
title: "产线成品率", title: "工段成品率",
}; };
case "right_up": case "right_up":
return { return {
img: Num, img: Num,
title: "各产线总投入和产出", title: "各工段总投入和产出",
}; };
default: default:
return { return {

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

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

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

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

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

@ -101,7 +101,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner); 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.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum); tempData[1].data.output.push(item.outputNum);
}) })
@ -117,7 +117,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner); 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.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum); 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)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114], columnWidth: [55, 115, 100, 110],
data: [], data: [],
}; };
let arr:any = [] let arr:any = []
// @ts-ignore // @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) { if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore // @ts-ignore
data.sumProductionDets.map((item, index) => { data.sectionDet.map((item, index) => {
let arrInner = [] let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum) arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner) 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 Left from "./Left";
import Right from "./Right"; import Right from "./Right";
import Center from "./Center"; import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() { 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 ( return (
<React.Fragment> <React.Fragment>
<TopP /> <TopP />

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

@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox"; import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard"; import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton"; // import SwitchButton from "../Component/SwitchButton";
import { useState } from "react"; import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config"; import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks" import {useAppSelector} from "./../../../store/hooks"
@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" }, { name: "周", ename: "week" },
{ name: "月", ename: "month" }, { name: "月", ename: "month" },
]; ];
const [activeName, setActiveName] = useState<string>(nameList[0].ename); const [activeName, setActiveName] = useState<string>(nameList[1].ename);
const handleButtonChange = (activeName: string) => { // const handleButtonChange = (activeName: string) => {
setActiveName(activeName); // setActiveName(activeName);
}; // };
const config = { const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"], header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36, headerHeight: 36,
@ -41,7 +41,7 @@ function CenterDown() {
headerBGC: "rgba(79, 114, 136, 0.3)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [80, 137, 137, 137], columnWidth: [80, 137, 177, 97],
data: [] data: []
}; };
// 报警数据 // 报警数据
@ -64,7 +64,7 @@ function CenterDown() {
}); });
} }
config.data = arr config.data = arr
// 产线成品率 // 工段成品率
// @ts-ignore // @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) { if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore // @ts-ignore
@ -181,12 +181,12 @@ function CenterDown() {
</p>)} </p>)}
</div> </div>
</div> </div>
{/* 产线成品率 */} {/* 工段成品率 */}
<div className="center_down_inner flex-col right_box"> <div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} /> <TitleBox title={"center_down_right"} />
<div className="left_up_switch"> {/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} /> <SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div> </div> */}
{chartData.xData.length>0 && ( {chartData.xData.length>0 && (
<div className="chart_box"> <div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />} {<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": case "left_up":
return { return {
img: Defect, img: Defect,
title: "产线报废汇总", title: "工段报废汇总",
}; };
case "left_down": case "left_down":
return { return {
img: Record, img: Record,
title: "当前产线报废情况", title: "工序报废情况",
}; };
case "center_down_left": case "center_down_left":
return { return {
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right": case "center_down_right":
return { return {
img: Finished, img: Finished,
title: "产线成品率", title: "工段成品率",
}; };
case "right_up": case "right_up":
return { return {
img: Num, img: Num,
title: "各产线总投入和产出", title: "各工段总投入和产出",
}; };
default: default:
return { return {

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

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

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

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

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

@ -101,7 +101,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner); 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.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum); tempData[1].data.output.push(item.outputNum);
}) })
@ -117,7 +117,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner); 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.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum); 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)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114], columnWidth: [55, 115, 100, 110],
data: [], data: [],
}; };
let arr:any = [] let arr:any = []
// @ts-ignore // @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) { if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore // @ts-ignore
data.sumProductionDets.map((item, index) => { data.sectionDet.map((item, index) => {
let arrInner = [] let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum) arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner) arr.push(arrInner)

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

@ -100,7 +100,7 @@
.center_down .right_box .chart_box { .center_down .right_box .chart_box {
width: 100%; width: 100%;
height: 310px; height: 310px;
margin-top: 10px; margin-top: 5px;
} }
.right_up { .right_up {
width: 401px; width: 401px;
@ -230,7 +230,7 @@
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
z-index: 1002; z-index: 1002;
width: 240px; width: 270px;
height: 110px; height: 110px;
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat; background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
background-size: 100% 100%; 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 Left from "./Left";
import Right from "./Right"; import Right from "./Right";
import Center from "./Center"; import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() { 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 ( return (
<React.Fragment> <React.Fragment>
<TopP /> <TopP />

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

@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox"; import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard"; import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton"; // import SwitchButton from "../Component/SwitchButton";
import { useState } from "react"; import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config"; import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks" import {useAppSelector} from "./../../../store/hooks"
@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" }, { name: "周", ename: "week" },
{ name: "月", ename: "month" }, { name: "月", ename: "month" },
]; ];
const [activeName, setActiveName] = useState<string>(nameList[0].ename); const [activeName, setActiveName] = useState<string>(nameList[1].ename);
const handleButtonChange = (activeName: string) => { // const handleButtonChange = (activeName: string) => {
setActiveName(activeName); // setActiveName(activeName);
}; // };
const config = { const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"], header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36, headerHeight: 36,
@ -41,7 +41,7 @@ function CenterDown() {
headerBGC: "rgba(79, 114, 136, 0.3)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [80, 137, 137, 137], columnWidth: [80, 137, 177, 97],
data: [] data: []
}; };
// 报警数据 // 报警数据
@ -64,7 +64,7 @@ function CenterDown() {
}); });
} }
config.data = arr config.data = arr
// 产线成品率 // 工段成品率
// @ts-ignore // @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) { if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore // @ts-ignore
@ -181,12 +181,12 @@ function CenterDown() {
</p>)} </p>)}
</div> </div>
</div> </div>
{/* 产线成品率 */} {/* 工段成品率 */}
<div className="center_down_inner flex-col right_box"> <div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} /> <TitleBox title={"center_down_right"} />
<div className="left_up_switch"> {/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} /> <SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div> </div> */}
{chartData.xData.length>0 && ( {chartData.xData.length>0 && (
<div className="chart_box"> <div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />} {<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": case "left_up":
return { return {
img: Defect, img: Defect,
title: "产线报废汇总", title: "工段报废汇总",
}; };
case "left_down": case "left_down":
return { return {
img: Record, img: Record,
title: "当前产线报废情况", title: "工序报废情况",
}; };
case "center_down_left": case "center_down_left":
return { return {
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right": case "center_down_right":
return { return {
img: Finished, img: Finished,
title: "产线成品率", title: "工段成品率",
}; };
case "right_up": case "right_up":
return { return {
img: Num, img: Num,
title: "各产线总投入和产出", title: "各工段总投入和产出",
}; };
default: default:
return { return {

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

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

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

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

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

@ -101,7 +101,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner); 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.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum); tempData[1].data.output.push(item.outputNum);
}) })
@ -117,7 +117,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner); 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.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum); 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)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114], columnWidth: [55, 115, 100, 110],
data: [], data: [],
}; };
let arr:any = [] let arr:any = []
// @ts-ignore // @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) { if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore // @ts-ignore
data.sumProductionDets.map((item, index) => { data.sectionDet.map((item, index) => {
let arrInner = [] let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum) arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner) 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 Left from "./Left";
import Right from "./Right"; import Right from "./Right";
import Center from "./Center"; import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() { 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 ( return (
<React.Fragment> <React.Fragment>
<TopP /> <TopP />

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

@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox"; import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard"; import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton"; // import SwitchButton from "../Component/SwitchButton";
import { useState } from "react"; import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config"; import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks" import {useAppSelector} from "./../../../store/hooks"
@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" }, { name: "周", ename: "week" },
{ name: "月", ename: "month" }, { name: "月", ename: "month" },
]; ];
const [activeName, setActiveName] = useState<string>(nameList[0].ename); const [activeName, setActiveName] = useState<string>(nameList[1].ename);
const handleButtonChange = (activeName: string) => { // const handleButtonChange = (activeName: string) => {
setActiveName(activeName); // setActiveName(activeName);
}; // };
const config = { const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"], header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36, headerHeight: 36,
@ -41,7 +41,7 @@ function CenterDown() {
headerBGC: "rgba(79, 114, 136, 0.3)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [80, 137, 137, 137], columnWidth: [80, 137, 177, 97],
data: [] data: []
}; };
// 报警数据 // 报警数据
@ -64,7 +64,7 @@ function CenterDown() {
}); });
} }
config.data = arr config.data = arr
// 产线成品率 // 工段成品率
// @ts-ignore // @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) { if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore // @ts-ignore
@ -181,12 +181,12 @@ function CenterDown() {
</p>)} </p>)}
</div> </div>
</div> </div>
{/* 产线成品率 */} {/* 工段成品率 */}
<div className="center_down_inner flex-col right_box"> <div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} /> <TitleBox title={"center_down_right"} />
<div className="left_up_switch"> {/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} /> <SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div> </div> */}
{chartData.xData.length>0 && ( {chartData.xData.length>0 && (
<div className="chart_box"> <div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />} {<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": case "left_up":
return { return {
img: Defect, img: Defect,
title: "产线报废汇总", title: "工段报废汇总",
}; };
case "left_down": case "left_down":
return { return {
img: Record, img: Record,
title: "当前产线报废情况", title: "工序报废情况",
}; };
case "center_down_left": case "center_down_left":
return { return {
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right": case "center_down_right":
return { return {
img: Finished, img: Finished,
title: "产线成品率", title: "工段成品率",
}; };
case "right_up": case "right_up":
return { return {
img: Num, img: Num,
title: "各产线总投入和产出", title: "各工段总投入和产出",
}; };
default: default:
return { return {

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

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

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

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

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

@ -100,7 +100,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner); 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.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum); tempData[1].data.output.push(item.outputNum);
}) })
@ -116,7 +116,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner); 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.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum); 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)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114], columnWidth: [55, 115, 100, 110],
data: [], data: [],
}; };
let arr:any = [] let arr:any = []
// @ts-ignore // @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) { if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore // @ts-ignore
data.sumProductionDets.map((item, index) => { data.sectionDet.map((item, index) => {
let arrInner = [] let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum) arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner) 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 Left from "./Left";
import Right from "./Right"; import Right from "./Right";
import Center from "./Center"; import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() { 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 ( return (
<React.Fragment> <React.Fragment>
<TopP /> <TopP />

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

@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox"; import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard"; import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton"; // import SwitchButton from "../Component/SwitchButton";
import { useState } from "react"; import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config"; import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks" import {useAppSelector} from "./../../../store/hooks"
@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" }, { name: "周", ename: "week" },
{ name: "月", ename: "month" }, { name: "月", ename: "month" },
]; ];
const [activeName, setActiveName] = useState<string>(nameList[0].ename); const [activeName, setActiveName] = useState<string>(nameList[1].ename);
const handleButtonChange = (activeName: string) => { // const handleButtonChange = (activeName: string) => {
setActiveName(activeName); // setActiveName(activeName);
}; // };
const config = { const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"], header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36, headerHeight: 36,
@ -41,7 +41,7 @@ function CenterDown() {
headerBGC: "rgba(79, 114, 136, 0.3)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [80, 137, 137, 137], columnWidth: [80, 137, 177, 97],
data: [] data: []
}; };
// 报警数据 // 报警数据
@ -64,7 +64,7 @@ function CenterDown() {
}); });
} }
config.data = arr config.data = arr
// 产线成品率 // 工段成品率
// @ts-ignore // @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) { if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore // @ts-ignore
@ -181,12 +181,12 @@ function CenterDown() {
</p>)} </p>)}
</div> </div>
</div> </div>
{/* 产线成品率 */} {/* 工段成品率 */}
<div className="center_down_inner flex-col right_box"> <div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} /> <TitleBox title={"center_down_right"} />
<div className="left_up_switch"> {/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} /> <SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div> </div> */}
{chartData.xData.length>0 && ( {chartData.xData.length>0 && (
<div className="chart_box"> <div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />} {<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": case "left_up":
return { return {
img: Defect, img: Defect,
title: "产线报废汇总", title: "工段报废汇总",
}; };
case "left_down": case "left_down":
return { return {
img: Record, img: Record,
title: "当前产线报废情况", title: "工序报废情况",
}; };
case "center_down_left": case "center_down_left":
return { return {
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right": case "center_down_right":
return { return {
img: Finished, img: Finished,
title: "产线成品率", title: "工段成品率",
}; };
case "right_up": case "right_up":
return { return {
img: Num, img: Num,
title: "各产线总投入和产出", title: "各工段总投入和产出",
}; };
default: default:
return { return {

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

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

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

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

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

@ -101,7 +101,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner); 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.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum); tempData[1].data.output.push(item.outputNum);
}) })
@ -117,7 +117,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner); 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.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum); 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)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114], columnWidth: [55, 115, 100, 110],
data: [], data: [],
}; };
let arr:any = [] let arr:any = []
// @ts-ignore // @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) { if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore // @ts-ignore
data.sumProductionDets.map((item, index) => { data.sectionDet.map((item, index) => {
let arrInner = [] let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum) arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner) 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 Left from "./Left";
import Right from "./Right"; import Right from "./Right";
import Center from "./Center"; import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() { 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 ( return (
<React.Fragment> <React.Fragment>
<TopP /> <TopP />

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

@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox"; import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard"; import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton"; // import SwitchButton from "../Component/SwitchButton";
import { useState } from "react"; import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config"; import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks" import {useAppSelector} from "./../../../store/hooks"
@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" }, { name: "周", ename: "week" },
{ name: "月", ename: "month" }, { name: "月", ename: "month" },
]; ];
const [activeName, setActiveName] = useState<string>(nameList[0].ename); const [activeName, setActiveName] = useState<string>(nameList[1].ename);
const handleButtonChange = (activeName: string) => { // const handleButtonChange = (activeName: string) => {
setActiveName(activeName); // setActiveName(activeName);
}; // };
const config = { const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"], header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36, headerHeight: 36,
@ -41,7 +41,7 @@ function CenterDown() {
headerBGC: "rgba(79, 114, 136, 0.3)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [80, 137, 137, 137], columnWidth: [80, 137, 177, 97],
data: [] data: []
}; };
// 报警数据 // 报警数据
@ -64,7 +64,7 @@ function CenterDown() {
}); });
} }
config.data = arr config.data = arr
// 产线成品率 // 工段成品率
// @ts-ignore // @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) { if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore // @ts-ignore
@ -181,12 +181,12 @@ function CenterDown() {
</p>)} </p>)}
</div> </div>
</div> </div>
{/* 产线成品率 */} {/* 工段成品率 */}
<div className="center_down_inner flex-col right_box"> <div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} /> <TitleBox title={"center_down_right"} />
<div className="left_up_switch"> {/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} /> <SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div> </div> */}
{chartData.xData.length>0 && ( {chartData.xData.length>0 && (
<div className="chart_box"> <div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />} {<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": case "left_up":
return { return {
img: Defect, img: Defect,
title: "产线报废汇总", title: "工段报废汇总",
}; };
case "left_down": case "left_down":
return { return {
img: Record, img: Record,
title: "当前产线报废情况", title: "工序报废情况",
}; };
case "center_down_left": case "center_down_left":
return { return {
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right": case "center_down_right":
return { return {
img: Finished, img: Finished,
title: "产线成品率", title: "工段成品率",
}; };
case "right_up": case "right_up":
return { return {
img: Num, img: Num,
title: "各产线总投入和产出", title: "各工段总投入和产出",
}; };
default: default:
return { return {

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

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

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

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

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

@ -101,7 +101,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner); 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.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum); tempData[1].data.output.push(item.outputNum);
}) })
@ -117,7 +117,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner); 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.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum); 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)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114], columnWidth: [55, 115, 100, 110],
data: [], data: [],
}; };
let arr:any = [] let arr:any = []
// @ts-ignore // @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) { if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore // @ts-ignore
data.sumProductionDets.map((item, index) => { data.sectionDet.map((item, index) => {
let arrInner = [] let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum) arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner) 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 Left from "./Left";
import Right from "./Right"; import Right from "./Right";
import Center from "./Center"; import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() { 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 ( return (
<React.Fragment> <React.Fragment>
<TopP /> <TopP />

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

@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox"; import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard"; import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton"; // import SwitchButton from "../Component/SwitchButton";
import { useState } from "react"; import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config"; import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks" import {useAppSelector} from "./../../../store/hooks"
@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" }, { name: "周", ename: "week" },
{ name: "月", ename: "month" }, { name: "月", ename: "month" },
]; ];
const [activeName, setActiveName] = useState<string>(nameList[0].ename); const [activeName, setActiveName] = useState<string>(nameList[1].ename);
const handleButtonChange = (activeName: string) => { // const handleButtonChange = (activeName: string) => {
setActiveName(activeName); // setActiveName(activeName);
}; // };
const config = { const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"], header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36, headerHeight: 36,
@ -41,7 +41,7 @@ function CenterDown() {
headerBGC: "rgba(79, 114, 136, 0.3)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [80, 137, 137, 137], columnWidth: [80, 137, 177, 97],
data: [] data: []
}; };
// 报警数据 // 报警数据
@ -64,7 +64,7 @@ function CenterDown() {
}); });
} }
config.data = arr config.data = arr
// 产线成品率 // 工段成品率
// @ts-ignore // @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) { if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore // @ts-ignore
@ -181,12 +181,12 @@ function CenterDown() {
</p>)} </p>)}
</div> </div>
</div> </div>
{/* 产线成品率 */} {/* 工段成品率 */}
<div className="center_down_inner flex-col right_box"> <div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} /> <TitleBox title={"center_down_right"} />
<div className="left_up_switch"> {/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} /> <SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div> </div> */}
{chartData.xData.length>0 && ( {chartData.xData.length>0 && (
<div className="chart_box"> <div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />} {<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": case "left_up":
return { return {
img: Defect, img: Defect,
title: "产线报废汇总", title: "工段报废汇总",
}; };
case "left_down": case "left_down":
return { return {
img: Record, img: Record,
title: "当前产线报废情况", title: "工序报废情况",
}; };
case "center_down_left": case "center_down_left":
return { return {
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right": case "center_down_right":
return { return {
img: Finished, img: Finished,
title: "产线成品率", title: "工段成品率",
}; };
case "right_up": case "right_up":
return { return {
img: Num, img: Num,
title: "各产线总投入和产出", title: "各工段总投入和产出",
}; };
default: default:
return { return {

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

@ -25,7 +25,7 @@ function LeftDown() {
headerBGC: "rgba(79, 114, 136, 0.3)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [73, 117, 190], columnWidth: [73, 200, 107],
data: [ data: [
["1", "磨边后", 224], ["1", "磨边后", 224],
["2", "包装1", 322], ["2", "包装1", 322],
@ -40,7 +40,7 @@ function LeftDown() {
headerBGC: "rgba(79, 114, 136, 0.3)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [73, 117, 190], columnWidth: [73, 200, 107],
data: [ data: [
["1", "磨边后", 1119], ["1", "磨边后", 1119],
["2", "包装1", 1798], ["2", "包装1", 1798],
@ -55,7 +55,7 @@ function LeftDown() {
headerBGC: "rgba(79, 114, 136, 0.3)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [73, 117, 190], columnWidth: [73, 200, 107],
data: [ data: [
["1", "磨边后", 5004], ["1", "磨边后", 5004],
["2", "包装1", 9122], ["2", "包装1", 9122],
@ -65,7 +65,9 @@ function LeftDown() {
const color1 = ["#9DD5FF", "#1295FF"]; const color1 = ["#9DD5FF", "#1295FF"];
const color2 = ["#85F6E9", "#2EC6B4"]; const color2 = ["#85F6E9", "#2EC6B4"];
// @ts-ignore // @ts-ignore
let xData: string[] = data.scrapBars let xData1: string[] = [];
let xData2: string[] = [];
let xData3: string[] = [];
let dataProps1: number[] = []; let dataProps1: number[] = [];
let dataProps2: number[] = []; let dataProps2: number[] = [];
let dataProps3: number[] = []; let dataProps3: number[] = [];
@ -77,9 +79,10 @@ function LeftDown() {
// @ts-ignore // @ts-ignore
data.todayProductionScraps.map((item,index)=>{ data.todayProductionScraps.map((item,index)=>{
let arrInner = []; let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum); arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr1.push(arrInner); arr1.push(arrInner);
dataProps1.push(item.scrapNum); xData1.push(item.sectionName);
dataProps1.push(item.scrapNum || 0);
}) })
}else{ }else{
dataProps1 = [] dataProps1 = []
@ -89,9 +92,10 @@ function LeftDown() {
// @ts-ignore // @ts-ignore
data.weekProductionScraps.map((item,index)=>{ data.weekProductionScraps.map((item,index)=>{
let arrInner = []; let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum); arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr2.push(arrInner); arr2.push(arrInner);
dataProps2.push(item.scrapNum); xData2.push(item.sectionName);
dataProps2.push(item.scrapNum || 0);
}) })
}else{ }else{
dataProps2 = [] dataProps2 = []
@ -101,9 +105,10 @@ function LeftDown() {
// @ts-ignore // @ts-ignore
data.monthProductionScraps.map((item,index)=>{ data.monthProductionScraps.map((item,index)=>{
let arrInner = []; let arrInner = [];
arrInner.push(index+1,item.sectionName,item.scrapNum); arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
arr3.push(arrInner); arr3.push(arrInner);
dataProps3.push(item.scrapNum); xData3.push(item.sectionName);
dataProps3.push(item.scrapNum || 0);
}) })
}else{ }else{
dataProps3 = [] dataProps3 = []
@ -111,9 +116,9 @@ function LeftDown() {
configDay.data = arr1; configDay.data = arr1;
configWeek.data = arr2; configWeek.data = arr2;
configMonth.data = arr3; configMonth.data = arr3;
const options1 = getOptions(dataProps1,xData, color1); const options1 = getOptions(dataProps1,xData1, color1);
const options2 = getOptions(dataProps2,xData, color2); const options2 = getOptions(dataProps2,xData2, color2);
const options3 = getOptions(dataProps3,xData, color1); const options3 = getOptions(dataProps3,xData3, color1);
return ( return (
<div className="left_down"> <div className="left_down">
<TitleBox title={"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) => { const handleButtonChange = (activeName: string) => {
setActiveName(activeName); setActiveName(activeName);
}; };
console.log('',chartData)
// @ts-ignore // @ts-ignore
if (data.todayAllProductionScraps && Object.keys(data.todayAllProductionScraps).length > 0) { if (data.todayAllProductionScraps && Object.keys(data.todayAllProductionScraps).length > 0) {
let sum: number[] = []; let sum: number[] = [];
@ -55,21 +54,34 @@ function LeftUp() {
}) })
// @ts-ignore // @ts-ignore
dataSource.day.xData = Object.keys(data.todayAllProductionScraps) dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
dataSource.day.xData.map((item,index)=>{ dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
let sumIner = 0
// @ts-ignore // @ts-ignore
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{ const lastDigitA = parseInt(a[a.length - 1], 10);
sumIner += itemInner.scrapNum // @ts-ignore
dataSource.day.series.map((itemSeries,indexSeries)=>{ 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 // @ts-ignore
if (itemSeries.name === itemInner.sectionName) { if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore // @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) sum.push(sumIner)
}) }
dataSource.day.series.push({ dataSource.day.series.push({
data: sum, data: sum,
type: "bar", type: "bar",
@ -110,21 +122,34 @@ function LeftUp() {
}) })
// @ts-ignore // @ts-ignore
dataSource.week.xData = Object.keys(data.weekAllProductionScraps) dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
dataSource.week.xData.map((item,index)=>{ dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
let sumIner = 0
// @ts-ignore // @ts-ignore
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{ const lastDigitA = parseInt(a[a.length - 1], 10);
sumIner += itemInner.scrapNum // @ts-ignore
dataSource.week.series.map((itemSeries,indexSeries)=>{ 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 // @ts-ignore
if (itemSeries.name === itemInner.sectionName) { if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore // @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) sum.push(sumIner)
}) }
dataSource.week.series.push({ dataSource.week.series.push({
data: sum, data: sum,
type: "bar", type: "bar",
@ -165,21 +190,34 @@ function LeftUp() {
}) })
// @ts-ignore // @ts-ignore
dataSource.month.xData = Object.keys(data.monthAllProductionScraps) dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
dataSource.month.xData.map((item,index)=>{ dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
let sumIner = 0
// @ts-ignore // @ts-ignore
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{ const lastDigitA = parseInt(a[a.length - 1], 10);
sumIner += itemInner.scrapNum // @ts-ignore
dataSource.month.series.map((itemSeries,indexSeries)=>{ 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 // @ts-ignore
if (itemSeries.name === itemInner.sectionName) { if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
// @ts-ignore // @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) sum.push(sumIner)
}) }
dataSource.month.series.push({ dataSource.month.series.push({
data: sum, data: sum,
type: "bar", type: "bar",
@ -199,6 +237,7 @@ function LeftUp() {
dataSource.month.series = [] dataSource.month.series = []
} }
const options = getOptions(chartData); const options = getOptions(chartData);
console.log('dataSource',dataSource)
return ( return (
<div className="left_up"> <div className="left_up">
<TitleBox title={"left_up"} /> <TitleBox title={"left_up"} />

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

@ -101,7 +101,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner); 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.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum); tempData[1].data.output.push(item.outputNum);
}) })
@ -117,7 +117,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner); 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.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum); 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)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114], columnWidth: [55, 115, 100, 110],
data: [], data: [],
}; };
let arr:any = [] let arr:any = []
// @ts-ignore // @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) { if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore // @ts-ignore
data.sumProductionDets.map((item, index) => { data.sectionDet.map((item, index) => {
let arrInner = [] let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum) arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner) 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 Left from "./Left";
import Right from "./Right"; import Right from "./Right";
import Center from "./Center"; import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() { 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 ( return (
<React.Fragment> <React.Fragment>
<TopP /> <TopP />

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

@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox"; import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard"; import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton"; // import SwitchButton from "../Component/SwitchButton";
import { useState } from "react"; import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config"; import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks" import {useAppSelector} from "./../../../store/hooks"
@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" }, { name: "周", ename: "week" },
{ name: "月", ename: "month" }, { name: "月", ename: "month" },
]; ];
const [activeName, setActiveName] = useState<string>(nameList[0].ename); const [activeName, setActiveName] = useState<string>(nameList[1].ename);
const handleButtonChange = (activeName: string) => { // const handleButtonChange = (activeName: string) => {
setActiveName(activeName); // setActiveName(activeName);
}; // };
const config = { const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"], header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36, headerHeight: 36,
@ -41,7 +41,7 @@ function CenterDown() {
headerBGC: "rgba(79, 114, 136, 0.3)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [80, 137, 137, 137], columnWidth: [80, 137, 177, 97],
data: [] data: []
}; };
// 报警数据 // 报警数据
@ -64,7 +64,7 @@ function CenterDown() {
}); });
} }
config.data = arr config.data = arr
// 产线成品率 // 工段成品率
// @ts-ignore // @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) { if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore // @ts-ignore
@ -181,12 +181,12 @@ function CenterDown() {
</p>)} </p>)}
</div> </div>
</div> </div>
{/* 产线成品率 */} {/* 工段成品率 */}
<div className="center_down_inner flex-col right_box"> <div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} /> <TitleBox title={"center_down_right"} />
<div className="left_up_switch"> {/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} /> <SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div> </div> */}
{chartData.xData.length>0 && ( {chartData.xData.length>0 && (
<div className="chart_box"> <div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />} {<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": case "left_up":
return { return {
img: Defect, img: Defect,
title: "产线报废汇总", title: "工段报废汇总",
}; };
case "left_down": case "left_down":
return { return {
img: Record, img: Record,
title: "当前产线报废情况", title: "工序报废情况",
}; };
case "center_down_left": case "center_down_left":
return { return {
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right": case "center_down_right":
return { return {
img: Finished, img: Finished,
title: "产线成品率", title: "工段成品率",
}; };
case "right_up": case "right_up":
return { return {
img: Num, img: Num,
title: "各产线总投入和产出", title: "各工段总投入和产出",
}; };
default: default:
return { return {

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

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

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

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

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

@ -101,7 +101,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner); 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.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum); tempData[1].data.output.push(item.outputNum);
}) })
@ -117,7 +117,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner); 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.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum); 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)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114], columnWidth: [55, 115, 100, 110],
data: [], data: [],
}; };
let arr:any = [] let arr:any = []
// @ts-ignore // @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) { if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore // @ts-ignore
data.sumProductionDets.map((item, index) => { data.sectionDet.map((item, index) => {
let arrInner = [] let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum) arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner) 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 Left from "./Left";
import Right from "./Right"; import Right from "./Right";
import Center from "./Center"; import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() { 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 ( return (
<React.Fragment> <React.Fragment>
<TopP /> <TopP />

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

@ -1,7 +1,7 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox"; import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard"; import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton"; // import SwitchButton from "../Component/SwitchButton";
import { useState } from "react"; import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config"; import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks" import {useAppSelector} from "./../../../store/hooks"
@ -29,10 +29,10 @@ function CenterDown() {
{ name: "周", ename: "week" }, { name: "周", ename: "week" },
{ name: "月", ename: "month" }, { name: "月", ename: "month" },
]; ];
const [activeName, setActiveName] = useState<string>(nameList[0].ename); const [activeName, setActiveName] = useState<string>(nameList[1].ename);
const handleButtonChange = (activeName: string) => { // const handleButtonChange = (activeName: string) => {
setActiveName(activeName); // setActiveName(activeName);
}; // };
const config = { const config = {
header: ["序号", "报警时间", "报警设备", "报警内容"], header: ["序号", "报警时间", "报警设备", "报警内容"],
headerHeight: 36, headerHeight: 36,
@ -41,7 +41,7 @@ function CenterDown() {
headerBGC: "rgba(79, 114, 136, 0.3)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [80, 137, 137, 137], columnWidth: [80, 137, 177, 97],
data: [] data: []
}; };
// 报警数据 // 报警数据
@ -64,7 +64,7 @@ function CenterDown() {
}); });
} }
config.data = arr config.data = arr
// 产线成品率 // 工段成品率
// @ts-ignore // @ts-ignore
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) { if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
// @ts-ignore // @ts-ignore
@ -181,12 +181,12 @@ function CenterDown() {
</p>)} </p>)}
</div> </div>
</div> </div>
{/* 产线成品率 */} {/* 工段成品率 */}
<div className="center_down_inner flex-col right_box"> <div className="center_down_inner flex-col right_box">
<TitleBox title={"center_down_right"} /> <TitleBox title={"center_down_right"} />
<div className="left_up_switch"> {/* <div className="left_up_switch">
<SwitchButton nameList={nameList} onChange={handleButtonChange} /> <SwitchButton nameList={nameList} onChange={handleButtonChange} />
</div> </div> */}
{chartData.xData.length>0 && ( {chartData.xData.length>0 && (
<div className="chart_box"> <div className="chart_box">
{<ReactECharts option={options} style={{ height: "100%" }} />} {<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": case "left_up":
return { return {
img: Defect, img: Defect,
title: "产线报废汇总", title: "工段报废汇总",
}; };
case "left_down": case "left_down":
return { return {
img: Record, img: Record,
title: "当前产线报废情况", title: "工序报废情况",
}; };
case "center_down_left": case "center_down_left":
return { return {
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
case "center_down_right": case "center_down_right":
return { return {
img: Finished, img: Finished,
title: "产线成品率", title: "工段成品率",
}; };
case "right_up": case "right_up":
return { return {
img: Num, img: Num,
title: "各产线总投入和产出", title: "各工段总投入和产出",
}; };
default: default:
return { return {

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

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

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

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

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

@ -100,7 +100,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr2.push(arrInner); 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.input.push(item.inputNum);
tempData[1].data.output.push(item.outputNum); tempData[1].data.output.push(item.outputNum);
}) })
@ -116,7 +116,7 @@ function RightDown() {
let arrInner = []; let arrInner = [];
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
arr3.push(arrInner); 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.input.push(item.inputNum);
tempData[2].data.output.push(item.outputNum); 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)", headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)", evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114], columnWidth: [55, 115, 100, 110],
data: [], data: [],
}; };
let arr:any = [] let arr:any = []
// @ts-ignore // @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) { if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore // @ts-ignore
data.sumProductionDets.map((item, index) => { data.sectionDet.map((item, index) => {
let arrInner = [] let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum) arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner) 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 Left from "./Left";
import Right from "./Right"; import Right from "./Right";
import Center from "./Center"; import Center from "./Center";
import {useEffect} from 'react';
import {useNavigate} from "react-router-dom";
function LinePage() { 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 ( return (
<React.Fragment> <React.Fragment>
<TopP /> <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 { .center_down .right_box .chart_box {
width: 100%; width: 100%;
height: 310px; height: 310px;
margin-top: 10px; margin-top: 5px;
} }
.right_up { .right_up {
width: 401px; width: 401px;
@ -230,7 +230,7 @@
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
z-index: 1002; z-index: 1002;
width: 240px; width: 270px;
height: 110px; height: 110px;
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat; background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
background-size: 100% 100%; background-size: 100% 100%;

131
src/store/UpdateData.tsx
View File

@ -1,5 +1,5 @@
import React, {useState} from "react"; import React, {useState} from "react";
import {useAppDispatch, useAppSelector} from "./hooks"; import {useAppDispatch} from "./hooks";
import axios from "axios"; import axios from "axios";
import { import {
@ -15,62 +15,13 @@ import {
UpdateLine5After UpdateLine5After
} from "./LinePageSlice" } from "./LinePageSlice"
import { UpdateAllLine } from "./LeaderPageSlice" import { UpdateAllLine } from "./LeaderPageSlice"
// let initLineGlassStatus: Object = {
// LINE_1_1: 1,
// LINE_1_2U: 1,
// LINE_1_2D: 1,
// LINE_1_3: 1,
// LINE_1_4: 1,
// LINE_2_1: 1,
// LINE_2_2U: 1,
// LINE_2_2D: 1,
// LINE_2_3: 1,
// LINE_2_4: 1,
// LINE_3_1: 1,
// LINE_3_2U: 1,
// LINE_3_2D: 1,
// LINE_3_3: 1,
// LINE_3_4: 1,
// LINE_4_1: 1,
// LINE_4_2U: 1,
// LINE_4_2D: 1,
// LINE_4_3: 1,
// LINE_4_4: 1,
// }
// function PrepareGlassStatus(action: string) {
// let FinalGlassStatus = initLineGlassStatus;
// if (action.includes('客户端')) {
// return FinalGlassStatus;
// } else {
// const ProductionMonitoringEntityData = JSON.parse(action);
// let JsonData = ProductionMonitoringEntityData.lineGlassStatus;
// // console.log(JsonData)
// let keys: Array<string> = [];
// let values: Array<number> = []
// let newJson = new Object();
// JsonData.map((item: SingleGlassStatus) => {
// keys.push(item.lineViewCode);
// values.push(item.status);
// })
// for (let i = 0; i < keys.length; i++) {
// let keyName = keys[i];
// // @ts-ignore
// newJson[keyName] = values[i];
// }
// FinalGlassStatus = newJson;
// // console.log(FinalGlassStatus)
// return FinalGlassStatus;
// }
// }
function UpdateData() { function UpdateData() {
const [myUrl, setUrl] = useState('') const [myUrl, setUrl] = useState('')
axios.get('/wsconfig.json') axios.get('/wsconfig.json')
.then((r) => { .then((r) => {
setUrl(r.data.url) setUrl(r.data.url)
}) })
let websocketAllLine = null;
let websocket1_1 = null; let websocket1_1 = null;
let websocket1_2 = null; let websocket1_2 = null;
let websocket2_1 = null; let websocket2_1 = null;
@ -82,65 +33,8 @@ function UpdateData() {
let websocket5_1 = null; let websocket5_1 = null;
let websocket5_2 = null; let websocket5_2 = null;
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
// 测试接口开始===================
axios.defaults.headers.common['Authorization'] = 'Bearer test1';
axios.defaults.headers.common['tenant-id'] = 1;
console.log('===========')
axios.get('http://172.16.32.40:48080/admin-api/monitoring/ViewController/driveMonitoring')
.then((res) => {
dispatch(UpdateAllLine(res.data));
// console.log(res)
})
return (
null
)
// axios.get(myUrl + '/admin-api/monitoring/ViewController/productionMonitoring?key=1-1')
// .then((res) => {
// dispatch(UpdateLine1Before(res.data));
// })
// axios.get(myUrl + '/admin-api/monitoring/ViewController/productionMonitoring?key=1-2')
// .then((res) => {
// dispatch(UpdateLine1After(res.data));
// })
// axios.get(myUrl + '/admin-api/monitoring/ViewController/productionMonitoring?key=2-1')
// .then((res) => {
// dispatch(UpdateLine2Before(res.data));
// })
// axios.get(myUrl + '/admin-api/monitoring/ViewController/productionMonitoring?key=2-2')
// .then((res) => {
// dispatch(UpdateLine2After(res.data));
// })
// axios.get(myUrl + '/admin-api/monitoring/ViewController/productionMonitoring?key=3-1')
// .then((res) => {
// dispatch(UpdateLine3Before(res.data));
// })
// axios.get(myUrl + '/admin-api/monitoring/ViewController/productionMonitoring?key=3-2')
// .then((res) => {
// dispatch(UpdateLine3After(res.data));
// })
// axios.get(myUrl + '/admin-api/monitoring/ViewController/productionMonitoring?key=4-1')
// .then((res) => {
// dispatch(UpdateLine4Before(res.data));
// })
// axios.get(myUrl + '/admin-api/monitoring/ViewController/productionMonitoring?key=4-2')
// .then((res) => {
// dispatch(UpdateLine4After(res.data));
// })
// axios.get(myUrl + '/admin-api/monitoring/ViewController/productionMonitoring?key=5-1')
// .then((res) => {
// dispatch(UpdateLine5Before(res.data));
// })
// axios.get(myUrl + '/admin-api/monitoring/ViewController/productionMonitoring?key=5-2')
// .then((res) => {
// dispatch(UpdateLine5After(res.data));
// })
// console.log('===========================================')
// return (
// null
// )
// 测试接口结束====================
if ('WebSocket' in window) { if ('WebSocket' in window) {
// websocketAllLine = new WebSocket("ws://" + myUrl + "/admin-api/monitoring/ViewController/driveMonitoring"); websocketAllLine = new WebSocket("ws://" + myUrl + "/websocket/message?userId=all");
websocket1_1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=1-1"); websocket1_1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=1-1");
websocket1_2 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=1-2"); websocket1_2 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=1-2");
websocket2_1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=2-1"); websocket2_1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=2-1");
@ -156,6 +50,10 @@ function UpdateData() {
alert('Not support websocket'); alert('Not support websocket');
} }
// @ts-ignore // @ts-ignore
websocketAllLine.onopen = function (event) {
console.log("websocketAllLine-open");
}
// @ts-ignore
websocket1_1.onopen = function (event) { websocket1_1.onopen = function (event) {
console.log("websocket1_1-open"); console.log("websocket1_1-open");
} }
@ -197,6 +95,17 @@ function UpdateData() {
} }
//接收到消息的回调方法 //接收到消息的回调方法
// @ts-ignore // @ts-ignore
websocketAllLine.onmessage = function (event) {
let msgData = event.data
try {
msgData = JSON.parse(event.data);
} catch (error) {
console.log("websocket: [unable to msgData] : ", event.data);
}
if (!Object.prototype.toString.call(msgData).includes('Object')) return;
dispatch(UpdateAllLine(msgData));
}
// @ts-ignore
websocket1_1.onmessage = function (event) { websocket1_1.onmessage = function (event) {
let msgData = event.data let msgData = event.data
try { try {
@ -306,9 +215,7 @@ function UpdateData() {
if (!Object.prototype.toString.call(msgData).includes('Object')) return; if (!Object.prototype.toString.call(msgData).includes('Object')) return;
dispatch(UpdateLine5After(msgData)); dispatch(UpdateLine5After(msgData));
} }
// return ( return null;
// null
// )
} }
export default UpdateData; export default UpdateData;