From c2802627d6426ee12fa402931be5c355e6d9e3f2 Mon Sep 17 00:00:00 2001 From: lb Date: Thu, 28 Dec 2023 10:14:14 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E5=BD=93=E5=89=8D=E4=BA=A7=E7=BA=BF?= =?UTF-8?q?=E7=94=9F=E4=BA=A7=E8=A7=84=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/CurrentLineSpec/index.jsx | 175 ++++++++++++------ .../Common/TodayFaultTotal/index.jsx | 2 +- .../Home/CenterTop/RightTable/index.jsx | 150 ++++++++++----- .../RightTable/righttable.module.scss | 65 ++----- .../Modules/Home/CenterTop/index.jsx | 4 +- src/store/features/cuttingSlice.js | 6 +- src/utils/index.ts | 2 +- 7 files changed, 249 insertions(+), 155 deletions(-) diff --git a/src/components/Common/CurrentLineSpec/index.jsx b/src/components/Common/CurrentLineSpec/index.jsx index 46036db..46f6cb3 100644 --- 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: [ + '产线名', + '原板宽度', + '净板宽', + '玻璃厚度', + ], + // oddRowBGC: "#042444", + // evenRowBGC: "#042c4c", + oddRowBGC: "#044A8460", + evenRowBGC: "#0b549970", + columnWidth: [128], + headerHeight: 40, + hoverPause: false, + data: replaceStyle(filterData(rawData), 0.7), + }; + + return ( + +
+ + + + +
+ + ); +} + +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: [ - '产线名', - '原板宽度', - '净板宽', - '玻璃厚度', - ], - 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 - ] = ` ${Arr[i][j]}`; + temp[i][j] = `${ + Arr[i][j] + } ${j == 0 ? "" : "mm"}`; } } return temp; } - -class Chart1 extends Component { - render() { - return ( - -
- - - - -
- - ); - } -} - -export default Chart1; diff --git a/src/components/Common/TodayFaultTotal/index.jsx b/src/components/Common/TodayFaultTotal/index.jsx index 1464b13..bdebb24 100644 --- 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) { diff --git a/src/components/Modules/Home/CenterTop/RightTable/index.jsx b/src/components/Modules/Home/CenterTop/RightTable/index.jsx index c124b18..f9b60c4 100644 --- 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: [ + '产线名', + '原板宽度', + '净板宽', + '玻璃厚度', + ], + // 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 ( +
+

当前产线生产规格

+
+ +
+
+ ); +} + +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: [ - '产线名', - '原板宽度', - '净板宽', - '玻璃厚度', - ], - 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 - ] = ` ${Arr[i][j]}`; + temp[i][j] = `${ + Arr[i][j] + } ${j == 0 ? "" : "mm"}`; } } return temp; } - -class Chart1 extends Component { - render() { - return ( -
-

当前产线生产规格

-
- - - - {/* */} -
-
- ); - } -} - -export default Chart1; diff --git a/src/components/Modules/Home/CenterTop/RightTable/righttable.module.scss b/src/components/Modules/Home/CenterTop/RightTable/righttable.module.scss index 299a80e..2601971 100644 --- 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; + } } diff --git a/src/components/Modules/Home/CenterTop/index.jsx b/src/components/Modules/Home/CenterTop/index.jsx index 8e4408f..666bd37 100644 --- a/src/components/Modules/Home/CenterTop/index.jsx +++ b/src/components/Modules/Home/CenterTop/index.jsx @@ -11,9 +11,9 @@ export default function index() {
- {/*
+
-
*/} +
); diff --git a/src/store/features/cuttingSlice.js b/src/store/features/cuttingSlice.js index 05ccc68..8ef19b7 100644 --- 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) { diff --git a/src/utils/index.ts b/src/utils/index.ts index 111ac2d..eb34f3c 100644 --- 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":