update good rate part

src/components/Container.jsx

@@ -1,23 +1,31 @@
-import cls from './container.module.less'
+import { useEffect, useRef } from 'react';
 
-import IconStack from '../assets/Icon/icon-stack.png'
+import cls from './container.module.less';
 
-const Container = props => {
-  let icon = null
-  switch (props.icon){
-    case 'kiln':
-      icon = IconStack
-  }
+import IconStack from '../assets/Icon/icon-stack.png';
+import IconGood from '../assets/Icon/icon-good.png';
 
-  return <div className={`${cls.container} ${props.className}`}>
-    <div className={cls.container__head}>
-      <img src={icon} alt="#" />
-      <h2>{props.title}</h2>
-    </div>
-    <div className={cls.container__content}>
-      {props.children}
-    </div>
-  </ div>
-}
+const Container = (props) => {
+	let icon = useRef(null);
 
-export default Container
+	switch (props.icon) {
+		case 'kiln':
+			icon.current = IconStack;
+			break;
+		case 'good': // 良品率
+			icon.current = IconGood;
+			break;
+	}
+
+	return (
+		<div className={`${cls.container} ${props.className}`}>
+			<div className={cls.container__head}>
+				<img src={icon.current} alt="#" />
+				<h2>{props.title}</h2>
+			</div>
+			<div className={cls.container__content}>{props.children}</div>
+		</div>
+	);
+};
+
+export default Container;

src/components/LeftBar/GoodProduction.jsx

@@ -1,6 +1,19 @@
+import cls from './good.module.less';
+import Container from '../Container';
+import TodayTableData from './substitutionCharts/TodayTableData';
+import GoodRateChart from './substitutionCharts/GoodRateChart';
+import TechSplitline from './substitutionCharts/TechSplitline';
 
 const GoodProduction = () => {
-  return <div></div>
-}
+	return (
+		<Container icon="good" title="本日生产良品率" className={cls.goodProd}>
+			<div className="goodProd__content">
+				<TodayTableData />
+				<TechSplitline />
+				<GoodRateChart />
+			</div>
+		</Container>
+	);
+};
 
-export default GoodProduction;
+export default GoodProduction;

src/components/LeftBar/Kiln.jsx

@@ -52,7 +52,7 @@ export default function Kiln() {
 		<Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
 			<div className={cls.leftBar__top__content}>
 				{infos.map((item) => (
-					<div className={cls.info__item}>
+					<div key={item.label} className={cls.info__item}>
 						{item.label}: {item.value}
 					</div>
 				))}

src/components/LeftBar/good.module.less

@@ -0,0 +1,9 @@
+.goodProd {
+	background: url(../../assets/good.png) no-repeat, #9f84;
+	background-size: 100% 100%;
+	width: 625px;
+	// height: 626px;
+	flex: 1;
+	height: 1px;
+	margin-top: 24px;
+}

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

@@ -0,0 +1,7 @@
+import cls from './index.module.less';
+
+const GoodRateChart = (props) => {
+	return <div className={cls.GoodRateChart}>good rate chart</div>;
+};
+
+export default GoodRateChart;

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

@@ -0,0 +1,7 @@
+import cls from './index.module.less';
+
+const TechSplitline = (props) => {
+	return <div className={cls.techSplitline}></div>;
+};
+
+export default TechSplitline;

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

@@ -0,0 +1,5 @@
+.techSplitline {
+	height: 2px;
+	width: 100%;
+	background: radial-gradient(#3ce7ff, #3ce8ff92, #3ce8ff32, transparent);
+}

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

@@ -0,0 +1,7 @@
+import cls from './index.module.less';
+
+const TodayTableData = (props) => {
+	return <div className={cls.todayTableData}>today table data</div>;
+};
+
+export default TodayTableData;

src/components/container.module.less

@@ -1,49 +1,56 @@
 .container {
-  padding: 24px;
-  display: flex;
-  flex-direction: column;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
+	padding: 24px;
+	display: flex;
+	flex-direction: column;
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
 
-  .container__head {
-    display: flex;
-    align-items: center;
+	.container__head {
+		display: flex;
+		align-items: center;
 
-    h2 {
-      font-family: "微软雅黑", "Microsoft YaHei UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
-        "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
-        "WenQuanYi Micro Hei", sans-serif;
-      margin: 0;
-      margin-left: 6px;
-      font-size: 18px;
-      color: #fff;
-      letter-spacing: 2px;
-      font-weight: 500;
-    }
-  }
+		h2 {
+			font-family: '微软雅黑', 'Microsoft YaHei UI', -apple-system,
+				BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
+				'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei',
+				sans-serif;
+			margin: 0;
+			margin-left: 6px;
+			font-size: 18px;
+			color: #fff;
+			letter-spacing: 2px;
+			font-weight: 500;
+		}
+	}
+
+	.container__content {
+		height: 1px;
+		flex: 1;
+		background: #25a78672;
+	}
 }
 
 .bgKiln {
-  background: url('');
+	background: url('');
 }
 .bgGood {
-  background: url('../assets/good.png');
+	background: url('../assets/good.png');
 }
 .bgFaultTotal {
-  background: url('');
+	background: url('');
 }
 .bgFaultType {
-  background: url('');
+	background: url('');
 }
 .bgGas {
-  background: url('');
+	background: url('');
 }
 .bgWind {
-  background: url('');
+	background: url('');
 }
 .bgEnergy {
-  background: url('../assets/energy.png');
+	background: url('../assets/energy.png');
 }
 .bgSmoke {
-  background: url('../assets/smoke.png');
+	background: url('../assets/smoke.png');
 }