update 生产良品率
This commit is contained in:
parent
45c3edcd48
commit
c233d83eee
@ -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;
|
||||
|
||||
@ -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 />
|
||||
|
||||
@ -6,4 +6,9 @@
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
margin-top: 24px;
|
||||
|
||||
.goodProd__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
// }
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
.GoodRateChart {
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
.todayTableData {
|
||||
height: 240px;
|
||||
// flex: 1;
|
||||
padding-top: 12px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user