1

2024-12-06 17:22:49 +08:00
parent e8ca7d16ee
commit 128b362587
42 changed files with 8534 additions and 18047 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -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",
--- a/public/wsconfig.json
+++ b/public/wsconfig.json
@@ -1,3 +1,3 @@
 {
-  "url": "192.168.1.45:48080"
+  "url": "172.16.32.40:480080"
 }
--- a/src/App.tsx
+++ b/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?",
--- a/src/babylonjs/AllLinePageBabylon.tsx
+++ b/src/babylonjs/AllLinePageBabylon.tsx
@@ -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;
--- a/src/page/Component/BarLineChart/chart.config.ts
+++ b/src/page/Component/BarLineChart/chart.config.ts
@@ -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',
--- a/src/page/LDPage/Center/CenterDown.tsx
+++ b/src/page/LDPage/Center/CenterDown.tsx
@@ -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>
--- a/src/page/LDPage/Center/CenterUp.tsx
+++ b/src/page/LDPage/Center/CenterUp.tsx
@@ -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>
  )
 }
--- a/src/page/LDPage/Component/NumberBox/index.tsx
+++ b/src/page/LDPage/Component/NumberBox/index.tsx
@@ -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>
  )
 }
--- a/src/page/LDPage/Component/pieChart/chart.config.ts
+++ b/src/page/LDPage/Component/pieChart/chart.config.ts
@@ -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,
--- a/src/page/LDPage/Left/LeftDown.tsx
+++ b/src/page/LDPage/Left/LeftDown.tsx
@@ -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>
  )
 }
--- a/src/page/LDPage/Left/LeftUp.tsx
+++ b/src/page/LDPage/Left/LeftUp.tsx
@@ -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>
--- a/src/page/LDPage/Right/RightDown.tsx
+++ b/src/page/LDPage/Right/RightDown.tsx
@@ -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>
--- a/src/page/LDPage/Right/RightUp.tsx
+++ b/src/page/LDPage/Right/RightUp.tsx
@@ -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>
--- a/src/page/LDPage/TopP.tsx
+++ b/src/page/LDPage/TopP.tsx
@@ -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>
--- a/src/page/LDPage/index.css
+++ b/src/page/LDPage/index.css
@@ -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;
 }
--- a/src/page/LinePage1-1/Center/CenterDown.tsx
+++ b/src/page/LinePage1-1/Center/CenterDown.tsx
@@ -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 = {
--- a/src/page/LinePage1-1/Right/RightDown.tsx
+++ b/src/page/LinePage1-1/Right/RightDown.tsx
@@ -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);
    })
--- a/src/page/LinePage1-2/Center/CenterDown.tsx
+++ b/src/page/LinePage1-2/Center/CenterDown.tsx
@@ -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 = {
--- a/src/page/LinePage1-2/Right/RightDown.tsx
+++ b/src/page/LinePage1-2/Right/RightDown.tsx
@@ -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);
    })
--- a/src/page/LinePage2-1/Center/CenterDown.tsx
+++ b/src/page/LinePage2-1/Center/CenterDown.tsx
@@ -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 = {
--- a/src/page/LinePage2-1/Right/RightDown.tsx
+++ b/src/page/LinePage2-1/Right/RightDown.tsx
@@ -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);
    })
--- a/src/page/LinePage2-2/Center/CenterDown.tsx
+++ b/src/page/LinePage2-2/Center/CenterDown.tsx
@@ -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 = {
--- a/src/page/LinePage2-2/Right/RightDown.tsx
+++ b/src/page/LinePage2-2/Right/RightDown.tsx
@@ -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);
    })
--- a/src/page/LinePage3-1/Center/CenterDown.tsx
+++ b/src/page/LinePage3-1/Center/CenterDown.tsx
@@ -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 = {
--- a/src/page/LinePage3-1/Right/RightDown.tsx
+++ b/src/page/LinePage3-1/Right/RightDown.tsx
@@ -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);
    })
--- a/src/page/LinePage3-2/Center/CenterDown.tsx
+++ b/src/page/LinePage3-2/Center/CenterDown.tsx
@@ -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 = {
--- a/src/page/LinePage3-2/Right/RightDown.tsx
+++ b/src/page/LinePage3-2/Right/RightDown.tsx
@@ -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);
    })
--- a/src/page/LinePage4-1/Center/CenterDown.tsx
+++ b/src/page/LinePage4-1/Center/CenterDown.tsx
@@ -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 = {
--- a/src/page/LinePage4-1/Right/RightDown.tsx
+++ b/src/page/LinePage4-1/Right/RightDown.tsx
@@ -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);
    })
--- a/src/page/LinePage4-2/Center/CenterDown.tsx
+++ b/src/page/LinePage4-2/Center/CenterDown.tsx
@@ -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 = {
--- a/src/page/LinePage4-2/Right/RightDown.tsx
+++ b/src/page/LinePage4-2/Right/RightDown.tsx
@@ -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);
    })
--- a/src/page/LinePage5-1/Center/CenterDown.tsx
+++ b/src/page/LinePage5-1/Center/CenterDown.tsx
@@ -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 = {
--- a/src/page/LinePage5-1/Right/RightDown.tsx
+++ b/src/page/LinePage5-1/Right/RightDown.tsx
@@ -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);
    })
--- a/src/page/LinePage5-2/Center/CenterDown.tsx
+++ b/src/page/LinePage5-2/Center/CenterDown.tsx
@@ -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 = {
--- a/src/page/LinePage5-2/Right/RightDown.tsx
+++ b/src/page/LinePage5-2/Right/RightDown.tsx
@@ -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);
    })
--- a/src/page/assets/blue-box.png
+++ b/src/page/assets/blue-box.png
--- a/src/page/assets/yellow-box.png
+++ b/src/page/assets/yellow-box.png
--- a/src/store/LeaderPageSlice.ts
+++ b/src/store/LeaderPageSlice.ts
@@ -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;
--- a/src/store/UpdateData.tsx
+++ b/src/store/UpdateData.tsx
@@ -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;
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -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
    },
  })
 ;
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -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);
+}
+
+
+
+
+