#

luxiaotao1123

2024-02-29 baa1fe3c601db2ea107fda607b5fc063a7424c1d

#

 zy-asrs-flow/src/pages/map/index.css

@@ -3,6 +3,11 @@
    padding-inline: 15px;
}

.ant-card .ant-card-body {
    padding: 15;
.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;
}

 zy-asrs-flow/src/pages/map/index.jsx

@@ -1,76 +1,57 @@
import * as React from 'react'
import * as PIXI from 'pixi.js';
import * as TWEEDLE from 'tweedle.js';
import { Button, message, Modal, Card } from 'antd';
import './index.css'
import {
    FooterToolbar,
    PageContainer,
    ProTable,
    LightFilter,
} from '@ant-design/pro-components';

const Map = () => {
    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',
            background: '#f5f6fa',
            antialias: true,
        })
    })

    React.useEffect(() => {

        // resize
        const onResize = () => {
            console.log(1);
            const width = mapRef.current.offsetWidth + 2;
            const height = window.innerHeight - 92;
            console.log(width, height);
            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);

        // return () => {
        //     app.destroy(true, true);
        //     window.removeEventListener('resize', onResize);
        // }
    }, []);

    return (
        <>
            <Card
                style={{ width: '100%', height: 'calc(100vh - 90px)' }}
            // tabList={[
            //     {
            //         key: 'zone',
            //         label: 'zone'
            //     }
            // ]}
            // activeTabKey={activeMap}
            // tabBarExtraContent={<Button>更多设置</Button>}
            // onTabChange={(key) => {
            //     setActiveMap(key);
            // }}
            // tabProps={{
            //     size: 'middle',
            // }}
            <PageContainer
                header={{
                    title: false,
                    subTitle: false,
                    breadcrumb: {},
                }}
                style={{ height: '100%', padding: 0 }} // Here

            >
                <div
                    style={{ width: '100%', height: '100%' }}
                    ref={mapRef}
                >
                </div>
            </Card>
            </PageContainer>
        </>
    )
}