diff --git a/src/components/Common/NavMenu/index.jsx b/src/components/Common/NavMenu/index.jsx index e7e595a..3fbbd2c 100644 --- a/src/components/Common/NavMenu/index.jsx +++ b/src/components/Common/NavMenu/index.jsx @@ -7,7 +7,7 @@ export default function CenterMenu({ active, onChangeActive }) { ['窑炉内部', '/kilnInner'], ['退火监测', '/stopFire'], ['质检统计', '/quailtyCheck'], - // ['能耗分析', '/energyCost'], + ['能耗分析', '/energyCost'], ]; return (
diff --git a/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx b/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx index c55a1e3..60b54b3 100644 --- a/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx +++ b/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx @@ -1,37 +1,160 @@ -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 Gas(props) { - function handleSwitch(v) { - // console.log('switched ', v); - } + const elecTrend = useSelector((state) => state.energy.trend.natGas2); + const [period, setPeriod] = useState("周"); - function handleDateChange(v) { - // console.log('date ', v); - } + const options = getOptions( + { 周: "week", 月: "month", 年: "year" }[period], + elecTrend ?? { week: [], month: [], year: [] } + ); - return ( - - {/* real echarts here */} - - {/* real table data here */} - - ); + function handleSwitch(v) { + // console.log('switched ', v); + } + + function handleDateChange(v) { + // console.log('date ', v); + setPeriod(v); + } + + return ( + + {/* real echarts here */} + + {/* real table data here */} + + ); } export default Gas; + +function getOptions(period, trend) { + console.log("getOptions", period, trend); + // export default function getOptions(seriesData, name) { + const colors = [ + "#FFD160", + "#12FFF5", + "#2760FF", + "#E80091", + "#8064ff", + "#ff8a3b", + "#8cd26d", + "#2aa1ff", + ]; + return { + color: colors, + grid: { top: 38, right: 12, bottom: 20, left: 48 }, + legend: { + show: false, + icon: "roundRect", + top: 10, + right: 10, + padding: 0, + itemWidth: 8, + itemHeight: 8, + itemGap: 3, + height: 8, + textStyle: { + color: "#DFF1FE", + fontSize: 10, + }, + }, + xAxis: { + type: "category", + data: 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³/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", + }, + }, + }, + series: { + data: trend[period], + type: "line", + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: colors[0] + "40" }, + { offset: 0.5, color: colors[0] + "20" }, + { offset: 1, color: colors[0] + "00" }, + ]), + }, + }, + // series: seriesData.map((arr, index) => ({ + // name: index + 1 + '#' + name, + // data: arr, + // type: 'line', + // areaStyle: { + // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + // { offset: 0, color: colors[index] + '40' }, + // { offset: 0.5, color: colors[index] + '20' }, + // { offset: 1, color: colors[index] + '00' }, + // ]), + // }, + // })), + tooltip: { + trigger: "axis", + }, + }; +} diff --git a/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx b/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx index fd6506c..1f03671 100644 --- a/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx +++ b/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx @@ -1,37 +1,160 @@ -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 ElecCost(props) { - function handleSwitch(v) { - // console.log('switched ', v); - } + const elecTrend = useSelector((state) => state.energy.trend.elec); + const [period, setPeriod] = useState("周"); - function handleDateChange(v) { - // console.log('date ', v); - } + const options = getOptions( + { 周: "week", 月: "month", 年: "year" }[period], + elecTrend ?? { week: [], month: [], year: [] } + ); - return ( - - {/* real echarts here */} - - {/* real table data here */} - - ); + function handleSwitch(v) { + // console.log('switched ', v); + } + + function handleDateChange(v) { + setPeriod(v); + } + + return ( + + {/* real echarts here */} + + {/* real table data here */} + + ); } export default ElecCost; + +function getOptions(period, trend) { + console.log("getOptions", period, trend); + // export default function getOptions(seriesData, name) { + const colors = [ + "#FFD160", + "#12FFF5", + "#2760FF", + "#E80091", + "#8064ff", + "#ff8a3b", + "#8cd26d", + "#2aa1ff", + ]; + return { + color: colors, + grid: { top: 38, right: 12, bottom: 20, left: 48 }, + legend: { + show: false, + icon: "roundRect", + top: 10, + right: 10, + padding: 0, + itemWidth: 8, + itemHeight: 8, + itemGap: 3, + height: 8, + textStyle: { + color: "#DFF1FE", + fontSize: 10, + }, + }, + xAxis: { + type: "category", + data: trend[period].map((item) => item.time), + // 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(), + 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", + }, + }, + }, + series: { + data: trend[period].map((item) => item.qty), + type: "line", + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: colors[0] + "40" }, + { offset: 0.5, color: colors[0] + "20" }, + { offset: 1, color: colors[0] + "00" }, + ]), + }, + }, + // series: seriesData.map((arr, index) => ({ + // name: index + 1 + '#' + name, + // data: arr, + // type: 'line', + // areaStyle: { + // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + // { offset: 0, color: colors[index] + '40' }, + // { offset: 0.5, color: colors[index] + '20' }, + // { offset: 1, color: colors[index] + '00' }, + // ]), + // }, + // })), + tooltip: { + trigger: "axis", + }, + }; +} diff --git a/src/components/Modules/EnergyCostAnalysis/Energy/index.jsx b/src/components/Modules/EnergyCostAnalysis/Energy/index.jsx index d8565e3..e37e372 100644 --- a/src/components/Modules/EnergyCostAnalysis/Energy/index.jsx +++ b/src/components/Modules/EnergyCostAnalysis/Energy/index.jsx @@ -1,44 +1,48 @@ -import cls from './index.module.css'; -import GradientText from '../../../Common/GradientText'; +import cls from "./index.module.css"; +import GradientText from "../../../Common/GradientText"; +import { useSelector } from "react-redux"; function Energy(props) { - return ( -
- - - - - 余热发电 - 992Kwh - + const energyInfo = useSelector((state) => state.energy?.info); + return ( +
+ + + + + 余热发电 + {energyInfo?.elecQty1 || 0}kWh + - - 水耗量: 32Km³ - - - 天然气I: 92m³ - - - 电耗量: 92Km³ - - - 天然气II: 92m³ - -
- ); + + 水耗量: {energyInfo?.waterQty || 0}Km³ + + + 天然气I: {energyInfo?.ngQty1 || 0} + + + 电耗量: {energyInfo?.elecQty2 || 0}kWh + + + 天然气II: {energyInfo?.ngQty2 || 0} + +
+ ); } export default Energy; diff --git a/src/components/Modules/EnergyCostAnalysis/Energy/index.module.css b/src/components/Modules/EnergyCostAnalysis/Energy/index.module.css index 58f27e0..19cbe76 100644 --- a/src/components/Modules/EnergyCostAnalysis/Energy/index.module.css +++ b/src/components/Modules/EnergyCostAnalysis/Energy/index.module.css @@ -13,8 +13,8 @@ .infoText { text-align: center; - font-size: 24px; - line-height: 2.2; + font-size: 20px; + line-height: 2.5; /* line-height: 20px; */ letter-spacing: 1px; user-select: none; diff --git a/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx b/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx index e203c3c..b8ce9a9 100644 --- a/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx +++ b/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx @@ -1,37 +1,160 @@ -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 NatGas(props) { - function handleSwitch(v) { - // console.log('switched ', v); - } + const elecTrend = useSelector((state) => state.energy.trend.natGas1); + const [period, setPeriod] = useState("周"); - function handleDateChange(v) { - // console.log('date ', v); - } + const options = getOptions( + { 周: "week", 月: "month", 年: "year" }[period], + elecTrend ?? { week: [], month: [], year: [] } + ); - return ( - - {/* real echarts here */} - - {/* real table data here */} - - ); + 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 NatGas; + +function getOptions(period, trend) { + console.log("getOptions", period, trend); + // export default function getOptions(seriesData, name) { + const colors = [ + "#FFD160", + "#12FFF5", + "#2760FF", + "#E80091", + "#8064ff", + "#ff8a3b", + "#8cd26d", + "#2aa1ff", + ]; + return { + color: colors, + grid: { top: 38, right: 12, bottom: 20, left: 48 }, + legend: { + show: false, + icon: "roundRect", + top: 10, + right: 10, + padding: 0, + itemWidth: 8, + itemHeight: 8, + itemGap: 3, + height: 8, + textStyle: { + color: "#DFF1FE", + fontSize: 10, + }, + }, + xAxis: { + type: "category", + data: 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³/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", + }, + }, + }, + series: { + data: trend[period], + type: "line", + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: colors[0] + "40" }, + { offset: 0.5, color: colors[0] + "20" }, + { offset: 1, color: colors[0] + "00" }, + ]), + }, + }, + // series: seriesData.map((arr, index) => ({ + // name: index + 1 + '#' + name, + // data: arr, + // type: 'line', + // areaStyle: { + // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + // { offset: 0, color: colors[index] + '40' }, + // { offset: 0.5, color: colors[index] + '20' }, + // { offset: 1, color: colors[index] + '00' }, + // ]), + // }, + // })), + tooltip: { + trigger: "axis", + }, + }; +} diff --git a/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx b/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx index 9dbc6d2..ea83427 100644 --- a/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx +++ b/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx @@ -1,37 +1,39 @@ -import cls from './index.module.css'; -import GradientText from '../../../Common/GradientText'; +import cls from "./index.module.css"; +import GradientText from "../../../Common/GradientText"; +import { useSelector } from "react-redux"; function SmokeHandle(props) { - return ( -
- - - - - 氧气含量: 80% - - - 一氧化氮排放浓度: 20mg/m³ - - - 二氧化硫排放浓度: 20mg/m³ - - - 二氧化氮排放浓度: 20mg/m³ - -
- ); + const smokeInfo = useSelector((state) => state.smoke?.info); + return ( +
+ + + + + 氧气含量: {smokeInfo?.O2_float || 0}% + + + 氮氧化物浓度: {smokeInfo?.NOX_float || 0}mg/m³ + + + 二氧化硫浓度: {smokeInfo?.SO2_float || 0}mg/m³ + + + 颗粒物浓度: {smokeInfo?.dust_float || 0}mg/m³ + +
+ ); } export default SmokeHandle; diff --git a/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css b/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css index 9f7e217..d984658 100644 --- a/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css +++ b/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css @@ -13,8 +13,8 @@ .infoText { text-align: center; - font-size: 24px; - line-height: 2.2; + font-size: 20px; + line-height: 2.5; /* line-height: 20px; */ letter-spacing: 1px; user-select: none; diff --git a/src/utils/index.ts b/src/utils/index.ts index e1b0fae..0e9c6f9 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -63,15 +63,15 @@ new XClient( new XClient( // "ws://10.70.27.122:8080/websocket/message?userId=CUTTING", "ws://10.70.2.2:8080/websocket/message?userId=CUTTING" + newUser, - "CUTTING_DATA", + "CUTTING_DATA", cuttingHandler ); // 烟气处理相关数据 new XClient( // "ws://10.70.27.122:8080/websocket/message?userId=CUTTING", - // "ws://10.70.2.2:8080/websocket/message?userId=GAS" + newUser, - "ws://192.168.1.62:48082/websocket/message?userId=GAS" + newUser, + "ws://10.70.2.2:8080/websocket/message?userId=GAS" + newUser, + // "ws://192.168.1.62:48082/websocket/message?userId=GAS" + newUser, "SMOKE_DATA", smokeHandler );