card.jsx 8.39 KB
Newer Older
1 2 3
import React, { useState, useEffect } from 'react';
import classnames from 'classnames'
import styles from '../../dimensionsConfig.less'
4
import { Popconfirm, notification, Card, Button, message, Tooltip } from 'antd';
5
import {
6
    SchemaMapSettings, DeleteSchemaBaseMap, GetBaseMapList, DeleteSchema, SchemaSettingIsActive
7 8 9 10 11
} from '@/services/webConfig/api';
import {
    CloseOutlined, PlusOutlined
} from '@ant-design/icons';
import AddModal from '../AddModal'
12
import MapScope from '@/components/ThreeMapScope'
13 14 15 16 17 18 19 20 21 22 23
import { createGuid } from '@/utils/transformUtil'
import DemoTest from './demoTest'
const CardData = props => {
    const { deletebaseMaps = () => { }, item } = props;
    const [visible, setVisible] = useState(false); // 弹窗
    const [flag, setFlag] = useState(0); // 状态更新
    const [type, setType] = useState(''); // 弹窗类型
    const [formObj, setFormObj] = useState({});
    const [serviceList, setServiceList] = useState([]);
    const [mapScopeVisible, setMapScopeVisible] = useState(false)
    //删除瓦片
24 25 26
    const deletebaseMap = (item, type) => {
        DeleteSchemaBaseMap({ schemename: item.schemename, type }).then(res => {
            if (res.msg === '') {
27 28 29 30 31 32 33 34 35 36 37
                notification.success({
                    message: '提示',
                    duration: 3,
                    description: '底图删除成功',
                });
                deletebaseMaps()
            }
            else {
                notification.error({
                    message: '提示',
                    duration: 3,
shaoan123's avatar
shaoan123 committed
38
                    description: res.msg,
39 40 41 42 43 44 45
                });
            }

        })
    }
    //删除方案
    const deleteTile = (item) => {
46
        DeleteSchema({
47 48
            schemename: item.schemename,
        }).then(res => {
49
            if (res.msg === "") {
50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
                notification.success({
                    message: '提示',
                    duration: 3,
                    description: '方案删除成功',
                });
                deletebaseMaps()
            }
            else {
                notification.error({
                    message: '提示',
                    duration: 3,
                    description: '方案删除失败',
                });
            }
        })
    }
    const onSubmit = prop => {
        setVisible(false);
        deletebaseMaps()
    };
    //增加瓦片
    const addTile = (value) => {
72 73 74 75 76
        console.log(value, 'value');
        let serverList = [], newArr = []
        value.baseMap.map(item => {
            newArr.push(item.baseMap.name)
        })
77 78
        setFormObj(value);
        if (JSON.stringify(value) != "{}") {
79 80 81 82 83
            GetBaseMapList().then(res => {
                if (res.msg === 'Ok') {
                    res.data.map(item => {
                        if (newArr.indexOf(item.name) == -1) {
                            serverList.push(item.type)
84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
                        }
                    })
                }
                if (serverList.length) {
                    setServiceList(serverList)
                    setType('add');
                    setVisible(true);
                }
                else {
                    notification.warning({
                        message: '提示',
                        duration: 3,
                        description: '请先在基础配置-配置底图',
                    });
                }
            })
        }


    }
104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128

    const pick = (type) => {
        SchemaSettingIsActive({
            schemename: item.schemename,
            type
        }).then(res => {
            if (res.msg === "") {
                notification.success({
                    message: '提示',
                    duration: 3,
                    description: '底图切换成功',
                });
                deletebaseMaps()
            }
            else {
                notification.error({
                    message: '提示',
                    duration: 3,
                    description: res.msg,
                });
            }
        })
    }
    const submitExtent = (mapSettings) => {
        SchemaMapSettings(
129 130
            {
                schemename: item.schemename,
131
                mapSettings
132 133 134
            }
        ).then(
            res => {
135 136
                if (res.msg === "") {
                    setMapScopeVisible(false)
137
                    message.info("范围设置成功")
shaoan123's avatar
shaoan123 committed
138 139 140 141 142 143 144 145
                    deletebaseMaps()
                }
                else {
                    notification.warning({
                        message: '提示',
                        duration: 3,
                        description: res.msg,
                    });
146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163
                }
            }
        )

    }
    return (
        <>
            <Card title={<div><span className={styles.schemeName}>方案名</span>{props.item.schemename}</div>} extra={<a href="#">
                <Popconfirm
                    title="是否删除该方案?"
                    okText="确认"
                    cancelText="取消"
                    onConfirm={() => {
                        deleteTile(props.item);
                    }}
                >
                    <CloseOutlined />
                </Popconfirm> </a>} style={{ width: 300 }}>
164
                <div style={{ display: 'flex', marginBottom: '0.5rem' }}><span className={styles.schemeName}>矢量</span>
shaoan123's avatar
shaoan123 committed
165
                    <Tooltip title={props.item.data.length ? props.item.data.map((item, index) => {
166
                        return index == props.item.data.length - 1 ? item.id : item.id + ','
shaoan123's avatar
shaoan123 committed
167
                    }) : ''}>
168 169 170 171 172 173 174 175 176
                        <div style={{
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            width: '13rem'
                        }}>{props.item.data.map((item, index) => {
                            return index == props.item.data.length - 1 ? item.id : item.id + ','
                        })}</div>
                    </Tooltip> </div>
177 178 179 180 181 182 183 184 185
                <div>
                    <span className={styles.schemeName}>范围</span>
                    <Button style={{ width: '12rem', marginBottom: '0.5rem' }} onClick={() => setMapScopeVisible(true)}>选择范围</Button>
                </div>
                <div className={styles.schemeItem}><span className={styles.schemeName}>瓦片</span>
                    <Button className={styles.schemeBtn} onClick={() => addTile(props.item)}> <PlusOutlined />添加瓦片</Button>
                </div>
                <div style={{ overflowY: 'scroll', maxHeight: '11.4rem' }}>
                    {props.item.baseMap && props.item.baseMap.length ? props.item.baseMap.map((baseMapItem, baseindex) => {
shaoan123's avatar
shaoan123 committed
186 187
                        return <div className={styles.mapItem} key={baseindex} >
                            <div onClick={() => pick(baseMapItem.baseMap.type)} className={classnames({
188
                                [styles.defaultTile]: true,
189
                                [styles.activeTile]: baseMapItem.status === 'active',
190
                            })}>默认</div>
191
                            <div className={styles.mapText}>{baseMapItem.baseMap.name}</div>
192 193 194 195 196 197
                            <div className={styles.mapIcon}>
                                <Popconfirm
                                    title="是否删除该底图?"
                                    okText="确认"
                                    cancelText="取消"
                                    onConfirm={() => {
198
                                        deletebaseMap(props.item, baseMapItem.baseMap.type);
199 200 201 202 203 204 205
                                    }}
                                >
                                    <CloseOutlined />
                                </Popconfirm>  </div>
                        </div>
                    }) : ''}
                </div>
206

207 208 209 210 211 212 213 214 215 216 217 218 219
            </Card>
            <AddModal
                visible={visible}
                onCancel={() => setVisible(false)}
                callBackSubmit={onSubmit}
                type={type}
                serviceList={serviceList}
                formObj={formObj}
            />
            <MapScope
                visible={mapScopeVisible}
                onCancel={() => setMapScopeVisible(false)}
                confirmModal={submitExtent}
shaoan123's avatar
shaoan123 committed
220
                item={props.item}
邹绪超's avatar
邹绪超 committed
221
                handleType = 'update'
222 223 224 225 226
            />
        </>
    )
}
export default CardData