feat:分割线、刷新、加号、隐藏按钮
This commit is contained in:
parent
ffe9a87243
commit
1772c14f47
16
package-lock.json
generated
16
package-lock.json
generated
@ -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
136
src/index.less
@ -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;
|
||||
}
|
||||
.layer-data-wrap {
|
||||
.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-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 ;
|
||||
}
|
||||
@ -1,16 +1,17 @@
|
||||
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,
|
||||
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() {
|
||||
@ -29,23 +30,76 @@ 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) => {
|
||||
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,
|
||||
// label: basicLayeData[m].name,
|
||||
label: lab,
|
||||
icon: <UnorderedListOutlined />,
|
||||
children: this.getLayerList(basicLayeData[m].layerList),
|
||||
})
|
||||
});
|
||||
}
|
||||
this.setState({
|
||||
menuData: menuDataList,
|
||||
@ -54,6 +108,16 @@ class LayerData extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
addLayerHandle = (e) => {
|
||||
// 阻止冒泡
|
||||
e.stopPropagation();
|
||||
console.log('addLayerHandle', e);
|
||||
this.showModal();
|
||||
}
|
||||
disableBtn = (e) => {
|
||||
// 阻止冒泡
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
// 获取图层列表
|
||||
getLayerList = (layerList, i) => {
|
||||
@ -285,13 +349,72 @@ 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>>></span>
|
||||
</Button>
|
||||
)
|
||||
})
|
||||
} else {
|
||||
// 显示
|
||||
this.setState({
|
||||
hiddenButton: (
|
||||
<Button onClick={() => {
|
||||
self.isHidden = !self.isHidden;
|
||||
}}>
|
||||
<span><<</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>
|
||||
<span className='reload'>
|
||||
<Tooltip title='点击可刷新图层信息数据'>
|
||||
<span onClick={this.reload}><SyncOutlined /></span>
|
||||
</Tooltip>
|
||||
</span>
|
||||
</div>
|
||||
<Menu
|
||||
multiple
|
||||
@ -302,10 +425,10 @@ class LayerData extends React.Component {
|
||||
mode='inline'
|
||||
selectedKeys={this.state.selectLayerIdList}
|
||||
/>
|
||||
<div id='add-layer'>
|
||||
{/* <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> */}
|
||||
</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}>
|
||||
@ -355,6 +478,9 @@ class LayerData extends React.Component {
|
||||
</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> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user