mt-fe-group/xuchang-new
8
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
Show Stats 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 cls from "./index.module.css";
import GradientText from "../../../Common/GradientText"; import GradientText from "../../../Common/GradientText";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { useEffect, useState } from "react";
function Energy(props) { function Energy(props) {
const [isPage1, setIsPage1] = useState(true);
const energyInfo = useSelector((state) => state.energy?.info); const energyInfo = useSelector((state) => state.energy?.info);
useEffect(() => {
setInterval(() => {
setIsPage1((pre) => !pre);
}, 3000);
}, []);
return ( return (
<div className={" " + cls.layout} style={{ color: "#fff" }}> <div className={" " + cls.layout} style={{ color: "#fff" }}>
<span <span
@ -11,50 +20,140 @@ function Energy(props) {
style={{ style={{
gridRow: "1 / 3", gridRow: "1 / 3",
paddingTop: "104px", paddingTop: "104px",
paddingLeft: "38px", paddingLeft: "32px",
userSelect: "none", userSelect: "none",
}} }}
> >
<GradientText text="能源" /> <GradientText text="能源" />
</span> </span>
<span {!isPage1 && (
className={cls.shadowBorder + " " + cls.infoText} <div
style={{ style={{
fontSize: "24px", gridRow: "1 / 3",
lineHeight: "1.5", gridColumn: "2 / 5",
gridRow: "1 / 3", display: "grid",
}} gridTemplateRows: "1fr 1fr",
> gridTemplateColumns: "1fr 1fr",
<span style={{ lineHeight: 1.5 }}>余热发电/kWh</span> gap: "6px",
<span style={{ lineHeight: 1.5, width: '180px', wordWrap: 'break-word' }}> }}
{(+energyInfo?.elecQty1)?.toFixed(2) || 0} >
</span> <div className={cls.shadowBorder + " " + cls.infoText}>
</span> <span style={{ lineHeight: 1.5 }}>智慧能源光伏发电(昨日)/kWh</span>
<span
<span className={cls.shadowBorder + " " + cls.infoText}> style={{
<span style={{ lineHeight: 1.5 }}>水耗量/Km³</span> lineHeight: 1.5,
<span style={{ lineHeight: 1.5 }}> width: "180px",
{(+energyInfo?.waterQty)?.toFixed(2) || 0} wordWrap: "break-word",
</span> }}
</span> >
<span className={cls.shadowBorder + " " + cls.infoText}> {(+energyInfo?.elecQty6)?.toFixed(2) || 0}
<span style={{ lineHeight: 1.5 }}>天然气I/Nm³</span> </span>
<span style={{ lineHeight: 1.5 }}> </div>
{energyInfo?.ngQty1?.replace("Nm³", "") || "0Nm³"} <div className={cls.shadowBorder + " " + cls.infoText}>
</span> <span style={{ lineHeight: 1.5 }}>许昌安彩光伏发电(昨日)/kWh</span>
</span> <span
<span className={cls.shadowBorder + " " + cls.infoText}> style={{
<span style={{ lineHeight: 1.5 }}>电耗量/kWh</span> lineHeight: 1.5,
<span style={{ lineHeight: 1.5 }}> width: "180px",
{(+energyInfo?.elecQty2)?.toFixed(2) || 0} wordWrap: "break-word",
</span> }}
</span> >
<span className={cls.shadowBorder + " " + cls.infoText}> {(+energyInfo?.elecQty7)?.toFixed(2) || 0}
<span style={{ lineHeight: 1.5 }}>天然气II/Nm³</span> </span>
<span style={{ lineHeight: 1.5 }}> </div>
{energyInfo?.ngQty2?.replace("Nm³", "") || "0Nm³"} <div className={cls.shadowBorder + " " + cls.infoText}>
</span> <span style={{ lineHeight: 1.5 }}>智慧能源光伏发电(总量)/kWh</span>
</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> </div>
); );
} }

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

@ -2,7 +2,7 @@
display: grid; display: grid;
gap: 6px; gap: 6px;
/* grid-template-columns: 133px 158px 292px 292px; */ /* 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: 60px 60px; */
grid-template-rows: 129px 129px; grid-template-rows: 129px 129px;
} }
@ -15,7 +15,7 @@
.infoText { .infoText {
text-align: center; text-align: center;
font-size: 24px; font-size: 22px;
line-height: 2.5; line-height: 2.5;
/* line-height: 20px; */ /* line-height: 20px; */
letter-spacing: 1px; letter-spacing: 1px;