TileConfig.jsx 6.09 KB
Newer Older
shaoan123's avatar
shaoan123 committed
1
import { Space, Table, Button, Popconfirm, notification, Spin } from 'antd';
shaoan123's avatar
shaoan123 committed
2
import React, { useState, useEffect } from 'react';
3 4
import styles from '../SchemeConfig.less'
import {
shaoan123's avatar
shaoan123 committed
5
    GettMaplayer,
6
    deleteConfig
7 8 9 10 11 12
} from '@/services/webConfig/api';
import AddModal from './AddModal'
const TileData = props => {
    const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示
    const [tileData, setTileData] = useState([]); // table表格数据
    const [visible, setVisible] = useState(false); // 弹窗
13
    const [type, setType] = useState(''); // 弹窗类型
14
    const [formObj, setFormObj] = useState({});
15 16
    const [flag, setFlag] = useState(0); // 弹窗类型
    const [baseMap, setBaseMap] = useState([]); //底图数据
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
    const columns = [
        {
            title: '服务名',
            dataIndex: 'servicename',
            key: 'servicename',
            align: 'center'
        },
        {
            title: '标签',
            dataIndex: 'label',
            key: 'label',
            align: 'center'
        },
        {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
            align: 'center'
        },
        {
            title: '透明度',
            dataIndex: 'alpha',
            key: 'alpha',
            align: 'center'
        },
        {
            title: '编辑',
            align: 'center',
            render: (text, record) => (
                <Space>
                    <Button
                        type="primary"
                        size="small"
                        onClick={() => {
                            changebaseMap(record);
                        }}
                    >
                        编辑
                </Button>
                    <div onClick={e => e.stopPropagation()}>
                        <Popconfirm
                            title="是否删除该底图?"
                            okText="确认"
                            cancelText="取消"
                            onConfirm={() => {
                                delConfirm(record);
                            }}
                        >
                            <Button size="small" danger>
                                删除
                            </Button>
                        </Popconfirm>
                    </div>
                </Space>
            ),
        },

    ];
    const changebaseMap = (record) => {
        setType('edit');
        setFormObj(record);
        setVisible(true);
    }
    const onSubmit = prop => {
        setVisible(false);
82
        setFlag(flag + 1)
83
    };
84

85
    const delConfirm = (record) => {
86 87
        const { servicename = '' } = record;
        setTreeLoading(true);
88
        deleteConfig({
89 90 91 92 93 94
            servicename: servicename,
            terminalType: 'base',
            isBaseMap: true
        }).then(res => {
            setFlag(flag + 1)
            setTreeLoading(false);
shaoan123's avatar
shaoan123 committed
95
            if (res.msg === 'Ok') {
96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113
                // form.resetFields();
                // callBackSubmit();
                notification.success({
                    message: '提示',
                    duration: 3,
                    description: res.message || '删除成功',
                });
            } else {
                notification.error({
                    message: '提示',
                    duration: 3,
                    description: res.message || '删除失败',
                });
            }
        }).catch(err => {
            setFlag(flag + 1)
            setTreeLoading(false);
        })
114
    }
115
    const handleAdd = () => {
shaoan123's avatar
shaoan123 committed
116
        if (baseMap.length) {
117 118 119
            setType('add');
            setVisible(true);
        }
shaoan123's avatar
shaoan123 committed
120
        else {
121 122 123 124
            notification.warning({
                message: '提示',
                duration: 3,
                description: '地图类型已都存在,可编辑修改',
shaoan123's avatar
shaoan123 committed
125
            });
126
        }
shaoan123's avatar
shaoan123 committed
127

128 129 130
    }
    useEffect(() => {
        renderTile();
131
    }, [flag]);
132 133 134
    // 获取瓦片数据配置数据
    const renderTile = () => {
        setTreeLoading(true);
135
        const baseMapData = ['高德地形', '高德影像', '天地图地形', '天地图影像']
shaoan123's avatar
shaoan123 committed
136
        GettMaplayer({
137 138 139 140
            terminalType: 'base',
            isBaseMap: true
        }).then(
            res => {
shaoan123's avatar
shaoan123 committed
141
                if (res.msg === "Ok") {
142
                    setTreeLoading(false);
shaoan123's avatar
shaoan123 committed
143 144
                    setTileData(res.data.general.baseMap.layers);
                    res.data.general.baseMap.layers.map((item) => {
145 146
                        let index = baseMapData.indexOf(item.servicename);
                        if (index != -1) {
shaoan123's avatar
shaoan123 committed
147
                            baseMapData.splice(index, 1);
148 149 150
                        }
                    })
                    setBaseMap(baseMapData)
151 152 153 154 155 156 157 158 159 160 161 162 163
                } else {
                    setTreeLoading(false);
                    notification.error({
                        message: '获取失败',
                        description: res.message,
                    });
                }
            }
        )
    };

    return (
        <>
shaoan123's avatar
shaoan123 committed
164 165 166 167 168 169
            <Spin tip="loading..." spinning={treeLoading}>
                <div className={styles.tileBtn}>
                    <Button type="primary" onClick={() => {
                        handleAdd();
                    }} >
                        新增
170
                </Button>
shaoan123's avatar
shaoan123 committed
171 172 173 174 175 176 177 178 179 180
                </div>
                <Table
                    columns={columns}
                    dataSource={tileData}
                    bordered
                    rowKey="type"
                    scroll={{ y: 400 }}
                    pagination={{
                        showTotal: (total, range) =>
                            `第${range[0]}-${range[1]} 条/共 ${total} 条`
181

shaoan123's avatar
shaoan123 committed
182 183 184 185 186 187 188 189 190 191 192
                    }}
                >
                </Table>
                <AddModal
                    visible={visible}
                    onCancel={() => setVisible(false)}
                    callBackSubmit={onSubmit}
                    type={type}
                    formObj={formObj}
                    baseMap={baseMap}
                />
shaoan123's avatar
shaoan123 committed
193
            </Spin>
194 195 196 197
        </>
    )
}
export default TileData