add centermenu

src/components/BottomBar/gasi/index.jsx

@@ -9,7 +9,7 @@ import SocketContext from '../../../store/socket-data-provider';
 
 function GasI(props) {
 	const [showChart, setShowChart] = useState(true);
-	const { runState } = useContext(SocketContext);
+	const { runState, hisState } = useContext(SocketContext);
 
 	const dataList = runState?.combustionAirFlow
 		? [
@@ -35,9 +35,9 @@ function GasI(props) {
 				{ 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],
+	const seriesData = hisState?.combustionAir
+		? Object.keys(hisState.combustionAir).map(
+				(key) => hisState.combustionAir[key],
 		  )
 		: Array(8).fill(Array(7).fill(0));
 

src/components/CenterTopData/CenterMenu/index.jsx

@@ -0,0 +1,5 @@
+import cls from './index.module.less';
+
+export default function CenterMenu() {
+	return <div className={cls.centerMenu}>cetner menu</div>;
+}

src/components/CenterTopData/CenterMenu/index.module.less

@@ -0,0 +1,9 @@
+.centerMenu {
+	position: fixed;
+	top: 80px;
+	left: 240px;
+	height: 200px;
+	width: 1000px;
+	background: #1ed65278;
+	color: white;
+}

src/components/CenterTopData/index.jsx

@@ -1,19 +1,22 @@
-import React from 'react'
+import React from 'react';
+import CenterMenu from './CenterMenu';
+import Item2 from './RightTable';
+import Item1 from './LeftBoxes';
 
-import Item2 from './RightTable'
-import Item1 from './LeftBoxes'
-
-import cls from './index.module.less'
+import cls from './index.module.less';
 
 export default function index() {
-  return (
-    <div className='flex justify-between w-full h-full'>
-      <div className={cls.leftGrid}>
-        <Item1 />
-      </div>
-      <div className={cls.rightTable}>
-        <Item2 />
-      </div>
-    </div>
-  )
+	return (
+		<>
+			<CenterMenu />
+			<div className="flex justify-between w-full h-full">
+				<div className={cls.leftGrid}>
+					<Item1 />
+				</div>
+				<div className={cls.rightTable}>
+					<Item2 />
+				</div>
+			</div>
+		</>
+	);
 }

src/components/RightBar/EnergyCost/index.jsx

@@ -12,7 +12,7 @@ function EnergyCost(props) {
 						className={`${cls.info__item} ${cls.hAuto} flex flex-col justify-center items-center self-stretch`}
 					>
 						<span>余 热 发 电</span>
-						<span>922kwh</span>
+						<span>922kWh</span>
 					</div>
 					<div className={cls.info__item_groups}>
 						<div className={cls.info__item}>水 耗 量 : 32Km³</div>

src/store/socket-data-provider.js

@@ -7,13 +7,16 @@ export const SocketContextProvider = (props) => {
 	const [hisState, setHisState] = useState(null);
 
 	useEffect(() => {
-		const socket = new WebSocket('ws://172.16.1.55:8081/xc-screen/websocket/1');
+		// const socket = new WebSocket('ws://172.16.1.55:8081/xc-screen/websocket/1');
+		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);
+				console.log('[ws] data ===> ', e.data);
 				if (e.data == '连接成功') return;
 				let incommingData = JSON.parse(e.data);
 				switch (incommingData.type) {
@@ -23,6 +26,7 @@ export const SocketContextProvider = (props) => {
 						break;
 					case 'HisData':
 						console.log('his data arrived, set HisData');
+						// setHisState(prevHisState => ({ ...prevHisState, ...incommingData.data }));
 						setHisState(incommingData.data);
 						break;
 				}