update 当前产线生产规格

2023-12-28 10:14:14 +08:00
parent b57b65ffd4
commit c2802627d6
7 changed files with 249 additions and 155 deletions
--- a/src/components/Common/CurrentLineSpec/index.jsx
+++ b/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 = [
-  ["产线0", "10mm", "10mm", "10mm"],
-  ["产线2", "8mm", "8mm", "8mm"],
-  ["产线3", "15mm", "15mm", "15mm"],
-  ["产线4", "15mm", "15mm", "15mm"],
-  ["产线42", "15mm", "15mm", "15mm"],
-  ["产线5", "15mm", "15mm", "15mm"],
-  ["产线6", "15mm", "15mm", "15mm"],
+function Chart1(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: [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 = {
-  headerBGC: "rgba(4, 44, 76, 0.3)",
-  header: [
-    '<span style="color:#fff">产线名<span/>',
-    '<span style="color:#fff">原板宽度<span/>',
-    '<span style="color:#fff">净板宽<span/>',
-    '<span style="color:#fff">玻璃厚度<span/>',
-  ],
-  oddRowBGC: "#042444",
-  evenRowBGC: "#042c4c",
-  columnWidth: [128],
-  headerHeight: 40,
-  hoverPause: false,
-  data: replaceStyle(data, 0.7),
-};
+// let data = [
+//   ["产线0", "10mm", "10mm", "10mm"],
+//   ["产线2", "8mm", "8mm", "8mm"],
+//   ["产线3", "15mm", "15mm", "15mm"],
+//   ["产线4", "15mm", "15mm", "15mm"],
+//   ["产线42", "15mm", "15mm", "15mm"],
+//   ["产线5", "15mm", "15mm", "15mm"],
+//   ["产线6", "15mm", "15mm", "15mm"],
+// ];
+
+// let header = ["产线名", "原板宽度", "净板宽", "玻璃厚度"];

 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][
-        j
-      ] = ` <span style="color:rgba(255, 255, 255,${opencity})">${Arr[i][j]}<span/>`;
+      temp[i][j] = `<span style="color:rgba(255, 255, 255,${opencity})">${
+        Arr[i][j]
+      } ${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;
--- a/src/components/Common/TodayFaultTotal/index.jsx
+++ b/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) {
--- a/src/components/Modules/Home/CenterTop/RightTable/index.jsx
+++ b/src/components/Modules/Home/CenterTop/RightTable/index.jsx
@@ -1,32 +1,105 @@
-import React, { Component } from "react";
-import "./righttable.module.scss";
+import cls from "./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 = [
-  ["产线0", "10mm", "10mm", "10mm"],
-  ["产线2", "8mm", "8mm", "8mm"],
-  ["产线3", "15mm", "15mm", "15mm"],
-  ["产线4", "15mm", "15mm", "15mm"],
+  return (
+    <div className={cls.CenterChart1itemDetailBorder} style={{ opacity: 0.75 }}>
+      <h2 className={cls.CenterChart1itemTXT}>当前产线生产规格</h2>
+      <div className={cls.TableContainer}>
+        <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 = ["产线名", "原板宽度", "净板宽", "玻璃厚度"];
-
-let config = {
-  headerBGC: "rgba(4, 44, 76, 0.3)",
-  header: [
-    '<span style="color:#fff">产线名<span/>',
-    '<span style="color:#fff">原板宽度<span/>',
-    '<span style="color:#fff">净板宽<span/>',
-    '<span style="color:#fff">玻璃厚度<span/>',
-  ],
-  oddRowBGC: "#042444",
-  evenRowBGC: "#042c4c",
-  columnWidth: [90],
-  headerHeight: 40,
-  hoverPause: false,
-  data: replaceStyle(data, 0.7),
-};
+function filterData(rawData) {
+  return (rawData ?? []).map((item) => [
+    // 产线名
+    item.productionLine,
+    // 原板宽度
+    item.length,
+    // 净板宽
+    item.wide,
+    // 玻璃厚度
+    item.thick,
+  ]);
+}

 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][
-        j
-      ] = ` <span style="color:rgba(255, 255, 255,${opencity})">${Arr[i][j]}<span/>`;
+      temp[i][j] = `<span style="color:rgba(255, 255, 255,${opencity})">${
+        Arr[i][j]
+      } ${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;
--- a/src/components/Modules/Home/CenterTop/RightTable/righttable.module.scss
+++ b/src/components/Modules/Home/CenterTop/RightTable/righttable.module.scss
@@ -1,50 +1,23 @@
 .CenterChart1itemDetailBorder {
-	width: 100%;
-	height: 240px;
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
+  width: 100%;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  color: #fff;
+  background-color: rgba(4, 44, 76, 0.2);

-	background-color: rgba(4, 44, 76, 0.2);
-	.CenterChart1itemTXT {
-		width: 100%;
-		height: 10%;
-		font-size: 20px;
-		color: rgba(255, 255, 255, 0.8);
-		text-align: center;
-		margin-top: 2%;
-	}
-	.CenterChart1itemContainer {
-		width: 95%;
-		height: 100px;
-		position: relative;
+  .CenterChart1itemTXT {
+    user-select: none;
+    padding: 8px 0;
+    font-size: 18px;
+    font-weight: 400;
+    letter-spacing: 1px;
+    color: rgba(255, 255, 255, 0.9);
+    text-align: center;
+  }

-		.CenterFormitemDetailBorderLine1 {
-			width: 1px;
-			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;
-		}
-	}
+  .TableContainer {
+    flex: 1;
+  }
 }
--- a/src/components/Modules/Home/CenterTop/index.jsx
+++ b/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>
 		</>
 	);
--- a/src/store/features/cuttingSlice.js
+++ b/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...");
-      state.table = action.payload;
+      if ("data" in action.payload) state.table = action.payload.data;
+      if ("productData" in action.payload)
+        state.productData = action.payload.productData;
    },
    setCuttingChart: (state, action) => {
      switch (action.payload.dateType) {
--- a/src/utils/index.ts
+++ b/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":