diff --git a/ebike-operate/src/assets/endPoint.png b/ebike-operate/src/assets/endPoint.png new file mode 100644 index 0000000..9be5663 Binary files /dev/null and b/ebike-operate/src/assets/endPoint.png differ diff --git a/ebike-operate/src/assets/startPoint.png b/ebike-operate/src/assets/startPoint.png new file mode 100644 index 0000000..aa2a460 Binary files /dev/null and b/ebike-operate/src/assets/startPoint.png differ diff --git a/ebike-operate/src/views/FinanCecenter/RefundApplication/CyclingOrder/index.vue b/ebike-operate/src/views/FinanCecenter/RefundApplication/CyclingOrder/index.vue index 9dcfd60..f2902f9 100644 --- a/ebike-operate/src/views/FinanCecenter/RefundApplication/CyclingOrder/index.vue +++ b/ebike-operate/src/views/FinanCecenter/RefundApplication/CyclingOrder/index.vue @@ -869,6 +869,8 @@ const viewOrderInfo = (record) => { ebikeCode: record['ebikeCode'], startTime: record['startTime'], endTime: record['endTime'], + ridePoint: record['ridePoint'], + returnPoint: record['returnPoint'], } formModelOrderInfo.value.openForm(params); } else { diff --git a/ebike-operate/src/views/form/cyclingorderrefund/orderinfo/CyclingTrajectory.vue b/ebike-operate/src/views/form/cyclingorderrefund/orderinfo/CyclingTrajectory.vue index eb61ff0..4de8537 100644 --- a/ebike-operate/src/views/form/cyclingorderrefund/orderinfo/CyclingTrajectory.vue +++ b/ebike-operate/src/views/form/cyclingorderrefund/orderinfo/CyclingTrajectory.vue @@ -5,23 +5,30 @@ > - + +
+ +
@@ -44,11 +51,42 @@ const props = defineProps({ }); 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 points = ref([]) +const polylineRef = ref(null); +const center = ref({ lat: 0, lng: 0 }); +const zoom = ref(16); + +const control = ref({ + scale: {}, + zoom: { + position: 'topRight', + }, +}); + +const geometriesLine = ref([]); +const geometriesPoint = ref([]); + +const styles = ref({ + polyline: { + color: '#2C68FF', // 线填充色 + borderWidth: 1, // 边线宽度 + borderColor: '#004EE1', // 边线颜色 + }, + markerStart: { + width: 40, + height: 40, + src: '/src/assets/startPoint.png' + }, + markerEnd: { + width: 40, + height: 40, + src: '/src/assets/endPoint.png' + }, +}); + +const options = ref({ + zIndex: 1, +}); + const onMapInited = () => { if (mapRef.value) { const windowWidth = window.innerWidth; @@ -71,47 +109,42 @@ const onMapInited = () => { return } if (res.data) { - points.value = res.data - loadGeometry(); + center.value = { lat: props.orderParams.ridePoint.split(",")[1], lng: props.orderParams.ridePoint.split(",")[0] } + const trajectory = [{ lat: props.orderParams.ridePoint.split(",")[1], lng: props.orderParams.ridePoint.split(",")[0] }]; + res.data.map(item => { + trajectory.push({ lat: item['latitude'], lng: item['longitude'] }) + }) + trajectory.push({ lat: props.orderParams.returnPoint.split(",")[1], lng: props.orderParams.returnPoint.split(",")[0] }) + geometriesLine.value = [ + { + id: 'polyline1', + styleId: 'polyline', + paths: trajectory, + properties: { + title: 'polyline', + }, + } + ] + + geometriesPoint.value = [ + { + styleId: 'markerStart', position: { + lat: parseFloat(props.orderParams.ridePoint.split(",")[1]), + lng: parseFloat(props.orderParams.ridePoint.split(",")[0]) + } + }, + { + styleId: 'markerEnd', position: { + lat: parseFloat(props.orderParams.returnPoint.split(",")[1]), + lng: parseFloat(props.orderParams.returnPoint.split(",")[0]) + } + }, + ] } }); } } }; -const loadGeometry = () => { - - if (points.value.length > 0) { - const circleGeometries = [];//editorRef.value.circle.getGeometries(); - if (circleGeometries.length > 0) { - circleGeometries.forEach((geometry) => { - editorRef.value.circle.remove(geometry); // 删除之前的图形数据 - }); - } - const trajectory = points.value.map(item => { - return new TMap.LatLng(item['latitude'], item['longitude']) - }) - const shapeId = getGUID() - circleGeometries.push({ - id: shapeId, - style: new TMap.PolylineStyle({ - 'color': '#blue', //线填充色 - 'width': 6, //折线宽度 - 'borderWidth': 5, //边线宽度 - 'borderColor': 'red', //边线颜色 - 'lineCap': 'round' //线端头方式 - }), - paths: trajectory, - center: new TMap.LatLng(points.value[0].latitude, points.value[0].longitude), - }); - 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, // 设置地图边界的内边距 - }); - } -} diff --git a/ebike-operate/src/views/form/cyclingorderrefund/orderinfo/OrderInfo.vue b/ebike-operate/src/views/form/cyclingorderrefund/orderinfo/OrderInfo.vue index a7c0e8f..d3e22ff 100644 --- a/ebike-operate/src/views/form/cyclingorderrefund/orderinfo/OrderInfo.vue +++ b/ebike-operate/src/views/form/cyclingorderrefund/orderinfo/OrderInfo.vue @@ -43,6 +43,8 @@ const openForm = (params = {}) => { orderParams.value['ebikeCode'] = params['ebikeCode']; orderParams.value['startTime'] = params['startTime']; orderParams.value['endTime'] = params['endTime']; + orderParams.value['ridePoint'] = params['ridePoint']; + orderParams.value['returnPoint'] = params['returnPoint']; } };