update 能源，规格:

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

@@ -1,25 +1,98 @@
 import cls from "./index.module.css";
-import { randomInt } from "../../../../utils";
 import * as echarts from "echarts";
 import { Switch, Radio } from "antd";
 import ReactECharts from "echarts-for-react";
+import { useState } from "react";
+import { useSelector } from "react-redux";
 
 const EnergyCostChart = (props) => {
-  const options = {
+  const elecTrend = useSelector((state) => state.energy.trend.elec);
+  const gasITrend = useSelector((state) => state.energy.trend.natGas1);
+  const gasIITrend = useSelector((state) => state.energy.trend.natGas2);
+  const [source, setSource] = useState("elec");
+  const [period, setPeriod] = useState("week");
+
+  const currentTrend =
+    source == "elec" ? elecTrend : source == "gasi" ? gasITrend : gasIITrend;
+
+  const options = getOptions(
+    period,
+    source,
+    currentTrend ?? { week: [], month: [], year: [] }
+  );
+
+  return (
+    <div className={cls.energyCostChart}>
+      <div className={cls.titleBar}>
+        <h2>能耗趋势图</h2>
+      </div>
+
+      <div className={`${cls.choiceBar} flex items-center justify-between`}>
+        <Radio.Group
+          value={source}
+          buttonStyle="solid"
+          onChange={(v) => setSource(v.target.value)}
+          className={`${cls.radioGroup} flex items-center justify-between`}
+        >
+          <Radio.Button value="elec" className="radio-group__item">
+            电
+          </Radio.Button>
+          <Radio.Button value="gasi" className="radio-group__item">
+            天然气I
+          </Radio.Button>
+          <Radio.Button value="gasii" className="radio-group__item">
+            天然气II
+          </Radio.Button>
+        </Radio.Group>
+
+        <Radio.Group
+          value={period}
+          buttonStyle="solid"
+          onChange={(v) => setPeriod(v.target.value)}
+          className={cls.radioGroup}
+        >
+          <Radio.Button value="week" className="radio-group__item">
+            周
+          </Radio.Button>
+          <Radio.Button value="month" className="radio-group__item">
+            月
+          </Radio.Button>
+          <Radio.Button value="year" className="radio-group__item">
+            年
+          </Radio.Button>
+        </Radio.Group>
+      </div>
+
+      <div className="flex-1" style={{ marginTop: "8px" }}>
+        <ReactECharts option={options} style={{ height: "180px" }} />
+      </div>
+    </div>
+  );
+};
+
+export default EnergyCostChart;
+
+function getOptions(period, source, trend) {
+  console.log("trend ==> ", trend);
+
+  return {
     color: ["#FFD160", "#12FFF5", "#2760FF"],
     grid: { top: 32, right: 12, bottom: 56, left: 48 },
     xAxis: {
       type: "category",
-      data: Array(7)
-        .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(),
+      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,
@@ -43,7 +116,7 @@ const EnergyCostChart = (props) => {
       axisLabel: {
         color: "#fff",
         fontSize: 12,
-        formatter: "{value} %",
+        // formatter: "{value} %",
       },
       axisLine: {
         show: true,
@@ -56,17 +129,16 @@ const EnergyCostChart = (props) => {
           color: "#213259a0",
         },
       },
-      interval: 10,
-      min: 0,
-      max: 100,
+      // interval: 10,
+      // min: 0,
+      // max: 100,
     },
     series: [
       {
-        data: Array(7)
-          .fill(1)
-          .map((_) => {
-            return randomInt(60, 100);
-          }),
+        data:
+          source == "elec"
+            ? trend[period].map((item) => item.qty)
+            : trend[period],
         type: "line",
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -82,60 +154,4 @@ const EnergyCostChart = (props) => {
       trigger: "axis",
     },
   };
-
-  function handleSwitchChange(val) {}
-
-  return (
-    <div className={cls.energyCostChart}>
-      <div className={cls.titleBar}>
-        <h2>能耗趋势图</h2>
-      </div>
-
-      <div className={`${cls.choiceBar} flex items-center justify-between`}>
-        <Radio.Group
-          defaultValue="oxygen"
-          buttonStyle="solid"
-          className={`${cls.radioGroup} flex items-center justify-between`}
-        >
-          <Radio.Button value="oxygen" className="radio-group__item">
-            氧气含量
-          </Radio.Button>
-          <Radio.Button value="so2" className="radio-group__item">
-            二氧化硫
-          </Radio.Button>
-          <Radio.Button value="no" className="radio-group__item">
-            一氧化氮
-          </Radio.Button>
-          <Radio.Button value="no2" className="radio-group__item">
-            二氧化氮
-          </Radio.Button>
-        </Radio.Group>
-
-        <Radio.Group
-          defaultValue="week"
-          buttonStyle="solid"
-          className={cls.radioGroup}
-        >
-          <Radio.Button value="day" className="radio-group__item">
-            日
-          </Radio.Button>
-          <Radio.Button value="week" className="radio-group__item">
-            周
-          </Radio.Button>
-          <Radio.Button value="month" className="radio-group__item">
-            月
-          </Radio.Button>
-          <Radio.Button value="year" className="radio-group__item">
-            年
-          </Radio.Button>
-        </Radio.Group>
-      </div>
-
-      <div className="flex-1" style={{ marginTop: "8px" }}>
-        <ReactECharts option={options} style={{ height: "180px" }} />
-      </div>
-    </div>
-  );
-};
-
-export default EnergyCostChart;
+}

src/components/Common/Energy/index.jsx

@@ -6,8 +6,7 @@ import { useSelector } from "react-redux";
 
 function EnergyCost(props) {
   const energyInfo = useSelector((state) => state.energy?.info);
-  if (energyInfo) {
-  }
+
   return (
     <Container title="能耗" icon="battery" className={cls.energyCost}>
       <div className={`flex flex-col`}>