From 1683c5121d67ec8bc0284dbccc17fd2a08dad180 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期四, 29 二月 2024 14:56:07 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/map/index.css | 4 ++
zy-asrs-flow/src/pages/map/index.jsx | 71 ++++++++++++++++++++---------------
2 files changed, 44 insertions(+), 31 deletions(-)
diff --git a/zy-asrs-flow/src/pages/map/index.css b/zy-asrs-flow/src/pages/map/index.css
index ce7def3..b1326ee 100644
--- a/zy-asrs-flow/src/pages/map/index.css
+++ b/zy-asrs-flow/src/pages/map/index.css
@@ -1,4 +1,8 @@
.ant-pro-layout .ant-pro-layout-content {
padding-block: 15px;
padding-inline: 15px;
+}
+
+.ant-card .ant-card-body {
+ padding: 0;
}
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/map/index.jsx b/zy-asrs-flow/src/pages/map/index.jsx
index 1761be7..bd3f309 100644
--- a/zy-asrs-flow/src/pages/map/index.jsx
+++ b/zy-asrs-flow/src/pages/map/index.jsx
@@ -5,52 +5,61 @@
import './index.css'
const Map = () => {
- const map = React.useRef();
- const [activeMap, setActiveMap] = React.useState('zone')
-
- React.useEffect(() => {
- console.log(map.current);
- const app = new PIXI.Application({
- // width: window.innerWidth,
- // height: window.innerHeight,
- background: '#1099bb',
+ const mapRef = React.useRef();
+ const [activeMap, setActiveMap] = React.useState('zone');
+ const [app, setApp] = React.useState(() => {
+ return new PIXI.Application({
+ // width: window.innerWidth - 32,
+ // height: window.innerHeight - 92,
+ background: '#dcdde1',
antialias: true,
})
+ })
+ app.stage.interactive = true;
+ app.stage.hitArea = app.screen;
+ globalThis.__PIXI_APP__ = app;
+ mapRef.current.appendChild(app.view);
- app.stage.interactive = true;
- app.stage.hitArea = app.screen;
+ React.useEffect(() => {
+ const onResize = () => {
+ const width = mapRef.current.offsetWidth;
+ const height = window.innerHeight - 92;
+ console.log(width, height);
+ if (mapRef) {
+ app.renderer.resize(width, height);
+ }
+ }
+ window.addEventListener('resize', onResize);
+ onResize();
- globalThis.__PIXI_APP__ = app;
-
- map.current.appendChild(app.view);
-
return () => {
app.destroy(true, true);
+ window.removeEventListener('resize', onResize);
}
}, []);
return (
<>
<Card
- style={{ width: '100%', height: 'calc(100vh - 100px)' }}
- tabList={[
- {
- key: 'zone',
- label: 'zone'
- }
- ]}
- activeTabKey={activeMap}
- tabBarExtraContent={<Button>鏇村璁剧疆</Button>}
- onTabChange={(key) => {
- setActiveMap(key);
- }}
- tabProps={{
- size: 'middle',
- }}
+ style={{ width: '100%', height: 'calc(100vh - 90px)' }}
+ // tabList={[
+ // {
+ // key: 'zone',
+ // label: 'zone'
+ // }
+ // ]}
+ // activeTabKey={activeMap}
+ // tabBarExtraContent={<Button>鏇村璁剧疆</Button>}
+ // onTabChange={(key) => {
+ // setActiveMap(key);
+ // }}
+ // tabProps={{
+ // size: 'middle',
+ // }}
>
<div
style={{ width: '100%', height: '100%' }}
- ref={map}
+ ref={mapRef}
>
</div>
</Card>
--
Gitblit v1.9.1