96 lines
2.1 KiB
JavaScript
96 lines
2.1 KiB
JavaScript
import { useState, useRef } from "react";
|
|
import cls from "./index.module.css";
|
|
import Chart2 from "../../../Common/TimeFireDir";
|
|
import VideoContainer from "./VideoContainer";
|
|
|
|
function KilnCenter() {
|
|
const [floor, setFloor] = useState(0);
|
|
const preFloor = useRef();
|
|
function onFloorUpdate(flr) {
|
|
preFloor.current = floor;
|
|
setFloor(flr);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="bgKilnInner"
|
|
style={{
|
|
width: "100%",
|
|
position: "absolute",
|
|
top: "12%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
{/* 时间火向数据 */}
|
|
<div
|
|
className="fireAndTime"
|
|
style={{ position: "absolute", top: "-112px", height: "212px" }}
|
|
>
|
|
<Chart2 />
|
|
</div>
|
|
|
|
{/* menu */}
|
|
<div
|
|
className="subMenu"
|
|
style={{
|
|
display: "flex",
|
|
marginBottom: "24px",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<div
|
|
className={
|
|
"flr flr1 " + cls.menuItem + " " + (floor === 1 ? cls.active : "")
|
|
}
|
|
onClick={() => onFloorUpdate(1)}
|
|
>
|
|
碹顶温度
|
|
</div>
|
|
<div
|
|
className={
|
|
"flr flr2 " + cls.menuItem + " " + (floor === 2 ? cls.active : "")
|
|
}
|
|
onClick={() => onFloorUpdate(2)}
|
|
>
|
|
池底温度
|
|
</div>
|
|
<div
|
|
className={
|
|
"flr flr2 " + cls.menuItem + " " + (floor === 3 ? cls.active : "")
|
|
}
|
|
onClick={() => onFloorUpdate(3)}
|
|
>
|
|
溶液速度
|
|
</div>
|
|
</div>
|
|
|
|
{/* 颜色指示图 */}
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: "30px",
|
|
right: "450px",
|
|
width: "300px",
|
|
height: "41px",
|
|
}}
|
|
>
|
|
<img
|
|
src={require("../../../../assets/tempIntr.png")}
|
|
alt=""
|
|
style={{ width: "300px", height: "41px" }}
|
|
/>
|
|
</div>
|
|
|
|
{/* video */}
|
|
<VideoContainer
|
|
onFloorUpdate={onFloorUpdate}
|
|
floor={floor}
|
|
preFloor={preFloor}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default KilnCenter;
|