From a634439ac28a3848ba183d614f31cc78667a0083 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期五, 01 三月 2024 08:50:55 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/map/index.css | 9 --
zy-asrs-flow/src/pages/map/index.jsx | 133 +++++++++++++++++++-------------------------
2 files changed, 59 insertions(+), 83 deletions(-)
diff --git a/zy-asrs-flow/src/pages/map/index.css b/zy-asrs-flow/src/pages/map/index.css
index f32a8af..8988633 100644
--- a/zy-asrs-flow/src/pages/map/index.css
+++ b/zy-asrs-flow/src/pages/map/index.css
@@ -3,11 +3,6 @@
padding-inline: 0;
}
-.ant-pro-page-container-children-container-no-header {
- padding-block-start: 0;
- padding-inline: 0;
-}
-
-.ant-pro-page-container-children-container {
- padding-block-end: 0;
+.ant-layout {
+ min-height: 50vh;
}
\ 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 bbda2ef..8883d9c 100644
--- a/zy-asrs-flow/src/pages/map/index.jsx
+++ b/zy-asrs-flow/src/pages/map/index.jsx
@@ -1,92 +1,73 @@
import * as React from 'react'
import * as PIXI from 'pixi.js';
-import './index.css'
-import {
- PageContainer,
-} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
-import { Layout, Flex } from 'antd';
-const { Header, Footer, Sider, Content } = Layout;
+import { Layout } from 'antd';
+const { Header, Content } = Layout;
+import './index.css'
+import { createStyles } from 'antd-style';
+const useStyles = createStyles(({ token }) => {
+ return {
+ layout: {
+ overflow: 'hidden',
+ },
+ header: {
+ textAlign: 'center',
+ color: '#fff',
+ height: 64,
+ paddingInline: 48,
+ lineHeight: '64px',
+ backgroundColor: '#4096ff',
+ },
+ content: {
+ color: '#fff',
+ backgroundColor: '#0958d9',
+ height: 'calc(100vh - 120px)'
+ }
+ };
+});
const Map = () => {
- // const { initialState, setInitialState } = useModel('@@initialState');
- // console.log(initialState);
- // const mapRef = React.useRef();
- // const [app, setApp] = React.useState(() => {
- // return new PIXI.Application({
- // background: '#f5f6fa',
- // antialias: true,
- // })
- // })
+ const { initialState, setInitialState } = useModel('@@initialState');
+ const { styles } = useStyles();
- // React.useEffect(() => {
-
- // // resize
- // const onResize = () => {
- // if (mapRef) {
- // const width = mapRef.current.offsetWidth;
- // const height = window.innerHeight - 92;
- // app.renderer.resize(width, height);
- // }
- // }
- // window.addEventListener('resize', onResize);
- // onResize();
-
- // // app init
- // app.stage.interactive = true;
- // app.stage.hitArea = app.screen;
- // globalThis.__PIXI_APP__ = app;
- // mapRef.current.appendChild(app.view);
-
- // }, []);
-
+ const mapRef = React.useRef();
const contentRef = React.useRef();
+ const [app, setApp] = React.useState(() => {
+ return new PIXI.Application({
+ background: '#10ac84',
+ antialias: true,
+ })
+ })
React.useEffect(() => {
- console.log(contentRef.current);
- console.log(contentRef.current.offsetHeight);
- }, [])
+ // resize
+ const onResize = () => {
+ if (mapRef) {
+ const width = contentRef.current.offsetWidth;
+ const height = contentRef.current.offsetHeight;
+ app.renderer.resize(width, height);
+ }
+ }
+ window.addEventListener('resize', onResize);
+ onResize();
+
+ // app init
+ app.stage.interactive = true;
+ app.stage.hitArea = app.screen;
+ globalThis.__PIXI_APP__ = app;
+ mapRef.current.appendChild(app.view);
+
+ }, []);
return (
<>
- {/* <PageContainer
- header={{
- title: false,
- subTitle: false,
- breadcrumb: {},
- }}
- style={{ height: '100%', padding: 0, backgroundColor:'blue' }} // Here
-
- >
- <div
- style={{ width: '100%', height: '100%' }}
- ref={mapRef}
- >
- </div>
- </PageContainer> */}
- <Layout style={{
- overflow: 'hidden',
- height: 'calc(100vh - 360px)',
- maxHeight: 'calc(100vh - 360px)'
- }}>
- <Header style={{
- textAlign: 'center',
- color: '#fff',
- height: 58,
- paddingInline: 48,
- lineHeight: '64px',
- backgroundColor: '#4096ff',
- }}>Header</Header>
- <Content ref={contentRef} style={{
- textAlign: 'center',
- minHeight: 120,
- lineHeight: '120px',
- color: '#fff',
- backgroundColor: '#0958d9',
- height: 'calc(100vh - 360px - 64px)', // <----- 杩欓噷璁剧疆Content鐨勯珮搴�
-
- }}>Content</Content>
+ <Layout className={styles.layout}>
+ <Header className={styles.header}>Header</Header>
+ <Content ref={contentRef} className={styles.content}>
+ <div ref={mapRef}>
+ </div>
+ </Content>
</Layout>
</>
)
--
Gitblit v1.9.1