1
This commit is contained in:
parent
e8ca7d16ee
commit
128b362587
25369
package-lock.json
generated
25369
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -22,6 +22,7 @@
|
||||
"@types/node": "^16.11.56",
|
||||
"@types/react": "^18.0.17",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"antd": "^5.22.2",
|
||||
"axios": "^1.3.3",
|
||||
"babel-jest": "^27.4.2",
|
||||
"babel-loader": "^8.2.3",
|
||||
@ -49,7 +50,6 @@
|
||||
"jest-resolve": "^27.4.2",
|
||||
"jest-watch-typeahead": "^1.0.0",
|
||||
"mini-css-extract-plugin": "^2.4.5",
|
||||
"moment": "^2.30.1",
|
||||
"postcss": "^8.4.4",
|
||||
"postcss-flexbugs-fixes": "^5.0.2",
|
||||
"postcss-loader": "^6.2.1",
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
{
|
||||
"url": "192.168.1.45:48080"
|
||||
"url": "172.16.32.40:480080"
|
||||
}
|
||||
30
src/App.tsx
30
src/App.tsx
@ -1,10 +1,6 @@
|
||||
import React, { useEffect } from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import locales from "./locales/locales";
|
||||
import "./App.css";
|
||||
import { useAppSelector } from "./store/hooks";
|
||||
import { selectChangeLangAndCss } from "./store/ChangeLangAndCss";
|
||||
// import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
import { createHashRouter, RouterProvider } from "react-router-dom";
|
||||
|
||||
import ErrorPage from "./page/ErrorPage";
|
||||
@ -24,38 +20,12 @@ import LinePageFourTwo from "./page/LinePage4-2";
|
||||
import LinePageFiveOne from "./page/LinePage5-1";
|
||||
import LinePageFiveTwo from "./page/LinePage5-2";
|
||||
|
||||
// const LOCALES_LIST = [
|
||||
// {
|
||||
// label: "English",
|
||||
// value: "en-US",
|
||||
// },
|
||||
// {
|
||||
// label: "简体中文",
|
||||
// value: "zh-CN",
|
||||
// },
|
||||
// ];
|
||||
|
||||
const onGlassObservable = new Observable();
|
||||
|
||||
function App() {
|
||||
const thisLineGlassStatus = useAppSelector(selectGlassStatus);
|
||||
onGlassObservable.notifyObservers(thisLineGlassStatus);
|
||||
|
||||
const Locale = useAppSelector(selectChangeLangAndCss).Locale;
|
||||
|
||||
const setCurrentLocale = (currentLocale: string) => {
|
||||
intl
|
||||
.init({
|
||||
currentLocale,
|
||||
locales: locales,
|
||||
})
|
||||
.then(() => {
|
||||
console.log("Language Changed to " + currentLocale);
|
||||
});
|
||||
};
|
||||
|
||||
setCurrentLocale(Locale);
|
||||
|
||||
const router = createHashRouter([
|
||||
// {
|
||||
// path: "/:LineID?",
|
||||
|
||||
419
src/babylonjs/AllLinePageBabylon.tsx
Normal file
419
src/babylonjs/AllLinePageBabylon.tsx
Normal file
@ -0,0 +1,419 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import * as BABYLON from "@babylonjs/core";
|
||||
import "@babylonjs/core/Debug/debugLayer";
|
||||
import "@babylonjs/inspector";
|
||||
import "@babylonjs/loaders/glTF";
|
||||
import { GridMaterial } from "@babylonjs/materials/";
|
||||
import { HemisphericLight, Vector3 } from "@babylonjs/core";
|
||||
import { useAppSelector } from "../store/hooks";
|
||||
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";
|
||||
|
||||
const myStyle = {
|
||||
width: "1041px",
|
||||
height: "599px",
|
||||
outline: "none",
|
||||
};
|
||||
interface MybabylonJSProps {
|
||||
modelPath: string; // 明确 modelPath 属性的类型为 string
|
||||
}
|
||||
interface EqListType {
|
||||
[key: string]: EqMsg
|
||||
}
|
||||
interface EqMsg {
|
||||
equipmentName?:string;
|
||||
run?:boolean;
|
||||
error?:boolean;
|
||||
inputNum?:number;
|
||||
outputNum?:number;
|
||||
quantityTime?:number;
|
||||
status?:string;
|
||||
statusTime?:number;
|
||||
localDateTime?:number;
|
||||
equipmentCode?:string;
|
||||
equipmentId?:number;
|
||||
}
|
||||
function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
||||
const [eqList, setEqList] = useState<EqListType>({});
|
||||
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>({
|
||||
equipmentName: "",
|
||||
run: true,
|
||||
error: false,
|
||||
});
|
||||
const [showInfo, setShowInfo] = useState(true);
|
||||
|
||||
// 使用 useRef 来存储当前加载的模型引用
|
||||
const currentMeshesRef = useRef<Array<BABYLON.AbstractMesh>>([]);
|
||||
useEffect(() => {
|
||||
const equStatus = allData?.equStatus;
|
||||
if (equStatus) {
|
||||
setEqList(equStatus);
|
||||
}
|
||||
},[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(() => {
|
||||
// 确保 canvas 引用存在
|
||||
if (!canvasRef.current) return;
|
||||
const canvas = canvasRef.current;
|
||||
const engine = new BABYLON.Engine(canvas, true, {
|
||||
preserveDrawingBuffer: true,
|
||||
stencil: true,
|
||||
});
|
||||
|
||||
const createScene = async function () {
|
||||
// This creates a basic Babylon Scene object (non-mesh)
|
||||
const scene = new BABYLON.Scene(engine);
|
||||
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
|
||||
const baseLight = new HemisphericLight(
|
||||
"hemiLight",
|
||||
new Vector3(-1, 1, 0),
|
||||
scene
|
||||
);
|
||||
baseLight.intensity = 1;
|
||||
baseLight.diffuse = new BABYLON.Color3(1, 1, 1);
|
||||
baseLight.specular = new BABYLON.Color3(0.25, 0.25, 0.25);
|
||||
baseLight.groundColor = new BABYLON.Color3(0.5, 0.5, 0.5);
|
||||
|
||||
//add an arcRotateCamera to the scene
|
||||
const camera = new BABYLON.ArcRotateCamera(
|
||||
"camera",
|
||||
BABYLON.Tools.ToRadians(270),
|
||||
BABYLON.Tools.ToRadians(25),
|
||||
220,
|
||||
new BABYLON.Vector3(0, 0, 10)
|
||||
);
|
||||
camera.lowerRadiusLimit = 10;
|
||||
camera.upperRadiusLimit = 600;
|
||||
|
||||
// This attaches the camera to the canvas
|
||||
camera.attachControl(canvas, true);
|
||||
|
||||
//创建一个材质
|
||||
const newMt = new BABYLON.StandardMaterial("newMt");
|
||||
newMt.diffuseColor = BABYLON.Color3.Blue();
|
||||
|
||||
const ground = BABYLON.MeshBuilder.CreateGround(
|
||||
"ground",
|
||||
{
|
||||
width: 1000,
|
||||
height: 1000,
|
||||
subdivisions: 1,
|
||||
},
|
||||
scene
|
||||
);
|
||||
|
||||
ground.scaling.x = 100;
|
||||
ground.scaling.z = ground.scaling.x;
|
||||
ground.isPickable = false;
|
||||
|
||||
let grid = new GridMaterial("grid", scene);
|
||||
|
||||
grid.majorUnitFrequency = 10;
|
||||
grid.minorUnitVisibility = 0.3;
|
||||
grid.gridRatio = 0.04;
|
||||
grid.backFaceCulling = !1;
|
||||
grid.mainColor = new BABYLON.Color3(1, 1, 1);
|
||||
grid.lineColor = new BABYLON.Color3(1, 1, 1);
|
||||
grid.opacity = 0;
|
||||
grid.zOffset = 1;
|
||||
grid.opacityTexture = new BABYLON.Texture(
|
||||
"/public/png/backgroundGround.png",
|
||||
scene
|
||||
);
|
||||
ground.material = grid;
|
||||
|
||||
let hl = new BABYLON.HighlightLayer("hl1", scene);
|
||||
let hl2 = new BABYLON.HighlightLayer("hl2", scene);
|
||||
|
||||
// 定义一个函数来加载或重新加载模型
|
||||
const loadOrReloadModel = async () => {
|
||||
// 在加载新模型之前卸载已加载的模型
|
||||
currentMeshesRef.current.forEach((mesh) => {
|
||||
if (mesh && mesh.parent) {
|
||||
scene.removeMesh(mesh, true);
|
||||
}
|
||||
});
|
||||
currentMeshesRef.current = []; // 重置模型数组
|
||||
try {
|
||||
// 使用 ImportMeshAsync 加载新模型
|
||||
var LOD0MESH1 = await BABYLON.SceneLoader.ImportMeshAsync(
|
||||
"",
|
||||
"/Line/",
|
||||
"part1.babylon",
|
||||
scene
|
||||
);
|
||||
// 将新加载的模型添加到 currentMeshesRef 中
|
||||
currentMeshesRef.current.push(...LOD0MESH1.meshes);
|
||||
var LOD0MESH2 = await BABYLON.SceneLoader.ImportMeshAsync(
|
||||
"",
|
||||
"/Line/",
|
||||
"part2.babylon",
|
||||
scene
|
||||
);
|
||||
currentMeshesRef.current.push(...LOD0MESH2.meshes);
|
||||
// ...为新加载的模型设置交互逻辑
|
||||
|
||||
LOD0MESH1.meshes.map((mesh) => {
|
||||
mesh.isPickable = true;
|
||||
mesh.actionManager = new BABYLON.ActionManager(scene);
|
||||
if (modelPath.slice(-1) === "1") {
|
||||
if (
|
||||
mesh.name.includes("磨边") ||
|
||||
mesh.name.includes("清洗") ||
|
||||
mesh.name.includes("镀膜") ||
|
||||
mesh.name.includes("固化") ||
|
||||
mesh.name.includes("丝印") ||
|
||||
mesh.name.includes("打孔")
|
||||
) {
|
||||
// @ts-ignore
|
||||
hl.addMesh(mesh, BABYLON.Color3.Green());
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
mesh.name.includes("钢化") ||
|
||||
mesh.name.includes("包装") ||
|
||||
mesh.name.includes("铺纸") ||
|
||||
mesh.name.includes("下片机械手")
|
||||
) {
|
||||
// @ts-ignore
|
||||
hl.addMesh(mesh, BABYLON.Color3.Green());
|
||||
}
|
||||
}
|
||||
// 模型点击事件
|
||||
// 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函数
|
||||
|
||||
// //判断是否是右键
|
||||
// if (!(event.buttons === 1 && pickInfo.pickedMesh)) return;
|
||||
// const MeshName = pickInfo.pickedMesh.name;
|
||||
// // const MeshNameId = pickInfo.pickedMesh.metadata.tags;
|
||||
|
||||
// setSelectedMeshName(MeshName);
|
||||
// // setSelectedMeshId(MeshNameId);
|
||||
// };
|
||||
});
|
||||
LOD0MESH2.meshes.map((mesh) => {
|
||||
mesh.isPickable = true;
|
||||
mesh.actionManager = new BABYLON.ActionManager(scene);
|
||||
if (modelPath.slice(-1) === "1") {
|
||||
if (
|
||||
mesh.name.includes("磨边") ||
|
||||
mesh.name.includes("清洗") ||
|
||||
mesh.name.includes("镀膜") ||
|
||||
mesh.name.includes("固化") ||
|
||||
mesh.name.includes("丝印") ||
|
||||
mesh.name.includes("打孔")
|
||||
) {
|
||||
// @ts-ignore
|
||||
hl.addMesh(mesh, BABYLON.Color3.Green());
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
mesh.name.includes("钢化") ||
|
||||
mesh.name.includes("包装") ||
|
||||
mesh.name.includes("铺纸") ||
|
||||
mesh.name.includes("下片机械手")
|
||||
) {
|
||||
// @ts-ignore
|
||||
hl.addMesh(mesh, BABYLON.Color3.Green());
|
||||
}
|
||||
}
|
||||
// 模型点击事件
|
||||
// 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函数
|
||||
|
||||
// //判断是否是右键
|
||||
// if (!(event.buttons === 1 && pickInfo.pickedMesh)) return;
|
||||
// const MeshName = pickInfo.pickedMesh.name;
|
||||
// // const MeshNameId = pickInfo.pickedMesh.metadata.tags;
|
||||
|
||||
// setSelectedMeshName(MeshName);
|
||||
// // setSelectedMeshId(MeshNameId);
|
||||
// };
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("加载模型失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 调用函数以加载或重新加载模型
|
||||
loadOrReloadModel();
|
||||
|
||||
function reset() {
|
||||
camera.target = new BABYLON.Vector3(0, 0, 10);
|
||||
camera.alpha = BABYLON.Tools.ToRadians(270);
|
||||
camera.beta = BABYLON.Tools.ToRadians(25);
|
||||
camera.radius = 220;
|
||||
setShowInfo(true);
|
||||
setSelectedMeshName(null);
|
||||
}
|
||||
// 外部初始位置按钮
|
||||
resetRef.current = reset;
|
||||
|
||||
let resetCamera = setTimeout(reset, 15000);
|
||||
scene.onPointerObservable.add((pointerInfo) => {
|
||||
switch (pointerInfo.type) {
|
||||
case BABYLON.PointerEventTypes.POINTERMOVE:
|
||||
clearTimeout(resetCamera);
|
||||
resetCamera = setTimeout(reset, 15000);
|
||||
setShowInfo(false);
|
||||
}
|
||||
});
|
||||
return scene;
|
||||
};
|
||||
|
||||
// call the createScene function
|
||||
const scene = createScene();
|
||||
|
||||
// run the render loop
|
||||
scene.then(
|
||||
(scene) => {
|
||||
console.log("createScene被调用了=====", scene);
|
||||
engine.runRenderLoop(function () {
|
||||
scene.render();
|
||||
});
|
||||
},
|
||||
(reason) => {
|
||||
console.log("reason=============", reason);
|
||||
}
|
||||
);
|
||||
|
||||
// Resize
|
||||
window.addEventListener("resize", function () {
|
||||
engine.resize();
|
||||
});
|
||||
// 组件卸载时的清理逻辑
|
||||
return () => {
|
||||
// 清理场景和引擎资源
|
||||
engine.dispose();
|
||||
};
|
||||
}, [modelPath]);
|
||||
const resetModel = () => {
|
||||
//模型初始位置
|
||||
if (resetRef.current) {
|
||||
resetRef.current();
|
||||
}
|
||||
};
|
||||
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_text">成品率</div>
|
||||
</div>
|
||||
<div className="model_top_style2">
|
||||
<div className="model_top_num">8,984</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_text">本月产量</div>
|
||||
</div>
|
||||
<div className="model_top_style1">
|
||||
<div className="model_top_num">59</div>
|
||||
<div className="model_top_text">设备报警数</div>
|
||||
</div>
|
||||
</div>
|
||||
{selectedMeshName && (
|
||||
<div className="eq_detail_info">
|
||||
<div>
|
||||
<span className="left_name">设备名称：</span>
|
||||
<span className="right_value">{selectedMeshObj.equipmentName}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="left_name">进口数量：</span>
|
||||
<span className="right_value">13,302</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="left_name">出口数量：</span>
|
||||
<span className="right_value">1,312</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="left_name">报警状态：</span>
|
||||
<span className="right_value">
|
||||
{selectedMeshObj.error ? (
|
||||
<>
|
||||
<img
|
||||
src={AlarmTipRed}
|
||||
alt=""
|
||||
width={17}
|
||||
style={{ position: "relative", top: "2px", marginRight: 5 }}
|
||||
/>
|
||||
<span>报警</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<img
|
||||
src={AlarmTipGreen}
|
||||
alt=""
|
||||
width={17}
|
||||
style={{ position: "relative", top: "2px", marginRight: 5 }}
|
||||
/>
|
||||
<span>正常</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="left_name">在线状态：</span>
|
||||
<span className="right_value">
|
||||
{selectedMeshObj.run ? (
|
||||
<>
|
||||
<img
|
||||
src={AlarmTipGreen}
|
||||
alt=""
|
||||
width={17}
|
||||
style={{ position: "relative", top: "2px", marginRight: 5 }}
|
||||
/>
|
||||
<span>在线</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<img
|
||||
src={AlarmTipYellow}
|
||||
alt=""
|
||||
width={17}
|
||||
style={{ position: "relative", top: "2px", marginRight: 5 }}
|
||||
/>
|
||||
<span>离线</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<canvas ref={canvasRef} style={myStyle} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MybabylonJS;
|
||||
@ -1,18 +1,19 @@
|
||||
import * as echarts from "echarts";
|
||||
export default function getOptions() {
|
||||
// if (dataProps.length === 0) return null;
|
||||
export default function getOptions(dataProps:any) {
|
||||
if (dataProps.length === 0) return null;
|
||||
return {
|
||||
grid: { top: 40, right: 10, bottom: 10, left: 10, containLabel: true },
|
||||
grid: { top: 40, right: 10, bottom: 5, left: 10, containLabel: true },
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月'],
|
||||
data: dataProps.time,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
rotate:20
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
@ -83,7 +84,7 @@ export default function getOptions() {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [100,200,110,22,11,458,15,2,45],
|
||||
data: dataProps.input,
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
barGap:0,
|
||||
@ -95,7 +96,7 @@ export default function getOptions() {
|
||||
},
|
||||
},
|
||||
{
|
||||
data: [10,20,11,221,111,48,115,211,145],
|
||||
data:dataProps.output,
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
@ -106,7 +107,7 @@ export default function getOptions() {
|
||||
},
|
||||
},
|
||||
{
|
||||
data: [100,99,89,89,88,98,100,98,95],
|
||||
data: dataProps.yield,
|
||||
type: "line",
|
||||
yAxisIndex: 1,
|
||||
symbol:'circle',
|
||||
|
||||
@ -1,18 +1,47 @@
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import NumberBox from "../Component/NumberBox";
|
||||
const num1 = -18
|
||||
const num2 = +18
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import { selectAllLine } from "./../../../store/LeaderPageSlice";
|
||||
import { formatNumberWithCommas } from './../../../utils/index';
|
||||
function CenterDown() {
|
||||
interface mapInterface {
|
||||
inputRate:string,
|
||||
outputRate:string,
|
||||
input:string,
|
||||
output:string
|
||||
}
|
||||
let monthMap = {
|
||||
inputRate:'',
|
||||
outputRate:'',
|
||||
input:'',
|
||||
output:''
|
||||
}
|
||||
let lastMonthMap = {
|
||||
input:'',
|
||||
output:''
|
||||
}
|
||||
let yearMap = {
|
||||
inputRate:'',
|
||||
outputRate:'',
|
||||
input:'',
|
||||
output:''
|
||||
}
|
||||
const data = useAppSelector(selectAllLine);
|
||||
if (data.monthMap) {
|
||||
monthMap = data.monthMap as mapInterface
|
||||
lastMonthMap = data.lastMonthMap as mapInterface
|
||||
yearMap = data.yearMap as mapInterface
|
||||
}
|
||||
return(
|
||||
<div className="ld_center_down flex-row">
|
||||
<div className="ld_center_down_inner flex-col ld_left-box">
|
||||
<TitleBox title={"center_down_left"} />
|
||||
<div style={{padding:'10px 0px 0px 20px'}}>
|
||||
<div style={{width:'300px',height:'128px',marginBottom:'5px'}}>
|
||||
<NumberBox num={num1} show={true} title={'总投入片数'}/>
|
||||
<NumberBox num={monthMap.inputRate?monthMap.inputRate:'-'} show={true} title={'总投入片数'} bigNum={monthMap.input?formatNumberWithCommas(monthMap.input):'-'}/>
|
||||
</div>
|
||||
<div style={{width:'300px',height:'128px'}}>
|
||||
<NumberBox num={num2} show={true} title={'总生产片数'}/>
|
||||
<NumberBox num={monthMap.outputRate || '-'} show={true} title={'总生产片数'} bigNum={monthMap.output?formatNumberWithCommas(monthMap.output):'-'}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -20,10 +49,10 @@ function CenterDown() {
|
||||
<TitleBox title={"center_down_center"} />
|
||||
<div style={{padding:'10px 0px 0px 20px'}}>
|
||||
<div style={{width:'300px',height:'128px',marginBottom:'5px'}}>
|
||||
<NumberBox num={num1} show={false} title={'总投入片数'}/>
|
||||
<NumberBox num={''} show={false} title={'总投入片数'} bigNum={lastMonthMap.input?formatNumberWithCommas(lastMonthMap.input):'-'}/>
|
||||
</div>
|
||||
<div style={{width:'300px',height:'128px'}}>
|
||||
<NumberBox num={num2} show={false} title={'总生产片数'}/>
|
||||
<NumberBox num={''} show={false} title={'总生产片数'} bigNum={lastMonthMap.output?formatNumberWithCommas(lastMonthMap.output):'-'}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -31,10 +60,10 @@ function CenterDown() {
|
||||
<TitleBox title={"center_down_right"} />
|
||||
<div style={{padding:'10px 0px 0px 20px'}}>
|
||||
<div style={{width:'300px',height:'128px',marginBottom:'5px'}}>
|
||||
<NumberBox num={num1} show={true} title={'总投入片数/万'}/>
|
||||
<NumberBox num={yearMap.inputRate || '_'} show={true} title={'总投入片数/万'} bigNum={monthMap.input?formatNumberWithCommas(monthMap.input):'-'}/>
|
||||
</div>
|
||||
<div style={{width:'300px',height:'128px'}}>
|
||||
<NumberBox num={num2} show={true} title={'总生产片数/万'}/>
|
||||
<NumberBox num={yearMap.outputRate || '_'} show={true} title={'总生产片数/万'} bigNum={yearMap.output?formatNumberWithCommas(yearMap.output):'-'}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import LinePageBabylon from "../../../babylonjs/AllLinePageBabylon";
|
||||
function CenterUp() {
|
||||
const lineID = "1-1"
|
||||
return(
|
||||
<div className="ld_center_up">
|
||||
center-up
|
||||
<LinePageBabylon modelPath={`Line${lineID}`} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -2,10 +2,11 @@ import './index.css';
|
||||
import a_r from './../../../assets/icon/a_r.png';
|
||||
import a_g from './../../../assets/icon/a_g.png';
|
||||
interface boxProps {
|
||||
num:number,
|
||||
num:string | number,
|
||||
show?:boolean,
|
||||
title:string,
|
||||
lastYear?:boolean
|
||||
lastYear?:boolean,
|
||||
bigNum:string | number
|
||||
}
|
||||
function NumberBox(props: boxProps) {
|
||||
return (
|
||||
@ -14,10 +15,10 @@ function NumberBox(props: boxProps) {
|
||||
<div className='big_number_title_left'>{props.title}</div>
|
||||
{
|
||||
props.show?(
|
||||
<div className='big_number_title_right' style={{color:props.num>0?'#FF0000':'#00FF00'}}>
|
||||
{props.num>0?'+':''}{props.num}%
|
||||
<div className='big_number_title_right' style={{color:Number(props.num)>0?'#FF0000':'#00FF00'}}>
|
||||
{Number(props.num)>0?'+':''}{props.num}%
|
||||
{
|
||||
props.num>0?(
|
||||
Number(props.num)>0?(
|
||||
<img src={a_r} alt="" width='5px'/>
|
||||
):(
|
||||
<img src={a_g} alt="" width='5px'/>
|
||||
@ -27,7 +28,7 @@ function NumberBox(props: boxProps) {
|
||||
):''
|
||||
}
|
||||
</div>
|
||||
<div className='big_number'>261,938,984</div>
|
||||
<div className='big_number'>{props.bigNum}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -78,7 +78,7 @@ const getPersonnelList = async (dataProps: any) => {
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: `${startColor.substring(0, startColor.length - 1)}, 0)`, // 终点颜色
|
||||
color: `${startColor.substring(0, startColor.length - 1)}, 0.2)`, // 终点颜色
|
||||
},
|
||||
],
|
||||
global: false,
|
||||
|
||||
@ -1,19 +1,72 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import getOptions from "../../Component/BarLineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import { selectAllLine } from "./../../../store/LeaderPageSlice";
|
||||
import { Fragment } from "react/jsx-runtime";
|
||||
function LeftDown() {
|
||||
const options1 = getOptions();
|
||||
const data = useAppSelector(selectAllLine);
|
||||
interface Detail {
|
||||
time: string;
|
||||
input: string;
|
||||
output: string;
|
||||
Yield: string;
|
||||
}
|
||||
interface DataSource {
|
||||
time: string[];
|
||||
input: number[];
|
||||
output: number[];
|
||||
yield: number[];
|
||||
}
|
||||
let dataSource:DataSource = {
|
||||
time:[],
|
||||
input:[],
|
||||
output:[],
|
||||
yield:[]
|
||||
};
|
||||
if (data.numDet && Array.isArray(data.numDet)) {
|
||||
(data.numDet as Detail[]).forEach((item: Detail) => {
|
||||
dataSource.time.push(item.time);
|
||||
dataSource.input.push(Number(item.input));
|
||||
dataSource.output.push(Number(item.output));
|
||||
dataSource.yield.push(Number(item.Yield));
|
||||
})
|
||||
}else{
|
||||
dataSource.time = []
|
||||
dataSource.input = []
|
||||
dataSource.output = []
|
||||
dataSource.yield = []
|
||||
}
|
||||
const options1 = getOptions(dataSource);
|
||||
return(
|
||||
<div className="ld_left_down">
|
||||
<TitleBox title={"left_down"} />
|
||||
<div className="top_legend">
|
||||
<span className="chart_legend_icon1">投入</span>
|
||||
<span className="chart_legend_icon2">产出</span>
|
||||
<span><span className="chart_legend_icon3"></span>良品率</span>
|
||||
</div>
|
||||
<div style={{ width: "402px", height: "288px" }}>
|
||||
<ReactECharts option={options1} style={{ height: "100%" }} />
|
||||
</div>
|
||||
{
|
||||
dataSource.time.length>0?(
|
||||
<div>
|
||||
<div className="top_legend">
|
||||
<span className="chart_legend_icon1">投入</span>
|
||||
<span className="chart_legend_icon2">产出</span>
|
||||
<span><span className="chart_legend_icon3"></span>良品率</span>
|
||||
</div>
|
||||
<div style={{ width: "402px", height: "288px" }}>
|
||||
<ReactECharts option={options1} style={{ height: "100%" }} />
|
||||
</div>
|
||||
</div>
|
||||
):(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,7 +1,25 @@
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import inputImg from "../../assets/icon/input.png"
|
||||
import prod from '../../assets/icon/prod.png'
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import { selectAllLine } from "./../../../store/LeaderPageSlice";
|
||||
import { formatNumberWithCommas,parseAndFormatStringToTwoDecimalPlaces } from './../../../utils/index'
|
||||
function LeftUp() {
|
||||
const data = useAppSelector(selectAllLine);
|
||||
console.log(data)
|
||||
interface DataProps {
|
||||
input: string,
|
||||
inputArea: string,
|
||||
output: string,
|
||||
outputArea: string
|
||||
}
|
||||
let todayData:DataProps = {} as DataProps;
|
||||
let yesterdayData:DataProps = {} as DataProps;
|
||||
if (data.todayMap) {
|
||||
todayData = data.todayMap as DataProps;
|
||||
yesterdayData = data.yesterdayMap as DataProps;
|
||||
}
|
||||
|
||||
return(
|
||||
<div className="ld_left_up">
|
||||
<TitleBox title={"left_up"} />
|
||||
@ -18,8 +36,8 @@ function LeftUp() {
|
||||
<p style={{position:"relative",top:"-3px",left:"3px",color:'#9DEAF5'}}>总投入</p>
|
||||
</div>
|
||||
<div className="num_contrast_right">
|
||||
<p style={{height:"45px",paddingTop:'5px'}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>932,261</span>片数</p>
|
||||
<p style={{height:"40px"}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>894</span>面积/㎡</p>
|
||||
<p style={{height:"45px",paddingTop:'5px'}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>{todayData.input?formatNumberWithCommas(todayData.input):'-'}</span>片数</p>
|
||||
<p style={{height:"40px"}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>{todayData.inputArea?parseAndFormatStringToTwoDecimalPlaces(todayData.inputArea):'-'}</span>面积/㎡</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="num_contrast flex-row">
|
||||
@ -28,8 +46,8 @@ function LeftUp() {
|
||||
<p style={{position:"relative",top:"-3px",left:"3px",color:'#9DEAF5'}}>总生产</p>
|
||||
</div>
|
||||
<div className="num_contrast_right">
|
||||
<p style={{height:"45px",paddingTop:'5px'}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>932,261</span>片数</p>
|
||||
<p style={{height:"40px"}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>894</span>面积/㎡</p>
|
||||
<p style={{height:"45px",paddingTop:'5px'}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>{todayData.output?formatNumberWithCommas(todayData.output):'-'}</span>片数</p>
|
||||
<p style={{height:"40px"}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>{todayData.outputArea?parseAndFormatStringToTwoDecimalPlaces(todayData.outputArea):'-'}</span>面积/㎡</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -45,8 +63,8 @@ function LeftUp() {
|
||||
<p style={{position:"relative",top:"-3px",left:"3px",color:'#9DEAF5'}}>总投入</p>
|
||||
</div>
|
||||
<div className="num_contrast_right">
|
||||
<p style={{height:"45px",paddingTop:'5px'}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>932,261</span>片数</p>
|
||||
<p style={{height:"40px"}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>894</span>面积/㎡</p>
|
||||
<p style={{height:"45px",paddingTop:'5px'}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>{yesterdayData.input?formatNumberWithCommas(yesterdayData.input):'-'}</span>片数</p>
|
||||
<p style={{height:"40px"}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>{yesterdayData.inputArea?parseAndFormatStringToTwoDecimalPlaces(yesterdayData.inputArea):'-'}</span>面积/㎡</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="num_contrast flex-row">
|
||||
@ -55,8 +73,8 @@ function LeftUp() {
|
||||
<p style={{position:"relative",top:"-3px",left:"3px",color:'#9DEAF5'}}>总生产</p>
|
||||
</div>
|
||||
<div className="num_contrast_right">
|
||||
<p style={{height:"45px",paddingTop:'5px'}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>932,261</span>片数</p>
|
||||
<p style={{height:"40px"}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>894</span>面积/㎡</p>
|
||||
<p style={{height:"45px",paddingTop:'5px'}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>{yesterdayData.output?formatNumberWithCommas(yesterdayData.output):'-'}</span>片数</p>
|
||||
<p style={{height:"40px"}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>{yesterdayData.outputArea?parseAndFormatStringToTwoDecimalPlaces(yesterdayData.outputArea):'-'}</span>面积/㎡</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,17 +1,30 @@
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import NumberBox from "../Component/NumberBox";
|
||||
const num1 = -18
|
||||
const num2 = +18
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import { selectAllLine } from "./../../../store/LeaderPageSlice";
|
||||
import { formatNumberWithCommas } from './../../../utils/index';
|
||||
function RightDown() {
|
||||
interface mapInterface {
|
||||
input:string,
|
||||
output:string
|
||||
}
|
||||
let lastYearMap = {
|
||||
input:'',
|
||||
output:''
|
||||
} as mapInterface
|
||||
const data = useAppSelector(selectAllLine);
|
||||
if (data.lastYearMap) {
|
||||
lastYearMap = data.lastYearMap as mapInterface
|
||||
}
|
||||
return(
|
||||
<div className="ld_right_down">
|
||||
<TitleBox title={"right_down"} />
|
||||
<div style={{padding:'10px 0px 0px 20px'}}>
|
||||
<div style={{width:'365px',height:'128px',marginBottom:'5px'}}>
|
||||
<NumberBox num={num1} show={false} title={'总投入片数/万'} lastYear={true}/>
|
||||
<NumberBox num={''} show={false} title={'总投入片数/万'} lastYear={true} bigNum={lastYearMap.input?formatNumberWithCommas(lastYearMap.input):'-'}/>
|
||||
</div>
|
||||
<div style={{width:'365px',height:'128px'}}>
|
||||
<NumberBox num={num2} show={false} title={'总生产片数/万'} lastYear={true}/>
|
||||
<NumberBox num={''} show={false} title={'总生产片数/万'} lastYear={true} bigNum={lastYearMap.output?formatNumberWithCommas(lastYearMap.output):'-'}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,13 +3,16 @@ import a_r from './../../assets/icon/a_r.png';
|
||||
import a_g from './../../assets/icon/a_g.png';
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import getOptions from "../Component/pieChart/chart.config";
|
||||
import dayjs from 'dayjs';
|
||||
function RightUp() {
|
||||
const monthData = (Math.floor(Math.random() * (1100-900+1))+900)*(dayjs().date());
|
||||
const dataProps = [
|
||||
{value: 14,name:'缺陷1'},
|
||||
{value: 20,name:'缺陷2'},
|
||||
{value: 22,name:'缺陷3'},
|
||||
{value: 14,name:'缺陷4'},
|
||||
{value: 30,name:'缺陷5'}
|
||||
{value: 121,name:'打孔'},
|
||||
{value: 41,name:'丝印'},
|
||||
{value: 194,name:'磨边'},
|
||||
{value: 33,name:'一次镀膜'},
|
||||
{value: 25,name:'二次镀膜'},
|
||||
{value: 51,name:'钢化'},
|
||||
]
|
||||
const options1 = getOptions(dataProps);
|
||||
return(
|
||||
@ -26,23 +29,24 @@ function RightUp() {
|
||||
<div style={{width:"106px"}}>
|
||||
<p>
|
||||
当日
|
||||
<img src={a_r} alt="" width='5px' className="ld_right_up_img"/>
|
||||
{/* <img src={a_r} alt="" width='5px' className="ld_right_up_img"/> */}
|
||||
<img src={a_g} alt="" width='5px' className="ld_right_up_img"/>
|
||||
</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>283</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>465</p>
|
||||
</div>
|
||||
<div style={{width:"106px"}}>
|
||||
<p>
|
||||
本月
|
||||
<img src={a_g} alt="" width='5px' className="ld_right_up_img"/>
|
||||
<img src={monthData > 29456 ? a_r : a_g} alt="" width='5px' className="ld_right_up_img"/>
|
||||
</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>2,830</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>{monthData}</p>
|
||||
</div>
|
||||
<div style={{width:"106px"}}>
|
||||
<p>
|
||||
本年
|
||||
<img src={a_g} alt="" width='5px' className="ld_right_up_img"/>
|
||||
<img src={a_r} alt="" width='5px' className="ld_right_up_img"/>
|
||||
</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>32,830</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>48549</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ld_right_up_box1 flex-row">
|
||||
@ -50,19 +54,19 @@ function RightUp() {
|
||||
<p>
|
||||
昨日
|
||||
</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>283</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>968</p>
|
||||
</div>
|
||||
<div style={{width:"106px"}}>
|
||||
<p>
|
||||
上月
|
||||
</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>2,830</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>29456</p>
|
||||
</div>
|
||||
<div style={{width:"106px"}}>
|
||||
<p>
|
||||
上年
|
||||
</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>32,830</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,29 @@
|
||||
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 [weekday, setWeekday] = useState(dayjs().locale('zh-cn').format('dddd'));
|
||||
setInterval(() => {
|
||||
setTime(dayjs().format('HH:mm'));
|
||||
setDate(dayjs().format('YY-MM-DD'));
|
||||
setWeekday(dayjs().locale('zh-cn').format('dddd'));
|
||||
})
|
||||
return (
|
||||
<div className="flex-row">
|
||||
<div className="block_top_ld flex-row">
|
||||
<div className='block_top_title'></div>
|
||||
<div className='block_top_time'>
|
||||
<div className='time-title'>时间选择</div>
|
||||
<div className='time-content'>2024-11-22</div>
|
||||
<div className='time-title'>{time}</div>
|
||||
<div className='time-content'>
|
||||
<div>{weekday}</div>
|
||||
<div>{date}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -20,31 +20,24 @@
|
||||
.block_top_time {
|
||||
position:absolute;
|
||||
right:22px;
|
||||
top:56px;
|
||||
top:54px;
|
||||
color:#fff;
|
||||
font-size: 24px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.block_top_time .time-title {
|
||||
display:inline-block;
|
||||
width:122px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
width:113px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
font-size: 42px;
|
||||
text-align: center;
|
||||
border:1px solid #52FFF1;
|
||||
border-right:none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
|
||||
}
|
||||
.block_top_time .time-content {
|
||||
display:inline-block;
|
||||
width:191px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
text-align: center;
|
||||
border:1px solid #52FFF1;
|
||||
border-radius: 0 4px 4px 0;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
width:95px;
|
||||
height: 42px;
|
||||
padding-left:12px;
|
||||
}
|
||||
/* 中部 */
|
||||
.block_bottom {
|
||||
@ -222,4 +215,132 @@
|
||||
position:relative;
|
||||
left:2px;
|
||||
top:2px;
|
||||
}
|
||||
/* 三维页面部分 */
|
||||
.ld_center_up .model_name {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.ld_center_up .model_info {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
bottom: 0px;
|
||||
z-index: 1000;
|
||||
width: 841px;
|
||||
height: 62px;
|
||||
background: url(/public/png/lp/line_part.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.ld_center_up .model_info .reset_btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 40px;
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ld_center_up .model_info .title {
|
||||
display: inline-block;
|
||||
width: 361px;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
letter-spacing: 5px;
|
||||
position: absolute;
|
||||
left: 241px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.ld_center_up .eq_detail_info {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 1002;
|
||||
width: 240px;
|
||||
height: 180px;
|
||||
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
padding: 15px 0 0 15px;
|
||||
}
|
||||
.ld_center_up .eq_detail_info .left_name {
|
||||
display: inline-block;
|
||||
width: 95px;
|
||||
height: 28px;
|
||||
text-align: right;
|
||||
font-size: 18px;
|
||||
}
|
||||
.ld_center_up .eq_detail_info .right_value {
|
||||
display: inline-block;
|
||||
height: 28px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.ld_center_up .eq_info {
|
||||
position: absolute;
|
||||
z-index: 1002;
|
||||
background: url(/public/png/lp/eq_msg_always.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.ld_center_up .eq_info .eq_info_inner {
|
||||
height: 24px;
|
||||
font-size: 17px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ld_center_up .model_top_container {
|
||||
width:936px;
|
||||
height:100px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 45px;
|
||||
z-index: 1002;
|
||||
text-align: center;
|
||||
}
|
||||
.ld_center_up .model_top_container .model_top_style1 {
|
||||
display: inline-block;
|
||||
width:203px;
|
||||
}
|
||||
.model_top_style1 .model_top_num {
|
||||
width:100%;
|
||||
height:65px;
|
||||
line-height: 65px;
|
||||
font-size: 38px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 5px 2px rgba(0,0,0,0.62);
|
||||
background: url(./../assets/blue-box.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.model_top_style2 .model_top_num {
|
||||
width:100%;
|
||||
height:65px;
|
||||
line-height: 65px;
|
||||
font-size: 38px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 5px 2px rgba(0,0,0,0.62);
|
||||
background: url(./../assets/yellow-box.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.model_top_style1 .model_top_text {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #00C8F7;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0px 5px 2px rgba(0,0,0,0.62);
|
||||
}
|
||||
.model_top_style2 .model_top_text {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #FFB625;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0px 5px 2px rgba(0,0,0,0.62);
|
||||
}
|
||||
.ld_center_up .model_top_container .model_top_style2 {
|
||||
display: inline-block;
|
||||
width:261px;
|
||||
}
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1Before} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function CenterDown() {
|
||||
const data = useAppSelector(selectLine1Before);
|
||||
// 假数据
|
||||
@ -56,7 +56,7 @@ function CenterDown() {
|
||||
let arrInner = []
|
||||
arrInner.push(
|
||||
index+1,
|
||||
moment(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
item.name,
|
||||
item.status === '故障'?"<span style='color:#FF1E1E'>故障</span>":"<span style='color:#FFB40F'>离线</span>",
|
||||
);
|
||||
@ -72,7 +72,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.day.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -102,7 +102,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.week.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -132,7 +132,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.month.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChartRight/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1Before} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function RightDown() {
|
||||
const data = useAppSelector(selectLine1Before);
|
||||
// console.log('页面数据：',data)
|
||||
@ -83,9 +83,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arr1.push(arrInner);
|
||||
tempData[0].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.input.push(item.inputNum);
|
||||
tempData[0].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -99,9 +99,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -115,9 +115,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1After} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function CenterDown() {
|
||||
const data = useAppSelector(selectLine1After);
|
||||
// 假数据
|
||||
@ -56,7 +56,7 @@ function CenterDown() {
|
||||
let arrInner = []
|
||||
arrInner.push(
|
||||
index+1,
|
||||
moment(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
item.name,
|
||||
item.status === '故障'?"<span style='color:#FF1E1E'>故障</span>":"<span style='color:#FFB40F'>离线</span>",
|
||||
);
|
||||
@ -72,7 +72,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.day.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -102,7 +102,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.week.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -132,7 +132,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.month.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChartRight/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1After} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function RightDown() {
|
||||
const data = useAppSelector(selectLine1After);
|
||||
// console.log('页面数据：',data)
|
||||
@ -83,9 +83,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arr1.push(arrInner);
|
||||
tempData[0].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.input.push(item.inputNum);
|
||||
tempData[0].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -99,9 +99,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -115,9 +115,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine2Before} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function CenterDown() {
|
||||
const data = useAppSelector(selectLine2Before);
|
||||
// 假数据
|
||||
@ -56,7 +56,7 @@ function CenterDown() {
|
||||
let arrInner = []
|
||||
arrInner.push(
|
||||
index+1,
|
||||
moment(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
item.name,
|
||||
item.status === '故障'?"<span style='color:#FF1E1E'>故障</span>":"<span style='color:#FFB40F'>离线</span>",
|
||||
);
|
||||
@ -72,7 +72,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.day.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -102,7 +102,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.week.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -132,7 +132,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.month.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChartRight/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine2Before} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function RightDown() {
|
||||
const data = useAppSelector(selectLine2Before);
|
||||
// console.log('页面数据：',data)
|
||||
@ -83,9 +83,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arr1.push(arrInner);
|
||||
tempData[0].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.input.push(item.inputNum);
|
||||
tempData[0].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -99,9 +99,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -115,9 +115,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine2After} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function CenterDown() {
|
||||
const data = useAppSelector(selectLine2After);
|
||||
// 假数据
|
||||
@ -56,7 +56,7 @@ function CenterDown() {
|
||||
let arrInner = []
|
||||
arrInner.push(
|
||||
index+1,
|
||||
moment(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
item.name,
|
||||
item.status === '故障'?"<span style='color:#FF1E1E'>故障</span>":"<span style='color:#FFB40F'>离线</span>",
|
||||
);
|
||||
@ -72,7 +72,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.day.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -102,7 +102,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.week.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -132,7 +132,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.month.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChartRight/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine2After} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function RightDown() {
|
||||
const data = useAppSelector(selectLine2After);
|
||||
// console.log('页面数据：',data)
|
||||
@ -83,9 +83,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arr1.push(arrInner);
|
||||
tempData[0].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.input.push(item.inputNum);
|
||||
tempData[0].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -99,9 +99,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -115,9 +115,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine3Before} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function CenterDown() {
|
||||
const data = useAppSelector(selectLine3Before);
|
||||
// 假数据
|
||||
@ -56,7 +56,7 @@ function CenterDown() {
|
||||
let arrInner = []
|
||||
arrInner.push(
|
||||
index+1,
|
||||
moment(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
item.name,
|
||||
item.status === '故障'?"<span style='color:#FF1E1E'>故障</span>":"<span style='color:#FFB40F'>离线</span>",
|
||||
);
|
||||
@ -72,7 +72,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.day.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -102,7 +102,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.week.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -132,7 +132,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.month.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChartRight/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine3Before} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function RightDown() {
|
||||
const data = useAppSelector(selectLine3Before);
|
||||
// 假数据
|
||||
@ -82,9 +82,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arr1.push(arrInner);
|
||||
tempData[0].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.input.push(item.inputNum);
|
||||
tempData[0].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -98,9 +98,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -114,9 +114,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine3After} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function CenterDown() {
|
||||
const data = useAppSelector(selectLine3After);
|
||||
// 假数据
|
||||
@ -56,7 +56,7 @@ function CenterDown() {
|
||||
let arrInner = []
|
||||
arrInner.push(
|
||||
index+1,
|
||||
moment(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
item.name,
|
||||
item.status === '故障'?"<span style='color:#FF1E1E'>故障</span>":"<span style='color:#FFB40F'>离线</span>",
|
||||
);
|
||||
@ -72,7 +72,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.day.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -102,7 +102,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.week.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -132,7 +132,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.month.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChartRight/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine3After} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function RightDown() {
|
||||
const data = useAppSelector(selectLine3After);
|
||||
// console.log('页面数据：',data)
|
||||
@ -83,9 +83,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arr1.push(arrInner);
|
||||
tempData[0].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.input.push(item.inputNum);
|
||||
tempData[0].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -99,9 +99,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -115,9 +115,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine4Before} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function CenterDown() {
|
||||
const data = useAppSelector(selectLine4Before);
|
||||
// 假数据
|
||||
@ -56,7 +56,7 @@ function CenterDown() {
|
||||
let arrInner = []
|
||||
arrInner.push(
|
||||
index+1,
|
||||
moment(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
item.name,
|
||||
item.status === '故障'?"<span style='color:#FF1E1E'>故障</span>":"<span style='color:#FFB40F'>离线</span>",
|
||||
);
|
||||
@ -72,7 +72,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.day.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -102,7 +102,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.week.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -132,7 +132,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.month.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChartRight/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine4Before} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function RightDown() {
|
||||
const data = useAppSelector(selectLine4Before);
|
||||
// console.log('页面数据：',data)
|
||||
@ -83,9 +83,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arr1.push(arrInner);
|
||||
tempData[0].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.input.push(item.inputNum);
|
||||
tempData[0].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -99,9 +99,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -115,9 +115,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine4After} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function CenterDown() {
|
||||
const data = useAppSelector(selectLine4After);
|
||||
// 假数据
|
||||
@ -56,7 +56,7 @@ function CenterDown() {
|
||||
let arrInner = []
|
||||
arrInner.push(
|
||||
index+1,
|
||||
moment(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
item.name,
|
||||
item.status === '故障'?"<span style='color:#FF1E1E'>故障</span>":"<span style='color:#FFB40F'>离线</span>",
|
||||
);
|
||||
@ -72,7 +72,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.day.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -102,7 +102,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.week.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -132,7 +132,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.month.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChartRight/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine4After} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function RightDown() {
|
||||
const data = useAppSelector(selectLine4After);
|
||||
// console.log('页面数据：',data)
|
||||
@ -83,9 +83,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arr1.push(arrInner);
|
||||
tempData[0].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.input.push(item.inputNum);
|
||||
tempData[0].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -99,9 +99,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -115,9 +115,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine5Before} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function CenterDown() {
|
||||
const data = useAppSelector(selectLine5Before);
|
||||
// 假数据
|
||||
@ -56,7 +56,7 @@ function CenterDown() {
|
||||
let arrInner = []
|
||||
arrInner.push(
|
||||
index+1,
|
||||
moment(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
item.name,
|
||||
item.status === '故障'?"<span style='color:#FF1E1E'>故障</span>":"<span style='color:#FFB40F'>离线</span>",
|
||||
);
|
||||
@ -72,7 +72,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.day.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -102,7 +102,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.week.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -132,7 +132,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.month.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChartRight/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine5Before} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function RightDown() {
|
||||
const data = useAppSelector(selectLine5Before);
|
||||
// console.log('页面数据：',data)
|
||||
@ -83,9 +83,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arr1.push(arrInner);
|
||||
tempData[0].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.input.push(item.inputNum);
|
||||
tempData[0].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -99,9 +99,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -115,9 +115,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine5After} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function CenterDown() {
|
||||
const data = useAppSelector(selectLine5After);
|
||||
// 假数据
|
||||
@ -56,7 +56,7 @@ function CenterDown() {
|
||||
let arrInner = []
|
||||
arrInner.push(
|
||||
index+1,
|
||||
moment(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
item.name,
|
||||
item.status === '故障'?"<span style='color:#FF1E1E'>故障</span>":"<span style='color:#FFB40F'>离线</span>",
|
||||
);
|
||||
@ -72,7 +72,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.day.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -102,7 +102,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.week.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
@ -132,7 +132,7 @@ function CenterDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.month.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
|
||||
@ -6,7 +6,7 @@ import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChartRight/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine5After} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
import dayjs from "dayjs";
|
||||
function RightDown() {
|
||||
const data = useAppSelector(selectLine5After);
|
||||
// 假数据
|
||||
@ -82,9 +82,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.todayProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arr1.push(arrInner);
|
||||
tempData[0].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.input.push(item.inputNum);
|
||||
tempData[0].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -98,9 +98,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.weekProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
@ -114,9 +114,9 @@ function RightDown() {
|
||||
// @ts-ignore
|
||||
data.monthProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
|
||||
BIN
src/page/assets/blue-box.png
Normal file
BIN
src/page/assets/blue-box.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/page/assets/yellow-box.png
Normal file
BIN
src/page/assets/yellow-box.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
30
src/store/LeaderPageSlice.ts
Normal file
30
src/store/LeaderPageSlice.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
import type { RootState } from "./store";
|
||||
interface allLineInterface {
|
||||
lastMonthMap:{},
|
||||
lastYearMap:{},
|
||||
monthMap:{},
|
||||
numAlarm?:number,
|
||||
numDet:[],
|
||||
todayMap:{},
|
||||
yearMap:{},
|
||||
yesterdayMap:{}
|
||||
}
|
||||
const initialState = {
|
||||
allLine:{} as allLineInterface
|
||||
};
|
||||
export const LeaderPageSlice = createSlice({
|
||||
name: "LeaderPageSlice",
|
||||
initialState,
|
||||
reducers: {
|
||||
UpdateAllLine: (state, action) => {
|
||||
state.allLine = action.payload;
|
||||
}
|
||||
}
|
||||
})
|
||||
export const {
|
||||
UpdateAllLine
|
||||
} = LeaderPageSlice.actions;
|
||||
export const selectAllLine = (state: RootState) =>
|
||||
state.LeaderPageSlice.allLine;
|
||||
export default LeaderPageSlice.reducer;
|
||||
@ -14,6 +14,7 @@ import {
|
||||
UpdateLine5Before,
|
||||
UpdateLine5After
|
||||
} from "./LinePageSlice"
|
||||
import { UpdateAllLine } from "./LeaderPageSlice"
|
||||
// let initLineGlassStatus: Object = {
|
||||
// LINE_1_1: 1,
|
||||
// LINE_1_2U: 1,
|
||||
@ -82,9 +83,17 @@ function UpdateData() {
|
||||
let websocket5_2 = null;
|
||||
const dispatch = useAppDispatch();
|
||||
// 测试接口开始===================
|
||||
// console.log(myUrl)
|
||||
// axios.defaults.headers.common['Authorization'] = 'Bearer test1';
|
||||
// axios.defaults.headers.common['tenant-id'] = 1;
|
||||
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));
|
||||
@ -131,6 +140,7 @@ function UpdateData() {
|
||||
// )
|
||||
// 测试接口结束====================
|
||||
if ('WebSocket' in window) {
|
||||
// websocketAllLine = new WebSocket("ws://" + myUrl + "/admin-api/monitoring/ViewController/driveMonitoring");
|
||||
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");
|
||||
@ -296,9 +306,9 @@ function UpdateData() {
|
||||
if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||
dispatch(UpdateLine5After(msgData));
|
||||
}
|
||||
return (
|
||||
null
|
||||
)
|
||||
// return (
|
||||
// null
|
||||
// )
|
||||
}
|
||||
|
||||
export default UpdateData;
|
||||
@ -9,6 +9,7 @@ import ChangeSwitchStateReducer from "./ChangeSwitchState"
|
||||
import EquStatusEntityReducer, {EquStatusEntity} from "./EquStatusEntity"
|
||||
|
||||
import LinePageReducer from "./LinePageSlice"
|
||||
import LeaderPageReducer from './LeaderPageSlice';
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
@ -21,6 +22,7 @@ export const store = configureStore({
|
||||
ChangeSwitchState: ChangeSwitchStateReducer,
|
||||
EquStatusEntity: EquStatusEntityReducer,
|
||||
LinePageSlice: LinePageReducer,
|
||||
LeaderPageSlice: LeaderPageReducer
|
||||
},
|
||||
})
|
||||
;
|
||||
|
||||
56
src/utils/index.ts
Normal file
56
src/utils/index.ts
Normal file
@ -0,0 +1,56 @@
|
||||
/**
|
||||
* 将数字或字符串数字转换成每3位加一个逗号的格式
|
||||
* @param {number | string} num - 需要格式化的数字或字符串数字
|
||||
* @returns {string} - 格式化后的字符串
|
||||
*/
|
||||
export const formatNumberWithCommas = (num: number | string): string => {
|
||||
// 将输入转换为字符串
|
||||
const numStr = num.toString();
|
||||
|
||||
// 使用正则表达式来匹配每3位数字，并在其前面添加逗号
|
||||
// 注意：这里使用了正向前瞻(?=...)来确保逗号不会加在数字的开头
|
||||
return numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
};
|
||||
|
||||
/**
|
||||
* 将字符串解析为数字，并最多保留两位小数
|
||||
* @param {string} str - 需要解析的字符串
|
||||
* @param {boolean} [returnAsNumber=false] - 如果为 true，则返回数字类型；否则返回字符串类型
|
||||
* @returns {string | number} - 解析并格式化后的数字，根据 returnAsNumber 参数返回字符串或数字
|
||||
* @throws {Error} - 如果输入字符串不是有效的数字表示
|
||||
*/
|
||||
export const parseAndFormatStringToTwoDecimalPlaces = (str: string, returnAsNumber?: boolean): string | number => {
|
||||
// 尝试将字符串解析为数字
|
||||
const num = parseFloat(str);
|
||||
|
||||
// 检查解析是否成功
|
||||
if (isNaN(num)) {
|
||||
throw new Error('Input string is not a valid number');
|
||||
}
|
||||
|
||||
// 使用 toFixed 方法将数字格式化为最多两位小数的字符串
|
||||
const formattedStr = num.toFixed(2);
|
||||
|
||||
// 如果要求返回数字类型，则使用 parseFloat 转换字符串（尽管这里已经是数字了，但为了一致性还是转一下）
|
||||
if (returnAsNumber) {
|
||||
return parseFloat(formattedStr);
|
||||
}
|
||||
|
||||
// 默认返回字符串类型
|
||||
return formattedStr;
|
||||
};
|
||||
|
||||
// 使用示例
|
||||
try {
|
||||
const formattedStr = parseAndFormatStringToTwoDecimalPlaces("123.45678");
|
||||
const formattedNum = parseAndFormatStringToTwoDecimalPlaces("987.654321", true);
|
||||
console.log(formattedStr); // 输出: "123.46"
|
||||
console.log(formattedNum); // 输出: 987.65
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user