From d835d1b51f832889929cdf69010034a30ef44d02 Mon Sep 17 00:00:00 2001
From: Junjie <xjj@123>
Date: 星期四, 17 十月 2024 13:57:29 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/map/index.jsx | 83 +++++++++++++++++++++++++++++++++++++----
1 files changed, 74 insertions(+), 9 deletions(-)
diff --git a/zy-asrs-flow/src/pages/map/index.jsx b/zy-asrs-flow/src/pages/map/index.jsx
index 3da9f60..8407a6d 100644
--- a/zy-asrs-flow/src/pages/map/index.jsx
+++ b/zy-asrs-flow/src/pages/map/index.jsx
@@ -1,20 +1,21 @@
import * as React from 'react'
-import * as PIXI from 'pixi.js';
+import * as TWEEDLE from 'tweedle.js';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
-import { Layout, Button, Flex, Row, Col, FloatButton, Select, notification, Segmented } from 'antd';
+import { Layout, Button, Flex, Row, Col, FloatButton, Select, notification, Segmented, message, Popconfirm } from 'antd';
const { Header, Content } = Layout;
import {
AppstoreAddOutlined,
FileAddOutlined,
CompressOutlined,
SettingOutlined,
- CloseOutlined
} from '@ant-design/icons';
import './index.css'
import { createStyles } from 'antd-style';
import Edit from './components/device';
+import Http from '@/utils/http';
import Settings from './components/settings'
import * as Utils from './utils'
+import WebSocketClient from './websocket'
import Player from './player';
import MapSearch from './header/search';
import MapFloor from './header/floor';
@@ -60,7 +61,7 @@
SETTINGS_MODEL: "3",
})
-let player;
+let player, websocket;
const Map = () => {
const intl = useIntl();
@@ -85,9 +86,12 @@
const [dataFetched, setDataFetched] = React.useState(false);
const [curSprite, setCurSPrite] = React.useState(null);
const prevCurSpriteRef = React.useRef();
- const hasFloor = true;
- // const [hasFloor, setHasFloor] = React.useState(true);
- const [curFloor, setCurFloor] = React.useState(1);
+ const [floorList, setFloorList] = React.useState([]);
+ const [curFloor, setCurFloor] = React.useState(() => {
+ const storedValue = localStorage.getItem('curFloor');
+ return storedValue !== null ? JSON.parse(storedValue) : null;
+ });
+ const curFloorRef = React.useRef(curFloor);
const [batchSprites, setBatchSprites] = React.useState([]);
const [batchDrawerVisible, setBatchDrawerVisible] = React.useState(false);
@@ -101,6 +105,12 @@
Utils.syncMapContainer(player.mapContainer);
Utils.syncNotify(notify);
+ websocket = new WebSocketClient('/ws/map/websocket');
+ websocket.connect();
+ websocket.onMessage = (data) => {
+ Utils.updateMapStatusInRealTime(data, () => curFloorRef.current, setCurSPrite);
+ }
+
const handleResize = () => {
setWindowSize({
width: window.innerWidth,
@@ -109,7 +119,11 @@
};
window.addEventListener('resize', handleResize);
- await Utils.fetchMapData(curFloor);
+ const mapFloorData = await Utils.fetchMapFloor();
+ setFloorList(mapFloorData);
+ let defaultFloor = curFloor || mapFloorData?.[0]?.value;
+ setCurFloor(defaultFloor);
+ await Utils.fetchMapData(defaultFloor);
setDataFetched(true);
setModel(MapModel.OBSERVER_MODEL)
setTimeout(() => {
@@ -118,6 +132,13 @@
}, 200)
}
initialize();
+
+ return () => {
+ websocket.onMessage = (data) => { }
+ if (websocket) {
+ websocket.close();
+ }
+ }
}, []);
// resize
@@ -229,6 +250,29 @@
}, [curSprite]);
const prevCurSprite = prevCurSpriteRef.current;
+ const clearLockPathConfirm = (e) => {
+ clearLockPath(curFloor);
+ };
+
+ const clearLockPath = async (floor) => {
+ const hide = message.loading(intl.formatMessage({ id: 'page.clearing', defaultMessage: '姝ｅ湪娓呯┖' }));
+ try {
+ const resp = await Http.doGet('api/map/clearLockPath', { lev: floor });
+ if (resp.code === 200) {
+ message.success(intl.formatMessage({ id: 'page.clearing.success', defaultMessage: '娓呯┖鎴愬姛' }));
+ return true;
+ } else {
+ message.error(resp.msg);
+ return false;
+ }
+ } catch (error) {
+ message.error(intl.formatMessage({ id: 'page.clearing.fail', defaultMessage: '娓呯┖澶辫触璇烽噸璇曪紒' }));
+ return false;
+ } finally {
+ hide();
+ }
+ }
+
// fn switch floor
const switchFloor = async (floor) => {
await Utils.fetchMapData(floor);
@@ -242,10 +286,12 @@
// watch curFloor
React.useEffect(() => {
+ curFloorRef.current = curFloor;
if (!mapContainer && !dataFetched) {
return;
}
switchFloor(curFloor);
+ localStorage.setItem('curFloor', JSON.stringify(curFloor));
}, [curFloor]);
// watch spriteBySettings
@@ -291,6 +337,7 @@
model={model}
setModel={setModel}
ModelEnum={MapModel}
+ curFloor={curFloor}
curSprite={curSprite}
setCurSPrite={setCurSPrite}
setSpriteBySettings={setSpriteBySettings}
@@ -302,6 +349,22 @@
{model === MapModel.OBSERVER_MODEL && (
<>
+ <Popconfirm
+ title="娓呯┖璺緞"
+ description="姝ゆ搷浣滃彲鑳藉鑷村皬杞︾鎾烇紝纭娓呯┖璺緞鍚楋紵"
+ onConfirm={clearLockPathConfirm}
+ okText="纭"
+ cancelText="鍙栨秷"
+ >
+ <Button
+ className='map-header-button'
+ size={'large'}
+ >
+ <FormattedMessage id='map.clearLockPath' defaultMessage='娓呯┖璺緞' />
+ </Button>
+ </Popconfirm>
+
+
<Button
className='map-header-button'
size={'large'}
@@ -363,8 +426,9 @@
<Content ref={contentRef} className={styles.content}>
<div ref={mapRef} />
- {hasFloor && (
+ {floorList.length > 0 && (
<MapFloor
+ floorList={floorList}
curFloor={curFloor}
setCurFloor={setCurFloor}
/>
@@ -423,6 +487,7 @@
<MapDrawer
open={drawerVisible}
curSprite={curSprite}
+ curFloor={curFloor}
refCurr={mapRef.current}
onCancel={() => {
setCurSPrite(null);
--
Gitblit v1.9.1