Compare commits
12 Commits
281de0492e
...
34ef7c42a6
Author | SHA1 | Date | |
---|---|---|---|
34ef7c42a6 | |||
![]() |
4697f77226 | ||
798c0c3565 | |||
1772c14f47 | |||
![]() |
a10cb62000 | ||
ffe9a87243 | |||
79f38bf628 | |||
4abe7c1ae5 | |||
![]() |
28b6e6941f | ||
![]() |
11d846c8cb | ||
![]() |
15fd8e623c | ||
![]() |
7ebef9625f |
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",
|
||||
|
@ -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"
|
||||
}
|
||||
|
@ -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
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -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}`,
|
||||
|
@ -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'}}
|
||||
|
211
src/index.less
211
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;
|
||||
top: 190px;
|
||||
width: 270px;
|
||||
max-height: 450px;
|
||||
margin: 2% 4.2%;
|
||||
background: rgba(239,240,248,1);
|
||||
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: 999;
|
||||
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;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
// top: 190px;
|
||||
width: 16.4%;
|
||||
// width: 270px;
|
||||
max-height: 450px;
|
||||
// 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;
|
||||
// 禁止换行
|
||||
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 ;
|
||||
}
|
@ -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,
|
||||
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
|
||||
if (adcode === undefined || adcode === null || adcode === "" || adcode === 'undefined') {
|
||||
this.setState({
|
||||
menuData: [],
|
||||
})
|
||||
return false
|
||||
}
|
||||
}).then((e) => {
|
||||
let basicLayeData = e.data.data;
|
||||
|
||||
return getBasicLayerMenuApi({ adcode: adcode }).then((e) => {
|
||||
let basicLayeData = e.data;
|
||||
console.log('basicLayeData', e);
|
||||
// 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),
|
||||
})
|
||||
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;
|
||||
}
|
||||
this.setState ({
|
||||
|
||||
menuDataList.push({
|
||||
type: 'divider',
|
||||
}, {
|
||||
key: basicLayeData[m].id,
|
||||
// label: basicLayeData[m].name,
|
||||
label: lab,
|
||||
icon: <UnorderedListOutlined />,
|
||||
children: this.getLayerList(basicLayeData[m].layerList),
|
||||
});
|
||||
}
|
||||
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 ({
|
||||
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,
|
||||
menuData: menu
|
||||
})
|
||||
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],
|
||||
})
|
||||
}
|
||||
@ -283,33 +334,92 @@ class LayerData extends React.Component {
|
||||
})
|
||||
};
|
||||
// 根据已选列表变化
|
||||
changeSelectStatus = () => {
|
||||
for (let n in this.state.selectLayerList) {
|
||||
changeSelectStatus = (menuData) => {
|
||||
let selectLayerIdList = this.state.selectLayerIdList;
|
||||
this.setState({
|
||||
selectLayerIdList: []
|
||||
})
|
||||
if (selectLayerIdList.length <= 0) return;
|
||||
// 修改选中状态
|
||||
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()} />);
|
||||
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({
|
||||
menuData: [...menuData]
|
||||
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
|
||||
@ -318,11 +428,12 @@ class LayerData extends React.Component {
|
||||
onSelect={this.selectLayer}
|
||||
items={this.state.menuData}
|
||||
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}>
|
||||
@ -333,8 +444,8 @@ class LayerData extends React.Component {
|
||||
message: '请输入图层名称!',
|
||||
}
|
||||
]}>
|
||||
<Input name='id' type='hidden' value={this.state.addLayer.id}/>
|
||||
<Input name='name' value={this.state.addLayer.name} onChange={this.onLayerNameChange}/>
|
||||
<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={[
|
||||
{
|
||||
@ -367,11 +478,14 @@ class LayerData extends React.Component {
|
||||
</Form.Item>
|
||||
<Form.Item label="图层备注">
|
||||
<Input.TextArea name='note' value={this.state.addLayer.note} onChange={this.onLayerNoteChange}
|
||||
style={{height: '120px'}}/>
|
||||
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> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
File diff suppressed because it is too large
Load Diff
41
src/pages/BaseMap/pop.js
Normal file
41
src/pages/BaseMap/pop.js
Normal file
@ -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;
|
@ -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');
|
||||
}
|
||||
})
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user