update 一层温度
This commit is contained in:
lb
26
src/components/Common/BlueRect/index.jsx
Normal file
26
src/components/Common/BlueRect/index.jsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import cls from "./index.module.css";
|
||||
|
||||
function BlueRect(props) {
|
||||
const title = props.title || "DEFAULT";
|
||||
const value = props.value || "0℃";
|
||||
return (
|
||||
<div className={`${cls.blueRect} ${cls[title]}`} style={{}}>
|
||||
<span
|
||||
className="title"
|
||||
style={{
|
||||
fontSize: "18px",
|
||||
lineHeight: "24px",
|
||||
color: props.blue ? "#40afb8" : "#fff",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</span>
|
||||
<span className="value" style={{ fontSize: "22px" }}>
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlueRect;
|
||||
268
src/components/Common/BlueRect/index.module.css
Normal file
268
src/components/Common/BlueRect/index.module.css
Normal file
@@ -0,0 +1,268 @@
|
||||
.blueRect {
|
||||
display: inline-block;
|
||||
width: 106px;
|
||||
height: 68px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 6px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
background: #0a426820;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.blueRect::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent 0%,
|
||||
transparent 50%,
|
||||
#24aebb 100%
|
||||
);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.blueRect::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#24aebb 0%,
|
||||
transparent 50%,
|
||||
transparent 100%
|
||||
);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/** left **/
|
||||
|
||||
.TE271 {
|
||||
top: 160px;
|
||||
left: 80px;
|
||||
}
|
||||
.TE272 {
|
||||
top: 254px; /* +94px */
|
||||
left: 80px;
|
||||
}
|
||||
.TE273 {
|
||||
top: 348px; /* +94px */
|
||||
left: 80px;
|
||||
}
|
||||
.TE274 {
|
||||
top: 442px;
|
||||
left: 80px;
|
||||
}
|
||||
.TE279 {
|
||||
top: 536px;
|
||||
left: 80px;
|
||||
}
|
||||
.TE275 {
|
||||
top: 160px;
|
||||
left: 216px;
|
||||
}
|
||||
.TE276 {
|
||||
top: 254px;
|
||||
left: 216px; /* +136px */
|
||||
}
|
||||
.TE277 {
|
||||
top: 348px; /* +94px */
|
||||
left: 216px; /* +136px */
|
||||
}
|
||||
.TE278 {
|
||||
top: 442px; /* +94px */
|
||||
left: 216px; /* +136px */
|
||||
}
|
||||
.TE280 {
|
||||
top: 536px; /* +94px */
|
||||
left: 216px; /* +136px */
|
||||
}
|
||||
|
||||
/** center top **/
|
||||
.TE227 {
|
||||
top: 128px;
|
||||
left: 616px;
|
||||
}
|
||||
.TE229 {
|
||||
top: 128px;
|
||||
left: 736px; /* +120px */
|
||||
}
|
||||
.TE231 {
|
||||
top: 128px;
|
||||
left: 856px;
|
||||
}
|
||||
.TE233 {
|
||||
top: 128px;
|
||||
left: 976px;
|
||||
}
|
||||
.TE235 {
|
||||
top: 128px;
|
||||
left: 1096px;
|
||||
}
|
||||
.TE237 {
|
||||
top: 128px;
|
||||
left: 1216px;
|
||||
}
|
||||
.TE239 {
|
||||
top: 128px;
|
||||
left: 1336px;
|
||||
}
|
||||
.TE241 {
|
||||
top: 128px;
|
||||
left: 1456px;
|
||||
}
|
||||
|
||||
/** center bottom **/
|
||||
.TE228 {
|
||||
top: 620px;
|
||||
left: 588px;
|
||||
}
|
||||
.TE230 {
|
||||
top: 620px;
|
||||
left: 710px;
|
||||
}
|
||||
.TE232 {
|
||||
top: 620px;
|
||||
left: 830px;
|
||||
}
|
||||
.TE234 {
|
||||
top: 620px;
|
||||
left: 950px;
|
||||
}
|
||||
.TE236 {
|
||||
top: 620px;
|
||||
left: 1070px;
|
||||
}
|
||||
.TE238 {
|
||||
top: 620px;
|
||||
left: 1190px;
|
||||
}
|
||||
.TE240 {
|
||||
top: 620px;
|
||||
left: 1310px;
|
||||
}
|
||||
.TE242 {
|
||||
top: 620px;
|
||||
left: 1430px;
|
||||
}
|
||||
|
||||
/** center middle **/
|
||||
.TE201 {
|
||||
top: 390px;
|
||||
left: 450px;
|
||||
}
|
||||
.TE202 {
|
||||
top: 390px;
|
||||
left: 580px;
|
||||
}
|
||||
.TE203 {
|
||||
top: 390px;
|
||||
left: 710px;
|
||||
}
|
||||
.TE204 {
|
||||
top: 390px;
|
||||
left: 840px;
|
||||
}
|
||||
.TE205 {
|
||||
top: 390px;
|
||||
left: 970px;
|
||||
}
|
||||
.TE206 {
|
||||
top: 390px;
|
||||
left: 1100px;
|
||||
}
|
||||
.TE207 {
|
||||
top: 340px;
|
||||
left: 1260px;
|
||||
}
|
||||
.TE208 {
|
||||
top: 390px;
|
||||
left: 1260px;
|
||||
}
|
||||
.TE209 {
|
||||
top: 480px;
|
||||
left: 1260px;
|
||||
}
|
||||
.TE210 {
|
||||
top: 390px;
|
||||
left: 1390px;
|
||||
}
|
||||
.TE211 {
|
||||
top: 390px;
|
||||
left: 1530px;
|
||||
}
|
||||
.TE212 {
|
||||
top: 390px;
|
||||
left: 1660px;
|
||||
}
|
||||
.TE213 {
|
||||
top: 390px;
|
||||
left: 1790px;
|
||||
}
|
||||
|
||||
/** right **/
|
||||
.TE214 {
|
||||
top: 160px;
|
||||
left: 2000px;
|
||||
}
|
||||
.TE215 {
|
||||
top: 265px;
|
||||
left: 2020px;
|
||||
}
|
||||
.TE216 {
|
||||
top: 400px;
|
||||
left: 2030px;
|
||||
}
|
||||
.TE217 {
|
||||
top: 535px;
|
||||
left: 2050px;
|
||||
}
|
||||
.TE218 {
|
||||
top: 670px;
|
||||
left: 2080px;
|
||||
}
|
||||
.TE219 {
|
||||
top: 160px;
|
||||
left: 2120px;
|
||||
}
|
||||
.TE220 {
|
||||
top: 265px;
|
||||
left: 2140px;
|
||||
}
|
||||
.TE221 {
|
||||
top: 400px;
|
||||
left: 2150px;
|
||||
}
|
||||
.TE222 {
|
||||
top: 535px;
|
||||
left: 2170px;
|
||||
}
|
||||
.TE223 {
|
||||
top: 670px;
|
||||
left: 2200px;
|
||||
}
|
||||
.TE224 {
|
||||
top: 265px;
|
||||
left: 2240px;
|
||||
}
|
||||
.TE225 {
|
||||
top: 400px;
|
||||
left: 2310px;
|
||||
}
|
||||
.TE226 {
|
||||
top: 535px;
|
||||
left: 2280px;
|
||||
}
|
||||
26
src/components/Common/TemperatureTop/index.jsx
Normal file
26
src/components/Common/TemperatureTop/index.jsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import BlueRect from "../BlueRect";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
function TemperatureTop(props) {
|
||||
const tempTop = useSelector((state) => state.temperature.top);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="temperature-top"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "0",
|
||||
left: "0",
|
||||
width: "100%",
|
||||
height: "95vh",
|
||||
background: "#ccc3",
|
||||
}}
|
||||
>
|
||||
{Object.keys(tempTop).map((d) => (
|
||||
<BlueRect title={d} value={tempTop[d]} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TemperatureTop;
|
||||
@@ -1,68 +1,72 @@
|
||||
import { useState } from 'react';
|
||||
import cls from './index.module.css';
|
||||
import Chart2 from '../../../Common/TimeFireDir';
|
||||
import VideoContainer from './VideoContainer';
|
||||
import { useState } from "react";
|
||||
import cls from "./index.module.css";
|
||||
import Chart2 from "../../../Common/TimeFireDir";
|
||||
import VideoContainer from "./VideoContainer";
|
||||
import TemperatureTop from "../../../Common/TemperatureTop";
|
||||
|
||||
function KilnCenter() {
|
||||
const [floor, setFloor] = useState(0);
|
||||
const [floor, setFloor] = useState(0);
|
||||
|
||||
function onFloorUpdate(flr) {
|
||||
setFloor(flr);
|
||||
}
|
||||
function onFloorUpdate(flr) {
|
||||
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>
|
||||
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>
|
||||
{/* 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>
|
||||
|
||||
{/* video */}
|
||||
<VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} />
|
||||
{/* 覆盖层温度信息 */}
|
||||
<TemperatureTop />
|
||||
|
||||
{/* <div className={cls.videoLayer2}></div> */}
|
||||
{/* video */}
|
||||
<VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} />
|
||||
|
||||
{/* left side */}
|
||||
{/* <div
|
||||
{/* <div className={cls.videoLayer2}></div> */}
|
||||
|
||||
{/* left side */}
|
||||
{/* <div
|
||||
className="leftSide"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
@@ -118,8 +122,8 @@ function KilnCenter() {
|
||||
style={{ background: '#ccc', width: '200px', height: '100px' }}
|
||||
></div>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default KilnCenter;
|
||||
|
||||
@@ -70,7 +70,7 @@ function EnterToFloorOne(props) {
|
||||
></video>
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
{/* <motion.div
|
||||
className={cls.videoLayer1}
|
||||
key="eto1div"
|
||||
style={{
|
||||
@@ -82,7 +82,7 @@ function EnterToFloorOne(props) {
|
||||
opacity: [0, 0, 0, 0.6, 1],
|
||||
transition: { duration: 0.3, delay: 2 },
|
||||
}}
|
||||
></motion.div>
|
||||
></motion.div> */}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
Reference in New Issue
Block a user