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"
>
@@ -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([]);
+ }
+ };