mt-fe-group/xuchang-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add socket

Browse Source
This commit is contained in:
lb 2023-07-03 14:17:11 +08:00
parent 6d7e8de0ed
commit e728ec582e
11 changed files with 484 additions and 357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/Store/features/SliceBase.js
View File

@ -1,11 +0,0 @@
class Stack {
constructor() {
this.items = []
};
push(value) {
return this.items.push(value);
};
pop() {
return this.items;
};
}

0
src/Store/index.js
View File

75
src/components/BottomBar/gasi/index.jsx
View File

@ -3,13 +3,29 @@ import BottomBarItem from '../BottomBarItem';
import ReactECharts from 'echarts-for-react'; import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { randomInt } from '../../../utils'; import { randomInt } from '../../../utils';
import { useState } from 'react';
import { Switch } from 'antd'; import { Switch } from 'antd';
import { useState, useContext } from 'react';
import SocketContext from '../../../store/socket-data-provider';
function GasI(props) { function GasI(props) {
const [showChart, setShowChart] = useState(true); const [showChart, setShowChart] = useState(true);
const { runState } = useContext(SocketContext);
const dataList = [ const dataList = runState?.combustionAirFlow
? [
{ id: 1, name: '1#助燃风', value: '122m³/h' },
{ id: 2, name: '2#助燃风', value: '200m³/h' },
{ id: 3, name: '3#助燃风', value: '112m³/h' },
{ id: 4, name: '4#助燃风', value: '189m³/h' },
{ id: 5, name: '5#助燃风', value: '109m³/h' },
{ id: 6, name: '6#助燃风', value: '167m³/h' },
{ id: 7, name: '7#助燃风', value: '172m³/h' },
{ id: 8, name: '8#助燃风', value: '145m³/h' },
].map((item, index) => ({
...item,
value: runState.combustionAirFlow[index],
}))
: [
{ id: 1, name: '1#助燃风', value: '122m³/h' }, { id: 1, name: '1#助燃风', value: '122m³/h' },
{ id: 2, name: '2#助燃风', value: '200m³/h' }, { id: 2, name: '2#助燃风', value: '200m³/h' },
{ id: 3, name: '3#助燃风', value: '112m³/h' }, { id: 3, name: '3#助燃风', value: '112m³/h' },
@ -19,9 +35,24 @@ function GasI(props) {
{ id: 7, name: '7#助燃风', value: '172m³/h' }, { id: 7, name: '7#助燃风', value: '172m³/h' },
{ id: 8, name: '8#助燃风', value: '145m³/h' }, { id: 8, name: '8#助燃风', value: '145m³/h' },
]; ];
const seriesData = runState?.combustionAir
? Object.keys(runState.combustionAir).map(
(key) => runState.combustionAir[key],
)
: Array(8).fill(Array(7).fill(0));
const colors = [
'#12FFF5',
'#2760FF',
'#FFD160',
'#E80091',
'#8064ff',
'#ff8a3b',
'#8cd26d',
'#2aa1ff',
];
const options = { const options = {
color: ['#12FFF5', '#2760FF', '#FFD160'], color: colors,
grid: { top: 32, right: 12, bottom: 20, left: 48 }, grid: { top: 32, right: 12, bottom: 20, left: 48 },
xAxis: { xAxis: {
type: 'category', type: 'category',
@ -75,24 +106,36 @@ function GasI(props) {
min: 0, min: 0,
max: 100, max: 100,
}, },
series: [ series: seriesData.map((v, i) => ({
{ name: i + 1 + '#助燃风',
data: Array(7) data: v,
.fill(1)
.map((_) => {
return randomInt(60, 100);
}),
type: 'line', type: 'line',
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#12FFF540' }, { offset: 0, color: colors[i] + '40' },
{ offset: 0.5, color: '#12FFF520' }, { offset: 0.5, color: colors[i] + '20' },
{ offset: 1, color: '#12FFF510' }, { offset: 1, color: colors[i] + '00' },
]), ]),
}, },
// smooth: true, })),
}, // [
], // {
// data: Array(7)
// .fill(1)
// .map((_) => {
// return randomInt(60, 100);
// }),
// type: 'line',
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: '#12FFF540' },
// { offset: 0.5, color: '#12FFF520' },
// { offset: 1, color: '#12FFF510' },
// ]),
// },
// // smooth: true,
// },
// ],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
}, },

