update 能耗

This commit is contained in:
lb 2023-12-29 12:47:30 +08:00
parent 0cd25a6972
commit 871efd2eb2
4 changed files with 677 additions and 150 deletions

View File

@ -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 (
<GraphBase
icon="battery"
title="一氧化氮"
desc="能耗趋势图"
switchOptions={true}
onSwitch={handleSwitch}
dateOptions={['日', '周', '月', '年']}
legend={['总量', '白班', '夜班']}
onDateChange={handleDateChange}
size={['long', 'middle']}
>
{/* real echarts here */}
<ReactECharts
key={Math.random()}
option={getOptions(
[
[148, 110, 140, 122, 84, 153, 89],
[88, 79, 75, 73, 33, 54, 31],
[60, 31, 65, 49, 51, 99, 58],
],
'氧气',
)}
style={{ height: '100%' }}
/>
{/* real table data here */}
</GraphBase>
);
const options = getOptions("NOX_float", period, currentTrend);
function handleSwitch(v) {
// console.log('switched ', v);
}
function handleDateChange(v) {
setPeriod(v);
// console.log('date ', v);
}
return (
<GraphBase
icon="battery"
title="氮氧化物"
desc="能耗趋势图"
switchOptions={false}
defaultSelect={period}
onSwitch={handleSwitch}
dateOptions={["日", "周", "月", "年"]}
// legend={["", "", ""]}
onDateChange={handleDateChange}
size={["long", "middle"]}
>
{/* real echarts here */}
<ReactECharts
key={Math.random()}
option={options}
// option={getOptions(
// [
// [148, 110, 140, 122, 84, 153, 89],
// [88, 79, 75, 73, 33, 54, 31],
// [60, 31, 65, 49, 51, 99, 58],
// ],
// ""
// )}
style={{ height: "100%" }}
/>
{/* real table data here */}
</GraphBase>
);
}
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",
},
};
}

View File

@ -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 (
<GraphBase
icon="battery"
title="二氧化氮"
desc="能耗趋势图"
switchOptions={true}
onSwitch={handleSwitch}
dateOptions={['日', '周', '月', '年']}
legend={['总量', '白班', '夜班']}
onDateChange={handleDateChange}
size={['long', 'middle']}
>
{/* real echarts here */}
<ReactECharts
key={Math.random()}
option={getOptions(
[
[91, 164, 88, 120, 167, 158, 43],
[30, 75, 52, 43, 73, 66, 36],
[61, 89, 36, 77, 94, 92, 7],
],
'氧气',
)}
style={{ height: '100%' }}
/>
{/* real table data here */}
</GraphBase>
);
const options = getOptions("dust_float", period, currentTrend);
function handleSwitch(v) {
// console.log('switched ', v);
}
function handleDateChange(v) {
setPeriod(v);
// console.log('date ', v);
}
return (
<GraphBase
icon="battery"
title="颗粒物"
desc="能耗趋势图"
switchOptions={false}
defaultSelect={period}
onSwitch={handleSwitch}
dateOptions={["日", "周", "月", "年"]}
// legend={["", "", ""]}
onDateChange={handleDateChange}
size={["long", "middle"]}
>
{/* real echarts here */}
<ReactECharts
key={Math.random()}
option={options}
// option={getOptions(
// [
// [91, 164, 88, 120, 167, 158, 43],
// [30, 75, 52, 43, 73, 66, 36],
// [61, 89, 36, 77, 94, 92, 7],
// ],
// ""
// )}
style={{ height: "100%" }}
/>
{/* real table data here */}
</GraphBase>
);
}
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",
},
};
}

View File

@ -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 (
<GraphBase
icon="battery"
title="氧气含量"
desc="能耗趋势图"
switchOptions={true}
onSwitch={handleSwitch}
dateOptions={['日', '周', '月', '年']}
legend={['总量', '白班', '夜班']}
onDateChange={handleDateChange}
size={['long', 'middle']}
>
{/* real echarts here */}
<ReactECharts
key={Math.random()}
option={getOptions(
[
[172, 165, 135, 35, 101, 53, 68], //
[87, 68, 81, 33, 35, 44, 38], //
[85, 97, 54, 2, 66, 9, 30], //
],
'氧气',
)}
style={{ height: '100%' }}
/>
{/* real table data here */}
</GraphBase>
);
const options = getOptions("O2_float", period, currentTrend);
function handleSwitch(v) {
// console.log('switched ', v);
}
function handleDateChange(v) {
setPeriod(v);
// console.log('date ', v);
}
return (
<GraphBase
icon="battery"
title="氧气含量"
desc="能耗趋势图"
switchOptions={false}
defaultSelect={period}
onSwitch={handleSwitch}
dateOptions={["日", "周", "月", "年"]}
// legend={["", "", ""]}
onDateChange={handleDateChange}
size={["long", "middle"]}
>
{/* real echarts here */}
<ReactECharts
key={Math.random()}
option={options}
// option={getOptions(
// [
// [172, 165, 135, 35, 101, 53, 68], //
// [87, 68, 81, 33, 35, 44, 38], //
// [85, 97, 54, 2, 66, 9, 30], //
// ],
// ""
// )}
style={{ height: "100%" }}
/>
{/* real table data here */}
</GraphBase>
);
}
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",
},
};
}

View File

@ -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 (
<GraphBase
icon="battery"
title="二氧化硫"
desc="能耗趋势图"
switchOptions={true}
onSwitch={handleSwitch}
dateOptions={['日', '周', '月', '年']}
legend={['总量', '白班', '夜班']}
onDateChange={handleDateChange}
size={['long', 'middle']}
>
{/* real echarts here */}
<ReactECharts
key={Math.random()}
option={getOptions(
[
[132, 155, 140, 83, 180, 67, 136],
[83, 58, 60, 22, 80, 64, 43],
[49, 97, 80, 61, 100, 3, 93],
],
'氧气',
)}
style={{ height: '100%' }}
/>
{/* real table data here */}
</GraphBase>
);
const options = getOptions("SO2_float", period, currentTrend);
function handleSwitch(v) {
// console.log('switched ', v);
}
function handleDateChange(v) {
setPeriod(v);
// console.log('date ', v);
}
return (
<GraphBase
icon="battery"
title="二氧化硫"
desc="能耗趋势图"
switchOptions={false}
defaultSelect={period}
onSwitch={handleSwitch}
dateOptions={["日", "周", "月", "年"]}
// legend={["", "", ""]}
onDateChange={handleDateChange}
size={["long", "middle"]}
>
{/* real echarts here */}
<ReactECharts
key={Math.random()}
// option={getOptions(
// [
// [132, 155, 140, 83, 180, 67, 136],
// [83, 58, 60, 22, 80, 64, 43],
// [49, 97, 80, 61, 100, 3, 93],
// ],
// '',
// )}
option={options}
style={{ height: "100%" }}
/>
{/* real table data here */}
</GraphBase>
);
}
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",
},
};
}