update 当前产线生产规格
This commit is contained in:
lb
parent
b57b65ffd4
commit
c2802627d6
@ -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;
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -293,7 +293,7 @@ new XClient(
|
||||
case "table":
|
||||
store.dispatch({
|
||||
type: "cutting/setCuttingTable",
|
||||
payload: serializedData.data,
|
||||
payload: serializedData,
|
||||
});
|
||||
break;
|
||||
case "chart":
|
||||
|
||||
Loading…
Reference in New Issue
Block a user