update 当前产线生产规格

src/components/Common/CurrentLineSpec/index.jsx

@@ -1,36 +1,128 @@
 import BottomBarItem from "../BottomItemBackground";
-import React, { Component } from "react";
 import cls from "./righttable.module.scss";
-
+import { useSelector } from "react-redux";
 import { ScrollBoard } from "@jiaminghi/data-view-react";
 
-let data = [
+function Chart1(props) {
-  ["产线0", "10mm", "10mm", "10mm"],
+  const rawData = useSelector((state) => state.cutting.productData);
-  ["产线2", "8mm", "8mm", "8mm"],
+
-  ["产线3", "15mm", "15mm", "15mm"],
+  let config = {
-  ["产线4", "15mm", "15mm", "15mm"],
+    // headerBGC: "rgba(4, 44, 76, 0.3)",
-  ["产线42", "15mm", "15mm", "15mm"],
+    headerBGC: "#044A8460",
-  ["产线5", "15mm", "15mm", "15mm"],
+    header: [
-  ["产线6", "15mm", "15mm", "15mm"],
+      '<span style="color:#fff; padding-left: 8px;">产线名<span/>',
+      '<span style="color:#fff; padding-left: 8px;">原板宽度<span/>',
+      '<span style="color:#fff; padding-left: 8px;">净板宽<span/>',
+      '<span style="color:#fff; padding-left: 8px;">玻璃厚度<span/>',
+    ],
+    // oddRowBGC: "#042444",
+    // evenRowBGC: "#042c4c",
+    oddRowBGC: "#044A8460",
+    evenRowBGC: "#0b549970",
+    columnWidth: [128],
+    headerHeight: 40,
+    hoverPause: false,
+    data: replaceStyle(filterData(rawData), 0.7),
+  };
+
+  return (
+    <BottomBarItem
+      icon="pause"
+      title="当前产线生产规格"
+      className={props.className}
+      style={props.style}
+    >
+      <div
+        className={cls.CenterChart1itemDetailBorder}
+        style={{ paddingTop: "6px" }}
+      >
+        <span className={cls.CenterFormitemDetailBorderLine1}></span>
+        <span className={cls.CenterFormitemDetailBorderLine2}></span>
+        <span className={cls.CenterFormitemDetailBorderLine3}></span>
+        <ScrollBoard config={config} style={{}} />
+      </div>
+    </BottomBarItem>
+  );
+}
+
+export default Chart1;
+
+// 测试数据
+var rawData = [
+  {
+    id: 1,
+    length: 1209,
+    productionLine: "Y61",
+    square: 123.3,
+    thick: 2,
+    wide: 1089,
+  },
+  {
+    id: 2,
+    length: 1119,
+    productionLine: "Y62",
+    square: 103.3,
+    thick: 2,
+    wide: 1339,
+  },
+  {
+    id: 3,
+    length: 1019,
+    productionLine: "Y63",
+    square: 233,
+    thick: 1,
+    wide: 1111,
+  },
+  {
+    id: 4,
+    length: 2000,
+    productionLine: "Y64",
+    square: 233,
+    thick: 1,
+    wide: 1232,
+  },
+  {
+    id: 5,
+    length: 1560,
+    productionLine: "Y65",
+    square: 233,
+    thick: 1,
+    wide: 996,
+  },
+  {
+    id: 6,
+    length: 1990,
+    productionLine: "Y66",
+    square: 233,
+    thick: 1,
+    wide: 416,
+  },
 ];
 
-let header = ["产线名", "原板宽度", "净板宽", "玻璃厚度"];
+function filterData(rawData) {
+  return (rawData ?? []).map((item) => [
+    // 产线名
+    item.productionLine,
+    // 原板宽度
+    item.length,
+    // 净板宽
+    item.wide,
+    // 玻璃厚度
+    item.thick,
+  ]);
+}
 
-let config = {
+// let data = [
-  headerBGC: "rgba(4, 44, 76, 0.3)",
+//   ["产线0", "10mm", "10mm", "10mm"],
-  header: [
+//   ["产线2", "8mm", "8mm", "8mm"],
-    '<span style="color:#fff">产线名<span/>',
+//   ["产线3", "15mm", "15mm", "15mm"],
-    '<span style="color:#fff">原板宽度<span/>',
+//   ["产线4", "15mm", "15mm", "15mm"],
-    '<span style="color:#fff">净板宽<span/>',
+//   ["产线42", "15mm", "15mm", "15mm"],
-    '<span style="color:#fff">玻璃厚度<span/>',
+//   ["产线5", "15mm", "15mm", "15mm"],
-  ],
+//   ["产线6", "15mm", "15mm", "15mm"],
-  oddRowBGC: "#042444",
+// ];
-  evenRowBGC: "#042c4c",
+
-  columnWidth: [128],
+// let header = ["产线名", "原板宽度", "净板宽", "玻璃厚度"];
-  headerHeight: 40,
-  hoverPause: false,
-  data: replaceStyle(data, 0.7),
-};
 
 function replaceStyle(Arr, opencity) {
   let temp = [];
@@ -38,36 +130,11 @@ function replaceStyle(Arr, opencity) {
   for (let i = 0; i < Arr.length; i++) {
     temp[i] = [];
     for (let j = 0; j < Arr[i].length; j++) {
-      temp[i][
+      temp[i][j] = `<span style="color:rgba(255, 255, 255,${opencity})">${
-        j
+        Arr[i][j]
-      ] = ` <span style="color:rgba(255, 255, 255,${opencity})">${Arr[i][j]}<span/>`;
+      } ${j == 0 ? "" : "mm"}<span/>`;
     }
   }
 
   return temp;
 }
-
-class Chart1 extends Component {
-  render() {
-    return (
-      <BottomBarItem
-        icon="pause"
-        title="当前产线生产规格"
-        className={this.props.className}
-        style={Object.assign(this.props.style, { filter: "grayscale(100%)" })}
-      >
-        <div
-          className={cls.CenterChart1itemDetailBorder}
-          style={{ paddingTop: "6px" }}
-        >
-          <span className={cls.CenterFormitemDetailBorderLine1}></span>
-          <span className={cls.CenterFormitemDetailBorderLine2}></span>
-          <span className={cls.CenterFormitemDetailBorderLine3}></span>
-          <ScrollBoard config={config} style={{}} />
-        </div>
-      </BottomBarItem>
-    );
-  }
-}
-
-export default Chart1;

src/components/Common/TodayFaultTotal/index.jsx

@@ -19,7 +19,7 @@ function FaultTotal(props) {
       ? isra.yearStatistic
       : [];
 
-  const series = preHandleStatisticData(currentStatistic, isra.checkType);
+  const series = preHandleStatisticData(currentStatistic, isra.checkType ?? []);
   const options = getOptions(series, isra, currentStatistic);
 
   function handleDateChange(v) {

src/components/Modules/Home/CenterTop/RightTable/index.jsx

@@ -1,32 +1,105 @@
-import React, { Component } from "react";
+import cls from "./righttable.module.scss";
-import "./righttable.module.scss";
+import { ScrollBoard } from "@jiaminghi/data-view-react";
+import { useSelector } from "react-redux";
 
-// import { ScrollBoard } from '@jiaminghi/data-view-react';
+function CurrentSpec(props) {
+  const rawData = useSelector((state) => state.cutting.productData);
+  let config = {
+    // headerBGC: "rgba(4, 44, 76, 0.3)",
+    headerBGC: "#044A8460",
+    header: [
+      '<span style="color:#fff; padding-left: 8px;">产线名<span/>',
+      '<span style="color:#fff; padding-left: 8px;">原板宽度<span/>',
+      '<span style="color:#fff; padding-left: 8px;">净板宽<span/>',
+      '<span style="color:#fff; padding-left: 8px;">玻璃厚度<span/>',
+    ],
+    // oddRowBGC: "#042444",
+    // evenRowBGC: "#042c4c",
+    oddRowBGC: "#044A8460",
+    evenRowBGC: "#0b549970",
+    columnWidth: [90],
+    rowNum: 3,
+    hoverPause: true,
+    headerHeight: 40,
+    data: replaceStyle(filterData(rawData), 0.8),
+  };
 
-let data = [
+  return (
-  ["产线0", "10mm", "10mm", "10mm"],
+    <div className={cls.CenterChart1itemDetailBorder} style={{ opacity: 0.75 }}>
-  ["产线2", "8mm", "8mm", "8mm"],
+      <h2 className={cls.CenterChart1itemTXT}>当前产线生产规格</h2>
-  ["产线3", "15mm", "15mm", "15mm"],
+      <div className={cls.TableContainer}>
-  ["产线4", "15mm", "15mm", "15mm"],
+        <ScrollBoard config={config} />
+      </div>
+    </div>
+  );
+}
+
+export default CurrentSpec;
+
+// 测试数据
+var rawData = [
+  {
+    id: 1,
+    length: 1209,
+    productionLine: "Y61",
+    square: 123.3,
+    thick: 2,
+    wide: 1089,
+  },
+  {
+    id: 2,
+    length: 1119,
+    productionLine: "Y62",
+    square: 103.3,
+    thick: 2,
+    wide: 1339,
+  },
+  {
+    id: 3,
+    length: 1019,
+    productionLine: "Y63",
+    square: 233,
+    thick: 1,
+    wide: 1111,
+  },
+  {
+    id: 4,
+    length: 2000,
+    productionLine: "Y64",
+    square: 233,
+    thick: 1,
+    wide: 1232,
+  },
+  {
+    id: 5,
+    length: 1560,
+    productionLine: "Y65",
+    square: 233,
+    thick: 1,
+    wide: 996,
+  },
+  {
+    id: 6,
+    length: 1990,
+    productionLine: "Y66",
+    square: 233,
+    thick: 1,
+    wide: 416,
+  },
 ];
 
-let header = ["产线名", "原板宽度", "净板宽", "玻璃厚度"];
+function filterData(rawData) {
-
+  return (rawData ?? []).map((item) => [
-let config = {
+    // 产线名
-  headerBGC: "rgba(4, 44, 76, 0.3)",
+    item.productionLine,
-  header: [
+    // 原板宽度
-    '<span style="color:#fff">产线名<span/>',
+    item.length,
-    '<span style="color:#fff">原板宽度<span/>',
+    // 净板宽
-    '<span style="color:#fff">净板宽<span/>',
+    item.wide,
-    '<span style="color:#fff">玻璃厚度<span/>',
+    // 玻璃厚度
-  ],
+    item.thick,
-  oddRowBGC: "#042444",
+  ]);
-  evenRowBGC: "#042c4c",
+}
-  columnWidth: [90],
-  headerHeight: 40,
-  hoverPause: false,
-  data: replaceStyle(data, 0.7),
-};
 
 function replaceStyle(Arr, opencity) {
   let temp = [];
@@ -34,32 +107,11 @@ function replaceStyle(Arr, opencity) {
   for (let i = 0; i < Arr.length; i++) {
     temp[i] = [];
     for (let j = 0; j < Arr[i].length; j++) {
-      temp[i][
+      temp[i][j] = `<span style="color:rgba(255, 255, 255,${opencity})">${
-        j
+        Arr[i][j]
-      ] = ` <span style="color:rgba(255, 255, 255,${opencity})">${Arr[i][j]}<span/>`;
+      } ${j == 0 ? "" : "mm"}<span/>`;
     }
   }
 
   return temp;
 }
-
-class Chart1 extends Component {
-  render() {
-    return (
-      <div className="CenterChart1itemDetailBorder" style={{ opacity: 0.75 }}>
-        <h2 className="CenterChart1itemTXT"> 当前产线生产规格</h2>
-        <div className="CenterChart1itemContainer">
-          <span className="CenterFormitemDetailBorderLine1"></span>
-          <span className="CenterFormitemDetailBorderLine2"></span>
-          <span className="CenterFormitemDetailBorderLine3"></span>
-          {/* <ScrollBoard
-						config={config}
-						style={{ width: '105%', height: '240%' }}
-					/> */}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Chart1;

src/components/Modules/Home/CenterTop/RightTable/righttable.module.scss

@@ -1,50 +1,23 @@
 .CenterChart1itemDetailBorder {
-	width: 100%;
+  width: 100%;
-	height: 240px;
+  height: 200px;
-	display: flex;
+  display: flex;
-	flex-direction: column;
+  flex-direction: column;
-	justify-content: flex-start;
+  justify-content: flex-start;
+  color: #fff;
+  background-color: rgba(4, 44, 76, 0.2);
 
-	background-color: rgba(4, 44, 76, 0.2);
+  .CenterChart1itemTXT {
-	.CenterChart1itemTXT {
+    user-select: none;
-		width: 100%;
+    padding: 8px 0;
-		height: 10%;
+    font-size: 18px;
-		font-size: 20px;
+    font-weight: 400;
-		color: rgba(255, 255, 255, 0.8);
+    letter-spacing: 1px;
-		text-align: center;
+    color: rgba(255, 255, 255, 0.9);
-		margin-top: 2%;
+    text-align: center;
-	}
+  }
-	.CenterChart1itemContainer {
-		width: 95%;
-		height: 100px;
-		position: relative;
 
-		.CenterFormitemDetailBorderLine1 {
+  .TableContainer {
-			width: 1px;
+    flex: 1;
-			height: 200px;
+  }
-			background-color: #041c2c;
-			float: left;
-			margin-left: 18%;
-			z-index: 10;
-			position: absolute;
-		}
-		.CenterFormitemDetailBorderLine2 {
-			width: 1px;
-			height: 200px;
-			background-color: #041c2c;
-			float: left;
-			margin-left: 46%;
-			z-index: 10;
-			position: absolute;
-		}
-		.CenterFormitemDetailBorderLine3 {
-			width: 1px;
-			height: 200px;
-			background-color: #041c2c;
-			float: left;
-			margin-left: 72%;
-			z-index: 10;
-			position: absolute;
-		}
-	}
 }

src/components/Modules/Home/CenterTop/index.jsx

@@ -11,9 +11,9 @@ export default function index() {
 				<div className={cls.leftGrid}>
 					<Item1 />
 				</div>
-				{/* <div className={cls.rightTable}>
+				<div className={cls.rightTable}>
 					<Item2 />
-				</div> */}
+				</div>
 			</div>
 		</>
 	);

src/store/features/cuttingSlice.js

@@ -2,6 +2,7 @@ import { createSlice } from "@reduxjs/toolkit";
 
 export const initialState = {
   table: [],
+  productData: [],
   chart: {
     year: [],
     week: [],
@@ -15,8 +16,9 @@ const cuttingSlice = createSlice({
   initialState,
   reducers: {
     setCuttingTable: (state, action) => {
-      console.log("setting cuttting table...");
+      if ("data" in action.payload) state.table = action.payload.data;
-      state.table = action.payload;
+      if ("productData" in action.payload)
+        state.productData = action.payload.productData;
     },
     setCuttingChart: (state, action) => {
       switch (action.payload.dateType) {

src/utils/index.ts

@@ -293,7 +293,7 @@ new XClient(
       case "table":
         store.dispatch({
           type: "cutting/setCuttingTable",
-          payload: serializedData.data,
+          payload: serializedData,
         });
         break;
       case "chart":