xuchang-new/src/components/Common/KilnInfo/Kiln.jsx

import React from "react";
import { useContext } from "react";
import Container from "../../Container";
// import SocketContext from '../../../store/socket-data-provider';


import cls from "./kiln.module.scss";

export default function Kiln() {
  // const ctx = useContext(SocketContext);
  const ctx = null;

  const infos = [
    { label: "窑炉压力", value: ctx?.runState?.kilnPressure || "0Pa" },
    { label: "循环水温度", value: ctx?.runState?.waterTemp || "0℃" },
    { label: "循环水流量", value: ctx?.runState?.waterFlow || "0㎡/h" },
    { label: "循环水压力", value: ctx?.runState?.waterPressure || "0Pa" },
    {
      label: "助燃风压力",
      value: ctx?.runState?.combustionAirPressure || "0℃",
    },
    { label: "碹顶加权温度", value: ctx?.runState?.topTemp || "0℃" },
    {
      label: "压缩气压力",
      value: ctx?.runState?.compressedAirPressure || "0Pa",
    },
    { label: "融化加权温度", value: ctx?.runState?.meltTemp || "0℃" },
  ];

  return (
    <Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
      <div className={cls.leftBar__top__content}>
        {infos.map((item) => (
          <div key={item.label} className={cls.info__item}>
            {item.label}: {item.value}
          </div>
        ))}
      </div>
    </Container>
  );
}