setup

src/components/Common/CurrentTemp/index.jsx

@@ -0,0 +1,138 @@
+import BottomBarItem from '../BottomItemBackground';
+import GraphBase from '../GraphBase';
+import { Radio } from 'antd';
+import cls from './index.module.css';
+import { useState } from 'react';
+
+const SmallBox = (props) => {
+	return (
+		<div
+			className="small-box"
+			style={{
+				boxShadow: 'inset 0 0 18px 10px #fff1',
+				borderRadius: '3px',
+				padding: '6px',
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				color: '#fff',
+				position: 'relative',
+				userSelect: 'none',
+			}}
+		>
+			{props.split !== false && (
+				<span
+					className="vertical-line"
+					style={{
+						position: 'absolute',
+						display: 'inline-block',
+						width: '2px',
+						height: '80%',
+						top: '10%',
+						left: '50%',
+						background:
+							'linear-gradient(to bottom, transparent, #fff3, #fffa, #fff3, transparent)',
+					}}
+				></span>
+			)}
+			{props.children}
+		</div>
+	);
+};
+
+function WindFrequence(props) {
+	const [dataSource, setDataSource] = useState('风机');
+
+	function handleSourceChange(v) {
+		console.log('val', v);
+	}
+
+	return (
+		<GraphBase
+			icon="pause"
+			title="当前温度"
+			dateOptions={['风机', '风阀', '电加热']}
+			onDateChange={handleSourceChange}
+			size={['middle', 'long']}
+		>
+			<div className={cls.mainContent + ' ' + cls.grid}>
+				<SmallBox>
+					<h1 className={cls.areaName}>A1区板上</h1>
+					<div className={cls.areaContent}>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox>
+					<h1 className={cls.areaName}>A1区板上</h1>
+					<div className={cls.areaContent}>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox>
+					<h1 className={cls.areaName}>A1区板上</h1>
+					<div className={cls.areaContent}>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox>
+					<h1 className={cls.areaName}>A1区板上</h1>
+					<div className={cls.areaContent}>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox>
+					<h1 className={cls.areaName}>A1区板上</h1>
+					<div className={cls.areaContent}>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox split={false}>
+					<div className={cls.areaPureContent}>
+						<span className={cls.areaPureValue}>123.8℃</span>
+						<span className={cls.areaPureValue}>123.8℃</span>
+						<span className={cls.areaPureValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox>
+					<h1 className={cls.areaName}>A1区板上</h1>
+					<div className={cls.areaContent}>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox split={false}>
+					<div className={cls.areaPureContent}>
+						<span className={cls.areaPureValue}>123.8℃</span>
+						<span className={cls.areaPureValue}>123.8℃</span>
+						<span className={cls.areaPureValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox>
+					<h1 className={cls.areaName}>A1区板上</h1>
+					<div className={cls.areaContent}>
+						<span className={cls.areaValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox>
+					<h1 className={cls.areaName}>A1区板上</h1>
+					<div className={cls.areaContent}>
+						<span className={cls.areaValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+			</div>
+		</GraphBase>
+	);
+}
+
+export default WindFrequence;