import React, { useState, useEffect } from 'react'; import classnames from 'classnames' import styles from '../../dimensionsConfig.less' import { Popconfirm, notification, Card, Button, message, Tooltip } from 'antd'; import { SchemaMapSettings, DeleteSchemaBaseMap, GetBaseMapList, DeleteSchema, SchemaSettingIsActive } from '@/services/webConfig/api'; import { CloseOutlined, PlusOutlined } from '@ant-design/icons'; import AddModal from '../AddModal' import MapScope from '@/components/ThreeMapScope' 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) //删除瓦片 const deletebaseMap = (item, type) => { DeleteSchemaBaseMap({ 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 deleteTile = (item) => { DeleteSchema({ schemename: item.schemename, }).then(res => { if (res.msg === "") { notification.success({ message: '提示', duration: 3, description: '方案删除成功', }); deletebaseMaps() } else { notification.error({ message: '提示', duration: 3, description: '方案删除失败', }); } }) } const onSubmit = prop => { setVisible(false); deletebaseMaps() }; //增加瓦片 const addTile = (value) => { console.log(value, 'value'); let serverList = [], newArr = [] value.baseMap.map(item => { newArr.push(item.baseMap.name) }) setFormObj(value); if (JSON.stringify(value) != "{}") { GetBaseMapList().then(res => { if (res.msg === 'Ok') { res.data.map(item => { if (newArr.indexOf(item.name) == -1) { serverList.push(item.type) } }) } if (serverList.length) { setServiceList(serverList) setType('add'); setVisible(true); } else { notification.warning({ message: '提示', duration: 3, description: '请先在基础配置-配置底图', }); } }) } } 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( { schemename: item.schemename, mapSettings } ).then( res => { if (res.msg === "") { setMapScopeVisible(false) message.info("范围设置成功") deletebaseMaps() } else { notification.warning({ message: '提示', duration: 3, description: res.msg, }); } } ) } 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 }}> <div style={{ display: 'flex', marginBottom: '0.5rem' }}><span className={styles.schemeName}>矢量</span> <Tooltip title={props.item.data.length ? props.item.data.map((item, index) => { return index == props.item.data.length - 1 ? item.id : item.id + ',' }) : ''}> <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> <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) => { return <div className={styles.mapItem} key={baseindex} > <div onClick={() => pick(baseMapItem.baseMap.type)} className={classnames({ [styles.defaultTile]: true, [styles.activeTile]: baseMapItem.status === 'active', })}>默认</div> <div className={styles.mapText}>{baseMapItem.baseMap.name}</div> <div className={styles.mapIcon}> <Popconfirm title="是否删除该底图?" okText="确认" cancelText="取消" onConfirm={() => { deletebaseMap(props.item, baseMapItem.baseMap.type); }} > <CloseOutlined /> </Popconfirm> </div> </div> }) : ''} </div> </Card> <AddModal visible={visible} onCancel={() => setVisible(false)} callBackSubmit={onSubmit} type={type} serviceList={serviceList} formObj={formObj} /> <MapScope visible={mapScopeVisible} onCancel={() => setMapScopeVisible(false)} confirmModal={submitExtent} item={props.item} handleType = 'update' /> </> ) } export default CardData