mt-fe-group/xuchang-new
8
0
Fork 0
程式碼 問題 合併請求 版本發布 Wiki 動態

update 当前产线生产规格

瀏覽代碼
This commit is contained in:
lb 2023-12-28 10:14:14 +08:00
父節點 b57b65ffd4
當前提交 c2802627d6
共有 7 個檔案被更改，包括 249 行新增 和 155 行删除
顯示統計資料 下載 Patch 檔 下載差異檔 展開所有檔案 折疊所有檔案

175
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;

2
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) {

150
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;

65
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;
}
}

4
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>
</>
);

6
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) {

2
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":