projectMessage.jsx 2.69 KB
Newer Older
shaoan123's avatar
shaoan123 committed
1
import { Button,Spin } from 'antd';
2 3 4
import React, { useState, useEffect } from 'react';
import styles from '../SchemeConfig.less'
import {
shaoan123's avatar
shaoan123 committed
5
    GetMaplayerByTerminalType
6 7
} from '@/services/webConfig/api';
import AddModal from './AddModal'
8
import Cards from './components/card'
9 10 11 12
const VectorData = props => {
    const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示
    const [tileData, setTileData] = useState([]); // 页面初始化数据
    const [visible, setVisible] = useState(false); // 弹窗
13
    const [flag, setFlag] = useState(0); // 状态更新
14
    const [type, setType] = useState(''); // 弹窗类型
15 16 17 18 19
    const [formObj, setFormObj] = useState({});


    const onSubmit = prop => {
        setVisible(false);
shaoan123's avatar
shaoan123 committed
20
        setFlag(flag + 1)
21
    };
22
    const onDeletebaseMap = (value) => {
shaoan123's avatar
shaoan123 committed
23
        setFlag(flag + 1)
24 25 26 27 28 29 30
    }
    const handleAdd = () => {
        setType('schemeAdd');
        setVisible(true);
    }
    useEffect(() => {
        renderTile();
shaoan123's avatar
shaoan123 committed
31
    }, [flag]);
32 33 34
    // 获取瓦片数据配置数据
    const renderTile = () => {
        setTreeLoading(true);
shaoan123's avatar
shaoan123 committed
35
        GetMaplayerByTerminalType({
36 37 38 39
            terminalType: 'scheme',
            isBaseMap: false
        }).then(
            res => {
shaoan123's avatar
shaoan123 committed
40 41
                console.log('res',res);
                if (res.msg ==='Ok') {
42
                    setTreeLoading(false);
shaoan123's avatar
shaoan123 committed
43
                    setTileData(res.data.scheme.optionalLayer.layers);
44 45
                } else {
                    setTreeLoading(false);
46

47 48 49 50 51 52
                }
            }
        )
    };
    return (
        <>
shaoan123's avatar
shaoan123 committed
53
         <Spin tip="loading..." spinning={treeLoading}>
54
            <div style={{ width: 'calc(100vw - 265px)' }}>
55 56 57 58 59 60 61
                <div className={styles.tileBtn}>
                    <Button type="primary" onClick={() => {
                        handleAdd();
                    }} >
                        新增
                </Button>
                </div>
62
                <div className={styles.cardsList}>
63 64
                    {tileData && tileData.length ?
                        tileData.map((item, index) => {
shaoan123's avatar
shaoan123 committed
65 66
                            return <div className={styles.cardItem} key={index} span={5} offset={2} style={{ marginBottom: '1rem' }}>
                                <Cards item={item} deletebaseMaps={onDeletebaseMap} ></Cards>
67
                            </div>
68
                        }) : ''}
69
                </div >
70 71 72 73 74 75 76 77
                <AddModal
                    visible={visible}
                    onCancel={() => setVisible(false)}
                    callBackSubmit={onSubmit}
                    type={type}
                    formObj={formObj}
                />
            </div>
shaoan123's avatar
shaoan123 committed
78
            </Spin>
79 80 81 82
        </>
    )
}
export default VectorData