done 左右侧边栏

src/components/公共组件/产线当日缺陷分类/index.jsx

@@ -1,6 +1,5 @@
 import cls from './index.module.css';
-import BottomBarItem from '../BottomItemBackground';
-import { Radio } from 'antd';
+import GraphBase from '../GraphBase';
 import ReactECharts from 'echarts-for-react';
 import { useState } from 'react';
 
@@ -16,10 +15,10 @@ function FaultType(props) {
 			'#12FFF5',
 		],
 		grid: {
-			left: 0,
-			top: 0,
-			bottom: 0,
-			right: 0,
+			left: 24,
+			top: 10,
+			bottom: 10,
+			right: 24,
 		},
 		legend: {
 			icon: 'circle',
@@ -80,34 +79,28 @@ function FaultType(props) {
 		{ id: 4, label: '产线4', value: 'l4' },
 		{ id: 5, label: '产线5', value: 'l5' },
 	]);
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	// 根据使用的页面决定背景的大小
+	const bgSize =
+		props.page == 'home' ? ['middle', 'short'] : ['middle', 'short'];
+
 	return (
-		<BottomBarItem
-			icon="puzzle"
+		<GraphBase
+			icon="battery"
 			title="产线当日缺陷分类"
-			className={cls.faultType}
+			dateOptions={lines.map((item) => item.label)}
+			onDateChange={handleDateChange}
+			size={bgSize}
+			style={{ width: '600px' }}
 		>
-			<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>
+		</GraphBase>
 	);
 }