From be5fbe1c0102c7a6e76d8b2368405b63c9c90355 Mon Sep 17 00:00:00 2001
From: lb <lb@znjszx.com>
Date: Thu, 25 Jan 2024 09:10:00 +0800
Subject: [PATCH] update

---
 .../Energy/EnergeCostRealtime/index.jsx       |  88 +++++++++++++++
 .../EnergeCostRealtime/index.module.scss      |  33 ++++++
 .../Common/Energy/EnergyCostChart/index.jsx   |  28 ++++-
 .../Energy/EnergyCostChart/index.module.css   | 104 +++++++++---------
 src/components/Common/Energy/index.jsx        |  83 +-------------
 .../components/GoodRateChart/index.jsx        |   7 +-
 6 files changed, 208 insertions(+), 135 deletions(-)
 create mode 100644 src/components/Common/Energy/EnergeCostRealtime/index.jsx
 create mode 100644 src/components/Common/Energy/EnergeCostRealtime/index.module.scss

diff --git a/src/components/Common/Energy/EnergeCostRealtime/index.jsx b/src/components/Common/Energy/EnergeCostRealtime/index.jsx
new file mode 100644
index 0000000..04c4748
--- /dev/null
+++ b/src/components/Common/Energy/EnergeCostRealtime/index.jsx
@@ -0,0 +1,88 @@
+import cls from "./index.module.scss";
+import { useSelector } from "react-redux";
+
+const EnergyCostRealtime = () => {
+  const energyInfo = useSelector((state) => state.energy?.info);
+
+  return (
+    <div className={`${cls.cost__info} flex`}>
+      <div
+        className={`${cls.info__item} flex flex-col justify-center items-center`}
+        style={{ width: "112px", padding: 0 }}
+      >
+        <span
+          style={{
+            fontSize: "20px",
+            letterSpacing: "2px",
+            lineHeight: 1.5,
+          }}
+        >
+          余热发电
+        </span>
+        <span style={{ fontSize: "20px", color: "#3ce8ff", lineHeight: 1.5 }}>
+          {(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
+        </span>
+      </div>
+      <div className={cls.info__item_groups}>
+        <div className={cls.info__item}>
+          <i
+            style={{
+              fontSize: "18px",
+              fontStyle: "normal",
+              paddingRight: "6px",
+            }}
+          >
+            水耗量
+          </i>
+          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+            {(+energyInfo?.waterQty)?.toFixed(2) || 0}Km³
+          </span>
+        </div>
+        <div className={cls.info__item}>
+          <i
+            style={{
+              fontSize: "18px",
+              fontStyle: "normal",
+              paddingRight: "6px",
+            }}
+          >
+            天然气I
+          </i>
+          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+            {energyInfo?.ngQty1 || "0Nm³"}
+          </span>
+        </div>
+        <div className={cls.info__item}>
+          <i
+            style={{
+              fontSize: "18px",
+              fontStyle: "normal",
+              paddingRight: "6px",
+            }}
+          >
+            电耗量
+          </i>
+          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+            {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
+          </span>
+        </div>
+        <div className={cls.info__item}>
+          <i
+            style={{
+              fontSize: "18px",
+              fontStyle: "normal",
+              paddingRight: "6px",
+            }}
+          >
+            天然气II
+          </i>
+          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+            {energyInfo?.ngQty2 || "0Nm³"}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EnergyCostRealtime;
diff --git a/src/components/Common/Energy/EnergeCostRealtime/index.module.scss b/src/components/Common/Energy/EnergeCostRealtime/index.module.scss
new file mode 100644
index 0000000..f838cae
--- /dev/null
+++ b/src/components/Common/Energy/EnergeCostRealtime/index.module.scss
@@ -0,0 +1,33 @@
+.cost__info {
+  margin-top: 4px;
+  margin-bottom: 12px;
+
+  div {
+    flex-grow: 1;
+  }
+}
+
+.info__item {
+  border-radius: 2px;
+  color: hsl(0, 0%, 100%, 0.9);
+  box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
+  // min-width: 190px;
+  // height: 43px;
+  font-size: 14px;
+  // letter-spacing: 1.43px;
+  line-height: 40px;
+  padding-left: 12px;
+  // text-align: center;
+  user-select: none;
+}
+
+.hAuto {
+  height: auto;
+}
+
+.info__item_groups {
+  margin-left: 8px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
diff --git a/src/components/Common/Energy/EnergyCostChart/index.jsx b/src/components/Common/Energy/EnergyCostChart/index.jsx
index f9f7945..c05f416 100644
--- a/src/components/Common/Energy/EnergyCostChart/index.jsx
+++ b/src/components/Common/Energy/EnergyCostChart/index.jsx
@@ -14,6 +14,12 @@ const EnergyCostChart = (props) => {
   const [source, setSource] = useState("elec");
   const [period, setPeriod] = useState("week");
 
+  const [timestr, setTimestr] = useState(
+    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+      " - " +
+      dayjs().subtract(1, "day").format("YYYY.MM.DD")
+  );
+
   const currentTrend =
     source == "elec" ? elecTrend : source == "gasi" ? gasITrend : gasIITrend;
 
@@ -26,12 +32,29 @@ const EnergyCostChart = (props) => {
   function handleDateChange(value) {
     setPeriod(
       {
-        日: "day",
         周: "week",
         月: "month",
         年: "year",
       }[value]
     );
+    setTimestr(
+      {
+        年:
+          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().endOf("year").format("YYYY.MM.") +
+          "28",
+        周:
+          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+          " - " +
+          dayjs().subtract(1, "day").format("YYYY.MM.DD"),
+        月:
+          dayjs().subtract(1, "month").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().format("YYYY.MM.") +
+          "28",
+      }[value]
+    );
   }
 
   return (
@@ -74,6 +97,9 @@ const EnergyCostChart = (props) => {
             年
           </Radio.Button>
         </Radio.Group> */}
+
+        <div className={cls.graphBaseDesc}>{timestr}</div>
+
         <Select
           defaultValue={"周"}
           style={{ width: 60 }}
diff --git a/src/components/Common/Energy/EnergyCostChart/index.module.css b/src/components/Common/Energy/EnergyCostChart/index.module.css
index 7b615e4..b413b11 100644
--- a/src/components/Common/Energy/EnergyCostChart/index.module.css
+++ b/src/components/Common/Energy/EnergyCostChart/index.module.css
@@ -1,95 +1,95 @@
 .energyCostChart {
-	height: 1px;
-	flex: 1;
-	padding-top: 8px;
+  height: 1px;
+  flex: 1;
+  padding-top: 8px;
 }
 .energyCostChart .titleBar {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: white;
 }
 .energyCostChart .titleBar h2 {
-	margin: 0;
-	font-size: 18px;
-	line-height: 32px;
-	letter-spacing: 1.2px;
-	color: #52fff8;
+  margin: 0;
+  font-size: 18px;
+  line-height: 32px;
+  letter-spacing: 1.2px;
+  color: #52fff8;
 }
 .graphBaseDesc {
-	margin: 0 12px;
-	line-height: 1;
-	color: #76fff9;
-	flex: 1;
-  }
-  
+  margin: 0 12px;
+  line-height: 1;
+  color: #76fff9;
+  flex: 1;
+}
+
 .energyCostChart .titleBar .legend {
-	display: flex;
-	align-items: center;
+  display: flex;
+  align-items: center;
 }
 .energyCostChart .titleBar .legend * {
-	font-size: 14px;
-	line-height: 14px;
-	color: #dff1fe;
+  font-size: 14px;
+  line-height: 14px;
+  color: #dff1fe;
 }
 
 .energyCostChart .titleBar .legend ul {
-	display: flex;
-	margin: 0;
-	margin-left: 8px;
-	padding: 0;
-	list-style: none;
-	align-items: center;
+  display: flex;
+  margin: 0;
+  margin-left: 8px;
+  padding: 0;
+  list-style: none;
+  align-items: center;
 }
 .energyCostChart .titleBar .legend ul li {
-	position: relative;
-	margin: 4px;
-	padding-left: 16px;
+  position: relative;
+  margin: 4px;
+  padding-left: 16px;
 }
 .energyCostChart .titleBar .legend ul li::before {
-	content: '';
-	position: absolute;
-	left: 2px;
-	top: 2px;
-	display: inline-block;
-	width: 12px;
-	height: 12px;
-	border-radius: 2px;
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
 }
 
 .energyCostChart .titleBar .legend ul li:first-child::before {
-	background-color: #ffd160;
+  background-color: #ffd160;
 }
 
 .energyCostChart .titleBar .legend ul li:nth-child(2)::before {
-	background-color: #12fff5;
+  background-color: #12fff5;
 }
 
 .energyCostChart .titleBar .legend ul li:nth-child(3)::before {
-	background-color: #2760ff;
+  background-color: #2760ff;
 }
 
 .radioGroup * {
-	border: none !important;
-	border-radius: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
 }
 .radioGroupShort * {
-	border: none !important;
-	border-radius: 6px !important;
+  border: none !important;
+  border-radius: 6px !important;
 }
 .radioGroup *:focus-within {
-	box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 .radioGroup *::before {
-	width: 0 !important;
+  width: 0 !important;
 }
 
 .radioGroup_button_wrapper {
-	color: #fff !important;
-	background: #03233c !important;
+  color: #fff !important;
+  background: #03233c !important;
 }
 
 .radioGroup_button_wrapper.ant-radio-button-wrapper-checked {
-	background: #02457e !important;
+  background: #02457e !important;
 }
diff --git a/src/components/Common/Energy/index.jsx b/src/components/Common/Energy/index.jsx
index 9c06a0f..c255745 100644
--- a/src/components/Common/Energy/index.jsx
+++ b/src/components/Common/Energy/index.jsx
@@ -2,93 +2,14 @@ import cls from "./index.module.scss";
 import Container from "../../Container";
 import TechSplitline from "../TechSplitline";
 import EnergyCostChart from "./EnergyCostChart";
-import { useSelector } from "react-redux";
+import EnergyCostRealtime from "./EnergeCostRealtime";
 
 function EnergyCost(props) {
-  const energyInfo = useSelector((state) => state.energy?.info);
 
   return (
     <Container title="能耗" icon="battery" className={cls.energyCost}>
       <div className={`flex flex-col`}>
-        <div className={`${cls.cost__info} flex`}>
-          <div
-            className={`${cls.info__item} flex flex-col justify-center items-center`}
-            style={{ width: "112px", padding: 0 }}
-          >
-            <span
-              style={{
-                fontSize: "20px",
-                letterSpacing: "2px",
-                lineHeight: 1.5,
-              }}
-            >
-              余热发电
-            </span>
-            <span
-              style={{ fontSize: "20px", color: "#3ce8ff", lineHeight: 1.5 }}
-            >
-              {(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
-            </span>
-          </div>
-          <div className={cls.info__item_groups}>
-            <div className={cls.info__item}>
-              <i
-                style={{
-                  fontSize: "18px",
-                  fontStyle: "normal",
-                  paddingRight: "6px",
-                }}
-              >
-                水耗量
-              </i>
-              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
-                {(+energyInfo?.waterQty)?.toFixed(2) || 0}Km³
-              </span>
-            </div>
-            <div className={cls.info__item}>
-              <i
-                style={{
-                  fontSize: "18px",
-                  fontStyle: "normal",
-                  paddingRight: "6px",
-                }}
-              >
-                天然气I
-              </i>
-              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
-                {energyInfo?.ngQty1 || "0Nm³"}
-              </span>
-            </div>
-            <div className={cls.info__item}>
-              <i
-                style={{
-                  fontSize: "18px",
-                  fontStyle: "normal",
-                  paddingRight: "6px",
-                }}
-              >
-                电耗量
-              </i>
-              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
-                {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
-              </span>
-            </div>
-            <div className={cls.info__item}>
-              <i
-                style={{
-                  fontSize: "18px",
-                  fontStyle: "normal",
-                  paddingRight: "6px",
-                }}
-              >
-                天然气II
-              </i>
-              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
-                {energyInfo?.ngQty2 || "0Nm³"}
-              </span>
-            </div>
-          </div>
-        </div>
+        <EnergyCostRealtime />
 
         <TechSplitline />
 
diff --git a/src/components/Common/TodayGood/components/GoodRateChart/index.jsx b/src/components/Common/TodayGood/components/GoodRateChart/index.jsx
index 0488e0a..8581b44 100644
--- a/src/components/Common/TodayGood/components/GoodRateChart/index.jsx
+++ b/src/components/Common/TodayGood/components/GoodRateChart/index.jsx
@@ -28,7 +28,12 @@ const GoodRateChart = (props) => {
     setShowMore(val);
   }
 
-  const [timestr, setTimestr] = useState("");
+  const [timestr, setTimestr] = useState(
+    dayjs().subtract(1, "day").format("YYYY.MM.DD") +
+      " 7点 - " +
+      dayjs().format("YYYY.MM.DD") +
+      " 7点"
+  );
   function handleDateChange(value) {
     // e: Event
     let v = "day";