323
src/components/BottomBar/gasii/gasChart/chart.config.js
View File

@ -1,8 +1,8 @@
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { randomInt } from '../../../../utils'; import { randomInt } from '../../../../utils';
export default { export default function getOptions(seriesData, name) {
color: [ const colors = [
'#12FFF5', '#12FFF5',
'#2760FF', '#2760FF',
'#FFD160', '#FFD160',
@ -11,7 +11,9 @@ export default {
'#ff8a3b', '#ff8a3b',
'#8cd26d', '#8cd26d',
'#2aa1ff', '#2aa1ff',
], ];
return {
color: colors,
grid: { top: 38, right: 12, bottom: 20, left: 48 }, grid: { top: 38, right: 12, bottom: 20, left: 48 },
legend: { legend: {
show: true, show: true,
@ -80,163 +82,176 @@ export default {
// min: 0, // min: 0,
// max: 100, // max: 100,
}, },
series: [ series: seriesData.map((arr, index) => ({
{ name: index + 1 + '#' + name,
name: '1#天然气I', data: arr,
data: Array(7)
.fill(1)
.map((_) => {
return randomInt(1000, 2000);
}),
type: 'line', type: 'line',
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#12FFF540' }, { offset: 0, color: colors[index] + '40' },
{ offset: 0.5, color: '#12FFF520' }, { offset: 0.5, color: colors[index] + '20' },
{ offset: 1, color: '#12FFF510' }, { offset: 1, color: colors[index] + '00' },
]), ]),
}, },
// smooth: true, })),
}, // [
{ // {
name: '2#天然气I', // name: '1#天然气I',
data: Array(7) // data: Array(7)
.fill(1) // .fill(1)
.map((_) => { // .map((_) => {
return randomInt(1000, 2000); // return randomInt(1000, 2000);
}), // }),
type: 'line', // type: 'line',
areaStyle: { // areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2760FF40' }, // { offset: 0, color: '#12FFF540' },
{ offset: 0.5, color: '#2760FF20' }, // { offset: 0.5, color: '#12FFF520' },
{ offset: 1, color: '#2760FF10' }, // { offset: 1, color: '#12FFF510' },
]), // ]),
}, // },
// smooth: true, // // smooth: true,
}, // },
{ // {
name: '3#天然气I', // name: '2#天然气I',
data: Array(7) // data: Array(7)
.fill(1) // .fill(1)
.map((_) => { // .map((_) => {
return randomInt(1000, 2000); // return randomInt(1000, 2000);
}), // }),
type: 'line', // type: 'line',
areaStyle: { // areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FFD16040' }, // { offset: 0, color: '#2760FF40' },
{ offset: 0.5, color: '#FFD16020' }, // { offset: 0.5, color: '#2760FF20' },
{ // { offset: 1, color: '#2760FF10' },
offset: 1, // ]),
color: '#FFD16010', // },
}, // // smooth: true,
]), // },
}, // {
// smooth: true, // name: '3#天然气I',
}, // data: Array(7)
{ // .fill(1)
name: '4#天然气I', // .map((_) => {
data: Array(7) // return randomInt(1000, 2000);
.fill(1) // }),
.map((_) => { // type: 'line',
return randomInt(1000, 2000); // areaStyle: {
}), // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
type: 'line', // { offset: 0, color: '#FFD16040' },
areaStyle: { // { offset: 0.5, color: '#FFD16020' },
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // {
{ offset: 0, color: '#E8009140' }, // offset: 1,
{ // color: '#FFD16010',
offset: 0.5, // },
color: '#E8009120', // ]),
}, // },
{ offset: 1, color: '#E8009110' }, // // smooth: true,
]), // },
}, // {
// smooth: true, // name: '4#天然气I',
}, // data: Array(7)
{ // .fill(1)
name: '5#天然气I', // .map((_) => {
data: Array(7) // return randomInt(1000, 2000);
.fill(1) // }),
.map((_) => { // type: 'line',
return randomInt(1000, 2000); // areaStyle: {
}), // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
type: 'line', // { offset: 0, color: '#E8009140' },
areaStyle: { // {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // offset: 0.5,
{ offset: 0, color: '#8064ff40' }, // color: '#E8009120',
{ // },
offset: 0.5, // { offset: 1, color: '#E8009110' },
color: '#8064ff20', // ]),
}, // },
{ offset: 1, color: '#8064ff10' }, // // smooth: true,
]), // },
}, // {
// smooth: true, // name: '5#天然气I',
}, // data: Array(7)
{ // .fill(1)
name: '6#天然气I', // .map((_) => {
data: Array(7) // return randomInt(1000, 2000);
.fill(1) // }),
.map((_) => { // type: 'line',
return randomInt(1000, 2000); // areaStyle: {
}), // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
type: 'line', // { offset: 0, color: '#8064ff40' },
areaStyle: { // {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // offset: 0.5,
{ offset: 0, color: '#ff8a3b40' }, // color: '#8064ff20',
{ // },
offset: 0.5, // { offset: 1, color: '#8064ff10' },
color: '#ff8a3b20', // ]),
}, // },
{ offset: 1, color: '#ff8a3b10' }, // // smooth: true,
]), // },
}, // {
// smooth: true, // name: '6#天然气I',
}, // data: Array(7)
{ // .fill(1)
name: '7#天然气I', // .map((_) => {
data: Array(7) // return randomInt(1000, 2000);
.fill(1) // }),
.map((_) => { // type: 'line',
return randomInt(1000, 2000); // areaStyle: {
}), // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
type: 'line', // { offset: 0, color: '#ff8a3b40' },
areaStyle: { // {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // offset: 0.5,
{ offset: 0, color: '#8cd26d40' }, // color: '#ff8a3b20',
{ // },
offset: 0.5, // { offset: 1, color: '#ff8a3b10' },
color: '#8cd26d20', // ]),
}, // },
{ offset: 1, color: '#8cd26d10' }, // // smooth: true,
]), // },
}, // {
// smooth: true, // name: '7#天然气I',
}, // data: Array(7)
{ // .fill(1)
name: '8#天然气I', // .map((_) => {
data: Array(7) // return randomInt(1000, 2000);
.fill(1) // }),
.map((_) => { // type: 'line',
return randomInt(1000, 2000); // areaStyle: {
}), // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
type: 'line', // { offset: 0, color: '#8cd26d40' },
areaStyle: { // {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // offset: 0.5,
{ offset: 0, color: '#2aa1ff40' }, // color: '#8cd26d20',
{ // },
offset: 0.5, // { offset: 1, color: '#8cd26d10' },
color: '#2aa1ff20', // ]),
}, // },
{ offset: 1, color: '#2aa1ff10' }, // // smooth: true,
]), // },
}, // {
// smooth: true, // name: '8#天然气I',
}, // data: Array(7)
], // .fill(1)
// .map((_) => {
// return randomInt(1000, 2000);
// }),
// type: 'line',
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: '#2aa1ff40' },
// {
// offset: 0.5,
// color: '#2aa1ff20',
// },
// { offset: 1, color: '#2aa1ff10' },
// ]),
// },
// // smooth: true,
// },
// ],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
}, },
}; };
}

