mt-fe-group-new/hebeidejin-screen
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加5线

Browse Source
This commit is contained in:
朱菊兰
2026-04-30 11:13:15 +08:00
parent e81e7f82fd
commit d1ed3bf458
25 changed files with 749 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/wsconfig.json
View File

@@ -1,3 +0,0 @@
{
"url": "192.168.82.45:8081"
}

2
src/index.tsx
View File

@@ -7,6 +7,7 @@ import reportWebVitals from "./reportWebVitals";
import { store } from "./store/store"; import { store } from "./store/store";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import UpdateData from "./store/UpdateData"; import UpdateData from "./store/UpdateData";
import UpdateDataFive from "./store/UpdateDataFive";
const root = ReactDOM.createRoot( const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement document.getElementById("root") as HTMLElement
@@ -16,6 +17,7 @@ root.render(
<Provider store={store}> <Provider store={store}>
<App /> <App />
<UpdateData /> <UpdateData />
<UpdateDataFive />
</Provider> </Provider>
); );
reportWebVitals(); reportWebVitals();

43
src/page/HomePage/Center/BPress/index.tsx
View File

@@ -1,30 +1,49 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../../Component/TitleBox"; import TitleBox from "../../Component/TitleBox";
import { useAppSelector } from "../../../../store/hooks"; import { useAppSelector } from "../../../../store/hooks";
import { selectLineChart } from "../../../../store/HomePageSlice"; import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice";
import getOptions from "../../Component/LineChartRed/chart.config"; import getOptions from "../../Component/LineChartRed/chart.config";
import { generateTimeLabels } from "../../../../utils" import { generateTimeLabels } from "../../../../utils"
function BPress() { function BPress() {
const data = useAppSelector(selectLineChart).鼓泡系统温度TE361 || []; const data6 = useAppSelector(selectLineChart).鼓泡系统温度TE361 || [];
const data5 = useAppSelector(selectLineChartFive).鼓泡系统温度TE361 || [];
let xData: any = []; let xData: any = [];
let line6: Number[] = []; let seriesData: any = [
{
name: "六线",
data: [],
},
{
name: "五线",
data: [],
}
];
let yName = "单位/℃"; let yName = "单位/℃";
if (data.length !== 0) { if (data6.length !== 0) {
xData = generateTimeLabels(data.length) xData = generateTimeLabels(data6.length)
line6 = data seriesData[0].data = data6
}else{ } else {
xData = []; seriesData[0].data = [];
line6 = []; 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 ( return (
<div className="center_down"> <div className="center_down">
<TitleBox title="bpress" /> <TitleBox title="bpress" />
<div className="legend_right"> <div className="legend_right">
<span className="dot" style={{background: '#18C7F3'}}></span> <span className="dot" style={{background: '#18C7F3'}}></span>
<span>六线</span> <span>六线</span>
{/* <span className="dot" style={{background: '#F31868'}}></span> <span className="dot" style={{background: '#F31868',marginLeft: '8px'}}></span>
<span>五线</span> */} <span>五线</span>
</div> </div>
{ {
options && ( options && (

43
src/page/HomePage/Center/BWater/index.tsx
View File

@@ -1,30 +1,49 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../../Component/TitleBox"; import TitleBox from "../../Component/TitleBox";
import { useAppSelector } from "../../../../store/hooks"; import { useAppSelector } from "../../../../store/hooks";
import { selectLineChart } from "../../../../store/HomePageSlice"; import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice";
import getOptions from "../../Component/LineChartRed/chart.config"; import getOptions from "../../Component/LineChartRed/chart.config";
import { generateTimeLabels } from "../../../../utils" import { generateTimeLabels } from "../../../../utils"
function BWater() { function BWater() {
const data = useAppSelector(selectLineChart).天然气总管流量 || []; const data6 = useAppSelector(selectLineChart).天然气总管流量 || [];
const data5 = useAppSelector(selectLineChartFive).天然气总管流量 || [];
let xData: any = []; let xData: any = [];
let line6: Number[] = []; let seriesData: any = [
{
name: "六线",
data: [],
},
{
name: "五线",
data: [],
}
];
let yName = "单位/m³"; let yName = "单位/m³";
if (data.length !== 0) { if (data6.length !== 0) {
xData = generateTimeLabels(data.length) xData = generateTimeLabels(data6.length)
line6 = data seriesData[0].data = data6
}else{ } else {
xData = []; seriesData[0].data = [];
line6 = []; 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 ( return (
<div className="center_down"> <div className="center_down">
<TitleBox title="bwater" /> <TitleBox title="bwater" />
<div className="legend_right"> <div className="legend_right">
<span className="dot" style={{background: '#18C7F3'}}></span> <span className="dot" style={{background: '#18C7F3'}}></span>
<span>六线</span> <span>六线</span>
{/* <span className="dot" style={{background: '#F31868'}}></span> <span className="dot" style={{background: '#F31868',marginLeft: '8px'}}></span>
<span>五线</span> */} <span>五线</span>
</div> </div>
{ {
options && ( options && (

23
src/page/HomePage/Center/CenterTop/index.tsx
View File

@@ -6,12 +6,15 @@ import eqicon2 from './../../../../assets/image/eq_icon2.png'
import eqicon3 from './../../../../assets/image/eq_icon3.png' import eqicon3 from './../../../../assets/image/eq_icon3.png'
import eqicon4 from './../../../../assets/image/eq_icon4.png' import eqicon4 from './../../../../assets/image/eq_icon4.png'
import { useAppSelector } from "../../../../store/hooks"; import { useAppSelector } from "../../../../store/hooks";
import { selectOther } from "../../../../store/HomePageSlice"; import { selectOther,selectOtherFive } from "../../../../store/HomePageSlice";
function CenterTop() { function CenterTop() {
const fireData = useAppSelector(selectOther).火向 || '-'; const fireData6 = useAppSelector(selectOther).火向 || '-';
const timeData = useAppSelector(selectOther).换火时间 || '-'; const fireData5 = useAppSelector(selectOtherFive).火向 || '-';
const reTime = useAppSelector(selectOther).剩余换火时间 || '-'; const timeData6 = useAppSelector(selectOther).换火时间 || '-';
const timeData5 = useAppSelector(selectOtherFive).换火时间 || '-';
const reTime6 = useAppSelector(selectOther).剩余换火时间 || '-';
const reTime5 = useAppSelector(selectOtherFive).剩余换火时间 || '-';
return ( return (
<div className="center_up"> <div className="center_up">
<div className="center_up_top1"> <div className="center_up_top1">
@@ -19,12 +22,12 @@ function CenterTop() {
<div className='center_up_top1_text'> <div className='center_up_top1_text'>
<div className='center_up_top1_text_left'> <div className='center_up_top1_text_left'>
<p style={{fontSize:'27px',color:'rgba(255, 255, 255, 0.90)'}}>六线火向</p> <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> </div>
<span className='center_up_top_text_split'></span> <span className='center_up_top_text_split'></span>
<div> <div>
<p style={{fontSize:'27px',color:'rgba(255, 255, 255, 0.90)'}}>五线火向</p> <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> </div>
</div> </div>
@@ -33,12 +36,12 @@ function CenterTop() {
<div className='center_up_top2_text'> <div className='center_up_top2_text'>
<div className='center_up_top2_text_left'> <div className='center_up_top2_text_left'>
<p style={{fontSize:'27px',color:'rgba(255, 255, 255, 0.90)'}}>六线换火时间</p> <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> </div>
<span className='center_up_top_text_split'></span> <span className='center_up_top_text_split'></span>
<div> <div>
<p style={{fontSize:'27px',color:'rgba(255, 255, 255, 0.90)'}}>五线换火时间</p> <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> </div>
</div> </div>
@@ -47,12 +50,12 @@ function CenterTop() {
<div className='center_up_top2_text'> <div className='center_up_top2_text'>
<div className='center_up_top2_text_left'> <div className='center_up_top2_text_left'>
<p style={{fontSize:'27px',color:'rgba(255, 255, 255, 0.90)'}}>六线.剩余时间</p> <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> </div>
<span className='center_up_top_text_split'></span> <span className='center_up_top_text_split'></span>
<div> <div>
<p style={{fontSize:'27px',color:'rgba(255, 255, 255, 0.90)'}}>五线.剩余时间</p> <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> </div>
</div> </div>

45
src/page/HomePage/Center/FlowTemp/index.tsx
View File

@@ -1,30 +1,49 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../../Component/TitleBox"; import TitleBox from "../../Component/TitleBox";
import { useAppSelector } from "../../../../store/hooks"; import { useAppSelector } from "../../../../store/hooks";
import { selectLineChart } from "../../../../store/HomePageSlice"; import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice";
import getOptions from "../../Component/LineChartYellow/chart.config"; import getOptions from "../../Component/LineChartYellow/chart.config";
import { generateTimeLabels } from "../../../../utils" import { generateTimeLabels } from "../../../../utils"
function FlowTemp() { function FlowTemp() {
const data = useAppSelector(selectLineChart).流道温度 || []; const data6 = useAppSelector(selectLineChart).流道温度 || [];
const data5 = useAppSelector(selectLineChartFive).流道温度 || [];
let xData: any = []; let xData: any = [];
let line6: Number[] = []; let seriesData: any = [
let yName = "单位/℃"; {
if (data.length !== 0) { name: "六线",
xData = generateTimeLabels(data.length) data: [],
line6 = data },
}else{ {
xData = []; name: "五线",
line6 = []; 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 ( return (
<div className="center_down"> <div className="center_down">
<TitleBox title="flow_temp" /> <TitleBox title="flow_temp" />
<div className="legend_right"> <div className="legend_right">
<span className="dot" style={{background: '#FFD160'}}></span> <span className="dot" style={{background: '#FFD160'}}></span>
<span>六线</span> <span>六线</span>
{/* <span className="dot" style={{background: '#2760FF'}}></span> <span className="dot" style={{background: '#2760FF',marginLeft: '8px'}}></span>
<span>五线</span> */} <span>五线</span>
</div> </div>
{ {
options && ( options && (

32
src/page/HomePage/Center/HydrogenGas/index.tsx
View File

@@ -1,12 +1,14 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../../Component/TitleBox"; import TitleBox from "../../Component/TitleBox";
import { useAppSelector } from "../../../../store/hooks"; import { useAppSelector } from "../../../../store/hooks";
import { selectLineChart } from "../../../../store/HomePageSlice"; import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice";
import getOptions from "../../Component/LineChartRedDob/chart.config"; import getOptions from "../../Component/LineChartRedDob/chart.config";
import { generateTimeLabels } from "../../../../utils"; import { generateTimeLabels } from "../../../../utils";
function HydrogenGas() { function HydrogenGas() {
const data61 = useAppSelector(selectLineChart)['1#氢气流量'] || []; const data61 = useAppSelector(selectLineChart)['1#氢气流量'] || [];
const data62 = useAppSelector(selectLineChart)['2#氢气流量'] || []; const data62 = useAppSelector(selectLineChart)['2#氢气流量'] || [];
const data51 = useAppSelector(selectLineChartFive)['1#氢气流量'] || [];
const data52 = useAppSelector(selectLineChartFive)['2#氢气流量'] || [];
let xData: any = []; let xData: any = [];
let yName = "单位/m³"; let yName = "单位/m³";
let seriesData: any = [ let seriesData: any = [
@@ -17,6 +19,14 @@ function HydrogenGas() {
{ {
name: "六线2", name: "六线2",
data: [], data: [],
},
{
name: "五线1",
data: [],
},
{
name: "五线2",
data: [],
} }
]; ];
if (data61.length !== 0) { if (data61.length !== 0) {
@@ -26,7 +36,11 @@ function HydrogenGas() {
seriesData[0].data = []; seriesData[0].data = [];
if (data62.length !== 0) { if (data62.length !== 0) {
xData = generateTimeLabels(data62.length) 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 = []; xData = [];
} }
} }
@@ -35,6 +49,16 @@ function HydrogenGas() {
}else{ }else{
seriesData[1].data = []; 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); const options = getOptions(xData, seriesData, yName);
return ( return (
<div className="center_down"> <div className="center_down">
@@ -44,10 +68,10 @@ function HydrogenGas() {
<span>六线1</span> <span>六线1</span>
<span className="dot" style={{background: '#2665FE',marginLeft: '8px'}}></span> <span className="dot" style={{background: '#2665FE',marginLeft: '8px'}}></span>
<span>六线2</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>五线1</span>
<span className="dot" style={{background: '#F31868',marginLeft: '8px'}}></span> <span className="dot" style={{background: '#F31868',marginLeft: '8px'}}></span>
<span>五线2</span> */} <span>五线2</span>
</div> </div>
{ {
options && ( options && (

43
src/page/HomePage/Center/KPress/index.tsx
View File

@@ -1,30 +1,49 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../../Component/TitleBox"; import TitleBox from "../../Component/TitleBox";
import { useAppSelector } from "../../../../store/hooks"; import { useAppSelector } from "../../../../store/hooks";
import { selectLineChart } from "../../../../store/HomePageSlice"; import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice";
import getOptions from "../../Component/LineChartYellow/chart.config"; import getOptions from "../../Component/LineChartYellow/chart.config";
import { generateTimeLabels } from "../../../../utils" import { generateTimeLabels } from "../../../../utils"
function KPress() { function KPress() {
const data = useAppSelector(selectLineChart).熔窑压力 || []; const data6 = useAppSelector(selectLineChart).熔窑压力 || [];
const data5 = useAppSelector(selectLineChartFive).熔窑压力 || [];
let xData: any = []; let xData: any = [];
let line6: Number[] = []; let seriesData: any = [
{
name: "六线",
data: [],
},
{
name: "五线",
data: [],
}
];
let yName = "单位/Kpa"; let yName = "单位/Kpa";
if (data.length !== 0) { if (data6.length !== 0) {
xData = generateTimeLabels(data.length) xData = generateTimeLabels(data6.length)
line6 = data seriesData[0].data = data6
}else{ } else {
xData = []; seriesData[0].data = [];
line6 = []; 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 ( return (
<div className="center_down"> <div className="center_down">
<TitleBox title="kpress" /> <TitleBox title="kpress" />
<div className="legend_right"> <div className="legend_right">
<span className="dot" style={{background: '#FFD160'}}></span> <span className="dot" style={{background: '#FFD160'}}></span>
<span>六线</span> <span>六线</span>
{/* <span className="dot" style={{background: '#2760FF'}}></span> <span className="dot" style={{background: '#2760FF',marginLeft: '8px'}}></span>
<span>五线</span> */} <span>五线</span>
</div> </div>
{ {
options && ( options && (

45
src/page/HomePage/Center/KTemp/index.tsx
View File

@@ -1,30 +1,49 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../../Component/TitleBox"; import TitleBox from "../../Component/TitleBox";
import { useAppSelector } from "../../../../store/hooks"; import { useAppSelector } from "../../../../store/hooks";
import { selectLineChart } from "../../../../store/HomePageSlice"; import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice";
import getOptions from "../../Component/LineChartRed/chart.config"; import getOptions from "../../Component/LineChartRed/chart.config";
import { generateTimeLabels } from "../../../../utils" import { generateTimeLabels } from "../../../../utils"
function KTemp() { function KTemp() {
const data = useAppSelector(selectLineChart).熔窑温度 || []; const data6 = useAppSelector(selectLineChart).熔窑温度 || [];
const data5 = useAppSelector(selectLineChartFive).熔窑温度 || [];
let xData: any = []; let xData: any = [];
let line6: Number[] = []; let seriesData: any = [
let yName = "单位/℃"; {
if (data.length !== 0) { name: "六线",
xData = generateTimeLabels(data.length) data: [],
line6 = data },
}else{ {
xData = []; name: "五线",
line6 = []; 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 ( return (
<div className="center_down"> <div className="center_down">
<TitleBox title="ktemp" /> <TitleBox title="ktemp" />
<div className="legend_right"> <div className="legend_right">
<span className="dot" style={{background: '#18C7F3'}}></span> <span className="dot" style={{background: '#18C7F3'}}></span>
<span>六线</span> <span>六线</span>
{/* <span className="dot" style={{background: '#F31868'}}></span> <span className="dot" style={{background: '#F31868',marginLeft: '8px'}}></span>
<span>五线</span> */} <span>五线</span>
</div> </div>
{ {
options && ( options && (

32
src/page/HomePage/Center/Nitrogen/index.tsx
View File

@@ -1,12 +1,14 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../../Component/TitleBox"; import TitleBox from "../../Component/TitleBox";
import { useAppSelector } from "../../../../store/hooks"; import { useAppSelector } from "../../../../store/hooks";
import { selectLineChart } from "../../../../store/HomePageSlice"; import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice";
import getOptions from "../../Component/LineChartRedDob/chart.config"; import getOptions from "../../Component/LineChartRedDob/chart.config";
import { generateTimeLabels } from "../../../../utils"; import { generateTimeLabels } from "../../../../utils";
function Nitrogen() { function Nitrogen() {
const data61 = useAppSelector(selectLineChart)['1#氮气流量'] || []; const data61 = useAppSelector(selectLineChart)['1#氮气流量'] || [];
const data62 = useAppSelector(selectLineChart)['2#氮气流量'] || []; const data62 = useAppSelector(selectLineChart)['2#氮气流量'] || [];
const data51 = useAppSelector(selectLineChartFive)['1#氮气流量'] || [];
const data52 = useAppSelector(selectLineChartFive)['2#氮气流量'] || [];
let xData: any = []; let xData: any = [];
let yName = "单位/m³"; let yName = "单位/m³";
let seriesData: any = [ let seriesData: any = [
@@ -17,6 +19,14 @@ function Nitrogen() {
{ {
name: "六线2", name: "六线2",
data: [], data: [],
},
{
name: "五线1",
data: [],
},
{
name: "五线2",
data: [],
} }
]; ];
if (data61.length !== 0) { if (data61.length !== 0) {
@@ -26,7 +36,11 @@ function Nitrogen() {
seriesData[0].data = []; seriesData[0].data = [];
if (data62.length !== 0) { if (data62.length !== 0) {
xData = generateTimeLabels(data62.length) 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 = []; xData = [];
} }
} }
@@ -35,6 +49,16 @@ function Nitrogen() {
}else{ }else{
seriesData[1].data = []; 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); const options = getOptions(xData, seriesData, yName);
return ( return (
<div className="center_down"> <div className="center_down">
@@ -44,10 +68,10 @@ function Nitrogen() {
<span>六线1</span> <span>六线1</span>
<span className="dot" style={{background: '#2665FE',marginLeft: '8px'}}></span> <span className="dot" style={{background: '#2665FE',marginLeft: '8px'}}></span>
<span>六线2</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>五线1</span>
<span className="dot" style={{background: '#F31868',marginLeft: '8px'}}></span> <span className="dot" style={{background: '#F31868',marginLeft: '8px'}}></span>
<span>五线2</span> */} <span>五线2</span>
</div> </div>
{ {
options && ( options && (

59
src/page/HomePage/Center/Oxygen/index.tsx
View File

@@ -1,12 +1,14 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../../Component/TitleBox"; import TitleBox from "../../Component/TitleBox";
import { useAppSelector } from "../../../../store/hooks"; import { useAppSelector } from "../../../../store/hooks";
import { selectLineChart } from "../../../../store/HomePageSlice"; import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice";
import getOptions from "../../Component/LineChartRedDob/chart.config"; import getOptions from "../../Component/LineChartRedDob/chart.config";
import { generateTimeLabels } from "../../../../utils"; import { generateTimeLabels } from "../../../../utils";
function Oxygen() { function Oxygen() {
const data61 = useAppSelector(selectLineChart)['0#氧枪左氧气流量'] || []; const data61 = useAppSelector(selectLineChart)['0#氧枪左氧气流量'] || [];
const data62 = useAppSelector(selectLineChart)['0#氧枪右氧气流量'] || []; const data62 = useAppSelector(selectLineChart)['0#氧枪右氧气流量'] || [];
const data51 = useAppSelector(selectLineChartFive)['0#氧枪左氧气流量'] || [];
const data52 = useAppSelector(selectLineChartFive)['0#氧枪右氧气流量'] || [];
let xData: any = []; let xData: any = [];
let yName = "单位/m³"; let yName = "单位/m³";
let seriesData: any = [ let seriesData: any = [
@@ -17,24 +19,47 @@ function Oxygen() {
{ {
name: "六线右氧", name: "六线右氧",
data: [], data: [],
} },
{
name: "五线左氧",
data: [],
},
{
name: "五线右氧",
data: [],
},
]; ];
if (data61.length !== 0) { if (data61.length !== 0) {
xData = generateTimeLabels(data61.length) xData = generateTimeLabels(data61.length)
seriesData[0].data = data61 seriesData[0].data = data61
}else{ }else{
seriesData[0].data = []; seriesData[0].data = [];
if (data62.length !== 0) {
xData = generateTimeLabels(data62.length)
}else{
xData = [];
}
}
if (data62.length !== 0) { if (data62.length !== 0) {
seriesData[1].data = data62 xData = generateTimeLabels(data62.length)
}else{ } else if (data51.length !== 0) {
seriesData[1].data = []; 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); const options = getOptions(xData, seriesData, yName);
return ( return (
<div className="center_down"> <div className="center_down">
@@ -44,10 +69,10 @@ function Oxygen() {
<span>六线左氧</span> <span>六线左氧</span>
<span className="dot" style={{background: '#2665FE',marginLeft: '8px'}}></span> <span className="dot" style={{background: '#2665FE',marginLeft: '8px'}}></span>
<span>六线右氧</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>五线1</span>
<span className="dot" style={{background: '#F31868',marginLeft: '8px'}}></span> <span className="dot" style={{background: '#F31868',marginLeft: '8px'}}></span>
<span>五线2</span> */} <span>五线2</span>
</div> </div>
{ {
options && ( options && (

41
src/page/HomePage/Center/RecWaterPress/index.tsx
View File

@@ -1,30 +1,49 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../../Component/TitleBox"; import TitleBox from "../../Component/TitleBox";
import { useAppSelector } from "../../../../store/hooks"; import { useAppSelector } from "../../../../store/hooks";
import { selectLineChart } from "../../../../store/HomePageSlice"; import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice";
import getOptions from "../../Component/LineChartYellow/chart.config"; import getOptions from "../../Component/LineChartYellow/chart.config";
import { generateTimeLabels } from "../../../../utils" import { generateTimeLabels } from "../../../../utils"
function RecWaterPress() { function RecWaterPress() {
const data = useAppSelector(selectLineChart).水循环温度 || []; const data6 = useAppSelector(selectLineChart).水循环温度 || [];
const data5 = useAppSelector(selectLineChartFive).水循环温度 || [];
let xData: any = []; let xData: any = [];
let line6: Number[] = []; let seriesData: any = [
{
name: "六线",
data: [],
},
{
name: "五线",
data: [],
}
];
let yName = "单位/℃"; let yName = "单位/℃";
if (data.length !== 0) { if (data6.length !== 0) {
xData = generateTimeLabels(data.length) xData = generateTimeLabels(data6.length)
line6 = data seriesData[0].data = data6
}else{ } else {
seriesData[0].data = [];
if (data5.length !== 0) {
xData = generateTimeLabels(data5.length)
} else {
xData = []; 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 ( return (
<div className="center_down"> <div className="center_down">
<TitleBox title="rec_water_press" /> <TitleBox title="rec_water_press" />
<div className="legend_right"> <div className="legend_right">
<span className="dot" style={{background: '#FFD160'}}></span> <span className="dot" style={{background: '#FFD160'}}></span>
<span>六线</span> <span>六线</span>
{/* <span className="dot" style={{background: '#2760FF'}}></span> <span className="dot" style={{background: '#2760FF',marginLeft: '8px'}}></span>
<span>五线</span> */} <span>五线</span>
</div> </div>
{ {
options && ( options && (

45
src/page/HomePage/Center/WPress/index.tsx
View File

@@ -1,30 +1,49 @@
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import TitleBox from "../../Component/TitleBox"; import TitleBox from "../../Component/TitleBox";
import { useAppSelector } from "../../../../store/hooks"; import { useAppSelector } from "../../../../store/hooks";
import { selectLineChart } from "../../../../store/HomePageSlice"; import { selectLineChart,selectLineChartFive } from "../../../../store/HomePageSlice";
import getOptions from "../../Component/LineChartYellow/chart.config"; import getOptions from "../../Component/LineChartYellow/chart.config";
import { generateTimeLabels } from "../../../../utils" import { generateTimeLabels } from "../../../../utils"
function WPress() { function WPress() {
const data = useAppSelector(selectLineChart).总管冷却水压力 || []; const data6 = useAppSelector(selectLineChart).总管冷却水压力 || [];
const data5 = useAppSelector(selectLineChartFive).总管冷却水压力 || [];
let xData: any = []; let xData: any = [];
let line6: Number[] = []; let seriesData: any = [
let yName = "单位/Kpa"; {
if (data.length !== 0) { name: "六线",
xData = generateTimeLabels(data.length) data: [],
line6 = data },
}else{ {
xData = []; name: "五线",
line6 = []; 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 ( return (
<div className="center_down"> <div className="center_down">
<TitleBox title="wpress" /> <TitleBox title="wpress" />
<div className="legend_right"> <div className="legend_right">
<span className="dot" style={{background: '#FFD160'}}></span> <span className="dot" style={{background: '#FFD160'}}></span>
<span>六线</span> <span>六线</span>
{/* <span className="dot" style={{background: '#2760FF'}}></span> <span className="dot" style={{background: '#2760FF',marginLeft: '8px'}}></span>
<span>五线</span> */} <span>五线</span>
</div> </div>
{ {
options && ( options && (

38
src/page/HomePage/Component/LineChartRed/chart.config.ts
View File

@@ -1,6 +1,6 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function getOptions(xData: any, line6: any, yName: string) { export default function getOptions(xData: any, seriesData: any, yName: string) {
if (xData.length === 0 || line6.length === 0) if (xData.length === 0 || seriesData.length === 0)
return null; return null;
return { return {
grid: { top: 30, right: 0, bottom: 0, left: 10,containLabel: true}, 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: [ series: [
{ {
name:'六线', name:'六线',
data: line6, data: seriesData[0].data,
color: "rgba(24, 199, 243, 1)", color: "rgba(24, 199, 243, 1)",
type: "line", type: "line",
symbol: "circle", symbol: "circle",
@@ -75,22 +75,22 @@ export default function getOptions(xData: any, line6: any, yName: string) {
]), ]),
}, },
}, },
// { {
// name:'五线', name:'五线',
// data: line5, data: seriesData[1].data,
// color: "rgba(243, 24, 104, 1)", color: "rgba(243, 24, 104, 1)",
// type: "line", type: "line",
// symbol: "circle", symbol: "circle",
// symbolSize: 6, symbolSize: 6,
// areaStyle: { areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "rgba(243, 24, 104, 0.6)" }, { offset: 0, color: "rgba(243, 24, 104, 0.6)" },
// { offset: 0.4, color: "rgba(243, 24, 104, 0.1)" }, { offset: 0.4, color: "rgba(243, 24, 104, 0.1)" },
// { offset: 0.8, color: "rgba(243, 24, 104, 0)" }, { offset: 0.8, color: "rgba(243, 24, 104, 0)" },
// { offset: 1, color: "rgba(243, 24, 104, 0)" }, { offset: 1, color: "rgba(243, 24, 104, 0)" },
// ]), ]),
// }, },
// }, },
], ],
}; };
} }

49
src/page/HomePage/Component/LineChartRedDob/chart.config.ts
View File

@@ -91,22 +91,39 @@ export default function getOptions(xData: any, seriesData: any, yName: string) {
]), ]),
}, },
}, },
// { {
// name:'五线', name:seriesData[2].name,
// data: line5, data: seriesData[2].data,
// color: "rgba(243, 24, 104, 1)", color: "rgba(231, 24, 243, 1)",
// type: "line", type: "line",
// symbol: "circle", symbol: "circle",
// symbolSize: 6, symbolSize: 6,
// areaStyle: { areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "rgba(243, 24, 104, 0.6)" }, { offset: 0, color: "rgba(231, 24, 243, 0.6)" },
// { offset: 0.4, color: "rgba(243, 24, 104, 0.1)" }, { offset: 0.4, color: "rgba(231, 24, 243, 0.1)" },
// { offset: 0.8, color: "rgba(243, 24, 104, 0)" }, { offset: 0.8, color: "rgba(231, 24, 243, 0)" },
// { offset: 1, color: "rgba(243, 24, 104, 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)" },
]),
},
},
], ],
}; };
} }

38
src/page/HomePage/Component/LineChartYellow/chart.config.ts
View File

@@ -1,6 +1,6 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function getOptions(xData: any, line6: any, yName: string) { export default function getOptions(xData: any, seriesData: any, yName: string) {
if (xData.length === 0 || line6.length === 0) if (xData.length === 0 || seriesData.length === 0)
return null; return null;
return { return {
grid: { top: 30, right: 0, bottom: 0, left: 10,containLabel: true}, 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: [ series: [
{ {
name:'六线', name:'六线',
data: line6, data: seriesData[0].data,
color: "rgba(255, 209, 96, 1)", color: "rgba(255, 209, 96, 1)",
type: "line", type: "line",
symbol: "circle", symbol: "circle",
@@ -75,22 +75,22 @@ export default function getOptions(xData: any, line6: any, yName: string) {
]), ]),
}, },
}, },
// { {
// name:'五线', name:'五线',
// data: line5, data: seriesData[1].data,
// color: "rgba(39, 96, 255, 1)", color: "rgba(39, 96, 255, 1)",
// type: "line", type: "line",
// symbol: "circle", symbol: "circle",
// symbolSize: 6, symbolSize: 6,
// areaStyle: { areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "rgba(39, 96, 255, 0.6)" }, { offset: 0, color: "rgba(39, 96, 255, 0.6)" },
// { offset: 0.4, color: "rgba(39, 96, 255, 0.1)" }, { offset: 0.4, color: "rgba(39, 96, 255, 0.1)" },
// { offset: 0.8, color: "rgba(39, 96, 255, 0)" }, { offset: 0.8, color: "rgba(39, 96, 255, 0)" },
// { offset: 1, color: "rgba(39, 96, 255, 0)" }, { offset: 1, color: "rgba(39, 96, 255, 0)" },
// ]), ]),
// }, },
// }, },
], ],
}; };
} }

23
src/page/HomePage/Left/LeftDown1/index.tsx
View File

@@ -4,17 +4,22 @@ import img1 from "../../../../assets/image/waterTempUp.png"
import { useAppSelector } from "../../../../store/hooks"; import { useAppSelector } from "../../../../store/hooks";
import { selectOther } from "../../../../store/HomePageSlice"; import { selectOther } from "../../../../store/HomePageSlice";
function LeftDown1() { 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 ( return (
value.split('').map((char:any, index:any) => ( <>
char !== '.'? ( {text.split("").map((char, index) => (
<span key={index} className="left_down1_numbg"> char !== "." ? (
{char} <span key={index} className="left_down1_numbg">
</span> {char}
):(<span key={index} className="left_down1_dotted"></span>) </span>
)) ) : (
<span key={index} className="left_down1_dotted"></span>
)
))}
</>
); );
}; };
return ( return (

23
src/page/HomePage/Left/LeftUp2/index.tsx
View File

@@ -3,17 +3,22 @@ import img1 from "../../../../assets/image/press_img.png"
import { useAppSelector } from "../../../../store/hooks"; import { useAppSelector } from "../../../../store/hooks";
import { selectOther } from "../../../../store/HomePageSlice"; import { selectOther } from "../../../../store/HomePageSlice";
function LeftUp2() { 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 ( return (
value.split('').map((char:any, index:any) => ( <>
char !== '.'? ( {text.split("").map((char, index) => (
<span key={index} className="left_down1_numbg"> char !== "." ? (
{char} <span key={index} className="left_down1_numbg">
</span> {char}
):(<span key={index} className="left_down1_dotted"></span>) </span>
)) ) : (
<span key={index} className="left_down1_dotted"></span>
)
))}
</>
); );
}; };
return ( return (

35
src/page/HomePage/Right/RightDown1/index.tsx
View File

@@ -1,17 +1,40 @@
import TitleBox from "../../Component/TitleBox"; import TitleBox from "../../Component/TitleBox";
import img1 from "../../../../assets/image/waterTempUp.png" import img1 from "../../../../assets/image/waterTempUp.png"
// import img2 from "../../../../assets/image/waterTempDown.png" // import img2 from "../../../../assets/image/waterTempDown.png"
// import { useAppSelector } from "../../../../store/hooks"; import { useAppSelector } from "../../../../store/hooks";
// import { selectOrderCompletionWO } from "../../../../store/HomePageSlice"; import { selectOtherFive } from "../../../../store/HomePageSlice";
function RightDown1() { 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 ( return (
<div className="left_down1"> <div className="left_down1">
<TitleBox title="water_temp5" /> <TitleBox title="water_temp5" />
<div style={{position:'absolute',left:'45px',bottom:'100px'}}> <div style={{position:'absolute',left:'45px',bottom:'100px'}}>
<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>
<span className="left_down1_numbg">-</span>
</>
):<DigitalDisplay value={outputData}/>
}
<span style={{fontSize:'30px',color:'#fff'}}>℃</span> <span style={{fontSize:'30px',color:'#fff'}}>℃</span>
</div> </div>
<div className="left_down1_tip" style={{bottom:'36px'}}>出口实时水温</div> <div className="left_down1_tip" style={{bottom:'36px'}}>出口实时水温</div>

83
src/page/HomePage/Right/RightDown2/index.tsx
View File

@@ -1,74 +1,50 @@
import TitleBox from "../../Component/TitleBox"; import TitleBox from "../../Component/TitleBox";
import ScrollBoard from "../../../Component/ScrollBoard"; import ScrollBoard from "../../../Component/ScrollBoard";
// import { useAppSelector } from "../../../../store/hooks"; import { useAppSelector } from "../../../../store/hooks";
// import { selectOrderCompletionWO } from "../../../../store/HomePageSlice"; import { selectFanFive } from "../../../../store/HomePageSlice";
function RightDown2() { function RightDown2() {
// const data = useAppSelector(selectOrderCompletionWO); const data = useAppSelector(selectFanFive).风机运行 || [];
// console.log("222222封装工单完成情况+", data);
const config = { const config = {
header: ["序号", "设备名称", "运行频率", "设备状态"], header: ["序号", "设备名称", "运行状态", "设备状态"],
headerHeight: 30, headerHeight: 30,
rowNum: 5, rowNum: 5,
headerBGC: "rgba(4, 74, 132, 0.2)", headerBGC: "rgba(4, 74, 132, 0.2)",
oddRowBGC: "rgba(4, 74, 132, 0.2)", oddRowBGC: "rgba(4, 74, 132, 0.2)",
evenRowBGC: "rgba(11, 84, 153, 0.36)", evenRowBGC: "rgba(11, 84, 153, 0.36)",
columnWidth: [110, 180, 120, 120], columnWidth: [90, 220, 110, 110],
align: ["center", "left", "left", "center"], align: ["center", "left", "left", "center"],
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>'], // data: [
['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>'], // ['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>'],
['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>'], // ['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>'],
['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>'], // ['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>'],
['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>'] // ['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 = []; let arr: any = [];
// data && data&&
// data.map((item: any, index: any) => { data.map((item: any, index: any) => {
// let arrInner = []; let arrInner = [];
// arrInner.push( arrInner.push(
// item.workOrderNo ? item.workOrderNo : "-", index + 1,
// item.planQuantity item[0],
// ? item.planQuantity index%2 === 0 ? `<span style=color:#fff>${item[1]}</span>`:`<span style=color:#30E89A>${item[1]}</span>`,
// : item.planQuantity === 0 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>`
// ? item.planQuantity );
// : "-", arr.push(arrInner);
// item.actualPutIn });
// ? item.actualPutIn config.data = arr;
// : 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;
return ( return (
<div className="left_down2"> <div className="left_down2">
<TitleBox title="fan_run5" /> <TitleBox title="fan_run5" />
{/* <div style={{ marginTop: "8px" }}> {data.length !== 0 && (<div style={{ marginTop: "8px" }}>
<ScrollBoard <ScrollBoard
config={config} config={config}
style={{ width: "476px", height: "155px" }} style={{ width: "476px", height: "155px" }}
/> />
</div> */} </div>)}
{/* {data.length !== 0 && ( {data.length === 0 && (
<div style={{ marginTop: "15px" }}>
<ScrollBoard
config={config}
style={{ width: "500px", height: "440px" }}
/>
</div>
)} */}
<p <p
style={{ style={{
color: "#cccf", color: "#cccf",
@@ -80,6 +56,7 @@ function RightDown2() {
> >
暂无数据 暂无数据
</p> </p>
)}
</div> </div>
); );
} }

75
src/page/HomePage/Right/RightUp1/index.tsx
View File

@@ -1,21 +1,70 @@
import { useState, useEffect } from 'react';
import TitleBox from "../../Component/TitleBox"; import TitleBox from "../../Component/TitleBox";
// import { useAppSelector } from "../../../../store/hooks"; import moment from 'moment';
// import { selectEqRateAVA } from "../../../../store/HomePageSlice";
function RightUp1() { 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 ( return (
<div className="left_up1"> <div className="left_up1">
<TitleBox title="running_time5" /> <TitleBox title="running_time5" />
<div style={{position:'absolute',left:'55px',top:'64px'}}> <RuntimeDisplay start={startDate} end={endDate} />
<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>
<div className="left_up1_tip">窑炉运行时间<span style={{display: 'inline-block',lineHeight: '27px',verticalAlign: 'top',margin: '0 5px'}}>.</span>五线</div> <div className="left_up1_tip">窑炉运行时间<span style={{display: 'inline-block',lineHeight: '27px',verticalAlign: 'top',margin: '0 5px'}}>.</span>五线</div>
</div> </div>
); );

39
src/page/HomePage/Right/RightUp2/index.tsx
View File

@@ -1,16 +1,39 @@
import TitleBox from "../../Component/TitleBox"; import TitleBox from "../../Component/TitleBox";
import img1 from "../../../../assets/image/press_img.png" import img1 from "../../../../assets/image/press_img.png"
// import { useAppSelector } from "../../../../store/hooks"; import { useAppSelector } from "../../../../store/hooks";
// import { selectEqRateAVA } from "../../../../store/HomePageSlice"; import { selectOtherFive } from "../../../../store/HomePageSlice";
function RightUp2() { function LeftUp2() {
// const data = useAppSelector(selectEqRateAVA); 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 ( return (
<div className="left_up1"> <div className="left_up1">
<TitleBox title="pressure5" /> <TitleBox title="pressure5" />
<div style={{position:'absolute',left:'26px',top:'64px'}}> <div style={{position:'absolute',left:'26px',top:'64px'}}>
<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>
<span className="left_down1_numbg">-</span>
</>
):<DigitalDisplay value={data}/>
}
<span style={{fontSize:'30px',color:'#fff'}}>Kpa</span> <span style={{fontSize:'30px',color:'#fff'}}>Kpa</span>
</div> </div>
<div className="left_up2_tip">窑炉压力值</div> <div className="left_up2_tip">窑炉压力值</div>
@@ -18,4 +41,4 @@ function RightUp2() {
</div> </div>
); );
} }
export default RightUp2; export default LeftUp2;

28
src/store/HomePageSlice.ts
View File

@@ -2,13 +2,19 @@ import { createSlice } from "@reduxjs/toolkit";
import type { RootState } from "./store"; import type { RootState } from "./store";
export interface HomePageSliceInterface { export interface HomePageSliceInterface {
lineChart: any; lineChart: any;
lineChartFive: any;
fan:any; fan:any;
fanFive:any;
otherMsg:any; otherMsg:any;
otherMsgFive:any;
} }
const initialState: HomePageSliceInterface = { const initialState: HomePageSliceInterface = {
lineChart: {}, lineChart: {},
lineChartFive: {},
fan:[], fan:[],
otherMsg:{} fanFive:[],
otherMsg:{},
otherMsgFive:{}
}; };
export const HomePageSlice = createSlice({ export const HomePageSlice = createSlice({
name: "HomePageSlice", name: "HomePageSlice",
@@ -17,25 +23,43 @@ export const HomePageSlice = createSlice({
UpdateLineChart: (state, action) => { UpdateLineChart: (state, action) => {
state.lineChart = action.payload; state.lineChart = action.payload;
}, },
UpdateLineChartFive: (state, action) => {
state.lineChartFive = action.payload;
},
UpdateFan: (state, action) => { UpdateFan: (state, action) => {
state.fan = action.payload; state.fan = action.payload;
}, },
UpdateFanFive: (state, action) => {
state.fanFive = action.payload;
},
UpdateOther: (state, action) => { UpdateOther: (state, action) => {
state.otherMsg = action.payload; state.otherMsg = action.payload;
},
UpdateOtherFive: (state, action) => {
state.otherMsgFive = action.payload;
} }
}, },
}); });
export const { export const {
UpdateLineChart, UpdateLineChart,
UpdateLineChartFive,
UpdateFan, UpdateFan,
UpdateOther UpdateFanFive,
UpdateOther,
UpdateOtherFive
} = HomePageSlice.actions; } = HomePageSlice.actions;
export const selectLineChart = (state: RootState) => export const selectLineChart = (state: RootState) =>
state.HomePageSlice.lineChart; state.HomePageSlice.lineChart;
export const selectLineChartFive = (state: RootState) =>
state.HomePageSlice.lineChartFive;
export const selectFan = (state: RootState) => export const selectFan = (state: RootState) =>
state.HomePageSlice.fan; state.HomePageSlice.fan;
export const selectFanFive = (state: RootState) =>
state.HomePageSlice.fanFive;
export const selectOther = (state: RootState) => export const selectOther = (state: RootState) =>
state.HomePageSlice.otherMsg; state.HomePageSlice.otherMsg;
export const selectOtherFive = (state: RootState) =>
state.HomePageSlice.otherMsgFive;
export default HomePageSlice.reducer; export default HomePageSlice.reducer;

107
src/store/UpdateData.tsx
View File

@@ -1,5 +1,4 @@
// import { useState } from "react"; import { useEffect, useRef } from "react";
// import axios from "axios";
import { import {
UpdateLineChart, UpdateLineChart,
UpdateFan, UpdateFan,
@@ -8,60 +7,72 @@ import {
import { useAppDispatch } from "./hooks"; import { useAppDispatch } from "./hooks";
function UpdateData() { function UpdateData() {
// const [myUrl, setUrl] = useState(""); const dispatch = useAppDispatch();
// axios.get("/wsconfig.json").then((r) => { const websocketRef = useRef<WebSocket | null>(null);
// setUrl(r.data.url); const myUrl = "172.16.20.35:8081";
// });
// 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");
};
interface MsgDataType { interface MsgDataType {
type: string; type: string;
data?: unknown;
} }
// const [msgData, setMsgData] = useState<MsgDataType | null>(null);
//接收到消息的回调方法 useEffect(() => {
// @ts-ignore if (!("WebSocket" in window)) {
websocketHome.onmessage = function (event) { alert("Not support websocket");
// console.log("接收到消息：", event); return;
let msgData: MsgDataType = { type: "example" };
try {
msgData = JSON.parse(event.data);
} catch (error) {
console.log("websocket: [unable to msgData] : ", event.data);
} }
if (!msgData) return;
switch (msgData?.type) { const websocketHome = new WebSocket("ws://" + myUrl + "/dj-screen/websocket/1");
case "one": { websocketRef.current = websocketHome;
// @ts-ignore
dispatch(UpdateLineChart(msgData.data)); websocketHome.onopen = function () {
break; 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 // @ts-ignore
dispatch(UpdateFan(msgData.data)); dispatch(UpdateFan(msgData.data));
break; break;
} }
case "three": { case "three": {
// @ts-ignore // @ts-ignore
dispatch(UpdateOther(msgData.data)); dispatch(UpdateOther(msgData.data));
break; break;
}
default:
break;
} }
default: };
}
}; websocketHome.onerror = function (event) {
const dispatch = useAppDispatch(); 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; return null;
} }

81
src/store/UpdateDataFive.tsx Normal file
View File

@@ -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;