2.21日版

This commit is contained in:
朱菊兰 2025-02-21 11:10:35 +08:00
parent 128b362587
commit 1812afd680
89 changed files with 1420 additions and 995 deletions

View File

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

View File

@ -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 />,

View File

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import * as BABYLON from "@babylonjs/core";
import "@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">

View File

@ -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": [

View File

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import * as BABYLON from "@babylonjs/core";
import "@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);
}

View File

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

View File

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

View File

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

View File

@ -2,15 +2,14 @@ export default function getOptions(chartData: any) {
if (Object.keys(chartData).length === 0) {
return null;
}
const colors = ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160"];
let sum = chartData.sumData;
const colors = ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160","#D680FF","#FF6860"];
return {
color: colors,
grid: { top: 48, right: 20, bottom: 5, left: 15, containLabel: true },
grid: { top: 48, right: 20, bottom: 5, left: 10, containLabel: true },
legend: {
show: true,
icon: "roundRect",
top: 10,
top: 5,
right: 20,
padding: 0,
itemWidth: 10,
@ -71,58 +70,6 @@ export default function getOptions(chartData: any) {
},
className: "luoyang-chart-tooltip",
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series:chartData.series
// series: [
// {
// data: chartData.yData1,
// type: "bar",
// stack: "a",
// name: "磨边后",
// barWidth: 14,
// label: {
// show: true,
// position: "right",
// color: "inherit",
// },
// },
// {
// data: chartData.yData2,
// type: "bar",
// stack: "a",
// name: "包装1",
// label: {
// show: true,
// position: "right",
// color: "inherit",
// },
// },
// {
// data: chartData.yData3,
// type: "bar",
// stack: "a",
// name: "包装2",
// label: {
// show: true,
// position: "right",
// color: "inherit",
// },
// },
// {
// data: [0, 0, 0, 0, 0],
// type: "bar",
// stack: "a",
// name: "",
// label: {
// show: true,
// position: "top",
// color: "#fff",
// formatter: function (params: any) {
// return sum[params.dataIndex];
// },
// },
// },
// ],
};
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -12,14 +12,14 @@ function RightUp() {
headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -12,14 +12,14 @@ function RightUp() {
headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -12,14 +12,14 @@ function RightUp() {
headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -12,14 +12,14 @@ function RightUp() {
headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -12,14 +12,14 @@ function RightUp() {
headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -12,14 +12,14 @@ function RightUp() {
headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -12,14 +12,14 @@ function RightUp() {
headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -12,14 +12,14 @@ function RightUp() {
headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -12,14 +12,14 @@ function RightUp() {
headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -12,14 +12,14 @@ function RightUp() {
headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [70, 90, 106, 114],
columnWidth: [55, 115, 100, 110],
data: [],
};
let arr:any = []
// @ts-ignore
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
if (data.sectionDet && data.sectionDet.length > 0) {
// @ts-ignore
data.sumProductionDets.map((item, index) => {
data.sectionDet.map((item, index) => {
let arrInner = []
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
arr.push(arrInner)

View File

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

View File

@ -1,41 +0,0 @@
import React, { useState } from "react"; // 使用useState钩子来管理状态
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import "../style/standard.css"
// import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1";
// import MybabylonJS_2 from "../../babylonjs/MybabylonJS_2";
import { number } from "echarts";
import { firePixelShader } from "@babylonjs/materials/fire/fire.fragment";
function CenterUp() {
// 使用 useState 钩子来管理当前的序号状态
const [modelIndex, setModelIndex] = useState(1); // 默认序号为 1
// 定义切换模型序号的函数
const prevModelIndex = () => {
// 当前序号减 1如果小于 1则变为 5
setModelIndex((currentModelIndex) => (currentModelIndex - 1 + 5) % 5);
};
const nextModelIndex = () => {
// 当前序号加 1如果大于 5则变为 1
setModelIndex((currentModelIndex) => (currentModelIndex + 1) % 5);
};
return (
<div className="block_16 flex-col fineWin">
<div className="fineWin-footer"/>
{/* <MybabylonJS_1 modelPath={`line${modelIndex+1}`} /> */}
{/* 添加按钮来切换组件 */}
<button className="centerButton_1" onClick={prevModelIndex}></button>
<button className="centerButton_2" onClick={nextModelIndex}></button>
<h5 className="centerButton_2" >{modelIndex}</h5>
</div>
);
}
export default CenterUp;

View File

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

View File

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

View File

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

View File

@ -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;