update 产线当日

src/components/BottomBar/FaultType/index.jsx

@@ -1,14 +1,46 @@
 import cls from './index.module.css';
 import BottomBarItem from '../BottomBarItem';
+import { Switch, Radio } from 'antd';
+import ReactECharts from 'echarts-for-react';
+import * as echarts from 'echarts';
+import { randomInt } from '../../../utils';
+import { useState } from 'react';
 
 function FaultType(props) {
+	const [lines, setLines] = useState([
+		{ id: 1, label: '产线1', value: 'l1' },
+		{ id: 2, label: '产线2', value: 'l2' },
+		{ id: 3, label: '产线3', value: 'l3' },
+		{ id: 4, label: '产线4', value: 'l4' },
+		{ id: 5, label: '产线5', value: 'l5' },
+	]);
 	return (
 		<BottomBarItem
 			icon="puzzle"
 			title="产线当日缺陷分类"
 			className={cls.faultType}
 		>
-			产线当日缺陷分类 - 环形图 左右 legend - 产线1-5
+			<div className={cls.headWidget}>
+				{/* 日周月年 */}
+				<Radio.Group
+					defaultValue="l1"
+					buttonStyle="solid"
+					className={cls.radioGroup}
+				>
+					{lines.map((l, index) => (
+						<Radio.Button
+							key={l.label}
+							value={l.value}
+							className="radio-group__item"
+						>
+							{l.label}
+						</Radio.Button>
+					))}
+				</Radio.Group>
+			</div>
+			<div className={cls.chart}>
+				{/* <ReactECharts option={options} style={{ height: '100%' }} /> */}
+			</div>
 		</BottomBarItem>
 	);
 }

src/components/BottomBar/FaultType/index.module.css

@@ -0,0 +1,36 @@
+.chart {
+	height: 100%;
+	/* background-color: #00ee33; */
+}
+
+.faultType {
+	position: relative;
+}
+
+.headWidget {
+	position: absolute;
+	/* background: #00ee33; */
+	top: 20px;
+	right: 24px;
+	height: 32px;
+	width: 340px;
+    text-align: right;
+}
+
+.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;
+}