diff --git a/src/components/Modules/EnergyCostAnalysis/NO/index.jsx b/src/components/Modules/EnergyCostAnalysis/NO/index.jsx
index a2b98f6..3c011fd 100644
--- a/src/components/Modules/EnergyCostAnalysis/NO/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/NO/index.jsx
@@ -1,44 +1,176 @@
-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 NO(props) {
- function handleSwitch(v) {
- // console.log('switched ', v);
- }
+ const dayTrend = useSelector((state) => state.smoke?.dayTrend);
+ const weekTrend = useSelector((state) => state.smoke?.weekTrend);
+ const monthTrend = useSelector((state) => state.smoke?.monthTrend);
+ const yearTrend = useSelector((state) => state.smoke?.yearTrend);
+ const [period, setPeriod] = useState("日");
- function handleDateChange(v) {
- // console.log('date ', v);
- }
+ const currentTrend =
+ period === "日"
+ ? dayTrend
+ : period === "周"
+ ? weekTrend
+ : period === "月"
+ ? monthTrend
+ : yearTrend;
- return (
-
- {/* real echarts here */}
-
- {/* real table data here */}
-
- );
+ const options = getOptions("NOX_float", period, currentTrend);
+
+ function handleSwitch(v) {
+ // console.log('switched ', v);
+ }
+
+ function handleDateChange(v) {
+ setPeriod(v);
+ // console.log('date ', v);
+ }
+
+ return (
+
+ {/* real echarts here */}
+
+ {/* real table data here */}
+
+ );
}
export default NO;
+
+function getOptions(source, period, trend) {
+ return {
+ color: ["#FFD160", "#12FFF5", "#2760FF"],
+ grid: { top: 38, right: 12, bottom: 20, 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: trend[source].map((item) => item.time),
+ 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",
+ },
+ },
+ // interval: 10,
+ // min: 0,
+ // max: 100,
+ },
+ series: [
+ {
+ data: trend[source].map((item) => item.value),
+ 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,
+ },
+ // {
+ // data: Array(7)
+ // .fill(1)
+ // .map((_) => {
+ // return randomInt(60, 100);
+ // }),
+ // type: "line",
+ // areaStyle: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ // { offset: 0, color: "#12FFF540" },
+ // { offset: 0.5, color: "#12FFF520" },
+ // { offset: 1, color: "#12FFF510" },
+ // ]),
+ // },
+ // // smooth: true,
+ // },
+ // {
+ // data: Array(7)
+ // .fill(1)
+ // .map((_) => {
+ // return randomInt(60, 100);
+ // }),
+ // type: "line",
+ // areaStyle: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ // { offset: 0, color: "#2760FF40" },
+ // { offset: 0.5, color: "#2760FF20" },
+ // { offset: 1, color: "#2760FF10" },
+ // ]),
+ // },
+ // // smooth: true,
+ // },
+ ],
+ tooltip: {
+ trigger: "axis",
+ },
+ };
+}
diff --git a/src/components/Modules/EnergyCostAnalysis/NO2/index.jsx b/src/components/Modules/EnergyCostAnalysis/NO2/index.jsx
index 0d54397..78a3f51 100644
--- a/src/components/Modules/EnergyCostAnalysis/NO2/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/NO2/index.jsx
@@ -1,44 +1,176 @@
-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 NO2(props) {
- function handleSwitch(v) {
- // console.log('switched ', v);
- }
+function Dust(props) {
+ const dayTrend = useSelector((state) => state.smoke?.dayTrend);
+ const weekTrend = useSelector((state) => state.smoke?.weekTrend);
+ const monthTrend = useSelector((state) => state.smoke?.monthTrend);
+ const yearTrend = useSelector((state) => state.smoke?.yearTrend);
+ const [period, setPeriod] = useState("日");
- function handleDateChange(v) {
- // console.log('date ', v);
- }
+ const currentTrend =
+ period === "日"
+ ? dayTrend
+ : period === "周"
+ ? weekTrend
+ : period === "月"
+ ? monthTrend
+ : yearTrend;
- return (
-
- {/* real echarts here */}
-
- {/* real table data here */}
-
- );
+ const options = getOptions("dust_float", period, currentTrend);
+
+ function handleSwitch(v) {
+ // console.log('switched ', v);
+ }
+
+ function handleDateChange(v) {
+ setPeriod(v);
+ // console.log('date ', v);
+ }
+
+ return (
+
+ {/* real echarts here */}
+
+ {/* real table data here */}
+
+ );
}
-export default NO2;
+export default Dust;
+
+function getOptions(source, period, trend) {
+ return {
+ color: ["#FFD160", "#12FFF5", "#2760FF"],
+ grid: { top: 38, right: 12, bottom: 20, 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: trend[source].map((item) => item.time),
+ 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",
+ },
+ },
+ // interval: 10,
+ // min: 0,
+ // max: 100,
+ },
+ series: [
+ {
+ data: trend[source].map((item) => item.value),
+ 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,
+ },
+ // {
+ // data: Array(7)
+ // .fill(1)
+ // .map((_) => {
+ // return randomInt(60, 100);
+ // }),
+ // type: "line",
+ // areaStyle: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ // { offset: 0, color: "#12FFF540" },
+ // { offset: 0.5, color: "#12FFF520" },
+ // { offset: 1, color: "#12FFF510" },
+ // ]),
+ // },
+ // // smooth: true,
+ // },
+ // {
+ // data: Array(7)
+ // .fill(1)
+ // .map((_) => {
+ // return randomInt(60, 100);
+ // }),
+ // type: "line",
+ // areaStyle: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ // { offset: 0, color: "#2760FF40" },
+ // { offset: 0.5, color: "#2760FF20" },
+ // { offset: 1, color: "#2760FF10" },
+ // ]),
+ // },
+ // // smooth: true,
+ // },
+ ],
+ tooltip: {
+ trigger: "axis",
+ },
+ };
+}
diff --git a/src/components/Modules/EnergyCostAnalysis/O/index.jsx b/src/components/Modules/EnergyCostAnalysis/O/index.jsx
index f9d7811..299e8e4 100644
--- a/src/components/Modules/EnergyCostAnalysis/O/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/O/index.jsx
@@ -1,44 +1,176 @@
-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 Oxygen(props) {
- function handleSwitch(v) {
- // console.log('switched ', v);
- }
+ const dayTrend = useSelector((state) => state.smoke?.dayTrend);
+ const weekTrend = useSelector((state) => state.smoke?.weekTrend);
+ const monthTrend = useSelector((state) => state.smoke?.monthTrend);
+ const yearTrend = useSelector((state) => state.smoke?.yearTrend);
+ const [period, setPeriod] = useState("日");
- function handleDateChange(v) {
- // console.log('date ', v);
- }
+ const currentTrend =
+ period === "日"
+ ? dayTrend
+ : period === "周"
+ ? weekTrend
+ : period === "月"
+ ? monthTrend
+ : yearTrend;
- return (
-
- {/* real echarts here */}
-
- {/* real table data here */}
-
- );
+ const options = getOptions("O2_float", period, currentTrend);
+
+ function handleSwitch(v) {
+ // console.log('switched ', v);
+ }
+
+ function handleDateChange(v) {
+ setPeriod(v);
+ // console.log('date ', v);
+ }
+
+ return (
+
+ {/* real echarts here */}
+
+ {/* real table data here */}
+
+ );
}
export default Oxygen;
+
+function getOptions(source, period, trend) {
+ return {
+ color: ["#FFD160", "#12FFF5", "#2760FF"],
+ grid: { top: 38, right: 12, bottom: 20, 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: trend[source].map((item) => item.time),
+ 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",
+ },
+ },
+ // interval: 10,
+ // min: 0,
+ // max: 100,
+ },
+ series: [
+ {
+ data: trend[source].map((item) => item.value),
+ 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,
+ },
+ // {
+ // data: Array(7)
+ // .fill(1)
+ // .map((_) => {
+ // return randomInt(60, 100);
+ // }),
+ // type: "line",
+ // areaStyle: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ // { offset: 0, color: "#12FFF540" },
+ // { offset: 0.5, color: "#12FFF520" },
+ // { offset: 1, color: "#12FFF510" },
+ // ]),
+ // },
+ // // smooth: true,
+ // },
+ // {
+ // data: Array(7)
+ // .fill(1)
+ // .map((_) => {
+ // return randomInt(60, 100);
+ // }),
+ // type: "line",
+ // areaStyle: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ // { offset: 0, color: "#2760FF40" },
+ // { offset: 0.5, color: "#2760FF20" },
+ // { offset: 1, color: "#2760FF10" },
+ // ]),
+ // },
+ // // smooth: true,
+ // },
+ ],
+ tooltip: {
+ trigger: "axis",
+ },
+ };
+}
diff --git a/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx b/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx
index 2f763d6..2504eef 100644
--- a/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx
@@ -1,44 +1,175 @@
-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 SO2(props) {
- function handleSwitch(v) {
- // console.log('switched ', v);
- }
+ const dayTrend = useSelector((state) => state.smoke?.dayTrend);
+ const weekTrend = useSelector((state) => state.smoke?.weekTrend);
+ const monthTrend = useSelector((state) => state.smoke?.monthTrend);
+ const yearTrend = useSelector((state) => state.smoke?.yearTrend);
+ const [period, setPeriod] = useState("日");
- function handleDateChange(v) {
- // console.log('date ', v);
- }
+ const currentTrend =
+ period === "日"
+ ? dayTrend
+ : period === "周"
+ ? weekTrend
+ : period === "月"
+ ? monthTrend
+ : yearTrend;
- return (
-
- {/* real echarts here */}
-
- {/* real table data here */}
-
- );
+ const options = getOptions("SO2_float", period, currentTrend);
+
+ function handleSwitch(v) {
+ // console.log('switched ', v);
+ }
+
+ function handleDateChange(v) {
+ setPeriod(v);
+ // console.log('date ', v);
+ }
+ return (
+
+ {/* real echarts here */}
+
+ {/* real table data here */}
+
+ );
}
export default SO2;
+
+function getOptions(source, period, trend) {
+ return {
+ color: ["#FFD160", "#12FFF5", "#2760FF"],
+ grid: { top: 38, right: 12, bottom: 20, 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: trend[source].map((item) => item.time),
+ 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",
+ },
+ },
+ // interval: 10,
+ // min: 0,
+ // max: 100,
+ },
+ series: [
+ {
+ data: trend[source].map((item) => item.value),
+ 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,
+ },
+ // {
+ // data: Array(7)
+ // .fill(1)
+ // .map((_) => {
+ // return randomInt(60, 100);
+ // }),
+ // type: "line",
+ // areaStyle: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ // { offset: 0, color: "#12FFF540" },
+ // { offset: 0.5, color: "#12FFF520" },
+ // { offset: 1, color: "#12FFF510" },
+ // ]),
+ // },
+ // // smooth: true,
+ // },
+ // {
+ // data: Array(7)
+ // .fill(1)
+ // .map((_) => {
+ // return randomInt(60, 100);
+ // }),
+ // type: "line",
+ // areaStyle: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ // { offset: 0, color: "#2760FF40" },
+ // { offset: 0.5, color: "#2760FF20" },
+ // { offset: 1, color: "#2760FF10" },
+ // ]),
+ // },
+ // // smooth: true,
+ // },
+ ],
+ tooltip: {
+ trigger: "axis",
+ },
+ };
+}