token

Merge pull request !4 from emSui/develop

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

package.json

@@ -51,5 +51,9 @@
       "post-merge": "post-npm-install",
       "post-rebase": "post-npm-install"
     }
-  }
+  },
+  "name": "bmw",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT"
 }

src/api/index.js

@@ -1,9 +1,9 @@
 import { request } from '@umijs/max';
-import loginStore from '../store/login.store';
+// import loginStore from '../store/login.store';
 
 // 获取登陆人
 export function getCurrentUser() {
-  let token = loginStore.token
+  // let token = loginStore.token
   return request('/api/user/getCurrentUser', {
     method: 'get'
   });
@@ -49,13 +49,21 @@ export function queryUserMenu() {
 
 // 基本图层
 // 获取图层明细点位数据/热力图数据
-export function getLayerPoints( params ) {
+export function getLayerPointsApi( params ) {
   return request('/api/basicMap/getLayerPoints', {
     method: 'GET',
     params: params
   });
 }
 
+// 获取地图单位的数据详细
+export function getDetailByIdApi( params ) {
+  return request('/api/basicMap/getDetailById', {
+    method: 'GET',
+    params: params
+  });
+}
+
 // 获取大盘统计数据
 export function getDashboardData() {
   return request('/api/dashboard/getDashboardData', {
@@ -87,6 +95,15 @@ export function updateLayer( params ) {
   });
 }
 
+// 基础地图修改点位
+export function updatePoint( data ) {
+  return request('/api/basicMap/updatePoint', {
+    method: 'POST',
+    data: data
+  });
+}
+
+
 // 基础地图删除涂层
 export function deleteLayer( params ) {
   return request('/api/basicMap/deleteLayer', {
@@ -112,8 +129,8 @@ export function createPoint( data ) {
 }
 
 // 获取基础图层菜单栏
-export function getBasicLayerMenu( params ) {
-  return request('/api/basicMap/createPoint', {
+export function getBasicLayerMenuApi( params ) {
+  return request('/api/basicMap/getBasicLayerMenu', {
     method: 'get',
     params: params
   });
@@ -126,6 +143,48 @@ export function queryUserLayers() {
   });
 }
 
+// 获取省
+export function getAllProvinceApi() {
+  return request('/api/mapCommon/getAllProvince', {
+    method: 'get',
+  });
+}
+
+// 获取市
+export function getCityByProvinceApi( params ) {
+  return request('/api/mapCommon/getCityByProvince', {
+    method: 'get',
+    params: params
+  });
+}
+
+// 获取区
+export function getDistrictByCityApi( params ) {
+  return request('/api/mapCommon/getDistrictByCity', {
+    method: 'get',
+    params: params
+  });
+}
+
+// 获取围栏图层数据
+export function getLayerShapesApi( params ) {
+  return request('/api/basicMap/getLayerShapes', {
+    method: 'get',
+    params: params
+  });
+}
+
+// 获取围栏图层数据
+export function getPointByAddressApi( params ) {
+  return request('/api/mapCommon/getPointByAddress', {
+    method: 'get',
+    params: params
+  });
+}
+
+
+
+
 
 
 

src/app.ts

@@ -25,7 +25,7 @@ import { RequestConfig } from '@umijs/max';
 export const request: RequestConfig = {
   requestInterceptors: [
     (url, options) => {
-      const token = localStorage.getItem('authToken'); // 从某处获取你的认证token，例如localStorage
+      const token = localStorage.getItem('pc-key'); // 从某处获取你的认证token，例如localStorage
       if (token) {
         const headers = {
           Authorization: `${token}`,

src/components/Guide/Guide.tsx

@@ -172,7 +172,7 @@ const Guide: React.FC<Props> = (props) => {
 
       {/* 下拉框 全国自定义点位数目图 */}
       <Row className={styles.filterWrap}>
-        <Col span={5} className={styles.filterLabel}>全国自定义点位数目图</Col>
+        <Col span={5} className={styles.filterLabel}>请选择需统计数目的图层</Col>
         <Col span={6}>
           <Select allowClear
             style = {{width: 310, color: '#2F66F2'}}

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;
 }
+.hiddenBtn{
+  overflow: hidden;
+  position: absolute;
+  height: 40px;
+  width: 40px;
+  margin: 20% 21.4%;
+  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: 20% 5%;
+  }
+
+}
 .layer-data-wrap {
-    overflow: hidden;
-    position: fixed;
-    top: 190px;
-    width: 270px;
+    // overflow: hidden;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: absolute;
+    // top: 190px;
+    width: 16.4%;
+    // width: 270px;
     max-height: 450px;
-    margin: 2% 4.2%;
+    // min-height: 100px;
+    margin: 20% 5%;
     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;
@@ -680,6 +793,12 @@ body {
   .ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper {
     color: inherit;
   }
+  .cursor-crosshair{
+    cursor: crosshair !important;
+  }
+  .pointer-events-none{
+    pointer-events: none;
+  }
   #root .ant-select-selector  {
     border-radius: 6px;
     border: none;
@@ -732,6 +851,47 @@ body {
   }
 
 // marker popup
+.popup-x{
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+  padding-right: 12.5%;  
+  font-size: 30px;
+  border: 0;
+  background-color: #FFFFFF;
+  // background-color: red;
+  position: absolute;
+  top: 1%;
+  left: 87%;
+}
+.popup-coat{
+  margin-bottom: 25px;
+}
+// 弹框样式
+.l7-popup .l7-popup-content{
+  pointer-events: auto;
+  min-width: 300px;
+  min-height: 210px;
+}
+.l7-popup.l7-popup-anchor-bottom{
+    min-width: 300px;
+    min-height: 210px;
+}
+// 弹框右上的关闭按钮
+.l7-popup .l7-popup-content .l7-popup-close-button{
+  position: static !important;
+  float: right;
+}
+// 右下角的两个按钮外的div
+.button-div{
+  width: 110px;
+  // display: flex;
+  // justify-content: space-between;
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  margin-left: 100%;
+}
 .popup-title {
   width: 100%;
   font-size: 14px;
@@ -742,7 +902,7 @@ body {
 }
 .popup-title-border{
   display: inline-block;
-  width: 5px;
+  width: 2px;
   height: 16px;
   background: #2F66F2;
   border-radius: 0px 0px 0px 0px;
@@ -785,3 +945,26 @@ body {
 .popup-del:hover {
   color: #f57272;
 }
+// 删除警告框
+.delete-alert{
+  width: 300px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+#custom-pop{
+  // display: none !important;
+}
+.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,24 +1,24 @@
 import React from 'react';
-import { Tree, Button, Modal, Form, Input, Radio, message, Menu } from 'antd';
-import axios from 'axios';
+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 } from '../../../api';
+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,34 +29,100 @@ class LayerData extends React.Component {
                 note: '',
             },
             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 axios.get('/api/basicMap/getBasicLayerMenu', {
-            params: {
-                adcode: adcode
-            }
-        }).then((e) => {
-            let basicLayeData = e.data.data;
-
+        if (adcode === undefined || adcode === null || adcode === "" || adcode === 'undefined') {
+            this.setState({
+                menuData: [],
+            })
+            return false
+        }
+        return getBasicLayerMenuApi({ adcode: adcode }).then((e) => {
+            let basicLayeData = e.data;
+            console.log('basicLayeData', e);
             // 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) => {
@@ -67,7 +133,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,
@@ -83,40 +149,19 @@ 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
         })
     }
     // 选中图层
-    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:[]})    // 将图层列表的数据清空（不清空组件不更新数据）
+        this.setState({ menuData: [] })    // 将图层列表的数据清空（不清空组件不更新数据）
         for (let i in menuData) {       // 将选中图层的小眼睛改为打开状态（重新写入数据）
             for (let j in menuData[i].children) {
                 if (e.key === menuData[i].children[j].key) {
@@ -138,25 +183,28 @@ class LayerData extends React.Component {
 
         // 将选中图层写入选中图层列表
         let selectLayerList = [];
+        let selectLayerIdList = [];
         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,
             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) {
@@ -177,17 +225,20 @@ class LayerData extends React.Component {
 
         // 将选中图层写入选中图层列表
         let selectLayerList = [];
+        let selectLayerIdList = [];
         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,
             menuData: [...menuData],
         })
     }
@@ -272,7 +323,7 @@ class LayerData extends React.Component {
         })
     };
     onLayerIogoImagePathChange = (e) => {
-                this.setState({
+        this.setState({
             addLayer: {
                 id: this.state.addLayer.id,
                 note: this.state.addLayer.note,
@@ -283,95 +334,158 @@ class LayerData extends React.Component {
         })
     };
     // 根据已选列表变化
-    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()} />);
+    changeSelectStatus = (menuData) => {
+        let selectLayerIdList = this.state.selectLayerIdList;
+        this.setState({
+            selectLayerIdList: []
+        })
+        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]) {
+                        selectLayerIdList[m] = menuData[i].children[j].key;
                     }
                 }
             }
+        }
+        this.setState({
+            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({
-                menuData: [...menuData]
+                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'
-                />
-                <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> */}
+            </>
         );
     }
 }

src/pages/BaseMap/pop.js

@@ -0,0 +1,41 @@
+import { Alert, Button, Space } from "antd";
+import {deletePoint} from '../../api'
+import { useState } from "react";
+import '../../index.less';
+
+
+function pop(e){
+    let memoContent = null;  
+    if(e.popParameter.memo == undefined || e.popParameter.memo == null || e.popParameter.memo == ''){
+        
+    }else{
+        e.popParameter.memo = <div class="popup-memo">备注：{memoContent}</div>;
+    }
+    return(
+        <>
+        <div id='custom-pop' >
+            <div className="popup-coat">
+                <div className="popup-title">
+                    <span className="popup-title-border"></span>
+                    详情信息
+                </div>
+                <div className="popup-name">名称：{e.popParameter.pointName}</div>
+                <div className="popup-address">地址：{e.popParameter.address || ''}</div>
+                {memoContent}
+            </div>
+            <div className="button-div">
+                <Button type="link" 
+                    className="edit-button"
+                    >编辑</Button>
+                <Button type="link" 
+                    danger 
+                    className="delete-button"
+                >删除</Button>
+            </div>
+            
+        </div>
+        </>
+    )
+}
+
+export default pop;

src/pages/Login/passwordLogin.js

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { passwordLogin } from '../../api';
 import '../../index.less';
 import loginStore from '../../store/login.store';
+import { setToken } from '../../utils/token'
 
 function Login (e) {
   let navigate = useNavigate();
@@ -11,10 +12,12 @@ function Login (e) {
     passwordLogin({phone: values.phone, password: values.password}).then((e) => {
         if (!e.success) {
             message.error(e.message);
-          } else {
-            let setToken = loginStore;
-            setToken.setAuthName(e.data.username);
-            setToken.setToken(e.data.token)
+          } else {debugger
+            // let setToken = loginStore;
+            // setToken.setAuthName(e.data.username);
+            // setToken.setToken(e.data.token)
+            setToken(e.data.token)
+            loginStore.setAuthName(e.data.username)
             navigate('/home');
           }
     })

src/store/login.store.js

@@ -8,17 +8,17 @@ class LoginStore {
         makeAutoObservable(this)
     }
     // token
-    get isLoggedIn() {
-        return !!this.token;
-      }
-    setToken = (data) => {
-       this.token = data;
-       localStorage.setItem('authToken', data);
-    }
-    clearToken() {
-        this.token = null;
-        localStorage.removeItem('authToken');
-    }
+    // get isLoggedIn() {
+    //     return !!this.token;
+    //   }
+    // setToken = (data) => {
+    //    this.token = data;
+    //    localStorage.setItem('authToken', data);
+    // }
+    // clearToken() {
+    //     this.token = null;
+    //     localStorage.removeItem('authToken');
+    // }
     // 登录名
     get authName() {
         return !!this.authName;