接口对接

This commit is contained in:
dzl 2025-05-07 09:51:29 +08:00
parent 224d58c7b1
commit 86fe781cea
2 changed files with 302 additions and 297 deletions

View File

@ -279,11 +279,11 @@ const columns = ref([
dataIndex: 'zoneName'
},
{
key: 'regionName',
key: 'operationRegionName',
title: '区域名称',
width: 150,
align: 'center',
dataIndex: 'regionName'
dataIndex: 'operationRegionName'
},
{
key: 'simpleName',
@ -414,11 +414,11 @@ const search = () => {
*/
const feeConfigInfo = (record) => {
modalFreeKey.value = getGUID();
openTitle.value = "费用信息 - " + record['regionName']
openTitle.value = "费用信息 - " + record['operationRegionName']
open.value = true
nextTick(() => {
if (formModel.value) {
formModel.value.openForm({ regionId: record['regionId'] });
formModel.value.openForm({ regionId: record['operationRegionId'] });
} else {
console.log('formModel is not ready yet');
}
@ -445,11 +445,11 @@ const handleOkFeeModal = () => {
*/
const regionConfigInfo = (record) => {
modalOperateKey.value = getGUID();
openTitleConfig.value = "运营配置 - " + record['regionName']
openTitleConfig.value = "运营配置 - " + record['operationRegionName']
openConfig.value = true
nextTick(() => {
if (formModelConfig) {
formModelConfig.value.openForm({ regionId: record['regionId'] });
formModelConfig.value.openForm({ regionId: record['operationRegionId'] });
} else {
console.log('formModel is not ready yet');
}
@ -471,9 +471,9 @@ const handleOkConfgModal = () => {
}
const handleEditORMap = (record) => {
openORMapTitle.value = '绘制地图(' + record['regionName'] + '';
openORMapTitle.value = '绘制地图(' + record['operationRegionName'] + '';
const data = {
regionId: record['regionId']
regionId: record['operationRegionId']
}
editORMapModel.value.showModal(data);
}

View File

@ -1,310 +1,315 @@
<template>
<div>
<a-modal
v-model:open="open"
:title="openTitle"
width="100%"
wrap-class-name="full-modal"
:footer="null"
:afterClose="handleClose"
<a-modal
v-model:open="open"
:title="openTitle"
width="100%"
wrap-class-name="full-modal"
:footer="null"
: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">
<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;">
<tlbs-map
ref="mapRef"
:api-key="config.map.apiKey"
:center="center"
zoom="16"
:control="control"
:options="options"
@map_inited="onMapInited"
>
<tlbs-geometry-editor
ref="editorRef"
action-mode="draw"
selectable
@draw_complete="onDrowComplet"
@draw_error="onDrawError"
@adjust_complete="onAdjustComplete"
@adjust_error="onAdjustError"
@delete_complete="onDeleteComplete"
/>
</tlbs-map>
</div>
</a-modal>
<tlbs-map
ref="mapRef"
:api-key="config.map.apiKey"
:center="center"
zoom="16"
:control="control"
:options="options"
@map_inited="onMapInited"
>
<tlbs-geometry-editor
ref="editorRef"
action-mode="draw"
selectable
@draw_complete="onDrowComplet"
@draw_error="onDrawError"
@adjust_complete="onAdjustComplete"
@adjust_error="onAdjustError"
@delete_complete="onDeleteComplete"
/>
</tlbs-map>
</div>
</a-modal>
</div>
</template>
<script setup>
import { ref, reactive, defineProps } from 'vue'
import { callOperate } from '@/apis/call.js'
import { message } from 'ant-design-vue'
import { isNullOrEmpty } from '@/utils/tools.js'
import config from '@/utils/config.js'
const props = defineProps({
onCallBack: {
type: Function,
required: true
},
openTitle: {
type: String,
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]);
}
import { callOperate } from '@/apis/call.js'
import { message } from 'ant-design-vue'
import { isNullOrEmpty } from '@/utils/tools.js'
import config from '@/utils/config.js'
const props = defineProps({
onCallBack: {
type: Function,
required: true
},
openTitle: {
type: String,
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 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 formData = ref({
"regionId": "",
"regionName": "",
"simpleName": "",
"zoneId": "",
"points": [],
"shapeType": 2, // 1: 2:
"radius": 0, //
});
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]);
let timer = null;
const loadMap = (dataRegion) => {
if (editorRef.value) {
clearTimeout(timer);
if (dataRegion) {
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();
}
}
const ClearEditor = () => {
editorRef.value.editor.select([]);
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
editorRef.value.circle.setGeometries([]);
editorRef.value.polygon.setGeometries([]);
else {
timer = setTimeout(() => {
loadMap(dataRegion);
}, 1000)
}
};
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 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();
}
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(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
{
message.error("请先绘制区域!")
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;
}
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) => {
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);
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([]);
}
};
// editorRef.value.polygon.setGeometries([]);
}
};
</script>
<style>
@ -318,13 +323,13 @@ import { ref, reactive, defineProps } from 'vue'
display: flex;
flex-direction: column;
height: calc(100vh);
border-radius:0 !important;
border-radius: 0 !important;
}
.full-modal .ant-modal-body {
.full-modal .ant-modal-body {
flex: 1;
}
.button-panel{
.button-panel {
position: absolute;
bottom: 55px;
right: 35px;
@ -334,7 +339,7 @@ import { ref, reactive, defineProps } from 'vue'
background-color: rgb(255, 255, 255, 0.8);
padding: 15px;
}
.button-panel button{
.button-panel button {
width: 100%;
border-radius: 0px !important;
margin-bottom: 10px;