This commit is contained in:
lb
2023-12-07 09:56:21 +08:00
parent d4a4e82aa6
commit 9f51f2b3cb
14 changed files with 150 additions and 383 deletions

View File

@@ -1,138 +1,136 @@
import BottomBarItem from '../BottomItemBackground';
import GraphBase from '../GraphBase';
import { Radio } from 'antd';
import cls from './index.module.css';
import { useState } from 'react';
import GraphBase from "../GraphBase";
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>
);
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('风机');
const [dataSource, setDataSource] = useState("风机");
function handleSourceChange(v) {
console.log('val', v);
}
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>
);
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;