update

src/components/Common/Energy/EnergeCostRealtime/index.jsx

@@ -0,0 +1,88 @@
+import cls from "./index.module.scss";
+import { useSelector } from "react-redux";
+
+const EnergyCostRealtime = () => {
+  const energyInfo = useSelector((state) => state.energy?.info);
+
+  return (
+    <div className={`${cls.cost__info} flex`}>
+      <div
+        className={`${cls.info__item} flex flex-col justify-center items-center`}
+        style={{ width: "112px", padding: 0 }}
+      >
+        <span
+          style={{
+            fontSize: "20px",
+            letterSpacing: "2px",
+            lineHeight: 1.5,
+          }}
+        >
+          余热发电
+        </span>
+        <span style={{ fontSize: "20px", color: "#3ce8ff", lineHeight: 1.5 }}>
+          {(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
+        </span>
+      </div>
+      <div className={cls.info__item_groups}>
+        <div className={cls.info__item}>
+          <i
+            style={{
+              fontSize: "18px",
+              fontStyle: "normal",
+              paddingRight: "6px",
+            }}
+          >
+            水耗量
+          </i>
+          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+            {(+energyInfo?.waterQty)?.toFixed(2) || 0}Km³
+          </span>
+        </div>
+        <div className={cls.info__item}>
+          <i
+            style={{
+              fontSize: "18px",
+              fontStyle: "normal",
+              paddingRight: "6px",
+            }}
+          >
+            天然气I
+          </i>
+          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+            {energyInfo?.ngQty1 || "0Nm³"}
+          </span>
+        </div>
+        <div className={cls.info__item}>
+          <i
+            style={{
+              fontSize: "18px",
+              fontStyle: "normal",
+              paddingRight: "6px",
+            }}
+          >
+            电耗量
+          </i>
+          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+            {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
+          </span>
+        </div>
+        <div className={cls.info__item}>
+          <i
+            style={{
+              fontSize: "18px",
+              fontStyle: "normal",
+              paddingRight: "6px",
+            }}
+          >
+            天然气II
+          </i>
+          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+            {energyInfo?.ngQty2 || "0Nm³"}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EnergyCostRealtime;