update right table

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

@@ -1,37 +1,160 @@
-import GraphBase from '../../../Common/GraphBase';
-import ReactECharts from 'echarts-for-react';
-import getOptions from '../../../../hooks/getChartOption';
+import GraphBase from "../../../Common/GraphBase";
+import ReactECharts from "echarts-for-react";
+// import getOptions from "../../../../hooks/getChartOption";
+import { useSelector } from "react-redux";
+import { useState } from "react";
+import * as echarts from "echarts";
 
 function ElecCost(props) {
-	function handleSwitch(v) {
-		// console.log('switched ', v);
-	}
+  const elecTrend = useSelector((state) => state.energy.trend.elec);
+  const [period, setPeriod] = useState("周");
 
-	function handleDateChange(v) {
-		// console.log('date ', v);
-	}
+  const options = getOptions(
+    { 周: "week", 月: "month", 年: "year" }[period],
+    elecTrend ?? { week: [], month: [], year: [] }
+  );
 
-	return (
-		<GraphBase
-			icon="battery"
-			title="电耗能"
-			desc="能耗趋势图"
-			switchOptions={true}
-			onSwitch={handleSwitch}
-			dateOptions={['日', '周', '月', '年']}
-			legend={['总量']}
-			onDateChange={handleDateChange}
-			size={['long', 'short']}
-		>
-			{/* real echarts here */}
-			<ReactECharts
-				key={Math.random()}
-				option={getOptions([[112, 73, 79, 82, 30, 105, 87]], '氧气')}
-				style={{ height: '100%' }}
-			/>
-			{/* real table data here  */}
-		</GraphBase>
-	);
+  function handleSwitch(v) {
+    // console.log('switched ', v);
+  }
+
+  function handleDateChange(v) {
+    setPeriod(v);
+  }
+
+  return (
+    <GraphBase
+      icon="battery"
+      title="电耗能"
+      desc="能耗趋势图"
+      switchOptions={false}
+      onSwitch={handleSwitch}
+      defaultSelect={period}
+      dateOptions={["周", "月", "年"]}
+      //   legend={["总量"]}
+      onDateChange={handleDateChange}
+      size={["long", "short"]}
+    >
+      {/* real echarts here */}
+      <ReactECharts
+        key={Math.random()}
+        option={options}
+        // option={getOptions([[112, 73, 79, 82, 30, 105, 87]], "氧气")}
+        style={{ height: "100%" }}
+      />
+      {/* real table data here  */}
+    </GraphBase>
+  );
 }
 
 export default ElecCost;
+
+function getOptions(period, trend) {
+  console.log("getOptions", period, trend);
+  // export default function getOptions(seriesData, name) {
+  const colors = [
+    "#FFD160",
+    "#12FFF5",
+    "#2760FF",
+    "#E80091",
+    "#8064ff",
+    "#ff8a3b",
+    "#8cd26d",
+    "#2aa1ff",
+  ];
+  return {
+    color: colors,
+    grid: { top: 38, right: 12, bottom: 20, left: 48 },
+    legend: {
+      show: false,
+      icon: "roundRect",
+      top: 10,
+      right: 10,
+      padding: 0,
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 3,
+      height: 8,
+      textStyle: {
+        color: "#DFF1FE",
+        fontSize: 10,
+      },
+    },
+    xAxis: {
+      type: "category",
+      data: trend[period].map((item) => item.time),
+      // 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(),
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: "#213259",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位m³/h",
+      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",
+        },
+      },
+    },
+    series: {
+      data: trend[period].map((item) => item.qty),
+      type: "line",
+      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: seriesData.map((arr, index) => ({
+    // 	name: index + 1 + '#' + name,
+    // 	data: arr,
+    // 	type: 'line',
+    // 	areaStyle: {
+    // 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    // 			{ offset: 0, color: colors[index] + '40' },
+    // 			{ offset: 0.5, color: colors[index] + '20' },
+    // 			{ offset: 1, color: colors[index] + '00' },
+    // 		]),
+    // 	},
+    // })),
+    tooltip: {
+      trigger: "axis",
+    },
+  };
+}