#

luxiaotao1123

2024-03-01 5da0dddb821a533c71e54d5ce959cb7655367be0

#

 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 {

 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>
        </>
    )
}