update 退火监测

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

@@ -43,7 +43,15 @@ function GraphBase(props) {
 	const [showChart, setShowChart] = useState(true);
 
 	let dto = null;
+	const switchStyle = {};
 
+	if (props.switchPosition) {
+		props.switchPosition.forEach((item, index) => {
+			if (item != null) {
+				switchStyle[index == 0 ? 'top' : 'left'] = item + 'px';
+			}
+		});
+	}
 	if (dateOptions) {
 		dto = dateOptions.map((item) => (
 			<Radio.Button value={item} key={item} className="radio-group__item">
@@ -75,7 +83,7 @@ function GraphBase(props) {
 			<div className={cls.graphBaseContent}>
 				{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
 				{switchOptions && (
-					<div className={cls.graphBaseSwitch}>
+					<div className={cls.graphBaseSwitch} style={switchStyle}>
 						<Switch size="small" defaultChecked onChange={handleSwitchChange} />
 						{showChart && <span className={cls.switchLabel}>历史详情</span>}
 						{!showChart && <span className={cls.switchLabel}>实时流量</span>}
@@ -96,7 +104,7 @@ function GraphBase(props) {
 				)}
 				{dateOptions && (
 					<Radio.Group
-						defaultValue="日"
+						defaultValue={dateOptions[0]}
 						buttonStyle="solid"
 						className={cls.graphBaseDate + ' ' + cls.radioGroup}
 						onChange={({ target }) => onDateChange(target.value)}

src/components/公共组件/当前温度/index.jsx

@@ -1,4 +1,5 @@
 import BottomBarItem from '../BottomItemBackground';
+import GraphBase from '../GraphBase';
 import { Radio } from 'antd';
 import cls from './index.module.css';
 import { useState } from 'react';
@@ -40,47 +41,20 @@ const SmallBox = (props) => {
 };
 
 function WindFrequence(props) {
-	const [dataSource, setDataSource] = useState('fan');
+	const [dataSource, setDataSource] = useState('风机');
 
-	function handleSourceChange(e) {
+	function handleSourceChange(v) {
-		console.log('val', e.target.value);
+		console.log('val', v);
-		if (e.target.value == 'fan') {
-			setDataSource('fan');
-		} else if (e.target.value == 'switcher') {
-			setDataSource('switcher');
-		} else if (e.target.value == 'heating') {
-			setDataSource('heating');
-		}
 	}
 
 	return (
-		<BottomBarItem
+		<GraphBase
 			icon="pause"
 			title="当前温度"
-			className={props.className}
+			dateOptions={['风机', '风阀', '电加热']}
-			style={props.style}
+			onDateChange={handleSourceChange}
+			size={['middle', 'long']}
 		>
-			<div className={cls.floatHead}>
-				<div className={cls.alignRight}>
-					<Radio.Group
-						defaultValue="fan"
-						buttonStyle="solid"
-						className={cls.radioGroup}
-						onChange={handleSourceChange}
-					>
-						<Radio.Button value="fan" className="radio-group__item">
-							风机
-						</Radio.Button>
-						<Radio.Button value="switcher" className="radio-group__item">
-							风阀
-						</Radio.Button>
-						<Radio.Button value="heating" className="radio-group__item">
-							电加热
-						</Radio.Button>
-					</Radio.Group>
-				</div>
-			</div>
-
 			<div className={cls.mainContent + ' ' + cls.grid}>
 				<SmallBox>
 					<h1 className={cls.areaName}>A1区板上</h1>
@@ -157,7 +131,7 @@ function WindFrequence(props) {
 					</div>
 				</SmallBox>
 			</div>
-		</BottomBarItem>
+		</GraphBase>
 	);
 }
 

src/components/公共组件/风机运行频率/index.jsx

@@ -162,15 +162,14 @@ function WindFrequence(props) {
 		}
 	}
 	return (
-		<GraphBase icon="kiln" title="风机运行频率" size={['middle', 'long']}>
+		<GraphBase
-			<div className={cls.headWidget}>
+			icon="kiln"
-				<div className="flex items-center">
+			title="风机运行频率"
-					<Switch size="small" defaultChecked onChange={handleSwitchChange} />
+			size={['middle', 'long']}
-					{showChart && <span className={cls.switchLabel}>历史详情</span>}
+			switchOptions={true}
-					{!showChart && <span className={cls.switchLabel}>实时流量</span>}
+			switchPosition={[null, 200]} // [top, left]
-				</div>
+			onSwitch={handleSwitchChange}
-			</div>
+		>
-
 			<div className={cls.chart}>
 				{showChart && (
 					<ReactECharts option={options} style={{ height: '100%' }} />

src/components/模块组件/退火监测/LeftSide/index.jsx

@@ -15,8 +15,12 @@ export default function index() {
 			exit={{ opacity: 0, position: 'relative' }}
 			transition={{ type: 'tween' }}
 		>
-			<CurrentTemp style={{ width: '100%' }} />
+			<div style={{ flex: 1 }}>
-			<WindFrequence style={{ flex: 1, marginTop: '24px', width: '100%' }} />
+				<CurrentTemp style={{ width: '100%' }} />
+			</div>
+			<div style={{ flex: 1, marginTop: '24px', width: '100%' }}>
+				<WindFrequence />
+			</div>
 		</motion.div>
 	);
 }