diff --git a/src/components/Common/Energy/EnergyCostChart/index.jsx b/src/components/Common/Energy/EnergyCostChart/index.jsx index 31397fc..3489aed 100644 --- a/src/components/Common/Energy/EnergyCostChart/index.jsx +++ b/src/components/Common/Energy/EnergyCostChart/index.jsx @@ -1,9 +1,9 @@ import cls from "./index.module.css"; -import * as echarts from "echarts"; -import { Switch, Radio } from "antd"; +import { Radio } from "antd"; import ReactECharts from "echarts-for-react"; import { useState } from "react"; import { useSelector } from "react-redux"; +import { getOptions } from "../../../../utils/energeChartOption"; const EnergyCostChart = (props) => { const elecTrend = useSelector((state) => state.energy.trend.elec); @@ -86,86 +86,3 @@ const EnergyCostChart = (props) => { }; export default EnergyCostChart; - -function getOptions(period, source, trend) { - if (trend[period].length == 0) return null; - return { - color: ["#FFD160", "#12FFF5", "#2760FF"], - grid: { top: 32, right: 12, bottom: 56, left: 48 }, - xAxis: { - type: "category", - 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, - }, - axisTick: { show: false }, - axisLine: { - lineStyle: { - width: 1, - color: "#213259", - }, - }, - }, - yAxis: { - name: "单位/m³", - 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: - source == "elec" - ? trend[period].map((item) => item.qty) - : trend[period], - 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, - }, - ], - tooltip: { - trigger: "axis", - }, - }; -} diff --git a/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx b/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx index 1a3512c..7061af0 100644 --- a/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx +++ b/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx @@ -4,6 +4,7 @@ import ReactECharts from "echarts-for-react"; import { useSelector } from "react-redux"; import { useState } from "react"; import * as echarts from "echarts"; +import { lunarYear } from "../../../../utils/energeChartOption"; function Gas(props) { const elecTrend = useSelector((state) => state.energy.trend.natGas2); @@ -66,9 +67,20 @@ function Gas(props) { export default Gas; function getOptions(period, trend) { - console.log("getOptions", period, trend); if (trend[period].length === 0) return null; // export default function getOptions(seriesData, name) { + const today = new Date(); + const currentYear = today.getFullYear(); + const currentMonth = today.getMonth() + 1; + let days = 30; + if (period == "month") { + if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) { + days = 31; + } else if (currentMonth == 2) { + days = lunarYear(currentYear) ? 29 : 28; + } + } + const colors = [ "#FFD160", "#12FFF5", @@ -99,14 +111,19 @@ function getOptions(period, trend) { }, xAxis: { type: "category", - data: Array(period == "week" ? 7 : period == "year" ? 12 : 30) + data: Array(period == "week" ? 7 : period == "year" ? 12 : days) .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()}`; + if (period == "week") { + const dtimestamp = today - index * 24 * 60 * 60 * 1000; + return `${new Date(dtimestamp).getMonth() + 1}.${new Date( + dtimestamp + ).getDate()}`; + } else if (period == "month") { + return `${currentMonth}.${days - index}`; + } else { + return `${currentYear}.${12 - index}`; + } }) .reverse(), axisLabel: { diff --git a/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx b/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx index b0de8ae..1a6ce3e 100644 --- a/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx +++ b/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx @@ -4,6 +4,7 @@ import ReactECharts from "echarts-for-react"; import { useSelector } from "react-redux"; import { useState } from "react"; import * as echarts from "echarts"; +import { lunarYear } from "../../../../utils/energeChartOption"; function NatGas(props) { const elecTrend = useSelector((state) => state.energy.trend.natGas1); @@ -66,9 +67,19 @@ function NatGas(props) { export default NatGas; function getOptions(period, trend) { - console.log("getOptions", period, trend); if (trend[period].length === 0) return null; // export default function getOptions(seriesData, name) { + const today = new Date(); + const currentYear = today.getFullYear(); + const currentMonth = today.getMonth() + 1; + let days = 30; + if (period == "month") { + if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) { + days = 31; + } else if (currentMonth == 2) { + days = lunarYear(currentYear) ? 29 : 28; + } + } const colors = [ "#FFD160", "#12FFF5", @@ -99,14 +110,19 @@ function getOptions(period, trend) { }, xAxis: { type: "category", - data: Array(period == "week" ? 7 : period == "year" ? 12 : 30) + data: Array(period == "week" ? 7 : period == "year" ? 12 : days) .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()}`; + if (period == "week") { + const dtimestamp = today - index * 24 * 60 * 60 * 1000; + return `${new Date(dtimestamp).getMonth() + 1}.${new Date( + dtimestamp + ).getDate()}`; + } else if (period == "month") { + return `${currentMonth}.${days - index}`; + } else { + return `${currentYear}.${12 - index}`; + } }) .reverse(), axisLabel: { diff --git a/src/store/features/EnergySlice.js b/src/store/features/EnergySlice.js index e693684..960665d 100644 --- a/src/store/features/EnergySlice.js +++ b/src/store/features/EnergySlice.js @@ -110,11 +110,23 @@ const energySlice = createSlice({ if ("sumGas2Now" in action.payload) { state.info.ngQty2 = action.payload.sumGas2Now; } - if ("hisSumGas1" in action.payload) { - state.trend.natGas1.week = action.payload.hisSumGas1; + if ("hisSumGas1For7Day" in action.payload) { + state.trend.natGas1.week = action.payload.hisSumGas1For7Day; } - if ("hisSumGas2" in action.payload) { - state.trend.natGas2.week = action.payload.hisSumGas2; + if ("hisSumGas2For7Day" in action.payload) { + state.trend.natGas2.week = action.payload.hisSumGas2For7Day; + } + if ("sumGas1ForMonth" in action.payload) { + state.trend.natGas1.month = action.payload.sumGas1ForMonth; + } + if ("sumGas2ForMonth" in action.payload) { + state.trend.natGas2.month = action.payload.sumGas2ForMonth; + } + if ("sumGas1ForYear" in action.payload) { + state.trend.natGas1.year = action.payload.sumGas1ForYear; + } + if ("sumGas2ForYear" in action.payload) { + state.trend.natGas2.year = action.payload.sumGas2ForYear; } }, }, diff --git a/src/utils/energeChartOption.js b/src/utils/energeChartOption.js new file mode 100644 index 0000000..1b67fd6 --- /dev/null +++ b/src/utils/energeChartOption.js @@ -0,0 +1,117 @@ +import * as echarts from "echarts"; + +export function lunarYear(year) { + return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0); +} + +export function getOptions(period, source, trend, options={}) { + if (trend[period].length == 0) return null; + const today = new Date(); + const currentYear = today.getFullYear(); + const currentMonth = today.getMonth() + 1; + let days = 30; + if (period == "month") { + if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) { + days = 31; + } else if (currentMonth == 2) { + days = lunarYear(currentYear) ? 29 : 28; + } + } + + return { + color: [ + "#FFD160", + "#12FFF5", + "#2760FF", + "#E80091", + "#8064ff", + "#ff8a3b", + "#8cd26d", + "#2aa1ff", + ], + grid: { top: 32, right: 12, bottom: 56, left: 48 }, + xAxis: { + type: "category", + data: + source == "elec" + ? trend[period].map((item) => item.time) + : // DCS 部分的数据，需要前端自行拼接x轴数据 + Array(period == "week" ? 7 : period == "year" ? 12 : days) + .fill(1) + .map((_, index) => { + if (period == "week") { + const dtimestamp = today - index * 24 * 60 * 60 * 1000; + return `${new Date(dtimestamp).getMonth() + 1}.${new Date( + dtimestamp + ).getDate()}`; + } else if (period == "month") { + return `${currentMonth}.${days - index}`; + } else { + return `${currentYear}.${12 - index}`; + } + }) + .reverse(), + axisLabel: { + color: "#fff", + fontSize: 10, + // rotate: period == 'year' ? 16 : 0, + }, + axisTick: { show: false }, + axisLine: { + lineStyle: { + width: 1, + color: "#213259", + }, + }, + }, + yAxis: { + name: "单位/m³", + 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: + source == "elec" + ? trend[period].map((item) => item.qty) + : trend[period], + 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, + }, + ], + tooltip: { + trigger: "axis", + }, + ...options + }; +} diff --git a/src/utils/index.ts b/src/utils/index.ts index dd3d960..d8dfd1b 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -36,6 +36,7 @@ class XClient { new XClient( // "ws://m306416y13.yicp.fun:35441/xc-screen/websocket/xc001", + // "ws://192.168.1.114:8081/xc-screen/websocket/xc001", "ws://10.70.180.10:8081/xc-screen/websocket/xc001", // "ws://192.168.1.12:8081/xc-screen/websocket/xc001", "DCS_DATA",