add centermenu
This commit is contained in:
parent
8d134803b7
commit
1062775867
@ -9,7 +9,7 @@ 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 { runState, hisState } = useContext(SocketContext);
|
||||||
|
|
||||||
const dataList = runState?.combustionAirFlow
|
const dataList = runState?.combustionAirFlow
|
||||||
? [
|
? [
|
||||||
@ -35,9 +35,9 @@ 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
|
const seriesData = hisState?.combustionAir
|
||||||
? Object.keys(runState.combustionAir).map(
|
? Object.keys(hisState.combustionAir).map(
|
||||||
(key) => runState.combustionAir[key],
|
(key) => hisState.combustionAir[key],
|
||||||
)
|
)
|
||||||
: Array(8).fill(Array(7).fill(0));
|
: Array(8).fill(Array(7).fill(0));
|
||||||
|
|
||||||
|
5
src/components/CenterTopData/CenterMenu/index.jsx
Normal file
5
src/components/CenterTopData/CenterMenu/index.jsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import cls from './index.module.less';
|
||||||
|
|
||||||
|
export default function CenterMenu() {
|
||||||
|
return <div className={cls.centerMenu}>cetner menu</div>;
|
||||||
|
}
|
@ -0,0 +1,9 @@
|
|||||||
|
.centerMenu {
|
||||||
|
position: fixed;
|
||||||
|
top: 80px;
|
||||||
|
left: 240px;
|
||||||
|
height: 200px;
|
||||||
|
width: 1000px;
|
||||||
|
background: #1ed65278;
|
||||||
|
color: white;
|
||||||
|
}
|
@ -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 cls from './index.module.less';
|
||||||
import Item1 from './LeftBoxes'
|
|
||||||
|
|
||||||
import cls from './index.module.less'
|
|
||||||
|
|
||||||
export default function index() {
|
export default function index() {
|
||||||
return (
|
return (
|
||||||
<div className='flex justify-between w-full h-full'>
|
<>
|
||||||
<div className={cls.leftGrid}>
|
<CenterMenu />
|
||||||
<Item1 />
|
<div className="flex justify-between w-full h-full">
|
||||||
</div>
|
<div className={cls.leftGrid}>
|
||||||
<div className={cls.rightTable}>
|
<Item1 />
|
||||||
<Item2 />
|
</div>
|
||||||
</div>
|
<div className={cls.rightTable}>
|
||||||
</div>
|
<Item2 />
|
||||||
)
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
@ -12,7 +12,7 @@ function EnergyCost(props) {
|
|||||||
className={`${cls.info__item} ${cls.hAuto} flex flex-col justify-center items-center self-stretch`}
|
className={`${cls.info__item} ${cls.hAuto} flex flex-col justify-center items-center self-stretch`}
|
||||||
>
|
>
|
||||||
<span>余 热 发 电</span>
|
<span>余 热 发 电</span>
|
||||||
<span>922kwh</span>
|
<span>922kWh</span>
|
||||||
</div>
|
</div>
|
||||||
<div className={cls.info__item_groups}>
|
<div className={cls.info__item_groups}>
|
||||||
<div className={cls.info__item}>水 耗 量 : 32Km³</div>
|
<div className={cls.info__item}>水 耗 量 : 32Km³</div>
|
||||||
|
@ -7,13 +7,16 @@ export const SocketContextProvider = (props) => {
|
|||||||
const [hisState, setHisState] = useState(null);
|
const [hisState, setHisState] = useState(null);
|
||||||
|
|
||||||
useEffect(() => {
|
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 = () => {
|
socket.onopen = () => {
|
||||||
console.log('[*] socket connected!');
|
console.log('[*] socket connected!');
|
||||||
};
|
};
|
||||||
socket.onmessage = (e) => {
|
socket.onmessage = (e) => {
|
||||||
if ('data' in e) {
|
if ('data' in e) {
|
||||||
console.log('data ===> ', e.data);
|
console.log('[ws] data ===> ', e.data);
|
||||||
if (e.data == '连接成功') return;
|
if (e.data == '连接成功') return;
|
||||||
let incommingData = JSON.parse(e.data);
|
let incommingData = JSON.parse(e.data);
|
||||||
switch (incommingData.type) {
|
switch (incommingData.type) {
|
||||||
@ -23,6 +26,7 @@ export const SocketContextProvider = (props) => {
|
|||||||
break;
|
break;
|
||||||
case 'HisData':
|
case 'HisData':
|
||||||
console.log('his data arrived, set HisData');
|
console.log('his data arrived, set HisData');
|
||||||
|
// setHisState(prevHisState => ({ ...prevHisState, ...incommingData.data }));
|
||||||
setHisState(incommingData.data);
|
setHisState(incommingData.data);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user