update 生产良品率

src/components/CenterTopData/RightTable/index.jsx

@@ -1,28 +1,32 @@
-
 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'],
-]
+];
 
-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/>'],
+	header: [
-    oddRowBGC: "#042444",
+		'<span style="color:#fff">产线名<span/>',
-    evenRowBGC: "#042c4c",
+		'<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)
+	data: replaceStyle(data, 0.7),
-}
+};
 
 function replaceStyle(Arr, opencity) {
 	let temp = [];
@@ -30,7 +34,9 @@ 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]}<span/>`;
 		}
 	}
 
@@ -38,19 +44,19 @@ function replaceStyle(Arr, opencity) {
 }
 
 class Chart1 extends Component {
-
-
 	render() {
 		return (
-            <div className='CenterChart1itemDetailBorder'>
+			<div className="CenterChart1itemDetailBorder">
-                <h2 className='CenterChart1itemTXT'> 当前产线生产规格</h2>
+				<h2 className="CenterChart1itemTXT"> 当前产线生产规格</h2>
-                <div className='CenterChart1itemContainer'>
+				<div className="CenterChart1itemContainer">
-                    <span className='CenterFormitemDetailBorderLine1'></span>
+					<span className="CenterFormitemDetailBorderLine1"></span>
-                    <span className='CenterFormitemDetailBorderLine2'></span>
+					<span className="CenterFormitemDetailBorderLine2"></span>
-                    <span className='CenterFormitemDetailBorderLine3'></span>
+					<span className="CenterFormitemDetailBorderLine3"></span>
-                    <ScrollBoard config={config} style={{ width: '105%', height: '240%' }} />
+					<ScrollBoard
+						config={config}
+						style={{ width: '105%', height: '240%' }}
+					/>
 				</div>
-
 			</div>
 		);
 	}

src/components/LeftBar/GoodProduction.jsx

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

src/components/LeftBar/good.module.less

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

src/components/LeftBar/index.module.less

@@ -1,5 +1,5 @@
 .leftBar {
-  border: 2px solid red;
+	// border: 2px solid red;
 	width: 625px;
 	height: 966px;
 	margin-left: 40px;

src/components/LeftBar/kiln.module.less

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

src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.less

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

src/components/LeftBar/substitutionCharts/TodayTableData/index.jsx

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

src/components/LeftBar/substitutionCharts/TodayTableData/index.module.less

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