update right table

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

@@ -1,44 +1,48 @@
-import cls from './index.module.css';
-import GradientText from '../../../Common/GradientText';
+import cls from "./index.module.css";
+import GradientText from "../../../Common/GradientText";
+import { useSelector } from "react-redux";
 
 function Energy(props) {
-	return (
-		<div className={' ' + cls.layout} style={{ color: '#fff' }}>
-			<span
-				className={cls.shadowBorder}
-				style={{
-					gridRow: '1 / 3',
-					paddingTop: '38px',
-					paddingLeft: '32px',
-					userSelect: 'none',
-				}}
-			>
-				<GradientText text="能源" />
-			</span>
-			<span
-				className={cls.shadowBorder + ' ' + cls.infoText}
-				style={{
-					gridRow: '1 / 3',
-				}}
-			>
-				<span style={{ lineHeight: 2.5 }}>余热发电</span>
-				<span style={{ lineHeight: 2.5 }}>992Kwh</span>
-			</span>
+  const energyInfo = useSelector((state) => state.energy?.info);
+  return (
+    <div className={" " + cls.layout} style={{ color: "#fff" }}>
+      <span
+        className={cls.shadowBorder}
+        style={{
+          gridRow: "1 / 3",
+          paddingTop: "38px",
+          paddingLeft: "32px",
+          userSelect: "none",
+        }}
+      >
+        <GradientText text="能源" />
+      </span>
+      <span
+        className={cls.shadowBorder + " " + cls.infoText}
+        style={{
+          fontSize: "22px",
+          lineHeight: "2.5",
+          gridRow: "1 / 3",
+        }}
+      >
+        <span style={{ lineHeight: 2.5 }}>余热发电</span>
+        <span style={{ lineHeight: 2.5 }}>{energyInfo?.elecQty1 || 0}kWh</span>
+      </span>
 
-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
-				水耗量: 32Km³
-			</span>
-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
-				天然气I: 92m³
-			</span>
-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
-				电耗量: 92Km³
-			</span>
-			<span className={cls.shadowBorder + ' ' + cls.infoText}>
-				天然气II: 92m³
-			</span>
-		</div>
-	);
+      <span className={cls.shadowBorder + " " + cls.infoText}>
+        水耗量: {energyInfo?.waterQty || 0}Km³
+      </span>
+      <span className={cls.shadowBorder + " " + cls.infoText}>
+        天然气I: {energyInfo?.ngQty1 || 0}
+      </span>
+      <span className={cls.shadowBorder + " " + cls.infoText}>
+        电耗量: {energyInfo?.elecQty2 || 0}kWh
+      </span>
+      <span className={cls.shadowBorder + " " + cls.infoText}>
+        天然气II: {energyInfo?.ngQty2 || 0}
+      </span>
+    </div>
+  );
 }
 
 export default Energy;

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

@@ -13,8 +13,8 @@
 
 .infoText {
 	text-align: center;
-	font-size: 24px;
-	line-height: 2.2;
+	font-size: 20px;
+	line-height: 2.5;
 	/* line-height: 20px; */
 	letter-spacing: 1px;
 	user-select: none;