update energy cost page
This commit is contained in:
parent
6e10a5aacd
commit
0bd1f8dcac
@ -1,9 +1,18 @@
|
||||
import cls from "./index.module.css";
|
||||
import GradientText from "../../../Common/GradientText";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
function Energy(props) {
|
||||
const [isPage1, setIsPage1] = useState(true);
|
||||
const energyInfo = useSelector((state) => state.energy?.info);
|
||||
|
||||
useEffect(() => {
|
||||
setInterval(() => {
|
||||
setIsPage1((pre) => !pre);
|
||||
}, 3000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={" " + cls.layout} style={{ color: "#fff" }}>
|
||||
<span
|
||||
@ -11,50 +20,140 @@ function Energy(props) {
|
||||
style={{
|
||||
gridRow: "1 / 3",
|
||||
paddingTop: "104px",
|
||||
paddingLeft: "38px",
|
||||
paddingLeft: "32px",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
<GradientText text="能源" />
|
||||
</span>
|
||||
<span
|
||||
className={cls.shadowBorder + " " + cls.infoText}
|
||||
style={{
|
||||
fontSize: "24px",
|
||||
lineHeight: "1.5",
|
||||
gridRow: "1 / 3",
|
||||
}}
|
||||
>
|
||||
<span style={{ lineHeight: 1.5 }}>余热发电/kWh</span>
|
||||
<span style={{ lineHeight: 1.5, width: '180px', wordWrap: 'break-word' }}>
|
||||
{(+energyInfo?.elecQty1)?.toFixed(2) || 0}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||
<span style={{ lineHeight: 1.5 }}>水耗量/Km³</span>
|
||||
<span style={{ lineHeight: 1.5 }}>
|
||||
{(+energyInfo?.waterQty)?.toFixed(2) || 0}
|
||||
</span>
|
||||
</span>
|
||||
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||
<span style={{ lineHeight: 1.5 }}>天然气I/Nm³</span>
|
||||
<span style={{ lineHeight: 1.5 }}>
|
||||
{energyInfo?.ngQty1?.replace("Nm³", "") || "0Nm³"}
|
||||
</span>
|
||||
</span>
|
||||
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||
<span style={{ lineHeight: 1.5 }}>电耗量/kWh</span>
|
||||
<span style={{ lineHeight: 1.5 }}>
|
||||
{(+energyInfo?.elecQty2)?.toFixed(2) || 0}
|
||||
</span>
|
||||
</span>
|
||||
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||
<span style={{ lineHeight: 1.5 }}>天然气II/Nm³</span>
|
||||
<span style={{ lineHeight: 1.5 }}>
|
||||
{energyInfo?.ngQty2?.replace("Nm³", "") || "0Nm³"}
|
||||
</span>
|
||||
</span>
|
||||
{!isPage1 && (
|
||||
<div
|
||||
style={{
|
||||
gridRow: "1 / 3",
|
||||
gridColumn: "2 / 5",
|
||||
display: "grid",
|
||||
gridTemplateRows: "1fr 1fr",
|
||||
gridTemplateColumns: "1fr 1fr",
|
||||
gap: "6px",
|
||||
}}
|
||||
>
|
||||
<div className={cls.shadowBorder + " " + cls.infoText}>
|
||||
<span style={{ lineHeight: 1.5 }}>智慧能源光伏发电(昨日)/kWh</span>
|
||||
<span
|
||||
style={{
|
||||
lineHeight: 1.5,
|
||||
width: "180px",
|
||||
wordWrap: "break-word",
|
||||
}}
|
||||
>
|
||||
{(+energyInfo?.elecQty6)?.toFixed(2) || 0}
|
||||
</span>
|
||||
</div>
|
||||
<div className={cls.shadowBorder + " " + cls.infoText}>
|
||||
<span style={{ lineHeight: 1.5 }}>许昌安彩光伏发电(昨日)/kWh</span>
|
||||
<span
|
||||
style={{
|
||||
lineHeight: 1.5,
|
||||
width: "180px",
|
||||
wordWrap: "break-word",
|
||||
}}
|
||||
>
|
||||
{(+energyInfo?.elecQty7)?.toFixed(2) || 0}
|
||||
</span>
|
||||
</div>
|
||||
<div className={cls.shadowBorder + " " + cls.infoText}>
|
||||
<span style={{ lineHeight: 1.5 }}>智慧能源光伏发电(总量)/kWh</span>
|
||||
<span
|
||||
style={{
|
||||
lineHeight: 1.5,
|
||||
width: "180px",
|
||||
wordWrap: "break-word",
|
||||
}}
|
||||
>
|
||||
{(+energyInfo?.elecQty4)?.toFixed(2) || 0}
|
||||
</span>
|
||||
</div>
|
||||
<div className={cls.shadowBorder + " " + cls.infoText}>
|
||||
<span style={{ lineHeight: 1.5 }}>许昌安彩光伏发电(总量)/kWh</span>
|
||||
<span
|
||||
style={{
|
||||
lineHeight: 1.5,
|
||||
width: "180px",
|
||||
wordWrap: "break-word",
|
||||
}}
|
||||
>
|
||||
{(+energyInfo?.elecQty5)?.toFixed(2) || 0}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{isPage1 && (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "6px",
|
||||
gridRow: "1 / 3",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ flex: 1 }}
|
||||
className={cls.shadowBorder + " " + cls.infoText}
|
||||
>
|
||||
<span style={{ lineHeight: 1.5 }}>余热发电(实时)/kWh</span>
|
||||
<span
|
||||
style={{
|
||||
lineHeight: 1.5,
|
||||
width: "180px",
|
||||
wordWrap: "break-word",
|
||||
}}
|
||||
>
|
||||
{(+energyInfo?.elecQty1)?.toFixed(2) || 0}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{ flex: 1 }}
|
||||
className={cls.shadowBorder + " " + cls.infoText}
|
||||
>
|
||||
<span style={{ lineHeight: 1.5 }}>余热发电(总量)/kWh</span>
|
||||
<span
|
||||
style={{
|
||||
lineHeight: 1.5,
|
||||
width: "180px",
|
||||
wordWrap: "break-word",
|
||||
}}
|
||||
>
|
||||
{(+energyInfo?.elecQty3)?.toFixed(2) || 0}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||
<span style={{ lineHeight: 1.5 }}>水耗量/Km³</span>
|
||||
<span style={{ lineHeight: 1.5 }}>
|
||||
{(+energyInfo?.waterQty)?.toFixed(2) || 0}
|
||||
</span>
|
||||
</span>
|
||||
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||
<span style={{ lineHeight: 1.5 }}>天然气I/Nm³</span>
|
||||
<span style={{ lineHeight: 1.5 }}>
|
||||
{energyInfo?.ngQty1?.replace("Nm³", "") || "0Nm³"}
|
||||
</span>
|
||||
</span>
|
||||
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||
<span style={{ lineHeight: 1.5 }}>电耗量/kWh</span>
|
||||
<span style={{ lineHeight: 1.5 }}>
|
||||
{(+energyInfo?.elecQty2)?.toFixed(2) || 0}
|
||||
</span>
|
||||
</span>
|
||||
<span className={cls.shadowBorder + " " + cls.infoText}>
|
||||
<span style={{ lineHeight: 1.5 }}>天然气II/Nm³</span>
|
||||
<span style={{ lineHeight: 1.5 }}>
|
||||
{energyInfo?.ngQty2?.replace("Nm³", "") || "0Nm³"}
|
||||
</span>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -2,7 +2,7 @@
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
/* grid-template-columns: 133px 158px 292px 292px; */
|
||||
grid-template-columns: 133px 210px 266px 266px;
|
||||
grid-template-columns: 125px 250px 250px 250px;
|
||||
/* grid-template-rows: 60px 60px; */
|
||||
grid-template-rows: 129px 129px;
|
||||
}
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
.infoText {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-size: 22px;
|
||||
line-height: 2.5;
|
||||
/* line-height: 20px; */
|
||||
letter-spacing: 1px;
|
||||
|
Loading…
Reference in New Issue
Block a user