2.21日版
This commit is contained in:
parent
128b362587
commit
1812afd680
@ -1,3 +1,3 @@
|
||||
{
|
||||
"url": "172.16.32.40:480080"
|
||||
"url": "172.16.32.40:48080"
|
||||
}
|
||||
19
src/App.tsx
19
src/App.tsx
@ -7,7 +7,6 @@ import ErrorPage from "./page/ErrorPage";
|
||||
import { MyObservable } from "./context/MyObservable";
|
||||
import { Observable } from "@babylonjs/core";
|
||||
import { selectGlassStatus } from "./store/ProductionMonitoringEntity";
|
||||
import TestPage from "./page/TestPage";
|
||||
import LDPage from "./page/LDPage";
|
||||
import LinePageOneOne from "./page/LinePage1-1";
|
||||
import LinePageOneTwo from "./page/LinePage1-2";
|
||||
@ -27,24 +26,6 @@ function App() {
|
||||
onGlassObservable.notifyObservers(thisLineGlassStatus);
|
||||
|
||||
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",
|
||||
element: <LDPage />,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import * as BABYLON from "@babylonjs/core";
|
||||
import "@babylonjs/core/Debug/debugLayer";
|
||||
import "@babylonjs/inspector";
|
||||
@ -10,7 +10,8 @@ import "../page/style/standard.css";
|
||||
import AlarmTipGreen from "./../page/assets/icon/g.png";
|
||||
import AlarmTipYellow from "./../page/assets/icon/y.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 = {
|
||||
width: "1041px",
|
||||
@ -35,39 +36,54 @@ interface EqMsg {
|
||||
localDateTime?:number;
|
||||
equipmentCode?:string;
|
||||
equipmentId?:number;
|
||||
num?:number;
|
||||
}
|
||||
function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
||||
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 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 [selectedMeshId, setSelectedMeshId] = useState<string | null>(null);
|
||||
const [selectedMeshObj, setSelectedMeshObj] = useState<EqMsg>({
|
||||
equipmentName: "",
|
||||
run: true,
|
||||
error: false,
|
||||
num: 0,
|
||||
});
|
||||
const [showInfo, setShowInfo] = useState(true);
|
||||
|
||||
// 使用 useRef 来存储当前加载的模型引用
|
||||
const currentMeshesRef = useRef<Array<BABYLON.AbstractMesh>>([]);
|
||||
useEffect(() => {
|
||||
const equStatus = allData?.equStatus;
|
||||
const equStatus = allEquStatus?.equStatus;
|
||||
if (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])
|
||||
// useEffect(() => {
|
||||
// if (selectedMeshId && eqList[selectedMeshId]) {
|
||||
// setSelectedMeshObj({
|
||||
// equipmentName:eqList[selectedMeshId].equipmentName,
|
||||
// run:eqList[selectedMeshId].run ? eqList[selectedMeshId].run : true,
|
||||
// error:eqList[selectedMeshId].error ? eqList[selectedMeshId].error : false,
|
||||
// });
|
||||
// }
|
||||
// },[selectedMeshId])
|
||||
useEffect(() => {
|
||||
if (selectedMeshId && eqList[selectedMeshId]) {
|
||||
setSelectedMeshObj({
|
||||
equipmentName:eqList[selectedMeshId].equipmentName,
|
||||
run:eqList[selectedMeshId].run ? eqList[selectedMeshId].run : true,
|
||||
error:eqList[selectedMeshId].error ? eqList[selectedMeshId].error : false,
|
||||
num:eqList[selectedMeshId].inputNum ? eqList[selectedMeshId].inputNum : (eqList[selectedMeshId].outputNum ? eqList[selectedMeshId].outputNum : 0),
|
||||
});
|
||||
}
|
||||
},[selectedMeshId])
|
||||
useEffect(() => {
|
||||
// 确保 canvas 引用存在
|
||||
if (!canvasRef.current) return;
|
||||
@ -140,7 +156,6 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
||||
ground.material = grid;
|
||||
|
||||
let hl = new BABYLON.HighlightLayer("hl1", scene);
|
||||
let hl2 = new BABYLON.HighlightLayer("hl2", scene);
|
||||
|
||||
// 定义一个函数来加载或重新加载模型
|
||||
const loadOrReloadModel = async () => {
|
||||
@ -197,23 +212,20 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
||||
}
|
||||
}
|
||||
// 模型点击事件
|
||||
// mesh._scene.onPointerDown = async (event, _pickResult) => {
|
||||
// console.log('_pickResult',_pickResult)
|
||||
// const pickInfo = mesh._scene.pick(
|
||||
// mesh._scene.pointerX,
|
||||
// mesh._scene.pointerY
|
||||
// );
|
||||
// //如果需要获取吗模型根节点，而不是模型中某个组件，请用一下方法
|
||||
// // getRootNode(pickInfo.pickedMesh as BABYLON.Node) 如上篇文章getRootNode函数
|
||||
mesh._scene.onPointerDown = async (event, _pickResult) => {
|
||||
console.log('_pickResult',_pickResult)
|
||||
const pickInfo = mesh._scene.pick(
|
||||
mesh._scene.pointerX,
|
||||
mesh._scene.pointerY
|
||||
);
|
||||
//判断是否是右键
|
||||
if (!(event.buttons === 1 && pickInfo.pickedMesh)) return;
|
||||
const MeshName = pickInfo.pickedMesh.name;
|
||||
const MeshNameId = pickInfo.pickedMesh.metadata.tags;
|
||||
|
||||
// //判断是否是右键
|
||||
// if (!(event.buttons === 1 && pickInfo.pickedMesh)) return;
|
||||
// const MeshName = pickInfo.pickedMesh.name;
|
||||
// // const MeshNameId = pickInfo.pickedMesh.metadata.tags;
|
||||
|
||||
// setSelectedMeshName(MeshName);
|
||||
// // setSelectedMeshId(MeshNameId);
|
||||
// };
|
||||
setSelectedMeshName(MeshName);
|
||||
setSelectedMeshId(MeshNameId);
|
||||
};
|
||||
});
|
||||
LOD0MESH2.meshes.map((mesh) => {
|
||||
mesh.isPickable = true;
|
||||
@ -242,23 +254,20 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
||||
}
|
||||
}
|
||||
// 模型点击事件
|
||||
// mesh._scene.onPointerDown = async (event, _pickResult) => {
|
||||
// console.log('_pickResult',_pickResult)
|
||||
// const pickInfo = mesh._scene.pick(
|
||||
// mesh._scene.pointerX,
|
||||
// mesh._scene.pointerY
|
||||
// );
|
||||
// //如果需要获取吗模型根节点，而不是模型中某个组件，请用一下方法
|
||||
// // getRootNode(pickInfo.pickedMesh as BABYLON.Node) 如上篇文章getRootNode函数
|
||||
mesh._scene.onPointerDown = async (event, _pickResult) => {
|
||||
console.log('_pickResult',_pickResult)
|
||||
const pickInfo = mesh._scene.pick(
|
||||
mesh._scene.pointerX,
|
||||
mesh._scene.pointerY
|
||||
);
|
||||
//判断是否是右键
|
||||
if (!(event.buttons === 1 && pickInfo.pickedMesh)) return;
|
||||
const MeshName = pickInfo.pickedMesh.name;
|
||||
const MeshNameId = pickInfo.pickedMesh.metadata.tags;
|
||||
|
||||
// //判断是否是右键
|
||||
// if (!(event.buttons === 1 && pickInfo.pickedMesh)) return;
|
||||
// const MeshName = pickInfo.pickedMesh.name;
|
||||
// // const MeshNameId = pickInfo.pickedMesh.metadata.tags;
|
||||
|
||||
// setSelectedMeshName(MeshName);
|
||||
// // setSelectedMeshId(MeshNameId);
|
||||
// };
|
||||
setSelectedMeshName(MeshName);
|
||||
setSelectedMeshId(MeshNameId);
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("加载模型失败:", error);
|
||||
@ -273,7 +282,6 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
||||
camera.alpha = BABYLON.Tools.ToRadians(270);
|
||||
camera.beta = BABYLON.Tools.ToRadians(25);
|
||||
camera.radius = 220;
|
||||
setShowInfo(true);
|
||||
setSelectedMeshName(null);
|
||||
}
|
||||
// 外部初始位置按钮
|
||||
@ -285,7 +293,6 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
||||
case BABYLON.PointerEventTypes.POINTERMOVE:
|
||||
clearTimeout(resetCamera);
|
||||
resetCamera = setTimeout(reset, 15000);
|
||||
setShowInfo(false);
|
||||
}
|
||||
});
|
||||
return scene;
|
||||
@ -323,23 +330,38 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
||||
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 (
|
||||
<div style={myStyle}>
|
||||
<div className="model_top_container">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
@ -350,13 +372,13 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
||||
<span className="right_value">{selectedMeshObj.equipmentName}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="left_name">进口数量：</span>
|
||||
<span className="right_value">13,302</span>
|
||||
<span className="left_name">进/出口数量：</span>
|
||||
<span className="right_value">{selectedMeshObj.num}</span>
|
||||
</div>
|
||||
<div>
|
||||
{/* <div>
|
||||
<span className="left_name">出口数量：</span>
|
||||
<span className="right_value">1,312</span>
|
||||
</div>
|
||||
</div> */}
|
||||
<div>
|
||||
<span className="left_name">报警状态：</span>
|
||||
<span className="right_value">
|
||||
|
||||
@ -15,7 +15,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "2支线", value: 0, code:'1-edge2', label:'inputNum' },
|
||||
{ name: "3支线", value: 0, code:'1-edge3', label:'inputNum' },
|
||||
],
|
||||
position: [120, 240],
|
||||
position: [180, 210],
|
||||
},
|
||||
{
|
||||
name: "磨边清洗出口",
|
||||
@ -24,7 +24,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "2支线", value: 0, code:'1-edgeclean2', label:'outputNum' },
|
||||
{ name: "3支线", value: 0, code:'1-edgeclean3', label:'outputNum' },
|
||||
],
|
||||
position: [320, 150],
|
||||
position: [340, 130],
|
||||
},
|
||||
{
|
||||
name: "打孔出口",
|
||||
@ -33,7 +33,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "2支线", value: 0, code:'1-punch2', label:'outputNum' },
|
||||
{ name: "3支线", value: 0, code:'1-punch3', label:'outputNum' },
|
||||
],
|
||||
position: [550, 320],
|
||||
position: [590, 300],
|
||||
},
|
||||
{
|
||||
name: "丝印进口",
|
||||
@ -42,7 +42,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "2支线", value: 0, code:'1-silk2', label:'inputNum' },
|
||||
{ name: "3支线", value: 0, code:'1-silk3', label:'inputNum' },
|
||||
],
|
||||
position: [520, 75],
|
||||
position: [510, 65],
|
||||
},
|
||||
{
|
||||
name: "二次固化出口",
|
||||
@ -51,12 +51,12 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "2支线", value: 0, code:'1-secsolid2', label:'outputNum' },
|
||||
{ name: "3支线", value: 0, code:'1-secsolid3', label:'outputNum' },
|
||||
],
|
||||
position: [850, 170],
|
||||
position: [850, 190],
|
||||
},
|
||||
{
|
||||
name: "钢化进口",
|
||||
data: [{ name: "钢化进口", value: 0, code:'1-temper1', label:'inputNum' }],
|
||||
position: [810, 10],
|
||||
position: [750, 10],
|
||||
},
|
||||
],
|
||||
"Line1-2": [
|
||||
@ -106,7 +106,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "1支线", value: 0, code:'2-edge1', label:'inputNum' },
|
||||
{ name: "2支线", value: 0, code:'2-edge2', label:'inputNum' },
|
||||
],
|
||||
position: [120, 265],
|
||||
position: [150, 245],
|
||||
},
|
||||
{
|
||||
name: "磨边清洗出口",
|
||||
@ -189,7 +189,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "1支线", value: 0, code:'3-edge1', label:'inputNum' },
|
||||
{ name: "2支线", value: 0, code:'3-edge2', label:'inputNum' },
|
||||
],
|
||||
position: [150, 255],
|
||||
position: [150, 225],
|
||||
},
|
||||
{
|
||||
name: "磨边清洗出口",
|
||||
@ -197,7 +197,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "1支线", value: 0, code:'3-edgeclean1', label:'outputNum' },
|
||||
{ name: "2支线", value: 0, code:'3-edgeclean2', label:'outputNum' },
|
||||
],
|
||||
position: [350, 170],
|
||||
position: [380, 150],
|
||||
},
|
||||
{
|
||||
name: "打孔出口",
|
||||
@ -205,7 +205,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "1支线", value: 0, code:'3-punch1', label:'outputNum' },
|
||||
{ name: "2支线", value: 0, code:'3-punch2', label:'outputNum' },
|
||||
],
|
||||
position: [590, 290],
|
||||
position: [620, 280],
|
||||
},
|
||||
{
|
||||
name: "丝印进口",
|
||||
@ -213,7 +213,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "1支线", value: 0, code:'3-silk1', label:'inputNum' },
|
||||
{ name: "2支线", value: 0, code:'3-silk2', label:'inputNum' },
|
||||
],
|
||||
position: [570, 90],
|
||||
position: [560, 90],
|
||||
},
|
||||
{
|
||||
name: "二次固化出口",
|
||||
@ -221,7 +221,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "1支线", value: 0, code:'3-secsolid1', label:'outputNum' },
|
||||
{ name: "2支线", value: 0, code:'3-secsolid2', label:'outputNum' },
|
||||
],
|
||||
position: [850, 170],
|
||||
position: [870, 170],
|
||||
},
|
||||
{
|
||||
name: "钢化进口",
|
||||
@ -272,7 +272,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "1支线", value: 0, code:'4-edge1', label:'inputNum' },
|
||||
{ name: "2支线", value: 0, code:'4-edge2', label:'inputNum' },
|
||||
],
|
||||
position: [200, 240],
|
||||
position: [200, 150],
|
||||
},
|
||||
{
|
||||
name: "磨边清洗出口",
|
||||
@ -280,7 +280,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "1支线", value: 0, code:'4-edgeclean1', label:'outputNum' },
|
||||
{ name: "2支线", value: 0, code:'4-edgeclean2', label:'outputNum' },
|
||||
],
|
||||
position: [370, 190],
|
||||
position: [420, 150],
|
||||
},
|
||||
{
|
||||
name: "一次镀膜进口",
|
||||
@ -288,7 +288,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "1支线", value: 0, code:'4-fircoat1', label:'inputNum' },
|
||||
{ name: "2支线", value: 0, code:'4-fircoat2', label:'inputNum' },
|
||||
],
|
||||
position: [610, 300],
|
||||
position: [650, 290],
|
||||
},
|
||||
{
|
||||
name: "二次镀膜进口",
|
||||
@ -296,7 +296,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "1支线", value: 0, code:'4-seccoat1', label:'inputNum' },
|
||||
{ name: "2支线", value: 0, code:'4-seccoat2', label:'inputNum' },
|
||||
],
|
||||
position: [590, 85],
|
||||
position: [640, 60],
|
||||
},
|
||||
{
|
||||
name: "二次固化出口",
|
||||
@ -309,7 +309,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{
|
||||
name: "钢化进口",
|
||||
data: [{ name: "钢化进口", value: 0, code:'4-temper1', label:'inputNum' }],
|
||||
position: [800, 30],
|
||||
position: [820, 20],
|
||||
},
|
||||
],
|
||||
"Line4-2": [
|
||||
@ -357,7 +357,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "2支线", value: 0, code:'5-edge2', label:'inputNum' },
|
||||
{ name: "3支线", value: 0, code:'5-edge3', label:'inputNum' },
|
||||
],
|
||||
position: [160, 220],
|
||||
position: [150, 370],
|
||||
},
|
||||
{
|
||||
name: "磨边清洗出口",
|
||||
@ -366,7 +366,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "2支线", value: 0, code:'5-edgeclean2', label:'outputNum' },
|
||||
{ name: "3支线", value: 0, code:'5-edgeclean3', label:'outputNum' },
|
||||
],
|
||||
position: [331, 160],
|
||||
position: [380, 130],
|
||||
},
|
||||
{
|
||||
name: "一次镀膜进口",
|
||||
@ -375,7 +375,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "2支线", value: 0, code:'5-fircoat2', label:'inputNum' },
|
||||
{ name: "3支线", value: 0, code:'5-fircoat3', label:'inputNum' },
|
||||
],
|
||||
position: [555, 329],
|
||||
position: [650, 310],
|
||||
},
|
||||
{
|
||||
name: "二次镀膜进口",
|
||||
@ -384,7 +384,7 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "2支线", value: 0, code:'5-seccoat2', label:'inputNum' },
|
||||
{ name: "3支线", value: 0, code:'5-seccoat3', label:'inputNum' },
|
||||
],
|
||||
position: [560, 65],
|
||||
position: [640, 20],
|
||||
},
|
||||
{
|
||||
name: "二次固化出口",
|
||||
@ -393,12 +393,12 @@ const EqInfoData:EqInfoDataInterface = {
|
||||
{ name: "2支线", value: 0, code:'5-secsolid2', label:'outputNum' },
|
||||
{ name: "3支线", value: 0, code:'5-secsolid3', label:'outputNum' },
|
||||
],
|
||||
position: [850, 200],
|
||||
position: [850, 220],
|
||||
},
|
||||
{
|
||||
name: "钢化进口",
|
||||
data: [{ name: "钢化进口", value: 0, code:'5-temper1', label:'inputNum' }],
|
||||
position: [800, 20],
|
||||
position: [830, 10],
|
||||
},
|
||||
],
|
||||
"Line5-2": [
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import * as BABYLON from "@babylonjs/core";
|
||||
import "@babylonjs/core/Debug/debugLayer";
|
||||
import "@babylonjs/inspector";
|
||||
@ -43,7 +43,6 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
||||
const allData = useAppSelector(selectLine1Before) as any; // 使用`any`来绕过类型检查
|
||||
const canvasRef = useRef(null);
|
||||
const resetRef = useRef<(() => void) | null>(null);
|
||||
// onEquObservable.notifyObservers(EquStatus);
|
||||
const [selectedMeshName, setSelectedMeshName] = useState<string | null>(null);
|
||||
const [selectedMeshId, setSelectedMeshId] = useState<string | null>(null);
|
||||
const [selectedMeshObj, setSelectedMeshObj] = useState<EqMsg>({
|
||||
@ -108,7 +107,9 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
||||
"camera",
|
||||
BABYLON.Tools.ToRadians(245),
|
||||
BABYLON.Tools.ToRadians(25),
|
||||
modelPath.slice(-1) === "1"
|
||||
modelPath.slice(-3) === "2-1"
|
||||
? 120
|
||||
: modelPath.slice(-1) === "1"
|
||||
? 110
|
||||
: modelPath.slice(-3) === "5-2"
|
||||
? 100
|
||||
@ -214,9 +215,6 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
||||
mesh._scene.pointerX,
|
||||
mesh._scene.pointerY
|
||||
);
|
||||
//如果需要获取吗模型根节点，而不是模型中某个组件，请用一下方法
|
||||
// getRootNode(pickInfo.pickedMesh as BABYLON.Node) 如上篇文章getRootNode函数
|
||||
|
||||
//判断是否是右键
|
||||
if (!(event.buttons === 1 && pickInfo.pickedMesh)) return;
|
||||
const MeshName = pickInfo.pickedMesh.name;
|
||||
@ -239,13 +237,15 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
||||
camera.alpha = BABYLON.Tools.ToRadians(245);
|
||||
camera.beta = BABYLON.Tools.ToRadians(25);
|
||||
camera.radius =
|
||||
modelPath.slice(-1) === "1"
|
||||
modelPath.slice(-3) === "2-1"
|
||||
? 120
|
||||
: modelPath.slice(-1) === "1"
|
||||
? 110
|
||||
: modelPath.slice(-3) === "5-2"
|
||||
? 100
|
||||
: modelPath.slice(-3) === "1-2"
|
||||
? 90
|
||||
: 65;
|
||||
: 65
|
||||
setShowInfo(true);
|
||||
setSelectedMeshName(null);
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import * as echarts from "echarts";
|
||||
export default function getOptions(dataProps: number[],xData:string[], color: string[]) {
|
||||
if (dataProps.length === 0) return null;
|
||||
return {
|
||||
grid: { top: 40, right: 10, bottom: 10, left: 10, containLabel: true },
|
||||
grid: { top: 30, right: 10, bottom: 5, left: 10, containLabel: true },
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
@ -11,8 +11,10 @@ export default function getOptions(dataProps: number[],xData:string[], color: st
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
fontSize: 10,
|
||||
interval: 0,
|
||||
rotate:20
|
||||
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
|
||||
@ -2,13 +2,13 @@ export default function getOptions(chartData: any) {
|
||||
if (Object.keys(chartData).length === 0) {
|
||||
return null;
|
||||
}
|
||||
const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"];
|
||||
const colors = ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160","#D680FF","#FF6860"];
|
||||
return {
|
||||
color: colors,
|
||||
grid: { top: 38, right: 12, bottom: 5, left: 15, containLabel: true },
|
||||
grid: { top: 50, right: 12, bottom: 5, left: 15, containLabel: true },
|
||||
legend: {
|
||||
show: true,
|
||||
top: 10,
|
||||
top: 5,
|
||||
right: 10,
|
||||
padding: 0,
|
||||
itemWidth: 14,
|
||||
|
||||
@ -6,16 +6,15 @@ export default function getOptions(tempData: any) {
|
||||
const colors = ["#1A99FF", "#50F4E3"];
|
||||
return {
|
||||
color: colors,
|
||||
grid: { top: 30, right: 12, bottom: 10, left: 10, containLabel: true },
|
||||
grid: { top: 30, right: 12, bottom: 10, left: 5, containLabel: true },
|
||||
legend: {
|
||||
show: true,
|
||||
icon: "roundRect",
|
||||
top: 10,
|
||||
right: 10,
|
||||
padding: 0,
|
||||
itemWidth: 10,
|
||||
itemWidth: 14,
|
||||
itemHeight: 10,
|
||||
itemGap: 3,
|
||||
itemGap: 8,
|
||||
height: 10,
|
||||
textStyle: {
|
||||
color: "#DFF1FE",
|
||||
|
||||
@ -2,15 +2,14 @@ export default function getOptions(chartData: any) {
|
||||
if (Object.keys(chartData).length === 0) {
|
||||
return null;
|
||||
}
|
||||
const colors = ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160"];
|
||||
let sum = chartData.sumData;
|
||||
const colors = ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160","#D680FF","#FF6860"];
|
||||
return {
|
||||
color: colors,
|
||||
grid: { top: 48, right: 20, bottom: 5, left: 15, containLabel: true },
|
||||
grid: { top: 48, right: 20, bottom: 5, left: 10, containLabel: true },
|
||||
legend: {
|
||||
show: true,
|
||||
icon: "roundRect",
|
||||
top: 10,
|
||||
top: 5,
|
||||
right: 20,
|
||||
padding: 0,
|
||||
itemWidth: 10,
|
||||
@ -71,58 +70,6 @@ export default function getOptions(chartData: any) {
|
||||
},
|
||||
className: "luoyang-chart-tooltip",
|
||||
},
|
||||
// Declare several bar series, each will be mapped
|
||||
// to a column of dataset.source by default.
|
||||
series:chartData.series
|
||||
// series: [
|
||||
// {
|
||||
// data: chartData.yData1,
|
||||
// type: "bar",
|
||||
// stack: "a",
|
||||
// name: "磨边后",
|
||||
// barWidth: 14,
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: "right",
|
||||
// color: "inherit",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// data: chartData.yData2,
|
||||
// type: "bar",
|
||||
// stack: "a",
|
||||
// name: "包装1",
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: "right",
|
||||
// color: "inherit",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// data: chartData.yData3,
|
||||
// type: "bar",
|
||||
// stack: "a",
|
||||
// name: "包装2",
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: "right",
|
||||
// color: "inherit",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// data: [0, 0, 0, 0, 0],
|
||||
// type: "bar",
|
||||
// stack: "a",
|
||||
// name: "",
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: "top",
|
||||
// color: "#fff",
|
||||
// formatter: function (params: any) {
|
||||
// return sum[params.dataIndex];
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,17 +1,16 @@
|
||||
import '../../lanhuapp/common.css';
|
||||
import "./index.css";
|
||||
import { useState } from "react";
|
||||
// import locale from 'antd/locale/zh_CN';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import 'dayjs/locale/zh-cn';
|
||||
function TopP() {
|
||||
const [time, setTime] = useState(dayjs().format('HH:mm'));
|
||||
const [date, setDate] = useState(dayjs().format('YY-MM-DD'));
|
||||
const [date, setDate] = useState(dayjs().format('YY/MM/DD'));
|
||||
const [weekday, setWeekday] = useState(dayjs().locale('zh-cn').format('dddd'));
|
||||
setInterval(() => {
|
||||
setTime(dayjs().format('HH:mm'));
|
||||
setDate(dayjs().format('YY-MM-DD'));
|
||||
setDate(dayjs().format('YY/MM/DD'));
|
||||
setWeekday(dayjs().locale('zh-cn').format('dddd'));
|
||||
})
|
||||
return (
|
||||
|
||||
@ -257,8 +257,8 @@
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 1002;
|
||||
width: 240px;
|
||||
height: 180px;
|
||||
width: 300px;
|
||||
height: 140px;
|
||||
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
@ -266,7 +266,7 @@
|
||||
}
|
||||
.ld_center_up .eq_detail_info .left_name {
|
||||
display: inline-block;
|
||||
width: 95px;
|
||||
width: 115px;
|
||||
height: 28px;
|
||||
text-align: right;
|
||||
font-size: 18px;
|
||||
|
||||
@ -3,30 +3,32 @@ import TopP from "./TopP";
|
||||
import Left from "./Left";
|
||||
import Right from "./Right";
|
||||
import Center from "./Center";
|
||||
// import {useEffect} from 'react';
|
||||
// import {useLocation,useNavigate} from "react-router-dom";
|
||||
import {useEffect} from 'react';
|
||||
import {useLocation,useNavigate} from "react-router-dom";
|
||||
function LDPage() {
|
||||
// const navigate = useNavigate();
|
||||
// const {state} = useLocation();
|
||||
// console.log("LDPage被加载了")
|
||||
// useEffect(() => {
|
||||
// const handleKeyDown = (event:any) => {
|
||||
// if (event.key === 'ArrowUp') {
|
||||
// console.log('LDPage向上键被按下');
|
||||
// navigate(`/TP/${state.LineID}`);
|
||||
// // 执行向上键的逻辑
|
||||
// } else if (event.key === 'ArrowDown') {
|
||||
// console.log('LDPage向下键被按下');
|
||||
// // 执行向下键的逻辑
|
||||
// }
|
||||
// };
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const LineID = location.search.split('=')[1];
|
||||
console.log(location)
|
||||
console.log("LDPage被加载了")
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event:any) => {
|
||||
if (event.key === 'ArrowUp') {
|
||||
console.log('LDPage向上键被按下');
|
||||
navigate(`/LP/${LineID}`);
|
||||
// 执行向上键的逻辑
|
||||
} else if (event.key === 'ArrowDown') {
|
||||
console.log('LDPage向下键被按下');
|
||||
// 执行向下键的逻辑
|
||||
navigate(`/LP/${LineID}`);
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
// window.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
// return () => {
|
||||
// window.removeEventListener('keydown', handleKeyDown);
|
||||
// };
|
||||
// }, []);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
// import SwitchButton from "../Component/SwitchButton";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
@ -29,10 +29,10 @@ function CenterDown() {
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
|
||||
// const handleButtonChange = (activeName: string) => {
|
||||
// setActiveName(activeName);
|
||||
// };
|
||||
const config = {
|
||||
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
||||
headerHeight: 36,
|
||||
@ -41,7 +41,7 @@ function CenterDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [80, 137, 137, 137],
|
||||
columnWidth: [80, 137, 177, 97],
|
||||
data: []
|
||||
};
|
||||
// 报警数据
|
||||
@ -64,7 +64,7 @@ function CenterDown() {
|
||||
});
|
||||
}
|
||||
config.data = arr
|
||||
// 产线成品率
|
||||
// 工段成品率
|
||||
// @ts-ignore
|
||||
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
@ -181,12 +181,12 @@ function CenterDown() {
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 产线成品率 */}
|
||||
{/* 工段成品率 */}
|
||||
<div className="center_down_inner flex-col right_box">
|
||||
<TitleBox title={"center_down_right"} />
|
||||
<div className="left_up_switch">
|
||||
{/* <div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
</div> */}
|
||||
{chartData.xData.length>0 && (
|
||||
<div className="chart_box">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
|
||||
@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
|
||||
case "left_up":
|
||||
return {
|
||||
img: Defect,
|
||||
title: "产线报废汇总",
|
||||
title: "工段报废汇总",
|
||||
};
|
||||
case "left_down":
|
||||
return {
|
||||
img: Record,
|
||||
title: "当前产线报废情况",
|
||||
title: "工序报废情况",
|
||||
};
|
||||
case "center_down_left":
|
||||
return {
|
||||
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
|
||||
case "center_down_right":
|
||||
return {
|
||||
img: Finished,
|
||||
title: "产线成品率",
|
||||
title: "工段成品率",
|
||||
};
|
||||
case "right_up":
|
||||
return {
|
||||
img: Num,
|
||||
title: "各产线总投入和产出",
|
||||
title: "各工段总投入和产出",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
|
||||
@ -25,7 +25,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 224],
|
||||
["2", "包装1", 322],
|
||||
@ -40,7 +40,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 1119],
|
||||
["2", "包装1", 1798],
|
||||
@ -55,7 +55,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 5004],
|
||||
["2", "包装1", 9122],
|
||||
@ -65,7 +65,9 @@ function LeftDown() {
|
||||
const color1 = ["#9DD5FF", "#1295FF"];
|
||||
const color2 = ["#85F6E9", "#2EC6B4"];
|
||||
// @ts-ignore
|
||||
let xData: string[] = data.scrapBars
|
||||
let xData1: string[] = [];
|
||||
let xData2: string[] = [];
|
||||
let xData3: string[] = [];
|
||||
let dataProps1: number[] = [];
|
||||
let dataProps2: number[] = [];
|
||||
let dataProps3: number[] = [];
|
||||
@ -77,9 +79,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr1.push(arrInner);
|
||||
dataProps1.push(item.scrapNum);
|
||||
xData1.push(item.sectionName);
|
||||
dataProps1.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps1 = []
|
||||
@ -89,9 +92,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr2.push(arrInner);
|
||||
dataProps2.push(item.scrapNum);
|
||||
xData2.push(item.sectionName);
|
||||
dataProps2.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps2 = []
|
||||
@ -101,9 +105,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr3.push(arrInner);
|
||||
dataProps3.push(item.scrapNum);
|
||||
xData3.push(item.sectionName);
|
||||
dataProps3.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps3 = []
|
||||
@ -111,9 +116,9 @@ function LeftDown() {
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
const options1 = getOptions(dataProps1,xData, color1);
|
||||
const options2 = getOptions(dataProps2,xData, color2);
|
||||
const options3 = getOptions(dataProps3,xData, color1);
|
||||
const options1 = getOptions(dataProps1,xData1, color1);
|
||||
const options2 = getOptions(dataProps2,xData2, color2);
|
||||
const options3 = getOptions(dataProps3,xData3, color1);
|
||||
return (
|
||||
<div className="left_down">
|
||||
<TitleBox title={"left_down"} />
|
||||
|
||||
@ -54,21 +54,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
|
||||
dataSource.day.xData.map((item,index)=>{
|
||||
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.day.xData.length; k++) {
|
||||
let item = dataSource.day.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.day.series.length;i++){
|
||||
let itemSeries = dataSource.day.series[i]
|
||||
// @ts-ignore
|
||||
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.day.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.day.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -109,21 +122,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
|
||||
dataSource.week.xData.map((item,index)=>{
|
||||
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.week.xData.length; k++) {
|
||||
let item = dataSource.week.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.week.series.length;i++){
|
||||
let itemSeries = dataSource.week.series[i]
|
||||
// @ts-ignore
|
||||
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.week.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.week.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -164,21 +190,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
|
||||
dataSource.month.xData.map((item,index)=>{
|
||||
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.month.xData.length; k++) {
|
||||
let item = dataSource.month.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.month.series.length;i++){
|
||||
let itemSeries = dataSource.month.series[i]
|
||||
// @ts-ignore
|
||||
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.month.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.month.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -198,6 +237,7 @@ function LeftUp() {
|
||||
dataSource.month.series = []
|
||||
}
|
||||
const options = getOptions(chartData);
|
||||
console.log('dataSource',dataSource)
|
||||
return (
|
||||
<div className="left_up">
|
||||
<TitleBox title={"left_up"} />
|
||||
|
||||
@ -101,7 +101,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -117,7 +117,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -12,14 +12,14 @@ function RightUp() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [70, 90, 106, 114],
|
||||
columnWidth: [55, 115, 100, 110],
|
||||
data: [],
|
||||
};
|
||||
let arr:any = []
|
||||
// @ts-ignore
|
||||
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
|
||||
if (data.sectionDet && data.sectionDet.length > 0) {
|
||||
// @ts-ignore
|
||||
data.sumProductionDets.map((item, index) => {
|
||||
data.sectionDet.map((item, index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
|
||||
arr.push(arrInner)
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
.center_down .right_box .chart_box {
|
||||
width: 100%;
|
||||
height: 310px;
|
||||
margin-top: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.right_up {
|
||||
width: 401px;
|
||||
@ -230,7 +230,7 @@
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 1002;
|
||||
width: 240px;
|
||||
width: 270px;
|
||||
height: 110px;
|
||||
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
@ -3,7 +3,27 @@ import TopP from "./TopP";
|
||||
import Left from "./Left";
|
||||
import Right from "./Right";
|
||||
import Center from "./Center";
|
||||
import {useEffect} from 'react';
|
||||
import {useNavigate} from "react-router-dom";
|
||||
function LinePage() {
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event:any) => {
|
||||
if (event.key === 'ArrowUp') {
|
||||
console.log('LDPage向上键被按下');
|
||||
navigate('/LD?lineId=1-1');
|
||||
// 执行向上键的逻辑
|
||||
} else if (event.key === 'ArrowDown') {
|
||||
console.log('LDPage向下键被按下');
|
||||
// 执行向下键的逻辑
|
||||
navigate('/LD?lineId=1-1');
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
});
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TopP />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
// import SwitchButton from "../Component/SwitchButton";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
@ -29,10 +29,10 @@ function CenterDown() {
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
|
||||
// const handleButtonChange = (activeName: string) => {
|
||||
// setActiveName(activeName);
|
||||
// };
|
||||
const config = {
|
||||
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
||||
headerHeight: 36,
|
||||
@ -41,7 +41,7 @@ function CenterDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [80, 137, 137, 137],
|
||||
columnWidth: [80, 137, 177, 97],
|
||||
data: []
|
||||
};
|
||||
// 报警数据
|
||||
@ -64,7 +64,7 @@ function CenterDown() {
|
||||
});
|
||||
}
|
||||
config.data = arr
|
||||
// 产线成品率
|
||||
// 工段成品率
|
||||
// @ts-ignore
|
||||
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
@ -181,12 +181,12 @@ function CenterDown() {
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 产线成品率 */}
|
||||
{/* 工段成品率 */}
|
||||
<div className="center_down_inner flex-col right_box">
|
||||
<TitleBox title={"center_down_right"} />
|
||||
<div className="left_up_switch">
|
||||
{/* <div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
</div> */}
|
||||
{chartData.xData.length>0 && (
|
||||
<div className="chart_box">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
|
||||
@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
|
||||
case "left_up":
|
||||
return {
|
||||
img: Defect,
|
||||
title: "产线报废汇总",
|
||||
title: "工段报废汇总",
|
||||
};
|
||||
case "left_down":
|
||||
return {
|
||||
img: Record,
|
||||
title: "当前产线报废情况",
|
||||
title: "工序报废情况",
|
||||
};
|
||||
case "center_down_left":
|
||||
return {
|
||||
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
|
||||
case "center_down_right":
|
||||
return {
|
||||
img: Finished,
|
||||
title: "产线成品率",
|
||||
title: "工段成品率",
|
||||
};
|
||||
case "right_up":
|
||||
return {
|
||||
img: Num,
|
||||
title: "各产线总投入和产出",
|
||||
title: "各工段总投入和产出",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
|
||||
@ -25,7 +25,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 224],
|
||||
["2", "包装1", 322],
|
||||
@ -40,7 +40,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 1119],
|
||||
["2", "包装1", 1798],
|
||||
@ -55,7 +55,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 5004],
|
||||
["2", "包装1", 9122],
|
||||
@ -65,7 +65,9 @@ function LeftDown() {
|
||||
const color1 = ["#9DD5FF", "#1295FF"];
|
||||
const color2 = ["#85F6E9", "#2EC6B4"];
|
||||
// @ts-ignore
|
||||
let xData: string[] = data.scrapBars
|
||||
let xData1: string[] = [];
|
||||
let xData2: string[] = [];
|
||||
let xData3: string[] = [];
|
||||
let dataProps1: number[] = [];
|
||||
let dataProps2: number[] = [];
|
||||
let dataProps3: number[] = [];
|
||||
@ -77,9 +79,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr1.push(arrInner);
|
||||
dataProps1.push(item.scrapNum);
|
||||
xData1.push(item.sectionName);
|
||||
dataProps1.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps1 = []
|
||||
@ -89,9 +92,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr2.push(arrInner);
|
||||
dataProps2.push(item.scrapNum);
|
||||
xData2.push(item.sectionName);
|
||||
dataProps2.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps2 = []
|
||||
@ -101,9 +105,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr3.push(arrInner);
|
||||
dataProps3.push(item.scrapNum);
|
||||
xData3.push(item.sectionName);
|
||||
dataProps3.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps3 = []
|
||||
@ -111,9 +116,9 @@ function LeftDown() {
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
const options1 = getOptions(dataProps1,xData, color1);
|
||||
const options2 = getOptions(dataProps2,xData, color2);
|
||||
const options3 = getOptions(dataProps3,xData, color1);
|
||||
const options1 = getOptions(dataProps1,xData1, color1);
|
||||
const options2 = getOptions(dataProps2,xData2, color2);
|
||||
const options3 = getOptions(dataProps3,xData3, color1);
|
||||
return (
|
||||
<div className="left_down">
|
||||
<TitleBox title={"left_down"} />
|
||||
|
||||
@ -54,21 +54,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
|
||||
dataSource.day.xData.map((item,index)=>{
|
||||
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.day.xData.length; k++) {
|
||||
let item = dataSource.day.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.day.series.length;i++){
|
||||
let itemSeries = dataSource.day.series[i]
|
||||
// @ts-ignore
|
||||
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.day.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.day.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -109,21 +122,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
|
||||
dataSource.week.xData.map((item,index)=>{
|
||||
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.week.xData.length; k++) {
|
||||
let item = dataSource.week.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.week.series.length;i++){
|
||||
let itemSeries = dataSource.week.series[i]
|
||||
// @ts-ignore
|
||||
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.week.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.week.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -164,21 +190,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
|
||||
dataSource.month.xData.map((item,index)=>{
|
||||
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.month.xData.length; k++) {
|
||||
let item = dataSource.month.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.month.series.length;i++){
|
||||
let itemSeries = dataSource.month.series[i]
|
||||
// @ts-ignore
|
||||
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.month.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.month.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -198,6 +237,7 @@ function LeftUp() {
|
||||
dataSource.month.series = []
|
||||
}
|
||||
const options = getOptions(chartData);
|
||||
console.log('dataSource',dataSource)
|
||||
return (
|
||||
<div className="left_up">
|
||||
<TitleBox title={"left_up"} />
|
||||
|
||||
@ -101,7 +101,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -117,7 +117,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -12,14 +12,14 @@ function RightUp() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [70, 90, 106, 114],
|
||||
columnWidth: [55, 115, 100, 110],
|
||||
data: [],
|
||||
};
|
||||
let arr:any = []
|
||||
// @ts-ignore
|
||||
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
|
||||
if (data.sectionDet && data.sectionDet.length > 0) {
|
||||
// @ts-ignore
|
||||
data.sumProductionDets.map((item, index) => {
|
||||
data.sectionDet.map((item, index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
|
||||
arr.push(arrInner)
|
||||
|
||||
@ -3,7 +3,27 @@ import TopP from "./TopP";
|
||||
import Left from "./Left";
|
||||
import Right from "./Right";
|
||||
import Center from "./Center";
|
||||
import {useEffect} from 'react';
|
||||
import {useNavigate} from "react-router-dom";
|
||||
function LinePage() {
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event:any) => {
|
||||
if (event.key === 'ArrowUp') {
|
||||
console.log('LDPage向上键被按下');
|
||||
navigate('/LD?lineId=1-2');
|
||||
// 执行向上键的逻辑
|
||||
} else if (event.key === 'ArrowDown') {
|
||||
console.log('LDPage向下键被按下');
|
||||
// 执行向下键的逻辑
|
||||
navigate('/LD?lineId=1-2');
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
});
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TopP />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
// import SwitchButton from "../Component/SwitchButton";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
@ -29,10 +29,10 @@ function CenterDown() {
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
|
||||
// const handleButtonChange = (activeName: string) => {
|
||||
// setActiveName(activeName);
|
||||
// };
|
||||
const config = {
|
||||
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
||||
headerHeight: 36,
|
||||
@ -41,7 +41,7 @@ function CenterDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [80, 137, 137, 137],
|
||||
columnWidth: [80, 137, 177, 97],
|
||||
data: []
|
||||
};
|
||||
// 报警数据
|
||||
@ -64,7 +64,7 @@ function CenterDown() {
|
||||
});
|
||||
}
|
||||
config.data = arr
|
||||
// 产线成品率
|
||||
// 工段成品率
|
||||
// @ts-ignore
|
||||
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
@ -181,12 +181,12 @@ function CenterDown() {
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 产线成品率 */}
|
||||
{/* 工段成品率 */}
|
||||
<div className="center_down_inner flex-col right_box">
|
||||
<TitleBox title={"center_down_right"} />
|
||||
<div className="left_up_switch">
|
||||
{/* <div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
</div> */}
|
||||
{chartData.xData.length>0 && (
|
||||
<div className="chart_box">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
|
||||
@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
|
||||
case "left_up":
|
||||
return {
|
||||
img: Defect,
|
||||
title: "产线报废汇总",
|
||||
title: "工段报废汇总",
|
||||
};
|
||||
case "left_down":
|
||||
return {
|
||||
img: Record,
|
||||
title: "当前产线报废情况",
|
||||
title: "工序报废情况",
|
||||
};
|
||||
case "center_down_left":
|
||||
return {
|
||||
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
|
||||
case "center_down_right":
|
||||
return {
|
||||
img: Finished,
|
||||
title: "产线成品率",
|
||||
title: "工段成品率",
|
||||
};
|
||||
case "right_up":
|
||||
return {
|
||||
img: Num,
|
||||
title: "各产线总投入和产出",
|
||||
title: "各工段总投入和产出",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
|
||||
@ -25,7 +25,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 224],
|
||||
["2", "包装1", 322],
|
||||
@ -40,7 +40,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 1119],
|
||||
["2", "包装1", 1798],
|
||||
@ -55,7 +55,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 5004],
|
||||
["2", "包装1", 9122],
|
||||
@ -65,7 +65,9 @@ function LeftDown() {
|
||||
const color1 = ["#9DD5FF", "#1295FF"];
|
||||
const color2 = ["#85F6E9", "#2EC6B4"];
|
||||
// @ts-ignore
|
||||
let xData: string[] = data.scrapBars
|
||||
let xData1: string[] = [];
|
||||
let xData2: string[] = [];
|
||||
let xData3: string[] = [];
|
||||
let dataProps1: number[] = [];
|
||||
let dataProps2: number[] = [];
|
||||
let dataProps3: number[] = [];
|
||||
@ -77,9 +79,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr1.push(arrInner);
|
||||
dataProps1.push(item.scrapNum);
|
||||
xData1.push(item.sectionName);
|
||||
dataProps1.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps1 = []
|
||||
@ -89,9 +92,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr2.push(arrInner);
|
||||
dataProps2.push(item.scrapNum);
|
||||
xData2.push(item.sectionName);
|
||||
dataProps2.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps2 = []
|
||||
@ -101,9 +105,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr3.push(arrInner);
|
||||
dataProps3.push(item.scrapNum);
|
||||
xData3.push(item.sectionName);
|
||||
dataProps3.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps3 = []
|
||||
@ -111,9 +116,9 @@ function LeftDown() {
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
const options1 = getOptions(dataProps1,xData, color1);
|
||||
const options2 = getOptions(dataProps2,xData, color2);
|
||||
const options3 = getOptions(dataProps3,xData, color1);
|
||||
const options1 = getOptions(dataProps1,xData1, color1);
|
||||
const options2 = getOptions(dataProps2,xData2, color2);
|
||||
const options3 = getOptions(dataProps3,xData3, color1);
|
||||
return (
|
||||
<div className="left_down">
|
||||
<TitleBox title={"left_down"} />
|
||||
|
||||
@ -54,21 +54,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
|
||||
dataSource.day.xData.map((item,index)=>{
|
||||
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.day.xData.length; k++) {
|
||||
let item = dataSource.day.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.day.series.length;i++){
|
||||
let itemSeries = dataSource.day.series[i]
|
||||
// @ts-ignore
|
||||
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.day.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.day.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -109,21 +122,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
|
||||
dataSource.week.xData.map((item,index)=>{
|
||||
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.week.xData.length; k++) {
|
||||
let item = dataSource.week.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.week.series.length;i++){
|
||||
let itemSeries = dataSource.week.series[i]
|
||||
// @ts-ignore
|
||||
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.week.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.week.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -164,21 +190,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
|
||||
dataSource.month.xData.map((item,index)=>{
|
||||
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.month.xData.length; k++) {
|
||||
let item = dataSource.month.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.month.series.length;i++){
|
||||
let itemSeries = dataSource.month.series[i]
|
||||
// @ts-ignore
|
||||
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.month.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.month.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -198,6 +237,7 @@ function LeftUp() {
|
||||
dataSource.month.series = []
|
||||
}
|
||||
const options = getOptions(chartData);
|
||||
console.log('dataSource',dataSource)
|
||||
return (
|
||||
<div className="left_up">
|
||||
<TitleBox title={"left_up"} />
|
||||
|
||||
@ -101,7 +101,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -117,7 +117,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -12,14 +12,14 @@ function RightUp() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [70, 90, 106, 114],
|
||||
columnWidth: [55, 115, 100, 110],
|
||||
data: [],
|
||||
};
|
||||
let arr:any = []
|
||||
// @ts-ignore
|
||||
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
|
||||
if (data.sectionDet && data.sectionDet.length > 0) {
|
||||
// @ts-ignore
|
||||
data.sumProductionDets.map((item, index) => {
|
||||
data.sectionDet.map((item, index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
|
||||
arr.push(arrInner)
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
.center_down .right_box .chart_box {
|
||||
width: 100%;
|
||||
height: 310px;
|
||||
margin-top: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.right_up {
|
||||
width: 401px;
|
||||
@ -230,7 +230,7 @@
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 1002;
|
||||
width: 240px;
|
||||
width: 270px;
|
||||
height: 110px;
|
||||
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
@ -3,7 +3,27 @@ import TopP from "./TopP";
|
||||
import Left from "./Left";
|
||||
import Right from "./Right";
|
||||
import Center from "./Center";
|
||||
import {useEffect} from 'react';
|
||||
import {useNavigate} from "react-router-dom";
|
||||
function LinePage() {
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event:any) => {
|
||||
if (event.key === 'ArrowUp') {
|
||||
console.log('LDPage向上键被按下');
|
||||
navigate('/LD?lineId=2-1');
|
||||
// 执行向上键的逻辑
|
||||
} else if (event.key === 'ArrowDown') {
|
||||
console.log('LDPage向下键被按下');
|
||||
// 执行向下键的逻辑
|
||||
navigate('/LD?lineId=2-1');
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
});
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TopP />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
// import SwitchButton from "../Component/SwitchButton";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
@ -29,10 +29,10 @@ function CenterDown() {
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
|
||||
// const handleButtonChange = (activeName: string) => {
|
||||
// setActiveName(activeName);
|
||||
// };
|
||||
const config = {
|
||||
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
||||
headerHeight: 36,
|
||||
@ -41,7 +41,7 @@ function CenterDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [80, 137, 137, 137],
|
||||
columnWidth: [80, 137, 177, 97],
|
||||
data: []
|
||||
};
|
||||
// 报警数据
|
||||
@ -64,7 +64,7 @@ function CenterDown() {
|
||||
});
|
||||
}
|
||||
config.data = arr
|
||||
// 产线成品率
|
||||
// 工段成品率
|
||||
// @ts-ignore
|
||||
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
@ -181,12 +181,12 @@ function CenterDown() {
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 产线成品率 */}
|
||||
{/* 工段成品率 */}
|
||||
<div className="center_down_inner flex-col right_box">
|
||||
<TitleBox title={"center_down_right"} />
|
||||
<div className="left_up_switch">
|
||||
{/* <div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
</div> */}
|
||||
{chartData.xData.length>0 && (
|
||||
<div className="chart_box">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
|
||||
@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
|
||||
case "left_up":
|
||||
return {
|
||||
img: Defect,
|
||||
title: "产线报废汇总",
|
||||
title: "工段报废汇总",
|
||||
};
|
||||
case "left_down":
|
||||
return {
|
||||
img: Record,
|
||||
title: "当前产线报废情况",
|
||||
title: "工序报废情况",
|
||||
};
|
||||
case "center_down_left":
|
||||
return {
|
||||
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
|
||||
case "center_down_right":
|
||||
return {
|
||||
img: Finished,
|
||||
title: "产线成品率",
|
||||
title: "工段成品率",
|
||||
};
|
||||
case "right_up":
|
||||
return {
|
||||
img: Num,
|
||||
title: "各产线总投入和产出",
|
||||
title: "各工段总投入和产出",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
|
||||
@ -25,7 +25,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 224],
|
||||
["2", "包装1", 322],
|
||||
@ -40,7 +40,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 1119],
|
||||
["2", "包装1", 1798],
|
||||
@ -55,7 +55,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 5004],
|
||||
["2", "包装1", 9122],
|
||||
@ -65,7 +65,9 @@ function LeftDown() {
|
||||
const color1 = ["#9DD5FF", "#1295FF"];
|
||||
const color2 = ["#85F6E9", "#2EC6B4"];
|
||||
// @ts-ignore
|
||||
let xData: string[] = data.scrapBars
|
||||
let xData1: string[] = [];
|
||||
let xData2: string[] = [];
|
||||
let xData3: string[] = [];
|
||||
let dataProps1: number[] = [];
|
||||
let dataProps2: number[] = [];
|
||||
let dataProps3: number[] = [];
|
||||
@ -77,9 +79,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr1.push(arrInner);
|
||||
dataProps1.push(item.scrapNum);
|
||||
xData1.push(item.sectionName);
|
||||
dataProps1.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps1 = []
|
||||
@ -89,9 +92,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr2.push(arrInner);
|
||||
dataProps2.push(item.scrapNum);
|
||||
xData2.push(item.sectionName);
|
||||
dataProps2.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps2 = []
|
||||
@ -101,9 +105,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr3.push(arrInner);
|
||||
dataProps3.push(item.scrapNum);
|
||||
xData3.push(item.sectionName);
|
||||
dataProps3.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps3 = []
|
||||
@ -111,9 +116,9 @@ function LeftDown() {
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
const options1 = getOptions(dataProps1,xData, color1);
|
||||
const options2 = getOptions(dataProps2,xData, color2);
|
||||
const options3 = getOptions(dataProps3,xData, color1);
|
||||
const options1 = getOptions(dataProps1,xData1, color1);
|
||||
const options2 = getOptions(dataProps2,xData2, color2);
|
||||
const options3 = getOptions(dataProps3,xData3, color1);
|
||||
return (
|
||||
<div className="left_down">
|
||||
<TitleBox title={"left_down"} />
|
||||
|
||||
@ -54,21 +54,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
|
||||
dataSource.day.xData.map((item,index)=>{
|
||||
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.day.xData.length; k++) {
|
||||
let item = dataSource.day.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.day.series.length;i++){
|
||||
let itemSeries = dataSource.day.series[i]
|
||||
// @ts-ignore
|
||||
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.day.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.day.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -109,21 +122,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
|
||||
dataSource.week.xData.map((item,index)=>{
|
||||
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.week.xData.length; k++) {
|
||||
let item = dataSource.week.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.week.series.length;i++){
|
||||
let itemSeries = dataSource.week.series[i]
|
||||
// @ts-ignore
|
||||
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.week.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.week.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -164,21 +190,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
|
||||
dataSource.month.xData.map((item,index)=>{
|
||||
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.month.xData.length; k++) {
|
||||
let item = dataSource.month.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.month.series.length;i++){
|
||||
let itemSeries = dataSource.month.series[i]
|
||||
// @ts-ignore
|
||||
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.month.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.month.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -198,6 +237,7 @@ function LeftUp() {
|
||||
dataSource.month.series = []
|
||||
}
|
||||
const options = getOptions(chartData);
|
||||
console.log('dataSource',dataSource)
|
||||
return (
|
||||
<div className="left_up">
|
||||
<TitleBox title={"left_up"} />
|
||||
|
||||
@ -101,7 +101,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -117,7 +117,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -12,14 +12,14 @@ function RightUp() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [70, 90, 106, 114],
|
||||
columnWidth: [55, 115, 100, 110],
|
||||
data: [],
|
||||
};
|
||||
let arr:any = []
|
||||
// @ts-ignore
|
||||
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
|
||||
if (data.sectionDet && data.sectionDet.length > 0) {
|
||||
// @ts-ignore
|
||||
data.sumProductionDets.map((item, index) => {
|
||||
data.sectionDet.map((item, index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
|
||||
arr.push(arrInner)
|
||||
|
||||
@ -3,7 +3,27 @@ import TopP from "./TopP";
|
||||
import Left from "./Left";
|
||||
import Right from "./Right";
|
||||
import Center from "./Center";
|
||||
import {useEffect} from 'react';
|
||||
import {useNavigate} from "react-router-dom";
|
||||
function LinePage() {
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event:any) => {
|
||||
if (event.key === 'ArrowUp') {
|
||||
console.log('LDPage向上键被按下');
|
||||
navigate('/LD?lineId=2-2');
|
||||
// 执行向上键的逻辑
|
||||
} else if (event.key === 'ArrowDown') {
|
||||
console.log('LDPage向下键被按下');
|
||||
// 执行向下键的逻辑
|
||||
navigate('/LD?lineId=2-2');
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
});
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TopP />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
// import SwitchButton from "../Component/SwitchButton";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
@ -29,10 +29,10 @@ function CenterDown() {
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
|
||||
// const handleButtonChange = (activeName: string) => {
|
||||
// setActiveName(activeName);
|
||||
// };
|
||||
const config = {
|
||||
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
||||
headerHeight: 36,
|
||||
@ -41,7 +41,7 @@ function CenterDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [80, 137, 137, 137],
|
||||
columnWidth: [80, 137, 177, 97],
|
||||
data: []
|
||||
};
|
||||
// 报警数据
|
||||
@ -64,7 +64,7 @@ function CenterDown() {
|
||||
});
|
||||
}
|
||||
config.data = arr
|
||||
// 产线成品率
|
||||
// 工段成品率
|
||||
// @ts-ignore
|
||||
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
@ -181,12 +181,12 @@ function CenterDown() {
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 产线成品率 */}
|
||||
{/* 工段成品率 */}
|
||||
<div className="center_down_inner flex-col right_box">
|
||||
<TitleBox title={"center_down_right"} />
|
||||
<div className="left_up_switch">
|
||||
{/* <div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
</div> */}
|
||||
{chartData.xData.length>0 && (
|
||||
<div className="chart_box">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
|
||||
@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
|
||||
case "left_up":
|
||||
return {
|
||||
img: Defect,
|
||||
title: "产线报废汇总",
|
||||
title: "工段报废汇总",
|
||||
};
|
||||
case "left_down":
|
||||
return {
|
||||
img: Record,
|
||||
title: "当前产线报废情况",
|
||||
title: "工序报废情况",
|
||||
};
|
||||
case "center_down_left":
|
||||
return {
|
||||
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
|
||||
case "center_down_right":
|
||||
return {
|
||||
img: Finished,
|
||||
title: "产线成品率",
|
||||
title: "工段成品率",
|
||||
};
|
||||
case "right_up":
|
||||
return {
|
||||
img: Num,
|
||||
title: "各产线总投入和产出",
|
||||
title: "各工段总投入和产出",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
|
||||
@ -25,7 +25,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 224],
|
||||
["2", "包装1", 322],
|
||||
@ -40,7 +40,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 1119],
|
||||
["2", "包装1", 1798],
|
||||
@ -55,7 +55,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 5004],
|
||||
["2", "包装1", 9122],
|
||||
@ -65,7 +65,9 @@ function LeftDown() {
|
||||
const color1 = ["#9DD5FF", "#1295FF"];
|
||||
const color2 = ["#85F6E9", "#2EC6B4"];
|
||||
// @ts-ignore
|
||||
let xData: string[] = data.scrapBars
|
||||
let xData1: string[] = [];
|
||||
let xData2: string[] = [];
|
||||
let xData3: string[] = [];
|
||||
let dataProps1: number[] = [];
|
||||
let dataProps2: number[] = [];
|
||||
let dataProps3: number[] = [];
|
||||
@ -77,9 +79,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr1.push(arrInner);
|
||||
dataProps1.push(item.scrapNum);
|
||||
xData1.push(item.sectionName);
|
||||
dataProps1.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps1 = []
|
||||
@ -89,9 +92,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr2.push(arrInner);
|
||||
dataProps2.push(item.scrapNum);
|
||||
xData2.push(item.sectionName);
|
||||
dataProps2.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps2 = []
|
||||
@ -101,9 +105,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr3.push(arrInner);
|
||||
dataProps3.push(item.scrapNum);
|
||||
xData3.push(item.sectionName);
|
||||
dataProps3.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps3 = []
|
||||
@ -111,9 +116,9 @@ function LeftDown() {
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
const options1 = getOptions(dataProps1,xData, color1);
|
||||
const options2 = getOptions(dataProps2,xData, color2);
|
||||
const options3 = getOptions(dataProps3,xData, color1);
|
||||
const options1 = getOptions(dataProps1,xData1, color1);
|
||||
const options2 = getOptions(dataProps2,xData2, color2);
|
||||
const options3 = getOptions(dataProps3,xData3, color1);
|
||||
return (
|
||||
<div className="left_down">
|
||||
<TitleBox title={"left_down"} />
|
||||
|
||||
@ -54,21 +54,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
|
||||
dataSource.day.xData.map((item,index)=>{
|
||||
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.day.xData.length; k++) {
|
||||
let item = dataSource.day.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.day.series.length;i++){
|
||||
let itemSeries = dataSource.day.series[i]
|
||||
// @ts-ignore
|
||||
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.day.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.day.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -109,21 +122,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
|
||||
dataSource.week.xData.map((item,index)=>{
|
||||
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.week.xData.length; k++) {
|
||||
let item = dataSource.week.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.week.series.length;i++){
|
||||
let itemSeries = dataSource.week.series[i]
|
||||
// @ts-ignore
|
||||
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.week.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.week.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -164,21 +190,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
|
||||
dataSource.month.xData.map((item,index)=>{
|
||||
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.month.xData.length; k++) {
|
||||
let item = dataSource.month.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.month.series.length;i++){
|
||||
let itemSeries = dataSource.month.series[i]
|
||||
// @ts-ignore
|
||||
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.month.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.month.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -198,6 +237,7 @@ function LeftUp() {
|
||||
dataSource.month.series = []
|
||||
}
|
||||
const options = getOptions(chartData);
|
||||
console.log('dataSource',dataSource)
|
||||
return (
|
||||
<div className="left_up">
|
||||
<TitleBox title={"left_up"} />
|
||||
|
||||
@ -100,7 +100,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -116,7 +116,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -12,14 +12,14 @@ function RightUp() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [70, 90, 106, 114],
|
||||
columnWidth: [55, 115, 100, 110],
|
||||
data: [],
|
||||
};
|
||||
let arr:any = []
|
||||
// @ts-ignore
|
||||
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
|
||||
if (data.sectionDet && data.sectionDet.length > 0) {
|
||||
// @ts-ignore
|
||||
data.sumProductionDets.map((item, index) => {
|
||||
data.sectionDet.map((item, index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
|
||||
arr.push(arrInner)
|
||||
|
||||
@ -3,7 +3,27 @@ import TopP from "./TopP";
|
||||
import Left from "./Left";
|
||||
import Right from "./Right";
|
||||
import Center from "./Center";
|
||||
import {useEffect} from 'react';
|
||||
import {useNavigate} from "react-router-dom";
|
||||
function LinePage() {
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event:any) => {
|
||||
if (event.key === 'ArrowUp') {
|
||||
console.log('LDPage向上键被按下');
|
||||
navigate('/LD?lineId=3-1');
|
||||
// 执行向上键的逻辑
|
||||
} else if (event.key === 'ArrowDown') {
|
||||
console.log('LDPage向下键被按下');
|
||||
// 执行向下键的逻辑
|
||||
navigate('/LD?lineId=3-1');
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
});
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TopP />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
// import SwitchButton from "../Component/SwitchButton";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
@ -29,10 +29,10 @@ function CenterDown() {
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
|
||||
// const handleButtonChange = (activeName: string) => {
|
||||
// setActiveName(activeName);
|
||||
// };
|
||||
const config = {
|
||||
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
||||
headerHeight: 36,
|
||||
@ -41,7 +41,7 @@ function CenterDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [80, 137, 137, 137],
|
||||
columnWidth: [80, 137, 177, 97],
|
||||
data: []
|
||||
};
|
||||
// 报警数据
|
||||
@ -64,7 +64,7 @@ function CenterDown() {
|
||||
});
|
||||
}
|
||||
config.data = arr
|
||||
// 产线成品率
|
||||
// 工段成品率
|
||||
// @ts-ignore
|
||||
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
@ -181,12 +181,12 @@ function CenterDown() {
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 产线成品率 */}
|
||||
{/* 工段成品率 */}
|
||||
<div className="center_down_inner flex-col right_box">
|
||||
<TitleBox title={"center_down_right"} />
|
||||
<div className="left_up_switch">
|
||||
{/* <div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
</div> */}
|
||||
{chartData.xData.length>0 && (
|
||||
<div className="chart_box">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
|
||||
@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
|
||||
case "left_up":
|
||||
return {
|
||||
img: Defect,
|
||||
title: "产线报废汇总",
|
||||
title: "工段报废汇总",
|
||||
};
|
||||
case "left_down":
|
||||
return {
|
||||
img: Record,
|
||||
title: "当前产线报废情况",
|
||||
title: "工序报废情况",
|
||||
};
|
||||
case "center_down_left":
|
||||
return {
|
||||
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
|
||||
case "center_down_right":
|
||||
return {
|
||||
img: Finished,
|
||||
title: "产线成品率",
|
||||
title: "工段成品率",
|
||||
};
|
||||
case "right_up":
|
||||
return {
|
||||
img: Num,
|
||||
title: "各产线总投入和产出",
|
||||
title: "各工段总投入和产出",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
|
||||
@ -25,7 +25,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 224],
|
||||
["2", "包装1", 322],
|
||||
@ -40,7 +40,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 1119],
|
||||
["2", "包装1", 1798],
|
||||
@ -55,7 +55,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 5004],
|
||||
["2", "包装1", 9122],
|
||||
@ -65,7 +65,9 @@ function LeftDown() {
|
||||
const color1 = ["#9DD5FF", "#1295FF"];
|
||||
const color2 = ["#85F6E9", "#2EC6B4"];
|
||||
// @ts-ignore
|
||||
let xData: string[] = data.scrapBars
|
||||
let xData1: string[] = [];
|
||||
let xData2: string[] = [];
|
||||
let xData3: string[] = [];
|
||||
let dataProps1: number[] = [];
|
||||
let dataProps2: number[] = [];
|
||||
let dataProps3: number[] = [];
|
||||
@ -77,9 +79,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr1.push(arrInner);
|
||||
dataProps1.push(item.scrapNum);
|
||||
xData1.push(item.sectionName);
|
||||
dataProps1.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps1 = []
|
||||
@ -89,9 +92,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr2.push(arrInner);
|
||||
dataProps2.push(item.scrapNum);
|
||||
xData2.push(item.sectionName);
|
||||
dataProps2.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps2 = []
|
||||
@ -101,9 +105,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr3.push(arrInner);
|
||||
dataProps3.push(item.scrapNum);
|
||||
xData3.push(item.sectionName);
|
||||
dataProps3.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps3 = []
|
||||
@ -111,9 +116,9 @@ function LeftDown() {
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
const options1 = getOptions(dataProps1,xData, color1);
|
||||
const options2 = getOptions(dataProps2,xData, color2);
|
||||
const options3 = getOptions(dataProps3,xData, color1);
|
||||
const options1 = getOptions(dataProps1,xData1, color1);
|
||||
const options2 = getOptions(dataProps2,xData2, color2);
|
||||
const options3 = getOptions(dataProps3,xData3, color1);
|
||||
return (
|
||||
<div className="left_down">
|
||||
<TitleBox title={"left_down"} />
|
||||
|
||||
@ -54,21 +54,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
|
||||
dataSource.day.xData.map((item,index)=>{
|
||||
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.day.xData.length; k++) {
|
||||
let item = dataSource.day.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.day.series.length;i++){
|
||||
let itemSeries = dataSource.day.series[i]
|
||||
// @ts-ignore
|
||||
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.day.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.day.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -109,21 +122,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
|
||||
dataSource.week.xData.map((item,index)=>{
|
||||
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.week.xData.length; k++) {
|
||||
let item = dataSource.week.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.week.series.length;i++){
|
||||
let itemSeries = dataSource.week.series[i]
|
||||
// @ts-ignore
|
||||
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.week.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.week.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -164,21 +190,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
|
||||
dataSource.month.xData.map((item,index)=>{
|
||||
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.month.xData.length; k++) {
|
||||
let item = dataSource.month.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.month.series.length;i++){
|
||||
let itemSeries = dataSource.month.series[i]
|
||||
// @ts-ignore
|
||||
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.month.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.month.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -198,6 +237,7 @@ function LeftUp() {
|
||||
dataSource.month.series = []
|
||||
}
|
||||
const options = getOptions(chartData);
|
||||
console.log('dataSource',dataSource)
|
||||
return (
|
||||
<div className="left_up">
|
||||
<TitleBox title={"left_up"} />
|
||||
|
||||
@ -101,7 +101,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -117,7 +117,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -12,14 +12,14 @@ function RightUp() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [70, 90, 106, 114],
|
||||
columnWidth: [55, 115, 100, 110],
|
||||
data: [],
|
||||
};
|
||||
let arr:any = []
|
||||
// @ts-ignore
|
||||
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
|
||||
if (data.sectionDet && data.sectionDet.length > 0) {
|
||||
// @ts-ignore
|
||||
data.sumProductionDets.map((item, index) => {
|
||||
data.sectionDet.map((item, index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
|
||||
arr.push(arrInner)
|
||||
|
||||
@ -3,7 +3,27 @@ import TopP from "./TopP";
|
||||
import Left from "./Left";
|
||||
import Right from "./Right";
|
||||
import Center from "./Center";
|
||||
import {useEffect} from 'react';
|
||||
import {useNavigate} from "react-router-dom";
|
||||
function LinePage() {
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event:any) => {
|
||||
if (event.key === 'ArrowUp') {
|
||||
console.log('LDPage向上键被按下');
|
||||
navigate('/LD?lineId=3-2');
|
||||
// 执行向上键的逻辑
|
||||
} else if (event.key === 'ArrowDown') {
|
||||
console.log('LDPage向下键被按下');
|
||||
// 执行向下键的逻辑
|
||||
navigate('/LD?lineId=3-2');
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
});
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TopP />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
// import SwitchButton from "../Component/SwitchButton";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
@ -29,10 +29,10 @@ function CenterDown() {
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
|
||||
// const handleButtonChange = (activeName: string) => {
|
||||
// setActiveName(activeName);
|
||||
// };
|
||||
const config = {
|
||||
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
||||
headerHeight: 36,
|
||||
@ -41,7 +41,7 @@ function CenterDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [80, 137, 137, 137],
|
||||
columnWidth: [80, 137, 177, 97],
|
||||
data: []
|
||||
};
|
||||
// 报警数据
|
||||
@ -64,7 +64,7 @@ function CenterDown() {
|
||||
});
|
||||
}
|
||||
config.data = arr
|
||||
// 产线成品率
|
||||
// 工段成品率
|
||||
// @ts-ignore
|
||||
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
@ -181,12 +181,12 @@ function CenterDown() {
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 产线成品率 */}
|
||||
{/* 工段成品率 */}
|
||||
<div className="center_down_inner flex-col right_box">
|
||||
<TitleBox title={"center_down_right"} />
|
||||
<div className="left_up_switch">
|
||||
{/* <div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
</div> */}
|
||||
{chartData.xData.length>0 && (
|
||||
<div className="chart_box">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
|
||||
@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
|
||||
case "left_up":
|
||||
return {
|
||||
img: Defect,
|
||||
title: "产线报废汇总",
|
||||
title: "工段报废汇总",
|
||||
};
|
||||
case "left_down":
|
||||
return {
|
||||
img: Record,
|
||||
title: "当前产线报废情况",
|
||||
title: "工序报废情况",
|
||||
};
|
||||
case "center_down_left":
|
||||
return {
|
||||
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
|
||||
case "center_down_right":
|
||||
return {
|
||||
img: Finished,
|
||||
title: "产线成品率",
|
||||
title: "工段成品率",
|
||||
};
|
||||
case "right_up":
|
||||
return {
|
||||
img: Num,
|
||||
title: "各产线总投入和产出",
|
||||
title: "各工段总投入和产出",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
|
||||
@ -25,7 +25,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 224],
|
||||
["2", "包装1", 322],
|
||||
@ -40,7 +40,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 1119],
|
||||
["2", "包装1", 1798],
|
||||
@ -55,7 +55,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 5004],
|
||||
["2", "包装1", 9122],
|
||||
@ -65,7 +65,9 @@ function LeftDown() {
|
||||
const color1 = ["#9DD5FF", "#1295FF"];
|
||||
const color2 = ["#85F6E9", "#2EC6B4"];
|
||||
// @ts-ignore
|
||||
let xData: string[] = data.scrapBars
|
||||
let xData1: string[] = [];
|
||||
let xData2: string[] = [];
|
||||
let xData3: string[] = [];
|
||||
let dataProps1: number[] = [];
|
||||
let dataProps2: number[] = [];
|
||||
let dataProps3: number[] = [];
|
||||
@ -77,9 +79,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr1.push(arrInner);
|
||||
dataProps1.push(item.scrapNum);
|
||||
xData1.push(item.sectionName);
|
||||
dataProps1.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps1 = []
|
||||
@ -89,9 +92,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr2.push(arrInner);
|
||||
dataProps2.push(item.scrapNum);
|
||||
xData2.push(item.sectionName);
|
||||
dataProps2.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps2 = []
|
||||
@ -101,9 +105,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr3.push(arrInner);
|
||||
dataProps3.push(item.scrapNum);
|
||||
xData3.push(item.sectionName);
|
||||
dataProps3.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps3 = []
|
||||
@ -111,9 +116,9 @@ function LeftDown() {
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
const options1 = getOptions(dataProps1,xData, color1);
|
||||
const options2 = getOptions(dataProps2,xData, color2);
|
||||
const options3 = getOptions(dataProps3,xData, color1);
|
||||
const options1 = getOptions(dataProps1,xData1, color1);
|
||||
const options2 = getOptions(dataProps2,xData2, color2);
|
||||
const options3 = getOptions(dataProps3,xData3, color1);
|
||||
return (
|
||||
<div className="left_down">
|
||||
<TitleBox title={"left_down"} />
|
||||
|
||||
@ -54,21 +54,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
|
||||
dataSource.day.xData.map((item,index)=>{
|
||||
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.day.xData.length; k++) {
|
||||
let item = dataSource.day.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.day.series.length;i++){
|
||||
let itemSeries = dataSource.day.series[i]
|
||||
// @ts-ignore
|
||||
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.day.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.day.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -109,21 +122,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
|
||||
dataSource.week.xData.map((item,index)=>{
|
||||
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.week.xData.length; k++) {
|
||||
let item = dataSource.week.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.week.series.length;i++){
|
||||
let itemSeries = dataSource.week.series[i]
|
||||
// @ts-ignore
|
||||
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.week.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.week.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -164,21 +190,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
|
||||
dataSource.month.xData.map((item,index)=>{
|
||||
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.month.xData.length; k++) {
|
||||
let item = dataSource.month.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.month.series.length;i++){
|
||||
let itemSeries = dataSource.month.series[i]
|
||||
// @ts-ignore
|
||||
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.month.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.month.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -198,6 +237,7 @@ function LeftUp() {
|
||||
dataSource.month.series = []
|
||||
}
|
||||
const options = getOptions(chartData);
|
||||
console.log('dataSource',dataSource)
|
||||
return (
|
||||
<div className="left_up">
|
||||
<TitleBox title={"left_up"} />
|
||||
|
||||
@ -101,7 +101,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -117,7 +117,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -12,14 +12,14 @@ function RightUp() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [70, 90, 106, 114],
|
||||
columnWidth: [55, 115, 100, 110],
|
||||
data: [],
|
||||
};
|
||||
let arr:any = []
|
||||
// @ts-ignore
|
||||
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
|
||||
if (data.sectionDet && data.sectionDet.length > 0) {
|
||||
// @ts-ignore
|
||||
data.sumProductionDets.map((item, index) => {
|
||||
data.sectionDet.map((item, index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
|
||||
arr.push(arrInner)
|
||||
|
||||
@ -3,7 +3,27 @@ import TopP from "./TopP";
|
||||
import Left from "./Left";
|
||||
import Right from "./Right";
|
||||
import Center from "./Center";
|
||||
import {useEffect} from 'react';
|
||||
import {useNavigate} from "react-router-dom";
|
||||
function LinePage() {
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event:any) => {
|
||||
if (event.key === 'ArrowUp') {
|
||||
console.log('LDPage向上键被按下');
|
||||
navigate('/LD?lineId=4-1');
|
||||
// 执行向上键的逻辑
|
||||
} else if (event.key === 'ArrowDown') {
|
||||
console.log('LDPage向下键被按下');
|
||||
// 执行向下键的逻辑
|
||||
navigate('/LD?lineId=4-1');
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
});
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TopP />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
// import SwitchButton from "../Component/SwitchButton";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
@ -29,10 +29,10 @@ function CenterDown() {
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
|
||||
// const handleButtonChange = (activeName: string) => {
|
||||
// setActiveName(activeName);
|
||||
// };
|
||||
const config = {
|
||||
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
||||
headerHeight: 36,
|
||||
@ -41,7 +41,7 @@ function CenterDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [80, 137, 137, 137],
|
||||
columnWidth: [80, 137, 177, 97],
|
||||
data: []
|
||||
};
|
||||
// 报警数据
|
||||
@ -64,7 +64,7 @@ function CenterDown() {
|
||||
});
|
||||
}
|
||||
config.data = arr
|
||||
// 产线成品率
|
||||
// 工段成品率
|
||||
// @ts-ignore
|
||||
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
@ -181,12 +181,12 @@ function CenterDown() {
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 产线成品率 */}
|
||||
{/* 工段成品率 */}
|
||||
<div className="center_down_inner flex-col right_box">
|
||||
<TitleBox title={"center_down_right"} />
|
||||
<div className="left_up_switch">
|
||||
{/* <div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
</div> */}
|
||||
{chartData.xData.length>0 && (
|
||||
<div className="chart_box">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
|
||||
@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
|
||||
case "left_up":
|
||||
return {
|
||||
img: Defect,
|
||||
title: "产线报废汇总",
|
||||
title: "工段报废汇总",
|
||||
};
|
||||
case "left_down":
|
||||
return {
|
||||
img: Record,
|
||||
title: "当前产线报废情况",
|
||||
title: "工序报废情况",
|
||||
};
|
||||
case "center_down_left":
|
||||
return {
|
||||
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
|
||||
case "center_down_right":
|
||||
return {
|
||||
img: Finished,
|
||||
title: "产线成品率",
|
||||
title: "工段成品率",
|
||||
};
|
||||
case "right_up":
|
||||
return {
|
||||
img: Num,
|
||||
title: "各产线总投入和产出",
|
||||
title: "各工段总投入和产出",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
|
||||
@ -25,7 +25,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 224],
|
||||
["2", "包装1", 322],
|
||||
@ -40,7 +40,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 1119],
|
||||
["2", "包装1", 1798],
|
||||
@ -55,7 +55,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 5004],
|
||||
["2", "包装1", 9122],
|
||||
@ -65,7 +65,9 @@ function LeftDown() {
|
||||
const color1 = ["#9DD5FF", "#1295FF"];
|
||||
const color2 = ["#85F6E9", "#2EC6B4"];
|
||||
// @ts-ignore
|
||||
let xData: string[] = data.scrapBars
|
||||
let xData1: string[] = [];
|
||||
let xData2: string[] = [];
|
||||
let xData3: string[] = [];
|
||||
let dataProps1: number[] = [];
|
||||
let dataProps2: number[] = [];
|
||||
let dataProps3: number[] = [];
|
||||
@ -77,9 +79,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr1.push(arrInner);
|
||||
dataProps1.push(item.scrapNum);
|
||||
xData1.push(item.sectionName);
|
||||
dataProps1.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps1 = []
|
||||
@ -89,9 +92,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr2.push(arrInner);
|
||||
dataProps2.push(item.scrapNum);
|
||||
xData2.push(item.sectionName);
|
||||
dataProps2.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps2 = []
|
||||
@ -101,9 +105,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr3.push(arrInner);
|
||||
dataProps3.push(item.scrapNum);
|
||||
xData3.push(item.sectionName);
|
||||
dataProps3.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps3 = []
|
||||
@ -111,9 +116,9 @@ function LeftDown() {
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
const options1 = getOptions(dataProps1,xData, color1);
|
||||
const options2 = getOptions(dataProps2,xData, color2);
|
||||
const options3 = getOptions(dataProps3,xData, color1);
|
||||
const options1 = getOptions(dataProps1,xData1, color1);
|
||||
const options2 = getOptions(dataProps2,xData2, color2);
|
||||
const options3 = getOptions(dataProps3,xData3, color1);
|
||||
return (
|
||||
<div className="left_down">
|
||||
<TitleBox title={"left_down"} />
|
||||
|
||||
@ -32,7 +32,6 @@ function LeftUp() {
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
console.log('',chartData)
|
||||
// @ts-ignore
|
||||
if (data.todayAllProductionScraps && Object.keys(data.todayAllProductionScraps).length > 0) {
|
||||
let sum: number[] = [];
|
||||
@ -55,21 +54,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
|
||||
dataSource.day.xData.map((item,index)=>{
|
||||
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.day.xData.length; k++) {
|
||||
let item = dataSource.day.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.day.series.length;i++){
|
||||
let itemSeries = dataSource.day.series[i]
|
||||
// @ts-ignore
|
||||
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.day.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.day.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -110,21 +122,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
|
||||
dataSource.week.xData.map((item,index)=>{
|
||||
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.week.xData.length; k++) {
|
||||
let item = dataSource.week.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.week.series.length;i++){
|
||||
let itemSeries = dataSource.week.series[i]
|
||||
// @ts-ignore
|
||||
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.week.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.week.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -165,21 +190,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
|
||||
dataSource.month.xData.map((item,index)=>{
|
||||
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.month.xData.length; k++) {
|
||||
let item = dataSource.month.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.month.series.length;i++){
|
||||
let itemSeries = dataSource.month.series[i]
|
||||
// @ts-ignore
|
||||
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.month.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.month.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -199,6 +237,7 @@ function LeftUp() {
|
||||
dataSource.month.series = []
|
||||
}
|
||||
const options = getOptions(chartData);
|
||||
console.log('dataSource',dataSource)
|
||||
return (
|
||||
<div className="left_up">
|
||||
<TitleBox title={"left_up"} />
|
||||
|
||||
@ -101,7 +101,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -117,7 +117,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -12,14 +12,14 @@ function RightUp() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [70, 90, 106, 114],
|
||||
columnWidth: [55, 115, 100, 110],
|
||||
data: [],
|
||||
};
|
||||
let arr:any = []
|
||||
// @ts-ignore
|
||||
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
|
||||
if (data.sectionDet && data.sectionDet.length > 0) {
|
||||
// @ts-ignore
|
||||
data.sumProductionDets.map((item, index) => {
|
||||
data.sectionDet.map((item, index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
|
||||
arr.push(arrInner)
|
||||
|
||||
@ -3,7 +3,27 @@ import TopP from "./TopP";
|
||||
import Left from "./Left";
|
||||
import Right from "./Right";
|
||||
import Center from "./Center";
|
||||
import {useEffect} from 'react';
|
||||
import {useNavigate} from "react-router-dom";
|
||||
function LinePage() {
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event:any) => {
|
||||
if (event.key === 'ArrowUp') {
|
||||
console.log('LDPage向上键被按下');
|
||||
navigate('/LD?lineId=4-2');
|
||||
// 执行向上键的逻辑
|
||||
} else if (event.key === 'ArrowDown') {
|
||||
console.log('LDPage向下键被按下');
|
||||
// 执行向下键的逻辑
|
||||
navigate('/LD?lineId=4-2');
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
});
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TopP />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
// import SwitchButton from "../Component/SwitchButton";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
@ -29,10 +29,10 @@ function CenterDown() {
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
|
||||
// const handleButtonChange = (activeName: string) => {
|
||||
// setActiveName(activeName);
|
||||
// };
|
||||
const config = {
|
||||
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
||||
headerHeight: 36,
|
||||
@ -41,7 +41,7 @@ function CenterDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [80, 137, 137, 137],
|
||||
columnWidth: [80, 137, 177, 97],
|
||||
data: []
|
||||
};
|
||||
// 报警数据
|
||||
@ -64,7 +64,7 @@ function CenterDown() {
|
||||
});
|
||||
}
|
||||
config.data = arr
|
||||
// 产线成品率
|
||||
// 工段成品率
|
||||
// @ts-ignore
|
||||
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
@ -181,12 +181,12 @@ function CenterDown() {
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 产线成品率 */}
|
||||
{/* 工段成品率 */}
|
||||
<div className="center_down_inner flex-col right_box">
|
||||
<TitleBox title={"center_down_right"} />
|
||||
<div className="left_up_switch">
|
||||
{/* <div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
</div> */}
|
||||
{chartData.xData.length>0 && (
|
||||
<div className="chart_box">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
|
||||
@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
|
||||
case "left_up":
|
||||
return {
|
||||
img: Defect,
|
||||
title: "产线报废汇总",
|
||||
title: "工段报废汇总",
|
||||
};
|
||||
case "left_down":
|
||||
return {
|
||||
img: Record,
|
||||
title: "当前产线报废情况",
|
||||
title: "工序报废情况",
|
||||
};
|
||||
case "center_down_left":
|
||||
return {
|
||||
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
|
||||
case "center_down_right":
|
||||
return {
|
||||
img: Finished,
|
||||
title: "产线成品率",
|
||||
title: "工段成品率",
|
||||
};
|
||||
case "right_up":
|
||||
return {
|
||||
img: Num,
|
||||
title: "各产线总投入和产出",
|
||||
title: "各工段总投入和产出",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
|
||||
@ -25,7 +25,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 224],
|
||||
["2", "包装1", 322],
|
||||
@ -40,7 +40,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 1119],
|
||||
["2", "包装1", 1798],
|
||||
@ -55,7 +55,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 5004],
|
||||
["2", "包装1", 9122],
|
||||
@ -65,7 +65,9 @@ function LeftDown() {
|
||||
const color1 = ["#9DD5FF", "#1295FF"];
|
||||
const color2 = ["#85F6E9", "#2EC6B4"];
|
||||
// @ts-ignore
|
||||
let xData: string[] = data.scrapBars
|
||||
let xData1: string[] = [];
|
||||
let xData2: string[] = [];
|
||||
let xData3: string[] = [];
|
||||
let dataProps1: number[] = [];
|
||||
let dataProps2: number[] = [];
|
||||
let dataProps3: number[] = [];
|
||||
@ -77,9 +79,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr1.push(arrInner);
|
||||
dataProps1.push(item.scrapNum);
|
||||
xData1.push(item.sectionName);
|
||||
dataProps1.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps1 = []
|
||||
@ -89,9 +92,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr2.push(arrInner);
|
||||
dataProps2.push(item.scrapNum);
|
||||
xData2.push(item.sectionName);
|
||||
dataProps2.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps2 = []
|
||||
@ -101,9 +105,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr3.push(arrInner);
|
||||
dataProps3.push(item.scrapNum);
|
||||
xData3.push(item.sectionName);
|
||||
dataProps3.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps3 = []
|
||||
@ -111,9 +116,9 @@ function LeftDown() {
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
const options1 = getOptions(dataProps1,xData, color1);
|
||||
const options2 = getOptions(dataProps2,xData, color2);
|
||||
const options3 = getOptions(dataProps3,xData, color1);
|
||||
const options1 = getOptions(dataProps1,xData1, color1);
|
||||
const options2 = getOptions(dataProps2,xData2, color2);
|
||||
const options3 = getOptions(dataProps3,xData3, color1);
|
||||
return (
|
||||
<div className="left_down">
|
||||
<TitleBox title={"left_down"} />
|
||||
|
||||
@ -54,21 +54,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
|
||||
dataSource.day.xData.map((item,index)=>{
|
||||
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.day.xData.length; k++) {
|
||||
let item = dataSource.day.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.day.series.length;i++){
|
||||
let itemSeries = dataSource.day.series[i]
|
||||
// @ts-ignore
|
||||
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.day.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.day.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -109,21 +122,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
|
||||
dataSource.week.xData.map((item,index)=>{
|
||||
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.week.xData.length; k++) {
|
||||
let item = dataSource.week.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.week.series.length;i++){
|
||||
let itemSeries = dataSource.week.series[i]
|
||||
// @ts-ignore
|
||||
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.week.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.week.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -164,21 +190,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
|
||||
dataSource.month.xData.map((item,index)=>{
|
||||
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.month.xData.length; k++) {
|
||||
let item = dataSource.month.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.month.series.length;i++){
|
||||
let itemSeries = dataSource.month.series[i]
|
||||
// @ts-ignore
|
||||
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.month.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.month.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -198,6 +237,7 @@ function LeftUp() {
|
||||
dataSource.month.series = []
|
||||
}
|
||||
const options = getOptions(chartData);
|
||||
console.log('dataSource',dataSource)
|
||||
return (
|
||||
<div className="left_up">
|
||||
<TitleBox title={"left_up"} />
|
||||
|
||||
@ -101,7 +101,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -117,7 +117,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -12,14 +12,14 @@ function RightUp() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [70, 90, 106, 114],
|
||||
columnWidth: [55, 115, 100, 110],
|
||||
data: [],
|
||||
};
|
||||
let arr:any = []
|
||||
// @ts-ignore
|
||||
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
|
||||
if (data.sectionDet && data.sectionDet.length > 0) {
|
||||
// @ts-ignore
|
||||
data.sumProductionDets.map((item, index) => {
|
||||
data.sectionDet.map((item, index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
|
||||
arr.push(arrInner)
|
||||
|
||||
@ -3,7 +3,27 @@ import TopP from "./TopP";
|
||||
import Left from "./Left";
|
||||
import Right from "./Right";
|
||||
import Center from "./Center";
|
||||
import {useEffect} from 'react';
|
||||
import {useNavigate} from "react-router-dom";
|
||||
function LinePage() {
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event:any) => {
|
||||
if (event.key === 'ArrowUp') {
|
||||
console.log('LDPage向上键被按下');
|
||||
navigate('/LD?lineId=5-1');
|
||||
// 执行向上键的逻辑
|
||||
} else if (event.key === 'ArrowDown') {
|
||||
console.log('LDPage向下键被按下');
|
||||
// 执行向下键的逻辑
|
||||
navigate('/LD?lineId=5-1');
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
});
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TopP />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
// import SwitchButton from "../Component/SwitchButton";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
@ -29,10 +29,10 @@ function CenterDown() {
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const [activeName, setActiveName] = useState<string>(nameList[1].ename);
|
||||
// const handleButtonChange = (activeName: string) => {
|
||||
// setActiveName(activeName);
|
||||
// };
|
||||
const config = {
|
||||
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
||||
headerHeight: 36,
|
||||
@ -41,7 +41,7 @@ function CenterDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [80, 137, 137, 137],
|
||||
columnWidth: [80, 137, 177, 97],
|
||||
data: []
|
||||
};
|
||||
// 报警数据
|
||||
@ -64,7 +64,7 @@ function CenterDown() {
|
||||
});
|
||||
}
|
||||
config.data = arr
|
||||
// 产线成品率
|
||||
// 工段成品率
|
||||
// @ts-ignore
|
||||
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
@ -181,12 +181,12 @@ function CenterDown() {
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 产线成品率 */}
|
||||
{/* 工段成品率 */}
|
||||
<div className="center_down_inner flex-col right_box">
|
||||
<TitleBox title={"center_down_right"} />
|
||||
<div className="left_up_switch">
|
||||
{/* <div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
</div> */}
|
||||
{chartData.xData.length>0 && (
|
||||
<div className="chart_box">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
|
||||
@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
|
||||
case "left_up":
|
||||
return {
|
||||
img: Defect,
|
||||
title: "产线报废汇总",
|
||||
title: "工段报废汇总",
|
||||
};
|
||||
case "left_down":
|
||||
return {
|
||||
img: Record,
|
||||
title: "当前产线报废情况",
|
||||
title: "工序报废情况",
|
||||
};
|
||||
case "center_down_left":
|
||||
return {
|
||||
@ -29,12 +29,12 @@ function TitleBox(props: titleProps) {
|
||||
case "center_down_right":
|
||||
return {
|
||||
img: Finished,
|
||||
title: "产线成品率",
|
||||
title: "工段成品率",
|
||||
};
|
||||
case "right_up":
|
||||
return {
|
||||
img: Num,
|
||||
title: "各产线总投入和产出",
|
||||
title: "各工段总投入和产出",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
|
||||
@ -25,7 +25,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 224],
|
||||
["2", "包装1", 322],
|
||||
@ -40,7 +40,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 1119],
|
||||
["2", "包装1", 1798],
|
||||
@ -55,7 +55,7 @@ function LeftDown() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
columnWidth: [73, 200, 107],
|
||||
data: [
|
||||
["1", "磨边后", 5004],
|
||||
["2", "包装1", 9122],
|
||||
@ -65,7 +65,9 @@ function LeftDown() {
|
||||
const color1 = ["#9DD5FF", "#1295FF"];
|
||||
const color2 = ["#85F6E9", "#2EC6B4"];
|
||||
// @ts-ignore
|
||||
let xData: string[] = data.scrapBars
|
||||
let xData1: string[] = [];
|
||||
let xData2: string[] = [];
|
||||
let xData3: string[] = [];
|
||||
let dataProps1: number[] = [];
|
||||
let dataProps2: number[] = [];
|
||||
let dataProps3: number[] = [];
|
||||
@ -77,9 +79,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr1.push(arrInner);
|
||||
dataProps1.push(item.scrapNum);
|
||||
xData1.push(item.sectionName);
|
||||
dataProps1.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps1 = []
|
||||
@ -89,9 +92,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr2.push(arrInner);
|
||||
dataProps2.push(item.scrapNum);
|
||||
xData2.push(item.sectionName);
|
||||
dataProps2.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps2 = []
|
||||
@ -101,9 +105,10 @@ function LeftDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
||||
arr3.push(arrInner);
|
||||
dataProps3.push(item.scrapNum);
|
||||
xData3.push(item.sectionName);
|
||||
dataProps3.push(item.scrapNum || 0);
|
||||
})
|
||||
}else{
|
||||
dataProps3 = []
|
||||
@ -111,9 +116,9 @@ function LeftDown() {
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
const options1 = getOptions(dataProps1,xData, color1);
|
||||
const options2 = getOptions(dataProps2,xData, color2);
|
||||
const options3 = getOptions(dataProps3,xData, color1);
|
||||
const options1 = getOptions(dataProps1,xData1, color1);
|
||||
const options2 = getOptions(dataProps2,xData2, color2);
|
||||
const options3 = getOptions(dataProps3,xData3, color1);
|
||||
return (
|
||||
<div className="left_down">
|
||||
<TitleBox title={"left_down"} />
|
||||
|
||||
@ -54,21 +54,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
|
||||
dataSource.day.xData.map((item,index)=>{
|
||||
dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.day.xData.length; k++) {
|
||||
let item = dataSource.day.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.day.series.length;i++){
|
||||
let itemSeries = dataSource.day.series[i]
|
||||
// @ts-ignore
|
||||
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.day.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.day.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -109,21 +122,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
|
||||
dataSource.week.xData.map((item,index)=>{
|
||||
dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.week.xData.length; k++) {
|
||||
let item = dataSource.week.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.week.series.length;i++){
|
||||
let itemSeries = dataSource.week.series[i]
|
||||
// @ts-ignore
|
||||
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.week.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.week.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -164,21 +190,34 @@ function LeftUp() {
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
|
||||
dataSource.month.xData.map((item,index)=>{
|
||||
dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
|
||||
// @ts-ignore
|
||||
const lastDigitA = parseInt(a[a.length - 1], 10);
|
||||
// @ts-ignore
|
||||
const lastDigitB = parseInt(b[b.length - 1], 10);
|
||||
return lastDigitA - lastDigitB;
|
||||
})
|
||||
for (let k = 0; k < dataSource.month.xData.length; k++) {
|
||||
let item = dataSource.month.xData[k];
|
||||
let sumIner = 0
|
||||
for(let i = 0;i < dataSource.month.series.length;i++){
|
||||
let itemSeries = dataSource.month.series[i]
|
||||
// @ts-ignore
|
||||
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.month.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
itemSeries.data.push(itemInner.scrapNum || 0)
|
||||
sumIner += itemInner.scrapNum || 0
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
if (itemSeries.data.length === k) {
|
||||
itemSeries.data.push(0)
|
||||
}
|
||||
}
|
||||
sum.push(sumIner)
|
||||
})
|
||||
}
|
||||
dataSource.month.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
@ -198,6 +237,7 @@ function LeftUp() {
|
||||
dataSource.month.series = []
|
||||
}
|
||||
const options = getOptions(chartData);
|
||||
console.log('dataSource',dataSource)
|
||||
return (
|
||||
<div className="left_up">
|
||||
<TitleBox title={"left_up"} />
|
||||
|
||||
@ -100,7 +100,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -116,7 +116,7 @@ function RightDown() {
|
||||
let arrInner = [];
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -12,14 +12,14 @@ function RightUp() {
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [70, 90, 106, 114],
|
||||
columnWidth: [55, 115, 100, 110],
|
||||
data: [],
|
||||
};
|
||||
let arr:any = []
|
||||
// @ts-ignore
|
||||
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
|
||||
if (data.sectionDet && data.sectionDet.length > 0) {
|
||||
// @ts-ignore
|
||||
data.sumProductionDets.map((item, index) => {
|
||||
data.sectionDet.map((item, index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
|
||||
arr.push(arrInner)
|
||||
|
||||
@ -3,7 +3,27 @@ import TopP from "./TopP";
|
||||
import Left from "./Left";
|
||||
import Right from "./Right";
|
||||
import Center from "./Center";
|
||||
import {useEffect} from 'react';
|
||||
import {useNavigate} from "react-router-dom";
|
||||
function LinePage() {
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event:any) => {
|
||||
if (event.key === 'ArrowUp') {
|
||||
console.log('LDPage向上键被按下');
|
||||
navigate('/LD?lineId=5-2');
|
||||
// 执行向上键的逻辑
|
||||
} else if (event.key === 'ArrowDown') {
|
||||
console.log('LDPage向下键被按下');
|
||||
// 执行向下键的逻辑
|
||||
navigate('/LD?lineId=5-2');
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
});
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TopP />
|
||||
|
||||
@ -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;
|
||||
@ -1,4 +0,0 @@
|
||||
.main-box {
|
||||
font-size: 50px;
|
||||
color: #fff;
|
||||
}
|
||||
@ -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;
|
||||
@ -100,7 +100,7 @@
|
||||
.center_down .right_box .chart_box {
|
||||
width: 100%;
|
||||
height: 310px;
|
||||
margin-top: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.right_up {
|
||||
width: 401px;
|
||||
@ -230,7 +230,7 @@
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 1002;
|
||||
width: 240px;
|
||||
width: 270px;
|
||||
height: 110px;
|
||||
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, {useState} from "react";
|
||||
import {useAppDispatch, useAppSelector} from "./hooks";
|
||||
import {useAppDispatch} from "./hooks";
|
||||
import axios from "axios";
|
||||
|
||||
import {
|
||||
@ -15,62 +15,13 @@ import {
|
||||
UpdateLine5After
|
||||
} from "./LinePageSlice"
|
||||
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() {
|
||||
const [myUrl, setUrl] = useState('')
|
||||
axios.get('/wsconfig.json')
|
||||
.then((r) => {
|
||||
setUrl(r.data.url)
|
||||
})
|
||||
let websocketAllLine = null;
|
||||
let websocket1_1 = null;
|
||||
let websocket1_2 = null;
|
||||
let websocket2_1 = null;
|
||||
@ -82,65 +33,8 @@ function UpdateData() {
|
||||
let websocket5_1 = null;
|
||||
let websocket5_2 = null;
|
||||
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) {
|
||||
// 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_2 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=1-2");
|
||||
websocket2_1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=2-1");
|
||||
@ -156,6 +50,10 @@ function UpdateData() {
|
||||
alert('Not support websocket');
|
||||
}
|
||||
// @ts-ignore
|
||||
websocketAllLine.onopen = function (event) {
|
||||
console.log("websocketAllLine-open");
|
||||
}
|
||||
// @ts-ignore
|
||||
websocket1_1.onopen = function (event) {
|
||||
console.log("websocket1_1-open");
|
||||
}
|
||||
@ -197,6 +95,17 @@ function UpdateData() {
|
||||
}
|
||||
//接收到消息的回调方法
|
||||
// @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) {
|
||||
let msgData = event.data
|
||||
try {
|
||||
@ -306,9 +215,7 @@ function UpdateData() {
|
||||
if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||
dispatch(UpdateLine5After(msgData));
|
||||
}
|
||||
// return (
|
||||
// null
|
||||
// )
|
||||
return null;
|
||||
}
|
||||
|
||||
export default UpdateData;
|
||||
Loading…
Reference in New Issue
Block a user