From 79f38bf628df38ace38b885425bdfaded00aabda Mon Sep 17 00:00:00 2001 From: SmileXin <13622060635@163.com> Date: Fri, 21 Jun 2024 03:31:01 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=88=A0=E9=99=A4=E7=82=B9=E4=BD=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/index.js | 8 ++ src/pages/BaseMap/index.js | 286 +++++++++++++++++++++++++++++++++---- src/pages/BaseMap/pop.js | 101 +------------ 3 files changed, 264 insertions(+), 131 deletions(-) diff --git a/src/api/index.js b/src/api/index.js index 3102244c..da666830 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -56,6 +56,14 @@ export function getLayerPointsApi( params ) { }); } +// 获取地图单位的数据详细 +export function getDetailByIdApi( params ) { + return request('/api/basicMap/getDetailById', { + method: 'GET', + params: params + }); +} + // 获取大盘统计数据 export function getDashboardData() { return request('/api/dashboard/getDashboardData', { diff --git a/src/pages/BaseMap/index.js b/src/pages/BaseMap/index.js index 81fba472..f7576697 100644 --- a/src/pages/BaseMap/index.js +++ b/src/pages/BaseMap/index.js @@ -1,17 +1,21 @@ import React from 'react'; -import { Select, Input, Card, Col, Row, Button, message, Modal, Spin, Form } from 'antd'; +import { Select, Input, Card, Col, Row, Button, message, Modal, Spin, Form, Alert, Space } from 'antd'; +import {ExclamationCircleFilled } from '@ant-design/icons'; import LayerData from './LayerData'; // import LayerList from './LayerList'; import { AimOutlined } from '@ant-design/icons'; import Header from '../../components/Header/index.js'; -import { createPoint, queryUserLayers, getLayerPointsApi, getAllProvinceApi, getCityByProvinceApi, getDistrictByCityApi, getLayerShapesApi, getPointByAddressApi } from '../../api'; +import { createPoint, getDetailByIdApi, queryUserLayers, getLayerPointsApi, getAllProvinceApi, getCityByProvinceApi, getDistrictByCityApi, getLayerShapesApi, getPointByAddressApi, deletePoint } from '../../api'; import Pop from './pop' import { GaodeMap ,Scene, Heatmap, PolygonLayer, Marker, MarkerLayer, Popup, MouseLocation, CanvasLayer } from '@antv/l7'; +const { confirm } = Modal; // import { DrawPoint, DrawEvent } from '@antv/l7-draw'; import icon04 from '../../assets/icon/icon04.svg' import styles from './index.less'; +import pop from './pop'; +import { remove } from 'react-cookies'; const { Option } = Select; @@ -56,13 +60,20 @@ class BaseMap extends React.Component{ loading: false, markerLayerList: [], // 点位图层 isModalOpen: false, + isEditModalOpen: false, + editPointId: '', selectLayerList: [], pointAdd: {}, + pointEdit:{}, pointDrawer: null, newPointLocation: '', mouseLocation:{}, disabled: false, popParameter: {}, + isAlertOpen: false, + deletePointId: '', + pop: null, + removeMarker: null, } } startLoading = () => { @@ -128,8 +139,6 @@ class BaseMap extends React.Component{ item.value = 15; return item; }); - console.log('layerPointsData', layerPointsData); - if (nodeType === 1) { // 在地图上添加点位 this.setMarkers(layerPointsData, layerId); @@ -165,7 +174,7 @@ class BaseMap extends React.Component{ let map = this.state.map; let LabelsData = data || []; let markerLayer = new MarkerLayer({name: layerId}); - let el, popup, marker, icon; + let el, popup, marker, icon, popHtml; // 设置地图上的点位（图标） for (let i = 0; i < LabelsData.length; i++) { el = document.createElement('label'); @@ -186,39 +195,122 @@ class BaseMap extends React.Component{ // 设置弹框（点击事件） marker.on('click', (e) => { // 获取弹框内的html - this.setState({popParameter: LabelsData[i]}); - let popHtml = document.getElementById('custom-pop'); - document.getElementById('marker' + i).style.width = '32px'; - document.getElementById('marker' + i).style.height = '32px'; - popup = new Popup({ - offsets: [0, 30], - closeOnClick: true, - autoClose: true, - }) - .setLnglat(e.lngLat) - .setHTML(popHtml.innerHTML) - // console.log('edit-button', document.getElementsByClassName('edit-button')[0]); - popup.on('hide', () => { - document.getElementById('marker' + i).style.width = '26px'; - document.getElementById('marker' + i).style.height = '26px'; + this.setState({popParameter: LabelsData[i]},() => { + popHtml = document.getElementById('custom-pop'); + popup = new Popup({ + offsets: [0, 30], + closeOnClick: true, + autoClose: true, + }) + .setLnglat(e.lngLat) + .setHTML(popHtml.innerHTML) + document.getElementById('marker' + i).style.width = '32px'; + document.getElementById('marker' + i).style.height = '32px'; + // 给弹框添加事件 + popup.on('hide', () => { + document.getElementById('marker' + i).style.width = '26px'; + document.getElementById('marker' + i).style.height = '26px'; + }); + this.setState({pop: popup}) + popup.on('open', () => { + // 编辑按钮 + document.getElementsByClassName('edit-button')[0].onclick = () => { + // getDetailByIdApi({id:LabelsData[i].pointId,layerId:LabelsData[i].belongLayerId}).then((e) => { + // if (e.success) { + // console.log('获取点位详情成功',e); + // }else{ + // alert('获取点位详情失败'); + // console.log('获取点位详情失败',e); + // } + // }) + if (this.state.cityAdcode == '' && this.state.districtAdcode == '') { + message.error('请至少选择行政区域至城市再进行点位创建'); + return false; + } + let selectLayerList = this.refs.getLayerDataFun.state.selectLayerList; + selectLayerList = selectLayerList.filter((item) => { + if (item.isCustomize == 1) { + return item; + } + }) + if (selectLayerList.length == 0) { + message.error('请至少选中一个个人图层'); + return false; + }; + this.setState({ + selectLayerList:selectLayerList, + pointEdit: + { + pointId: LabelsData[i].pointId.toString(), + layerId: LabelsData[i].belongLayerId, + name: LabelsData[i].pointName, + // note: LabelsData[i].note, + address: LabelsData[i].address, + }, + isEditModalOpen: true + }) + }; + // 删除按钮 + document.getElementsByClassName('delete-button')[0].onclick = () => { + confirm({ + icon: , + title: '警告', + content: '是否确定删除点位，删除后信息将无法恢复', + onCancel(){ + }, + // 确定删除 + onOk(){ + self.deleteChannel(); + }, + }); + }; + }); + this.state.map.addPopup(popup); }); - popup.on('open', () => { - document.getElementsByClassName('edit-button')[0].onclick = () => {console.log('edit-button')}; - }); - this.state.map.addPopup(popup); - }); + }); markerLayer.addMarker(marker); } this.setState({ markerLayerList: [...this.state.markerLayerList, markerLayer], + removeMarker: marker, }) this.state.map.addMarkerLayer(markerLayer); } - hidePop = (pop) => { - // pop.hide(); + + // 删除按钮 + deleteChannel = () => { + this.startLoading(); + this.state.pop.hide(); + self = this; + let layerId = this.state.popParameter.belongLayerId; + deletePoint({id: this.state.popParameter.pointId}).then((e) => { + if(e.success){ + message.success('点位删除成功!'); + setTimeout(() => { + // 重新获取点位 + self.refs.getLayerDataFun.changeUnitAmount(layerId); + let filter = this.state.districtAdcode || this.state.cityAdcode; + self.refs.getLayerDataFun.getBasicLayerMenu(filter); + this.getLayerPoints(layerId, true, 1); + self.stopLoading(); + }, 500); + this.getLayerPoints(layerId, false, 1); + + }else{ + message.error('点位删除失败！'); + } + }); + this.setState({ + pop: null, + popParameter: {}, + }); } + + + + // 在地图上设置热力图 【经度，纬度】 // setHeatMap = (data, layerId) => { @@ -382,6 +474,7 @@ class BaseMap extends React.Component{ } // 清除子组件的已选图层 this.refs.getLayerDataFun.state.selectLayerList = []; + this.refs.getLayerDataFun.state.selectLayerIdList = []; // 清除所选市 this.onCityChange(); @@ -429,6 +522,7 @@ class BaseMap extends React.Component{ for (let i = 0; i < getLayers.length; i++) { self.state.map.removeMarkerLayer(getLayers[i]); } + this.refs.getLayerDataFun.state.selectLayerIdList = []; // 根据所选市获取区 this.getDistrictByCity(`${cityAdcode}`); this.refs.getLayerDataFun.getBasicLayerMenu(`${cityAdcode}`).then(() => { @@ -471,6 +565,7 @@ class BaseMap extends React.Component{ for (let i = 0; i < getLayers.length; i++) { self.state.map.removeMarkerLayer(getLayers[i]); } + this.refs.getLayerDataFun.state.selectLayerIdList = []; // this.state.map.remove(getOverlays); this.refs.getLayerDataFun.getBasicLayerMenu(`${provinceAdcode}`).then(() => { self.stopLoading(); @@ -674,7 +769,36 @@ class BaseMap extends React.Component{ newPointLocation: newPointLocation, }); }; + // 修改按钮 + editChannel = () => { + this.startLoading(); + self = this; + self.state.pop.hide(); + let popParameter = { + "layerId": this.state.pointEdit.layerId, + "name": this.state.pointEdit.name, + // "note": this.state.pointEdit.note, + "address": this.state.pointEdit.address, + "cityAdcode": this.state.cityAdcode, + "districtAdcode": this.state.districtAdcode, + "location": this.state.popParameter.location, + "provinceAdcode": this.state.provinceAdcode, + }; + setTimeout(() => { + // 重新获取点位 + self.getLayerPoints(self.state.popParameter.layerId, true, 1); + self.getLayerPoints(self.state.pointEdit.layerId, true, 1); + self.stopLoading(); + }, 500); + self.getLayerPoints(self.state.popParameter.layerId, false, 1); + self.getLayerPoints(self.state.pointEdit.layerId, false, 1); + self.setState({ + isEditModalOpen: false, + pop : null, + }); + } handleOk = (values) => { + this.startLoading(); // 开启双击地图放大 this.state.map.setMapStatus({ doubleClickZoom: true @@ -694,7 +818,8 @@ class BaseMap extends React.Component{ message.success('点位创建成功!'); setTimeout(() => { this.getLayerPoints(layerId, true, 1); - this.refs.getLayerDataFun.changeUnitAmount(this.state.pointAdd.layerId); + this.stopLoading(); + // this.refs.getLayerDataFun.changeUnitAmount(this.state.pointAdd.layerId); }, 1000);//true新增，1点 let filter = this.state.districtAdcode || this.state.cityAdcode; this.refs.getLayerDataFun.getBasicLayerMenu(filter) @@ -720,6 +845,12 @@ class BaseMap extends React.Component{ pointAdd: {}, }); }; + handleEditCancel = () => { + this.setState({ + isEditModalOpen: false, + pointEdit: {}, + }); + }; onLayerNameChange = (e) => { this.setState({ pointAdd: { @@ -730,6 +861,16 @@ class BaseMap extends React.Component{ }, }) } + onEditLayerNameChange = (e) => { + this.setState({ + pointEdit: { + "layerId": e, + "name": this.state.pointEdit.name, + "note": this.state.pointEdit.note, + "address": this.state.pointEdit.address, + }, + }) + } onPointAddNameChange = (e) => { this.setState({ pointAdd: { @@ -740,6 +881,16 @@ class BaseMap extends React.Component{ }, }) } + onEditPointAddNameChange = (e) => { + this.setState({ + pointEdit: { + "layerId": this.state.pointEdit.layerId, + "name": e.currentTarget.value, + "note": this.state.pointEdit.note, + "address": this.state.pointEdit.address, + }, + }) + } onPointAddAddressChange = (e) => { this.setState({ pointAdd: { @@ -750,6 +901,16 @@ class BaseMap extends React.Component{ }, }) } + onEditPointAddAddressChange = (e) => { + this.setState({ + pointEdit: { + "layerId": this.state.pointEdit.layerId, + "name": this.state.pointEdit.name, + "note": this.state.pointEdit.note, + "address": e.currentTarget.value, + }, + }) + } onLayerNoteChange = (e) => { this.setState({ pointAdd: { @@ -760,6 +921,16 @@ class BaseMap extends React.Component{ }, }) } + onEditLayerNoteChange = (e) => { + this.setState({ + pointEdit: { + "layerId": this.state.pointEdit.layerId, + "name": this.state.pointEdit.name, + "note": e.currentTarget.value, + "address": this.state.pointEdit.address, + }, + }) + } onFinishFailed = (errorInfo) => { console.log('Failed:', errorInfo); @@ -871,6 +1042,61 @@ class BaseMap extends React.Component{ + +
+ + + + + + + + + + + + +
+ {/* 地图 */} @@ -878,10 +1104,8 @@ class BaseMap extends React.Component{
- - +
- ) } diff --git a/src/pages/BaseMap/pop.js b/src/pages/BaseMap/pop.js index a8a4f124..70cb273f 100644 --- a/src/pages/BaseMap/pop.js +++ b/src/pages/BaseMap/pop.js @@ -5,13 +5,6 @@ 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 == ''){ @@ -39,102 +32,10 @@ function pop(e){ className="delete-button" >删除 - - - - } - /> + ) } 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 =
备注：{memoContent}
; - // } - } - - clicks = () => { - console.log('click'); - } - - - render(){ - return( - <> - {/*
- - -
-
- - 详情信息 -
-
名称：{popParameter.pointName}
-
地址：{popParameter.address || ''}
- {memoContent} -
-
- - -
- - - - } - /> -
*/} -// -// ) -// } - -// } - -// export default pop;*/} \ No newline at end of file