接口对接
This commit is contained in:
dzl
parent
224d58c7b1
commit
86fe781cea
@ -279,11 +279,11 @@ const columns = ref([
|
|||||||
dataIndex: 'zoneName'
|
dataIndex: 'zoneName'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'regionName',
|
key: 'operationRegionName',
|
||||||
title: '区域名称',
|
title: '区域名称',
|
||||||
width: 150,
|
width: 150,
|
||||||
align: 'center',
|
align: 'center',
|
||||||
dataIndex: 'regionName'
|
dataIndex: 'operationRegionName'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'simpleName',
|
key: 'simpleName',
|
||||||
@ -414,11 +414,11 @@ const search = () => {
|
|||||||
*/
|
*/
|
||||||
const feeConfigInfo = (record) => {
|
const feeConfigInfo = (record) => {
|
||||||
modalFreeKey.value = getGUID();
|
modalFreeKey.value = getGUID();
|
||||||
openTitle.value = "费用信息 - " + record['regionName']
|
openTitle.value = "费用信息 - " + record['operationRegionName']
|
||||||
open.value = true
|
open.value = true
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
if (formModel.value) {
|
if (formModel.value) {
|
||||||
formModel.value.openForm({ regionId: record['regionId'] });
|
formModel.value.openForm({ regionId: record['operationRegionId'] });
|
||||||
} else {
|
} else {
|
||||||
console.log('formModel is not ready yet');
|
console.log('formModel is not ready yet');
|
||||||
}
|
}
|
||||||
@ -445,11 +445,11 @@ const handleOkFeeModal = () => {
|
|||||||
*/
|
*/
|
||||||
const regionConfigInfo = (record) => {
|
const regionConfigInfo = (record) => {
|
||||||
modalOperateKey.value = getGUID();
|
modalOperateKey.value = getGUID();
|
||||||
openTitleConfig.value = "运营配置 - " + record['regionName']
|
openTitleConfig.value = "运营配置 - " + record['operationRegionName']
|
||||||
openConfig.value = true
|
openConfig.value = true
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
if (formModelConfig) {
|
if (formModelConfig) {
|
||||||
formModelConfig.value.openForm({ regionId: record['regionId'] });
|
formModelConfig.value.openForm({ regionId: record['operationRegionId'] });
|
||||||
} else {
|
} else {
|
||||||
console.log('formModel is not ready yet');
|
console.log('formModel is not ready yet');
|
||||||
}
|
}
|
||||||
@ -471,9 +471,9 @@ const handleOkConfgModal = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleEditORMap = (record) => {
|
const handleEditORMap = (record) => {
|
||||||
openORMapTitle.value = '绘制地图（' + record['regionName'] + '）';
|
openORMapTitle.value = '绘制地图（' + record['operationRegionName'] + '）';
|
||||||
const data = {
|
const data = {
|
||||||
regionId: record['regionId']
|
regionId: record['operationRegionId']
|
||||||
}
|
}
|
||||||
editORMapModel.value.showModal(data);
|
editORMapModel.value.showModal(data);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,309 +2,314 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
<a-modal
|
<a-modal
|
||||||
v-model:open="open"
|
v-model:open="open"
|
||||||
:title="openTitle"
|
:title="openTitle"
|
||||||
width="100%"
|
width="100%"
|
||||||
wrap-class-name="full-modal"
|
wrap-class-name="full-modal"
|
||||||
:footer="null"
|
:footer="null"
|
||||||
:afterClose="handleClose"
|
:afterClose="handleClose"
|
||||||
|
>
|
||||||
|
<div class="button-panel">
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
@click="onEditorClear"
|
||||||
|
>{{ buttonName }}</a-button>
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
@click="onEditorComplete"
|
||||||
|
>完成</a-button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="map-container"
|
||||||
|
style="width: auto; height: auto;"
|
||||||
>
|
>
|
||||||
<div class="button-panel">
|
<tlbs-map
|
||||||
<a-button type="primary" @click="onEditorClear">{{ buttonName }}</a-button>
|
ref="mapRef"
|
||||||
<a-button type="primary" @click="onEditorComplete">完成</a-button>
|
:api-key="config.map.apiKey"
|
||||||
</div>
|
:center="center"
|
||||||
<div class="map-container" style="width: auto; height: auto;">
|
zoom="16"
|
||||||
<tlbs-map
|
:control="control"
|
||||||
ref="mapRef"
|
:options="options"
|
||||||
:api-key="config.map.apiKey"
|
@map_inited="onMapInited"
|
||||||
:center="center"
|
>
|
||||||
zoom="16"
|
<tlbs-geometry-editor
|
||||||
:control="control"
|
ref="editorRef"
|
||||||
:options="options"
|
action-mode="draw"
|
||||||
@map_inited="onMapInited"
|
selectable
|
||||||
>
|
@draw_complete="onDrowComplet"
|
||||||
<tlbs-geometry-editor
|
@draw_error="onDrawError"
|
||||||
ref="editorRef"
|
@adjust_complete="onAdjustComplete"
|
||||||
action-mode="draw"
|
@adjust_error="onAdjustError"
|
||||||
selectable
|
@delete_complete="onDeleteComplete"
|
||||||
@draw_complete="onDrowComplet"
|
/>
|
||||||
@draw_error="onDrawError"
|
</tlbs-map>
|
||||||
@adjust_complete="onAdjustComplete"
|
</div>
|
||||||
@adjust_error="onAdjustError"
|
</a-modal>
|
||||||
@delete_complete="onDeleteComplete"
|
|
||||||
/>
|
|
||||||
</tlbs-map>
|
|
||||||
</div>
|
|
||||||
</a-modal>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, defineProps } from 'vue'
|
import { ref, reactive, defineProps } from 'vue'
|
||||||
import { callOperate } from '@/apis/call.js'
|
import { callOperate } from '@/apis/call.js'
|
||||||
import { message } from 'ant-design-vue'
|
import { message } from 'ant-design-vue'
|
||||||
import { isNullOrEmpty } from '@/utils/tools.js'
|
import { isNullOrEmpty } from '@/utils/tools.js'
|
||||||
import config from '@/utils/config.js'
|
import config from '@/utils/config.js'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
onCallBack: {
|
onCallBack: {
|
||||||
type: Function,
|
type: Function,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
openTitle: {
|
openTitle: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '' // Default value in case no openTitle is provided
|
default: '' // Default value in case no openTitle is provided
|
||||||
}
|
|
||||||
});
|
|
||||||
const open = ref(false);
|
|
||||||
const showModal = (data) => {
|
|
||||||
if (data) {
|
|
||||||
loadMap(data);
|
|
||||||
}
|
|
||||||
open.value = true;
|
|
||||||
};
|
|
||||||
const handleClose = () => {
|
|
||||||
open.value = false;
|
|
||||||
ClearEditor();
|
|
||||||
if (props.onCallBack) {
|
|
||||||
props.onCallBack(formData.value);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
defineExpose({ showModal });
|
|
||||||
|
|
||||||
const formData = ref({
|
|
||||||
"regionId": "",
|
|
||||||
"regionName": "",
|
|
||||||
"simpleName": "",
|
|
||||||
"zoneId": "",
|
|
||||||
"points": [],
|
|
||||||
"shapeType": 2, // 1:圆形 2:多边形
|
|
||||||
"radius": 0, // 圆形半径
|
|
||||||
});
|
|
||||||
|
|
||||||
let timer = null;
|
|
||||||
const loadMap = (dataRegion) => {
|
|
||||||
if (editorRef.value) {
|
|
||||||
clearTimeout(timer);
|
|
||||||
if (dataRegion) {
|
|
||||||
const { regionId } = dataRegion;
|
|
||||||
callOperate("/ebikeRegion/getRegionInfo/" + regionId, {}, "get").then((res) => {
|
|
||||||
if (res.code != 200) {
|
|
||||||
message.error(res.message)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
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:多边形
|
|
||||||
"radius": radius, // 圆形半径
|
|
||||||
}
|
|
||||||
loadGeometry();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
timer = setTimeout(() => {
|
|
||||||
loadMap(dataRegion);
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
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 open = ref(false);
|
||||||
|
const showModal = (data) => {
|
||||||
|
if (data) {
|
||||||
|
loadMap(data);
|
||||||
|
}
|
||||||
|
open.value = true;
|
||||||
|
};
|
||||||
|
const handleClose = () => {
|
||||||
|
open.value = false;
|
||||||
|
ClearEditor();
|
||||||
|
if (props.onCallBack) {
|
||||||
|
props.onCallBack(formData.value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
defineExpose({ showModal });
|
||||||
|
|
||||||
const mapRef = ref(null);
|
const formData = ref({
|
||||||
const center = ref( config.map.center );
|
"regionId": "",
|
||||||
const control = ref({ scale: {}, zoom: { position: 'topRight',},});
|
"regionName": "",
|
||||||
const options = ref({ renderOptions: { renderOptions: true, }});
|
"simpleName": "",
|
||||||
const editorRef = ref(null);
|
"zoneId": "",
|
||||||
const onMapInited = () => {
|
"points": [],
|
||||||
if (mapRef.value) {
|
"shapeType": 2, // 1:圆形 2:多边形
|
||||||
const windowWidth = window.innerWidth;
|
"radius": 0, // 圆形半径
|
||||||
const windowHeight = window.innerHeight;
|
});
|
||||||
const calculatedWidth = windowWidth - 60;
|
|
||||||
const calculatedHeight = windowHeight - 100;
|
|
||||||
// 调用地图实例的 resize 方法
|
|
||||||
const map = mapRef.value.map;
|
|
||||||
if (map) {
|
|
||||||
map.resize(calculatedWidth, calculatedHeight);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const buttonName = ref('清除');
|
let timer = null;
|
||||||
const onDrowComplet = (geomeytry) => {
|
const loadMap = (dataRegion) => {
|
||||||
//console.log("onDrowComplet",geomeytry);
|
if (editorRef.value) {
|
||||||
if(geomeytry.id){
|
clearTimeout(timer);
|
||||||
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
if (dataRegion) {
|
||||||
editorRef.value.editor.select([geomeytry.id]);
|
const { regionId } = dataRegion;
|
||||||
|
callOperate("/ebikeRegion/getOperationById?regionId=" + regionId, {}, "get").then((res) => {
|
||||||
|
if (res.code != 200) {
|
||||||
|
message.error(res.message)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
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:多边形
|
||||||
|
"radius": radius, // 圆形半径
|
||||||
|
}
|
||||||
|
loadGeometry();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
};
|
|
||||||
const onDrawError = (e) => {
|
|
||||||
ClearEditor();
|
|
||||||
editorRef.value.editor.stop();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onAdjustComplete = (geomeytry) => {
|
|
||||||
//console.log("onAdjustComplete",geomeytry);
|
|
||||||
};
|
|
||||||
const onAdjustError = (e) => {
|
|
||||||
ClearEditor();
|
|
||||||
loadGeometry();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onEditorClear = () => {
|
|
||||||
if(!isNullOrEmpty(shapeId)){
|
|
||||||
loadGeometry();
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
ClearEditor();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
const ClearEditor = () => {
|
timer = setTimeout(() => {
|
||||||
editorRef.value.editor.select([]);
|
loadMap(dataRegion);
|
||||||
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
|
}, 1000)
|
||||||
editorRef.value.circle.setGeometries([]);
|
|
||||||
editorRef.value.polygon.setGeometries([]);
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const onEditorComplete = () => {
|
let shapeId = null;
|
||||||
if(editorRef.value.editor.getSelectedList().length > 0){
|
const loadGeometry = () => {
|
||||||
const selectedList = editorRef.value.editor.getSelectedList();
|
const { points, shapeType, regionId, radius } = formData.value;
|
||||||
const geometry = selectedList[0];
|
shapeId = 'polygon' + regionId;
|
||||||
console.log("onEditorComplete",geometry);
|
if (shapeType == 1) {
|
||||||
if(geometry.id){
|
shapeId = 'circle' + regionId;
|
||||||
if(geometry.radius && geometry.center){
|
}
|
||||||
formData.value.radius = geometry.radius;
|
if (points) {
|
||||||
formData.value.points = [
|
if (shapeType == 1) {
|
||||||
{
|
const circleGeometries = [];//editorRef.value.circle.getGeometries();
|
||||||
"latitude": geometry.center.lat,
|
if (circleGeometries.length > 0) {
|
||||||
"longitude": geometry.center.lng,
|
circleGeometries.forEach((geometry) => {
|
||||||
}
|
editorRef.value.circle.remove(geometry); // 删除之前的图形数据
|
||||||
];
|
});
|
||||||
formData.value.shapeType = 1;
|
}
|
||||||
}
|
circleGeometries.push({
|
||||||
else if(geometry.paths){
|
id: shapeId, // 圆形图形数据的标志信息
|
||||||
formData.value.radius = 0;
|
styleId: 'circle', // 样式id
|
||||||
formData.value.points = geometry.paths.map((point) => {
|
radius: radius, // 圆形的半径
|
||||||
return {
|
center: new TMap.LatLng(points[0].latitude, points[0].longitude),
|
||||||
"latitude": point.lat,
|
properties: {
|
||||||
"longitude": point.lng,
|
// 圆形的属性数据
|
||||||
};
|
title: 'circle',
|
||||||
});
|
},
|
||||||
formData.value.points.push({
|
});
|
||||||
"latitude": geometry.paths[0].lat,
|
editorRef.value.circle.setGeometries(circleGeometries);
|
||||||
"longitude": geometry.paths[0].lng,
|
//设置视野范围
|
||||||
});
|
const mycircle = editorRef.value.circle.getGeometryById(shapeId);
|
||||||
formData.value.shapeType = 2;
|
const boundary = TMap.geometry.computeBoundingRectangle(mycircle.paths);
|
||||||
}
|
mapRef.value.map.fitBounds(boundary, {
|
||||||
if(!isNullOrEmpty(formData.value.regionId)){
|
padding: 100, // 设置地图边界的内边距
|
||||||
callOperate("/ebikeRegion/updateOperation", formData.value, "post").then((res) => {
|
});
|
||||||
if (res.code == 200) {
|
}
|
||||||
message.success(res.message, 3, handleClose);
|
else if (shapeType == 2) {
|
||||||
} else {
|
const paths = [];
|
||||||
message.error(res.message, 10);
|
points.forEach((point) => {
|
||||||
}
|
paths.push(new TMap.LatLng(point.latitude, point.longitude));
|
||||||
});
|
});
|
||||||
}
|
const polygonGeometries = [];//editorRef.value.polygon.getGeometries();
|
||||||
else
|
polygonGeometries.push({
|
||||||
{
|
id: shapeId, // 多边形图形数据的标志信息
|
||||||
handleClose();
|
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(config.map.center);
|
||||||
|
const control = ref({ scale: {}, zoom: { position: 'topRight', }, });
|
||||||
|
const options = ref({ renderOptions: { renderOptions: true, } });
|
||||||
|
const editorRef = ref(null);
|
||||||
|
const onMapInited = () => {
|
||||||
|
if (mapRef.value) {
|
||||||
|
const windowWidth = window.innerWidth;
|
||||||
|
const windowHeight = window.innerHeight;
|
||||||
|
const calculatedWidth = windowWidth - 60;
|
||||||
|
const calculatedHeight = windowHeight - 100;
|
||||||
|
// 调用地图实例的 resize 方法
|
||||||
|
const map = mapRef.value.map;
|
||||||
|
if (map) {
|
||||||
|
map.resize(calculatedWidth, calculatedHeight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const buttonName = ref('清除');
|
||||||
|
const onDrowComplet = (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) => {
|
||||||
|
ClearEditor();
|
||||||
|
editorRef.value.editor.stop();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onAdjustComplete = (geomeytry) => {
|
||||||
|
//console.log("onAdjustComplete",geomeytry);
|
||||||
|
};
|
||||||
|
const onAdjustError = (e) => {
|
||||||
|
ClearEditor();
|
||||||
|
loadGeometry();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onEditorClear = () => {
|
||||||
|
if (!isNullOrEmpty(shapeId)) {
|
||||||
|
loadGeometry();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ClearEditor();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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 = () => {
|
||||||
|
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
|
else if (geometry.paths) {
|
||||||
{
|
formData.value.radius = 0;
|
||||||
message.error("请先绘制区域！")
|
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;
|
||||||
}
|
}
|
||||||
|
debugger
|
||||||
|
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) => {
|
const onDeleteComplete = (geomeytry) => {
|
||||||
if(editorRef.value.polygon.getGeometries().length > 0){
|
if (editorRef.value.polygon.getGeometries().length > 0) {
|
||||||
const shapeId = editorRef.value.polygon.getGeometries()[0].id;
|
const shapeId = editorRef.value.polygon.getGeometries()[0].id;
|
||||||
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
||||||
editorRef.value.editor.select([shapeId]);
|
editorRef.value.editor.select([shapeId]);
|
||||||
}
|
}
|
||||||
else if(editorRef.value.circle.getGeometries().length > 0){
|
else if (editorRef.value.circle.getGeometries().length > 0) {
|
||||||
const shapeId = editorRef.value.circle.getGeometries()[0].id;
|
const shapeId = editorRef.value.circle.getGeometries()[0].id;
|
||||||
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
||||||
editorRef.value.editor.select([shapeId]);
|
editorRef.value.editor.select([shapeId]);
|
||||||
}
|
}
|
||||||
else
|
else {
|
||||||
{
|
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
|
||||||
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
|
|
||||||
// editorRef.value.circle.setGeometries([]);
|
// editorRef.value.circle.setGeometries([]);
|
||||||
// editorRef.value.polygon.setGeometries([]);
|
// editorRef.value.polygon.setGeometries([]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@ -318,13 +323,13 @@ import { ref, reactive, defineProps } from 'vue'
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: calc(100vh);
|
height: calc(100vh);
|
||||||
border-radius:0 !important;
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
.full-modal .ant-modal-body {
|
.full-modal .ant-modal-body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-panel{
|
.button-panel {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 55px;
|
bottom: 55px;
|
||||||
right: 35px;
|
right: 35px;
|
||||||
@ -334,7 +339,7 @@ import { ref, reactive, defineProps } from 'vue'
|
|||||||
background-color: rgb(255, 255, 255, 0.8);
|
background-color: rgb(255, 255, 255, 0.8);
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
.button-panel button{
|
.button-panel button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 0px !important;
|
border-radius: 0px !important;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user