update 一层温度

src/components/Common/BlueRect/index.jsx

@@ -4,7 +4,12 @@ function BlueRect(props) {
   const title = props.title || "DEFAULT";
   const value = props.value || "0℃";
   return (
-    <div className={`${cls.blueRect} ${cls[title]}`} style={{}}>
+    <div
+      className={`${cls.blueRect} ${cls[title]}`}
+      style={{
+        background: props.blue ? "#0a4268ee" : "#0a426860",
+      }}
+    >
       <span
         className="title"
         style={{
@@ -12,11 +17,12 @@ function BlueRect(props) {
           lineHeight: "24px",
           color: props.blue ? "#40afb8" : "#fff",
           fontWeight: 600,
+          userSelect: "none",
         }}
       >
         {title}
       </span>
-      <span className="value" style={{ fontSize: "22px" }}>
+      <span className="value" style={{ userSelect: "none", fontSize: "22px" }}>
         {value}
       </span>
     </div>

src/components/Common/BlueRect/index.module.css

@@ -136,80 +136,93 @@
 }
 .TE232 {
   top: 620px;
-  left: 830px;
+  left: 836px;
 }
 .TE234 {
   top: 620px;
-  left: 950px;
+  left: 965px;
 }
 .TE236 {
   top: 620px;
-  left: 1070px;
+  left: 1090px;
 }
 .TE238 {
   top: 620px;
-  left: 1190px;
+  left: 1215px;
 }
 .TE240 {
   top: 620px;
-  left: 1310px;
+  left: 1340px;
 }
 .TE242 {
   top: 620px;
-  left: 1430px;
+  left: 1460px;
 }
 
 /** center middle **/
 .TE201 {
-  top: 390px;
+  top: 410px;
+  transform: rotate(-1deg);
   left: 450px;
 }
 .TE202 {
-  top: 390px;
+  top: 410px;
+  transform: rotate(-1deg);
   left: 580px;
 }
 .TE203 {
-  top: 390px;
+  top: 410px;
+  transform: rotate(-1deg);
   left: 710px;
 }
 .TE204 {
-  top: 390px;
+  top: 410px;
+  transform: rotate(-1deg);
   left: 840px;
 }
 .TE205 {
-  top: 390px;
+  top: 410px;
+  transform: rotate(-1deg);
   left: 970px;
 }
 .TE206 {
-  top: 390px;
+  top: 410px;
+  transform: rotate(-1deg);
   left: 1100px;
 }
 .TE207 {
-  top: 340px;
+  top: 335px;
+  transform: rotate(-1deg);
   left: 1260px;
 }
 .TE208 {
-  top: 390px;
+  top: 410px;
+  transform: rotate(-1deg);
   left: 1260px;
 }
 .TE209 {
-  top: 480px;
+  top: 485px;
+  transform: rotate(-1deg);
   left: 1260px;
 }
 .TE210 {
-  top: 390px;
+  top: 410px;
+  transform: rotate(-1deg);
   left: 1390px;
 }
 .TE211 {
-  top: 390px;
+  top: 410px;
+  transform: rotate(-1deg);
   left: 1530px;
 }
 .TE212 {
-  top: 390px;
+  top: 410px;
+  transform: rotate(-1deg);
   left: 1660px;
 }
 .TE213 {
-  top: 390px;
+  top: 410px;
+  transform: rotate(-1deg);
   left: 1790px;
 }
 

src/components/Common/TemperatureTop/index.jsx

@@ -1,11 +1,25 @@
 import BlueRect from "../BlueRect";
 import { useSelector } from "react-redux";
+import { motion, AnimatePresence } from "framer-motion";
+
+const blueTe = [
+  "TE271",
+  "TE272",
+  "TE273",
+  "TE274",
+  "TE275",
+  "TE276",
+  "TE277",
+  "TE278",
+  "TE279",
+  "TE280",
+];
 
 function TemperatureTop(props) {
   const tempTop = useSelector((state) => state.temperature.top);
 
   return (
-    <div
+    <motion.div
       className="temperature-top"
       style={{
         position: "absolute",
@@ -14,12 +28,18 @@ function TemperatureTop(props) {
         width: "100%",
         height: "95vh",
         background: "#ccc3",
+        zIndex: "-1",
+        ...props.style
+      }}
+      animate={{
+        opacity: [0, 0, 0, 0.6, 1],
+        transition: { duration: 0.3, delay: 2 },
       }}
     >
       {Object.keys(tempTop).map((d) => (
-        <BlueRect title={d} value={tempTop[d]} />
+        <BlueRect title={d} value={tempTop[d]} blue={blueTe.includes(d)} />
       ))}
-    </div>
+    </motion.div>
   );
 }
 

src/components/Modules/KilnInner/Center/index.jsx

@@ -58,7 +58,7 @@ function KilnCenter() {
       </div>
 
       {/* 覆盖层温度信息  */}
-      <TemperatureTop />
+      {/* <TemperatureTop /> */}
 
       {/* video  */}
       <VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} />

src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx

@@ -2,11 +2,10 @@ import { motion, AnimatePresence } from "framer-motion";
 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 { useContext } from "react";
+import TemperatureTop from "../../../../../components/Common/TemperatureTop";
 
 function FloorTwoToOne(props) {
-  // const ctx = useContext(SocketContext);
-
   const ctx = null;
 
   const fireDir = ctx?.runState?.fireDirection || null;
@@ -75,7 +74,7 @@ function FloorTwoToOne(props) {
             ></video>
           )}
 
-          <motion.div
+          {/* <motion.div
             className={cls.videoLayer1}
             key="eto1div"
             style={{
@@ -87,7 +86,15 @@ function FloorTwoToOne(props) {
               opacity: [0, 0, 0, 0.6, 1],
               transition: { duration: 0.3, delay: 2 },
             }}
-          ></motion.div>
+          ></motion.div> */}
+          <TemperatureTop
+            style={{
+              top: "208px",
+              left: "638px",
+              width: "2380px",
+              zIndex: 0
+            }}
+          />
         </motion.div>
       )}
     </AnimatePresence>