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

update 生产良品率

Browse Source
This commit is contained in:
lb
2023-07-01 13:50:13 +08:00
parent 45c3edcd48
commit c233d83eee
8 changed files with 115 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/CenterTopData/RightTable/index.jsx
View File

@@ -1,59 +1,65 @@
import React, { Component } from 'react';
import './righttable.module.less'
import './righttable.module.less';
import { ScrollBoard } from '@jiaminghi/data-view-react'
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'],
]
['产线0', '10mm', '10mm', '10mm'],
['产线2', '8mm', '8mm', '8mm'],
['产线3', '15mm', '15mm', '15mm'],
['产线4', '15mm', '15mm', '15mm'],
];
let header = ['产线名', '原板宽度', '净板宽', '玻璃厚度']
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)
}
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 replaceStyle(Arr, opencity) {
let temp = [];
let temp = [];
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/>`
}
}
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/>`;
}
}
return temp;
return temp;
}
class Chart1 extends Component {
render() {
return (
<div className='CenterChart1itemDetailBorder'>
<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 >
);
}
render() {
return (
<div className="CenterChart1itemDetailBorder">
<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;

2
src/components/LeftBar/GoodProduction.jsx
View File

@@ -7,7 +7,7 @@ import TechSplitline from './substitutionCharts/TechSplitline';
const GoodProduction = () => {
return (
<Container icon="good" title="本日生产良品率" className={cls.goodProd}>
<div className="goodProd__content">
<div className={`${cls.goodProd__content} h-full`}>
<TodayTableData />
<TechSplitline />
<GoodRateChart />

5
src/components/LeftBar/good.module.less
View File

@@ -6,4 +6,9 @@
flex: 1;
height: 1px;
margin-top: 24px;
.goodProd__content {
display: flex;
flex-direction: column;
}
}

40
src/components/LeftBar/index.module.less
View File

@@ -1,25 +1,25 @@
.leftBar {
border: 2px solid red;
width: 625px;
height: 966px;
margin-left: 40px;
// border: 2px solid red;
width: 625px;
height: 966px;
margin-left: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
display: flex;
flex-direction: column;
justify-content: space-between;
// .LeftChart1Border {
// width: 100%;
// height: 304px;
// background: url('../../assets/ItemBg.png');
// }
// .LeftChart1Border {
// width: 100%;
// height: 304px;
// background: url('../../assets/ItemBg.png');
// }
// .LeftChart2Border {
// width: 624px;
// height: 632px;
// background: url('../../assets/ItemBg2.png');
// display: flex;
// flex-direction: column;
// //justify-content: space-between;
// }
// .LeftChart2Border {
// width: 624px;
// height: 632px;
// background: url('../../assets/ItemBg2.png');
// display: flex;
// flex-direction: column;
// //justify-content: space-between;
// }
}

3
src/components/LeftBar/kiln.module.less
View File

@@ -2,7 +2,8 @@
width: 625px;
// height: 305px;
height: 300px;
background: url('../../assets/ItemBg.png') 100% 100% no-repeat;
background: url('../../assets/ItemBg.png') no-repeat;
background-size: 100% 100%;
.leftBar__top__content {
flex: 1;

4
src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.less
View File

@@ -0,0 +1,4 @@
.GoodRateChart {
height: 1px;
flex: 1;
}

31
src/components/LeftBar/substitutionCharts/TodayTableData/index.jsx
View File

@@ -1,7 +1,36 @@
import { useState } from 'react';
import cls from './index.module.less';
import { ScrollBoard } from '@jiaminghi/data-view-react';
const TodayTableData = (props) => {
return <div className={cls.todayTableData}>today table data</div>;
const [config, setConfig] = useState({
// headerBGC: 'rgba(4, 44, 76, 0.3)',
headerBGC: 'rgba(4, 44, 76, .8)',
header: [
'<span style="color:#fff">产线<span/>',
'<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: [
['产线1', '37%', '62%', '97%', '7%'],
['产线2', '95%', '10%', '99%', '3%'],
['产线3', '68%', '1%', '92%', '4%'],
['产线4', '94%', '21%', '97%', '2%'],
['产线5', '99%', '30%', '95%', '5%'],
],
});
return (
<div className={cls.todayTableData}>
<ScrollBoard config={config} style={{ width: '100%' }} />
</div>
);
};
export default TodayTableData;

5
src/components/LeftBar/substitutionCharts/TodayTableData/index.module.less
View File

@@ -0,0 +1,5 @@
.todayTableData {
height: 240px;
// flex: 1;
padding-top: 12px;
}