update 天然气历史

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

@@ -1,9 +1,9 @@
 import cls from "./index.module.css";
-import * as echarts from "echarts";
+import { Radio } from "antd";
-import { Switch, 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();
+          if (period == "week") {
-          const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+            const dtimestamp = today - index * 24 * 60 * 60 * 1000;
-          return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+            return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
-            dtimestamp
+              dtimestamp
-          ).getDate()}`;
+            ).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();
+          if (period == "week") {
-          const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+            const dtimestamp = today - index * 24 * 60 * 60 * 1000;
-          return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+            return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
-            dtimestamp
+              dtimestamp
-          ).getDate()}`;
+            ).getDate()}`;
+          } else if (period == "month") {
+            return `${currentMonth}.${days - index}`;
+          } else {
+            return `${currentYear}.${12 - index}`;
+          }
         })
         .reverse(),
       axisLabel: {

src/store/features/EnergySlice.js

@@ -110,11 +110,23 @@ const energySlice = createSlice({
       if ("sumGas2Now" in action.payload) {
         state.info.ngQty2 = action.payload.sumGas2Now;
       }
-      if ("hisSumGas1" in action.payload) {
+      if ("hisSumGas1For7Day" in action.payload) {
-        state.trend.natGas1.week = action.payload.hisSumGas1;
+        state.trend.natGas1.week = action.payload.hisSumGas1For7Day;
       }
-      if ("hisSumGas2" in action.payload) {
+      if ("hisSumGas2For7Day" in action.payload) {
-        state.trend.natGas2.week = action.payload.hisSumGas2;
+        state.trend.natGas2.week = action.payload.hisSumGas2For7Day;
+      }
+      if ("sumGas1ForMonth" in action.payload) {
+        state.trend.natGas1.month = action.payload.sumGas1ForMonth;
+      }
+      if ("sumGas2ForMonth" in action.payload) {
+        state.trend.natGas2.month = action.payload.sumGas2ForMonth;
+      }
+      if ("sumGas1ForYear" in action.payload) {
+        state.trend.natGas1.year = action.payload.sumGas1ForYear;
+      }
+      if ("sumGas2ForYear" in action.payload) {
+        state.trend.natGas2.year = action.payload.sumGas2ForYear;
       }
     },
   },

src/utils/energeChartOption.js

@@ -0,0 +1,117 @@
+import * as echarts from "echarts";
+
+export function lunarYear(year) {
+  return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
+}
+
+export function getOptions(period, source, trend, options={}) {
+  if (trend[period].length == 0) return null;
+  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;
+    }
+  }
+
+  return {
+    color: [
+      "#FFD160",
+      "#12FFF5",
+      "#2760FF",
+      "#E80091",
+      "#8064ff",
+      "#ff8a3b",
+      "#8cd26d",
+      "#2aa1ff",
+    ],
+    grid: { top: 32, right: 12, bottom: 56, left: 48 },
+    xAxis: {
+      type: "category",
+      data:
+        source == "elec"
+          ? trend[period].map((item) => item.time)
+          : // DCS 部分的数据，需要前端自行拼接x轴数据
+            Array(period == "week" ? 7 : period == "year" ? 12 : days)
+              .fill(1)
+              .map((_, index) => {
+                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: {
+        color: "#fff",
+        fontSize: 10,
+        // rotate: period == 'year' ? 16 : 0,
+      },
+      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",
+    },
+    ...options
+  };
+}

src/utils/index.ts

@@ -36,6 +36,7 @@ class XClient {
 
 new XClient(
   // "ws://m306416y13.yicp.fun:35441/xc-screen/websocket/xc001",
+  // "ws://192.168.1.114:8081/xc-screen/websocket/xc001",
   "ws://10.70.180.10:8081/xc-screen/websocket/xc001",
   // "ws://192.168.1.12:8081/xc-screen/websocket/xc001",
   "DCS_DATA",