done 当前温度

src/components/Common/CurrentTemp/font.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: "HelloFont WenYiHei";
+  /* font-style: normal;
+  font-weight: 400; */
+  src: url("./ziyou.ttf");
+  /* font-display: swap; */
+}

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>

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

@@ -1,139 +1,141 @@
 .chart {
-	height: 100%;
+  height: 100%;
 }
 
 .gas {
-	position: relative;
+  position: relative;
 }
 
 .currentFlow {
-	position: absolute;
-	top: 20px;
-	left: 50%;
-	transform: translateX(-50%);
-	padding: 8px 22px;
-	border-radius: 2px;
-	letter-spacing: 2px;
-	box-shadow: inset 0 0 22px 0px hsla(0, 0%, 100%, 0.15);
-	line-height: 18px;
-	font-size: 18px;
-	text-align: center;
-	color: #12fff5;
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px 22px;
+  border-radius: 2px;
+  letter-spacing: 2px;
+  box-shadow: inset 0 0 22px 0px hsla(0, 0%, 100%, 0.15);
+  line-height: 18px;
+  font-size: 18px;
+  text-align: center;
+  color: #12fff5;
 }
 
 .floatHead {
-	position: absolute;
-	top: 22px;
-	right: 24px;
-	height: 32px;
-	width: 410px;
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
+  position: absolute;
+  top: 22px;
+  right: 24px;
+  height: 32px;
+  width: 410px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 }
 
 .mainContent {
-	padding-top: 16px;
+  padding-top: 16px;
 }
 
 .alignRight {
-	text-align: right;
-	justify-self: flex-end;
+  text-align: right;
+  justify-self: flex-end;
 }
 
 .grid {
-	display: grid;
-	gap: 6px;
-	grid-template-columns: repeat(2, minmax(100px, 1fr));
-	grid-auto-rows: minmax(64px, min-content);
+  display: grid;
+  gap: 6px;
+  grid-template-columns: repeat(2, minmax(100px, 1fr));
+  grid-auto-rows: minmax(64px, min-content);
 }
 
 .areaName {
-	color: #fff;
-	font-size: 20px;
-	line-height: 1;
-	letter-spacing: 1.5px;
-	margin: 0;
-	padding-left: 20px;
-	width: 50%;
+  color: #fff;
+  font-size: 18px;
+  line-height: 1;
+  letter-spacing: 1.5px;
+  margin: 0;
+  padding-left: 20px;
+  width: 50%;
 }
 
 .areaPureContent {
-	display: flex;
+  display: flex;
 }
 
 .areaPureValue {
-	padding: 0 8px;
+  padding: 0 8px;
 }
 
-.areaPureValue:not(:first-child) {
-	border-left: 2px solid #fff6;
+span.areaPureValue:not(:first-of-type) {
+  border-left: 2px solid #fff6;
 }
 
 .areaContent {
-	width: 50%;
-	padding-left: 12px;
-	display: flex;
-	flex-direction: column;
+  width: 50%;
+  padding-left: 12px;
+  display: flex;
+  flex-direction: column;
 }
 
 .areaPureValue,
 .areaValue {
-	display: inline-block;
-	font-size: 17px;
-	line-height: 22px;
-	letter-spacing: 1.2px;
+  display: inline-block;
+  font-size: 14px;
+  line-height: 16px;
+  letter-spacing: 1.2px;
+  font-family: "HelloFont WenYiHei", sans-serif;
+  color: #53c2d4;
 }
 
 .switchLabel {
-	color: white;
-	margin-left: 6px;
+  color: white;
+  margin-left: 6px;
 }
 
 .legend:last-child {
-	margin-left: 8px;
+  margin-left: 8px;
 }
 
 .legend > span {
-	display: inline-block;
-	color: #dff1fe;
-	font-size: 14px;
-	letter-spacing: 2px;
+  display: inline-block;
+  color: #dff1fe;
+  font-size: 14px;
+  letter-spacing: 2px;
 }
 
 .legend > span:first-child {
-	width: 12px;
-	height: 12px;
-	margin-right: 4px;
-	border-radius: 2px;
+  width: 12px;
+  height: 12px;
+  margin-right: 4px;
+  border-radius: 2px;
 }
 
 .gasIcon {
-	background: #12fff5;
+  background: #12fff5;
 }
 
 .gas2Icon {
-	background: #2760ff;
+  background: #2760ff;
 }
 
 .radioGroup {
-	user-select: none;
+  user-select: none;
 }
 
 .radioGroup * {
-	border: none !important;
-	border-radius: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
 }
 
 .radioGroup *:focus-within {
-	box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 .radioGroup *::before {
-	width: 0 !important;
+  width: 0 !important;
 }
 
 .radioGroup_button_wrapper {
-	color: #fff !important;
-	background: #03233c !important;
+  color: #fff !important;
+  background: #03233c !important;
 }