mt-fe-group/xuchang-new
8
0
フォーク 0
コード イシュー プルリクエスト リリース Wiki アクティビティ

update 天然气历史

ソースを参照
このコミットが含まれているのは:
lb 2024-01-03 11:28:26 +08:00
コミット 6b838ce089
6個のファイルの変更、183行の追加、103行の削除
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む

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

31
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: {

30
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: {

20
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;
}
},
},

117
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
};
}

1
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",