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", + }, + }; +}