From 61d4a822ba6801883f2634eae6a2893f9a601108 Mon Sep 17 00:00:00 2001 From: LHG <553198475@qq.com> Date: Wed, 16 Apr 2025 09:18:28 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8C=BA=E5=9F=9F=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E5=92=8C=E5=9C=B0=E5=9B=BE=E9=80=89=E7=82=B9=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/Urban/OperateRegion/index.vue | 5 +- .../Urban/OperateRegion/operateRegionMap.vue | 291 +++++++++++------- .../views/Urban/OperateRegionAdd/index.vue | 25 +- .../form/operateregion/OperateAddForm.vue | 145 +++++---- ebike-operate/vite.config.js | 6 +- 5 files changed, 279 insertions(+), 193 deletions(-) diff --git a/ebike-operate/src/views/Urban/OperateRegion/index.vue b/ebike-operate/src/views/Urban/OperateRegion/index.vue index b750836..a7b0e73 100644 --- a/ebike-operate/src/views/Urban/OperateRegion/index.vue +++ b/ebike-operate/src/views/Urban/OperateRegion/index.vue @@ -421,9 +421,10 @@ const feeConfigInfo = (record) => { * 费用配置modal确定 */ const handleOkFeeModal = () => { - isOkButtonDisabled.value = true; + // isOkButtonDisabled.value = true; formModel.value.formSave((data => { - isOkButtonDisabled.value = false; + console.log(data) + // isOkButtonDisabled.value = false; open.value = false; if (data['code'] == 200) { getData() diff --git a/ebike-operate/src/views/Urban/OperateRegion/operateRegionMap.vue b/ebike-operate/src/views/Urban/OperateRegion/operateRegionMap.vue index c5cb1e6..118b705 100644 --- a/ebike-operate/src/views/Urban/OperateRegion/operateRegionMap.vue +++ b/ebike-operate/src/views/Urban/OperateRegion/operateRegionMap.vue @@ -10,8 +10,7 @@ :afterClose="handleClose" >
- {{ buttonName }} - 清除 + {{ buttonName }} 完成
@@ -27,16 +26,12 @@
@@ -68,21 +63,24 @@ }; const handleClose = () => { open.value = false; + ClearEditor(); if (props.onCallBack) { - props.onCallBack(""); + props.onCallBack(formData.value); } }; defineExpose({ showModal }); const formData = ref({ + "regionId": "", + "regionName": "", + "simpleName": "", + "zoneId": "", "points": [], "shapeType": 2, // 1:圆形 2:多边形 - "regionId": "", "radius": 0, // 圆形半径 }); let timer = null; - let shapeId = null; const loadMap = (dataRegion) => { if (editorRef.value) { clearTimeout(timer); @@ -93,73 +91,17 @@ message.error(res.message) return } - const { points, shapeType, radius } = res.data; + const { regionName, simpleName, zoneId, points, shapeType, radius } = res.data; formData.value = { + "regionId": regionId, + "regionName": regionName, + "simpleName": simpleName, + "zoneId": zoneId, "points": points, "shapeType": shapeType, // 1:圆形 2:多边形 - "regionId": regionId, "radius": radius, // 圆形半径 } - let shapeId = 'polygon' + regionId; - if (shapeType == 1) { - shapeId = 'circle' + regionId; - } - if (points) { - if(shapeType == 1){ - const circleGeometries = [];//editorRef.value.circle.getGeometries(); - if (circleGeometries.length > 0) { - circleGeometries.forEach((geometry) => { - editorRef.value.circle.remove(geometry); // 删除之前的图形数据 - }); - } - circleGeometries.push({ - id: shapeId, // 圆形图形数据的标志信息 - styleId: 'circle', // 样式id - radius: radius, // 圆形的半径 - center: new TMap.LatLng(points[0].latitude, points[0].longitude), - properties: { - // 圆形的属性数据 - title: 'circle', - }, - }); - editorRef.value.circle.setGeometries(circleGeometries); - //设置视野范围 - const mycircle = editorRef.value.circle.getGeometryById(shapeId); - const boundary = TMap.geometry.computeBoundingRectangle(mycircle.paths); - mapRef.value.map.fitBounds(boundary,{ - padding: 100, // 设置地图边界的内边距 - }); - } - else if(shapeType == 2){ - const paths = []; - points.forEach((point) => { - paths.push(new TMap.LatLng(point.latitude, point.longitude)); - }); - const polygonGeometries = [];//editorRef.value.polygon.getGeometries(); - polygonGeometries.push({ - id: shapeId, // 多边形图形数据的标志信息 - styleId: 'fill', // 样式id - paths, // 多边形的位置信息 - properties: { - // 多边形的属性数据 - title: 'polygon', - }, - }); - editorRef.value.polygon.setGeometries(polygonGeometries); - // var position = TMap.geometry.computeCentroid(paths); - // mapRef.value.map.setCenter(position); - //设置视野范围 - const mypolygon = editorRef.value.polygon.getGeometryById(shapeId); - const boundary = TMap.geometry.computeBoundingRectangle(mypolygon.paths); - mapRef.value.map.fitBounds(boundary,{ - padding: 100, // 设置地图边界的内边距 - }); - } - console.log('editorRef', editorRef.value) - buttonName.value = '重新选择区域'; - editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT); - editorRef.value.editor.select([shapeId]); - } + loadGeometry(); }); } } @@ -171,39 +113,75 @@ } }; + let shapeId = null; + const loadGeometry = () => { + const { points, shapeType, regionId, radius } = formData.value; + shapeId = 'polygon' + regionId; + if (shapeType == 1) { + shapeId = 'circle' + regionId; + } + if (points) { + if(shapeType == 1){ + const circleGeometries = [];//editorRef.value.circle.getGeometries(); + if (circleGeometries.length > 0) { + circleGeometries.forEach((geometry) => { + editorRef.value.circle.remove(geometry); // 删除之前的图形数据 + }); + } + circleGeometries.push({ + id: shapeId, // 圆形图形数据的标志信息 + styleId: 'circle', // 样式id + radius: radius, // 圆形的半径 + center: new TMap.LatLng(points[0].latitude, points[0].longitude), + properties: { + // 圆形的属性数据 + title: 'circle', + }, + }); + editorRef.value.circle.setGeometries(circleGeometries); + //设置视野范围 + const mycircle = editorRef.value.circle.getGeometryById(shapeId); + const boundary = TMap.geometry.computeBoundingRectangle(mycircle.paths); + mapRef.value.map.fitBounds(boundary,{ + padding: 100, // 设置地图边界的内边距 + }); + } + else if(shapeType == 2){ + const paths = []; + points.forEach((point) => { + paths.push(new TMap.LatLng(point.latitude, point.longitude)); + }); + const polygonGeometries = [];//editorRef.value.polygon.getGeometries(); + polygonGeometries.push({ + id: shapeId, // 多边形图形数据的标志信息 + styleId: 'polygon', // 样式id + paths, // 多边形的位置信息 + properties: { + // 多边形的属性数据 + title: 'polygon', + }, + }); + editorRef.value.polygon.setGeometries(polygonGeometries); + // var position = TMap.geometry.computeCentroid(paths); + // mapRef.value.map.setCenter(position); + //设置视野范围 + const mypolygon = editorRef.value.polygon.getGeometryById(shapeId); + const boundary = TMap.geometry.computeBoundingRectangle(mypolygon.paths); + mapRef.value.map.fitBounds(boundary,{ + padding: 100, // 设置地图边界的内边距 + }); + } + buttonName.value = '重置'; + editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT); + editorRef.value.editor.select([shapeId]); + } + } + const mapRef = ref(null); const center = ref({ lat: 30.633158, lng: 103.974997 }); const control = ref({ scale: {}, zoom: { position: 'topRight',},}); const options = ref({ renderOptions: { renderOptions: true, }}); const editorRef = ref(null); - const styles =ref({ - polygon: { - drawing:{ - color: 'rgba(233,233,233,0.8)', // 面填充色 - showBorder: false, // 是否显示拔起面的边线 - borderColor: 'rgba(233,233,233,1)', // 边线颜色 - }, - selected: { - color: 'rgba(41,91,255,0.16)', // 选中时的填充色 - showBorder: true, // 是否显示拔起面的边线 - borderColor: 'rgba(41,91,255,1)', // 边线颜色 - } - }, - circle: { - drawing: { - color: 'rgba(233,233,233,0.8)', // 面填充色 - showBorder: false, // 是否显示拔起面的边线 - borderColor: 'rgba(233,233,233,1)', // 边线颜色 - borderWidth: 2, - }, - selected: { - color: 'rgba(41,91,255,0.16)', // 选中时的填充色 - showBorder: true, // 是否显示拔起面的边线 - borderColor: 'rgba(41,91,255,1)', // 边线颜色 - borderWidth: 2, - } - }, - }); const onMapInited = () => { if (mapRef.value) { const windowWidth = window.innerWidth; @@ -218,36 +196,113 @@ } }; - const buttonName = ref('选择区域'); - + const buttonName = ref('清除'); const onDrowComplet = (geomeytry) => { - console.log("onDrowComplet",geomeytry); - }; - const onAdjustComplete = (geomeytry) => { - console.log("onAdjustComplete",geomeytry); + //console.log("onDrowComplet",geomeytry); + if(geomeytry.id){ + editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT); + editorRef.value.editor.select([geomeytry.id]); + } }; const onDrawError = (e) => { - console.log("onDrawError",e); + ClearEditor(); + editorRef.value.editor.stop(); + }; + + const onAdjustComplete = (geomeytry) => { + //console.log("onAdjustComplete",geomeytry); + }; + const onAdjustError = (e) => { + ClearEditor(); + loadGeometry(); }; - const onEditorChange = () => { + const onEditorClear = () => { if(!isNullOrEmpty(shapeId)){ - editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW); - editorRef.value.editor.remove([shapeId]); - shapeId = null; + loadGeometry(); } else { - editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW); + ClearEditor(); } } - const onEditorClear = () => { - console.log("onEditorClear",editorRef.value.editor.getOverlayList()); + + const ClearEditor = () => { + editorRef.value.editor.select([]); + editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW); + editorRef.value.circle.setGeometries([]); + editorRef.value.polygon.setGeometries([]); } const onEditorComplete = () => { - console.log("onEditorOver",editorRef.value.editor.getOverlayList()); + if(editorRef.value.editor.getSelectedList().length > 0){ + const selectedList = editorRef.value.editor.getSelectedList(); + const geometry = selectedList[0]; + console.log("onEditorComplete",geometry); + if(geometry.id){ + if(geometry.radius && geometry.center){ + formData.value.radius = geometry.radius; + formData.value.points = [ + { + "latitude": geometry.center.lat, + "longitude": geometry.center.lng, + } + ]; + formData.value.shapeType = 1; + } + else if(geometry.paths){ + formData.value.radius = 0; + formData.value.points = geometry.paths.map((point) => { + return { + "latitude": point.lat, + "longitude": point.lng, + }; + }); + formData.value.points.push({ + "latitude": geometry.paths[0].lat, + "longitude": geometry.paths[0].lng, + }); + formData.value.shapeType = 2; + } + if(!isNullOrEmpty(formData.value.regionId)){ + callOperate("/ebikeRegion/updateOperation", formData.value, "post").then((res) => { + if (res.code == 200) { + message.success(res.message, 3, handleClose); + } else { + message.error(res.message, 10); + } + }); + } + else + { + handleClose(); + } + } + } + else + { + message.error("请先绘制区域!") + } } + + const onDeleteComplete = (geomeytry) => { + if(editorRef.value.polygon.getGeometries().length > 0){ + const shapeId = editorRef.value.polygon.getGeometries()[0].id; + editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT); + editorRef.value.editor.select([shapeId]); + } + else if(editorRef.value.circle.getGeometries().length > 0){ + const shapeId = editorRef.value.circle.getGeometries()[0].id; + editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT); + editorRef.value.editor.select([shapeId]); + } + else + { + editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW); + // editorRef.value.circle.setGeometries([]); + // editorRef.value.polygon.setGeometries([]); + } + };