mt-fe-group/xuchang-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add centermenu

Browse Source
This commit is contained in:
lb 2023-07-03 15:48:20 +08:00
parent 8d134803b7
commit 1062775867
6 changed files with 43 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/BottomBar/gasi/index.jsx
View File

@ -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
View File

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

9
src/components/CenterTopData/CenterMenu/index.module.less Normal file
View File

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

17
src/components/CenterTopData/index.jsx
View File

@ -1,13 +1,15 @@
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'> <>
<CenterMenu />
<div className="flex justify-between w-full h-full">
<div className={cls.leftGrid}> <div className={cls.leftGrid}>
<Item1 /> <Item1 />
</div> </div>
@ -15,5 +17,6 @@ export default function index() {
<Item2 /> <Item2 />
</div> </div>
</div> </div>
) </>
);
} }

2
src/components/RightBar/EnergyCost/index.jsx
View File

@ -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>

8
src/store/socket-data-provider.js
View File

@ -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;
} }