|
|
@@ -1,19 +1,34 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
<map class="my_app" id="myMap" :longitude="myLocation.longitude" :latitude="myLocation.latitude" :scale="scale"
|
|
|
:markers="markers" :enable-satellite="mapParams.enableSatellite" :enable-traffic="mapParams.enableTraffic"
|
|
|
show-location :polyline="polylines" enable-3D show-compass enable-overlooking @markertap="bindMarkertap"
|
|
|
style="width: 100%;height: 50vh;">
|
|
|
</map>
|
|
|
+ <!-- #endif -->
|
|
|
+
|
|
|
+ <!-- #ifdef APP -->
|
|
|
+ <googleMap keyId="1" width="100%" height='calc(50vh - 0rpx)' v-if="myLocation.latitude" :mapData='{
|
|
|
+ markers,
|
|
|
+ type:3,
|
|
|
+ polylines
|
|
|
+ }' :myLocation='myLocation'></googleMap>
|
|
|
+ <!-- #endif -->
|
|
|
+
|
|
|
<view class="car-info">
|
|
|
<view class="info-top flex-row flex-between">
|
|
|
<view class="top-left">
|
|
|
- <view>{{trackInfo.car_name}}</view>
|
|
|
- <view>{{trackInfo.license_plate_num}}</view>
|
|
|
+ <view>{{carInfo.car_name}}</view>
|
|
|
+ <view>{{carInfo.license_plate_number}}</view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <image class="img"
|
|
|
+ :src="carInfo.model_images || 'https://qiniu.bms16.com/FguJzvAGtd4AdhDKXVLUo7XiMxWQ'"
|
|
|
+ mode="aspectFill"></image>
|
|
|
</view>
|
|
|
- <view><img src="https://qiniu.bms16.com/FguJzvAGtd4AdhDKXVLUo7XiMxWQ" /></view>
|
|
|
</view>
|
|
|
- <view class="ctime">{{tools.formatTime(trackInfo.hire_begin_time)}}</view>
|
|
|
+ <view class="ctime">{{time}}</view>
|
|
|
<view class="info-center flex-row">
|
|
|
<view class="center-left flex-row">
|
|
|
<view></view>
|
|
|
@@ -31,7 +46,7 @@
|
|
|
<view>行驶里程</view>
|
|
|
</view>
|
|
|
<view class="bottom-item">
|
|
|
- <view>{{tools.toFix(trackInfo.using_time/3600)}}<text>h</text></view>
|
|
|
+ <view>{{tools.toFix((trackInfo.using_time || 0) /3600)}}<text>h</text></view>
|
|
|
<view>骑行时长</view>
|
|
|
</view>
|
|
|
<view class="bottom-item">
|
|
|
@@ -49,6 +64,7 @@
|
|
|
<script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
|
|
|
<script module="tools" lang="sjs" src="@/pages/common/wxs/tools.sjs"></script>
|
|
|
<script>
|
|
|
+ import googleMap from "@/component/googleMap/googleMap";
|
|
|
var common = require('../../common/common.js');
|
|
|
var amap = require('../../common/amap-wx.js');
|
|
|
var config = require('../../common/config.js');
|
|
|
@@ -57,8 +73,13 @@
|
|
|
var request = require('../../common/request.js');
|
|
|
var storage = require('../../common/storage.js');
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ googleMap,
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
+ time:'未知',
|
|
|
+ carInfo: {},
|
|
|
id: 0, // 使用 marker点击事件 需要填写id
|
|
|
title: 'map',
|
|
|
// markers: [],
|
|
|
@@ -82,7 +103,7 @@
|
|
|
points: [],
|
|
|
pointIndex: 0,
|
|
|
isPageUnloaded: false,
|
|
|
- polylines: [], // 路线
|
|
|
+ polylines: {}, // 路线
|
|
|
markers: [], // 标记点
|
|
|
trackInfo: {},
|
|
|
plate_number: ''
|
|
|
@@ -93,18 +114,19 @@
|
|
|
*/
|
|
|
onLoad(options) {
|
|
|
console.log(uni.getStorageSync('car_info'))
|
|
|
+ this.carInfo = uni.getStorageSync('car_info')
|
|
|
this.plate_number = options.plate_number
|
|
|
const me = this
|
|
|
// common.loading();
|
|
|
const storedLocation = uni.getStorageSync('user_current_location');
|
|
|
if (storedLocation.longitude && storedLocation.latitude) {
|
|
|
// 如果本地有存储的定位信息，则直接使用
|
|
|
- me.setData({
|
|
|
+ this.setData({
|
|
|
myLocation: storedLocation
|
|
|
})
|
|
|
- me.loadTrackInfo()
|
|
|
+ // this.loadTrackInfo()
|
|
|
} else {
|
|
|
- me.getLocationAndSave();
|
|
|
+ this.getLocationAndSave();
|
|
|
}
|
|
|
this.init()
|
|
|
},
|
|
|
@@ -118,73 +140,85 @@
|
|
|
async init() {
|
|
|
let {
|
|
|
data
|
|
|
- } = await request.postApi(config_gyq.API_DEVICE_TRACK, {
|
|
|
- "macid": "013656219992",
|
|
|
- "from": 1742572800,
|
|
|
- "to": 1742659199,
|
|
|
- "language": ""
|
|
|
+ } = await request.postApi(config_gyq.API_CAR_TRACK_INFO, {
|
|
|
+ car_sn: this.carInfo.car_sn,
|
|
|
})
|
|
|
- console.log(data)
|
|
|
- },
|
|
|
- loadTrackInfo() {
|
|
|
- const me = this
|
|
|
- http.postApi(config.API_DAYHIRE_CAR_TRACK_INFO, {
|
|
|
- plate_number: this.plate_number
|
|
|
- }, (resp) => {
|
|
|
- if (resp.data.code === 200) {
|
|
|
- me.trackInfo = resp.data.data
|
|
|
- me.pointsList = resp.data.data.points
|
|
|
- //接口返回描绘线段
|
|
|
- me.polylines = [{
|
|
|
- points: resp.data.data.points,
|
|
|
- color: "#0BD28E",
|
|
|
- width: 6
|
|
|
- }]
|
|
|
- if (me.pointsList.length >= 2) {
|
|
|
- const len = me.pointsList.length - 1
|
|
|
- //点收尾标记
|
|
|
- me.markers = [{
|
|
|
- id: 1,
|
|
|
- latitude: me.pointsList[0].latitude,
|
|
|
- longitude: me.pointsList[0].longitude,
|
|
|
- iconPath: 'https://qiniu.bms16.com/Fo5xXb4G6AEQpRcqZybvV29jVvIw',
|
|
|
- width: 30,
|
|
|
- height: 40
|
|
|
- }, {
|
|
|
- id: 2,
|
|
|
- latitude: me.pointsList[len].latitude,
|
|
|
- longitude: me.pointsList[len].longitude,
|
|
|
- iconPath: 'https://qiniu.bms16.com/FgfUVOFAeY-tXUilteSpVem3HTb7',
|
|
|
- width: 30,
|
|
|
- height: 34
|
|
|
- }]
|
|
|
- me.getAddressName(me.pointsList[0].latitude, me.pointsList[0].longitude, 1)
|
|
|
- me.getAddressName(me.pointsList[len].latitude, me.pointsList[len].longitude, 2)
|
|
|
- } else {
|
|
|
- me.markers = [{
|
|
|
- id: 2,
|
|
|
- latitude: me.pointsList[0] ? me.pointsList[0].latitude : me.myLocation
|
|
|
- .latitude,
|
|
|
- longitude: me.pointsList[0] ? me.pointsList[0].longitude : me.myLocation
|
|
|
- .longitude,
|
|
|
- iconPath: 'https://qiniu.bms16.com/FgfUVOFAeY-tXUilteSpVem3HTb7',
|
|
|
- width: 48,
|
|
|
- height: 52
|
|
|
- }]
|
|
|
- // 这里的markers的length只为1
|
|
|
- me.getAddressName(me.markers[0].latitude, me.markers[0].longitude, 1)
|
|
|
+ if (data.code == 200) {
|
|
|
+ this.trackInfo = data.data
|
|
|
+ this.pointsList = data.data.points.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ lng: item.longitude,
|
|
|
+ lat: item.latitude,
|
|
|
}
|
|
|
- console.log(me.markers, 'me.markers');
|
|
|
+ })
|
|
|
+
|
|
|
+ if(this.pointsList.length < 1){
|
|
|
+ common.simpleToast('暂无骑行数据！')
|
|
|
+ setTimeout(function() {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ });
|
|
|
+ }, 800);
|
|
|
+ return
|
|
|
+ }
|
|
|
+ //接口返回描绘线段
|
|
|
+ // #ifdef APP
|
|
|
+ this.polylines = {
|
|
|
+ points: this.pointsList,
|
|
|
+ color: "#0BD28E",
|
|
|
+ width: 6
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ this.polylines = [{
|
|
|
+ points: this.pointsList,
|
|
|
+ color: "#0BD28E",
|
|
|
+ width: 6
|
|
|
+ }]
|
|
|
+ if(this.pointsList.length > 0){
|
|
|
+ this.time = this.pointsList[0].time
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ if (this.pointsList.length >= 2) {
|
|
|
+ const len = this.pointsList.length - 1
|
|
|
+ //点收尾标记
|
|
|
+ this.markers = [{
|
|
|
+ id: 1,
|
|
|
+ latitude: this.pointsList[0].latitude,
|
|
|
+ longitude: this.pointsList[0].longitude,
|
|
|
+ iconPath: 'https://qiniu.bms16.com/Fo5xXb4G6AEQpRcqZybvV29jVvIw',
|
|
|
+ width: 30,
|
|
|
+ height: 40
|
|
|
+ }, {
|
|
|
+ id: 2,
|
|
|
+ latitude: this.pointsList[len].latitude,
|
|
|
+ longitude: this.pointsList[len].longitude,
|
|
|
+ iconPath: 'https://qiniu.bms16.com/FgfUVOFAeY-tXUilteSpVem3HTb7',
|
|
|
+ width: 30,
|
|
|
+ height: 34
|
|
|
+ }]
|
|
|
+ this.getAddressName(this.pointsList[0].latitude, this.pointsList[0].longitude, 1)
|
|
|
+ this.getAddressName(this.pointsList[len].latitude, this.pointsList[len].longitude, 2)
|
|
|
} else {
|
|
|
- // 默认返回上一个页面再提示报错
|
|
|
- // uni.navigateBack({
|
|
|
- // delta: 1
|
|
|
- // })
|
|
|
- common.simpleToast(resp.data.msg)
|
|
|
+ this.markers = [{
|
|
|
+ id: 2,
|
|
|
+ latitude: this.pointsList[0] ? this.pointsList[0].latitude : this.myLocation
|
|
|
+ .latitude,
|
|
|
+ longitude: this.pointsList[0] ? this.pointsList[0].longitude : this.myLocation
|
|
|
+ .longitude,
|
|
|
+ iconPath: 'https://qiniu.bms16.com/FgfUVOFAeY-tXUilteSpVem3HTb7',
|
|
|
+ width: 48,
|
|
|
+ height: 52
|
|
|
+ }]
|
|
|
+ // 这里的markers的length只为1
|
|
|
+ this.getAddressName(this.markers[0].latitude, this.markers[0].longitude, 1)
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
|
|
|
+ }
|
|
|
+ console.log(data)
|
|
|
+ },
|
|
|
getAddressName(latitude, longitude, type) {
|
|
|
const pData = {
|
|
|
lng: longitude,
|
|
|
@@ -221,10 +255,10 @@
|
|
|
longitude: res.longitude,
|
|
|
latitude: res.latitude
|
|
|
}
|
|
|
- me.setData({
|
|
|
+ this.setData({
|
|
|
myLocation: myLocation
|
|
|
})
|
|
|
- me.loadTrackInfo()
|
|
|
+ // this.loadTrackInfo()
|
|
|
uni.setStorageSync('user_current_location', myLocation);
|
|
|
},
|
|
|
fail: function(res) {
|
郭宇琦