1

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

@@ -5,10 +5,16 @@ import { useSelector } from "react-redux";
 import { useState } from "react";
 import * as echarts from "echarts";
 import { lunarYear } from "../../../../utils/energeChartOption";
+import dayjs from "dayjs";
 
 function NatGas(props) {
   const elecTrend = useSelector((state) => state.energy.trend.natGas1);
   const [period, setPeriod] = useState("周");
+  const [timestr, setTimestr] = useState(
+    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+      " - " +
+      dayjs().subtract(1, "day").format("YYYY.MM.DD")
+  );
 
   const options = getOptions(
     { 周: "week", 月: "month", 年: "year" }[period],
@@ -19,16 +25,33 @@ function NatGas(props) {
     // console.log('switched ', v);
   }
 
-  function handleDateChange(v) {
-    setPeriod(v);
-    // console.log('date ', v);
+  function handleDateChange(value) {
+    setPeriod(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 (
     <GraphBase
       icon="battery"
       title="天然气I"
-      desc="能耗趋势图"
+      desc={`能耗趋势图  ${timestr}`}
       switchOptions={false}
       onSwitch={handleSwitch}
       defaultSelect={period}
@@ -114,7 +137,7 @@ function getOptions(period, trend) {
         .fill(1)
         .map((_, index) => {
           if (period == "week") {
-            const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
+            const dtimestamp = today - (index + 1) * 24 * 60 * 60 * 1000;
             return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
               dtimestamp
             ).getDate()}`;
@@ -163,7 +186,9 @@ function getOptions(period, trend) {
       },
     },
     series: {
-      data: trend[period].map(item => item != null ? (+item).toFixed(2) : null),
+      data: trend[period].map((item) =>
+        item != null ? (+item).toFixed(2) : null
+      ),
       type: "line",
       symbol: "circle",
       symbolSize: 6,