From 5da0dddb821a533c71e54d5ce959cb7655367be0 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期五, 01 三月 2024 08:31:03 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/map/index.css | 4 +-
zy-asrs-flow/src/pages/map/index.jsx | 93 +++++++++++++++++++++++++++++++---------------
2 files changed, 65 insertions(+), 32 deletions(-)
diff --git a/zy-asrs-flow/src/pages/map/index.css b/zy-asrs-flow/src/pages/map/index.css
index bb6afbb..f32a8af 100644
--- a/zy-asrs-flow/src/pages/map/index.css
+++ b/zy-asrs-flow/src/pages/map/index.css
@@ -1,6 +1,6 @@
.ant-pro-layout .ant-pro-layout-content {
- padding-block: 15px;
- padding-inline: 15px;
+ padding-block: 0;
+ padding-inline: 0;
}
.ant-pro-page-container-children-container-no-header {
diff --git a/zy-asrs-flow/src/pages/map/index.jsx b/zy-asrs-flow/src/pages/map/index.jsx
index 8d43961..bbda2ef 100644
--- a/zy-asrs-flow/src/pages/map/index.jsx
+++ b/zy-asrs-flow/src/pages/map/index.jsx
@@ -4,49 +4,59 @@
import {
PageContainer,
} from '@ant-design/pro-components';
-// import { FormattedMessage, useIntl, useModel } from '@umijs/max';
+import { FormattedMessage, useIntl, useModel } from '@umijs/max';
+import { Layout, Flex } from 'antd';
+const { Header, Footer, Sider, Content } = Layout;
+
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 mapRef = React.useRef();
+ // const [app, setApp] = React.useState(() => {
+ // return new PIXI.Application({
+ // background: '#f5f6fa',
+ // antialias: true,
+ // })
+ // })
+
+ // 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 contentRef = React.useRef();
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);
-
- }, []);
+ console.log(contentRef.current);
+ console.log(contentRef.current.offsetHeight);
+ }, [])
return (
<>
- <PageContainer
+ {/* <PageContainer
header={{
title: false,
subTitle: false,
breadcrumb: {},
}}
- style={{ height: '100%', padding: 0 }} // Here
+ style={{ height: '100%', padding: 0, backgroundColor:'blue' }} // Here
>
<div
@@ -54,7 +64,30 @@
ref={mapRef}
>
</div>
- </PageContainer>
+ </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>
</>
)
}
--
Gitblit v1.9.1