attiya/ebike-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

接口对接

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ebike-operate/src/views/Urban/OperateRegion/index.vue
View File

@ -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);
} }

155
ebike-operate/src/views/Urban/OperateRegionMap/index.vue
View File

@ -11,10 +11,19 @@
:afterClose="handleClose" :afterClose="handleClose"
> >
<div class="button-panel"> <div class="button-panel">
<a-button type="primary" @click="onEditorClear">{{ buttonName }}</a-button> <a-button
<a-button type="primary" @click="onEditorComplete">完成</a-button> type="primary"
@click="onEditorClear"
>{{ buttonName }}</a-button>
<a-button
type="primary"
@click="onEditorComplete"
>完成</a-button>
</div> </div>
<div class="map-container" style="width: auto; height: auto;"> <div
class="map-container"
style="width: auto; height: auto;"
>
<tlbs-map <tlbs-map
ref="mapRef" ref="mapRef"
:api-key="config.map.apiKey" :api-key="config.map.apiKey"
@ -42,11 +51,11 @@
<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
@ -55,24 +64,24 @@ import { ref, reactive, defineProps } from 'vue'
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 open = ref(false);
const showModal = (data) => { const showModal = (data) => {
if (data) { if (data) {
loadMap(data); loadMap(data);
} }
open.value = true; open.value = true;
}; };
const handleClose = () => { const handleClose = () => {
open.value = false; open.value = false;
ClearEditor(); ClearEditor();
if (props.onCallBack) { if (props.onCallBack) {
props.onCallBack(formData.value); props.onCallBack(formData.value);
} }
}; };
defineExpose({ showModal }); defineExpose({ showModal });
const formData = ref({ const formData = ref({
"regionId": "", "regionId": "",
"regionName": "", "regionName": "",
"simpleName": "", "simpleName": "",
@ -80,15 +89,15 @@ import { ref, reactive, defineProps } from 'vue'
"points": [], "points": [],
"shapeType": 2, // 1:圆形 2:多边形 "shapeType": 2, // 1:圆形 2:多边形
"radius": 0, // 圆形半径 "radius": 0, // 圆形半径
}); });
let timer = null; let timer = null;
const loadMap = (dataRegion) => { const loadMap = (dataRegion) => {
if (editorRef.value) { if (editorRef.value) {
clearTimeout(timer); clearTimeout(timer);
if (dataRegion) { if (dataRegion) {
const { regionId } = dataRegion; const { regionId } = dataRegion;
callOperate("/ebikeRegion/getRegionInfo/" + regionId, {}, "get").then((res) => { callOperate("/ebikeRegion/getOperationById?regionId=" + regionId, {}, "get").then((res) => {
if (res.code != 200) { if (res.code != 200) {
message.error(res.message) message.error(res.message)
return return
@ -107,23 +116,22 @@ import { ref, reactive, defineProps } from 'vue'
}); });
} }
} }
else else {
{
timer = setTimeout(() => { timer = setTimeout(() => {
loadMap(dataRegion); loadMap(dataRegion);
}, 1000) }, 1000)
} }
}; };
let shapeId = null; let shapeId = null;
const loadGeometry = () => { const loadGeometry = () => {
const { points, shapeType, regionId, radius } = formData.value; const { points, shapeType, regionId, radius } = formData.value;
shapeId = 'polygon' + regionId; shapeId = 'polygon' + regionId;
if (shapeType == 1) { if (shapeType == 1) {
shapeId = 'circle' + regionId; shapeId = 'circle' + regionId;
} }
if (points) { if (points) {
if(shapeType == 1){ if (shapeType == 1) {
const circleGeometries = [];//editorRef.value.circle.getGeometries(); const circleGeometries = [];//editorRef.value.circle.getGeometries();
if (circleGeometries.length > 0) { if (circleGeometries.length > 0) {
circleGeometries.forEach((geometry) => { circleGeometries.forEach((geometry) => {
@ -144,11 +152,11 @@ import { ref, reactive, defineProps } from 'vue'
//设置视野范围 //设置视野范围
const mycircle = editorRef.value.circle.getGeometryById(shapeId); const mycircle = editorRef.value.circle.getGeometryById(shapeId);
const boundary = TMap.geometry.computeBoundingRectangle(mycircle.paths); const boundary = TMap.geometry.computeBoundingRectangle(mycircle.paths);
mapRef.value.map.fitBounds(boundary,{ mapRef.value.map.fitBounds(boundary, {
padding: 100, // 设置地图边界的内边距 padding: 100, // 设置地图边界的内边距
}); });
} }
else if(shapeType == 2){ else if (shapeType == 2) {
const paths = []; const paths = [];
points.forEach((point) => { points.forEach((point) => {
paths.push(new TMap.LatLng(point.latitude, point.longitude)); paths.push(new TMap.LatLng(point.latitude, point.longitude));
@ -169,7 +177,7 @@ import { ref, reactive, defineProps } from 'vue'
//设置视野范围 //设置视野范围
const mypolygon = editorRef.value.polygon.getGeometryById(shapeId); const mypolygon = editorRef.value.polygon.getGeometryById(shapeId);
const boundary = TMap.geometry.computeBoundingRectangle(mypolygon.paths); const boundary = TMap.geometry.computeBoundingRectangle(mypolygon.paths);
mapRef.value.map.fitBounds(boundary,{ mapRef.value.map.fitBounds(boundary, {
padding: 100, // 设置地图边界的内边距 padding: 100, // 设置地图边界的内边距
}); });
} }
@ -177,14 +185,14 @@ import { ref, reactive, defineProps } from 'vue'
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]);
} }
} }
const mapRef = ref(null); const mapRef = ref(null);
const center = ref( config.map.center ); const center = ref(config.map.center);
const control = ref({ scale: {}, zoom: { position: 'topRight',},}); const control = ref({ scale: {}, zoom: { position: 'topRight', }, });
const options = ref({ renderOptions: { renderOptions: true, }}); const options = ref({ renderOptions: { renderOptions: true, } });
const editorRef = ref(null); const editorRef = ref(null);
const onMapInited = () => { const onMapInited = () => {
if (mapRef.value) { if (mapRef.value) {
const windowWidth = window.innerWidth; const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight; const windowHeight = window.innerHeight;
@ -196,53 +204,52 @@ import { ref, reactive, defineProps } from 'vue'
map.resize(calculatedWidth, calculatedHeight); map.resize(calculatedWidth, calculatedHeight);
} }
} }
}; };
const buttonName = ref('清除'); const buttonName = ref('清除');
const onDrowComplet = (geomeytry) => { const onDrowComplet = (geomeytry) => {
//console.log("onDrowComplet",geomeytry); //console.log("onDrowComplet",geomeytry);
if(geomeytry.id){ if (geomeytry.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([geomeytry.id]); editorRef.value.editor.select([geomeytry.id]);
} }
}; };
const onDrawError = (e) => { const onDrawError = (e) => {
ClearEditor(); ClearEditor();
editorRef.value.editor.stop(); editorRef.value.editor.stop();
}; };
const onAdjustComplete = (geomeytry) => { const onAdjustComplete = (geomeytry) => {
//console.log("onAdjustComplete",geomeytry); //console.log("onAdjustComplete",geomeytry);
}; };
const onAdjustError = (e) => { const onAdjustError = (e) => {
ClearEditor(); ClearEditor();
loadGeometry(); loadGeometry();
}; };
const onEditorClear = () => { const onEditorClear = () => {
if(!isNullOrEmpty(shapeId)){ if (!isNullOrEmpty(shapeId)) {
loadGeometry(); loadGeometry();
} }
else else {
{
ClearEditor(); ClearEditor();
} }
} }
const ClearEditor = () => { const ClearEditor = () => {
editorRef.value.editor.select([]); editorRef.value.editor.select([]);
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([]);
} }
const onEditorComplete = () => { const onEditorComplete = () => {
if(editorRef.value.editor.getSelectedList().length > 0){ if (editorRef.value.editor.getSelectedList().length > 0) {
const selectedList = editorRef.value.editor.getSelectedList(); const selectedList = editorRef.value.editor.getSelectedList();
const geometry = selectedList[0]; const geometry = selectedList[0];
console.log("onEditorComplete",geometry); console.log("onEditorComplete", geometry);
if(geometry.id){ if (geometry.id) {
if(geometry.radius && geometry.center){ if (geometry.radius && geometry.center) {
formData.value.radius = geometry.radius; formData.value.radius = geometry.radius;
formData.value.points = [ formData.value.points = [
{ {
@ -252,7 +259,7 @@ import { ref, reactive, defineProps } from 'vue'
]; ];
formData.value.shapeType = 1; formData.value.shapeType = 1;
} }
else if(geometry.paths){ else if (geometry.paths) {
formData.value.radius = 0; formData.value.radius = 0;
formData.value.points = geometry.paths.map((point) => { formData.value.points = geometry.paths.map((point) => {
return { return {
@ -266,7 +273,8 @@ import { ref, reactive, defineProps } from 'vue'
}); });
formData.value.shapeType = 2; formData.value.shapeType = 2;
} }
if(!isNullOrEmpty(formData.value.regionId)){ debugger
if (!isNullOrEmpty(formData.value.regionId)) {
callOperate("/ebikeRegion/updateOperation", formData.value, "post").then((res) => { callOperate("/ebikeRegion/updateOperation", formData.value, "post").then((res) => {
if (res.code == 200) { if (res.code == 200) {
message.success(res.message, 3, handleClose); message.success(res.message, 3, handleClose);
@ -275,36 +283,33 @@ import { ref, reactive, defineProps } from 'vue'
} }
}); });
} }
else else {
{
handleClose(); handleClose();
} }
} }
} }
else else {
{
message.error("请先绘制区域！") 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;