add socket
This commit is contained in:
parent
6d7e8de0ed
commit
e728ec582e
@ -1,11 +0,0 @@
|
||||
class Stack {
|
||||
constructor() {
|
||||
this.items = []
|
||||
};
|
||||
push(value) {
|
||||
return this.items.push(value);
|
||||
};
|
||||
pop() {
|
||||
return this.items;
|
||||
};
|
||||
}
|
@ -3,25 +3,56 @@ import BottomBarItem from '../BottomBarItem';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import * as echarts from 'echarts';
|
||||
import { randomInt } from '../../../utils';
|
||||
import { useState } from 'react';
|
||||
import { Switch } from 'antd';
|
||||
import { useState, useContext } from 'react';
|
||||
import SocketContext from '../../../store/socket-data-provider';
|
||||
|
||||
function GasI(props) {
|
||||
const [showChart, setShowChart] = useState(true);
|
||||
const { runState } = useContext(SocketContext);
|
||||
|
||||
const dataList = [
|
||||
{ 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' },
|
||||
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: 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' },
|
||||
];
|
||||
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 = {
|
||||
color: ['#12FFF5', '#2760FF', '#FFD160'],
|
||||
color: colors,
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@ -75,24 +106,36 @@ function GasI(props) {
|
||||
min: 0,
|
||||
max: 100,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map((_) => {
|
||||
return randomInt(60, 100);
|
||||
}),
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#12FFF540' },
|
||||
{ offset: 0.5, color: '#12FFF520' },
|
||||
{ offset: 1, color: '#12FFF510' },
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
series: seriesData.map((v, i) => ({
|
||||
name: i + 1 + '#助燃风',
|
||||
data: v,
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: colors[i] + '40' },
|
||||
{ offset: 0.5, color: colors[i] + '20' },
|
||||
{ offset: 1, color: colors[i] + '00' },
|
||||
]),
|
||||
},
|
||||
],
|
||||
})),
|
||||
// [
|
||||
// {
|
||||
// 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: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
|
@ -1,8 +1,8 @@
|
||||
import * as echarts from 'echarts';
|
||||
import { randomInt } from '../../../../utils';
|
||||
|
||||
export default {
|
||||
color: [
|
||||
export default function getOptions(seriesData, name) {
|
||||
const colors = [
|
||||
'#12FFF5',
|
||||
'#2760FF',
|
||||
'#FFD160',
|
||||
@ -11,232 +11,247 @@ export default {
|
||||
'#ff8a3b',
|
||||
'#8cd26d',
|
||||
'#2aa1ff',
|
||||
],
|
||||
grid: { top: 38, right: 12, bottom: 20, left: 48 },
|
||||
legend: {
|
||||
show: true,
|
||||
icon: 'roundRect',
|
||||
top: 10,
|
||||
right: 10,
|
||||
padding: 0,
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
itemGap: 3,
|
||||
height: 8,
|
||||
textStyle: {
|
||||
color: '#DFF1FE',
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map((_, index) => {
|
||||
const today = new Date();
|
||||
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
|
||||
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||||
dtimestamp,
|
||||
).getDate()}`;
|
||||
})
|
||||
.reverse(),
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#213259',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位m³/h',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
align: 'right',
|
||||
},
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
];
|
||||
return {
|
||||
color: colors,
|
||||
grid: { top: 38, right: 12, bottom: 20, left: 48 },
|
||||
legend: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#213259',
|
||||
icon: 'roundRect',
|
||||
top: 10,
|
||||
right: 10,
|
||||
padding: 0,
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
itemGap: 3,
|
||||
height: 8,
|
||||
textStyle: {
|
||||
color: '#DFF1FE',
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259a0',
|
||||
},
|
||||
},
|
||||
// interval: 10,
|
||||
// min: 0,
|
||||
// max: 100,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '1#天然气I',
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map((_) => {
|
||||
return randomInt(1000, 2000);
|
||||
}),
|
||||
.map((_, index) => {
|
||||
const today = new Date();
|
||||
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
|
||||
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||||
dtimestamp,
|
||||
).getDate()}`;
|
||||
})
|
||||
.reverse(),
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#213259',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位m³/h',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
align: 'right',
|
||||
},
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#213259',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259a0',
|
||||
},
|
||||
},
|
||||
// interval: 10,
|
||||
// min: 0,
|
||||
// max: 100,
|
||||
},
|
||||
series: seriesData.map((arr, index) => ({
|
||||
name: index + 1 + '#' + name,
|
||||
data: arr,
|
||||
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' },
|
||||
{ offset: 0, color: colors[index] + '40' },
|
||||
{ offset: 0.5, color: colors[index] + '20' },
|
||||
{ offset: 1, color: colors[index] + '00' },
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
})),
|
||||
// [
|
||||
// {
|
||||
// name: '1#天然气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: '#12FFF540' },
|
||||
// { offset: 0.5, color: '#12FFF520' },
|
||||
// { offset: 1, color: '#12FFF510' },
|
||||
// ]),
|
||||
// },
|
||||
// // smooth: true,
|
||||
// },
|
||||
// {
|
||||
// name: '2#天然气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: '#2760FF40' },
|
||||
// { offset: 0.5, color: '#2760FF20' },
|
||||
// { offset: 1, color: '#2760FF10' },
|
||||
// ]),
|
||||
// },
|
||||
// // smooth: true,
|
||||
// },
|
||||
// {
|
||||
// name: '3#天然气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: '#FFD16040' },
|
||||
// { offset: 0.5, color: '#FFD16020' },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: '#FFD16010',
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
// // smooth: true,
|
||||
// },
|
||||
// {
|
||||
// name: '4#天然气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: '#E8009140' },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: '#E8009120',
|
||||
// },
|
||||
// { offset: 1, color: '#E8009110' },
|
||||
// ]),
|
||||
// },
|
||||
// // smooth: true,
|
||||
// },
|
||||
// {
|
||||
// name: '5#天然气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: '#8064ff40' },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: '#8064ff20',
|
||||
// },
|
||||
// { offset: 1, color: '#8064ff10' },
|
||||
// ]),
|
||||
// },
|
||||
// // smooth: true,
|
||||
// },
|
||||
// {
|
||||
// name: '6#天然气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: '#ff8a3b40' },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: '#ff8a3b20',
|
||||
// },
|
||||
// { offset: 1, color: '#ff8a3b10' },
|
||||
// ]),
|
||||
// },
|
||||
// // smooth: true,
|
||||
// },
|
||||
// {
|
||||
// name: '7#天然气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: '#8cd26d40' },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: '#8cd26d20',
|
||||
// },
|
||||
// { offset: 1, color: '#8cd26d10' },
|
||||
// ]),
|
||||
// },
|
||||
// // 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: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
{
|
||||
name: '2#天然气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: '#2760FF40' },
|
||||
{ offset: 0.5, color: '#2760FF20' },
|
||||
{ offset: 1, color: '#2760FF10' },
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
},
|
||||
{
|
||||
name: '3#天然气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: '#FFD16040' },
|
||||
{ offset: 0.5, color: '#FFD16020' },
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FFD16010',
|
||||
},
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
},
|
||||
{
|
||||
name: '4#天然气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: '#E8009140' },
|
||||
{
|
||||
offset: 0.5,
|
||||
color: '#E8009120',
|
||||
},
|
||||
{ offset: 1, color: '#E8009110' },
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
},
|
||||
{
|
||||
name: '5#天然气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: '#8064ff40' },
|
||||
{
|
||||
offset: 0.5,
|
||||
color: '#8064ff20',
|
||||
},
|
||||
{ offset: 1, color: '#8064ff10' },
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
},
|
||||
{
|
||||
name: '6#天然气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: '#ff8a3b40' },
|
||||
{
|
||||
offset: 0.5,
|
||||
color: '#ff8a3b20',
|
||||
},
|
||||
{ offset: 1, color: '#ff8a3b10' },
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
},
|
||||
{
|
||||
name: '7#天然气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: '#8cd26d40' },
|
||||
{
|
||||
offset: 0.5,
|
||||
color: '#8cd26d20',
|
||||
},
|
||||
{ offset: 1, color: '#8cd26d10' },
|
||||
]),
|
||||
},
|
||||
// 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: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
||||
|
@ -1,13 +1,33 @@
|
||||
import cls from './index.module.css';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import options from './chart.config';
|
||||
|
||||
const tConfig = {};
|
||||
import getOptions from './chart.config';
|
||||
import SocketContext from '../../../../store/socket-data-provider';
|
||||
import { useContext } from 'react';
|
||||
|
||||
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 (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
@ -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 icon2 from '@/assets/CenterChart2icon2.svg';
|
||||
import icon3 from '@/assets/CenterChart2icon3.svg';
|
||||
@ -8,12 +8,25 @@ import icon4 from '@/assets/CenterChart2icon4.svg';
|
||||
import cls from './leftbox.module.less';
|
||||
|
||||
const Chart2 = () => {
|
||||
const [data, setData] = useState([
|
||||
{ icon: icon1, label: '换火时间', value: '08:34' },
|
||||
{ icon: icon3, label: '剩余时间', value: '1170s' },
|
||||
{ icon: icon2, label: '当前火向', value: '南向' },
|
||||
// { icon: icon4, label: '车间温度', value: '28℃' },
|
||||
]);
|
||||
const ctx = useContext(SocketContext);
|
||||
|
||||
const data = [
|
||||
{
|
||||
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 (
|
||||
<div className={`${cls.leftbox} flex h-half`}>
|
||||
|
@ -1,52 +1,37 @@
|
||||
import React from 'react';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
// import { motion } from 'framer-motion';
|
||||
import { useState, useEffect, useContext } from 'react';
|
||||
import Container from '../Container';
|
||||
// import Item from './substitutionCharts/Chart1.jsx';
|
||||
|
||||
// import Icon from '../../assets/Icon/LeftrChart1ICon.png'
|
||||
// import Icon1 from '../../assets/ButtonChart7Icon1.svg';
|
||||
// import Icon2 from '../../assets/ButtonChart7Icon2.svg';
|
||||
|
||||
import SocketContext from '../../store/socket-data-provider';
|
||||
import cls from './kiln.module.less';
|
||||
|
||||
// var Data1 = {
|
||||
// 冷水管温度: '3℃',
|
||||
// 主线冷水管水压: ' 500Pa',
|
||||
// 冷管流量: '800m³',
|
||||
// };
|
||||
|
||||
// var Data2 = {
|
||||
// 冷水管温度: '8℃',
|
||||
// 主线冷水管水压: ' 900Pa',
|
||||
// 冷管流量: '400m³',
|
||||
// };
|
||||
// //循环的参数
|
||||
// var Number = 1;
|
||||
|
||||
export default function Kiln() {
|
||||
const [infos, setInfos] = useState([
|
||||
{ label: '窑炉压力', value: '29KPa' },
|
||||
{ label: '循环水温度', value: '59℃' },
|
||||
{ label: '循环水流量', value: '59㎡/h' },
|
||||
{ label: '循环水压力', value: '34KPa' },
|
||||
{ label: '窑温', value: '59℃' },
|
||||
{ label: '压缩器压力', value: '293Pa' },
|
||||
{ label: '水分', value: '12%' },
|
||||
{ label: '助燃风', value: '122' },
|
||||
]);
|
||||
const ctx = useContext(SocketContext);
|
||||
console.log('use ctx', ctx);
|
||||
|
||||
// useEffect(() => {
|
||||
// setInterval(() => {
|
||||
// Number = Number + 1
|
||||
// setNum(Number % 2)
|
||||
// if (Number == 3) {
|
||||
// Number = 1
|
||||
// }
|
||||
// }, 10000)
|
||||
// }, [])
|
||||
// const [num, setNum] = useState(1)
|
||||
// const [infos, setInfos] = useState([
|
||||
// { label: '窑炉压力', value: '29KPa' },
|
||||
// { label: '循环水温度', value: '59℃' },
|
||||
// { label: '循环水流量', value: '59㎡/h' },
|
||||
// { label: '循环水压力', value: '34KPa' },
|
||||
// { label: '窑温', value: '59℃' },
|
||||
// { label: '压缩器压力', value: '293Pa' },
|
||||
// { label: '水分', value: '12%' },
|
||||
// { label: '助燃风', value: '122' },
|
||||
// ]);
|
||||
|
||||
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 (
|
||||
<Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
|
||||
@ -57,25 +42,6 @@ export default function Kiln() {
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
@ -17,6 +17,12 @@
|
||||
background: #02457e !important;
|
||||
}
|
||||
|
||||
.ant-switch {
|
||||
background: #004782 !important;
|
||||
}
|
||||
.ant-switch .ant-switch-handle::before {
|
||||
background-color: #00233f !important;
|
||||
}
|
||||
.ant-switch-checked {
|
||||
background: #b4fffdb1 !important;
|
||||
}
|
||||
|
@ -13,28 +13,32 @@ import V3DBG from '../assets/V3DBG.png';
|
||||
|
||||
import V3D from './V3D';
|
||||
|
||||
export default function index() {
|
||||
const [width, setWidth] = useState(window.innerWidth);
|
||||
import { SocketContextProvider } from '../store/socket-data-provider';
|
||||
|
||||
return (
|
||||
// <FullScreenContainer>
|
||||
<div id="FullScreen">
|
||||
<Head />
|
||||
<div className="Main">
|
||||
<LeftBar />
|
||||
<div className="Center">
|
||||
<div className="CenterData">
|
||||
<CenterTopData />
|
||||
</div>
|
||||
<img src={V3DBG} alt="图片加载错误" className="V3DBG" />
|
||||
<div className="V3DBorder">{/* <V3D /> */}</div>
|
||||
<div className="Button">
|
||||
<BottomBar />
|
||||
</div>
|
||||
</div>
|
||||
<RightBar />
|
||||
</div>
|
||||
</div>
|
||||
// </FullScreenContainer>
|
||||
);
|
||||
export default function index() {
|
||||
const [width, setWidth] = useState(window.innerWidth);
|
||||
|
||||
return (
|
||||
// <FullScreenContainer>
|
||||
<SocketContextProvider>
|
||||
<div id="FullScreen">
|
||||
<Head />
|
||||
<div className="Main">
|
||||
<LeftBar />
|
||||
<div className="Center">
|
||||
<div className="CenterData">
|
||||
<CenterTopData />
|
||||
</div>
|
||||
<img src={V3DBG} alt="图片加载错误" className="V3DBG" />
|
||||
<div className="V3DBorder">{/* <V3D /> */}</div>
|
||||
<div className="Button">
|
||||
<BottomBar />
|
||||
</div>
|
||||
</div>
|
||||
<RightBar />
|
||||
</div>
|
||||
</div>
|
||||
</SocketContextProvider>
|
||||
// </FullScreenContainer>
|
||||
);
|
||||
}
|
||||
|
42
src/store/socket-data-provider.js
Normal file
42
src/store/socket-data-provider.js
Normal 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;
|
@ -6,3 +6,32 @@ export function randomInt(min, max, includeMax = false) {
|
||||
}
|
||||
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);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user