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

package-lock.json

@@ -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",

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;
+    // overflow-y: auto !important;
-    scrollbar-width: none; /* Firefox */
+    // scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE 10+ */
+    // -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 ;
+}

src/pages/BaseMap/LayerData/index.js

@@ -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>&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>
+                            <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> */}
+            </>
         );
     }
 }

src/pages/BaseMap/index.js

@@ -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>