129 lines
3.0 KiB
JavaScript
129 lines
3.0 KiB
JavaScript
import { useState, useRef, useEffect } from "react";
|
|
import cls from "./index.module.css";
|
|
import Chart2 from "../../../Common/TimeFireDir";
|
|
import Chart1 from "../../../Common/ForecastTemperature";
|
|
import VideoContainer from "./VideoContainer";
|
|
function KilnCenter({ onFloorChange }) {
|
|
const [floor, setFloor] = useState(1); // 初始值设置为 1
|
|
const preFloor = useRef();
|
|
|
|
useEffect(() => {
|
|
onFloorChange(floor);
|
|
}, [floor, onFloorChange]);
|
|
|
|
function onFloorUpdate(flr) {
|
|
preFloor.current = floor;
|
|
setFloor(flr);
|
|
onFloorChange(flr);
|
|
}
|
|
|
|
const subMenuStyle = {
|
|
marginLeft: floor === 4? "400px" : "0",
|
|
};
|
|
|
|
const colorStyle = {
|
|
right: floor === 4? "0px" : "400px",
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="bgKilnInner"
|
|
style={{
|
|
width: "100%",
|
|
position: "absolute",
|
|
top: "12%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
{/* 时间火向数据 */}
|
|
{floor === 4 && (
|
|
<div
|
|
className="fireAndTime"
|
|
style={{ position: "absolute", top: "-112px", height: "400px" }}
|
|
>
|
|
<Chart1 />
|
|
</div>
|
|
)}
|
|
{floor!== 4 && (
|
|
<div
|
|
className="fireAndTime"
|
|
style={{ position: "absolute", top: "-112px", height: "212px" }}
|
|
>
|
|
<Chart2 />
|
|
</div>
|
|
)}
|
|
|
|
{/* menu */}
|
|
<div
|
|
className="subMenu"
|
|
style={{
|
|
display: "flex",
|
|
marginBottom: "24px",
|
|
...subMenuStyle,
|
|
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
|
|
className={
|
|
"flr flr1 " + cls.menuItem + " " + (floor === 4? cls.active : "")
|
|
}
|
|
onClick={() => onFloorUpdate(4)}
|
|
>
|
|
窑炉预测
|
|
</div>
|
|
</div>
|
|
|
|
{/* 颜色指示图 */}
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: "30px",
|
|
...colorStyle,
|
|
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;
|