sx/map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:分割线、刷新、加号、隐藏按钮

Browse Source
This commit is contained in:
SmileXin 2024-07-07 13:53:24 +08:00
parent ffe9a87243
commit 1772c14f47
4 changed files with 374 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
package-lock.json generated
View File

@ -6350,22 +6350,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001441",
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz",
"integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/browserslist"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
}
],
"license": "CC-BY-4.0"
},
"node_modules/chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",

136
src/index.less
View File

@ -147,39 +147,152 @@ body {
}
.layer-data-title{
width: 100%;
padding: 10px 0;
padding: 25px 0;
text-align: center;
background-color: #FFFFFF;
font-size: 21px;
// 内容不被选中
-webkit-user-select:none;/*谷歌 /Chrome*/
-moz-user-select:none; /*火狐/Firefox*/
-ms-user-select:none; /*IE 10+*/
user-select:none;
}
// 重新加载按钮样式
.layer-data-wrap .reload{
margin-left: 15px;
font-size: 15px;
cursor: pointer;
}
.layer-data-title span {
margin: 10px 0;
}
.hiddenBtn{
overflow: hidden;
position: fixed;
height: 40px;
width: 40px;
top: 220px;
margin: 0 0 0 22%;
background: rgb(255, 255, 255);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
border-radius: 10px;
opacity: 1;
z-index: 99;
text-align: center;
padding-left: 0;
padding-right: 0;
// 动画
animation-name: moveBtn;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-play-state: paused;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes moveBtn{
from {
// margin-left: 0;
}
99%{
// margin-left: 0;
}
to {
margin: 0 0 0 4%;
}
}
.layer-data-wrap {
overflow: hidden;
// overflow: hidden;
overflow-y: auto;
overflow-x: hidden;
position: fixed;
top: 190px;
width: 270px;
max-height: 450px;
// min-height: 100px;
margin: 2% 4.2%;
background: rgba(239,240,248,1);
// background: rgba(239,240,248,0);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
border-radius: 10px;
opacity: 1;
z-index: 999;
// 禁止换行
white-space:nowrap;
z-index: 99;
// 动画
animation-name: hiddenLayer;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-play-state: paused;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes hiddenLayer{
from {
}
99%{
width: 0px;
}
to {
box-shadow: none;
width: 0px;
}
}
.anticon-double-left {
// 动画
animation-name: turn;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-play-state: paused;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes turn{
from {
// transform: rotate(0deg);
}
99%{
// transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
.layer-data-wrap .menu-list{
// width: 100%;
width: 270px;
}
// 隐藏滚轮条
.layer-data-wrap:hover{
overflow-y: auto !important;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
// overflow-y: auto !important;
// scrollbar-width: none; /* Firefox */
// -ms-overflow-style: none; /* IE 10+ */
}
.layer-data-wrap:hover::-webkit-scrollbar {
display: none; /* Safari and Chrome */
// display: none; /* Safari and Chrome */
}
.layer-name{
// margin-right: 50%;
}
.add-layer-btn{
float: right;
width: 20px;
height: 20px;
}
.add-layer-btn-disable{
cursor: not-allowed;
float: right;
width: 20px;
height: 20px;
}
#add-layer{
width: 100%;
text-align: center;
@ -846,3 +959,12 @@ body {
.l7-marker-container2 .l7-popup{
pointer-events: all !important;
}
// 图层列表中横线样式
.layer-data-wrap .ant-menu-item-divider{
// display:none;
height: 0.1px !important;
border: none;
margin: auto;
width: 90%;
background-color: #b2bec3 ;
}

328
src/pages/BaseMap/LayerData/index.js
View File

@ -1,23 +1,24 @@
import React from 'react';
import { Tree, Button, Modal, Form, Input, Radio, message, Menu, Divider } from 'antd';
import { Tree, Button, Modal, Form, Input, Radio, message, Menu, Divider, Tooltip } from 'antd';
import {
DownOutlined,
EyeOutlined,
EyeInvisibleOutlined,
UnderlineOutlined,
UnorderedListOutlined,
DownOutlined,
EyeOutlined,
EyeInvisibleOutlined,
UnorderedListOutlined,
SyncOutlined,
DoubleLeftOutlined,
PlusOutlined,
} 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 ();
constructor() {
super();
this.state = {
treeData: [],
menuData:[], //菜单数据
menuData: [], //菜单数据
layerId: '',
isModalOpen: false,
addLayer: {
@ -29,31 +30,94 @@ class LayerData extends React.Component {
},
selectLayerList: [],
selectLayerIdList: [],
layer: null,
btn: null,
icon: null,
}
}
// 钩子函数
componentDidMount = () => {
let layer = document.querySelector('.layer-data-wrap');
let btn = document.querySelector('.hiddenBtn');
let icon = document.querySelector('.anticon-double-left');
// 添加监听事件让其在动画结束后停止(paused状态)
// layer.onanimationiteration = this.paused(layer);
layer.addEventListener('animationiteration', () => { layer.style.animationPlayState = 'paused' });
btn.addEventListener('animationiteration', () => { btn.style.animationPlayState = 'paused' });
icon.addEventListener('animationiteration', () => { icon.style.animationPlayState = 'paused' });
// layer.addEventListener('animationstart',paused(layer));
// btn.addEventListener('animationstart',paused(btn));
// icon.addEventListener('animationstart',paused(icon));
this.setState({
layer: layer,
btn: btn,
icon: icon,
})
}
// 获取基础图层菜单栏，获取列表数据
getBasicLayerMenu = (adcode) => {
return getBasicLayerMenuApi({adcode: adcode}).then((e) => {
return getBasicLayerMenuApi({ adcode: adcode }).then((e) => {
let basicLayeData = e.data;
console.log('basicLayeData', basicLayeData);
// MenuData
let menuDataList = [];
for (var m in basicLayeData) {
let lab = null;
// if (basicLayeData[m].esIndex == "personal_point_layer")
if (m == 0){
lab = <>
<div>
<span className='layer-name'>
{basicLayeData[m].name}
</span>
<span className={basicLayeData[m].layerList.length >= 5 ? 'hideItem' : 'add-layer-btn' }>
<Tooltip title='点击可创建新图层'>
<span onClick={this.addLayerHandle}><PlusOutlined /></span>
</Tooltip>
</span>
<span className={basicLayeData[m].layerList.length < 5 ? 'hideItem' : 'add-layer-btn-disable' }>
<Tooltip title='个人图层创建数量已达上限'>
<span onClick={this.disableBtn}><PlusOutlined /></span>
</Tooltip>
</span>
</div>
</>;
}else{
lab = basicLayeData[m].name;
}
menuDataList.push({
type: 'divider',
}, {
key: basicLayeData[m].id,
label: basicLayeData[m].name,
icon: <UnorderedListOutlined/>,
// label: basicLayeData[m].name,
label: lab,
icon: <UnorderedListOutlined />,
children: this.getLayerList(basicLayeData[m].layerList),
})
});
}
this.setState ({
this.setState({
menuData: menuDataList,
})
this.changeSelectStatus(menuDataList);
});
}
addLayerHandle = (e) => {
// 阻止冒泡
e.stopPropagation();
console.log('addLayerHandle', e);
this.showModal();
}
disableBtn = (e) => {
// 阻止冒泡
e.stopPropagation();
}
// 获取图层列表
getLayerList = (layerList, i) => {
@ -64,7 +128,7 @@ class LayerData extends React.Component {
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: [<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,
@ -80,11 +144,11 @@ class LayerData extends React.Component {
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' ;
menu[i].children[j].title = 'ooo';
}
}
}
this.setState ({
this.setState({
menuData: menu
})
}
@ -92,7 +156,7 @@ class LayerData extends React.Component {
selectLayer = (e) => {
// 修改选中状态
let menuData = this.state.menuData;
this.setState({menuData:[]}) // 将图层列表的数据清空（不清空组件不更新数据）
this.setState({ menuData: [] }) // 将图层列表的数据清空（不清空组件不更新数据）
for (let i in menuData) { // 将选中图层的小眼睛改为打开状态（重新写入数据）
for (let j in menuData[i].children) {
if (e.key === menuData[i].children[j].key) {
@ -118,24 +182,24 @@ class LayerData extends React.Component {
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],
'value': e.selectedKeys[m].split('-')[1],
'label': e.selectedKeys[m].split('-')[3],
'isCustomize': e.selectedKeys[m].split('-')[4],
})
selectLayerIdList.push(e.selectedKeys[m])
}
this.setState({
layerId: layerId,
selectLayerList: selectLayerList,
selectLayerIdList : selectLayerIdList,
selectLayerIdList: selectLayerIdList,
menuData: [...menuData]
})
}
// 取消选中图层
deselectlayer = (e) =>{
deselectlayer = (e) => {
// 修改选中状态
let menuData = this.state.menuData;
this.setState({menuData:[]})
this.setState({ menuData: [] })
for (let i in menuData) {
for (let j in menuData[i].children) {
if (e.key === menuData[i].children[j].key) {
@ -160,16 +224,16 @@ class LayerData extends React.Component {
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],
'value': e.selectedKeys[m].split('-')[1],
'label': e.selectedKeys[m].split('-')[3],
'isCustomize': e.selectedKeys[m].split('-')[4],
})
selectLayerIdList.push(e.selectedKeys[m])
}
this.setState({
layerId: layerId,
selectLayerList: selectLayerList,
selectLayerIdList : selectLayerIdList,
selectLayerIdList: selectLayerIdList,
menuData: [...menuData],
})
}
@ -254,7 +318,7 @@ class LayerData extends React.Component {
})
};
onLayerIogoImagePathChange = (e) => {
this.setState({
this.setState({
addLayer: {
id: this.state.addLayer.id,
note: this.state.addLayer.note,
@ -272,10 +336,10 @@ class LayerData extends React.Component {
})
if (selectLayerIdList.length <= 0) return;
// 修改选中状态
for(let i in menuData){
for(let j in menuData[i].children){
for(let m in selectLayerIdList){
if(selectLayerIdList[m].split('-')[1] === menuData[i].children[j].key.split('-')[1]){
for (let i in menuData) {
for (let j in menuData[i].children) {
for (let m in selectLayerIdList) {
if (selectLayerIdList[m].split('-')[1] === menuData[i].children[j].key.split('-')[1]) {
selectLayerIdList[m] = menuData[i].children[j].key;
}
}
@ -285,76 +349,138 @@ class LayerData extends React.Component {
selectLayerIdList: selectLayerIdList
})
}
// 点击按钮重新加载
reload = () => {
console.log('reload');
// 重新加载业务
// loading效果
this.props.startLoading();
setTimeout(() => {
this.props.stopLoading();
// 提示框
message.success('图层数据已刷新！');
}, 2000);
};
// 根据情况改变隐藏按钮
hiddenButtonHandle = () => {
let self = this;
if (this.state.isHidden) {
// 隐藏
this.setState({
hiddenButton: (
<Button onClick={() => {
self.isHidden = !self.isHidden;
}}>
<span>&gt;&gt;</span>
</Button>
)
})
} else {
// 显示
this.setState({
hiddenButton: (
<Button onClick={() => {
self.isHidden = !self.isHidden;
}}>
<span>&lt;&lt;</span>
</Button>
)
})
}
};
paused = (item) => {
item.style.animationPlayState = 'paused';
};
running = (item) => {
item.style.animationPlayState = 'running';
};
hiddenLayer = () => {
console.log("hidden layer", this.state.layer);
this.running(this.state.layer);
this.running(this.state.btn);
this.running(this.state.icon);
}
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'
selectedKeys={this.state.selectLayerIdList}
/>
<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 >
<>
<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>
<span className='reload'>
<Tooltip title='点击可刷新图层信息数据'>
<span onClick={this.reload}><SyncOutlined /></span>
</Tooltip>
</span>
</div>
<Menu
multiple
id='layer-data-menu'
onDeselect={this.deselectlayer}
onSelect={this.selectLayer}
items={this.state.menuData}
mode='inline'
selectedKeys={this.state.selectLayerIdList}
/>
{/* <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 >
<Button onClick={this.hiddenLayer} className={this.state.menuData.length > 0 ? 'hiddenBtn showItem' : 'hiddenBtn hideItem'}><DoubleLeftOutlined /></Button>
{/* <Button onClick={this.hiddenLayer} className='hiddenBtn'><DoubleLeftOutlined/></Button> */}
</>
);
}
}

18
src/pages/BaseMap/index.js
View File

@ -1,9 +1,9 @@
import React from 'react';
import { Select, Input, Card, Col, Row, Button, message, Modal, Spin, Form, Alert, Space } from 'antd';
import {ExclamationCircleFilled } from '@ant-design/icons';
import {DoubleLeftOutlined, ExclamationCircleFilled } from '@ant-design/icons';
import LayerData from './LayerData';
// import LayerList from './LayerList';
import { AimOutlined } from '@ant-design/icons';
import { AimOutlined, DoubleRightOutlined } from '@ant-design/icons';
import Header from '../../components/Header/index.js';
import { createPoint, updatePoint, getDetailByIdApi, queryUserLayers, getLayerPointsApi, getAllProvinceApi, getCityByProvinceApi, getDistrictByCityApi, getLayerShapesApi, getPointByAddressApi, deletePoint } from '../../api';
import Pop from './pop'
@ -944,6 +944,17 @@ class BaseMap extends React.Component{
console.log('Failed:', errorInfo);
}
hiddenLayer = () => {
let layer = document.querySelector('.layer-data-wrap');
let btn = document.querySelector('.hiddenBtn');
let icon = document.querySelector('.anticon-double-left');
console.log("hidden layer", icon);
layer.style.animationPlayState = 'running';
btn.style.animationPlayState = 'running';
icon.style.animationPlayState = 'running';
}
render(){
return (
<div id='base_map' className={styles.basseMap} >
@ -998,7 +1009,10 @@ class BaseMap extends React.Component{
adcode={{cityAdcode: this.state.cityAdcode, districtAdcode: this.state.districtAdcode}}
getLayerPoints = {this.getLayerPoints}
getLayerShapes = {this.getLayerShapes}
startLoading = {this.startLoading}
stopLoading = {this.stopLoading}
/>
{/* <Button onClick={this.hiddenLayer} className='hiddenBtn'><DoubleLeftOutlined/></Button> */}
<div className={styles.btnRightWrap}>
<Button type="primary" className={styles.btnRight} onClick={this.enableDrawPoint} disabled={this.state.disabled}>点位创建</Button>