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

src/components/Common/FanRunFrequence copy/index.jsx

@@ -1,187 +0,0 @@
-// FanRunFrequence
-import cls from "./index.module.css";
-import * as echarts from "echarts";
-import GraphBase from "../GraphBase";
-import { useState } from "react";
-import { useSelector } from "react-redux";
-
-function WindFrequence(props) {
-  const [showChart, setShowChart] = useState(false);
-  const runState = useSelector((state) => state.fanFrequence.runtime);
-  const hisState = useSelector((state) => state.fanFrequence.history);
-
-  let dataList = [];
-  let seriesData = [];
-  const colors = [
-    "#12FFF5",
-    "#2760FF",
-    "#FFD160",
-    "#E80091",
-    "#8064ff",
-    "#ff8a3b",
-    "#8cd26d",
-    "#2aa1ff",
-  ];
-  let options = null;
-  if (showChart) {
-    // keys() 结果不是按照顺序，需要 sort()
-    seriesData =
-      hisState != null
-        ? Object.keys(hisState)
-            .sort()
-            .map((key) => hisState[key])
-        : Array(8)
-            .fill(1)
-            .map((_) => Array(7).fill(0));
-
-    options = {
-      color: colors,
-      grid: { top: 32, right: 12, bottom: 20, left: 48 },
-      xAxis: {
-        type: "category",
-        data: Array(7)
-          .fill(1)
-          .map((_, index) => {
-            const today = new Date();
-            const dtimestamp = today - index * 24 * 60 * 60 * 1000;
-            return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
-              dtimestamp
-            ).getDate()}`;
-          })
-          .reverse(),
-        axisLabel: {
-          color: "#fff",
-          fontSize: 12,
-        },
-        axisTick: { show: false },
-        axisLine: {
-          lineStyle: {
-            width: 1,
-            color: "#213259",
-          },
-        },
-      },
-      yAxis: {
-        name: "单位/m³",
-        nameTextStyle: {
-          color: "#fff",
-          fontSize: 10,
-          align: "right",
-        },
-        type: "value",
-        axisLabel: {
-          color: "#fff",
-          fontSize: 12,
-        },
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: "#213259",
-          },
-        },
-        splitLine: {
-          lineStyle: {
-            color: "#213259a0",
-          },
-        },
-        // interval: 10,
-        // min: 0,
-        // max: 100,
-      },
-      series: seriesData.map((v, i) => ({
-        name: i + 1 + "#风机",
-        data: v,
-        type: "line",
-        symbol: "circle",
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            // i % 8 避免超过8个数据时无颜色的问题
-            { offset: 0, color: colors[i % 8] + "40" },
-            { offset: 0.5, color: colors[i % 8] + "20" },
-            { offset: 1, color: colors[i % 8] + "00" },
-          ]),
-        },
-      })),
-      tooltip: {
-        trigger: "axis",
-      },
-    };
-  } else {
-    dataList =
-      runState != null
-        ? Object.keys(runState).map((fan) => ({
-            id: Math.random(),
-            name: fan,
-            value: runState[fan],
-          }))
-        : [
-            { id: 1, name: "1#风机", value: "0m³/h" },
-            { id: 2, name: "2#风机", value: "0m³/h" },
-            { id: 3, name: "3#风机", value: "0m³/h" },
-            { id: 4, name: "4#风机", value: "0m³/h" },
-            { id: 5, name: "5#风机", value: "0m³/h" },
-            { id: 6, name: "6#风机", value: "0m³/h" },
-            { id: 7, name: "7#风机", value: "0m³/h" },
-            { id: 8, name: "8#风机", value: "0m³/h" },
-            { id: 9, name: "9#风机", value: "0m³/h" },
-            { id: 10, name: "10#风机", value: "0m³/h" },
-            { id: 11, name: "11#风机", value: "0m³/h" },
-            { id: 12, name: "12#风机", value: "0m³/h" },
-            { id: 13, name: "13#风机", value: "0m³/h" },
-            { id: 14, name: "14#风机", value: "0m³/h" },
-            { id: 15, name: "15#风机", value: "0m³/h" },
-            { id: 16, name: "16#风机", value: "0m³/h" },
-          ];
-  }
-
-  function handleSwitchChange(val) {
-    if (val) {
-      setShowChart(true);
-    } else {
-      setShowChart(false);
-    }
-  }
-  return (
-    <GraphBase
-      icon="kiln"
-      title="风机运行频率"
-      size={["middle", "long"]}
-      switchOptions={false}
-      switchPosition={[null, 200]} // [top, left]
-      onSwitch={handleSwitchChange}
-    >
-      <div className={cls.chart}>
-        {/* {showChart && (
-          <ReactECharts option={options} style={{ height: "100%" }} />
-        )} */}
-        {!showChart && (
-          <div className={cls.gridList}>
-            {dataList.map((item) => (
-              <div
-                key={item.id}
-                className={cls.listItem}
-                style={{ padding: props.stretch ? "16px 0" : "" }}
-              >
-                <span className={cls.fanName}>{item.name}</span>
-                <span
-                  className={cls.fanValue}
-                  style={{
-                    fontWeight: 700,
-                    letterSpacing: 1,
-                    fontSize: 16,
-                    // color: "#e03537",
-                    color: "#24aebb",
-                  }}
-                >
-                  {item.value}
-                </span>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </GraphBase>
-  );
-}
-
-export default WindFrequence;