增加5线

2026-04-30 11:13:15 +08:00
parent e81e7f82fd
commit d1ed3bf458
25 changed files with 749 additions and 326 deletions
--- a/public/wsconfig.json
+++ b/public/wsconfig.json
@@ -1,3 +0,0 @@
-{
-  "url": "192.168.82.45:8081"
-}
--- 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(
  <Provider store={store}>
    <App />
    <UpdateData />
+    <UpdateDataFive />
  </Provider>
 );
 reportWebVitals();
--- 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 (
    <div className="center_down">
      <TitleBox title="bpress" />
      <div className="legend_right">
        <span className="dot" style={{background: '#18C7F3'}}></span>
        <span>六线</span>
-        {/* <span className="dot" style={{background: '#F31868'}}></span>
-        <span>五线</span> */}
+        <span className="dot" style={{background: '#F31868',marginLeft: '8px'}}></span>
+        <span>五线</span>
      </div>
      {
        options && (
--- 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 (
    <div className="center_down">
      <TitleBox title="bwater" />
      <div className="legend_right">
        <span className="dot" style={{background: '#18C7F3'}}></span>
        <span>六线</span>
-        {/* <span className="dot" style={{background: '#F31868'}}></span>
-        <span>五线</span> */}
+        <span className="dot" style={{background: '#F31868',marginLeft: '8px'}}></span>
+        <span>五线</span>
      </div>
      {
        options && (
--- 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 (
    <div className="center_up">
      <div className="center_up_top1">
@@ -19,12 +22,12 @@ function CenterTop() {
        <div className='center_up_top1_text'>
          <div className='center_up_top1_text_left'>
            <p style={{fontSize:'27px',color:'rgba(255, 255, 255, 0.90)'}}>六线火向</p>
-            <p style={{fontSize:'47px',textAlign:'center'}}>{fireData}</p>
+            <p style={{fontSize:'47px',textAlign:'center'}}>{fireData6}</p>
          </div>
          <span className='center_up_top_text_split'></span>
          <div>
            <p style={{fontSize:'27px',color:'rgba(255, 255, 255, 0.90)'}}>五线火向</p>
-            <p style={{fontSize:'47px',textAlign:'center'}}>-</p>
+            <p style={{fontSize:'47px',textAlign:'center'}}>{fireData5}</p>
          </div>
        </div>
      </div>
@@ -33,12 +36,12 @@ function CenterTop() {
        <div className='center_up_top2_text'>
          <div className='center_up_top2_text_left'>
            <p style={{fontSize:'27px',color:'rgba(255, 255, 255, 0.90)'}}>六线换火时间</p>
-            <p style={{fontSize:'47px',textAlign:'center'}}>{timeData}</p>
+            <p style={{fontSize:'47px',textAlign:'center'}}>{timeData6}</p>
          </div>
          <span className='center_up_top_text_split'></span>
          <div>
            <p style={{fontSize:'27px',color:'rgba(255, 255, 255, 0.90)'}}>五线换火时间</p>
-            <p style={{fontSize:'47px',textAlign:'center'}}>-</p>
+            <p style={{fontSize:'47px',textAlign:'center'}}>{timeData5}</p>
          </div>
        </div>
      </div>
@@ -47,12 +50,12 @@ function CenterTop() {
        <div className='center_up_top2_text'>
          <div className='center_up_top2_text_left'>
            <p style={{fontSize:'27px',color:'rgba(255, 255, 255, 0.90)'}}>六线.剩余时间</p>
-            <p style={{fontSize:'47px',textAlign:'center'}}>{reTime}</p>
+            <p style={{fontSize:'47px',textAlign:'center'}}>{reTime6}h</p>
          </div>
          <span className='center_up_top_text_split'></span>
          <div>
            <p style={{fontSize:'27px',color:'rgba(255, 255, 255, 0.90)'}}>五线.剩余时间</p>
-            <p style={{fontSize:'47px',textAlign:'center'}}>-</p>
+            <p style={{fontSize:'47px',textAlign:'center'}}>{reTime5}h</p>
          </div>
        </div>
      </div>
--- 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 (
    <div className="center_down">
      <TitleBox title="flow_temp" />
      <div className="legend_right">
        <span className="dot" style={{background: '#FFD160'}}></span>
        <span>六线</span>
-        {/* <span className="dot" style={{background: '#2760FF'}}></span>
-        <span>五线</span> */}
+        <span className="dot" style={{background: '#2760FF',marginLeft: '8px'}}></span>
+        <span>五线</span>
      </div>
      {
        options && (
--- 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 (
    <div className="center_down">
@@ -44,10 +68,10 @@ function HydrogenGas() {
        <span>六线1</span>
        <span className="dot" style={{background: '#2665FE',marginLeft: '8px'}}></span>
        <span>六线2</span>
-        {/* <span className="dot" style={{background: '#E718F3',marginLeft: '8px'}}></span>
+        <span className="dot" style={{background: '#E718F3',marginLeft: '8px'}}></span>
        <span>五线1</span>
        <span className="dot" style={{background: '#F31868',marginLeft: '8px'}}></span>
-        <span>五线2</span> */}
+        <span>五线2</span>
      </div>
      {
        options && (
--- 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 (
    <div className="center_down">
      <TitleBox title="kpress" />
      <div className="legend_right">
        <span className="dot" style={{background: '#FFD160'}}></span>
        <span>六线</span>
-        {/* <span className="dot" style={{background: '#2760FF'}}></span>
-        <span>五线</span> */}
+        <span className="dot" style={{background: '#2760FF',marginLeft: '8px'}}></span>
+        <span>五线</span>
      </div>
      {
        options && (
--- 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 (
    <div className="center_down">
      <TitleBox title="ktemp" />
      <div className="legend_right">
        <span className="dot" style={{background: '#18C7F3'}}></span>
        <span>六线</span>
-        {/* <span className="dot" style={{background: '#F31868'}}></span>
-        <span>五线</span> */}
+        <span className="dot" style={{background: '#F31868',marginLeft: '8px'}}></span>
+        <span>五线</span>
      </div>
      {
        options && (
--- 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 (
    <div className="center_down">
@@ -44,10 +68,10 @@ function Nitrogen() {
        <span>六线1</span>
        <span className="dot" style={{background: '#2665FE',marginLeft: '8px'}}></span>
        <span>六线2</span>
-        {/* <span className="dot" style={{background: '#E718F3',marginLeft: '8px'}}></span>
+        <span className="dot" style={{background: '#E718F3',marginLeft: '8px'}}></span>
        <span>五线1</span>
        <span className="dot" style={{background: '#F31868',marginLeft: '8px'}}></span>
-        <span>五线2</span> */}
+        <span>五线2</span>
      </div>
      {
        options && (
--- 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 (
    <div className="center_down">
@@ -44,10 +69,10 @@ function Oxygen() {
        <span>六线左氧</span>
        <span className="dot" style={{background: '#2665FE',marginLeft: '8px'}}></span>
        <span>六线右氧</span>
-        {/* <span className="dot" style={{background: '#E718F3',marginLeft: '8px'}}></span>
+        <span className="dot" style={{background: '#E718F3',marginLeft: '8px'}}></span>
        <span>五线1</span>
        <span className="dot" style={{background: '#F31868',marginLeft: '8px'}}></span>
-        <span>五线2</span> */}
+        <span>五线2</span>
      </div>
      {
        options && (
--- 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 (
    <div className="center_down">
      <TitleBox title="rec_water_press" />
      <div className="legend_right">
        <span className="dot" style={{background: '#FFD160'}}></span>
        <span>六线</span>
-        {/* <span className="dot" style={{background: '#2760FF'}}></span>
-        <span>五线</span> */}
+        <span className="dot" style={{background: '#2760FF',marginLeft: '8px'}}></span>
+        <span>五线</span>
      </div>
      {
        options && (
--- 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 (
    <div className="center_down">
      <TitleBox title="wpress" />
      <div className="legend_right">
        <span className="dot" style={{background: '#FFD160'}}></span>
        <span>六线</span>
-        {/* <span className="dot" style={{background: '#2760FF'}}></span>
-        <span>五线</span> */}
+        <span className="dot" style={{background: '#2760FF',marginLeft: '8px'}}></span>
+        <span>五线</span>
      </div>
      {
        options && (
--- 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)" },
+          ]),
+        },
+      },
    ],
  };
 }
--- 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)" },
+          ]),
+        },
+      },
+
    ],
  };
 }
--- 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)" },
+          ]),
+        },
+      },
    ],
  };
 }
--- 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 !== '.'? (
-          <span key={index} className="left_down1_numbg">
-          {char}
-        </span>
-        ):(<span key={index} className="left_down1_dotted"></span>)
-      ))
+      <>
+        {text.split("").map((char, index) => (
+          char !== "." ? (
+            <span key={index} className="left_down1_numbg">
+              {char}
+            </span>
+          ) : (
+            <span key={index} className="left_down1_dotted"></span>
+          )
+        ))}
+      </>
    );
  };
  return (
--- 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 !== '.'? (
-          <span key={index} className="left_down1_numbg">
-          {char}
-        </span>
-        ):(<span key={index} className="left_down1_dotted"></span>)
-      ))
+      <>
+        {text.split("").map((char, index) => (
+          char !== "." ? (
+            <span key={index} className="left_down1_numbg">
+              {char}
+            </span>
+          ) : (
+            <span key={index} className="left_down1_dotted"></span>
+          )
+        ))}
+      </>
    );
  };
  return (
--- 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 !== "." ? (
+            <span key={index} className="left_down1_numbg">
+              {char}
+            </span>
+          ) : (
+            <span key={index} className="left_down1_dotted"></span>
+          )
+        ))}
+      </>
+    );
+  };
  return (
    <div className="left_down1">
      <TitleBox title="water_temp5" />
      <div style={{position:'absolute',left:'45px',bottom:'100px'}}>
-        <span className="left_down1_numbg">-</span>
-        <span className="left_down1_numbg">-</span>
-        <span className="left_down1_numbg">-</span>
+        {
+          outputData === ''? (
+            <>
+              <span className="left_down1_numbg">-</span>
+              <span className="left_down1_numbg">-</span>
+              <span className="left_down1_numbg">-</span>
+            </>
+          ):<DigitalDisplay value={outputData}/>
+        }
        <span style={{fontSize:'30px',color:'#fff'}}>℃</span>
      </div>
      <div className="left_down1_tip" style={{bottom:'36px'}}>出口实时水温</div>
--- 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的名称','<span style=color:#fff>未运行</span>','<span style=color:#3984FF><span style=display:inline-block;width:7px;height:7px;border-radius:4px;background:#2760FF;vertical-align:middle;margin-right:5px;margin-bottom:5px;></span>正常</span>'],
-      ['2','产线1的名称','<span style=color:#30E89A>未运行</span>','<span style=color:#FF0C0C><span style=display:inline-block;width:7px;height:7px;border-radius:4px;background:#FF0C0C;vertical-align:middle;margin-right:5px;margin-bottom:5px;></span>故障</span>'],
-      ['3','产线1的名称','<span style=color:#fff>未运行</span>','<span style=color:#3984FF><span style=display:inline-block;width:7px;height:7px;border-radius:4px;background:#2760FF;vertical-align:middle;margin-right:5px;margin-bottom:5px;></span>正常</span>'],
-      ['4','产线1的名称','<span style=color:#30E89A>未运行</span>','<span style=color:#3984FF><span style=display:inline-block;width:7px;height:7px;border-radius:4px;background:#2760FF;vertical-align:middle;margin-right:5px;margin-bottom:5px;></span>正常</span>'],
-      ['5','产线1的名称','<span style=color:#fff>未运行</span>','<span style=color:#FF0C0C><span style=display:inline-block;width:7px;height:7px;border-radius:4px;background:#FF0C0C;vertical-align:middle;margin-right:5px;margin-bottom:5px;></span>故障</span>']
-    ],
+    data:[]
+    // data: [
+    //   ['1','产线1的名称','<span style=color:#fff>未运行</span>','<span style=color:#3984FF><span style=display:inline-block;width:7px;height:7px;border-radius:4px;background:#2760FF;vertical-align:middle;margin-right:5px;margin-bottom:5px;></span>正常</span>'],
+    //   ['2','产线1的名称','<span style=color:#30E89A>未运行</span>','<span style=color:#FF0C0C><span style=display:inline-block;width:7px;height:7px;border-radius:4px;background:#FF0C0C;vertical-align:middle;margin-right:5px;margin-bottom:5px;></span>故障</span>'],
+    //   ['3','产线1的名称','<span style=color:#fff>未运行</span>','<span style=color:#3984FF><span style=display:inline-block;width:7px;height:7px;border-radius:4px;background:#2760FF;vertical-align:middle;margin-right:5px;margin-bottom:5px;></span>正常</span>'],
+    //   ['4','产线1的名称','<span style=color:#30E89A>未运行</span>','<span style=color:#3984FF><span style=display:inline-block;width:7px;height:7px;border-radius:4px;background:#2760FF;vertical-align:middle;margin-right:5px;margin-bottom:5px;></span>正常</span>'],
+    //   ['5','产线1的名称','<span style=color:#fff>未运行</span>','<span style=color:#FF0C0C><span style=display:inline-block;width:7px;height:7px;border-radius:4px;background:#FF0C0C;vertical-align:middle;margin-right:5px;margin-bottom:5px;></span>故障</span>']
+    // ],
  };
-  // 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 ? `<span style=color:#fff>${item[1]}</span>`:`<span style=color:#30E89A>${item[1]}</span>`,
+        item[2]==='正常'?`<span style=color:#3984FF><span style=display:inline-block;width:7px;height:7px;border-radius:4px;background:#2760FF;vertical-align:middle;margin-right:5px;margin-bottom:5px;></span>${item[2]}</span>`:`<span style=color:#FF0C0C><span style=display:inline-block;width:7px;height:7px;border-radius:4px;background:#FF0C0C;vertical-align:middle;margin-right:5px;margin-bottom:5px;></span>${item[2]}</span>`
+      );
+      arr.push(arrInner);
+    });
+  config.data = arr;
  return (
    <div className="left_down2">
      <TitleBox title="fan_run5" />
-      {/* <div style={{ marginTop: "8px" }}>
+      {data.length !== 0 && (<div style={{ marginTop: "8px" }}>
        <ScrollBoard
          config={config}
          style={{ width: "476px", height: "155px" }}
        />
-      </div> */}
-      {/* {data.length !== 0 && (
-        <div style={{ marginTop: "15px" }}>
-          <ScrollBoard
-            config={config}
-            style={{ width: "500px", height: "440px" }}
-          />
-        </div>
-      )} */}
+      </div>)}
+      {data.length === 0 && (
        <p
          style={{
            color: "#cccf",
@@ -80,6 +56,7 @@ function RightDown2() {
        >
          暂无数据
        </p>
+      )}
    </div>
  );
 }
--- 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 (
+      <div style={{ display: 'inline-flex' }}>
+        {value.split('').map((char:any, index:any) => (
+          <span key={index} className="left_up1_numbg">
+            {char}
+          </span>
+        ))}
+      </div>
+    );
+  };
+  // 主显示组件
+  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 (
+      <div style={{ position: 'absolute', left: '55px', top: '64px' }}>
+        <DigitalDisplay value={formatDays} />
+        <span className="left_up1_text" style={{ marginLeft: 4 }}>天</span>
+        <DigitalDisplay value={formatHours} />
+        <span className="left_up1_text" style={{ marginLeft: 4 }}>时</span>
+      </div>
+    );
+  };
+  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 (
    <div className="left_up1">
      <TitleBox title="running_time5" />
-      <div style={{position:'absolute',left:'55px',top:'64px'}}>
-        <span className="left_up1_numbg">-</span>
-        <span className="left_up1_numbg">-</span>
-        <span className="left_up1_numbg">-</span>
-        <span className="left_up1_numbg">-</span>
-        <span className="left_up1_text">天</span>
-        <span className="left_up1_numbg">-</span>
-        <span className="left_up1_numbg">-</span>
-        <span className="left_up1_text">时</span>
-      </div>
+      <RuntimeDisplay start={startDate} end={endDate} />
      <div className="left_up1_tip">窑炉运行时间<span style={{display: 'inline-block',lineHeight: '27px',verticalAlign: 'top',margin: '0 5px'}}>.</span>五线</div>
    </div>
  );
