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 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: 1, name: '1#助燃风', value: '122m³/h' },
|
||||||
{ id: 3, name: '3#助燃风', value: '112m³/h' },
|
{ id: 2, name: '2#助燃风', value: '200m³/h' },
|
||||||
{ id: 4, name: '4#助燃风', value: '189m³/h' },
|
{ id: 3, name: '3#助燃风', value: '112m³/h' },
|
||||||
{ id: 5, name: '5#助燃风', value: '109m³/h' },
|
{ id: 4, name: '4#助燃风', value: '189m³/h' },
|
||||||
{ id: 6, name: '6#助燃风', value: '167m³/h' },
|
{ id: 5, name: '5#助燃风', value: '109m³/h' },
|
||||||
{ id: 7, name: '7#助燃风', value: '172m³/h' },
|
{ id: 6, name: '6#助燃风', value: '167m³/h' },
|
||||||
{ id: 8, name: '8#助燃风', value: '145m³/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 = {
|
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)
|
type: 'line',
|
||||||
.map((_) => {
|
areaStyle: {
|
||||||
return randomInt(60, 100);
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
}),
|
{ offset: 0, color: colors[i] + '40' },
|
||||||
type: 'line',
|
{ offset: 0.5, color: colors[i] + '20' },
|
||||||
areaStyle: {
|
{ offset: 1, color: colors[i] + '00' },
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
]),
|
||||||
{ offset: 0, color: '#12FFF540' },
|
|
||||||
{ offset: 0.5, color: '#12FFF520' },
|
|
||||||
{ offset: 1, color: '#12FFF510' },
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
// 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',
|
||||||
},
|
},
|
||||||
|
@ -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,232 +11,247 @@ export default {
|
|||||||
'#ff8a3b',
|
'#ff8a3b',
|
||||||
'#8cd26d',
|
'#8cd26d',
|
||||||
'#2aa1ff',
|
'#2aa1ff',
|
||||||
],
|
];
|
||||||
grid: { top: 38, right: 12, bottom: 20, left: 48 },
|
return {
|
||||||
legend: {
|
color: colors,
|
||||||
show: true,
|
grid: { top: 38, right: 12, bottom: 20, left: 48 },
|
||||||
icon: 'roundRect',
|
legend: {
|
||||||
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: {
|
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
icon: 'roundRect',
|
||||||
color: '#213259',
|
top: 10,
|
||||||
|
right: 10,
|
||||||
|
padding: 0,
|
||||||
|
itemWidth: 8,
|
||||||
|
itemHeight: 8,
|
||||||
|
itemGap: 3,
|
||||||
|
height: 8,
|
||||||
|
textStyle: {
|
||||||
|
color: '#DFF1FE',
|
||||||
|
fontSize: 10,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
splitLine: {
|
xAxis: {
|
||||||
lineStyle: {
|
type: 'category',
|
||||||
color: '#213259a0',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// interval: 10,
|
|
||||||
// min: 0,
|
|
||||||
// max: 100,
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '1#天然气I',
|
|
||||||
data: Array(7)
|
data: Array(7)
|
||||||
.fill(1)
|
.fill(1)
|
||||||
.map((_) => {
|
.map((_, index) => {
|
||||||
return randomInt(1000, 2000);
|
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',
|
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: '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 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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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`}>
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -13,28 +13,32 @@ import V3DBG from '../assets/V3DBG.png';
|
|||||||
|
|
||||||
import V3D from './V3D';
|
import V3D from './V3D';
|
||||||
|
|
||||||
export default function index() {
|
import { SocketContextProvider } from '../store/socket-data-provider';
|
||||||
const [width, setWidth] = useState(window.innerWidth);
|
|
||||||
|
|
||||||
return (
|
export default function index() {
|
||||||
// <FullScreenContainer>
|
const [width, setWidth] = useState(window.innerWidth);
|
||||||
<div id="FullScreen">
|
|
||||||
<Head />
|
return (
|
||||||
<div className="Main">
|
// <FullScreenContainer>
|
||||||
<LeftBar />
|
<SocketContextProvider>
|
||||||
<div className="Center">
|
<div id="FullScreen">
|
||||||
<div className="CenterData">
|
<Head />
|
||||||
<CenterTopData />
|
<div className="Main">
|
||||||
</div>
|
<LeftBar />
|
||||||
<img src={V3DBG} alt="图片加载错误" className="V3DBG" />
|
<div className="Center">
|
||||||
<div className="V3DBorder">{/* <V3D /> */}</div>
|
<div className="CenterData">
|
||||||
<div className="Button">
|
<CenterTopData />
|
||||||
<BottomBar />
|
</div>
|
||||||
</div>
|
<img src={V3DBG} alt="图片加载错误" className="V3DBG" />
|
||||||
</div>
|
<div className="V3DBorder">{/* <V3D /> */}</div>
|
||||||
<RightBar />
|
<div className="Button">
|
||||||
</div>
|
<BottomBar />
|
||||||
</div>
|
</div>
|
||||||
// </FullScreenContainer>
|
</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;
|
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