done 左右侧边栏

src/components/公共组件/GraphBase/index.jsx

@@ -75,6 +75,7 @@ function GraphBase(props) {
 				' ' +
 				props.className
 			}
+			style={{ ...props.style }}
 		>
 			<div className={cls.graphBaseTitle}>
 				<img src={iconSrc} alt="#" />

src/components/公共组件/GraphBase/index.module.css

@@ -30,7 +30,8 @@
 
 .middle-short {
 	/* background: url('../../../assets/middle-short.png') no-repeat; */
-	background: url('../../../assets/energy.png') no-repeat;
+	/* background: url('../../../assets/energy.png') no-repeat; */
+	background: url('../../../assets/bg-bottom-item.png') no-repeat;
 	background-size: 100% 100%;
 	background-position: 0 0;
 }

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

@@ -1,6 +1,5 @@
 import cls from './index.module.css';
-import BottomBarItem from '../BottomItemBackground';
+import GraphBase from '../GraphBase';
-import { Radio } from 'antd';
 import ReactECharts from 'echarts-for-react';
 import { useState } from 'react';
 
@@ -16,10 +15,10 @@ function FaultType(props) {
 			'#12FFF5',
 		],
 		grid: {
-			left: 0,
+			left: 24,
-			top: 0,
+			top: 10,
-			bottom: 0,
+			bottom: 10,
-			right: 0,
+			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
+		<GraphBase
-			icon="puzzle"
+			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>
 	);
 }
 

src/components/公共组件/产线缺陷统计/index.jsx

@@ -1,6 +1,5 @@
 import cls from './index.module.css';
-import BottomBarItem from '../BottomItemBackground';
+import GraphBase from '../GraphBase';
-import { Radio } from 'antd';
 import ReactECharts from 'echarts-for-react';
 
 function FaultTotal(props) {
@@ -137,33 +136,27 @@ function FaultTotal(props) {
 		},
 	};
 
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	// 根据使用的页面决定背景的大小
+	const bgSize =
+		props.page == 'home' ? ['middle', 'short'] : ['middle', 'long'];
+
 	return (
-		<BottomBarItem icon="chart" title="产线缺陷统计" className={cls.faultTotal}>
+		<GraphBase
-			<div className={cls.headWidget}>
+			icon="battery"
-				{/* 日周月年 */}
+			title="产线当日缺陷分类"
-				<Radio.Group
+			dateOptions={['日', '周', '月', '年']}
-					defaultValue="week"
+			onDateChange={handleDateChange}
-					buttonStyle="solid"
+			size={bgSize}
-					className={cls.radioGroup}
+			style={{ width: '600px' }}
-				>
+		>
-					<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>
 			<div className={cls.chart}>
 				<ReactECharts option={options} style={{ height: '100%' }} />
 			</div>
-		</BottomBarItem>
+		</GraphBase>
 	);
 }
 

src/components/模块组件/总览/Bottom/index.jsx

@@ -12,8 +12,8 @@ import cls from './index.module.css';
 export default function index() {
 	return (
 		<div className={`${cls.bottomBar} flex justify-between`}>
-			<FaultTotal />
+			<FaultTotal page="home" />
-			<FaultType />
+			<FaultType page="home" />
 			<GasII />
 			<GasI />
 		</div>

src/components/模块组件/质检统计/RightSide/index.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import FanInfo from '../../../公共组件/风机信息';
+import WindFrequence from '../../../公共组件/风机运行频率';
+import FaultType from '../../../公共组件/产线当日缺陷分类';
+import FaultTotal from '../../../公共组件/产线缺陷统计';
+import { motion } from 'framer-motion';
+
+import cls from './index.module.less';
+
+export default function index() {
+	return (
+		<motion.div
+			style={{
+				width: '625px',
+				height: '966px',
+				// background: '#fff3',
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+			initial={{ opacity: 0, position: 'absolute' }}
+			animate={{ opacity: 1, position: 'relative' }}
+			exit={{ opacity: 0, position: 'absolute' }}
+			transition={{ type: 'tween' }}
+		>
+			<div style={{ height: '357px' }}>
+				<FaultType page="fault-total" />
+			</div>
+			<div style={{ flex: 1, marginTop: '24px' }}>
+				<FaultTotal page="fault-total" />
+			</div>
+		</motion.div>
+	);
+}

src/pages/总览/index.jsx

@@ -9,6 +9,7 @@ import KilnInnerRight from '../../components/模块组件/窑炉内部/RightSide
 import FireCheckLeft from '../../components/模块组件/退火监测/LeftSide';
 import QualityCheckLeft from '../../components/模块组件/质检统计/LeftSide';
 import FireCheckRight from '../../components/模块组件/退火监测/RightSide';
+import QualityCheckRight from '../../components/模块组件/质检统计/RightSide';
 
 import V3DBG from '../../assets/V3DBG.png';
 
@@ -30,24 +31,6 @@ const KilnTotalRight = (props) => {
 	);
 };
 
-const QualityCheckRight = (props) => {
-	return (
-		<motion.div
-			style={{
-				width: '625px',
-				height: '900px',
-				background: '#fff3',
-			}}
-			initial={{ opacity: 0, position: 'absolute' }}
-			animate={{ opacity: 1, position: 'relative' }}
-			exit={{ opacity: 0, position: 'absolute' }}
-			transition={{ type: 'tween' }}
-		>
-			质检统计 RIGHT
-		</motion.div>
-	);
-};
-
 export default function Home({ active }) {
 	console.log('[rendering...] 加载 Home页面');