import React, { useState, useEffect } from 'react'; import { Form, Modal, Input, Select, notification, Button } from 'antd'; import { AddSchema, AddSchemaBaseMap, bindSchemeBaseMap, GetBaseMapList, GetVectorDataList, } from '@/services/webConfig/api'; import MapScope from '@/components/ThreeMapScope'; const { Item } = Form; const { Option } = Select; const AddModal = props => { const { callBackSubmit = () => {}, type, formObj, visible, serviceList } = props; const [loading, setLoading] = useState(false); const [baseMap, setBaseMap] = useState([]); const [pipeArr, setPipeArr] = useState([]); const [data, setData] = useState([]); const [mapSettings, setMapSettings] = useState({ areaName: '选择视角' }); const [mapScopeVisible, setMapScopeVisible] = useState(false); const [baseMapData, setBaseMapData] = useState([]); const [form] = Form.useForm(); const baseMapList = { 'amap-v': '高德街道', 'amap-i': '高德影像', 'tianditu-v': '天地图街道', 'tianditu-i': '天地图影像', baiduMapStreet: '百度街道', baiduMapImage: '百度影像', mapBoxImage: 'mapBox地图', arcgisImage: 'arcgis地图', }; const onSubmit = () => { form.validateFields().then(validate => { if (validate) { setLoading(true); let obj = form.getFieldsValue(); if (type === 'add') { AddSchemaBaseMap({ schemename: formObj.schemename, type: obj.serverName, }).then(res => { setLoading(false); if (res.msg === '') { form.resetFields(); callBackSubmit(); prompt('success', '瓦片新增成功'); } else { prompt('fail', '瓦片新增失败'); } }); } else { handleEdit(); } } }); }; const prompt = (type, content) => { if (type == 'success') { notification.success({ message: '提示', duration: 3, description: content, }); } else { notification.error({ message: '提示', duration: 3, description: content, }); } }; const handleEdit = () => { let obj = form.getFieldsValue(); AddSchema({ schemename: obj.schemename, data, mapSettings: mapSettings.areaName === '选择视角' ? {} : mapSettings, baseMap: baseMapData, }) .then(res => { setLoading(false); if (res.msg === '') { form.resetFields(); callBackSubmit(); prompt('success', '方案新增成功'); } else { prompt('fail', res.msg); } }) .catch(err => { setLoading(false); }); }; const onFinish = value => {}; useEffect(() => { switch (type) { case 'add': console.log('serviceList', serviceList); addTile(); break; case 'schemeAdd': pipeNetwork(); break; default: break; } }, [visible]); // 添加瓦片 const addTile = () => { form.setFieldsValue({ serverName: serviceList[0], }); }; // 获取管网及默认底图 const pipeNetwork = () => { form.resetFields(); setMapSettings({ areaName: '选择视角' }); let req1 = GetBaseMapList(); let req2 = GetVectorDataList(); let pipeArr = [], baseMap = []; Promise.all([req1, req2]).then(res => { if (res[0].msg === 'Ok') { setBaseMap(res[0].data); } if (res[1].msg === 'Ok') { (res[1].data || []).map(item => { pipeArr.push(item.id); }); } setPipeArr(pipeArr); form.setFieldsValue({ baseMap: res[0].data[0].name, }); }); }; const layout = { layout: 'horizontal', labelCol: { span: 4, }, wrapperCol: { span: 18, }, }; // 选择服务名 const handleChange = value => {}; // 选择管网 const handleService = value => { setData(value); }; // 选择底图 const handleBaseMap = (value, option) => { let baseMapDataArr = []; value.map((item, index) => { baseMapDataArr.push({ type: item, status: index == 0 ? 'active' : 'notActive' }); }); setBaseMapData(baseMapDataArr); }; const submitExtent = mapSettings => { setMapScopeVisible(false); if (JSON.stringify(mapSettings) != '{}') { setMapSettings(mapSettings); form.setFieldsValue({ camera: mapSettings.areaName, }); } }; return ( <> <Modal title={`${type === 'add' ? '添加底图' : '添加方案'}`} bodyStyle={{ width: '100%', minHeight: '100px' }} style={{ top: '150px' }} width="700px" destroyOnClose maskClosable={false} cancelText="取消" okText="确认" {...props} onOk={() => onSubmit()} confirmLoading={loading} forceRender={true} getContainer={false} > {visible && ( <Form form={form} {...layout} onFinish={onFinish}> {type === 'add' ? ( <Item label="服务名" name="serverName"> <Select onChange={handleChange}> {serviceList.length ? serviceList.map((item, index) => { return ( <Option key={index} value={item}> {baseMapList[item]} </Option> ); }) : ''} </Select> </Item> ) : ( <> <Item label="方案名" name="schemename" rules={[{ required: true, message: '请输入方案名' }]} > <Input placeholder="请输入方案名" allowClear /> </Item> <Item label="数据源"> <Select onChange={handleService} mode="multiple"> {pipeArr.length ? pipeArr.map((item, index) => { return ( <Option key={index} value={item}> {item} </Option> ); }) : ''} </Select> </Item> <Item label="瓦片" name="" rules={[{ required: true, message: '请选择瓦片' }]}> <Select onChange={handleBaseMap} mode="multiple"> {baseMap.length ? baseMap.map((item, index) => { return ( <Option key={index} value={item.type}> {item.name} </Option> ); }) : ''} </Select> </Item> <Item label="视角" name="camera"> <Button style={{ width: '100%' }} onClick={() => setMapScopeVisible(true)}> {mapSettings.areaName} </Button> </Item> </> )} </Form> )} </Modal> <MapScope visible={mapScopeVisible} onCancel={() => setMapScopeVisible(false)} baseMapData={baseMapData} baseMap={baseMap} handleType="add" confirmModal={submitExtent} /> </> ); }; export default AddModal;