update 生产良品率

src/components/CenterTopData/RightTable/index.jsx

@@ -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'],
+	['产线0', '10mm', '10mm', '10mm'],
-    ['产线2', '8mm', '8mm', '8mm'],
+	['产线2', '8mm', '8mm', '8mm'],
-    ['产线3', '15mm', '15mm', '15mm'],
+	['产线3', '15mm', '15mm', '15mm'],
-    ['产线4', '15mm', '15mm', '15mm'],
+	['产线4', '15mm', '15mm', '15mm'],
-]
+];
 
-let header = ['产线名', '原板宽度', '净板宽', '玻璃厚度']
+let header = ['产线名', '原板宽度', '净板宽', '玻璃厚度'];
 
 let config = {
-    headerBGC: 'rgba(4, 44, 76, 0.3)',
+	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/>',
-    columnWidth: [90],
+		'<span style="color:#fff">净板宽<span/>',
-    headerHeight: 40,
+		'<span style="color:#fff">玻璃厚度<span/>',
-    hoverPause: false,
+	],
-    data: replaceStyle(data, 0.7)
+	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++) {
+	for (let i = 0; i < Arr.length; i++) {
-        temp[i] = [];
+		temp[i] = [];
-        for (let j = 0; j < Arr[i].length; j++) {
+		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/>`;
+		}
+	}
 
-    return temp;
+	return temp;
 }
 
 class Chart1 extends Component {
-
+	render() {
-
+		return (
-    render() {
+			<div className="CenterChart1itemDetailBorder">
-        return (
+				<h2 className="CenterChart1itemTXT"> 当前产线生产规格</h2>
-            <div className='CenterChart1itemDetailBorder'>
+				<div className="CenterChart1itemContainer">
-                <h2 className='CenterChart1itemTXT'> 当前产线生产规格</h2>
+					<span className="CenterFormitemDetailBorderLine1"></span>
-                <div className='CenterChart1itemContainer'>
+					<span className="CenterFormitemDetailBorderLine2"></span>
-                    <span className='CenterFormitemDetailBorderLine1'></span>
+					<span className="CenterFormitemDetailBorderLine3"></span>
-                    <span className='CenterFormitemDetailBorderLine2'></span>
+					<ScrollBoard
-                    <span className='CenterFormitemDetailBorderLine3'></span>
+						config={config}
-                    <ScrollBoard config={config} style={{ width: '105%', height: '240%' }} />
+						style={{ width: '105%', height: '240%' }}
-                </div>
+					/>
-
+				</div>
-            </div >
+			</div>
-        );
+		);
-    }
+	}
 }
 
 export default Chart1;

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;
+	// border: 2px solid red;
-  width: 625px;
+	width: 625px;
-  height: 966px;
+	height: 966px;
-  margin-left: 40px;
+	margin-left: 40px;
 
-  display: flex;
+	display: flex;
-  flex-direction: column;
+	flex-direction: column;
-  justify-content: space-between;
+	justify-content: space-between;
 
-  // .LeftChart1Border {
+	// .LeftChart1Border {
-  //   width: 100%;
+	//   width: 100%;
-  //   height: 304px;
+	//   height: 304px;
-  //   background: url('../../assets/ItemBg.png');
+	//   background: url('../../assets/ItemBg.png');
-  // }
+	// }
 
-  // .LeftChart2Border {
+	// .LeftChart2Border {
-  //   width: 624px;
+	//   width: 624px;
-  //   height: 632px;
+	//   height: 632px;
-  //   background: url('../../assets/ItemBg2.png');
+	//   background: url('../../assets/ItemBg2.png');
-  //   display: flex;
+	//   display: flex;
-  //   flex-direction: column;
+	//   flex-direction: column;
-  //   //justify-content: space-between;
+	//   //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;
+}