/* eslint-disable prefer-destructuring */ /* eslint-disable jsx-a11y/alt-text */ /* eslint-disable no-unused-vars */ /* eslint-disable no-else-return */ /* eslint-disable prefer-promise-reject-errors */ /* eslint-disable indent */ /* eslint-disable react/jsx-boolean-value */ /* eslint-disable no-case-declarations */ /* eslint-disable no-shadow */ import React, { useState, useEffect } from 'react'; import { Form, Modal, Input, Select, notification, Slider, InputNumber, Row, Col, Image, Radio, Button, Switch, TreeSelect, Empty, } from 'antd'; import jsonData from './TileMap.json'; import styles from '../SchemeConfig.less'; import thumbnail_1 from '@/assets/images/thumbnail/thumbnail_1.jpg'; import thumbnail_2 from '@/assets/images/thumbnail/thumbnail_2.jpg'; import thumbnail_3 from '@/assets/images/thumbnail/thumbnail_3.jpg'; import thumbnail_4 from '@/assets/images/thumbnail/thumbnail_4.jpg'; import classnames from 'classnames'; import { SetServiceConfig, GetCustomBaseMapList, GetGridSetList, GetCustomBaseMapByName, } from '@/services/webConfig/api'; const { Item } = Form; const { Option } = Select; const { TreeNode } = TreeSelect; const NewEditModal = props => { const { callBackSubmit = () => {}, type, formObj, visible, baseMap, name, onCancel } = props; const [loading, setLoading] = useState(false); const [radio, setRadio] = useState(); const [alpha, setAlpha] = useState(1); const [mapType, setMapType] = useState(0); const [advanced, setAdvanced] = useState(0); const [spaceData, setSpaceData] = useState([]); const [keyData, setKeyData] = useState([]); const [data, setData] = useState([]); const [areaData, setAreaData] = useState([]); const [pickItem, setPickItem] = useState(''); const [current, setCurrent] = useState(false); const [type1, setType] = useState(0); const [form] = Form.useForm(); const [radio1, setRadio1] = useState(); const [keepJsonData, setKeepJsonData] = useState([]); const arr = [ 'assets/images/thumbnail/thumbnail_1.jpg', 'assets/images/thumbnail/thumbnail_2.jpg', 'assets/images/thumbnail/thumbnail_3.jpg', 'assets/images/thumbnail/thumbnail_4.jpg', ]; // 提交 const onSubmit = () => { form.validateFields().then(validate => { if (validate) { setLoading(true); let obj = form.getFieldsValue(); let arr = {}; console.log(mapType); if (mapType == 1) { arr = { servicename: obj.servicename, terminalType: 'base', isBaseMap: true, jsonCfg: JSON.stringify({ alpha, label: obj.label, url: obj.url, taggingUrl: obj.taggingUrl, icon: obj.icon, type: obj.type, extent: obj.range, baseLayer: obj.layer, proxyUrl: obj.proxy, levelStart: obj.levelStart, origin: obj.origin, resolution: obj.resolution, tileMatrix: obj.coordinate, levelEnd: obj.levelEnd, levelEndEnlarge: obj.levelEndEnlarge, m_Ip: obj.IP, m_Port: obj.Port, m_User: obj.User, m_Pwd: obj.Pwd, gsAppName: obj.gis, }), }; } else { let url = ''; let list = keepJsonData.find(i => i.type === obj.type); if (list) { url = list.url; } // if (obj.type == 'streetPurplishBlue') { // url = '//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'; // } else if (obj.type == 'streetGray') { // url = '//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer'; // } else if (obj.type == 'streetWarm') { // url = '//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer'; // } else if (obj.type == 'mapbox-i-ia') { // url = '//api.mapbox.com/v4/mapbox.satellite'; // } else if (obj.type == 'tianditu-arcgis-i') { // url = '//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'; // } arr = { servicename: obj.servicename, terminalType: 'base', isBaseMap: true, jsonCfg: JSON.stringify({ alpha, label: obj.label, url: obj.url || url, taggingUrl: obj.taggingUrl, icon: obj.icon, type: obj.type, isTainDiTu: obj.isTainDiTu, extent: null, baseLayer: null, proxyUrl: null, levelStart: null, origin: null, resolution: null, tileMatrix: null, levelEnd: null, levelEndEnlarge: false, m_Ip: null, m_Port: null, m_User: null, m_Pwd: null, gsAppName: null, }), }; } SetServiceConfig(arr) .then(res => { if (res.code == '0') { form.resetFields(); onCancel(); setLoading(false); callBackSubmit(); notification.success({ message: '提示', duration: 3, description: res.message || type == 'add' ? '新增成功' : '编辑成功', }); } else { setLoading(false); notification.error({ message: '提示', duration: 3, description: res.message || type == 'add' ? '新增失败' : '编辑失败', }); } }) .catch(err => { setLoading(false); }); } }); }; const onFinish = value => {}; useEffect(() => { let data = []; jsonData.forEach(item => { data = [...data, ...item.items]; }); setKeepJsonData(data); setLoading(false); setSpaceData([]); setKeyData([]); setData([]); setAreaData([]); console.log(formObj); setAlpha(formObj.alpha); let aa; if (formObj.baseLayer) { let index = formObj.baseLayer.lastIndexOf(':'); aa = formObj.baseLayer.substring(0, index); console.log(aa); } console.log(formObj.baseLayer); if (formObj.type == 'pipenet-tile' || formObj.type == 'google-user') { setMapType(1); } else { setMapType(0); } if (formObj.type == 'offline-map') { setType(1); } else { setType(0); } if (formObj.m_User) { setAdvanced(1); setCurrent(true); } else { setAdvanced(0); setCurrent(false); } console.log(formObj.isTainDiTu); setRadio1(formObj.isTainDiTu); switch (type) { case 'edit': console.log(formObj); form.setFieldsValue({ ...formObj, isTainDiTu: formObj.isTainDiTu, IP: formObj.m_Ip, gis: formObj.gsAppName, layer: formObj.baseLayer, coordinate: formObj.tileMatrix, range: formObj.extent, proxy: formObj.proxyUrl, Port: formObj.m_Port, User: formObj.m_User, Pwd: formObj.m_Pwd, workSpance: aa, // type: `${formObj.servicename}(${formObj.type})`, }); let index = formObj.icon.lastIndexOf('/'); console.log(index); let str = formObj.icon.substring(index + 1, formObj.icon.length); console.log(str); let defaultIndex = arr.filter((item, index) => { if (item.indexOf(str) != -1) { return item; } }); console.log(defaultIndex); if (str.indexOf(1) != -1) { setPickItem(0); } else if (str.indexOf(2) != -1) { setPickItem(1); } else if (str.indexOf(3) != -1) { setPickItem(2); } else if (str.indexOf(4) != -1) { setPickItem(3); } setRadio(defaultIndex[0]); break; default: break; } }, [visible]); const layout = { layout: 'horizontal', labelCol: { span: 4, }, wrapperCol: { span: 18, }, }; const onChange = value => { let silderData = value == 100 ? 1 : value / 100; setAlpha(silderData); }; const tipFormatter = value => `${value}%`; const imgURL = [ { url: thumbnail_1, }, { url: thumbnail_2, }, { url: thumbnail_3, }, { url: thumbnail_4, }, ]; const radioChange = e => { console.log(e.target.value); setRadio(e.target.value); }; const handleChange = value => { // form.setFieldsValue({ // label: servicenameToType(value), // servicename: servicenameToType(value), // }); console.log(value); if (value == 'google-user' || value == 'pipenet-tile') { setMapType(1); console.log(form.getFieldsValue().IP); console.log(form.getFieldsValue().gis); if (!form.getFieldsValue().IP) { form.setFieldsValue({ IP: '192.168.12.7', gis: 'geoserver217', proxy: 'javasvc.panda-water.cn/geoserver', levelEndEnlarge: false, Port: '8080', User: 'admin', Pwd: 'geoserver', }); } } else { setMapType(0); } if (value == 'offline-map') { setType(1); form.setFieldsValue({ url: '' }); } else { setType(0); } }; // 添加地图类型 const servicenameToType = type => { switch (type) { case 'google-v': return '谷歌地形'; case 'google-i-a': return '谷歌影像(注记)'; case 'google-i': return '谷歌影像'; case 'amap-i': return '高德影像'; case 'amap-v': return '高德地形'; case 'tianditu-i-ia': return '天地图影像'; case 'tianditu-v-va': return '天地图地形'; // case 'google-user': // return; // case 'pipenet-tile': // return; default: } }; // 选择坐标系 const handleCoordinate = e => { let work = form.getFieldsValue().workSpance; let lay = form.getFieldsValue().layer; let index = lay.indexOf(':'); let result = lay.substr(index + 1, lay.length); console.log(result); getGetCustomBaseMapByName(work, result, e); }; // 选择图层 const handleLayer = e => { let index = e.indexOf(':'); let result = e.substr(index + 1, e.length); console.log(result); let work = form.getFieldsValue().workSpance; console.log(work); getGetGridSetList(work, result); }; // 选择工作空间 const handleWorkSpance = e => { console.log(e); setData(spaceData[e]); form.setFieldsValue({ layer: spaceData[e][0] }); let aa = form.getFieldsValue().layer; let index = aa.indexOf(':'); let result = aa.substr(index + 1, aa.length); console.log(result); getGetGridSetList(e, result); }; const getGetGridSetList = (a, bb) => { let obj = form.getFieldsValue(); let aa = form.getFieldsValue().layer; let result; if (aa) { let index = aa.indexOf(':'); result = aa.substr(index + 1, aa.length); console.log(result); } GetGridSetList({ m_Port: obj.Port || '8080', m_User: obj.User || 'admin', m_Pwd: obj.Pwd || 'geoserver', m_Ip: obj.IP || '192.168.12.7', gsAppName: obj.gis || 'geoserver217', layerName: bb, workSpaceName: a, }).then(res => { let data = []; console.log(res.results); res.results.map(i => { data.push(i.gridSetName); }); console.log(data); setAreaData(data); form.setFieldsValue({ coordinate: data[0] }); getGetCustomBaseMapByName(a, bb, data[0]); }); }; const getGetCustomBaseMapByName = (a, bb, cc) => { let obj = form.getFieldsValue(); GetCustomBaseMapByName({ m_Port: obj.Port || '8080', m_User: obj.User || 'admin', m_Pwd: obj.Pwd || 'geoserver', m_Ip: obj.IP || '192.168.12.7', gsAppName: obj.gis || 'geoserver217', layerName: bb, workSpaceName: a, gridSet: cc, }).then(res => { let aa = res.results.coords; console.log(JSON.parse(aa)[2]); console.log(JSON.parse(aa)[3]); console.log(JSON.parse(aa).toString()); form.setFieldsValue({ range: JSON.parse(aa).toString(), resolution: res.results.resolutions, origin: `-${JSON.parse(aa)[2]},${JSON.parse(aa)[3]}`, levelStart: '3', }); }); }; const change = (e, event) => { if (e) { setCurrent(true); setAdvanced(1); } else { setCurrent(false); setAdvanced(0); } console.log(e); console.log(event); }; const choose = () => { let obj = form.getFieldsValue(); GetCustomBaseMapList({ m_Port: obj.Port || '8080', m_User: obj.User || 'admin', m_Pwd: obj.Pwd || 'geoserver', m_Ip: obj.IP || '192.168.12.7', gsAppName: obj.gis, }).then(res => { if (res.IsSuccess == true) { console.log(res.results); console.log(Object.keys(res.results)); setSpaceData(res.results); setKeyData(Object.keys(res.results)); let aa = Object.keys(res.results)[0]; setData(res.results[aa]); let bb = res.results[aa]; let index = bb[0].indexOf(':'); let result = bb[0].substr(index + 1, bb[0].length); console.log(result); getGetGridSetList(aa, result); form.setFieldsValue({ workSpance: aa, layer: bb[0] }); } else { setSpaceData([]); setKeyData([]); setData([]); setAreaData([]); form.setFieldsValue({ workSpance: '', layer: '', coordinate: '', range: '', levelStart: '', levelEnd: '', origin: '', resolution: '', }); notification.error({ message: '提示', duration: 3, description: res.EMessage, }); } }); }; const title = ( <span> 透明度<span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>{alpha}</span> </span> ); const marks = { 0: '0%', 100: '100%', }; const onChange1 = e => { setRadio1(e.target.value); }; const mapTree = (org, server) => { const haveChildren = Array.isArray(org.items) && org.items.length > 0; return haveChildren ? ( <TreeNode value={org.groupName} title={org.groupName} disabled> {org.items.map(item => mapTree(item, org.groupName))} </TreeNode> ) : ( <TreeNode value={org.type} title={`${org.title}(${org.type})`} /> ); }; return ( <Modal title="编辑基础底图" bodyStyle={{ width: '100%', maxHeight: '600px', overflow: 'scroll' }} 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}> <Item label="类型" name="type" rules={[{ required: true, message: '请选择服务名' }]}> {/* <Select onChange={handleChange}> <Option value="amap-v">高德地形(amap-v)</Option> <Option value="amap-i">高德影像(amap-i)</Option> <Option value="tianditu-v-va">天地图地形(tianditu-v-va)</Option> <Option value="tianditu-i-ia">天地图影像(tianditu-i-ia)</Option> <Option value="pipenet-tile">矢量底图切片(pipenet-tile)</Option> <Option value="google-user">自定义底图(google-user)</Option> <Option value="streetPurplishBlue">GeoQ午夜蓝(streetPurplishBlue)</Option> <Option value="streetGray">GeoQ水墨灰(streetGray)</Option> <Option value="streetWarm">GeoQ暖色(streetWarm)</Option> <Option value="mapbox-i-ia">mapbox影像(mapbox-i-ia)</Option> <Option value="tianditu-arcgis-i">arcgis影像(tianditu-arcgis-i)</Option> <Option value="arcgis-i-ia">arcgis影像注记(arcgis-i-ia)</Option> <Option value="offline-map">离线地图(offline-map)</Option> <Option value="tianditudark-v-va">深色天地图地形(tianditudark-v-va)</Option> </Select> */} <TreeSelect showSearch dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} placeholder="请选择底图 " allowClear treeDefaultExpandAll showCheckedStrategy onChange={handleChange} > {jsonData ? ( jsonData.map(i => mapTree(i)) ) : ( <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> )} </TreeSelect> </Item> <Item label="服务名" name="servicename" rules={[ { required: true, }, ]} > <Input placeholder="请输入服务名称" disabled /> </Item> <Item label="标签" name="label" rules={[{ required: true, message: '请输入标签' }]}> <Input placeholder="请输入标签名" allowClear /> </Item> {/* <Item label="URL" name="url"> <Input placeholder="请输入URL" allowClear /> </Item> */} {/* <Item label="透明度" name="alpha"> {console.log(formObj.alpha)} <Slider marks={marks} min={0} max={100} onChange={onChange} tipFormatter={tipFormatter} // // tooltipVisible={true} defaultValue={formObj.alpha * 100} /> </Item> */} <Item label="选择缩略图" name="icon" rules={[{ required: true, message: '请选择缩略图' }]} > <div style={{ display: 'flex', justifyContent: 'space-around' }}> {imgURL.map((item, index) => ( <div className={classnames({ [styles.imgHidden]: index !== pickItem, [styles.imgItem]: index === pickItem, })} key={index} > <img width="100" height="63" src={item.url} onClick={e => { setPickItem(index); form.setFieldsValue({ icon: arr[index] }); }} /> {/* <Radio.Group options={item} onChange={radioChange} value={radio}> <Radio value={arr[index]} /> </Radio.Group> */} </div> ))} </div> </Item> {type1 === 1 && ( <> <Item label="URL" name="url" rules={[{ required: true, message: '请输入url' }]}> <Input placeholder="请输入url" allowClear /> </Item> <Item label="注记URL" name="taggingUrl"> <Input placeholder="请输入url" allowClear /> </Item> <Item label="天地图坐标系" name="isTainDiTu"> <Radio.Group onChange={onChange1} value={radio1}> <Radio value={0}>否</Radio> <Radio value={1}>是</Radio> </Radio.Group> </Item> </> )} {/* <Item label="缩略图" name="icon" rules={[{ required: true, message: '请选择缩略图' }]}> <Input placeholder="请输入URL" disabled /> </Item> */} {mapType === 1 ? ( <> <Item label="ip地址" name="IP" rules={[{ required: true, message: '请输入ip地址' }]}> <Input placeholder="请输入ip地址" allowClear /> </Item> <Row> <Col span={16}> <Item label="geoserver名" name="gis" rules={[{ required: true, message: '请选择缩略图' }]} labelCol={{ span: 6 }} > <Input placeholder="请输入gis服务器名" allowClear /> </Item> </Col> <Col span={8}> <Item> <Button style={{ width: '100%' }} onClick={choose}> 选择工作空间 </Button> </Item> </Col> </Row> <Item label="工作空间" name="workSpance" rules={[{ required: true, message: '请选择工作空间' }]} > <Select onChange={handleWorkSpance}> {keyData ? keyData.map((item, index) => ( <Option value={item} key={index}> {item} </Option> )) : ''} </Select> </Item> <Item label="图层名" name="layer" rules={[{ required: true, message: '请选择图层名' }]} > <Select onChange={handleLayer}> {data ? data.map((item, index) => ( <Option value={item} key={index}> {item} </Option> )) : ''} </Select> </Item> <Item label="坐标系名" name="coordinate" rules={[{ required: true, message: '请选择坐标系名' }]} > <Select onChange={handleCoordinate}> {areaData ? areaData.map((item, index) => ( <Option value={item} key={index}> {item} </Option> )) : ''} </Select> </Item> <Item label="底图范围" name="range" rules={[{ required: true, message: '请选择底图范围' }]} > <Input placeholder="xmin,ymin,xmax,ymax" allowClear /> </Item> <Item label="起始级别" name="levelStart" rules={[{ required: true, message: '请选择起始级别' }]} > <Input placeholder="最初显示级别" allowClear /> </Item> <Item label="最大级别" name="levelEnd" // rules={[{ required: true, message: '请选择最大级别' }]} > <Input placeholder="最大显示级别" allowClear /> </Item> <Item label="放大级别后继续放大" name="levelEndEnlarge" // rules={[{ required: true }]} labelCol={{ span: 7 }} > <Radio.Group> <Radio value={false}>否</Radio> <Radio value={true}>是</Radio> </Radio.Group> </Item> <Item label="代理url" name="proxy" rules={[{ required: true, message: '请选择缩略图' }]} > <Input placeholder="请输入URL" allowClear /> </Item> <Switch checkedChildren="高级设置" unCheckedChildren="高级设置" onChange={change} checked={current} style={{ marginLeft: '40px', marginBottom: '15px' }} /> {advanced === 1 ? ( <> <Item label="端口号" name="Port" rules={[{ required: true, message: '请输入端口号' }]} > <Input placeholder="请输入端口号" allowClear /> </Item> <Item label="用户名" name="User" rules={[{ required: true, message: '请输入用户名' }]} > <Input placeholder="请输入用户名" allowClear /> </Item> <Item label="密码" name="Pwd" rules={[{ required: true, message: '请输入密码' }]}> <Input placeholder="请输入密码" allowClear /> </Item> <Item label="原点" name="origin" rules={[{ required: true, message: '请输入原点' }]} > <Input placeholder="左上角" disabled /> </Item> <Item label="分辨率" name="resolution" rules={[{ required: true, message: '请输入分辨率' }]} > <Input placeholder="0级分辨率" disabled /> </Item> </> ) : ( '' )} </> ) : ( '' )} </Form> )} </Modal> ); }; export default NewEditModal;