mt-fe-group/xuchang-new
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 当前产线生产规格

Browse Source
This commit is contained in:
lb
2023-12-28 10:14:14 +08:00
parent b57b65ffd4
commit c2802627d6
7 changed files with 249 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
src/components/Modules/Home/CenterTop/RightTable/index.jsx
View File

@@ -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
View File

@@ -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
View File

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