#

luxiaotao1123

2024-03-04 df1c45d77732cb7c9f3e593380ba72b5d55794f3

#

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

@@ -1,8 +1,13 @@
import * as React from 'react'
import * as PIXI from 'pixi.js';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import { Layout, Button, Flex, } from 'antd';
import { Layout, Button, Flex, Row, Col, FloatButton } from 'antd';
const { Header, Content } = Layout;
import {
    AppstoreAddOutlined,
    FileAddOutlined,
    CompressOutlined,
} from '@ant-design/icons';
import './index.css'
import { createStyles } from 'antd-style';
import Edit from './components/edit'
@@ -29,7 +34,7 @@
        content: {
            backgroundColor: '#F8FAFB',
            height: 'calc(100vh - 120px)'
        }
        },
    };
});

@@ -87,12 +92,47 @@
        <>
            <Layout className={styles.layout}>
                <Header className={styles.header}>
                    <Flex className={styles.flex} gap={'large'} justify={'flex-end'} align={'center'}>
                        <Button onClick={editHandle} size={'large'}><FormattedMessage id='map.edit' defaultMessage='编辑地图' /></Button>
                    </Flex>
                    <Row style={{ height: '100%' }}>
                        <Col span={8} style={{ backgroundColor: '#C8C7C5', }}></Col>
                        <Col span={16} style={{ backgroundColor: '#002FA7', }}>
                            <Flex className={styles.flex} gap={'large'} justify={'flex-end'} align={'center'}>
                                <Button onClick={editHandle} size={'large'}><FormattedMessage id='map.edit' defaultMessage='编辑地图' /></Button>
                            </Flex>
                        </Col>
                    </Row>


                </Header>
                <Content ref={contentRef} className={styles.content}>
                    <div ref={mapRef} style={{ position: "relative" }} />

                    <FloatButton.Group
                        shape="square"
                        style={{
                            left: 35,
                            bottom: 35
                        }}
                    >
                        <FloatButton
                            icon={<CompressOutlined />}
                        />
                        <FloatButton.BackTop visibilityHeight={0} />
                    </FloatButton.Group>

                    <FloatButton.Group
                        trigger="hover"
                        style={{
                            right: 35,
                            bottom: 35
                        }}
                        icon={<AppstoreAddOutlined />}
                    >
                        <FloatButton
                            tooltip={<div><FormattedMessage id='map.edit' defaultMessage='编辑地图' /></div>}
                            icon={<FileAddOutlined />}
                            onClick={editHandle}
                        />
                    </FloatButton.Group>
                </Content>
            </Layout>