update一层温度

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);
+}

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 (
+    <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;

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
       }}

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 },
             }}
           ></motion.div> */}
-          {/* <TemperatureTop
+          <TemperatureBottom
             style={{
               top: "208px",
               left: "638px",
               width: "2380px",
               zIndex: 0,
             }}
-          /> */}
+          />
         </motion.div>
       )}
     </AnimatePresence>

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 },
             }}
           ></motion.div> */}
+
+          <TemperatureBottom
+            style={{
+              top: "208px",
+              left: "638px",
+              width: "2380px",
+              zIndex: 0,
+            }}
+          />
         </motion.div>
       )}
-      {/* style={{
-          top: "208px",
-          left: "638px",
-          width: "2380px",
-          zIndex: 0,
-        }} */}
-      {/* <TemperatureTop /> */}
     </AnimatePresence>
   );
 }