mt-fe-group/xuchang-new
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update energy cost page

Browse Source
This commit is contained in:
lb
2024-01-25 15:42:25 +08:00
parent 6e10a5aacd
commit 0bd1f8dcac
2 changed files with 140 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/components/Modules/EnergyCostAnalysis/Energy/index.jsx
View File

@@ -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>
);
}

4
src/components/Modules/EnergyCostAnalysis/Energy/index.module.css
View File

@@ -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;