@@ -279,3 +279,266 @@ | |||||
top: 520px; | top: 520px; | ||||
left: 2290px; | left: 2290px; | ||||
} | } | ||||
/** 一层 --- 窑底 **/ | |||||
.TE401 { | |||||
top: 420px; | |||||
left: 20px; | |||||
} | |||||
.TE402 { | |||||
top: 420px; | |||||
left: 140px; | |||||
} | |||||
.TE403 { | |||||
top: 420px; | |||||
left: 260px; | |||||
} | |||||
.PE401 { | |||||
top: 320px; | |||||
left: 20px; | |||||
} | |||||
.PE402 { | |||||
top: 320px; | |||||
left: 140px; | |||||
} | |||||
.PE403 { | |||||
top: 320px; | |||||
left: 260px; | |||||
} | |||||
/** center top **/ | |||||
.TE333 { | |||||
top: 128px; | |||||
left: 620px; | |||||
} | |||||
.TE335 { | |||||
top: 128px; | |||||
left: 735px; | |||||
} | |||||
.TE337 { | |||||
top: 128px; | |||||
left: 855px; | |||||
} | |||||
.TE339 { | |||||
top: 128px; | |||||
left: 975px; | |||||
} | |||||
.TE341 { | |||||
top: 128px; | |||||
left: 1090px; | |||||
} | |||||
.TE343 { | |||||
top: 128px; | |||||
left: 1205px; | |||||
} | |||||
.TE345 { | |||||
top: 128px; | |||||
left: 1325px; | |||||
} | |||||
.TE347 { | |||||
top: 128px; | |||||
left: 1440px; | |||||
} | |||||
/** center bottom **/ | |||||
.TE334 { | |||||
top: 620px; | |||||
left: 588px; | |||||
} | |||||
.TE336 { | |||||
top: 620px; | |||||
left: 710px; | |||||
} | |||||
.TE338 { | |||||
top: 620px; | |||||
left: 840px; | |||||
} | |||||
.TE340 { | |||||
top: 620px; | |||||
left: 965px; | |||||
} | |||||
.TE342 { | |||||
top: 620px; | |||||
left: 1090px; | |||||
} | |||||
.TE344 { | |||||
top: 620px; | |||||
left: 1215px; | |||||
} | |||||
.TE346 { | |||||
top: 620px; | |||||
left: 1340px; | |||||
} | |||||
.TE348 { | |||||
top: 620px; | |||||
left: 1460px; | |||||
} | |||||
/** center middle **/ | |||||
.TE301 { | |||||
top: 340px; | |||||
transform: scaleY(0.8) skewX(-5deg); | |||||
left: 450px; | |||||
} | |||||
.TE302 { | |||||
top: 400px; | |||||
transform: scaleY(0.8) skewX(-5deg); | |||||
left: 450px; | |||||
} | |||||
.TE303 { | |||||
top: 460px; | |||||
transform: scaleY(0.8) skewX(-5deg); | |||||
left: 450px; | |||||
} | |||||
.TE304 { | |||||
top: 400px; | |||||
/* transform: scaleY(0.8) skewX(-2deg); */ | |||||
transform: scaleY(0.8) rotate(-1deg) skewX(-2deg); | |||||
left: 580px; | |||||
} | |||||
.TE305 { | |||||
top: 340px; | |||||
/* transform: scaleY(0.8) skewX(-2deg); */ | |||||
transform: scaleY(0.8) rotate(-1deg) skewX(-1deg); | |||||
left: 720px; | |||||
} | |||||
.TE306 { | |||||
top: 400px; | |||||
/* transform: scaleY(0.8) skewX(-2deg); */ | |||||
/* transform: scaleY(0.8) rotate(-1deg); */ | |||||
transform: scaleY(0.8) rotate(-1deg) skewX(-1deg); | |||||
left: 720px; | |||||
} | |||||
.TE307 { | |||||
top: 460px; | |||||
/* transform: scaleY(0.8) rotate(-1deg); */ | |||||
transform: scaleY(0.8) rotate(-1deg) skewX(-1deg); | |||||
left: 720px; | |||||
} | |||||
.TE308 { | |||||
top: 400px; | |||||
transform: scaleY(0.8) rotate(-1deg) skewX(-1deg); | |||||
left: 860px; | |||||
} | |||||
.TE309 { | |||||
top: 400px; | |||||
transform: scaleY(0.8) rotate(-1deg) skewX(-1deg); | |||||
left: 1000px; | |||||
} | |||||
.TE310 { | |||||
top: 400px; | |||||
transform: scaleY(0.8) rotate(-1deg) skewX(-1deg); | |||||
left: 1140px; | |||||
} | |||||
.TE311 { | |||||
top: 340px; | |||||
transform: scaleY(0.8) rotate(-1deg) skewX(-1deg); | |||||
left: 1280px; | |||||
} | |||||
.TE312 { | |||||
top: 400px; | |||||
transform: scaleY(0.8) rotate(-1deg) skewX(-1deg); | |||||
left: 1280px; | |||||
} | |||||
.TE313 { | |||||
top: 460px; | |||||
transform: scaleY(0.8) rotate(-1deg) skewX(-1deg); | |||||
left: 1280px; | |||||
} | |||||
.TE314 { | |||||
top: 400px; | |||||
transform: scaleY(0.8) rotate(-1deg) skewX(-1deg); | |||||
left: 1420px; | |||||
} | |||||
.TE315 { | |||||
top: 400px; | |||||
transform: scaleY(0.8) rotate(-1deg) skewX(-1deg); | |||||
left: 1560px; | |||||
} | |||||
.TE316 { | |||||
top: 400px; | |||||
transform: scaleY(0.8) rotate(-1deg) skewX(-1deg); | |||||
left: 1700px; | |||||
} | |||||
.TE317 { | |||||
top: 340px; | |||||
transform: scaleY(0.8) rotate(-1deg) skewX(-1deg); | |||||
left: 1840px; | |||||
} | |||||
.TE318 { | |||||
top: 400px; | |||||
transform: scaleY(0.8) rotate(-1deg) skewX(-1deg); | |||||
left: 1840px; | |||||
} | |||||
.TE319 { | |||||
top: 460px; | |||||
transform: scaleY(0.8) rotate(-1deg) skewX(-1deg); | |||||
left: 1840px; | |||||
} | |||||
/** right **/ | |||||
.TE327 { | |||||
top: 152px; | |||||
left: 2000px; | |||||
transform: scale(0.8) skewX(5deg); | |||||
} | |||||
.TE320 { | |||||
top: 252px; | |||||
left: 2020px; | |||||
transform: scale(0.8) skewX(7deg); | |||||
} | |||||
.TE321 { | |||||
top: 400px; | |||||
left: 2040px; | |||||
transform: scale(0.8) skewX(7deg); | |||||
} | |||||
.TE322 { | |||||
top: 532px; | |||||
left: 2060px; | |||||
transform: scale(0.8) skewX(7deg); | |||||
} | |||||
.TE330 { | |||||
top: 656px; | |||||
left: 2080px; | |||||
transform: scale(0.8) skewX(7deg); | |||||
} | |||||
.TE323 { | |||||
top: 152px; | |||||
left: 2100px; | |||||
transform: scale(0.8) skewX(7deg); | |||||
} | |||||
.TE328 { | |||||
top: 252px; | |||||
left: 2120px; | |||||
transform: scale(0.8) skewX(7deg); | |||||
} | |||||
.TE331 { | |||||
top: 400px; | |||||
left: 2140px; | |||||
transform: scale(0.8) skewX(7deg); | |||||
} | |||||
.TE329 { | |||||
top: 532px; | |||||
left: 2160px; | |||||
transform: scale(0.8) skewX(7deg); | |||||
} | |||||
.TE326 { | |||||
top: 656px; | |||||
left: 2180px; | |||||
transform: scale(0.8) skewX(7deg); | |||||
} | |||||
.TE324 { | |||||
top: 252px; | |||||
left: 2220px; | |||||
transform: scale(0.8) skewX(7deg); | |||||
} | |||||
.TE332 { | |||||
top: 400px; | |||||
left: 2260px; | |||||
transform: scale(0.8) skewX(7deg); | |||||
} | |||||
.TE325 { | |||||
top: 532px; | |||||
left: 2260px; | |||||
transform: scale(0.8) skewX(7deg); | |||||
} |
@@ -0,0 +1,41 @@ | |||||
import BlueRect from "../BlueRect"; | |||||
import { useSelector } from "react-redux"; | |||||
import { motion, AnimatePresence } from "framer-motion"; | |||||
const blueTe = [ | |||||
"TE401", | |||||
"TE402", | |||||
"TE403", | |||||
"PE401", | |||||
"PE402", | |||||
"PE403", | |||||
]; | |||||
function TemperatureBottom(props) { | |||||
const tempBottom = useSelector((state) => state.temperature.bottom); | |||||
return ( | |||||
<motion.div | |||||
className="temperature-bottom" | |||||
style={{ | |||||
position: "absolute", | |||||
top: "0", | |||||
left: "0", | |||||
width: "100%", | |||||
height: "80vh", | |||||
zIndex: "-1", | |||||
...props.style | |||||
}} | |||||
animate={{ | |||||
opacity: [0, 0, 0, 0.6, 1], | |||||
transition: { duration: 0.3, delay: 2 }, | |||||
}} | |||||
> | |||||
{Object.keys(tempBottom).map((d) => ( | |||||
<BlueRect title={d} value={tempBottom[d]} blue={blueTe.includes(d)} /> | |||||
))} | |||||
</motion.div> | |||||
); | |||||
} | |||||
export default TemperatureBottom; |
@@ -27,7 +27,6 @@ function TemperatureTop(props) { | |||||
left: "0", | left: "0", | ||||
width: "100%", | width: "100%", | ||||
height: "80vh", | height: "80vh", | ||||
background: "#ccc3", | |||||
zIndex: "-1", | zIndex: "-1", | ||||
...props.style | ...props.style | ||||
}} | }} | ||||
@@ -2,7 +2,8 @@ import { motion, AnimatePresence } from "framer-motion"; | |||||
import { useRef, useEffect, useMemo, useCallback, useState } from "react"; | import { useRef, useEffect, useMemo, useCallback, useState } from "react"; | ||||
import cls from "../index.module.css"; | import cls from "../index.module.css"; | ||||
// import SocketContext from '../../../../../store/socket-data-provider'; | // import SocketContext from '../../../../../store/socket-data-provider'; | ||||
import TemperatureTop from "../../../../Common/TemperatureTop"; | |||||
// import TemperatureTop from "../../../../Common/TemperatureTop"; | |||||
import TemperatureBottom from "../../../../Common/TemperatureBottom"; | |||||
function EnterToFloorOne(props) { | function EnterToFloorOne(props) { | ||||
// const ctx = useContext(SocketContext); | // const ctx = useContext(SocketContext); | ||||
@@ -83,14 +84,14 @@ function EnterToFloorOne(props) { | |||||
transition: { duration: 0.3, delay: 2 }, | transition: { duration: 0.3, delay: 2 }, | ||||
}} | }} | ||||
></motion.div> */} | ></motion.div> */} | ||||
{/* <TemperatureTop | |||||
<TemperatureBottom | |||||
style={{ | style={{ | ||||
top: "208px", | top: "208px", | ||||
left: "638px", | left: "638px", | ||||
width: "2380px", | width: "2380px", | ||||
zIndex: 0, | zIndex: 0, | ||||
}} | }} | ||||
/> */} | |||||
/> | |||||
</motion.div> | </motion.div> | ||||
)} | )} | ||||
</AnimatePresence> | </AnimatePresence> | ||||
@@ -3,7 +3,8 @@ import { useRef, useEffect, useMemo, useState } from "react"; | |||||
import cls from "../index.module.css"; | import cls from "../index.module.css"; | ||||
// import SocketContext from '../../../../../store/socket-data-provider'; | // import SocketContext from '../../../../../store/socket-data-provider'; | ||||
// import { useContext } from "react"; | // import { useContext } from "react"; | ||||
import TemperatureTop from "../../../../../components/Common/TemperatureTop"; | |||||
// import TemperatureTop from "../../../../../components/Common/TemperatureTop"; | |||||
import TemperatureBottom from "../../../../Common/TemperatureBottom"; | |||||
function FloorTwoToOne(props) { | function FloorTwoToOne(props) { | ||||
const ctx = null; | const ctx = null; | ||||
@@ -87,15 +88,17 @@ function FloorTwoToOne(props) { | |||||
transition: { duration: 0.3, delay: 2 }, | transition: { duration: 0.3, delay: 2 }, | ||||
}} | }} | ||||
></motion.div> */} | ></motion.div> */} | ||||
<TemperatureBottom | |||||
style={{ | |||||
top: "208px", | |||||
left: "638px", | |||||
width: "2380px", | |||||
zIndex: 0, | |||||
}} | |||||
/> | |||||
</motion.div> | </motion.div> | ||||
)} | )} | ||||
{/* style={{ | |||||
top: "208px", | |||||
left: "638px", | |||||
width: "2380px", | |||||
zIndex: 0, | |||||
}} */} | |||||
{/* <TemperatureTop /> */} | |||||
</AnimatePresence> | </AnimatePresence> | ||||
); | ); | ||||
} | } | ||||