update 生产良品率

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,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;
+	// }
 }

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;
+}