update 生产良品率，覆写antd默认样式的方案

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

@@ -1,7 +1,70 @@
-import cls from './index.module.less';
+import cls from './index.module.css';
+import './overwrite.css'; // 覆写 antd 默认样式，全局
+import ReactECharts from 'echarts-for-react';
+import { Switch, Radio } from 'antd';
 
 const GoodRateChart = (props) => {
-	return <div className={cls.GoodRateChart}>good rate chart</div>;
+	const options = {
+		grid: { top: 28, right: 12, bottom: 20, left: 48 },
+		xAxis: {
+			type: 'category',
+			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+		},
+		yAxis: {
+			type: 'value',
+		},
+		series: [
+			{
+				data: [820, 932, 901, 934, 1290, 1330, 1320],
+				type: 'line',
+				smooth: true,
+			},
+		],
+		tooltip: {
+			trigger: 'axis',
+		},
+	};
+
+	function handleSwitchChange(val) {
+		// val: boolean
+		console.log('switch change', val);
+	}
+
+	return (
+		<div className={cls.GoodRateChart}>
+			<div className={cls.titleBar}>
+				<h2>生产良品率</h2>
+				<Switch defaultChecked onChange={handleSwitchChange} />
+				<div className={cls.legend}>
+					<span className="legend__title">班次详情</span>
+					<ul className="legend__list">
+						<li>总量</li>
+						<li>白班</li>
+						<li>夜班</li>
+					</ul>
+				</div>
+				<Radio.Group
+					defaultValue="week"
+					buttonStyle="solid"
+					className={cls.radioGroup}
+				>
+					<Radio.Button value="day" className="radio-group__item">
+						日
+					</Radio.Button>
+					<Radio.Button value="week" className="radio-group__item">
+						周
+					</Radio.Button>
+					<Radio.Button value="month" className="radio-group__item">
+						月
+					</Radio.Button>
+					<Radio.Button value="year" className="radio-group__item">
+						年
+					</Radio.Button>
+				</Radio.Group>
+			</div>
+			<ReactECharts option={options} />
+		</div>
+	);
 };
 
 export default GoodRateChart;

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

@@ -0,0 +1,86 @@
+.GoodRateChart {
+	height: 1px;
+	flex: 1;
+	padding-top: 8px;
+	background: #ae27276a;
+}
+.GoodRateChart .titleBar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	color: white;
+}
+.GoodRateChart .titleBar h2 {
+	margin: 0;
+	font-size: 20px;
+	line-height: 32px;
+	letter-spacing: 1.2px;
+	color: #52fff8;
+}
+
+.GoodRateChart .titleBar .legend {
+	display: flex;
+	align-items: center;
+}
+.GoodRateChart .titleBar .legend * {
+	font-size: 14px;
+	line-height: 14px;
+	color: #dff1fe;
+}
+
+.GoodRateChart .titleBar .legend ul {
+	display: flex;
+	margin: 0;
+	margin-left: 8px;
+	padding: 0;
+	list-style: none;
+	align-items: center;
+}
+.GoodRateChart .titleBar .legend ul li {
+	position: relative;
+	margin: 4px;
+	padding-left: 16px;
+}
+.GoodRateChart .titleBar .legend ul li::before {
+	content: '';
+	position: absolute;
+	left: 2px;
+	top: 2px;
+	display: inline-block;
+	width: 12px;
+	height: 12px;
+	border-radius: 2px;
+}
+
+.GoodRateChart .titleBar .legend ul li:first-child::before {
+	background-color: #ffd160;
+}
+
+.GoodRateChart .titleBar .legend ul li:nth-child(2)::before {
+	background-color: #12fff5;
+}
+
+.GoodRateChart .titleBar .legend ul li:nth-child(3)::before {
+	background-color: #2760ff;
+}
+
+.radioGroup * {
+	border: none !important;
+	border-radius: 0 !important;
+}
+.radioGroup *:focus-within {
+	box-shadow: none !important;
+}
+
+.radioGroup *::before {
+	width: 0 !important;
+}
+
+.radioGroup_button_wrapper {
+	color: #fff !important;
+	background: #03233c !important;
+}
+
+.radioGroup_button_wrapper.ant-radio-button-wrapper-checked {
+	background: #02457e !important;
+}

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

@@ -1,4 +1,93 @@
 .GoodRateChart {
 	height: 1px;
 	flex: 1;
+	padding-top: 8px;
+	background: #ae27276a;
+
+	.titleBar {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background: #0003;
+		color: white;
+
+		h2 {
+			margin: 0;
+			font-size: 20px;
+			line-height: 32px;
+			letter-spacing: 1.2px;
+			color: #52fff8;
+		}
+
+		.legend {
+			display: flex;
+			align-items: center;
+
+			* {
+				font-size: 14px;
+				line-height: 14px;
+				color: #dff1fe;
+			}
+
+			ul {
+				display: flex;
+				margin: 0;
+				margin-left: 8px;
+				padding: 0;
+				list-style: none;
+				align-items: center;
+
+				li {
+					position: relative;
+					margin: 4px;
+					padding-left: 16px;
+
+					&::before {
+						content: '';
+						position: absolute;
+						left: 2px;
+						top: 2px;
+						display: inline-block;
+						width: 12px;
+						height: 12px;
+						border-radius: 2px;
+					}
+
+					&:first-child::before {
+						background-color: #ffd160;
+					}
+
+					&:nth-child(2)::before {
+						background-color: #12fff5;
+					}
+
+					&:nth-child(3)::before {
+						background-color: #2760ff;
+					}
+				}
+			}
+		}
+	}
+}
+
+.radioGroup {
+	// border: 2px solid red;
+
+	* {
+		border: none !important;
+		border-radius: 0 !important;
+
+		&:focus-within {
+			box-shadow: none !important;
+		}
+
+		&::before {
+			width: 0 !important;
+		}
+	}
+
+	.radioGroup_button_wrapper {
+		color: #fff !important;
+		background: #03233c !important;
+	}
 }

src/components/LeftBar/substitutionCharts/GoodRateChart/overwrite.css

@@ -0,0 +1,28 @@
+.radio-group__item {
+	color: #fff !important;
+	background: #03233c !important;
+}
+
+.radio-group__item:first-child {
+    border-top-left-radius: 4px !important;
+    border-bottom-left-radius: 4px !important;
+}
+
+.radio-group__item:last-child {
+    border-top-right-radius: 4px !important;
+    border-bottom-right-radius: 4px !important;
+}
+
+.radio-group__item.ant-radio-button-wrapper-checked {
+	background: #02457e !important;
+}
+
+.ant-switch-checked {
+    background: #b4fffdb1 !important;
+}
+.ant-switch-checked:focus{
+    box-shadow: none !important;
+}
+.ant-switch-checked .ant-switch-handle::before {
+    background-color: #76FFF9 !important;
+}

src/components/RadioGroup.jsx

@@ -0,0 +1,5 @@
+import cls from './radio.group.module.less';
+
+function RadioGroup(props) {
+	return <div className="radioGroup"></div>;
+}