update energy cost page

src/components/Modules/EnergyCostAnalysis/Energy/index.jsx

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

src/components/Modules/EnergyCostAnalysis/Energy/index.module.css

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