From d1ed3bf458ead068eca24306990d419c481a83fd Mon Sep 17 00:00:00 2001 From: juzi <819872918@qq.com> Date: Thu, 30 Apr 2026 11:13:15 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A05=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/wsconfig.json | 3 - src/index.tsx | 2 + src/page/HomePage/Center/BPress/index.tsx | 43 +++++-- src/page/HomePage/Center/BWater/index.tsx | 43 +++++-- src/page/HomePage/Center/CenterTop/index.tsx | 23 ++-- src/page/HomePage/Center/FlowTemp/index.tsx | 45 +++++--- .../HomePage/Center/HydrogenGas/index.tsx | 32 +++++- src/page/HomePage/Center/KPress/index.tsx | 43 +++++-- src/page/HomePage/Center/KTemp/index.tsx | 45 +++++--- src/page/HomePage/Center/Nitrogen/index.tsx | 32 +++++- src/page/HomePage/Center/Oxygen/index.tsx | 59 +++++++--- .../HomePage/Center/RecWaterPress/index.tsx | 41 +++++-- src/page/HomePage/Center/WPress/index.tsx | 45 +++++--- .../Component/LineChartRed/chart.config.ts | 38 +++---- .../Component/LineChartRedDob/chart.config.ts | 49 +++++--- .../Component/LineChartYellow/chart.config.ts | 38 +++---- src/page/HomePage/Left/LeftDown1/index.tsx | 23 ++-- src/page/HomePage/Left/LeftUp2/index.tsx | 23 ++-- src/page/HomePage/Right/RightDown1/index.tsx | 35 +++++- src/page/HomePage/Right/RightDown2/index.tsx | 83 +++++--------- src/page/HomePage/Right/RightUp1/index.tsx | 75 +++++++++--- src/page/HomePage/Right/RightUp2/index.tsx | 39 +++++-- src/store/HomePageSlice.ts | 28 ++++- src/store/UpdateData.tsx | 107 ++++++++++-------- src/store/UpdateDataFive.tsx | 81 +++++++++++++ 25 files changed, 749 insertions(+), 326 deletions(-) delete mode 100644 public/wsconfig.json create mode 100644 src/store/UpdateDataFive.tsx diff --git a/public/wsconfig.json b/public/wsconfig.json deleted file mode 100644 index af3dd5e..0000000 --- a/public/wsconfig.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "url": "192.168.82.45:8081" -} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index d2b3d99..3b347d4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -7,6 +7,7 @@ import reportWebVitals from "./reportWebVitals"; import { store } from "./store/store"; import { Provider } from "react-redux"; import UpdateData from "./store/UpdateData"; +import UpdateDataFive from "./store/UpdateDataFive"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement @@ -16,6 +17,7 @@ root.render( + ); reportWebVitals(); diff --git a/src/page/HomePage/Center/BPress/index.tsx b/src/page/HomePage/Center/BPress/index.tsx index ef5360e..1640214 100644 --- a/src/page/HomePage/Center/BPress/index.tsx +++ b/src/page/HomePage/Center/BPress/index.tsx @@ -1,30 +1,49 @@ import ReactECharts from "echarts-for-react"; import TitleBox from "../../Component/TitleBox"; import { useAppSelector } from "../../../../store/hooks"; -import { selectLineChart } from "../../../../store/HomePageSlice"; +import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice"; import getOptions from "../../Component/LineChartRed/chart.config"; import { generateTimeLabels } from "../../../../utils" function BPress() { - const data = useAppSelector(selectLineChart).鼓泡系统温度TE361 || []; + const data6 = useAppSelector(selectLineChart).鼓泡系统温度TE361 || []; + const data5 = useAppSelector(selectLineChartFive).鼓泡系统温度TE361 || []; let xData: any = []; - let line6: Number[] = []; + let seriesData: any = [ + { + name: "六线", + data: [], + }, + { + name: "五线", + data: [], + } + ]; let yName = "单位/℃"; - if (data.length !== 0) { - xData = generateTimeLabels(data.length) - line6 = data - }else{ - xData = []; - line6 = []; + if (data6.length !== 0) { + xData = generateTimeLabels(data6.length) + seriesData[0].data = data6 + } else { + seriesData[0].data = []; + if (data5.length !== 0) { + xData = generateTimeLabels(data5.length) + } else { + xData = []; + } } - const options= getOptions(xData, line6, yName); + if (data5.length !== 0) { + seriesData[1].data = data5 + } else { + seriesData[1].data = []; + } + const options= getOptions(xData, seriesData, yName); return (
六线 - {/* - 五线 */} + + 五线
{ options && ( diff --git a/src/page/HomePage/Center/BWater/index.tsx b/src/page/HomePage/Center/BWater/index.tsx index 42a5962..1aedb13 100644 --- a/src/page/HomePage/Center/BWater/index.tsx +++ b/src/page/HomePage/Center/BWater/index.tsx @@ -1,30 +1,49 @@ import ReactECharts from "echarts-for-react"; import TitleBox from "../../Component/TitleBox"; import { useAppSelector } from "../../../../store/hooks"; -import { selectLineChart } from "../../../../store/HomePageSlice"; +import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice"; import getOptions from "../../Component/LineChartRed/chart.config"; import { generateTimeLabels } from "../../../../utils" function BWater() { - const data = useAppSelector(selectLineChart).天然气总管流量 || []; + const data6 = useAppSelector(selectLineChart).天然气总管流量 || []; + const data5 = useAppSelector(selectLineChartFive).天然气总管流量 || []; let xData: any = []; - let line6: Number[] = []; + let seriesData: any = [ + { + name: "六线", + data: [], + }, + { + name: "五线", + data: [], + } + ]; let yName = "单位/m³"; - if (data.length !== 0) { - xData = generateTimeLabels(data.length) - line6 = data - }else{ - xData = []; - line6 = []; + if (data6.length !== 0) { + xData = generateTimeLabels(data6.length) + seriesData[0].data = data6 + } else { + seriesData[0].data = []; + if (data5.length !== 0) { + xData = generateTimeLabels(data5.length) + } else { + xData = []; + } } - const options= getOptions(xData, line6, yName); + if (data5.length !== 0) { + seriesData[1].data = data5 + } else { + seriesData[1].data = []; + } + const options= getOptions(xData, seriesData, yName); return (
六线 - {/* - 五线 */} + + 五线
{ options && ( diff --git a/src/page/HomePage/Center/CenterTop/index.tsx b/src/page/HomePage/Center/CenterTop/index.tsx index 9841757..a581ea8 100644 --- a/src/page/HomePage/Center/CenterTop/index.tsx +++ b/src/page/HomePage/Center/CenterTop/index.tsx @@ -6,12 +6,15 @@ import eqicon2 from './../../../../assets/image/eq_icon2.png' import eqicon3 from './../../../../assets/image/eq_icon3.png' import eqicon4 from './../../../../assets/image/eq_icon4.png' import { useAppSelector } from "../../../../store/hooks"; -import { selectOther } from "../../../../store/HomePageSlice"; +import { selectOther,selectOtherFive } from "../../../../store/HomePageSlice"; function CenterTop() { - const fireData = useAppSelector(selectOther).火向 || '-'; - const timeData = useAppSelector(selectOther).换火时间 || '-'; - const reTime = useAppSelector(selectOther).剩余换火时间 || '-'; + const fireData6 = useAppSelector(selectOther).火向 || '-'; + const fireData5 = useAppSelector(selectOtherFive).火向 || '-'; + const timeData6 = useAppSelector(selectOther).换火时间 || '-'; + const timeData5 = useAppSelector(selectOtherFive).换火时间 || '-'; + const reTime6 = useAppSelector(selectOther).剩余换火时间 || '-'; + const reTime5 = useAppSelector(selectOtherFive).剩余换火时间 || '-'; return (
@@ -19,12 +22,12 @@ function CenterTop() {

六线火向

-

{fireData}

+

{fireData6}

五线火向

-

-

+

{fireData5}

@@ -33,12 +36,12 @@ function CenterTop() {

六线换火时间

-

{timeData}

+

{timeData6}

五线换火时间

-

-

+

{timeData5}

@@ -47,12 +50,12 @@ function CenterTop() {

六线.剩余时间

-

{reTime}

+

{reTime6}h

五线.剩余时间

-

-

+

{reTime5}h

diff --git a/src/page/HomePage/Center/FlowTemp/index.tsx b/src/page/HomePage/Center/FlowTemp/index.tsx index e5b8d64..7312769 100644 --- a/src/page/HomePage/Center/FlowTemp/index.tsx +++ b/src/page/HomePage/Center/FlowTemp/index.tsx @@ -1,30 +1,49 @@ import ReactECharts from "echarts-for-react"; import TitleBox from "../../Component/TitleBox"; import { useAppSelector } from "../../../../store/hooks"; -import { selectLineChart } from "../../../../store/HomePageSlice"; +import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice"; import getOptions from "../../Component/LineChartYellow/chart.config"; import { generateTimeLabels } from "../../../../utils" function FlowTemp() { - const data = useAppSelector(selectLineChart).流道温度 || []; + const data6 = useAppSelector(selectLineChart).流道温度 || []; + const data5 = useAppSelector(selectLineChartFive).流道温度 || []; let xData: any = []; - let line6: Number[] = []; - let yName = "单位/℃"; - if (data.length !== 0) { - xData = generateTimeLabels(data.length) - line6 = data - }else{ - xData = []; - line6 = []; + let seriesData: any = [ + { + name: "六线", + data: [], + }, + { + name: "五线", + data: [], } - const options= getOptions(xData, line6, yName); + ]; + let yName = "单位/℃"; + if (data6.length !== 0) { + xData = generateTimeLabels(data6.length) + seriesData[0].data = data6 + } else { + seriesData[0].data = []; + if (data5.length !== 0) { + xData = generateTimeLabels(data5.length) + } else { + xData = []; + } + } + if (data5.length !== 0) { + seriesData[1].data = data5 + } else { + seriesData[1].data = []; + } + const options= getOptions(xData, seriesData, yName); return (
六线 - {/* - 五线 */} + + 五线
{ options && ( diff --git a/src/page/HomePage/Center/HydrogenGas/index.tsx b/src/page/HomePage/Center/HydrogenGas/index.tsx index 02041e3..e426172 100644 --- a/src/page/HomePage/Center/HydrogenGas/index.tsx +++ b/src/page/HomePage/Center/HydrogenGas/index.tsx @@ -1,12 +1,14 @@ import ReactECharts from "echarts-for-react"; import TitleBox from "../../Component/TitleBox"; import { useAppSelector } from "../../../../store/hooks"; -import { selectLineChart } from "../../../../store/HomePageSlice"; +import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice"; import getOptions from "../../Component/LineChartRedDob/chart.config"; import { generateTimeLabels } from "../../../../utils"; function HydrogenGas() { const data61 = useAppSelector(selectLineChart)['1#氢气流量'] || []; const data62 = useAppSelector(selectLineChart)['2#氢气流量'] || []; + const data51 = useAppSelector(selectLineChartFive)['1#氢气流量'] || []; + const data52 = useAppSelector(selectLineChartFive)['2#氢气流量'] || []; let xData: any = []; let yName = "单位/m³"; let seriesData: any = [ @@ -17,6 +19,14 @@ function HydrogenGas() { { name: "六线2", data: [], + }, + { + name: "五线1", + data: [], + }, + { + name: "五线2", + data: [], } ]; if (data61.length !== 0) { @@ -26,7 +36,11 @@ function HydrogenGas() { seriesData[0].data = []; if (data62.length !== 0) { xData = generateTimeLabels(data62.length) - }else{ + } else if (data51.length !== 0) { + xData = generateTimeLabels(data51.length) + } else if (data52.length !== 0) { + xData = generateTimeLabels(data52.length) + } else { xData = []; } } @@ -35,6 +49,16 @@ function HydrogenGas() { }else{ seriesData[1].data = []; } + if (data51.length !== 0) { + seriesData[2].data = data51 + } else { + seriesData[2].data = []; + } + if (data52.length !== 0) { + seriesData[3].data = data52 + } else { + seriesData[3].data = []; + } const options = getOptions(xData, seriesData, yName); return (
@@ -44,10 +68,10 @@ function HydrogenGas() { 六线1 六线2 - {/* + 五线1 - 五线2 */} + 五线2
{ options && ( diff --git a/src/page/HomePage/Center/KPress/index.tsx b/src/page/HomePage/Center/KPress/index.tsx index 0eb5c9b..be7313a 100644 --- a/src/page/HomePage/Center/KPress/index.tsx +++ b/src/page/HomePage/Center/KPress/index.tsx @@ -1,30 +1,49 @@ import ReactECharts from "echarts-for-react"; import TitleBox from "../../Component/TitleBox"; import { useAppSelector } from "../../../../store/hooks"; -import { selectLineChart } from "../../../../store/HomePageSlice"; +import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice"; import getOptions from "../../Component/LineChartYellow/chart.config"; import { generateTimeLabels } from "../../../../utils" function KPress() { - const data = useAppSelector(selectLineChart).熔窑压力 || []; + const data6 = useAppSelector(selectLineChart).熔窑压力 || []; + const data5 = useAppSelector(selectLineChartFive).熔窑压力 || []; let xData: any = []; - let line6: Number[] = []; + let seriesData: any = [ + { + name: "六线", + data: [], + }, + { + name: "五线", + data: [], + } + ]; let yName = "单位/Kpa"; - if (data.length !== 0) { - xData = generateTimeLabels(data.length) - line6 = data - }else{ - xData = []; - line6 = []; + if (data6.length !== 0) { + xData = generateTimeLabels(data6.length) + seriesData[0].data = data6 + } else { + seriesData[0].data = []; + if (data5.length !== 0) { + xData = generateTimeLabels(data5.length) + } else { + xData = []; + } } - const options= getOptions(xData, line6, yName); + if (data5.length !== 0) { + seriesData[1].data = data5 + } else { + seriesData[1].data = []; + } + const options= getOptions(xData, seriesData, yName); return (
六线 - {/* - 五线 */} + + 五线
{ options && ( diff --git a/src/page/HomePage/Center/KTemp/index.tsx b/src/page/HomePage/Center/KTemp/index.tsx index c2a1def..5c155aa 100644 --- a/src/page/HomePage/Center/KTemp/index.tsx +++ b/src/page/HomePage/Center/KTemp/index.tsx @@ -1,30 +1,49 @@ import ReactECharts from "echarts-for-react"; import TitleBox from "../../Component/TitleBox"; import { useAppSelector } from "../../../../store/hooks"; -import { selectLineChart } from "../../../../store/HomePageSlice"; +import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice"; import getOptions from "../../Component/LineChartRed/chart.config"; import { generateTimeLabels } from "../../../../utils" function KTemp() { - const data = useAppSelector(selectLineChart).熔窑温度 || []; + const data6 = useAppSelector(selectLineChart).熔窑温度 || []; + const data5 = useAppSelector(selectLineChartFive).熔窑温度 || []; let xData: any = []; - let line6: Number[] = []; - let yName = "单位/℃"; - if (data.length !== 0) { - xData = generateTimeLabels(data.length) - line6 = data - }else{ - xData = []; - line6 = []; + let seriesData: any = [ + { + name: "六线", + data: [], + }, + { + name: "五线", + data: [], } - const options= getOptions(xData, line6, yName); + ]; + let yName = "单位/℃"; + if (data6.length !== 0) { + xData = generateTimeLabels(data6.length) + seriesData[0].data = data6 + } else { + seriesData[0].data = []; + if (data5.length !== 0) { + xData = generateTimeLabels(data5.length) + } else { + xData = []; + } + } + if (data5.length !== 0) { + seriesData[1].data = data5 + } else { + seriesData[1].data = []; + } + const options= getOptions(xData, seriesData, yName); return (
六线 - {/* - 五线 */} + + 五线
{ options && ( diff --git a/src/page/HomePage/Center/Nitrogen/index.tsx b/src/page/HomePage/Center/Nitrogen/index.tsx index 5951b8d..d0b63ba 100644 --- a/src/page/HomePage/Center/Nitrogen/index.tsx +++ b/src/page/HomePage/Center/Nitrogen/index.tsx @@ -1,12 +1,14 @@ import ReactECharts from "echarts-for-react"; import TitleBox from "../../Component/TitleBox"; import { useAppSelector } from "../../../../store/hooks"; -import { selectLineChart } from "../../../../store/HomePageSlice"; +import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice"; import getOptions from "../../Component/LineChartRedDob/chart.config"; import { generateTimeLabels } from "../../../../utils"; function Nitrogen() { const data61 = useAppSelector(selectLineChart)['1#氮气流量'] || []; const data62 = useAppSelector(selectLineChart)['2#氮气流量'] || []; + const data51 = useAppSelector(selectLineChartFive)['1#氮气流量'] || []; + const data52 = useAppSelector(selectLineChartFive)['2#氮气流量'] || []; let xData: any = []; let yName = "单位/m³"; let seriesData: any = [ @@ -17,6 +19,14 @@ function Nitrogen() { { name: "六线2", data: [], + }, + { + name: "五线1", + data: [], + }, + { + name: "五线2", + data: [], } ]; if (data61.length !== 0) { @@ -26,7 +36,11 @@ function Nitrogen() { seriesData[0].data = []; if (data62.length !== 0) { xData = generateTimeLabels(data62.length) - }else{ + } else if (data51.length !== 0) { + xData = generateTimeLabels(data51.length) + } else if (data52.length !== 0) { + xData = generateTimeLabels(data52.length) + } else { xData = []; } } @@ -35,6 +49,16 @@ function Nitrogen() { }else{ seriesData[1].data = []; } + if (data51.length !== 0) { + seriesData[2].data = data51 + } else { + seriesData[2].data = []; + } + if (data52.length !== 0) { + seriesData[3].data = data52 + } else { + seriesData[3].data = []; + } const options = getOptions(xData, seriesData, yName); return (
@@ -44,10 +68,10 @@ function Nitrogen() { 六线1 六线2 - {/* + 五线1 - 五线2 */} + 五线2
{ options && ( diff --git a/src/page/HomePage/Center/Oxygen/index.tsx b/src/page/HomePage/Center/Oxygen/index.tsx index 17978f5..bf979fb 100644 --- a/src/page/HomePage/Center/Oxygen/index.tsx +++ b/src/page/HomePage/Center/Oxygen/index.tsx @@ -1,12 +1,14 @@ import ReactECharts from "echarts-for-react"; import TitleBox from "../../Component/TitleBox"; import { useAppSelector } from "../../../../store/hooks"; -import { selectLineChart } from "../../../../store/HomePageSlice"; +import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice"; import getOptions from "../../Component/LineChartRedDob/chart.config"; import { generateTimeLabels } from "../../../../utils"; function Oxygen() { const data61 = useAppSelector(selectLineChart)['0#氧枪左氧气流量'] || []; const data62 = useAppSelector(selectLineChart)['0#氧枪右氧气流量'] || []; + const data51 = useAppSelector(selectLineChartFive)['0#氧枪左氧气流量'] || []; + const data52 = useAppSelector(selectLineChartFive)['0#氧枪右氧气流量'] || []; let xData: any = []; let yName = "单位/m³"; let seriesData: any = [ @@ -17,24 +19,47 @@ function Oxygen() { { name: "六线右氧", data: [], - } + }, + { + name: "五线左氧", + data: [], + }, + { + name: "五线右氧", + data: [], + }, + ]; if (data61.length !== 0) { - xData = generateTimeLabels(data61.length) - seriesData[0].data = data61 - }else{ - seriesData[0].data = []; - if (data62.length !== 0) { - xData = generateTimeLabels(data62.length) - }else{ - xData = []; - } - } + xData = generateTimeLabels(data61.length) + seriesData[0].data = data61 + }else{ + seriesData[0].data = []; if (data62.length !== 0) { - seriesData[1].data = data62 - }else{ - seriesData[1].data = []; + xData = generateTimeLabels(data62.length) + } else if (data51.length !== 0) { + xData = generateTimeLabels(data51.length) + } else if (data52.length !== 0) { + xData = generateTimeLabels(data52.length) + } else { + xData = []; } + } + if (data62.length !== 0) { + seriesData[1].data = data62 + }else{ + seriesData[1].data = []; + } + if (data51.length !== 0) { + seriesData[2].data = data51 + } else { + seriesData[2].data = []; + } + if (data52.length !== 0) { + seriesData[3].data = data52 + } else { + seriesData[3].data = []; + } const options = getOptions(xData, seriesData, yName); return (
@@ -44,10 +69,10 @@ function Oxygen() { 六线左氧 六线右氧 - {/* + 五线1 - 五线2 */} + 五线2
{ options && ( diff --git a/src/page/HomePage/Center/RecWaterPress/index.tsx b/src/page/HomePage/Center/RecWaterPress/index.tsx index bc405e5..31341ca 100644 --- a/src/page/HomePage/Center/RecWaterPress/index.tsx +++ b/src/page/HomePage/Center/RecWaterPress/index.tsx @@ -1,30 +1,49 @@ import ReactECharts from "echarts-for-react"; import TitleBox from "../../Component/TitleBox"; import { useAppSelector } from "../../../../store/hooks"; -import { selectLineChart } from "../../../../store/HomePageSlice"; +import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice"; import getOptions from "../../Component/LineChartYellow/chart.config"; import { generateTimeLabels } from "../../../../utils" function RecWaterPress() { - const data = useAppSelector(selectLineChart).水循环温度 || []; + const data6 = useAppSelector(selectLineChart).水循环温度 || []; + const data5 = useAppSelector(selectLineChartFive).水循环温度 || []; let xData: any = []; - let line6: Number[] = []; + let seriesData: any = [ + { + name: "六线", + data: [], + }, + { + name: "五线", + data: [], + } + ]; let yName = "单位/℃"; - if (data.length !== 0) { - xData = generateTimeLabels(data.length) - line6 = data - }else{ + if (data6.length !== 0) { + xData = generateTimeLabels(data6.length) + seriesData[0].data = data6 + } else { + seriesData[0].data = []; + if (data5.length !== 0) { + xData = generateTimeLabels(data5.length) + } else { xData = []; - line6 = []; } - const options= getOptions(xData, line6, yName); + } + if (data5.length !== 0) { + seriesData[1].data = data5 + } else { + seriesData[1].data = []; + } + const options= getOptions(xData, seriesData, yName); return (
六线 - {/* - 五线 */} + + 五线
{ options && ( diff --git a/src/page/HomePage/Center/WPress/index.tsx b/src/page/HomePage/Center/WPress/index.tsx index 8b7355e..8c42ed4 100644 --- a/src/page/HomePage/Center/WPress/index.tsx +++ b/src/page/HomePage/Center/WPress/index.tsx @@ -1,30 +1,49 @@ import ReactECharts from "echarts-for-react"; import TitleBox from "../../Component/TitleBox"; import { useAppSelector } from "../../../../store/hooks"; -import { selectLineChart } from "../../../../store/HomePageSlice"; +import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice"; import getOptions from "../../Component/LineChartYellow/chart.config"; import { generateTimeLabels } from "../../../../utils" function WPress() { - const data = useAppSelector(selectLineChart).总管冷却水压力 || []; + const data6 = useAppSelector(selectLineChart).总管冷却水压力 || []; + const data5 = useAppSelector(selectLineChartFive).总管冷却水压力 || []; let xData: any = []; - let line6: Number[] = []; - let yName = "单位/Kpa"; - if (data.length !== 0) { - xData = generateTimeLabels(data.length) - line6 = data - }else{ - xData = []; - line6 = []; + let seriesData: any = [ + { + name: "六线", + data: [], + }, + { + name: "五线", + data: [], } - const options= getOptions(xData, line6, yName); + ]; + let yName = "单位/Kpa"; + if (data6.length !== 0) { + xData = generateTimeLabels(data6.length) + seriesData[0].data = data6 + } else { + seriesData[0].data = []; + if (data5.length !== 0) { + xData = generateTimeLabels(data5.length) + } else { + xData = []; + } + } + if (data5.length !== 0) { + seriesData[1].data = data5 + } else { + seriesData[1].data = []; + } + const options= getOptions(xData, seriesData, yName); return (
六线 - {/* - 五线 */} + + 五线
{ options && ( diff --git a/src/page/HomePage/Component/LineChartRed/chart.config.ts b/src/page/HomePage/Component/LineChartRed/chart.config.ts index 70ac52e..97ef2a9 100644 --- a/src/page/HomePage/Component/LineChartRed/chart.config.ts +++ b/src/page/HomePage/Component/LineChartRed/chart.config.ts @@ -1,6 +1,6 @@ import * as echarts from "echarts"; -export default function getOptions(xData: any, line6: any, yName: string) { - if (xData.length === 0 || line6.length === 0) +export default function getOptions(xData: any, seriesData: any, yName: string) { + if (xData.length === 0 || seriesData.length === 0) return null; return { grid: { top: 30, right: 0, bottom: 0, left: 10,containLabel: true}, @@ -61,7 +61,7 @@ export default function getOptions(xData: any, line6: any, yName: string) { series: [ { name:'六线', - data: line6, + data: seriesData[0].data, color: "rgba(24, 199, 243, 1)", type: "line", symbol: "circle", @@ -75,22 +75,22 @@ export default function getOptions(xData: any, line6: any, yName: string) { ]), }, }, - // { - // name:'五线', - // data: line5, - // color: "rgba(243, 24, 104, 1)", - // type: "line", - // symbol: "circle", - // symbolSize: 6, - // areaStyle: { - // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - // { offset: 0, color: "rgba(243, 24, 104, 0.6)" }, - // { offset: 0.4, color: "rgba(243, 24, 104, 0.1)" }, - // { offset: 0.8, color: "rgba(243, 24, 104, 0)" }, - // { offset: 1, color: "rgba(243, 24, 104, 0)" }, - // ]), - // }, - // }, + { + name:'五线', + data: seriesData[1].data, + color: "rgba(243, 24, 104, 1)", + type: "line", + symbol: "circle", + symbolSize: 6, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: "rgba(243, 24, 104, 0.6)" }, + { offset: 0.4, color: "rgba(243, 24, 104, 0.1)" }, + { offset: 0.8, color: "rgba(243, 24, 104, 0)" }, + { offset: 1, color: "rgba(243, 24, 104, 0)" }, + ]), + }, + }, ], }; } diff --git a/src/page/HomePage/Component/LineChartRedDob/chart.config.ts b/src/page/HomePage/Component/LineChartRedDob/chart.config.ts index 134190a..aa9e046 100644 --- a/src/page/HomePage/Component/LineChartRedDob/chart.config.ts +++ b/src/page/HomePage/Component/LineChartRedDob/chart.config.ts @@ -91,22 +91,39 @@ export default function getOptions(xData: any, seriesData: any, yName: string) { ]), }, }, - // { - // name:'五线', - // data: line5, - // color: "rgba(243, 24, 104, 1)", - // type: "line", - // symbol: "circle", - // symbolSize: 6, - // areaStyle: { - // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - // { offset: 0, color: "rgba(243, 24, 104, 0.6)" }, - // { offset: 0.4, color: "rgba(243, 24, 104, 0.1)" }, - // { offset: 0.8, color: "rgba(243, 24, 104, 0)" }, - // { offset: 1, color: "rgba(243, 24, 104, 0)" }, - // ]), - // }, - // }, + { + name:seriesData[2].name, + data: seriesData[2].data, + color: "rgba(231, 24, 243, 1)", + type: "line", + symbol: "circle", + symbolSize: 6, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: "rgba(231, 24, 243, 0.6)" }, + { offset: 0.4, color: "rgba(231, 24, 243, 0.1)" }, + { offset: 0.8, color: "rgba(231, 24, 243, 0)" }, + { offset: 1, color: "rgba(231, 24, 243, 0)" }, + ]), + }, + }, + { + name:seriesData[3].name, + data: seriesData[3].data, + color: "rgba(243, 24, 104, 1)", + type: "line", + symbol: "circle", + symbolSize: 6, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: "rgba(243, 24, 104, 0.6)" }, + { offset: 0.4, color: "rgba(243, 24, 104, 0.1)" }, + { offset: 0.8, color: "rgba(243, 24, 104, 0)" }, + { offset: 1, color: "rgba(243, 24, 104, 0)" }, + ]), + }, + }, + ], }; } diff --git a/src/page/HomePage/Component/LineChartYellow/chart.config.ts b/src/page/HomePage/Component/LineChartYellow/chart.config.ts index ffad429..fcce050 100644 --- a/src/page/HomePage/Component/LineChartYellow/chart.config.ts +++ b/src/page/HomePage/Component/LineChartYellow/chart.config.ts @@ -1,6 +1,6 @@ import * as echarts from "echarts"; -export default function getOptions(xData: any, line6: any, yName: string) { - if (xData.length === 0 || line6.length === 0) +export default function getOptions(xData: any, seriesData: any, yName: string) { + if (xData.length === 0 || seriesData.length === 0) return null; return { grid: { top: 30, right: 0, bottom: 0, left: 10,containLabel: true}, @@ -61,7 +61,7 @@ export default function getOptions(xData: any, line6: any, yName: string) { series: [ { name:'六线', - data: line6, + data: seriesData[0].data, color: "rgba(255, 209, 96, 1)", type: "line", symbol: "circle", @@ -75,22 +75,22 @@ export default function getOptions(xData: any, line6: any, yName: string) { ]), }, }, - // { - // name:'五线', - // data: line5, - // color: "rgba(39, 96, 255, 1)", - // type: "line", - // symbol: "circle", - // symbolSize: 6, - // areaStyle: { - // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - // { offset: 0, color: "rgba(39, 96, 255, 0.6)" }, - // { offset: 0.4, color: "rgba(39, 96, 255, 0.1)" }, - // { offset: 0.8, color: "rgba(39, 96, 255, 0)" }, - // { offset: 1, color: "rgba(39, 96, 255, 0)" }, - // ]), - // }, - // }, + { + name:'五线', + data: seriesData[1].data, + color: "rgba(39, 96, 255, 1)", + type: "line", + symbol: "circle", + symbolSize: 6, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: "rgba(39, 96, 255, 0.6)" }, + { offset: 0.4, color: "rgba(39, 96, 255, 0.1)" }, + { offset: 0.8, color: "rgba(39, 96, 255, 0)" }, + { offset: 1, color: "rgba(39, 96, 255, 0)" }, + ]), + }, + }, ], }; } diff --git a/src/page/HomePage/Left/LeftDown1/index.tsx b/src/page/HomePage/Left/LeftDown1/index.tsx index 8f08443..8828f14 100644 --- a/src/page/HomePage/Left/LeftDown1/index.tsx +++ b/src/page/HomePage/Left/LeftDown1/index.tsx @@ -4,17 +4,22 @@ import img1 from "../../../../assets/image/waterTempUp.png" import { useAppSelector } from "../../../../store/hooks"; import { selectOther } from "../../../../store/HomePageSlice"; function LeftDown1() { - const outputData = useAppSelector(selectOther).出口水温 || ''; + const outputData = useAppSelector(selectOther).出口水温 ?? ""; // 数字显示组件 - const DigitalDisplay = ({ value }:any) => { + const DigitalDisplay = ({ value }: { value: string | number }) => { + const text = String(value); return ( - value.split('').map((char:any, index:any) => ( - char !== '.'? ( - - {char} - - ):() - )) + <> + {text.split("").map((char, index) => ( + char !== "." ? ( + + {char} + + ) : ( + + ) + ))} + ); }; return ( diff --git a/src/page/HomePage/Left/LeftUp2/index.tsx b/src/page/HomePage/Left/LeftUp2/index.tsx index 5d6f955..cb8507b 100644 --- a/src/page/HomePage/Left/LeftUp2/index.tsx +++ b/src/page/HomePage/Left/LeftUp2/index.tsx @@ -3,17 +3,22 @@ import img1 from "../../../../assets/image/press_img.png" import { useAppSelector } from "../../../../store/hooks"; import { selectOther } from "../../../../store/HomePageSlice"; function LeftUp2() { - const data = useAppSelector(selectOther).窑炉压力 || ''; + const data = useAppSelector(selectOther).窑炉压力 ?? ""; // 数字显示组件 - const DigitalDisplay = ({ value }:any) => { + const DigitalDisplay = ({ value }: { value: string | number }) => { + const text = String(value); return ( - value.split('').map((char:any, index:any) => ( - char !== '.'? ( - - {char} - - ):() - )) + <> + {text.split("").map((char, index) => ( + char !== "." ? ( + + {char} + + ) : ( + + ) + ))} + ); }; return ( diff --git a/src/page/HomePage/Right/RightDown1/index.tsx b/src/page/HomePage/Right/RightDown1/index.tsx index 33a064b..bdf11a5 100644 --- a/src/page/HomePage/Right/RightDown1/index.tsx +++ b/src/page/HomePage/Right/RightDown1/index.tsx @@ -1,17 +1,40 @@ import TitleBox from "../../Component/TitleBox"; import img1 from "../../../../assets/image/waterTempUp.png" // import img2 from "../../../../assets/image/waterTempDown.png" -// import { useAppSelector } from "../../../../store/hooks"; -// import { selectOrderCompletionWO } from "../../../../store/HomePageSlice"; +import { useAppSelector } from "../../../../store/hooks"; +import { selectOtherFive } from "../../../../store/HomePageSlice"; function RightDown1() { - // const data = useAppSelector(selectOrderCompletionWO); + const outputData = useAppSelector(selectOtherFive).出口水温 ?? ""; + // 数字显示组件 + const DigitalDisplay = ({ value }: { value: string | number }) => { + const text = String(value); + return ( + <> + {text.split("").map((char, index) => ( + char !== "." ? ( + + {char} + + ) : ( + + ) + ))} + + ); + }; return (
- - - - - - + { + outputData === ''? ( + <> + - + - + - + + ): + }
出口实时水温
diff --git a/src/page/HomePage/Right/RightDown2/index.tsx b/src/page/HomePage/Right/RightDown2/index.tsx index 3327d05..aea3d3e 100644 --- a/src/page/HomePage/Right/RightDown2/index.tsx +++ b/src/page/HomePage/Right/RightDown2/index.tsx @@ -1,74 +1,50 @@ import TitleBox from "../../Component/TitleBox"; import ScrollBoard from "../../../Component/ScrollBoard"; -// import { useAppSelector } from "../../../../store/hooks"; -// import { selectOrderCompletionWO } from "../../../../store/HomePageSlice"; +import { useAppSelector } from "../../../../store/hooks"; +import { selectFanFive } from "../../../../store/HomePageSlice"; function RightDown2() { - // const data = useAppSelector(selectOrderCompletionWO); - // console.log("222222封装工单完成情况+", data); + const data = useAppSelector(selectFanFive).风机运行 || []; const config = { - header: ["序号", "设备名称", "运行频率", "设备状态"], + header: ["序号", "设备名称", "运行状态", "设备状态"], headerHeight: 30, rowNum: 5, headerBGC: "rgba(4, 74, 132, 0.2)", oddRowBGC: "rgba(4, 74, 132, 0.2)", evenRowBGC: "rgba(11, 84, 153, 0.36)", - columnWidth: [110, 180, 120, 120], + columnWidth: [90, 220, 110, 110], align: ["center", "left", "left", "center"], - data: [ - ['1','产线1的名称','未运行','正常'], - ['2','产线1的名称','未运行','故障'], - ['3','产线1的名称','未运行','正常'], - ['4','产线1的名称','未运行','正常'], - ['5','产线1的名称','未运行','故障'] - ], + data:[] + // data: [ + // ['1','产线1的名称','未运行','正常'], + // ['2','产线1的名称','未运行','故障'], + // ['3','产线1的名称','未运行','正常'], + // ['4','产线1的名称','未运行','正常'], + // ['5','产线1的名称','未运行','故障'] + // ], }; - // let arr: any = []; - // data && - // data.map((item: any, index: any) => { - // let arrInner = []; - // arrInner.push( - // item.workOrderNo ? item.workOrderNo : "-", - // item.planQuantity - // ? item.planQuantity - // : item.planQuantity === 0 - // ? item.planQuantity - // : "-", - // item.actualPutIn - // ? item.actualPutIn - // : item.actualPutIn === 0 - // ? item.actualPutIn - // : "-", - // item.actualQuantity - // ? item.actualQuantity - // : item.actualQuantity === 0 - // ? item.actualQuantity - // : "-", - // item.completeness - // ? item.completeness + "%" - // : item.completeness === 0 - // ? item.completeness + "%" - // : "-" - // ); - // arr.push(arrInner); - // }); - // config.data = arr; + let arr: any = []; + data&& + data.map((item: any, index: any) => { + let arrInner = []; + arrInner.push( + index + 1, + item[0], + index%2 === 0 ? `${item[1]}`:`${item[1]}`, + item[2]==='正常'?`${item[2]}`:`${item[2]}` + ); + arr.push(arrInner); + }); + config.data = arr; return (
- {/*
+ {data.length !== 0 && (
-
*/} - {/* {data.length !== 0 && ( -
- -
- )} */} +
)} + {data.length === 0 && (

暂无数据

+ )}
); } diff --git a/src/page/HomePage/Right/RightUp1/index.tsx b/src/page/HomePage/Right/RightUp1/index.tsx index f8f6ddd..efac3b8 100644 --- a/src/page/HomePage/Right/RightUp1/index.tsx +++ b/src/page/HomePage/Right/RightUp1/index.tsx @@ -1,21 +1,70 @@ + +import { useState, useEffect } from 'react'; import TitleBox from "../../Component/TitleBox"; -// import { useAppSelector } from "../../../../store/hooks"; -// import { selectEqRateAVA } from "../../../../store/HomePageSlice"; +import moment from 'moment'; function RightUp1() { - // const data = useAppSelector(selectEqRateAVA); + // 时间计算工具函数 + const calculateRuntime = (startStr:any, endStr:any) => { + const parseDate = (str:any) => { + const [datePart, timePart] = str.split(' '); + const [year, month, day] = datePart.split('-').map(Number); + const [hours, minutes, seconds] = timePart.split(':').map(Number); + return new Date(year, month - 1, day, hours, minutes, seconds); + }; + const start = parseDate(startStr); + const end = parseDate(endStr); + const diff = end.getTime() - start.getTime(); + if (diff <= 0) return { days: 0, hours: 0 }; + const days = Math.floor(diff / (1000 * 60 * 60 * 24)); + const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + return { + days, + hours + }; + }; + // 数字显示组件 + const DigitalDisplay = ({ value }:any) => { + return ( +
+ {value.split('').map((char:any, index:any) => ( + + {char} + + ))} +
+ ); + }; + // 主显示组件 + const RuntimeDisplay = ({ start, end }:any) => { + const [runtime, setRuntime] = useState({ days: 0, hours: 0 }); + useEffect(() => { + const result = calculateRuntime(start, end); + setRuntime(result); + }, [start, end]); + // 格式化数字为字符串 + const formatDays = runtime.days.toString().padStart(4, '0'); + const formatHours = runtime.hours.toString().padStart(2, '0'); + return ( +
+ + + + +
+ ); + }; + const startDate = '2025-4-18 11:18:00' + const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD HH:mm:ss')) + useEffect(() => { + const timer = setInterval(() => { + setEndDate(moment().format(moment().format('YYYY-MM-DD HH:mm:ss'))); + }, 1000); + return () => clearInterval(timer); + }, []); return (
-
- - - - - - - - - - - - - - -
+
窑炉运行时间.五线
); diff --git a/src/page/HomePage/Right/RightUp2/index.tsx b/src/page/HomePage/Right/RightUp2/index.tsx index 9c36627..5cea947 100644 --- a/src/page/HomePage/Right/RightUp2/index.tsx +++ b/src/page/HomePage/Right/RightUp2/index.tsx @@ -1,16 +1,39 @@ import TitleBox from "../../Component/TitleBox"; import img1 from "../../../../assets/image/press_img.png" -// import { useAppSelector } from "../../../../store/hooks"; -// import { selectEqRateAVA } from "../../../../store/HomePageSlice"; -function RightUp2() { - // const data = useAppSelector(selectEqRateAVA); +import { useAppSelector } from "../../../../store/hooks"; +import { selectOtherFive } from "../../../../store/HomePageSlice"; +function LeftUp2() { + const data = useAppSelector(selectOtherFive).窑炉压力 ?? ""; + // 数字显示组件 + const DigitalDisplay = ({ value }: { value: string | number }) => { + const text = String(value); + return ( + <> + {text.split("").map((char, index) => ( + char !== "." ? ( + + {char} + + ) : ( + + ) + ))} + + ); + }; return (
- - - - - - + { + data === ''? ( + <> + - + - + - + + ): + } Kpa
窑炉压力值
@@ -18,4 +41,4 @@ function RightUp2() {
); } -export default RightUp2; +export default LeftUp2; diff --git a/src/store/HomePageSlice.ts b/src/store/HomePageSlice.ts index 19e73e6..b8449bf 100644 --- a/src/store/HomePageSlice.ts +++ b/src/store/HomePageSlice.ts @@ -2,13 +2,19 @@ import { createSlice } from "@reduxjs/toolkit"; import type { RootState } from "./store"; export interface HomePageSliceInterface { lineChart: any; + lineChartFive: any; fan:any; + fanFive:any; otherMsg:any; + otherMsgFive:any; } const initialState: HomePageSliceInterface = { lineChart: {}, + lineChartFive: {}, fan:[], - otherMsg:{} + fanFive:[], + otherMsg:{}, + otherMsgFive:{} }; export const HomePageSlice = createSlice({ name: "HomePageSlice", @@ -17,25 +23,43 @@ export const HomePageSlice = createSlice({ UpdateLineChart: (state, action) => { state.lineChart = action.payload; }, + UpdateLineChartFive: (state, action) => { + state.lineChartFive = action.payload; + }, UpdateFan: (state, action) => { state.fan = action.payload; }, + UpdateFanFive: (state, action) => { + state.fanFive = action.payload; + }, UpdateOther: (state, action) => { state.otherMsg = action.payload; + }, + UpdateOtherFive: (state, action) => { + state.otherMsgFive = action.payload; } }, }); export const { UpdateLineChart, + UpdateLineChartFive, UpdateFan, - UpdateOther + UpdateFanFive, + UpdateOther, + UpdateOtherFive } = HomePageSlice.actions; export const selectLineChart = (state: RootState) => state.HomePageSlice.lineChart; +export const selectLineChartFive = (state: RootState) => + state.HomePageSlice.lineChartFive; export const selectFan = (state: RootState) => state.HomePageSlice.fan; +export const selectFanFive = (state: RootState) => + state.HomePageSlice.fanFive; export const selectOther = (state: RootState) => state.HomePageSlice.otherMsg; +export const selectOtherFive = (state: RootState) => + state.HomePageSlice.otherMsgFive; export default HomePageSlice.reducer; diff --git a/src/store/UpdateData.tsx b/src/store/UpdateData.tsx index 6433978..f9d3eb8 100644 --- a/src/store/UpdateData.tsx +++ b/src/store/UpdateData.tsx @@ -1,5 +1,4 @@ -// import { useState } from "react"; -// import axios from "axios"; +import { useEffect, useRef } from "react"; import { UpdateLineChart, UpdateFan, @@ -8,60 +7,72 @@ import { import { useAppDispatch } from "./hooks"; function UpdateData() { - // const [myUrl, setUrl] = useState(""); - // axios.get("/wsconfig.json").then((r) => { - // setUrl(r.data.url); - // }); - // const myUrl = window.location.host; - const myUrl = "192.168.82.45:8081"; - let websocketHome = null; - if ("WebSocket" in window) { - websocketHome = new WebSocket( - "ws://" + myUrl + "/dj-screen/websocket/1" - ); - //连接成功建立的回调方法 - } else { - alert("Not support websocket"); - } - // @ts-ignore - websocketHome.onopen = function (event) { - console.log("websocketHome-open"); - }; + const dispatch = useAppDispatch(); + const websocketRef = useRef(null); + const myUrl = "172.16.20.35:8081"; + interface MsgDataType { type: string; + data?: unknown; } - // const [msgData, setMsgData] = useState(null); - //接收到消息的回调方法 - // @ts-ignore - websocketHome.onmessage = function (event) { - // console.log("接收到消息:", event); - let msgData: MsgDataType = { type: "example" }; - try { - msgData = JSON.parse(event.data); - } catch (error) { - console.log("websocket: [unable to msgData] : ", event.data); + + useEffect(() => { + if (!("WebSocket" in window)) { + alert("Not support websocket"); + return; } - if (!msgData) return; - switch (msgData?.type) { - case "one": { - // @ts-ignore - dispatch(UpdateLineChart(msgData.data)); - break; + + const websocketHome = new WebSocket("ws://" + myUrl + "/dj-screen/websocket/1"); + websocketRef.current = websocketHome; + + websocketHome.onopen = function () { + console.log("ws-8081-open"); + }; + + websocketHome.onmessage = function (event) { + let msgData: MsgDataType = { type: "example" }; + try { + msgData = JSON.parse(event.data); + console.log("ws-8081: received message", msgData); + } catch (error) { + console.log("ws-8081: [unable to parse msgData]: ", event.data); + return; } - case "two": { + + switch (msgData.type) { + case "one": + // @ts-ignore + dispatch(UpdateLineChart(msgData.data)); + break; + case "two": { // @ts-ignore - dispatch(UpdateFan(msgData.data)); - break; - } - case "three": { + dispatch(UpdateFan(msgData.data)); + break; + } + case "three": { // @ts-ignore - dispatch(UpdateOther(msgData.data)); - break; + dispatch(UpdateOther(msgData.data)); + break; + } + default: + break; } - default: - } - }; - const dispatch = useAppDispatch(); + }; + + websocketHome.onerror = function (event) { + console.log("ws-8081-error", event); + }; + + websocketHome.onclose = function () { + console.log("ws-8081-close"); + }; + + return () => { + websocketRef.current?.close(); + websocketRef.current = null; + }; + }, [dispatch, myUrl]); + return null; } diff --git a/src/store/UpdateDataFive.tsx b/src/store/UpdateDataFive.tsx new file mode 100644 index 0000000..e21acd7 --- /dev/null +++ b/src/store/UpdateDataFive.tsx @@ -0,0 +1,81 @@ +import { useEffect, useRef } from "react"; +import { + UpdateFanFive, + UpdateLineChartFive, + UpdateOtherFive +} from "./HomePageSlice"; +import { useAppDispatch } from "./hooks"; + +function UpdateDataFive() { + const dispatch = useAppDispatch(); + const websocketRef = useRef(null); + const myUrl = "172.16.20.35:8082"; + + interface MsgDataType { + type: string; + data?: unknown; + } + + useEffect(() => { + if (!("WebSocket" in window)) { + alert("Not support websocket"); + return; + } + + const websocketHome = new WebSocket("ws://" + myUrl + "/dj-screen/websocket/1"); + websocketRef.current = websocketHome; + + websocketHome.onopen = function () { + console.log("ws-8082-open"); + }; + + websocketHome.onmessage = function (event) { + let msgData: MsgDataType = { type: "example" }; + if (event.data === "连接成功") return; + + try { + msgData = JSON.parse(event.data); + console.log("ws-8082: received message", msgData); + } catch (error) { + console.log("ws-8082: [unable to parse msgData]: ", event.data); + return; + } + + switch (msgData.type) { + case "one": + // @ts-ignore + dispatch(UpdateLineChartFive(msgData.data)); + break; + case "two": { + // @ts-ignore + dispatch(UpdateFanFive(msgData.data)); + break; + } + case "three": { + // @ts-ignore + dispatch(UpdateOtherFive(msgData.data)); + break; + } + default: + break; + } + }; + + websocketHome.onerror = function (event) { + console.log("ws-8082-error", event); + }; + + websocketHome.onclose = function () { + console.log("ws-8082-close"); + }; + + return () => { + websocketRef.current?.close(); + websocketRef.current = null; + }; + }, [dispatch, myUrl]); + + return null; +} + +export default UpdateDataFive; \ No newline at end of file