28
src/components/BottomBar/gasii/gasChart/index.jsx
View File

@ -1,13 +1,33 @@
import cls from './index.module.css'; import cls from './index.module.css';
import ReactECharts from 'echarts-for-react'; import ReactECharts from 'echarts-for-react';
import options from './chart.config'; import getOptions from './chart.config';
import SocketContext from '../../../../store/socket-data-provider';
const tConfig = {}; import { useContext } from 'react';
function GasChart(props) { function GasChart(props) {
const { dataSource } = props;
const { hisState } = useContext(SocketContext);
console.log('his state', hisState);
const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2';
const seriesData = hisState?.[dataName]
? Object.keys(hisState?.[dataName]).map(
(key, index) => hisState?.[dataName][key],
)
: Array(dataSource == 'gas-i' ? 8 : 5).fill(Array(7).fill(0));
console.log('series data ===> ', seriesData);
return ( return (
<div className={cls.gasChart}> <div className={cls.gasChart}>
<ReactECharts option={options} style={{ height: '100%' }} /> <ReactECharts
key={Math.random()}
option={getOptions(
seriesData,
dataSource == 'gas-i' ? '天然气I' : '天然气II',
)}
style={{ height: '100%' }}
/>
</div> </div>
); );
} }

29
src/components/CenterTopData/LeftBoxes/index.jsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState, useContext } from 'react';
import SocketContext from '../../../store/socket-data-provider';
import icon1 from '@/assets/CenterChart2icon1.svg'; import icon1 from '@/assets/CenterChart2icon1.svg';
import icon2 from '@/assets/CenterChart2icon2.svg'; import icon2 from '@/assets/CenterChart2icon2.svg';
import icon3 from '@/assets/CenterChart2icon3.svg'; import icon3 from '@/assets/CenterChart2icon3.svg';
@ -8,12 +8,25 @@ import icon4 from '@/assets/CenterChart2icon4.svg';
import cls from './leftbox.module.less'; import cls from './leftbox.module.less';
const Chart2 = () => { const Chart2 = () => {
const [data, setData] = useState([ const ctx = useContext(SocketContext);
{ icon: icon1, label: '换火时间', value: '08:34' },
{ icon: icon3, label: '剩余时间', value: '1170s' }, const data = [
{ icon: icon2, label: '当前火向', value: '南向' }, {
// { icon: icon4, label: '车间温度', value: '28℃' }, icon: icon1,
]); label: '换火时间',
value: ctx.runState?.fireChangeTime || '00:00',
},
{
icon: icon3,
label: '剩余时间',
value: ctx.runState?.lastFireChangeTime.split('S')[0] + 's' || '0s',
},
{
icon: icon2,
label: '当前火向',
value: ctx.runState?.fireDirection || '东火',
},
];
return ( return (
<div className={`${cls.leftbox} flex h-half`}> <div className={`${cls.leftbox} flex h-half`}>

90
src/components/LeftBar/Kiln.jsx
View File

@ -1,52 +1,37 @@
import React from 'react'; import React from 'react';
import { useState, useEffect, useContext } from 'react';
import { useState, useEffect } from 'react';
// import { motion } from 'framer-motion';
import Container from '../Container'; import Container from '../Container';
// import Item from './substitutionCharts/Chart1.jsx'; import SocketContext from '../../store/socket-data-provider';
// import Icon from '../../assets/Icon/LeftrChart1ICon.png'
// import Icon1 from '../../assets/ButtonChart7Icon1.svg';
// import Icon2 from '../../assets/ButtonChart7Icon2.svg';
import cls from './kiln.module.less'; import cls from './kiln.module.less';
// var Data1 = {
// 冷水管温度: '3℃',
// 主线冷水管水压: ' 500Pa',
// 冷管流量: '800m³',
// };
// var Data2 = {
// 冷水管温度: '8℃',
// 主线冷水管水压: ' 900Pa',
// 冷管流量: '400m³',
// };
// //循环的参数
// var Number = 1;
export default function Kiln() { export default function Kiln() {
const [infos, setInfos] = useState([ const ctx = useContext(SocketContext);
{ label: '窑炉压力', value: '29KPa' }, console.log('use ctx', ctx);
{ label: '循环水温度', value: '59℃' },
{ label: '循环水流量', value: '59㎡/h' },
{ label: '循环水压力', value: '34KPa' },
{ label: '窑温', value: '59℃' },
{ label: '压缩器压力', value: '293Pa' },
{ label: '水分', value: '12%' },
{ label: '助燃风', value: '122' },
]);
// useEffect(() => { // const [infos, setInfos] = useState([
// setInterval(() => { // { label: '窑炉压力', value: '29KPa' },
// Number = Number + 1 // { label: '循环水温度', value: '59℃' },
// setNum(Number % 2) // { label: '循环水流量', value: '59㎡/h' },
// if (Number == 3) { // { label: '循环水压力', value: '34KPa' },
// Number = 1 // { label: '窑温', value: '59℃' },
// } // { label: '压缩器压力', value: '293Pa' },
// }, 10000) // { label: '水分', value: '12%' },
// }, []) // { label: '助燃风', value: '122' },
// const [num, setNum] = useState(1) // ]);
const infos = [
{ label: '窑炉压力', value: ctx.runState?.kilnPressure || '0Pa' },
{ label: '循环水温度', value: ctx.runState?.waterTemp || '0℃' },
{ label: '循环水流量', value: ctx.runState?.waterFlow || '0㎡/h' },
{ label: '循环水压力', value: ctx.runState?.waterPressure || '0Pa' },
{ label: '助燃风压力', value: ctx.runState?.combustionAirPressure || '0℃' },
{ label: '碹顶加权温度', value: ctx.runState?.topTemp || '0℃' },
{
label: '压缩气压力',
value: ctx.runState?.compressedAirPressure || '0Pa',
},
{ label: '融化加权温度', value: ctx.runState?.meltTemp || '0℃' },
];
return ( return (
<Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}> <Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
@ -57,25 +42,6 @@ export default function Kiln() {
</div> </div>
))} ))}
</div> </div>
{/* <div className='LeftChart1ItemBorder'>
<div className='LeftChart1ItemRow'>
<div className='LeftChart1ItemRowDetail'> */}
{/* <img src={Icon1} alt="" /> */}
{/* <h2 className='LeftChart1ItemRowDetailTxt'>水泵水管</h2>
</div>
<Item data={num == 1 ? Data1 : Data2} />
</div>
<div className='LeftChart1ItemRow'></div>
<div className='LeftChart1ItemRow'>
<div className='LeftChart1ItemRowDetail'>
<img src={Icon2} alt="" />
<h2 className='LeftChart1ItemRowDetailTxt'>氢气</h2>
</div>
<Item data={num == 1 ? Data1 : Data2} />
</div>
<div className='LeftChart1ItemRow'></div>
</div> */}
</Container> </Container>
); );
} }

