xuchang-new/src/components/Common/CurrentTemp/index.jsx

import GraphBase from "../GraphBase";
import "./font.css";
import cls from "./index.module.css";
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 (
    <div
      className="small-box"
      style={{
        boxShadow: "inset 0 0 18px 10px #fff1",
        borderRadius: "3px",
        padding: "6px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        color: "#fff",
        position: "relative",
        userSelect: "none",
      }}
    >
      {props.split !== false && (
        <span
          className="vertical-line"
          style={{
            position: "absolute",
            display: "inline-block",
            width: "2px",
            height: "80%",
            top: "10%",
            left: "45%",
            background:
              "linear-gradient(to bottom, transparent, #fff3, #fffa, #fff3, transparent)",
          }}
        ></span>
      )}
      {props.children}
    </div>
  );
};

function WindFrequence(props) {
  const [dataSource, setDataSource] = useState("Y61");
  const [currentLineTemp, setCurrentLineTemp] = useState([]);
  const currentTempList = useSelector((state) => state.annealTemperature?.data);
  const lines = ["Y61", "Y62", "Y63", "Y64", "Y65"];
  function handleSourceChange(line) {
    setDataSource(line);
  }

  useEffect(() => {
    setCurrentLineTemp(
      (currentTempList &&
        currentTempList[1 + lines.indexOf(dataSource) + "#"]) ||
        []
    );
  }, [dataSource]);

  return (
    <GraphBase
      icon="temp"
      title="当前温度"
      dateOptions={["Y61", "Y62", "Y63", "Y64", "Y65"]}
      defaultSelect={dataSource}
      onDateChange={handleSourceChange}
      size={["middle", "long"]}
    >
      <div className={cls.mainContent + " " + cls.grid}>
        <SmallBox>
          <h1 className={cls.areaName}>A1区板上</h1>
          <div className={cls.areaContent}>
            <span className={cls.areaValue}>
              {(+currentLineTemp[0]).toFixed(2) || 0} ℃
            </span>
            <span className={cls.areaValue}>
              {(+currentLineTemp[1]).toFixed(2) || 0} ℃
            </span>
            <span className={cls.areaValue}>
              {(+currentLineTemp[2]).toFixed(2) || 0} ℃
            </span>
          </div>
        </SmallBox>
        <SmallBox>
          <h1 className={cls.areaName}>A2区板上</h1>
          <div className={cls.areaContent}>
            <span className={cls.areaValue}>
              {(+currentLineTemp[6]).toFixed(2) || 0} ℃
            </span>
            <span className={cls.areaValue}>
              {(+currentLineTemp[7]).toFixed(2) || 0} ℃
            </span>
            <span className={cls.areaValue}>
              {(+currentLineTemp[8]).toFixed(2) || 0} ℃
            </span>
          </div>
        </SmallBox>
        <SmallBox>
          <h1 className={cls.areaName}>B区板上</h1>
          <div className={cls.areaContent}>
            <span className={cls.areaValue}>
              {(+currentLineTemp[12]).toFixed(2) || 0} ℃
            </span>
            <span className={cls.areaValue}>
              {(+currentLineTemp[13]).toFixed(2) || 0} ℃
            </span>
            <span className={cls.areaValue}>
              {(+currentLineTemp[14]).toFixed(2) || 0} ℃
            </span>
          </div>
        </SmallBox>
        <SmallBox>
          <h1 className={cls.areaName}>C区板上</h1>
          <div className={cls.areaContent}>
            <span className={cls.areaValue}>
              {(+currentLineTemp[18]).toFixed(2) || 0} ℃
            </span>
            <span className={cls.areaValue}>
              {(+currentLineTemp[19]).toFixed(2) || 0} ℃
            </span>
            <span className={cls.areaValue}>
              {(+currentLineTemp[20]).toFixed(2) || 0} ℃
            </span>
          </div>
        </SmallBox>
        <SmallBox>
          <h1 className={cls.areaName}>A1区板下</h1>
          <div className={cls.areaContent}>
            <span className={cls.areaValue}>
              {(+currentLineTemp[3]).toFixed(2) || 0} ℃
            </span>
            <span className={cls.areaValue}>
              {(+currentLineTemp[4]).toFixed(2) || 0} ℃
            </span>
            <span className={cls.areaValue}>
              {(+currentLineTemp[5]).toFixed(2) || 0} ℃
            </span>
          </div>
        </SmallBox>
        <SmallBox>
          <h1 className={cls.areaName}>A2区板下</h1>
          <div className={cls.areaContent}>
            <span className={cls.areaValue}>
              {(+currentLineTemp[9]).toFixed(2) || 0} ℃
            </span>
            <span className={cls.areaValue}>
              {(+currentLineTemp[10]).toFixed(2) || 0} ℃
            </span>
            <span className={cls.areaValue}>
              {(+currentLineTemp[11]).toFixed(2) || 0} ℃
            </span>
          </div>
        </SmallBox>
        <SmallBox>
          <h1 className={cls.areaName}>B区板下</h1>
          <div className={cls.areaContent}>
            <span className={cls.areaValue}>
              {(+currentLineTemp[15]).toFixed(2) || 0} ℃
            </span>
            <span className={cls.areaValue}>
              {(+currentLineTemp[16]).toFixed(2) || 0} ℃
            </span>
            <span className={cls.areaValue}>
              {(+currentLineTemp[17]).toFixed(2) || 0} ℃
            </span>
          </div>
        </SmallBox>
        <SmallBox>
          <h1 className={cls.areaName}>C区板下</h1>
          <div className={cls.areaContent}>
            <span className={cls.areaValue}>
              {(+currentLineTemp[21]).toFixed(2) || 0} ℃
            </span>
            <span className={cls.areaValue}>
              {(+currentLineTemp[22]).toFixed(2) || 0} ℃
            </span>
            <span className={cls.areaValue}>
              {(+currentLineTemp[23]).toFixed(2) || 0} ℃
            </span>
          </div>
        </SmallBox>
        <SmallBox split={false} style={{ position: "relative" }}>
          <div className={cls.areaPureContent}>
            <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} style={{ fontSize: "12px" }}>
              {(+currentLineTemp[26]).toFixed(2) || 0}℃
            </span>
            <span className={cls.areaPureValue} style={{ fontSize: "12px" }}>
              {(+currentLineTemp[27]).toFixed(2) || 0}℃
            </span>
            <span className={cls.areaPureValue} style={{ fontSize: "12px" }}>
              {(+currentLineTemp[28]).toFixed(2) || 0}℃
            </span>
          </div>
        </SmallBox>

        <SmallBox split={false} style={{ position: "relative" }}>
          <div className={cls.areaPureContent}>
            <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} style={{ fontSize: "12px" }}>
              {(+currentLineTemp[29]).toFixed(2) || 0}℃
            </span>
            <span className={cls.areaPureValue} style={{ fontSize: "12px" }}>
              {(+currentLineTemp[30]).toFixed(2) || 0}℃
            </span>
            <span className={cls.areaPureValue} style={{ fontSize: "12px" }}>
              {(+currentLineTemp[31]).toFixed(2) || 0}℃
            </span>
          </div>
        </SmallBox>
        <SmallBox>
          <h1 className={cls.areaName}>RET1区</h1>
          <div className={cls.areaContent}>
            <span className={cls.areaValue}>
              {(+currentLineTemp[24]).toFixed(2) || 0} ℃
            </span>
          </div>
        </SmallBox>
        <SmallBox>
          <h1 className={cls.areaName}>RET2区</h1>
          <div className={cls.areaContent}>
            <span className={cls.areaValue}>
              {(+currentLineTemp[25]).toFixed(2) || 0} ℃
            </span>
          </div>
        </SmallBox>
      </div>
    </GraphBase>
  );
}

export default WindFrequence;