update

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;

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;
+}

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 }}

src/components/Common/Energy/EnergyCostChart/index.module.css

@@ -47,7 +47,7 @@
   padding-left: 16px;
 }
 .energyCostChart .titleBar .legend ul li::before {
-	content: '';
+  content: "";
   position: absolute;
   left: 2px;
   top: 2px;

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`}>
+        <EnergyCostRealtime />
-          <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>
 
         <TechSplitline />
 

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