done 当前温度

src/components/Common/CurrentTemp/index.jsx

@@ -1,6 +1,10 @@
 import GraphBase from "../GraphBase";
+import "./font.css";
 import cls from "./index.module.css";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { Tooltip, Button } from "antd";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { useSelector } from "react-redux";
 
 const SmallBox = (props) => {
   return (
@@ -27,7 +31,7 @@ const SmallBox = (props) => {
             width: "2px",
             height: "80%",
             top: "10%",
-            left: "50%",
+            left: "45%",
             background:
               "linear-gradient(to bottom, transparent, #fff3, #fffa, #fff3, transparent)",
           }}
@@ -39,17 +43,26 @@ const SmallBox = (props) => {
 };
 
 function WindFrequence(props) {
-  const [dataSource, setDataSource] = useState("风机");
+  const [dataSource, setDataSource] = useState("1线");
+  const [currentLineTemp, setCurrentLineTemp] = useState([]);
+  const currentTempList = useSelector((state) => state.annealTemperature?.data);
 
-  function handleSourceChange(v) {
-    console.log("val", v);
+  function handleSourceChange(line) {
+    console.log("line changed", line);
+    setDataSource(line);
   }
 
+  useEffect(() => {
+    setCurrentLineTemp(
+      (currentTempList && currentTempList[dataSource.replace("线", "#")]) || []
+    );
+  }, [dataSource]);
+
   return (
     <GraphBase
       icon="pause"
       title="当前温度"
-      dateOptions={["风机", "风阀", "电加热"]}
+      dateOptions={["1线", "2线", "3线", "4线", "5线"]}
       onDateChange={handleSourceChange}
       size={["middle", "long"]}
     >
@@ -57,75 +70,130 @@ function WindFrequence(props) {
         <SmallBox>
           <h1 className={cls.areaName}>A1区板上</h1>
           <div className={cls.areaContent}>
-            <span className={cls.areaValue}>123.8℃</span>
-            <span className={cls.areaValue}>123.8℃</span>
-            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[0] || 0} ℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[1] || 0} ℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[2] || 0} ℃</span>
           </div>
         </SmallBox>
         <SmallBox>
-          <h1 className={cls.areaName}>A1区板上</h1>
+          <h1 className={cls.areaName}>A2区板上</h1>
           <div className={cls.areaContent}>
-            <span className={cls.areaValue}>123.8℃</span>
-            <span className={cls.areaValue}>123.8℃</span>
-            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[6] || 0} ℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[7] || 0} ℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[8] || 0} ℃</span>
           </div>
         </SmallBox>
         <SmallBox>
-          <h1 className={cls.areaName}>A1区板上</h1>
+          <h1 className={cls.areaName}>B区板上</h1>
           <div className={cls.areaContent}>
-            <span className={cls.areaValue}>123.8℃</span>
-            <span className={cls.areaValue}>123.8℃</span>
-            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[12] || 0} ℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[13] || 0} ℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[14] || 0} ℃</span>
           </div>
         </SmallBox>
         <SmallBox>
-          <h1 className={cls.areaName}>A1区板上</h1>
+          <h1 className={cls.areaName}>C区板上</h1>
           <div className={cls.areaContent}>
-            <span className={cls.areaValue}>123.8℃</span>
-            <span className={cls.areaValue}>123.8℃</span>
-            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[18] || 0} ℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[19] || 0} ℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[20] || 0} ℃</span>
           </div>
         </SmallBox>
         <SmallBox>
-          <h1 className={cls.areaName}>A1区板上</h1>
+          <h1 className={cls.areaName}>A1区板下</h1>
           <div className={cls.areaContent}>
-            <span className={cls.areaValue}>123.8℃</span>
-            <span className={cls.areaValue}>123.8℃</span>
-            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[3] || 0} ℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[4] || 0} ℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[5] || 0} ℃</span>
           </div>
         </SmallBox>
-        <SmallBox split={false}>
+        <SmallBox>
+          <h1 className={cls.areaName}>A2区板下</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>{currentLineTemp[9] || 0} ℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[10] || 0} ℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[11] || 0} ℃</span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>B区板下</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>{currentLineTemp[15] || 0} ℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[16] || 0} ℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[17] || 0} ℃</span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>C区板下</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>{currentLineTemp[21] || 0} ℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[22] || 0} ℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[23] || 0} ℃</span>
+          </div>
+        </SmallBox>
+        <SmallBox split={false} style={{ position: "relative" }}>
           <div className={cls.areaPureContent}>
-            <span className={cls.areaPureValue}>123.8℃</span>
-            <span className={cls.areaPureValue}>123.8℃</span>
-            <span className={cls.areaPureValue}>123.8℃</span>
+            <div
+              className="hint"
+              style={{ position: "absolute", top: "0", right: "0" }}
+            >
+              <Tooltip title="红外温度">
+                <Button
+                  shape="circle"
+                  type="text"
+                  style={{ color: "#cccc" }}
+                  icon={<InfoCircleOutlined />}
+                ></Button>
+              </Tooltip>
+            </div>
+            <span className={cls.areaPureValue}>
+              {currentLineTemp[26] || 0} ℃
+            </span>
+            <span className={cls.areaPureValue}>
+              {currentLineTemp[27] || 0} ℃
+            </span>
+            <span className={cls.areaPureValue}>
+              {currentLineTemp[28] || 0} ℃
+            </span>
           </div>
         </SmallBox>
-        <SmallBox>
-          <h1 className={cls.areaName}>A1区板上</h1>
-          <div className={cls.areaContent}>
-            <span className={cls.areaValue}>123.8℃</span>
-            <span className={cls.areaValue}>123.8℃</span>
-            <span className={cls.areaValue}>123.8℃</span>
-          </div>
-        </SmallBox>
-        <SmallBox split={false}>
+
+        <SmallBox split={false} style={{ position: "relative" }}>
           <div className={cls.areaPureContent}>
-            <span className={cls.areaPureValue}>123.8℃</span>
-            <span className={cls.areaPureValue}>123.8℃</span>
-            <span className={cls.areaPureValue}>123.8℃</span>
+            <div
+              className="hint"
+              style={{ position: "absolute", top: "0", right: "0" }}
+            >
+              <Tooltip title="压延机冷却水温度 | 过度辊台冷却水温度 | 唇砖冷却水温度">
+                <Button
+                  shape="circle"
+                  type="text"
+                  style={{ color: "#cccc" }}
+                  icon={<InfoCircleOutlined />}
+                ></Button>
+              </Tooltip>
+            </div>
+            <span className={cls.areaPureValue}>
+              {currentLineTemp[29] || 0} ℃
+            </span>
+            <span className={cls.areaPureValue}>
+              {currentLineTemp[30] || 0} ℃
+            </span>
+            <span className={cls.areaPureValue}>
+              {currentLineTemp[31] || 0} ℃
+            </span>
           </div>
         </SmallBox>
         <SmallBox>
-          <h1 className={cls.areaName}>A1区板上</h1>
+          <h1 className={cls.areaName}>RET1区</h1>
           <div className={cls.areaContent}>
-            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[24] || 0} ℃</span>
           </div>
         </SmallBox>
         <SmallBox>
-          <h1 className={cls.areaName}>A1区板上</h1>
+          <h1 className={cls.areaName}>RET2区</h1>
           <div className={cls.areaContent}>
-            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>{currentLineTemp[25] || 0} ℃</span>
           </div>
         </SmallBox>
       </div>