/* eslint-disable indent */ /* eslint-disable object-shorthand */ import React, { useState, useEffect } from 'react'; import classnames from 'classnames'; import { Popconfirm, notification, Card, Button, message, Tooltip } from 'antd'; import { DeletMapServicename, GettMaplayer, SetServiceConfig, deleteConfig, } from '@/services/webConfig/api'; import { CloseOutlined, PlusOutlined, EditOutlined } from '@ant-design/icons'; import AddModal from './AddProjectModal'; import MapScope from '@/components/MapScope'; import { createGuid } from '@/utils/transformUtil'; import BaseMap from './BaseMap'; import styles from '../SchemeConfig.less'; const CardData = props => { const { deletebaseMaps = () => {}, item, cardData } = props; const [visible, setVisible] = useState(false); // 弹窗 const [flag, setFlag] = useState(0); // 状态更新 const [type, setType] = useState(''); // 弹窗类型 const [formObj, setFormObj] = useState({}); const [serviceList, setServiceList] = useState([]); const [all, setAll] = useState([]); const [mapScopeVisible, setMapScopeVisible] = useState(false); const [baseMapVisible, setBaseMapVisible] = useState(false); const [keepItem, setKeepItem] = useState(''); const [keepProject, setKeepProject] = useState(''); // 删除瓦片 useEffect(() => { console.log(props.item); }, []); const deletebaseMap = (item, baseMapItem) => { DeletMapServicename({ schemename: item.schemename, servicename: baseMapItem }).then(res => { if (res.code == '0') { notification.success({ message: '提示', duration: 3, description: '基础底图删除成功', }); deletebaseMaps(); } else { notification.error({ message: '提示', duration: 3, description: '基础底图删除失败', }); } }); }; // 删除方案 const deleteTile = item => { deleteConfig({ schemename: item.schemename, terminalType: 'baseMapscheme', isBaseMap: false, }).then(res => { if (res.code == '0') { notification.success({ message: '提示', duration: 3, description: '分级底图删除成功', }); deletebaseMaps(); } else { notification.error({ message: '提示', duration: 3, description: '分级底图删除失败', }); } }); }; const onSubmit = prop => { setVisible(false); setBaseMapVisible(false); deletebaseMaps(); }; // 增加瓦片 const addTile = value => { let serverList = []; setFormObj(value); if (JSON.stringify(value) != '{}') { GettMaplayer({ terminalType: 'base', isBaseMap: true }).then(res => { if (res.code == '0') { res.data.general.baseMap.layers.map(item => { console.log(value); console.log(value.baseMap); console.log(item.servicename); if (value.baseMap.indexOf(item.servicename) == -1) { serverList.push(item.servicename); } }); } if (serverList.length) { setServiceList(serverList); setAll(res.data.general.baseMap.layers); setType('add'); setVisible(true); } else { notification.warning({ message: '提示', duration: 3, description: '请先在基础配置-配置基础底图', }); } }); } }; const submitExtent = (extent, areaName, flag) => { if (flag === 0) { notification.warn({ message: '提交失败', description: '请框选范围', }); return; } const jsConfig = { extent: extent, areaName: areaName, boundColor: '#86c8f8', boundWidth: '10px', backgroundColor: '#000000', backgroundOpacity: '0.6', }; SetServiceConfig({ schemename: item.schemename, terminalType: 'web', isBaseMap: false, jsonCfg: JSON.stringify(jsConfig), }).then(res => { if (res.code == '0') { setMapScopeVisible(false); message.info('范围设置成功'); } }); }; const pick = (schemename, index) => { SetServiceConfig({ schemename: schemename, terminalType: 'scheme', isBaseMap: false, jsonCfg: JSON.stringify({ defaultBaseMap: index, }), }).then(res => { if (res.code == '0') { deletebaseMaps(); message.info('设置成功'); } else { message.warning(res.msg); } }); }; const editBaseMap = () => { setBaseMapVisible(true); }; return ( <div className={styles.TileConfigContainer}> <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: 360 }} > {/* <p> <span className={styles.schemeName}>管网</span> {props.item.servicename} </p> */} {/* <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.schemeBtn1} onClick={() => addTile(props.item)}> {' '} <PlusOutlined /> 添加基础底图 </Button> </div> <div style={{ overflowY: 'scroll', height: '11.4rem' }}> {props.item.baseMapDetail && props.item.baseMapDetail.length ? props.item.baseMapDetail.map((baseMapItem, baseindex) => ( <div className={styles.mapItem1} key={baseindex}> <div // onClick={() => pick(props.item.schemename, baseindex)} // className={classnames({ // [styles.defaultTile]: true, // [styles.activeTile]: baseindex == props.item.defaultBaseMap, // })} className={styles.defaultTile1} > {baseMapItem.maxzoom === 0 ? baseMapItem.zoom : `${baseMapItem.zoom}~${baseMapItem.maxzoom}`} </div> <div className={styles.mapText1}> <Tooltip title={baseMapItem.servicename}>{baseMapItem.servicename}</Tooltip> </div> <div className={styles.mapIcon1}> <EditOutlined onClick={() => { editBaseMap(); setKeepItem(props.item); setKeepProject(baseMapItem.servicename); }} /> </div> <div className={styles.mapIcon1}> <Popconfirm title="是否删除该基础底图?" okText="确认" cancelText="取消" onConfirm={() => { deletebaseMap(props.item, baseMapItem.servicename); }} > <CloseOutlined /> </Popconfirm>{' '} </div> </div> )) : ''} </div> </Card> <AddModal visible={visible} onCancel={() => setVisible(false)} callBackSubmit={onSubmit} type={type} serviceList={serviceList} formObj={formObj} cardData={cardData} all={all} /> <MapScope mapId={createGuid()} visible={mapScopeVisible} onCancel={() => setMapScopeVisible(false)} confirmModal={submitExtent} schemename={props.item.schemename} title={props.item.schemename} /> <BaseMap visible={baseMapVisible} onCancel={() => setBaseMapVisible(false)} callBackSubmit={onSubmit} keepItem={keepItem} keepProject={keepProject} /> </div> ); }; export default CardData;