update 天然气历史

src/components/Common/Energy/EnergyCostChart/index.jsx

@@ -1,9 +1,9 @@
 import cls from "./index.module.css";
-import * as echarts from "echarts";
-import { Switch, Radio } from "antd";
+import { Radio } from "antd";
 import ReactECharts from "echarts-for-react";
 import { useState } from "react";
 import { useSelector } from "react-redux";
+import { getOptions } from "../../../../utils/energeChartOption";
 
 const EnergyCostChart = (props) => {
   const elecTrend = useSelector((state) => state.energy.trend.elec);
@@ -86,86 +86,3 @@ const EnergyCostChart = (props) => {
 };
 
 export default EnergyCostChart;
-
-function getOptions(period, source, trend) {
-  if (trend[period].length == 0) return null;
-  return {
-    color: ["#FFD160", "#12FFF5", "#2760FF"],
-    grid: { top: 32, right: 12, bottom: 56, left: 48 },
-    xAxis: {
-      type: "category",
-      data:
-        source == "elec"
-          ? trend[period].map((item) => item.time)
-          : Array(period == "week" ? 7 : period == "year" ? 12 : 30)
-              .fill(1)
-              .map((_, index) => {
-                const today = new Date();
-                const dtimestamp = today - index * 24 * 60 * 60 * 1000;
-                return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
-                  dtimestamp
-                ).getDate()}`;
-              })
-              .reverse(),
-      axisLabel: {
-        color: "#fff",
-        fontSize: 12,
-      },
-      axisTick: { show: false },
-      axisLine: {
-        lineStyle: {
-          width: 1,
-          color: "#213259",
-        },
-      },
-    },
-    yAxis: {
-      name: "单位/m³",
-      nameTextStyle: {
-        color: "#fff",
-        fontSize: 10,
-        align: "right",
-      },
-      type: "value",
-      axisLabel: {
-        color: "#fff",
-        fontSize: 12,
-        // formatter: "{value} %",
-      },
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: "#213259",
-        },
-      },
-      splitLine: {
-        lineStyle: {
-          color: "#213259a0",
-        },
-      },
-      // interval: 10,
-      // min: 0,
-      // max: 100,
-    },
-    series: [
-      {
-        data:
-          source == "elec"
-            ? trend[period].map((item) => item.qty)
-            : trend[period],
-        type: "line",
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: "#FFD16040" },
-            { offset: 0.5, color: "#FFD16020" },
-            { offset: 1, color: "#FFD16010" },
-          ]),
-        },
-        // smooth: true,
-      },
-    ],
-    tooltip: {
-      trigger: "axis",
-    },
-  };
-}

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

@@ -4,6 +4,7 @@ import ReactECharts from "echarts-for-react";
 import { useSelector } from "react-redux";
 import { useState } from "react";
 import * as echarts from "echarts";
+import { lunarYear } from "../../../../utils/energeChartOption";
 
 function Gas(props) {
   const elecTrend = useSelector((state) => state.energy.trend.natGas2);
@@ -66,9 +67,20 @@ function Gas(props) {
 export default Gas;
 
 function getOptions(period, trend) {
-  console.log("getOptions", period, trend);
   if (trend[period].length === 0) return null;
   // export default function getOptions(seriesData, name) {
+  const today = new Date();
+  const currentYear = today.getFullYear();
+  const currentMonth = today.getMonth() + 1;
+  let days = 30;
+  if (period == "month") {
+    if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) {
+      days = 31;
+    } else if (currentMonth == 2) {
+      days = lunarYear(currentYear) ? 29 : 28;
+    }
+  }
+
   const colors = [
     "#FFD160",
     "#12FFF5",
@@ -99,14 +111,19 @@ function getOptions(period, trend) {
     },
     xAxis: {
       type: "category",
-      data: Array(period == "week" ? 7 : period == "year" ? 12 : 30)
+      data: Array(period == "week" ? 7 : period == "year" ? 12 : days)
         .fill(1)
         .map((_, index) => {
-          const today = new Date();
-          const dtimestamp = today - index * 24 * 60 * 60 * 1000;
-          return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
-            dtimestamp
-          ).getDate()}`;
+          if (period == "week") {
+            const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+            return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+              dtimestamp
+            ).getDate()}`;
+          } else if (period == "month") {
+            return `${currentMonth}.${days - index}`;
+          } else {
+            return `${currentYear}.${12 - index}`;
+          }
         })
         .reverse(),
       axisLabel: {

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

@@ -4,6 +4,7 @@ import ReactECharts from "echarts-for-react";
 import { useSelector } from "react-redux";
 import { useState } from "react";
 import * as echarts from "echarts";
+import { lunarYear } from "../../../../utils/energeChartOption";
 
 function NatGas(props) {
   const elecTrend = useSelector((state) => state.energy.trend.natGas1);
@@ -66,9 +67,19 @@ function NatGas(props) {
 export default NatGas;
 
 function getOptions(period, trend) {
-  console.log("getOptions", period, trend);
   if (trend[period].length === 0) return null;
   // export default function getOptions(seriesData, name) {
+  const today = new Date();
+  const currentYear = today.getFullYear();
+  const currentMonth = today.getMonth() + 1;
+  let days = 30;
+  if (period == "month") {
+    if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) {
+      days = 31;
+    } else if (currentMonth == 2) {
+      days = lunarYear(currentYear) ? 29 : 28;
+    }
+  }
   const colors = [
     "#FFD160",
     "#12FFF5",
@@ -99,14 +110,19 @@ function getOptions(period, trend) {
     },
     xAxis: {
       type: "category",
-      data: Array(period == "week" ? 7 : period == "year" ? 12 : 30)
+      data: Array(period == "week" ? 7 : period == "year" ? 12 : days)
         .fill(1)
         .map((_, index) => {
-          const today = new Date();
-          const dtimestamp = today - index * 24 * 60 * 60 * 1000;
-          return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
-            dtimestamp
-          ).getDate()}`;
+          if (period == "week") {
+            const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+            return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+              dtimestamp
+            ).getDate()}`;
+          } else if (period == "month") {
+            return `${currentMonth}.${days - index}`;
+          } else {
+            return `${currentYear}.${12 - index}`;
+          }
         })
         .reverse(),
       axisLabel: {