diff --git a/src/index.less b/src/index.less index 6fbe6c10..f465ae2c 100644 --- a/src/index.less +++ b/src/index.less @@ -680,6 +680,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 +738,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 +789,7 @@ body { } .popup-title-border{ display: inline-block; - width: 5px; + width: 2px; height: 16px; background: #2F66F2; border-radius: 0px 0px 0px 0px; @@ -785,3 +832,17 @@ 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; +} \ No newline at end of file diff --git a/src/pages/BaseMap/LayerData/index.js b/src/pages/BaseMap/LayerData/index.js index 6af0b50a..2c11dd1e 100644 --- a/src/pages/BaseMap/LayerData/index.js +++ b/src/pages/BaseMap/LayerData/index.js @@ -28,11 +28,13 @@ class LayerData extends React.Component { note: '', }, selectLayerList: [], + selectLayerIdList: [], } } // 获取基础图层菜单栏,获取列表数据 getBasicLayerMenu = (adcode) => { + return getBasicLayerMenuApi({adcode: adcode}).then((e) => { let basicLayeData = e.data; // MenuData @@ -48,6 +50,7 @@ class LayerData extends React.Component { this.setState ({ menuData: menuDataList, }) + this.changeSelectStatus(menuDataList); }); } @@ -86,27 +89,6 @@ class LayerData extends React.Component { }) } // 选中图层 - 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; @@ -132,6 +114,7 @@ class LayerData extends React.Component { // 将选中图层写入选中图层列表 let selectLayerList = []; + let selectLayerIdList = []; for (let m in e.selectedKeys) { selectLayerList.push({ // key: 0:顺序 ,1:图层id , 2:时间 , 3:名称 , 4:是否为自创图层 @@ -139,10 +122,12 @@ class LayerData extends React.Component { '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] }) } @@ -171,6 +156,7 @@ class LayerData extends React.Component { // 将选中图层写入选中图层列表 let selectLayerList = []; + let selectLayerIdList = []; for (let m in e.selectedKeys) { selectLayerList.push({ // key: 0:顺序 ,1:图层id , 2:时间 , 3:名称 , 4:是否为自创图层 @@ -178,10 +164,12 @@ class LayerData extends React.Component { '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], }) } @@ -277,25 +265,25 @@ 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(); + 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({ - menuData: [...menuData] - }) } + this.setState({ + selectLayerIdList: selectLayerIdList + }) } render() { @@ -312,6 +300,7 @@ class LayerData extends React.Component { onSelect={this.selectLayer} items={this.state.menuData} mode='inline' + selectedKeys={this.state.selectLayerIdList} />
+ {/* */}
+
+ + +
+
) } diff --git a/src/pages/BaseMap/pop.js b/src/pages/BaseMap/pop.js new file mode 100644 index 00000000..a8a4f124 --- /dev/null +++ b/src/pages/BaseMap/pop.js @@ -0,0 +1,140 @@ +import { Alert, Button, Space } from "antd"; +import {deletePoint} from '../../api' +import { useState } from "react"; +import '../../index.less'; + + +function pop(e){ + const [isAlertOpen, setIsAlertOpen] = useState(false); + + function deleteChannel(){ + console.log('delete'); + } + + + let memoContent = null; + if(e.popParameter.memo == undefined || e.popParameter.memo == null || e.popParameter.memo == ''){ + + }else{ + e.popParameter.memo = ; + } + return( + <> +
+
+
+ + 详情信息 +
+
名称:{e.popParameter.pointName}
+
地址:{e.popParameter.address || ''}
+ {memoContent} +
+
+ + +
+ + + + } + /> +
+ + ) +} + +export default pop; + + {/* import { Alert, Button, Space } from "antd"; +import {deletePoint} from '../../api' +import React, { useState } from "react"; + + +class pop extends React.Component{ + constructor(props){ + super(props); + this.state = { + isAlertOpen: false, + memoContent: null, + popParameter:{}, + } + } + + + componentDidMount = () => { + console.log('pop',popParameter); + // if(popParameter.memo == undefined || popParameter.memo == null || e.popParameter.memo == ''){ + + // }else{ + // memoContent = ; + // } + } + + clicks = () => { + console.log('click'); + } + + + render(){ + return( + <> + {/*
+ + +
+
+ + 详情信息 +
+
名称:{popParameter.pointName}
+
地址:{popParameter.address || ''}
+ {memoContent} +
+
+ + +
+ + + + } + /> +
*/} +// +// ) +// } + +// } + +// export default pop;*/} \ No newline at end of file