372 lines
18 KiB
JavaScript
372 lines
18 KiB
JavaScript
import React from 'react';
|
||
import { Tree, Button, Modal, Form, Input, Radio, message, Menu, Divider } from 'antd';
|
||
import {
|
||
DownOutlined,
|
||
EyeOutlined,
|
||
EyeInvisibleOutlined,
|
||
UnderlineOutlined,
|
||
UnorderedListOutlined,
|
||
} from '@ant-design/icons';
|
||
import SetLogoImagePath from './SetLogoImagePath'
|
||
import { createLayer, getBasicLayerMenuApi } from '../../../api';
|
||
import '../../../index.less';
|
||
import { label } from 'three/examples/jsm/nodes/Nodes.js';
|
||
|
||
class LayerData extends React.Component {
|
||
constructor () {
|
||
super ();
|
||
this.state = {
|
||
treeData: [],
|
||
menuData:[], //菜单数据
|
||
layerId: '',
|
||
isModalOpen: false,
|
||
addLayer: {
|
||
id: 0,
|
||
logoImageColor: 'gray',
|
||
logoImagePath: '',
|
||
name: '',
|
||
note: '',
|
||
},
|
||
selectLayerList: [],
|
||
}
|
||
}
|
||
|
||
// 获取基础图层菜单栏，获取列表数据
|
||
getBasicLayerMenu = (adcode) => {
|
||
return getBasicLayerMenuApi({adcode: adcode}).then((e) => {
|
||
let basicLayeData = e.data;
|
||
// MenuData
|
||
let menuDataList = [];
|
||
for (var m in basicLayeData) {
|
||
menuDataList.push({
|
||
key: basicLayeData[m].id,
|
||
label: basicLayeData[m].name,
|
||
icon: <UnorderedListOutlined/>,
|
||
children: this.getLayerList(basicLayeData[m].layerList),
|
||
})
|
||
}
|
||
this.setState ({
|
||
menuData: menuDataList,
|
||
})
|
||
});
|
||
}
|
||
|
||
|
||
// 获取图层列表
|
||
getLayerList = (layerList, i) => {
|
||
var cLayerList = [];
|
||
for (let i in layerList) {
|
||
cLayerList.push({
|
||
// key: 0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层
|
||
key: i + '-' + layerList[i].id + '-' + new Date() + '-' + layerList[i].name + '(' + layerList[i].geoUnitAmount + ')' + '-' + layerList[i].isCustomize,
|
||
label: layerList[i].name + '(' + layerList[i].geoUnitAmount + ')',
|
||
// icon 分别为图标和小眼睛（是否显示该图层），后续在选择函数中修改
|
||
icon:[<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1}/>,<EyeInvisibleOutlined className='eye' key={new Date().getTime()} />],
|
||
// icon:({ selected }) => (selected ? [<EyeOutlined className='eye' key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1}/>]
|
||
// : [<EyeInvisibleOutlined className='eye' key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1}/>]),
|
||
typee: layerList[i].type,
|
||
isCustomize: layerList[i].isCustomize,
|
||
})
|
||
}
|
||
return cLayerList;
|
||
}
|
||
|
||
//新建点位后修改涂层数量
|
||
changeUnitAmount = (layerId) => {
|
||
let menu = this.state.menuData;
|
||
for (let i in menu) {
|
||
for (let j in menu[i].children) {
|
||
if (layerId == menu[i].children[j].key.split('-')[1]) {
|
||
menu[i].children[j].title = 'ooo' ;
|
||
}
|
||
}
|
||
}
|
||
this.setState ({
|
||
menuData: menu
|
||
})
|
||
}
|
||
// 选中图层
|
||
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);
|
||
}
|
||
}
|
||
// 选中图层
|
||
selectLayer = (e) => {
|
||
// 修改选中状态
|
||
let menuData = this.state.menuData;
|
||
this.setState({menuData:[]}) // 将图层列表的数据清空（不清空组件不更新数据）
|
||
for (let i in menuData) { // 将选中图层的小眼睛改为打开状态（重新写入数据）
|
||
for (let j in menuData[i].children) {
|
||
if (e.key === menuData[i].children[j].key) {
|
||
let iconList = menuData[i].children[j].icon[0];
|
||
menuData[i].children[j].icon = [];
|
||
menuData[i].children[j].icon.push(iconList);
|
||
menuData[i].children[j].icon.push(<EyeOutlined className='eye' key={new Date().getTime()} />);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 改变选择状态并改变地图上的图层
|
||
let layerId = e.key.split('-')[1];
|
||
if (e.item.props.typee === 1 || e.item.props.typee === 4) {
|
||
this.props.getLayerPoints(layerId, true, e.item.props.typee);
|
||
} else if (e.item.props.typee === 2) {
|
||
this.props.getLayerShapes(layerId, true);
|
||
}
|
||
|
||
// 将选中图层写入选中图层列表
|
||
let selectLayerList = [];
|
||
for (let m in e.selectedKeys) {
|
||
selectLayerList.push({
|
||
// key: 0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层
|
||
'value' : e.selectedKeys[m].split('-')[1],
|
||
'label' : e.selectedKeys[m].split('-')[3],
|
||
'isCustomize' : e.selectedKeys[m].split('-')[4],
|
||
})
|
||
}
|
||
this.setState({
|
||
layerId: layerId,
|
||
selectLayerList: selectLayerList,
|
||
menuData: [...menuData]
|
||
})
|
||
}
|
||
// 取消选中图层
|
||
deselectlayer = (e) =>{
|
||
// 修改选中状态
|
||
let menuData = this.state.menuData;
|
||
this.setState({menuData:[]})
|
||
for (let i in menuData) {
|
||
for (let j in menuData[i].children) {
|
||
if (e.key === menuData[i].children[j].key) {
|
||
let iconList = menuData[i].children[j].icon[0];
|
||
menuData[i].children[j].icon = [];
|
||
menuData[i].children[j].icon.push(iconList);
|
||
menuData[i].children[j].icon.push(<EyeInvisibleOutlined className='eye' key={new Date().getTime()} />);
|
||
}
|
||
}
|
||
}
|
||
// 改变选择状态并改变地图上的图层
|
||
let layerId = e.key.split('-')[1];
|
||
if (e.item.props.typee === 1 || e.item.props.typee === 4) {
|
||
this.props.getLayerPoints(layerId, false, e.item.props.typee);
|
||
} else if (e.item.props.typee === 2) {
|
||
this.props.getLayerShapes(layerId, false);
|
||
}
|
||
|
||
// 将选中图层写入选中图层列表
|
||
let selectLayerList = [];
|
||
for (let m in e.selectedKeys) {
|
||
selectLayerList.push({
|
||
// key: 0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层
|
||
'value' : e.selectedKeys[m].split('-')[1],
|
||
'label' : e.selectedKeys[m].split('-')[3],
|
||
'isCustomize' : e.selectedKeys[m].split('-')[4],
|
||
})
|
||
}
|
||
this.setState({
|
||
layerId: layerId,
|
||
selectLayerList: selectLayerList,
|
||
menuData: [...menuData],
|
||
})
|
||
}
|
||
//弹出框事件
|
||
showModal = () => {
|
||
this.setState({
|
||
isModalOpen: true
|
||
});
|
||
};
|
||
handleOk = (values) => {
|
||
let self = this;
|
||
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) => {
|
||
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
|
||
}
|
||
})
|
||
};
|
||
// 根据已选列表变化
|
||
changeSelectStatus = () => {
|
||
for (let n in this.state.selectLayerList) {
|
||
// 修改选中状态
|
||
let menuData = this.state.menuData;
|
||
this.setState({menuData:[]})
|
||
for (let i in menuData) {
|
||
for (let j in menuData[i].children) {
|
||
if (this.state.selectLayerList[n].value === menuData[i].children[j].key.split('-')[1]) {
|
||
let iconList = menuData[i].children[j].icon[0];
|
||
menuData[i].children[j].icon = [];
|
||
menuData[i].children[j].icon.push(iconList);
|
||
menuData[i].children[j].icon.push(<EyeOutlined className='eye' key={new Date().getTime()} />);
|
||
}
|
||
}
|
||
}
|
||
this.setState({
|
||
menuData: [...menuData]
|
||
})
|
||
}
|
||
}
|
||
|
||
render() {
|
||
return (
|
||
<div className='layer-data-wrap'>
|
||
<div className='menu-list'>
|
||
<div className={this.state.menuData.length > 0 ? 'showItem layer-data-title' : 'hideItem layer-data-title'}>
|
||
<span>图层数据</span>
|
||
</div>
|
||
<Menu
|
||
multiple
|
||
id='layer-data-menu'
|
||
onDeselect={this.deselectlayer}
|
||
onSelect={this.selectLayer}
|
||
items={this.state.menuData}
|
||
mode='inline'
|
||
/>
|
||
<div id='add-layer'>
|
||
<Button type='primary' id='add-layer-button' className={this.state.menuData.length > 0 ? 'showItem' : 'hideItem'}
|
||
onClick={this.showModal}>新建图层</Button>
|
||
</div>
|
||
</div>
|
||
<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 |