merge bugfix

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

@@ -8,7 +8,8 @@ import { lunarYear } from "../../../../utils/energeChartOption";
 import dayjs from "dayjs";
 
 function NatGas(props) {
-  const elecTrend = useSelector((state) => state.energy.trend.natGas1);
+  const natGasTrend = useSelector((state) => state.energy.trend.natGas1);
+  const gasTrend = useSelector((state) => state.energy.trend.natGas2);
   const [period, setPeriod] = useState("周");
   const [timestr, setTimestr] = useState(
     dayjs().subtract(7, "day").format("YYYY.MM.DD") +
@@ -18,7 +19,7 @@ function NatGas(props) {
 
   const options = getOptions(
     { 周: "week", 月: "month", 年: "year" }[period],
-    elecTrend ?? { week: [], month: [], year: [] }
+    [natGasTrend, gasTrend] ?? { week: [], month: [], year: [] }
   );
 
   function handleSwitch(v) {
@@ -50,7 +51,7 @@ function NatGas(props) {
   return (
     <GraphBase
       icon="battery"
-      title="天然气I"
+      title="天然气"
       desc={`能耗趋势图  ${timestr}`}
       switchOptions={false}
       onSwitch={handleSwitch}
@@ -60,6 +61,45 @@ function NatGas(props) {
       onDateChange={handleDateChange}
       size={["long", "middle"]}
     >
+      <div
+        className="nat-gas-legend"
+        style={{
+          position: "absolute",
+          top: 28,
+          right: 144,
+          display: "flex",
+          gap: "24px",
+        }}
+      >
+        <div className="legend-item">
+          <div
+            className="legend-color"
+            style={{
+              display: "inline-block",
+              width: "12px",
+              height: "12px",
+              borderRadius: "2px",
+              marginRight: "8px",
+              backgroundColor: "#FFD160",
+            }}
+          />
+          <span style={{ color: "#fff" }}>天然气I</span>
+        </div>
+        <div className="legend-item">
+          <div
+            className="legend-color"
+            style={{
+              display: "inline-block",
+              width: "12px",
+              height: "12px",
+              borderRadius: "2px",
+              marginRight: "8px",
+              backgroundColor: "#12FFF5",
+            }}
+          />
+          <span style={{ color: "#fff" }}>天然气II</span>
+        </div>
+      </div>
       {/* real echarts here */}
       {options && (
         <ReactECharts
@@ -89,8 +129,9 @@ function NatGas(props) {
 
 export default NatGas;
 
-function getOptions(period, trend) {
-  if (trend[period].length === 0) return null;
+function getOptions(period, trendArr) {
+  if (trendArr[0][period].length === 0 || trendArr[1][period].length === 0)
+    return null;
   // export default function getOptions(seriesData, name) {
   const today = new Date();
   const currentYear = today.getFullYear();
@@ -185,21 +226,38 @@ function getOptions(period, trend) {
         },
       },
     },
-    series: {
-      data: trend[period].map((item) =>
-        item != null ? (+item).toFixed(2) : null
-      ),
-      type: "line",
-      symbol: "circle",
-      symbolSize: 6,
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: colors[0] + "40" },
-          { offset: 0.5, color: colors[0] + "20" },
-          { offset: 1, color: colors[0] + "00" },
-        ]),
+    series: [
+      {
+        data: trendArr[0][period].map((item) =>
+          item != null ? (+item).toFixed(2) : null
+        ),
+        type: "line",
+        symbol: "circle",
+        symbolSize: 6,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: colors[0] + "40" },
+            { offset: 0.5, color: colors[0] + "20" },
+            { offset: 1, color: colors[0] + "00" },
+          ]),
+        },
       },
-    },
+      {
+        data: trendArr[1][period].map((item) =>
+          item != null ? (+item).toFixed(2) : null
+        ),
+        type: "line",
+        symbol: "circle",
+        symbolSize: 6,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: colors[1] + "40" },
+            { offset: 0.5, color: colors[1] + "20" },
+            { offset: 1, color: colors[1] + "00" },
+          ]),
+        },
+      },
+    ],
     // series: seriesData.map((arr, index) => ({
     // 	name: index + 1 + '#' + name,
     // 	data: arr,