diff --git a/src/Store/features/SliceBase.js b/src/Store/features/SliceBase.js
deleted file mode 100644
index 3e8ccbb..0000000
--- a/src/Store/features/SliceBase.js
+++ /dev/null
@@ -1,11 +0,0 @@
-class Stack {
- constructor() {
- this.items = []
- };
- push(value) {
- return this.items.push(value);
- };
- pop() {
- return this.items;
- };
-}
\ No newline at end of file
diff --git a/src/Store/index.js b/src/Store/index.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/BottomBar/gasi/index.jsx b/src/components/BottomBar/gasi/index.jsx
index 7d6e675..2bbf6ab 100644
--- a/src/components/BottomBar/gasi/index.jsx
+++ b/src/components/BottomBar/gasi/index.jsx
@@ -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',
},
diff --git a/src/components/BottomBar/gasii/gasChart/chart.config.js b/src/components/BottomBar/gasii/gasChart/chart.config.js
index df4e297..6f2cbc1 100644
--- a/src/components/BottomBar/gasii/gasChart/chart.config.js
+++ b/src/components/BottomBar/gasii/gasChart/chart.config.js
@@ -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',
- },
-};
+ };
+}
diff --git a/src/components/BottomBar/gasii/gasChart/index.jsx b/src/components/BottomBar/gasii/gasChart/index.jsx
index 5d4d506..6c30f3c 100644
--- a/src/components/BottomBar/gasii/gasChart/index.jsx
+++ b/src/components/BottomBar/gasii/gasChart/index.jsx
@@ -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 (
-
+
);
}
diff --git a/src/components/CenterTopData/LeftBoxes/index.jsx b/src/components/CenterTopData/LeftBoxes/index.jsx
index b343428..6a9482c 100644
--- a/src/components/CenterTopData/LeftBoxes/index.jsx
+++ b/src/components/CenterTopData/LeftBoxes/index.jsx
@@ -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 (
diff --git a/src/components/LeftBar/Kiln.jsx b/src/components/LeftBar/Kiln.jsx
index 7153db8..aa5d7ca 100644
--- a/src/components/LeftBar/Kiln.jsx
+++ b/src/components/LeftBar/Kiln.jsx
@@ -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 (
@@ -57,25 +42,6 @@ export default function Kiln() {
))}
-
- {/*
-
-
*/}
- {/*
*/}
- {/*
水泵水管
-
-
-
-
-
-
-
-
氢气
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{/* */}
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
{/* */}
+
+
+
+
+
+