261 lines
12 KiB
JavaScript
261 lines
12 KiB
JavaScript
import React from 'react';
|
|
import { Tree, Button, Modal, Form, Input, Radio, message } from 'antd';
|
|
import axios from 'axios';
|
|
import {
|
|
DownOutlined,
|
|
EyeOutlined,
|
|
EyeInvisibleOutlined,
|
|
} from '@ant-design/icons';
|
|
import SetLogoImagePath from './SetLogoImagePath'
|
|
import { createLayer } from '../../../api';
|
|
import '../../../index.less';
|
|
|
|
class LayerData extends React.Component {
|
|
constructor () {
|
|
super ();
|
|
this.state = {
|
|
treeData: [],
|
|
layerId: '',
|
|
isModalOpen: false,
|
|
addLayer: {
|
|
id: 0,
|
|
logoImageColor: 'gray',
|
|
logoImagePath: '',
|
|
name: '',
|
|
note: '',
|
|
},
|
|
selectLayerList: [],
|
|
}
|
|
}
|
|
|
|
// 获取基础图层菜单栏
|
|
getBasicLayerMenu = (adcode) => {
|
|
return axios.get('/api/basicMap/getBasicLayerMenu', {
|
|
params: {
|
|
adcode: adcode
|
|
}
|
|
}).then((e) => {
|
|
let basicLayeData = e.data.data;
|
|
let basicLayeList = [];
|
|
for (var i in basicLayeData) {
|
|
basicLayeList.push({
|
|
key: basicLayeData[i].id,
|
|
title : basicLayeData[i].name,
|
|
selectable: false,
|
|
children: this.getLayerList(basicLayeData[i].layerList),
|
|
})
|
|
}
|
|
this.setState ({
|
|
treeData: basicLayeList
|
|
})
|
|
});
|
|
}
|
|
getLayerList = (layerList, i) => {
|
|
var cLayerList = [];
|
|
for (let i in layerList) {
|
|
cLayerList.push({
|
|
'key': i + '-' + layerList[i].id + '-' + new Date(),
|
|
'title': layerList[i].name + '(' + layerList[i].geoUnitAmount + ')',
|
|
'icon': ({ selected }) => (selected ? [<EyeOutlined key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1}/>]
|
|
: [<EyeInvisibleOutlined key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1}/>]),
|
|
'type': layerList[i].type,
|
|
'isCustomize': layerList[i].isCustomize,
|
|
})
|
|
}
|
|
return cLayerList;
|
|
}
|
|
//新建点位后修改涂层数量
|
|
changeUnitAmount = (layerId) => {
|
|
let treeData = this.state.treeData;
|
|
for (let i in treeData) {
|
|
for (let j in treeData[i].children) {
|
|
if (layerId == treeData[i].children[j].key.split('-')[1]) {
|
|
treeData[i].children[j].title = 'ooo' ;
|
|
}
|
|
}
|
|
}
|
|
this.setState ({
|
|
treeData: treeData
|
|
})
|
|
}
|
|
// 选中图层
|
|
onLayerSelect = (selectedKeys, info) => {
|
|
let selectLayerList = [];
|
|
let layerId = info.node.key.split('-')[1];
|
|
for (let i in info.selectedNodes) {
|
|
selectLayerList.push({
|
|
'value': info.selectedNodes[i].key.split('-')[1],
|
|
'label': info.selectedNodes[i].title,
|
|
'isCustomize': info.selectedNodes[i].isCustomize,
|
|
})
|
|
}
|
|
this.setState({
|
|
layerId: layerId,
|
|
selectLayerList: selectLayerList,
|
|
})
|
|
if (info.node.type === 1 || info.node.type === 4) {
|
|
this.props.getLayerPoints(layerId, info.selected, info.node.type);
|
|
} else if (info.node.type === 2) {
|
|
this.props.getLayerShapes(layerId, info.selected);
|
|
}
|
|
}
|
|
//弹出框事件
|
|
showModal = () => {
|
|
this.setState({
|
|
isModalOpen: true
|
|
});
|
|
};
|
|
handleOk = (values) => {
|
|
let self = this;
|
|
let treeData = this.state.treeData
|
|
if (this.state.addLayer.id != 0) { //编辑图层
|
|
updateLayer({
|
|
id: this.state.addLayer.id,
|
|
logoImagePath: this.state.addLayer.logoImagePath,
|
|
name: this.state.addLayer.name,
|
|
note: this.state.addLayer.note,
|
|
}).then((e) => {
|
|
this.setState({
|
|
isModalOpen: false
|
|
});
|
|
})
|
|
} else {
|
|
createLayer({ //创建图层
|
|
// id: this.state.addLayer.id,
|
|
cityAdcode: this.props.adcode.cityAdcode,
|
|
districtAdcode: this.props.adcode.districtAdcode,
|
|
logoImagePath: this.state.addLayer.logoImagePath,
|
|
name: this.state.addLayer.name,
|
|
note: this.state.addLayer.note,
|
|
}).then((e) => {
|
|
if (e.success) {
|
|
message.success(e.message || '图层创建成功!');
|
|
this.setState({
|
|
isModalOpen: false
|
|
});
|
|
} else {
|
|
message.error(e.message || '图层创建失败！');
|
|
}
|
|
}).then(() => {
|
|
let filter = self.props.adcode.districtAdcode || self.props.adcode.cityAdcode;
|
|
self.getBasicLayerMenu(filter)
|
|
})
|
|
}
|
|
};
|
|
handleCancel = () => {
|
|
this.setState({
|
|
isModalOpen: false
|
|
});
|
|
};
|
|
onLayerNameChange = (e) => {
|
|
this.setState({
|
|
addLayer: {
|
|
id: this.state.addLayer.id,
|
|
logoImagePath: this.state.addLayer.logoImagePath,
|
|
note: this.state.addLayer.note,
|
|
name: e.target.value,
|
|
logoImageColor: this.state.addLayer.logoImageColor
|
|
}
|
|
})
|
|
};
|
|
onLayerNoteChange = (e) => {
|
|
this.setState({
|
|
addLayer: {
|
|
id: this.state.addLayer.id,
|
|
logoImagePath: this.state.addLayer.logoImagePath,
|
|
name: this.state.addLayer.name,
|
|
note: e.target.value,
|
|
logoImageColor: this.state.addLayer.logoImageColor
|
|
}
|
|
})
|
|
};
|
|
onLayerIconColorChange = (e) => {
|
|
debugger
|
|
this.setState({
|
|
addLayer: {
|
|
id: this.state.addLayer.id,
|
|
note: this.state.addLayer.note,
|
|
name: this.state.addLayer.name,
|
|
logoImagePath: this.state.addLayer.logoImagePath,
|
|
logoImageColor: e.target.value
|
|
}
|
|
})
|
|
};
|
|
onLayerIogoImagePathChange = (e) => {
|
|
this.setState({
|
|
addLayer: {
|
|
id: this.state.addLayer.id,
|
|
note: this.state.addLayer.note,
|
|
name: this.state.addLayer.name,
|
|
logoImagePath: e.target.value,
|
|
logoImageColor: this.state.addLayer.logoImageColor
|
|
}
|
|
})
|
|
};
|
|
//弹出框事件
|
|
|
|
render() {
|
|
return (
|
|
<div className='layer-data-wrap'>
|
|
<Tree
|
|
multiple
|
|
showIcon
|
|
defaultSelectedKeys={[]}
|
|
switcherIcon={<DownOutlined />}
|
|
treeData={this.state.treeData}
|
|
onSelect={this.onLayerSelect}
|
|
/>
|
|
<Button type='primary' id='add-layer' className={this.state.treeData.length > 0 ? 'showItem' : 'hideItem'}
|
|
onClick={this.showModal}>新建图层</Button>
|
|
<Modal title="新建图层" open={this.state.isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel} className='edit-layer-modal'>
|
|
<Form name='base' id='edit-layer-form' onFinish={this.handleOk}>
|
|
<Form.Item label="图层名称"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: '请输入图层名称!',
|
|
}
|
|
]}>
|
|
<Input name='id' type='hidden' value={this.state.addLayer.id}/>
|
|
<Input name='name' value={this.state.addLayer.name} onChange={this.onLayerNameChange}/>
|
|
</Form.Item>
|
|
<Form.Item label="图层图标" rules={[
|
|
{
|
|
required: true,
|
|
message: '请选择图层图标!',
|
|
}
|
|
]}>
|
|
<Radio.Group id='redio-btn-color-group' onChange={this.onLayerIconColorChange}>
|
|
<Radio.Button name='logoColor' value='red' className='radio-btn-color color-01'></Radio.Button>
|
|
<Radio.Button name='logoColor' value='yellow' className='radio-btn-color color-02'></Radio.Button>
|
|
<Radio.Button name='logoColor' value='green' className='radio-btn-color color-03'></Radio.Button>
|
|
<Radio.Button name='logoColor' value='blue' className='radio-btn-color color-04'></Radio.Button>
|
|
<Radio.Button name='logoColor' value='cyan' className='radio-btn-color color-05'></Radio.Button>
|
|
<Radio.Button name='logoColor' value='pink' className='radio-btn-color color-06'></Radio.Button>
|
|
<Radio.Button name='logoColor' value='white' className='radio-btn-color color-07'></Radio.Button>
|
|
<Radio.Button name='logoColor' value='gray' className='radio-btn-color color-08'></Radio.Button>
|
|
<Radio.Button name='logoColor' value='black' className='radio-btn-color color-09'></Radio.Button>
|
|
</Radio.Group>
|
|
<Radio.Group id='redio-btn-group' onChange={this.onLayerIogoImagePathChange}>
|
|
<Radio.Button name='logoImagePath' value={`iconPoint01_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint01-${this.state.addLayer.logoImageColor}`}></Radio.Button>
|
|
<Radio.Button name='logoImagePath' value={`iconPoint02_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint02-${this.state.addLayer.logoImageColor}`}></Radio.Button>
|
|
<Radio.Button name='logoImagePath' value={`iconPoint03_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint03-${this.state.addLayer.logoImageColor}`}></Radio.Button>
|
|
<Radio.Button name='logoImagePath' value={`iconPoint04_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint04-${this.state.addLayer.logoImageColor}`}></Radio.Button>
|
|
<Radio.Button name='logoImagePath' value={`iconPoint05_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint05-${this.state.addLayer.logoImageColor}`}></Radio.Button>
|
|
<Radio.Button name='logoImagePath' value={`iconPoint06_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint06-${this.state.addLayer.logoImageColor}`}></Radio.Button>
|
|
<Radio.Button name='logoImagePath' value={`iconPoint07_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint07-${this.state.addLayer.logoImageColor}`}></Radio.Button>
|
|
<Radio.Button name='logoImagePath' value={`iconPoint08_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint08-${this.state.addLayer.logoImageColor}`}></Radio.Button>
|
|
<Radio.Button name='logoImagePath' value={`iconPoint09_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint09-${this.state.addLayer.logoImageColor}`}></Radio.Button>
|
|
</Radio.Group>
|
|
</Form.Item>
|
|
<Form.Item label="图层备注">
|
|
<Input.TextArea name='note' value={this.state.addLayer.note} onChange={this.onLayerNoteChange}
|
|
style={{height: '120px'}}/>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</div >
|
|
);
|
|
}
|
|
}
|
|
export default LayerData |