--- 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 !== "." ? (
+            <span key={index} className="left_down1_numbg">
+              {char}
+            </span>
+          ) : (
+            <span key={index} className="left_down1_dotted"></span>
+          )
+        ))}
+      </>
+    );
+  };
  return (
    <div className="left_up1">
      <TitleBox title="pressure5" />
      <div style={{position:'absolute',left:'26px',top:'64px'}}>
-        <span className="left_down1_numbg">-</span>
-        <span className="left_down1_numbg">-</span>
-        <span className="left_down1_numbg">-</span>
+        {
+          data === ''? (
+            <>
+              <span className="left_down1_numbg">-</span>
+              <span className="left_down1_numbg">-</span>
+              <span className="left_down1_numbg">-</span>
+            </>
+          ):<DigitalDisplay value={data}/>
+        }
        <span style={{fontSize:'30px',color:'#fff'}}>Kpa</span>
      </div>
      <div className="left_up2_tip">窑炉压力值</div>
@@ -18,4 +41,4 @@ function RightUp2() {
    </div>
  );
 }
-export default RightUp2;
+export default LeftUp2;
--- 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;
--- 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<WebSocket | null>(null);
+  const myUrl = "172.16.20.35:8081";
+
  interface MsgDataType {
    type: string;
+    data?: unknown;
  }
-  // const [msgData, setMsgData] = useState<MsgDataType | null>(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;
 }

--- a/src/store/UpdateDataFive.tsx
+++ 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<WebSocket | null>(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;