#

luxiaotao1123

2024-03-01 a634439ac28a3848ba183d614f31cc78667a0083

#

 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;
}

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