6
src/components/LeftBar/substitutionCharts/GoodRateChart/overwrite.css
View File

@ -17,6 +17,12 @@
background: #02457e !important; background: #02457e !important;
} }
.ant-switch {
background: #004782 !important;
}
.ant-switch .ant-switch-handle::before {
background-color: #00233f !important;
}
.ant-switch-checked { .ant-switch-checked {
background: #b4fffdb1 !important; background: #b4fffdb1 !important;
} }

4
src/pages/index.jsx
View File

@ -13,11 +13,14 @@ import V3DBG from '../assets/V3DBG.png';
import V3D from './V3D'; import V3D from './V3D';
import { SocketContextProvider } from '../store/socket-data-provider';
export default function index() { export default function index() {
const [width, setWidth] = useState(window.innerWidth); const [width, setWidth] = useState(window.innerWidth);
return ( return (
// <FullScreenContainer> // <FullScreenContainer>
<SocketContextProvider>
<div id="FullScreen"> <div id="FullScreen">
<Head /> <Head />
<div className="Main"> <div className="Main">
@ -35,6 +38,7 @@ export default function index() {
<RightBar /> <RightBar />
</div> </div>
</div> </div>
</SocketContextProvider>
// </FullScreenContainer> // </FullScreenContainer>
); );
} }

42
src/store/socket-data-provider.js Normal file
View File

@ -0,0 +1,42 @@
import { useState, useEffect } from 'react';
const SocketContext = React.createContext();
export const SocketContextProvider = (props) => {
const [runState, setRunState] = useState(null);
const [hisState, setHisState] = useState(null);
useEffect(() => {
const socket = new WebSocket(
'ws://192.168.1.12:8081/xc-screen/websocket/1',
);
socket.onopen = () => {
console.log('[*] socket connected!');
};
socket.onmessage = (e) => {
if ('data' in e) {
console.log('data ===> ', e.data);
if (e.data == '连接成功') return;
let incommingData = JSON.parse(e.data);
switch (incommingData.type) {
case 'RunData':
console.log('run data arrived, set RunData');
setRunState(incommingData.data);
break;
case 'HisData':
console.log('his data arrived, set HisData');
setHisState(incommingData.data);
break;
}
}
};
}, []);
return (
<SocketContext.Provider value={{ runState, hisState }}>
{props.children}
</SocketContext.Provider>
);
};
export default SocketContext;

29
src/utils/index.js
View File

@ -6,3 +6,32 @@ export function randomInt(min, max, includeMax = false) {
} }
return num; return num;
} }
export class WsClient {
static wsServer = 'ws://192.168.1.12:8081/xc-screen/websocket/1';
static socket = null;
static tryCount = 0;
init() {
if (WsClient.socket) return;
WsClient.socket = new WebSocket(WsClient.wsServer);
WsClient.socket.onopen = () => {
console.log('[*] websocket connected!');
};
WsClient.socket.onmessage = (e) => {
console.log('[*] websocket message!', e, e.data);
};
WsClient.socket.onerror = (e) => {
console.log('[*] websocket erro!', e, e.data);
};
WsClient.socket.onclose = (e) => {
let timer = setTimeout(() => {
if (WsClient.tryCount < 3) {
const wsc = new WsClient();
wsc.init();
WsClient.tryCount += 1;
} else clearTimeout(timer);
}, 30000);
};
}
}