From 049a0804ac9e2bbd3a0e2b52d304d47834638a8e Mon Sep 17 00:00:00 2001 From: lb Date: Thu, 28 Dec 2023 16:16:31 +0800 Subject: [PATCH] =?UTF-8?q?update=E7=83=9F=E6=B0=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SmokeHandle/SmokeTrendChart/index.jsx | 363 +++++++++--------- src/components/Common/SmokeHandle/index.jsx | 47 ++- src/store/features/smokeSlice.js | 87 +++++ src/store/index.js | 5 +- src/utils/index.ts | 9 + src/utils/smoke.ts | 21 + 6 files changed, 340 insertions(+), 192 deletions(-) create mode 100644 src/store/features/smokeSlice.js create mode 100644 src/utils/smoke.ts diff --git a/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx b/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx index 2cfa99e..b44d741 100644 --- a/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx +++ b/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx @@ -1,182 +1,199 @@ -import cls from './index.module.css'; -import { randomInt } from '../../../../utils'; - -import * as echarts from 'echarts'; -import { Switch, Radio } from 'antd'; -import ReactECharts from 'echarts-for-react'; +import cls from "./index.module.css"; +import { randomInt } from "../../../../utils"; +import * as echarts from "echarts"; +import { Radio } from "antd"; +import ReactECharts from "echarts-for-react"; +import { useState } from "react"; +import { useSelector } from "react-redux"; const SmokeTrendChart = (props) => { - const options = { - 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(), - 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: Array(7) - .fill(1) - .map((_) => { - return randomInt(60, 100); - }), - 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', - }, - }; + 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); - function handleSwitchChange(val) { - // val: boolean - } + const [source, setSource] = useState("O2_float"); + const [period, setPeriod] = useState("day"); - return ( -
-
-

烟气趋势图

- -
- 班次详情 -
    -
  • 总量
    • -
  • 白班
    • -
  • 夜班
    • -
-
-
+ const currentTrend = + period === "day" + ? dayTrend + : period === "week" + ? weekTrend + : period === "month" + ? monthTrend + : yearTrend; -
- - - 氧气含量 - - - 二氧化硫 - - - 一氧化氮 - - - 二氧化氮 - - + const options = getOptions(source, period, currentTrend); - - - 日 - - - 周 - - - 月 - - - 年 - - -
- -
- ); + return ( +
+
+

烟气趋势图

+ {/* */} + {/*
+ 班次详情 +
    +
  • 总量
    • +
  • 白班
    • +
  • 夜班
    • +
+
*/} +
+ +
+ setSource(e.target.value)} + buttonStyle="solid" + className={`${cls.radioGroup} flex items-center justify-between`} + > + + 氧气 + + + 氮氧化物 + + + 二氧化硫 + + + 颗粒物 + + + + setPeriod(e.target.value)} + buttonStyle="solid" + className={cls.radioGroup} + > + + 日 + + + 周 + + + 月 + + + 年 + + +
+ +
+ ); }; export default SmokeTrendChart; + +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", + }, + }; +} diff --git a/src/components/Common/SmokeHandle/index.jsx b/src/components/Common/SmokeHandle/index.jsx index eb5bb45..94878c0 100644 --- a/src/components/Common/SmokeHandle/index.jsx +++ b/src/components/Common/SmokeHandle/index.jsx @@ -1,23 +1,34 @@ -import cls from './index.module.scss'; -import Container from '../../Container'; -import TechSplitline from '../TechSplitline'; -import SmokeTrendChart from './SmokeTrendChart'; +import cls from "./index.module.scss"; +import Container from "../../Container"; +import TechSplitline from "../TechSplitline"; +import SmokeTrendChart from "./SmokeTrendChart"; +import { useSelector } from "react-redux"; function SmokeHandle(props) { - return ( - -
-
-
氧 气 含 量 : 72%
-
一氧化氮排放浓度:59mg/m³
-
二氧化硫排放浓度:59mg/m³
-
二氧化氮排放浓度:59mg/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/store/features/smokeSlice.js b/src/store/features/smokeSlice.js new file mode 100644 index 0000000..e428a35 --- /dev/null +++ b/src/store/features/smokeSlice.js @@ -0,0 +1,87 @@ +// 风机信息 +import { createSlice } from "@reduxjs/toolkit"; + +export const initialState = { + info: { + SO2_float: 0, + NOX_float: 0, + O2_float: 0, + dust_float: 0, + }, + dayTrend: { + SO2_float: [ + { + time: "00:00", + value: 10, + }, + { time: "01:00", value: 20 }, + ], + NOX_float: [], + O2_float: [], + dust_float: [], + }, + weekTrend: { + SO2_float: [], + NOX_float: [ + { + time: "00:00", + value: 30, + }, + { time: "01:00", value: 10 }, + ], + O2_float: [], + dust_float: [], + }, + monthTrend: { + SO2_float: [], + NOX_float: [], + O2_float: [], + dust_float: [], + }, + yearTrend: { + SO2_float: [], + NOX_float: [], + O2_float: [], + dust_float: [ + { + time: "00:00", + value: 33, + }, + { time: "01:00", value: 13 }, + ], + }, +}; + +const smokeSlice = createSlice({ + name: "smoke", + initialState, + reducers: { + setInfo: (state, action) => { + state.info = { + ...state.info, + ...action.payload, + }; + }, + setTrend: (state, action) => { + state.dayTrend = { + ...state.dayTrend, + ...action.payload.dayTrend, + }; + state.weekTrend = { + ...state.weekTrend, + ...action.payload.weekTrend, + }; + state.monthTrend = { + ...state.monthTrend, + ...action.payload.monthTrend, + }; + state.yearTrend = { + ...state.yearTrend, + ...action.payload.yearTrend, + }; + }, + }, +}); + +export default smokeSlice.reducer; +export const { setInfo, setTrend } = smokeSlice.actions; diff --git a/src/store/index.js b/src/store/index.js index 4cfac66..f73891b 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -13,6 +13,7 @@ import israReducer from "./features/QualityIsraSlice"; import annealFanFrequenceReducer from "./features/annealFanFrequenceSlice"; import annealFanInfoReducer from "./features/annealFanInfoSlice"; import cuttingReducer from "./features/cuttingSlice"; +import smokeReducer from "./features/smokeSlice"; export const store = configureStore({ reducer: { @@ -43,6 +44,8 @@ export const store = configureStore({ // 能耗 isra: israReducer, // 切割 - cutting: cuttingReducer + cutting: cuttingReducer, + // 烟气 + smoke: smokeReducer }, }); diff --git a/src/utils/index.ts b/src/utils/index.ts index 06569d4..14ce1ea 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -3,6 +3,7 @@ import cuttingHandler from "./cutting"; import energeHandler from "./energe"; import IsHandler from "./IS"; import dcsHandler from "./dcs"; +import smokeHandler from "./smoke"; /** * new XClient('ws://192.168.1.12:8081/xc-screen/websocket/xc001', 'DCS') @@ -66,6 +67,14 @@ new XClient( cuttingHandler ); +// 烟气处理相关数据 +new XClient( + // "ws://10.70.27.122:8080/websocket/message?userId=CUTTING", + "ws://192.168.1.62:48082/websocket/message?userId=" + newUser, + "SMOKE_DATA", + smokeHandler +); + export function randomInt(min: number, max: number, includeMax = false) { let Fn = includeMax ? Math.ceil : Math.floor; let num = Fn(Math.random() * max); diff --git a/src/utils/smoke.ts b/src/utils/smoke.ts new file mode 100644 index 0000000..29efff7 --- /dev/null +++ b/src/utils/smoke.ts @@ -0,0 +1,21 @@ +import { store } from "../store"; + +export default function handler(msg: MessageEvent) { + let serializedData: { type: string; data: any } | null = null; + try { + serializedData = JSON.parse(msg.data); + } catch (error) { + console.log("[*] websocket: [unable to serialize] ---> ", msg); + } + switch (serializedData?.type) { + case "exhaustGas": { + store.dispatch("smoke/setInfo", serializedData.data.realtime); + store.dispatch("smoke/setTrend", serializedData.data); + break; + } + + default: { + console.log("websocket message: [unknown] ---> ", msg.data); + } + } +}