From 1772c14f47e679fdbd350621e6821e2bbd2078c8 Mon Sep 17 00:00:00 2001 From: SmileXin <13622060635@163.com> Date: Sun, 7 Jul 2024 13:53:24 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=88=86=E5=89=B2=E7=BA=BF=E3=80=81?= =?UTF-8?q?=E5=88=B7=E6=96=B0=E3=80=81=E5=8A=A0=E5=8F=B7=E3=80=81=E9=9A=90?= =?UTF-8?q?=E8=97=8F=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 18 +- src/index.less | 136 ++++++++++- src/pages/BaseMap/LayerData/index.js | 330 ++++++++++++++++++--------- src/pages/BaseMap/index.js | 18 +- 4 files changed, 374 insertions(+), 128 deletions(-) diff --git a/package-lock.json b/package-lock.json index a3d6a630..3c2dc6dd 100644 --- a/package-lock.json +++ b/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", @@ -16237,4 +16221,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/index.less b/src/index.less index f465ae2c..eca0a94f 100644 --- a/src/index.less +++ b/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: fixed; + height: 40px; + width: 40px; + top: 220px; + margin: 0 0 0 22%; + background: rgb(255, 255, 255); + box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); + border-radius: 10px; + opacity: 1; + z-index: 99; + text-align: center; + padding-left: 0; + padding-right: 0; + + // 动画 + animation-name: moveBtn; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-play-state: paused; + animation-timing-function: linear; + animation-direction: alternate; + animation-iteration-count: infinite; +} +@keyframes moveBtn{ + from { + // margin-left: 0; + } + 99%{ + // margin-left: 0; + } + to { + margin: 0 0 0 4%; + } + +} .layer-data-wrap { - overflow: hidden; + // overflow: hidden; + overflow-y: auto; + overflow-x: hidden; position: fixed; top: 190px; width: 270px; max-height: 450px; + // min-height: 100px; margin: 2% 4.2%; background: rgba(239,240,248,1); + // background: rgba(239,240,248,0); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); border-radius: 10px; opacity: 1; - z-index: 999; + // 禁止换行 + white-space:nowrap; + + z-index: 99; + // 动画 + animation-name: hiddenLayer; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-play-state: paused; + animation-timing-function: linear; + animation-direction: alternate; + animation-iteration-count: infinite; } + @keyframes hiddenLayer{ + from { + } + 99%{ + width: 0px; + } + to { + box-shadow: none; + width: 0px; + } + } + .anticon-double-left { + // 动画 + animation-name: turn; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-play-state: paused; + animation-timing-function: linear; + animation-direction: alternate; + animation-iteration-count: infinite; + } + @keyframes turn{ + from { + // transform: rotate(0deg); + } + 99%{ + // transform: rotate(0deg); + } + to { + transform: rotate(180deg); + } + } + .layer-data-wrap .menu-list{ + // width: 100%; + width: 270px; + + } + + // 隐藏滚轮条 .layer-data-wrap:hover{ - overflow-y: auto !important; - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE 10+ */ + // overflow-y: auto !important; + // scrollbar-width: none; /* Firefox */ + // -ms-overflow-style: none; /* IE 10+ */ } .layer-data-wrap:hover::-webkit-scrollbar { - display: none; /* Safari and Chrome */ + // display: none; /* Safari and Chrome */ } + .layer-name{ + // margin-right: 50%; + } + .add-layer-btn{ + float: right; + width: 20px; + height: 20px; + } + .add-layer-btn-disable{ + cursor: not-allowed; + float: right; + width: 20px; + height: 20px; + } + #add-layer{ width: 100%; text-align: center; @@ -845,4 +958,13 @@ 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 ; } \ No newline at end of file diff --git a/src/pages/BaseMap/LayerData/index.js b/src/pages/BaseMap/LayerData/index.js index 2c11dd1e..b1d1e6b5 100644 --- a/src/pages/BaseMap/LayerData/index.js +++ b/src/pages/BaseMap/LayerData/index.js @@ -1,23 +1,24 @@ import React from 'react'; -import { Tree, Button, Modal, Form, Input, Radio, message, Menu, Divider } from 'antd'; +import { Tree, Button, Modal, Form, Input, Radio, message, Menu, Divider, Tooltip } from 'antd'; import { - DownOutlined, - EyeOutlined, - EyeInvisibleOutlined, - UnderlineOutlined, - UnorderedListOutlined, + DownOutlined, + EyeOutlined, + EyeInvisibleOutlined, + UnorderedListOutlined, + SyncOutlined, + DoubleLeftOutlined, + PlusOutlined, } from '@ant-design/icons'; import SetLogoImagePath from './SetLogoImagePath' import { createLayer, getBasicLayerMenuApi } from '../../../api'; import '../../../index.less'; -import { label } from 'three/examples/jsm/nodes/Nodes.js'; class LayerData extends React.Component { - constructor () { - super (); + constructor() { + super(); this.state = { treeData: [], - menuData:[], //菜单数据 + menuData: [], //菜单数据 layerId: '', isModalOpen: false, addLayer: { @@ -29,31 +30,94 @@ class LayerData extends React.Component { }, selectLayerList: [], selectLayerIdList: [], + layer: null, + btn: null, + icon: null, } } + // 钩子函数 + componentDidMount = () => { + let layer = document.querySelector('.layer-data-wrap'); + let btn = document.querySelector('.hiddenBtn'); + let icon = document.querySelector('.anticon-double-left'); + + // 添加监听事件让其在动画结束后停止(paused状态) + // layer.onanimationiteration = this.paused(layer); + layer.addEventListener('animationiteration', () => { layer.style.animationPlayState = 'paused' }); + btn.addEventListener('animationiteration', () => { btn.style.animationPlayState = 'paused' }); + icon.addEventListener('animationiteration', () => { icon.style.animationPlayState = 'paused' }); + // layer.addEventListener('animationstart',paused(layer)); + // btn.addEventListener('animationstart',paused(btn)); + // icon.addEventListener('animationstart',paused(icon)); + + this.setState({ + layer: layer, + btn: btn, + icon: icon, + }) + } + // 获取基础图层菜单栏，获取列表数据 getBasicLayerMenu = (adcode) => { - return getBasicLayerMenuApi({adcode: adcode}).then((e) => { + return getBasicLayerMenuApi({ adcode: adcode }).then((e) => { let basicLayeData = e.data; + console.log('basicLayeData', basicLayeData); // MenuData let menuDataList = []; for (var m in basicLayeData) { + let lab = null; + // if (basicLayeData[m].esIndex == "personal_point_layer") + if (m == 0){ + lab = <> +
+ + {basicLayeData[m].name} + + = 5 ? 'hideItem' : 'add-layer-btn' }> + + + + + + + + + +
+ ; + }else{ + lab = basicLayeData[m].name; + } + menuDataList.push({ + type: 'divider', + }, { key: basicLayeData[m].id, - label: basicLayeData[m].name, - icon: , + // label: basicLayeData[m].name, + label: lab, + icon: , children: this.getLayerList(basicLayeData[m].layerList), - }) + }); } - this.setState ({ + this.setState({ menuData: menuDataList, }) this.changeSelectStatus(menuDataList); }); } - + + addLayerHandle = (e) => { + // 阻止冒泡 + e.stopPropagation(); + console.log('addLayerHandle', e); + this.showModal(); + } + disableBtn = (e) => { + // 阻止冒泡 + e.stopPropagation(); + } // 获取图层列表 getLayerList = (layerList, i) => { @@ -64,7 +128,7 @@ class LayerData extends React.Component { key: i + '-' + layerList[i].id + '-' + new Date() + '-' + layerList[i].name + '(' + layerList[i].geoUnitAmount + ')' + '-' + layerList[i].isCustomize, label: layerList[i].name + '(' + layerList[i].geoUnitAmount + ')', // icon 分别为图标和小眼睛（是否显示该图层），后续在选择函数中修改 - icon:[,], + icon: [, ], // icon:({ selected }) => (selected ? [,] // : [,]), typee: layerList[i].type, @@ -80,11 +144,11 @@ class LayerData extends React.Component { for (let i in menu) { for (let j in menu[i].children) { if (layerId == menu[i].children[j].key.split('-')[1]) { - menu[i].children[j].title = 'ooo' ; + menu[i].children[j].title = 'ooo'; } } } - this.setState ({ + this.setState({ menuData: menu }) } @@ -92,7 +156,7 @@ class LayerData extends React.Component { selectLayer = (e) => { // 修改选中状态 let menuData = this.state.menuData; - this.setState({menuData:[]}) // 将图层列表的数据清空（不清空组件不更新数据） + this.setState({ menuData: [] }) // 将图层列表的数据清空（不清空组件不更新数据） for (let i in menuData) { // 将选中图层的小眼睛改为打开状态（重新写入数据） for (let j in menuData[i].children) { if (e.key === menuData[i].children[j].key) { @@ -118,24 +182,24 @@ class LayerData extends React.Component { for (let m in e.selectedKeys) { selectLayerList.push({ // key: 0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层 - 'value' : e.selectedKeys[m].split('-')[1], - 'label' : e.selectedKeys[m].split('-')[3], - 'isCustomize' : e.selectedKeys[m].split('-')[4], + 'value': e.selectedKeys[m].split('-')[1], + 'label': e.selectedKeys[m].split('-')[3], + 'isCustomize': e.selectedKeys[m].split('-')[4], }) selectLayerIdList.push(e.selectedKeys[m]) } this.setState({ layerId: layerId, selectLayerList: selectLayerList, - selectLayerIdList : selectLayerIdList, + selectLayerIdList: selectLayerIdList, menuData: [...menuData] }) } // 取消选中图层 - deselectlayer = (e) =>{ + deselectlayer = (e) => { // 修改选中状态 let menuData = this.state.menuData; - this.setState({menuData:[]}) + this.setState({ menuData: [] }) for (let i in menuData) { for (let j in menuData[i].children) { if (e.key === menuData[i].children[j].key) { @@ -160,16 +224,16 @@ class LayerData extends React.Component { for (let m in e.selectedKeys) { selectLayerList.push({ // key: 0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层 - 'value' : e.selectedKeys[m].split('-')[1], - 'label' : e.selectedKeys[m].split('-')[3], - 'isCustomize' : e.selectedKeys[m].split('-')[4], + 'value': e.selectedKeys[m].split('-')[1], + 'label': e.selectedKeys[m].split('-')[3], + 'isCustomize': e.selectedKeys[m].split('-')[4], }) selectLayerIdList.push(e.selectedKeys[m]) } this.setState({ layerId: layerId, selectLayerList: selectLayerList, - selectLayerIdList : selectLayerIdList, + selectLayerIdList: selectLayerIdList, menuData: [...menuData], }) } @@ -254,7 +318,7 @@ class LayerData extends React.Component { }) }; onLayerIogoImagePathChange = (e) => { - this.setState({ + this.setState({ addLayer: { id: this.state.addLayer.id, note: this.state.addLayer.note, @@ -272,10 +336,10 @@ class LayerData extends React.Component { }) if (selectLayerIdList.length <= 0) return; // 修改选中状态 - for(let i in menuData){ - for(let j in menuData[i].children){ - for(let m in selectLayerIdList){ - if(selectLayerIdList[m].split('-')[1] === menuData[i].children[j].key.split('-')[1]){ + for (let i in menuData) { + for (let j in menuData[i].children) { + for (let m in selectLayerIdList) { + if (selectLayerIdList[m].split('-')[1] === menuData[i].children[j].key.split('-')[1]) { selectLayerIdList[m] = menuData[i].children[j].key; } } @@ -285,76 +349,138 @@ class LayerData extends React.Component { selectLayerIdList: selectLayerIdList }) } + // 点击按钮重新加载 + reload = () => { + console.log('reload'); + // 重新加载业务 + + // loading效果 + this.props.startLoading(); + setTimeout(() => { + this.props.stopLoading(); + // 提示框 + message.success('图层数据已刷新！'); + }, 2000); + + }; + // 根据情况改变隐藏按钮 + hiddenButtonHandle = () => { + let self = this; + if (this.state.isHidden) { + // 隐藏 + this.setState({ + hiddenButton: ( + + ) + }) + } else { + // 显示 + this.setState({ + hiddenButton: ( + + ) + }) + } + }; + 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 ( -
-
-
0 ? 'showItem layer-data-title' : 'hideItem layer-data-title'}> - 图层数据 -
- -
- -
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
+ <> +
+
+
0 ? 'showItem layer-data-title' : 'hideItem layer-data-title'}> + 图层数据 + + + + + +
+ + {/*
+ +
*/} +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + {/* */} + ); } } diff --git a/src/pages/BaseMap/index.js b/src/pages/BaseMap/index.js index b8cfa993..82546e12 100644 --- a/src/pages/BaseMap/index.js +++ b/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 (
@@ -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} /> + {/* */}