89 lines
2.4 KiB
JavaScript
89 lines
2.4 KiB
JavaScript
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;
|