@@ -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", | |||
}, | |||
}; | |||
} |
@@ -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: { | |||
@@ -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: { | |||
@@ -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; | |||
} | |||
}, | |||
}, | |||
@@ -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 | |||
}; | |||
} |
@@ -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", | |||