From 52f028d80604c7d8837e00293c45f107099bfa67 Mon Sep 17 00:00:00 2001 From: lb Date: Fri, 1 Dec 2023 15:15:10 +0800 Subject: [PATCH] =?UTF-8?q?update=E4=B8=80=E5=B1=82=E6=B8=A9=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/BlueRect/index.module.css | 263 ++++++++++++++++++ .../Common/TemperatureBottom/index.jsx | 41 +++ .../Common/TemperatureTop/index.jsx | 1 - .../Center/videoComponents/EnterToFloor1.jsx | 7 +- .../Center/videoComponents/Floor2To1.jsx | 19 +- 5 files changed, 319 insertions(+), 12 deletions(-) create mode 100644 src/components/Common/TemperatureBottom/index.jsx diff --git a/src/components/Common/BlueRect/index.module.css b/src/components/Common/BlueRect/index.module.css index db672da..b830ebc 100644 --- a/src/components/Common/BlueRect/index.module.css +++ b/src/components/Common/BlueRect/index.module.css @@ -279,3 +279,266 @@ top: 520px; 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); +} diff --git a/src/components/Common/TemperatureBottom/index.jsx b/src/components/Common/TemperatureBottom/index.jsx new file mode 100644 index 0000000..f23609b --- /dev/null +++ b/src/components/Common/TemperatureBottom/index.jsx @@ -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 ( + + {Object.keys(tempBottom).map((d) => ( + + ))} + + ); +} + +export default TemperatureBottom; diff --git a/src/components/Common/TemperatureTop/index.jsx b/src/components/Common/TemperatureTop/index.jsx index b7bc88d..6123da2 100644 --- a/src/components/Common/TemperatureTop/index.jsx +++ b/src/components/Common/TemperatureTop/index.jsx @@ -27,7 +27,6 @@ function TemperatureTop(props) { left: "0", width: "100%", height: "80vh", - background: "#ccc3", zIndex: "-1", ...props.style }} diff --git a/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx b/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx index 3647f54..b04a74a 100644 --- a/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx +++ b/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx @@ -2,7 +2,8 @@ import { motion, AnimatePresence } from "framer-motion"; import { useRef, useEffect, useMemo, useCallback, useState } from "react"; import cls from "../index.module.css"; // 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) { // const ctx = useContext(SocketContext); @@ -83,14 +84,14 @@ function EnterToFloorOne(props) { transition: { duration: 0.3, delay: 2 }, }} > */} - {/* */} + /> )} diff --git a/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx b/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx index 5efe56e..a0584b1 100644 --- a/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx +++ b/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx @@ -3,7 +3,8 @@ import { useRef, useEffect, useMemo, useState } from "react"; import cls from "../index.module.css"; // import SocketContext from '../../../../../store/socket-data-provider'; // import { useContext } from "react"; -import TemperatureTop from "../../../../../components/Common/TemperatureTop"; +// import TemperatureTop from "../../../../../components/Common/TemperatureTop"; +import TemperatureBottom from "../../../../Common/TemperatureBottom"; function FloorTwoToOne(props) { const ctx = null; @@ -87,15 +88,17 @@ function FloorTwoToOne(props) { transition: { duration: 0.3, delay: 2 }, }} > */} + + )} - {/* style={{ - top: "208px", - left: "638px", - width: "2380px", - zIndex: 0, - }} */} - {/* */} ); }